/* Fallback vars */
:root{ --mint: 52,245,197; }


/* Sell-My.Tech Quote Form — scoped styles */
.smtq, .smtq *{ box-sizing:border-box; }
.smtq{ color:#fff; }

/* Provide core SMT styles if shortcode used outside the .smt shell */
.smtq.smt-ui{
  --bg:#050608;
  --panel: rgba(255,255,255,.045);
  --line: rgba(255,255,255,.12);
  --mint: 52,245,197;
  background: transparent;
}
.smtq.smt-ui .smt-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:18px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateZ(0);
  --auraSnap: 0;
  --ring: 1px;
  --ringHover: 5px;
}
.smtq.smt-ui .smt-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:19px;
  padding: var(--ring);
  background: linear-gradient(135deg,
    rgba(34,211,238,.10) 0%,
    rgba(34,211,238,.10) 30%,
    rgba(52,245,197,.08) 65%,
    rgba(255,255,255,.06) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  z-index:1;
}
.smtq.smt-ui .smt-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  z-index:1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.smtq.smt-ui .smt-card > *{ position:relative; z-index:2; }

/* Buttons fallback (if used outside .smt) */
.smtq.smt-ui .smt-btn{
  background: linear-gradient(90deg, rgba(34,211,238,1), rgba(52,245,197,1));
  color:#061017;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 22px 80px -28px rgba(34,211,238,.45),
    0 22px 80px -28px rgba(52,245,197,.35);
  position: relative;
  overflow:hidden;
}
.smtq.smt-ui .smt-btn .smt-btn-hoverbg{ position:absolute; inset:0; background: rgba(0,0,0,.92); opacity:0; transition:opacity .4s ease; }
.smtq.smt-ui .smt-btn .smt-btn-label{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:.5rem; }
.smtq.smt-ui .smt-btn:hover .smt-btn-hoverbg,
.smtq.smt-ui .smt-btn:focus-visible .smt-btn-hoverbg{ opacity:1; }
.smtq.smt-ui .smt-btn:hover,
.smtq.smt-ui .smt-btn:focus-visible{ color:#fff; }
.smtq.smt-ui .smt-btn-outline{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
}

/* Ensure the primary CTA hover behaviour matches the main site button, even inside the .smt shell */
.smtq .smt-btn{ position:relative; overflow:hidden; }
.smtq .smt-btn .smt-btn-hoverbg{ position:absolute; inset:0; background: rgba(0,0,0,.92); opacity:0; transition:opacity .4s ease; }
.smtq .smt-btn .smt-btn-label{ position:relative; z-index:2; }
.smtq .smt-btn:hover .smt-btn-hoverbg,
.smtq .smt-btn:focus-visible .smt-btn-hoverbg{ opacity:1; }
.smtq .smt-btn:hover,
.smtq .smt-btn:focus-visible{ color:#fff; }

/* Form elements */
.smtq-field{ display:block; }
.smtq-label{ display:block; font-size:12px; font-weight:800; color: rgba(255,255,255,.72); margin-bottom:6px; }
.smtq .smtq-input{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.35) !important;
  padding: 12px 12px;
  color:#fff !important;
  outline:none;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.smtq .smtq-input::placeholder{ color: rgba(255,255,255,.35) !important; }
.smtq .smtq-input:focus{
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 0 0 3px rgba(34,211,238,.14);
  background: rgba(0,0,0,.42);
}
.smtq-textarea{ min-height: 110px; resize: vertical; }
.smtq-file{
  width:100%;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.78);
  padding: 12px;
}

/* Progress bar */
.smtq-bar{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.smtq-barFill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(34,211,238,1), rgba(52,245,197,1));
  transition: width .35s cubic-bezier(.16,1,.3,1);
}

/* Grids */
.smtq-grid{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 880px){ .smtq-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

/*
  Option grids
  Use flex-wrap + justify-content:center so incomplete rows always centre.
  (Applies to *every* step, not just the first model grid.)
*/
[data-model-grid],
[data-variant-grid],
[data-qty-grid],
[data-lid-grid],
[data-condition-grid]{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-left:auto;
  margin-right:auto;
}

/* Step 1 (model families): 4-up desktop */
[data-model-grid] .smtq-choice{ flex: 0 1 calc(50% - 12px); max-width: 360px; }
@media (min-width: 640px){ [data-model-grid] .smtq-choice{ flex-basis: calc(33.333% - 12px); } }
@media (min-width: 980px){ [data-model-grid] .smtq-choice{ flex-basis: calc(25% - 12px); } }

/* Step 1a (variants): 3-up desktop, centred when 1–2 items */
[data-variant-grid] .smtq-choice{ flex: 0 1 calc(50% - 12px); max-width: 520px; }
@media (min-width: 760px){ [data-variant-grid] .smtq-choice{ flex-basis: calc(33.333% - 12px); } }

/* Step 2 (single/pair): 2-up */
[data-qty-grid] .smtq-choice{ flex: 0 1 calc(50% - 12px); max-width: 520px; }

/* Step 3 (lids): 3-up desktop */
[data-lid-grid] .smtq-choice{ flex: 0 1 calc(100% - 12px); max-width: 520px; }
@media (min-width: 640px){ [data-lid-grid] .smtq-choice{ flex-basis: calc(33.333% - 12px); max-width: 360px; } }

/* Step 4 (condition): 4-up desktop */
[data-condition-grid] .smtq-choice{ flex: 0 1 calc(50% - 12px); max-width: 360px; }
@media (min-width: 760px){ [data-condition-grid] .smtq-choice{ flex-basis: calc(25% - 12px); } }

.smtq-grid--two{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 760px; }
@media (min-width: 880px){ .smtq-grid--two{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.smtq-grid--three{ grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 640px){ .smtq-grid--three{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.smtq-grid--four{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 760px){ .smtq-grid--four{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.smtq-grid--variants{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 760px){ .smtq-grid--variants{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Choice cards */
.smtq-choice{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  cursor:pointer;
  transition: transform .28s cubic-bezier(.16,1,.3,1), border-color .28s ease, background .28s ease;
}
@media (hover:hover){
  .smtq-choice:hover{ transform: translateY(-2px); border-color: rgba(52,245,197,.45); background: rgba(255,255,255,.05); }
}
.smtq-choice.is-selected{
  border-color: rgba(52,245,197,.85);
  box-shadow: inset 0 0 0 2px rgba(52,245,197,.45), 0 24px 90px -70px rgba(52,245,197,.35);
}
.smtq-choiceInner{ padding: 14px 14px 12px; display:flex; gap:12px; align-items:center; }
.smtq-choiceThumb{
  width:56px; height:56px;
  border-radius:16px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
}
.smtq-choiceThumb img{ width:100%; height:100%; object-fit:cover; display:block; margin:auto; }

/* Condition icons (SVG) should never crop */
.smtq-choice[data-name="condition"] .smtq-choiceThumb img{ object-fit:contain; width:78%; height:78%; }
.smtq-choiceMeta{ min-width:0; }
.smtq-choiceTitle{ font-weight:900; letter-spacing:-.01em; line-height:1.15; }
.smtq-choiceSub{ margin-top:3px; font-size:12px; color: rgba(255,255,255,.55); }
.smtq-choiceBadge{
  position:absolute; top:10px; right:10px;
  font-size:11px; font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.75);
}

/* Variant box */
.smtq-sub{ border-top:1px solid rgba(255,255,255,.10); padding-top: 16px; }
.smtq-link{
  border:0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 14px;
  font-weight: 900;
  color: rgba(255,255,255,.75);
  cursor:pointer;
}
@media (hover:hover){
  .smtq-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
}

/* Alert */
.smtq-alert{
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
  color: rgba(255,255,255,.85);
}
.smtq-alert.is-error{ border-color: rgba(239,68,68,.35); }
.smtq-alert.is-ok{ border-color: rgba(52,245,197,.45); }


/* ---- Layout tweak: image above text + centered + larger thumb ---- */
.smtq-choiceInner{
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 16px 14px 14px;
}
.smtq-choiceThumb{
  width: 118px;
  height: 118px;
  border-radius: 18px;
}
.smtq-choiceThumb img{
  object-fit: contain;
}
.smtq-choiceMeta{
  width: 100%;
}


/* Prevent nested cards inside primary wrapper from inheriting the mint ring */
.is-primary .smtq-not-primary{
  border-color: rgba(255,255,255,.10) !important;
  --ring: 0px !important;
  --glow: 0 !important;
}
.is-primary .smtq-not-primary::before,
.is-primary .smtq-not-primary::after{
  opacity: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Ensure condition/thumb images are perfectly centered */
.smtq-choiceThumb{
  display:grid;
  place-items:center;
}
.smtq-choiceThumb img{
  display:block;
  margin:0 auto;
}