/* ==========================================================
   Desay Series Configurator — STANDALONE
   Scope: .desay-config-root
   No external CSS dependencies required (Font Awesome optional
   for the schlix icon accent under active pitch).
   ========================================================== */

/* ---- quick knobs (theme vars) ---- */
.desay-config-root{
  --g:14px;                             /* grid gap */
  --panel-radius:10px;                  /* panel & card corners */
  --panel-bg:rgba(255,255,255,1);       /* frosted canvas behind grid */
  --card-bg:#fff;                       /* variant card background */
  --card-stroke:rgba(0,0,0,.07);        /* subtle inner border on cards */
  --card-shadow:0 10px 28px rgba(0,0,0,.10); /* card drop shadow */
  --line:#e9ecef;                       /* light borders/dividers */
  --soft:#777;                          /* muted labels */
  --cad:#ff6600;                        /* CAD numbers */
}

/* ====== OUTER WRAP ====== */
.desay-config-root .fam500-wrap{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;  /* left form + 2 columns of cards */
  gap:28px;
  padding:12px;
  border-radius:var(--panel-radius);
  background:var(--panel-bg);
  backdrop-filter:saturate(1.05) blur(1.5px);
  align-items:start;                    /* top-align all columns */
  isolation:isolate;
}

/* ====== LEFT GRID (inputs/info) ====== */
.desay-config-root .fam500-left{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--g);
}
.desay-config-root .fam500-row{ grid-column:1 / -1; display:contents; }
.desay-config-root .span2{ grid-column:span 2; }

.desay-config-root .box{ display:flex; flex-direction:column; }
.desay-config-root .box label{
  font-size:12px;
  color:var(--soft);
  margin-bottom:6px;
}

/* unified input height for all fields (editable & readonly) */
.desay-config-root .inp{
  box-sizing:border-box;
  width:100%;
  height:48px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font:inherit;
  line-height:1;
}
.desay-config-root .inp[readonly]{ background:#fafafa; }

/* panels row (500×1000 / 500×750 / 500×500 / custom) */
.desay-config-root .panels{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--g);
}
.desay-config-root .panels .inp[readonly]{ background:#fff; }

/* generic 4-up rows */
.desay-config-root .four{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--g);
}

/* toolbar line (currency toggle row) */
.desay-config-root .config-toolbar{
  grid-column:1 / -1;
  margin:2px 0 0;
}

/* ====== PITCH LINKS ====== */
.desay-config-root .pitches{
  grid-column:1 / -1;
  margin:4px 0 8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

/* baseline link */
.desay-config-root .pitches .pitch-link{
  position:relative;
  background:transparent;
  border:0;
  padding:0 2px 12px;                   /* space for the icon underline */
  cursor:pointer;
  font:inherit;
  font-weight:400;
  letter-spacing:.01em;
  text-decoration:none;
}
.desay-config-root .pitches .sep{
  opacity:.45;
  margin:0 2px;
  user-select:none;
  pointer-events:none;
}

/* FA schlix "underline" (centered under active link) */
.desay-config-root .pitches .pitch-link i.fab.fa-schlix{
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%) translateY(4px);
  font-size:12px;
  line-height:1;
  opacity:0;
  color:currentColor;                   /* inherit link color by default */
  pointer-events:none;
  transition:opacity .16s ease, transform .18s ease;
}

/* active state */
.desay-config-root .pitches .pitch-link.active .txt{ color:#3366FF; }
.desay-config-root .pitches .pitch-link.active i.fab.fa-schlix{
  color:#3366FF;
  opacity:.95;
  transform:translateX(-50%) translateY(0);
}

/* hover hint (keeps UI gentle) */
.desay-config-root .pitches .pitch-link:hover i.fab.fa-schlix{
  color:#3366FF;
  opacity:.7;
}

/* keyboard focus */
.desay-config-root .pitches .pitch-link:focus-visible{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
  border-radius:6px;
}

/* ====== VARIANT CARDS ====== */
.desay-config-root .variant-results{ align-self:start; }
.desay-config-root .variant-results .variant-block{
  background:var(--card-bg);
  border-radius:var(--panel-radius);
  padding:18px;
  margin-bottom:18px;
  color:#222;
  /* define: drop shadow + subtle inner stroke for crisp edges */
  box-shadow:var(--card-shadow), 0 0 0 1px var(--card-stroke) inset;
}
.desay-config-root .variant-title{
  font-weight:600;
  margin-bottom:6px;
  color:#111;
}
.desay-config-root .variant-divider{
  border:0;
  border-top:1px solid var(--line);
  border-top-color:rgba(0,0,0,.08);     /* slightly crisper divider */
  margin:10px 0 12px;
}
.desay-config-root .variant-line{
  display:flex;
  justify-content:space-between;
  margin:6px 0;
  color:#333;
}
.desay-config-root .variant-line.total{ font-weight:600; }
.desay-config-root .price-number.cad{ color:var(--cad); }

/* remove any legacy "show more +" artifacts (if present anywhere) */
.desay-config-root .more,
.desay-config-root .show-more-container,
.desay-config-root .show-more-btn{
  display:none !important;
}

/* ====== RESPONSIVE ====== */
@media (max-width:1080px){
  .desay-config-root .fam500-wrap{ grid-template-columns:1fr; }
}




/* --- Attention hint on empty size inputs --- */
.desay-config-root .inp::placeholder{
  color:#ff6600;                /* your brand orange */
  opacity:.95;
}
.desay-config-root .inp:placeholder-shown{
  border-color:#ff6600;
}

/* gentle two-pulse glow when empty and not focused */
@keyframes hintPulse {
  0%   { box-shadow:0 0 0 0 rgba(255,102,0,.35); }
  70%  { box-shadow:0 0 0 10px rgba(255,102,0,0); }
  100% { box-shadow:0 0 0 0 rgba(255,102,0,0); }
}
.desay-config-root .inp:placeholder-shown:not(:focus){
  animation: hintPulse 1.2s ease-in-out 2;
}



/* CAD price color — works for both old .price-number and new .value spans */
.desay-config-root { --cad:#ff6600; }

.desay-config-root .price-number.cad,
.desay-config-root .variant-results .value.cad {
  color: var(--cad);
}

/* keep totals bold but let color apply */
.desay-config-root .variant-line.total .value { font-weight: 600; }