/* ============================================
   DENTICOR AI ENGINE V2 — CSS
   Mobile-first · Design Blueprint specs
   ============================================ */

/* TOOTH PICKER */
.ai-picker { text-align:center; }
.ai-picker-title { font-size:22px; font-weight:700; color:#1E2328; margin-bottom:4px; }
.ai-picker-sub { font-size:14px; color:#6B7280; margin-bottom:24px; }

.ai-jaw { margin-bottom:20px; }
.ai-jaw-label { font-size:12px; font-weight:600; color:#6B7280; text-transform:uppercase; letter-spacing:0.06em; margin:8px 0; }

.ai-teeth-row { display:flex; justify-content:center; gap:3px; flex-wrap:nowrap; }
.ai-teeth-gap { width:8px; flex-shrink:0; }

/* Mobile: grid 8 columns = 2 rows of 8, hide gap, big touch targets */
@media(max-width:600px){
  .ai-teeth-row { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; justify-items:center; }
  .ai-teeth-gap { display:none; }
  .ai-tooth { width:100%; max-width:44px; height:52px; }
  .ai-t-shape { width:30px; height:34px; }
  .ai-t-num { font-size:10px; }
}

.ai-tooth { 
  width:clamp(28px,6vw,38px); height:clamp(40px,8vw,52px); 
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; border-radius:6px; transition:all .15s; position:relative;
  -webkit-tap-highlight-color:transparent;
}
.ai-tooth:active { transform:scale(0.92); }

.ai-t-shape {
  width:clamp(18px,4vw,26px); height:clamp(24px,5vw,34px);
  border-radius:4px 4px 6px 6px; transition:all .2s;
}
.ai-t-front .ai-t-shape { background:#3A6B7C; }
.ai-t-back .ai-t-shape { background:#5A8A6A; }
.ai-t-gone .ai-t-shape { background:#D4D0C8; opacity:0.3; }

.ai-t-num { font-size:9px; color:#6B7280; margin-top:2px; }
.ai-t-gone .ai-t-num { color:#A13F3F; font-weight:700; }

/* Legend */
.ai-legend { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:16px 0; font-size:12px; color:#6B7280; }
.ai-leg-item { display:flex; align-items:center; gap:4px; }
.ai-leg-dot { width:10px; height:10px; border-radius:3px; }
.ai-leg-front { background:#3A6B7C; }
.ai-leg-back { background:#5A8A6A; }
.ai-leg-gone { background:#D4D0C8; opacity:0.4; }

/* Selected summary */
.ai-sel-summary { background:#FAF8F5; border-radius:12px; padding:16px; margin:16px 0; text-align:left; }
.ai-sel-title { font-size:14px; font-weight:600; color:#1E2328; margin-bottom:8px; }
.ai-sel-chip { display:inline-block; font-size:12px; background:#fff; border:1px solid #D4D0C8; border-radius:100px; padding:4px 10px; margin:2px 4px 2px 0; color:#4B5563; }

/* Buttons */
.ai-btn-next {
  display:block; width:100%; padding:16px; margin-top:16px;
  background:#244651; color:#fff; border:none; border-radius:12px;
  font-size:16px; font-weight:700; cursor:pointer; font-family:inherit;
  min-height:48px; transition:background .15s;
}
.ai-btn-next:hover { background:#1B3640; }

.ai-hint { font-size:14px; color:#6B7280; margin-top:16px; }
.ai-warn { background:#F7EAEA; border-left:4px solid #A13F3F; border-radius:0 12px 12px 0; padding:14px 16px; margin-top:16px; font-size:14px; color:#4B5563; text-align:left; }

/* SITUATION BUTTONS */
.ai-situation { text-align:center; }
.ai-sit-btn {
  display:flex; align-items:center; gap:12px; width:100%; padding:16px;
  margin-bottom:8px; background:#fff; border:2px solid #E2DED6;
  border-radius:12px; cursor:pointer; font-family:inherit; font-size:15px;
  color:#4B5563; text-align:left; min-height:48px; transition:all .15s;
}
.ai-sit-btn:hover { border-color:#244651; }
.ai-sit-icon { font-size:20px; flex-shrink:0; }
.ai-sit-label { flex:1; }

.ai-skip-btn {
  display:block; width:100%; padding:14px; margin-top:8px;
  background:transparent; border:none; color:#244651; font-size:14px;
  font-weight:600; cursor:pointer; font-family:inherit;
}
.ai-back-btn {
  display:block; width:100%; padding:14px; margin-top:4px;
  background:transparent; border:none; color:#6B7280; font-size:14px;
  cursor:pointer; font-family:inherit; text-align:center;
}

/* RESULT */
.ai-result { text-align:left; }

.ai-block {
  background:#fff; border-radius:16px; padding:20px;
  margin-bottom:12px; border:1px solid #E2DED6;
}
.ai-block-icon { font-size:24px; margin-bottom:8px; }
.ai-block-title { font-size:17px; font-weight:700; color:#1E2328; margin-bottom:12px; }
.ai-block-body { font-size:15px; color:#4B5563; line-height:1.7; }

/* Situation block */
.ai-block-situation { background:#FAF8F5; }
.ai-tooth-label { font-size:14px; color:#244651; font-weight:600; padding:2px 0; }
.ai-scenarios-label { font-size:13px; color:#6B7280; margin-top:8px; }

/* Metrics */
.ai-metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ai-metric { background:#FAF8F5; border-radius:10px; padding:12px; }
.ai-metric-label { font-size:12px; color:#6B7280; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.ai-metric-val { font-size:15px; font-weight:700; color:#1E2328; }
.ai-metric-big { font-size:18px; }
.ai-metric-bar { height:6px; background:#E2DED6; border-radius:3px; margin:6px 0; }
.ai-metric-fill { height:100%; background:#244651; border-radius:3px; transition:width .4s; }

/* Package block */
.ai-block-pkg { border:2px solid #244651; }
.ai-pkg-badge { font-size:12px; font-weight:700; color:#244651; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px; }
.ai-pkg-name { font-size:22px; font-weight:800; color:#1E2328; }
.ai-pkg-price { font-size:18px; font-weight:600; color:#244651; margin-bottom:12px; }
.ai-pkg-refills { margin-bottom:12px; }
.ai-refill-chip { display:inline-block; font-size:13px; background:#FAF5E8; border:1px solid #8B7335; color:#8B7335; border-radius:100px; padding:4px 10px; margin:2px 4px 2px 0; font-weight:600; }
.ai-pkg-total { font-size:15px; font-weight:700; color:#1E2328; margin-top:8px; }
.ai-pkg-reason { font-size:14px; color:#4B5563; line-height:1.6; margin-bottom:16px; background:#FAF8F5; padding:12px; border-radius:10px; }

/* Material bars */
.ai-mat-section { margin-bottom:16px; }
.ai-mat-title { font-size:14px; font-weight:600; color:#1E2328; margin-bottom:10px; }
.ai-mat-row { margin-bottom:10px; }
.ai-mat-label { font-size:13px; font-weight:600; color:#4B5563; margin-bottom:4px; }
.ai-mat-bar { height:8px; background:#E2DED6; border-radius:4px; }
.ai-mat-fill { height:100%; border-radius:4px; transition:width .4s; }
.ai-mat-plus { background:#3A6B7C; }
.ai-mat-df { background:#5A8A6A; }
.ai-mat-nums { font-size:12px; color:#6B7280; margin-top:3px; }

/* Buy button */
.ai-btn-buy {
  display:block; width:100%; padding:16px; text-align:center;
  background:#244651; color:#fff; border-radius:12px;
  font-size:16px; font-weight:700; text-decoration:none;
  min-height:48px; line-height:1; transition:background .15s;
}
.ai-btn-buy:hover { background:#1B3640; color:#fff; }
.ai-btn-buy.ai-btn-secondary {
  background:transparent; border:2px solid #244651; color:#244651;
}
.ai-btn-buy.ai-btn-secondary:hover { background:#244651; color:#fff; }

.ai-btn-phone {
  display:block; width:100%; padding:14px; text-align:center;
  background:transparent; border:2px solid #244651; color:#244651;
  border-radius:12px; font-size:15px; font-weight:600; text-decoration:none;
  min-height:48px; margin-top:8px;
}

/* Guide teaser */
.ai-block-guide { background:#FAF5E8; border-color:#8B7335; }
.ai-guide-teaser { margin-bottom:10px; font-size:14px; color:#4B5563; }
.ai-guide-meta { font-size:13px; color:#6B7280; margin-top:2px; }
.ai-guide-includes { font-size:13px; color:#6B7280; margin-top:12px; padding-top:12px; border-top:1px solid rgba(139,115,53,.2); line-height:1.6; }

/* Rules */
.ai-rules { display:flex; flex-direction:column; gap:8px; }
.ai-rule { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#4B5563; line-height:1.6; }
.ai-rule-icon { font-size:16px; flex-shrink:0; margin-top:2px; }

/* Situation context */
.ai-block-sit { background:#E8F0F3; border-color:#3A6B7C; }
.ai-block-sit p { font-size:15px; color:#4B5563; line-height:1.7; margin:0; }

/* CTA block */
.ai-block-cta { text-align:center; background:#FAF8F5; border:none; }
.ai-cta-text { font-size:16px; font-weight:600; color:#1E2328; margin-bottom:16px; }
.ai-cta-note { font-size:13px; color:#6B7280; margin-top:12px; }

/* ============================================
   TABLET (768px+)
   ============================================ */
@media (min-width:768px) {
  .ai-tooth { width:38px; height:52px; }
  .ai-t-shape { width:26px; height:34px; }
  .ai-teeth-gap { width:16px; }
  .ai-metrics { grid-template-columns:repeat(4,1fr); }
  .ai-block { padding:24px; }
}

/* ============================================
   DESKTOP (1024px+)
   ============================================ */
@media (min-width:1024px) {
  .ai-tooth { width:42px; height:56px; }
  .ai-t-shape { width:28px; height:36px; }
  .ai-btn-next, .ai-btn-buy { max-width:400px; margin-left:auto; margin-right:auto; }
  .ai-btn-phone { max-width:400px; margin-left:auto; margin-right:auto; }
}

/* Universal rules block */
.ai-block-universal { background:#FAF8F5; }
.ai-rule-section { padding:14px 0; border-bottom:1px solid #E2DED6; }
.ai-rule-section:last-child { border-bottom:none; padding-bottom:0; }
.ai-rule-section:first-child { padding-top:0; }
.ai-rule-head { font-size:15px; font-weight:700; color:#1E2328; margin-bottom:4px; }
.ai-rule-text { font-size:14px; color:#4B5563; line-height:1.7; }
.ai-rule-text strong { color:#1E2328; }

/* ============================================
   MOBILE STEP-BY-STEP PICKER
   ============================================ */
.ai-mob-btn {
  display:flex;align-items:center;gap:12px;
  width:100%;padding:18px 20px;
  background:#fff;border:2px solid #E2DED6;border-radius:12px;
  font-size:16px;font-weight:600;color:#1E2328;
  cursor:pointer;text-align:left;
  font-family:'Plus Jakarta Sans',sans-serif;
  transition:border-color .15s,background .15s;
  min-height:56px;
}
.ai-mob-btn:hover,.ai-mob-btn:active{border-color:#244651;background:#F5F8FA}

.ai-mob-tooth {
  display:flex;align-items:center;justify-content:center;
  padding:16px 12px;
  background:#fff;border:2px solid #E2DED6;border-radius:10px;
  font-size:15px;font-weight:600;color:#1E2328;
  cursor:pointer;text-align:center;
  font-family:'Plus Jakarta Sans',sans-serif;
  transition:border-color .15s,background .15s;
  min-height:52px;
}
.ai-mob-tooth:hover,.ai-mob-tooth:active{border-color:#244651;background:#F5F8FA}

.ai-warn {
  background:#FEF3F2;border:1px solid #F5C6C6;border-radius:10px;
  padding:14px 18px;margin-top:16px;
  font-size:14px;color:#A13F3F;text-align:center;line-height:1.6;
}