/* Sbaya Mobile — Trade-In Calculator brand skin. Built per
   DESIGN-METHODOLOGY.md tokens from scratch (light-first system,
   matching Contact/About/Returns), not left on Elementor defaults. */

.tic{
  --paper:#FAFAFC; --elev:#F1F2F6; --card:#FFFFFF;
  --line:#E5E6EC; --ink:#0F1115; --soft:#565E6B;
  --blue:#29ABE2; --cyan:#49E0FF;
  max-width:1120px; margin:0 auto;
  padding:clamp(48px,7vw,80px) clamp(24px,4vw,64px);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
}
.tic-hero{ text-align:center; margin-bottom:48px; }
.tic-kicker{
  display:block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--blue); margin-bottom:10px;
}
.tic-hero h1{
  font-size:clamp(28px,3.6vw,46px); font-weight:800; line-height:1.08;
  letter-spacing:-0.02em; margin:0 0 14px;
}
.tic-hero p{ font-size:16px; color:var(--soft); max-width:560px; margin:0 auto; }

.tic-grading{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin-bottom:56px;
}
.tic-grade-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px;
}
.tic-grade-badge{
  display:inline-block; padding:5px 14px; border-radius:100px;
  font-size:13px; font-weight:700; margin-bottom:12px;
}
.tic-grade-aplus{ background:#E9F7EF; color:#1B9E5A; }
.tic-grade-b{ background:#FFF3D6; color:#B8860B; }
.tic-grade-c{ background:#FDEAEA; color:#C0392B; }
.tic-grade-none{ background:var(--elev); color:var(--soft); }
.tic-grade-card p{ font-size:13.5px; line-height:1.6; color:var(--soft); margin:0; }

.tic-calc{
  display:grid; grid-template-columns:1fr auto 1fr; gap:24px;
  align-items:start; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:clamp(24px,4vw,40px); margin-bottom:32px;
}
.tic-col h3{ font-size:16px; font-weight:800; margin:0 0 16px; }
.tic-col label{
  display:block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--soft); margin:14px 0 6px;
}
.tic-select{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--paper); font-size:14px; font-family:inherit; color:var(--ink);
  appearance:none;
}
.tic-select:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; }
.tic-arrow{
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--soft); padding-top:40px;
}

.tic-results{
  background:var(--elev); border:1px solid var(--line); border-radius:16px;
  padding:clamp(24px,4vw,32px); margin-bottom:40px;
}
.tic-result-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:15px;
}
.tic-result-row span{ color:var(--soft); }
.tic-result-row b{ font-weight:700; }
.tic-result-total{ border-bottom:none; padding-top:18px; }
.tic-result-total span{ color:var(--ink); font-weight:700; font-size:17px; }
.tic-result-total b{ font-size:26px; color:var(--blue); }
.tic-result-note{ font-size:13.5px; color:var(--soft); margin-top:10px; min-height:1em; }

.tic-cta{ text-align:center; }
.tic-cta p{ font-size:13.5px; color:var(--soft); margin-bottom:16px; }
.tic-cta-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(100deg,var(--cyan),var(--blue));
  color:#02141F; text-decoration:none; font-weight:700; font-size:15px;
  padding:15px 28px; border-radius:100px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.tic-cta-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 20px rgba(41,171,226,0.25); }

@media(max-width:900px){
  .tic-calc{ grid-template-columns:1fr; }
  .tic-arrow{ display:none; }
}
@media(max-width:640px){
  /* Grading cards' condition text is long -- a 2-col grid crammed it
     awkwardly. Stacked single-column reads properly at this width. */
  .tic-grading{ grid-template-columns:1fr; }
  /* Select text (esp. the grade option's long label) was reading as
     cramped/cut-off in the closed dropdown on narrow phones. Bigger
     right-side breathing room + guaranteed no wrap/clip on the text. */
  .tic-select{
    padding:12px 34px 12px 12px;
    font-size:14px;
  }
}