/* ============================================================================
   SELLIO.MA — COMPONENTS
   Complete vanilla-CSS port of the numbered component catalogue in
   docs/sellio-component.html (the authoritative design system). Every rule
   below corresponds to a class that exists in that document (or to an
   application class enumerated in docs/PLAN.md §2 Phase 1 step 7).

   RTL CONTRACT: this sheet uses LOGICAL PROPERTIES exclusively for
   direction-dependent layout — margin-inline-*, padding-inline-*,
   inset-inline-*, border-inline-*, inset-inline-start/end,
   border-end-start-radius / border-end-end-radius, text-align:start/end.
   As a result virtually all components flip automatically under dir="rtl";
   rtl.css only carries the residue (glyph mirroring, JS-driven transforms).

   Load order: tokens.css → base.css → components.css → utilities.css
   [→ rtl.css when dir="rtl"] [→ admin.css on admin screens].
   Each file stands alone: no @import, no preprocessor syntax.
   ============================================================================ */

/* ============================================================================
   BUTTONS (docs 12–21) — pill-shaped, --r-btn, primary control colour --red
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--r-btn);
  padding:14px 22px;font-weight:600;font-size:.90625rem;   /* 14.5px */
  transition:transform .08s ease, opacity .15s ease;
  min-height:var(--tap);
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--red);color:var(--white);}
.btn-primary:hover{background:var(--red-1);}
.btn-secondary{background:var(--white-3);color:var(--text-primary);}
.btn-secondary:hover{background:var(--white-4);}
.btn-outline{background:transparent;color:var(--text-primary);border:1.4px solid var(--text-primary);}
.btn-outline:hover{background:var(--white-3);}
.btn-ghost{background:transparent;color:var(--red);}
.btn-ghost:hover{background:var(--white-3);}
.btn-danger{background:var(--text-error);color:var(--white);}
.btn-danger:hover{background:var(--red-1);}
.btn-disabled,.btn[disabled],.btn:disabled{
  background:var(--disabled-bg);color:var(--disabled-text);cursor:not-allowed;
}
.btn-sm{padding:9px 16px;font-size:.8125rem;border-radius:14px;min-height:0;}
.btn-lg{padding:18px 28px;font-size:1rem;}
.btn-icon{
  width:46px;height:46px;min-height:0;padding:0;border-radius:50%;
  background:var(--white-3);color:var(--text-primary);flex-shrink:0;
}
.btn-icon:hover{background:var(--white-4);}
.btn-icon.primary{background:var(--red);color:var(--white);}
.btn-icon.primary:hover{background:var(--red-1);}
.btn-loading{position:relative;color:transparent;pointer-events:none;}
.btn-loading::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn-group{display:inline-flex;border-radius:var(--r-btn);overflow:hidden;border:0.8px solid var(--white-2);}
.btn-group button{
  border:none;border-radius:0;background:var(--white);
  padding:12px 18px;font-weight:600;font-size:.84375rem;color:var(--text-secondary);
}
.btn-group button.active{background:var(--red);color:var(--white);}

.fab{
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;border:none;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-med);
}

@keyframes spin{to{transform:rotate(360deg);}}

/* ============================================================================
   FORM CONTROLS (docs 22–37)
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:.78125rem;font-weight:700;color:var(--text-primary);}

.input,.select,.textarea{
  background:var(--white-3);border:1.4px solid transparent;border-radius:var(--r-input);
  padding:15px 18px;font-size:.90625rem;color:var(--text-primary);width:100%;outline:none;
  transition:border-color .12s ease, background .12s ease;
}
.input::placeholder,.textarea::placeholder{color:var(--gray-1);}
.input:focus,.select:focus,.textarea:focus{background:var(--white);border-color:var(--red);}
.textarea{resize:vertical;min-height:96px;}

.input-icon{position:relative;}
.input-icon .icon{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);color:var(--gray-1);}
.input-icon .input,.input-icon input{padding-inline-start:44px;}

.select-wrap{position:relative;}
.select-wrap .icon{
  position:absolute;inset-inline-end:16px;top:50%;transform:translateY(-50%);
  color:var(--gray-1);pointer-events:none;transition:transform .15s ease, color .15s ease;
}
.select{
  appearance:none;-webkit-appearance:none;                    /* native chrome removal */
  padding-inline-end:44px;cursor:pointer;
  background:var(--white);border:1.5px solid var(--white-4);
  font-weight:600;transition:border-color .15s ease, box-shadow .15s ease;
}
.select:hover{border-color:var(--gray-1);}
.select:focus{border-color:var(--red);box-shadow:var(--focus-ring);background:var(--white);}
.select-wrap:focus-within .icon{color:var(--red);transform:translateY(-50%) rotate(180deg);}

/* ---- professional searchable dropdown (docs 24, 24b, 89, 108) ---- */
.dd{position:relative;font-size:.90625rem;}
.dd-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--white);border:1.5px solid var(--white-4);border-radius:var(--r-input);
  padding:14px 16px;cursor:pointer;font-family:inherit;text-align:start;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dd-trigger:hover{border-color:var(--gray-1);}
.dd-trigger .l{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text-primary);}
.dd-trigger .l .ic{
  width:30px;height:30px;border-radius:9px;background:var(--white-3);
  display:flex;align-items:center;justify-content:center;color:var(--red);flex-shrink:0;
}
.dd-trigger .chev{color:var(--gray-1);transition:transform .15s ease,color .15s ease;flex-shrink:0;}
.dd.open .dd-trigger{border-color:var(--red);box-shadow:var(--focus-ring);}
.dd.open .dd-trigger .chev{transform:rotate(180deg);color:var(--red);}
.dd-menu{
  display:none;position:absolute;inset-inline-start:0;inset-inline-end:0;
  top:calc(100% + 8px);background:var(--white);
  border:0.8px solid var(--white-2);border-radius:16px;box-shadow:var(--shadow-med);
  padding:8px;z-index:var(--z-dropdown);max-height:230px;overflow-y:auto;
}
.dd.open .dd-menu{display:block;}
.dd-search{
  display:flex;align-items:center;gap:8px;background:var(--white-3);border-radius:12px;
  padding:9px 12px;margin-bottom:6px;color:var(--gray-1);font-size:.8125rem;
}
.dd-search input{border:none;background:none;outline:none;font:inherit;color:var(--text-primary);width:100%;padding:0;}
.dd-search input::placeholder{color:var(--gray-1);}
.dd-empty{padding:14px 10px;text-align:center;font-size:.78125rem;color:var(--text-secondary);display:none;}
.dd-empty.show{display:block;}
.dd-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px;border-radius:11px;font-weight:600;color:var(--text-primary);cursor:pointer;
}
.dd-opt:hover{background:var(--white-3);}
.dd-opt.sel{background:var(--selected-red-bg);color:var(--red);}
.dd-opt .chk{display:none;color:var(--red);}
.dd-opt.sel .chk{display:inline-block;}
.dd-opt.dd-hide{display:none;}
.dd-opt .meta{margin-inline-start:auto;font-size:.71875rem;color:var(--text-secondary);font-weight:600;}

.hint{font-size:.75rem;color:var(--text-secondary);}
.hint.err{color:var(--text-error);}
.hint.ok{color:var(--ok);}

/* micro section label (docs .specimen .lbl; used inside plan-card / modal) */
.lbl{display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--white-4);font-weight:800;}

/* ---- validation states (docs 28; app-wide has-error / err / error) ---- */
.input.err,.input.has-error,.textarea.err,.textarea.has-error{border-color:var(--text-error);background:var(--err-bg);}
.input.ok,.textarea.ok{border-color:var(--ok);background:#F1FBF6;}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--text-error);background:var(--err-bg);}
.field.has-error label{color:var(--text-error);}
.error{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;color:var(--text-error);}

/* ---- rounded floating-label inputs (docs 22, 23, 26, 28) ---- */
.field-float{position:relative;}
.input-float{
  width:100%;background:var(--white);color:var(--text-primary);
  border:1.5px solid var(--white-4);border-radius:var(--r-pill);
  padding:24px 20px 9px;font-size:.90625rem;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input-float::placeholder{color:transparent;}
.input-float:hover{border-color:var(--gray-1);}
.input-float:focus{border-color:var(--red);box-shadow:var(--focus-ring);}
.field-float label{
  position:absolute;inset-inline-start:21px;top:50%;transform:translateY(-50%);
  font-size:.90625rem;font-weight:600;color:var(--gray-1);pointer-events:none;
  transition:top .13s ease, font-size .13s ease, color .13s ease, font-weight .13s ease;
}
.input-float:focus + label,
.input-float:not(:placeholder-shown) + label{
  top:14px;font-size:.65625rem;font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;color:var(--red);
}
.field-float.err .input-float,.field-float.has-error .input-float{border-color:var(--text-error);}
.field-float.err label,.field-float.has-error label{color:var(--text-error);}
.field-float.ok .input-float{border-color:var(--ok);}
.field-float .input-float:disabled{background:var(--disabled-bg);color:var(--disabled-text);cursor:not-allowed;}
.field-float .icon{
  position:absolute;inset-inline-end:21px;top:50%;transform:translateY(-50%);
  color:var(--gray-1);pointer-events:none;
}
.field-float.has-icon .input-float{padding-inline-end:48px;}
.field-float .hint{margin-top:6px;display:block;padding-inline-start:4px;}

/* ---- checkboxes / radios (docs 33, 34) ----
   appearance removal below is required on the native control itself. */
.checkbox,.radio{display:flex;align-items:center;gap:10px;font-size:.875rem;cursor:pointer;}
.checkbox input,.radio input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;border:1.6px solid var(--white-4);flex-shrink:0;
  background:var(--white);position:relative;cursor:pointer;
}
.checkbox input{border-radius:7px;}
.radio input{border-radius:50%;}
.checkbox input:checked,.radio input:checked{background:var(--red);border-color:var(--red);}
.checkbox input:checked::after{
  content:"";position:absolute;inset-inline-start:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.radio input:checked::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff;}
.checkbox input:focus-visible,.radio input:focus-visible{outline:var(--focus-outline);outline-offset:2px;}

/* ---- toggle switch (docs 35–37) ---- */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;}
.switch input{display:none;}
.switch .track{width:44px;height:26px;border-radius:var(--r-pill);background:var(--white-4);position:relative;transition:.15s;flex-shrink:0;}
.switch .track::after{
  content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;
  top:3px;inset-inline-start:3px;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.15s;
}
.switch input:checked + .track{background:var(--red);}
.switch input:checked + .track::after{inset-inline-start:21px;}
.switch input:focus-visible + .track{outline:var(--focus-outline);outline-offset:2px;}

/* ---- range slider (docs 29) ----
   the -webkit-appearance:none declarations are native-control pseudo-elements;
   they cannot be styled without appearance removal (no !important needed). */
.range{
  width:100%;-webkit-appearance:none;appearance:none;
  height:6px;border-radius:var(--r-pill);background:var(--white-4);outline:none;
  min-height:var(--tap);background-clip:content-box;padding:19px 0;box-sizing:content-box;
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;background:var(--red);
  border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;
}
.range::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--red);
  border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;
}
.range::-moz-range-track{height:6px;border-radius:var(--r-pill);background:var(--white-4);}
.range:focus-visible{outline:none;}
.range:focus-visible::-webkit-slider-thumb{outline:var(--focus-outline);outline-offset:2px;}
.range-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-secondary);font-weight:700;margin-top:8px;}

/* ---- upload dropzone + previews (docs 31, listing media) ---- */
.dropzone{
  border:1.6px dashed var(--white-4);border-radius:var(--r-input);
  padding:32px 20px;text-align:center;color:var(--text-secondary);background:var(--white-3);
}
.dropzone .icon{color:var(--red);margin-bottom:8px;}
.dropzone b{color:var(--text-primary);}
.upload-preview{position:relative;border-radius:16px;overflow:hidden;height:88px;background:var(--white-3);}
.upload-preview img{width:100%;height:100%;object-fit:cover;}
.upload-preview .rm{
  position:absolute;top:6px;inset-inline-end:6px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
}

/* ---- OTP input (docs 27; 2FA Phase 3) ---- */
.otp{display:flex;gap:10px;}
.otp input{
  width:48px;height:56px;text-align:center;font-size:1.25rem;font-weight:800;
  border-radius:14px;background:var(--white-3);border:1.4px solid transparent;outline:none;
}
.otp input:focus{border-color:var(--red);background:var(--white);}

/* ---- password field (docs 26) ---- */
.pw-field{position:relative;}
.pw-field .input,.pw-field .input-float{padding-inline-end:46px;}
.pw-toggle{
  position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--gray-1);padding:4px;display:inline-flex;
}

/* ---- multi-select chips (docs 32) ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:var(--white-3);border-radius:var(--r-input);}
.chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--white);
  border:0.8px solid var(--white-2);border-radius:var(--r-pill);
  padding:7px 12px;font-size:.78125rem;font-weight:600;
}
.chip button{background:none;border:none;color:var(--gray-1);display:flex;padding:0;}

/* ---- stepper number (docs 30) ---- */
.stepper-num{display:inline-flex;align-items:center;background:var(--white-3);border-radius:var(--r-pill);}
.stepper-num button{width:38px;height:38px;border:none;background:none;font-size:1.125rem;font-weight:800;color:var(--red);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;}
.stepper-num span{width:36px;text-align:center;font-weight:700;font-size:.875rem;}

.char-count{font-size:.71875rem;color:var(--text-secondary);text-align:end;}

/* ============================================================================
   BADGES & TAGS (docs 38–47)
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.71875rem;font-weight:800;padding:6px 11px;
  border-radius:var(--r-pill);letter-spacing:.01em;
}
.badge-sale{background:var(--ok-bg);color:var(--ok);}
.badge-rent{background:var(--blue-soft);color:var(--blue);}
.badge-vip{background:var(--vip-bg);color:var(--vip-gold);}
.badge-verified{background:var(--blue-soft);color:var(--blue);}
.badge-promoted{background:var(--promoted-bg);color:var(--promoted);}
.badge-new{background:var(--red);color:#fff;}
.badge-status{background:var(--off-bg);color:var(--text-secondary);}
.badge-status.on{background:var(--ok-bg);color:var(--ok);}
.badge-status.paused{background:var(--paused-bg);color:var(--paused);}
.badge-status.off{background:var(--off-bg);color:var(--off);}
.tag-condition{
  border:1.2px solid var(--white-4);border-radius:10px;
  padding:5px 10px;font-size:.71875rem;font-weight:700;color:var(--text-secondary);
}
.tag-currency{background:var(--white-3);border-radius:8px;padding:4px 8px;font-size:.6875rem;font-weight:800;letter-spacing:.03em;}
.count-badge{
  background:var(--red);color:#fff;font-size:.625rem;font-weight:800;
  min-width:18px;height:18px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
}
/* .ribbon — docs define it on .plan-card; promoted to generic status ribbon */
.ribbon{
  position:absolute;top:-12px;inset-inline-end:24px;background:var(--red);color:#fff;
  font-size:.6875rem;font-weight:800;padding:5px 12px;border-radius:var(--r-pill);
}

/* ============================================================================
   CARDS (docs 48–103)
   ========================================================================== */
.card{border:0.8px solid var(--white-2);border-radius:var(--r-card);padding:var(--s-24);background:var(--white);}
.card-shadow{box-shadow:var(--shadow-subtle);border:none;}

/* ---- listing card: 4:3 media, sale/rent badge top-start, fav heart top-end */
.listing-card{border:0.8px solid var(--white-2);border-radius:20px;overflow:hidden;background:#fff;transition:box-shadow .15s;}
.listing-card:hover{box-shadow:var(--shadow-subtle);}
.listing-card .media{
  aspect-ratio:4/3;min-height:160px;
  background:linear-gradient(135deg,#f5f5f5,#e9e9e9);
  position:relative;display:flex;align-items:center;justify-content:center;color:var(--white-4);
}
.listing-card .media .fav{
  position:absolute;top:12px;inset-inline-end:12px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;
  color:var(--red);border:none;
}
.listing-card .media .badges{position:absolute;top:12px;inset-inline-start:12px;display:flex;gap:6px;}
.listing-card .body{padding:var(--s-16);}
.listing-card .price{font-size:1.1875rem;font-weight:900;margin-bottom:4px;}
.listing-card .title{font-size:.875rem;font-weight:700;margin-bottom:8px;}
.listing-card .specs{display:flex;gap:12px;color:var(--text-secondary);font-size:.75rem;margin-bottom:10px;flex-wrap:wrap;}
.listing-card .specs span{display:flex;align-items:center;gap:4px;}
.listing-card .foot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:12px;border-top:1px solid var(--white-3);font-size:.75rem;color:var(--text-secondary);
}
/* generic .specs (listing detail header) */
.specs{display:flex;gap:12px;color:var(--text-secondary);font-size:.75rem;flex-wrap:wrap;}
.specs span{display:flex;align-items:center;gap:4px;}

/* ---- listing card image carousel ---- */
.media{position:relative;}
.media.carousel{overflow:hidden;}
.media.carousel .slides{display:flex;width:100%;height:100%;transition:transform .32s ease;}
.media.carousel .slide{min-width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.media.carousel .slide.s1{background:linear-gradient(135deg,#f5f5f5,#e9e9e9);}
.media.carousel .slide.s2{background:linear-gradient(135deg,#eef2f8,#dfe6ef);}
.media.carousel .slide.s3{background:linear-gradient(135deg,#f7efe9,#ecdfd3);}
.media.carousel .slide.s4{background:linear-gradient(135deg,#eef7ef,#dcebdd);}
.media.carousel img{width:100%;height:100%;object-fit:cover;}
.car-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.92);border:none;color:var(--text-primary);
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease;
}
.media.carousel:hover .car-nav{opacity:1;}
.car-nav.prev{inset-inline-start:8px;}
.car-nav.next{inset-inline-end:8px;}
.car-dots{position:absolute;bottom:10px;inset-inline-start:50%;transform:translateX(-50%);display:flex;gap:5px;}
.car-dots .dot{width:5px;height:5px;border-radius:3px;background:rgba(255,255,255,.65);cursor:pointer;transition:width .15s ease,background .15s ease;border:none;padding:0;}
.car-dots .dot.active{width:14px;background:#fff;}
.car-count{
  position:absolute;bottom:10px;inset-inline-end:10px;background:rgba(0,0,0,.5);color:#fff;
  font-size:.625rem;font-weight:700;padding:2px 8px;border-radius:8px;
}

/* ---- dealer / plan / article / review / quote / inquiry / compare ---- */
.dealer-card{border:0.8px solid var(--white-2);border-radius:var(--r-card);padding:var(--s-24);display:flex;gap:var(--s-16);align-items:flex-start;}
.dealer-card .logo,.logo{
  width:56px;height:56px;border-radius:16px;background:var(--white-3);
  display:flex;align-items:center;justify-content:center;color:var(--red);flex-shrink:0;
}
.dealer-card h4{font-size:.9375rem;margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.dealer-card .stats,.stats{display:flex;gap:16px;margin-top:12px;font-size:.75rem;color:var(--text-secondary);}
.dealer-card .stats b,.stats b{color:var(--text-primary);display:block;font-size:.9375rem;}

.plan-card{border:0.8px solid var(--white-2);border-radius:var(--r-card);padding:var(--s-28);position:relative;}
.plan-card.featured{border-color:var(--red);box-shadow:var(--shadow-subtle);}
.plan-card .price{font-size:2.125rem;font-weight:900;margin:12px 0 4px;}
.plan-card .price span{font-size:.8125rem;color:var(--text-secondary);font-weight:600;}
.plan-card ul{list-style:none;padding:0;margin:18px 0;display:flex;flex-direction:column;gap:10px;}
.plan-card li{display:flex;gap:8px;align-items:flex-start;font-size:.84375rem;color:var(--text-secondary);}
.plan-card li .icon{color:var(--ok);flex-shrink:0;margin-top:1px;}

.article-card{border:0.8px solid var(--white-2);border-radius:20px;overflow:hidden;}
.article-card .cover,.cover{height:120px;background:var(--white-3);}
.article-card .cover img,.cover img{width:100%;height:100%;object-fit:cover;}
.article-card .body{padding:var(--s-16);}
.article-card .cat{font-size:.6875rem;font-weight:800;color:var(--red);margin-bottom:6px;}
.article-card h4{font-size:.90625rem;line-height:1.35;}

.review-card{border:0.8px solid var(--white-2);border-radius:20px;padding:var(--s-20);}
.review-card .head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.review-card .head b{font-size:.84375rem;display:block;}
.review-card .head span{font-size:.71875rem;color:var(--text-secondary);}
.review-card p{font-size:.84375rem;color:var(--text-secondary);}

.quote-card{border:0.8px solid var(--white-2);border-radius:var(--r-card);padding:var(--s-24);position:relative;background:var(--white);}
.quote-card .mark{font-size:2.5rem;font-weight:900;color:var(--white-4);line-height:1;margin-bottom:6px;font-family:Georgia,serif;}
.quote-card p{font-size:.84375rem;font-style:italic;color:var(--text-primary);margin-bottom:14px;}
.quote-card .who{display:flex;align-items:center;gap:10px;}
.quote-card .who b{font-size:.8125rem;display:block;}
.quote-card .who span{font-size:.71875rem;color:var(--text-secondary);}

.inquiry{display:flex;gap:12px;align-items:center;padding:14px;border-radius:16px;}
.inquiry:hover{background:var(--white-3);}
.inquiry .txt{flex:1;min-width:0;}
.inquiry b{font-size:.84375rem;}
.inquiry p{font-size:.78125rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inquiry time{font-size:.6875rem;color:var(--white-4);font-weight:700;}

.compare-card{border:0.8px solid var(--white-2);border-radius:20px;overflow:hidden;}
.compare-card table{width:100%;border-collapse:collapse;font-size:.8125rem;}
.compare-card th,.compare-card td{padding:12px 14px;text-align:start;border-bottom:1px solid var(--white-3);}
.compare-card th{color:var(--text-secondary);font-weight:700;font-size:.71875rem;text-transform:uppercase;}

.spec-row{display:flex;gap:18px;flex-wrap:wrap;}
.spec-row .item{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--text-secondary);}
.spec-row .item .icon{color:var(--red);}

/* ---- skeleton loading card ---- */
.skel-card{border:0.8px solid var(--white-2);border-radius:20px;overflow:hidden;}
.skel-card .skeleton.img,.skel-card .skeleton .img{height:140px;border-radius:0;}
.skel-card .pad{padding:var(--s-16);display:flex;flex-direction:column;gap:8px;}
.skel-card .skeleton.line{height:12px;}
.skel-card .skeleton.line.w60{width:60%;}
.skel-card .skeleton.line.w40{width:40%;}

/* ---- auth card + panes (docs 103) ---- */
.auth-card{
  border:0.8px solid var(--white-2);border-radius:var(--r-card);padding:var(--s-28);
  max-width:360px;background:var(--white);box-shadow:var(--shadow-subtle);
}
.auth-card h4{font-size:1.125rem;margin-bottom:4px;}
.auth-card .sub2,.sub2{font-size:.78125rem;color:var(--text-secondary);margin-bottom:18px;}
.auth-tabs{display:flex;width:100%;margin-bottom:20px;}
.auth-tabs button{flex:1;text-align:center;}
.auth-pane{display:flex;flex-direction:column;gap:14px;}
.auth-card .auth-pane[hidden]{display:none;}
.auth-row{display:flex;justify-content:flex-end;margin-top:-4px;}
.auth-row a{font-size:.78125rem;font-weight:700;color:var(--red);}
.auth-divider{
  display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--text-secondary);
  font-size:.71875rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--white-3);}
.auth-foot{text-align:center;font-size:.78125rem;color:var(--text-secondary);margin-top:16px;}
.auth-foot b{color:var(--red);font-weight:800;}

/* ============================================================================
   OVERLAYS (docs 64–71)
   ========================================================================== */
.modal,.modal-demo{
  border:0.8px solid var(--white-2);border-radius:var(--r-card);padding:var(--s-28);
  max-width:420px;box-shadow:var(--shadow-med);background:var(--white);
}
.modal .x,.modal-demo .x{
  float:inline-end;background:var(--white-3);border:none;width:32px;height:32px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.modal h3,.modal-demo h3{font-size:1.125rem;margin:18px 0 8px;}
.modal p,.modal-demo p{color:var(--text-secondary);font-size:.84375rem;margin-bottom:20px;}

.confirm-demo{
  border:0.8px solid var(--white-2);border-radius:var(--r-card);
  padding:var(--s-28);max-width:360px;text-align:center;background:var(--white);
}
.confirm-demo .ic{
  width:56px;height:56px;border-radius:50%;background:var(--err-bg);color:var(--text-error);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}

.toast{
  display:flex;align-items:center;gap:10px;background:var(--vip-bg);color:#fff;
  padding:14px 18px;border-radius:16px;font-size:.84375rem;font-weight:600;
  box-shadow:var(--shadow-med);z-index:var(--z-toast);
}
.toast.success .icon{color:#4ADE80;}
.toast.error{background:#3A0C0C;}
.toast.error .icon{color:#FF6B6B;}

.popover{
  border:0.8px solid var(--white-2);border-radius:16px;box-shadow:var(--shadow-med);
  padding:8px;width:200px;background:#fff;z-index:var(--z-dropdown);
}
.popover a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  font-size:.8125rem;font-weight:600;color:var(--text-primary);
}
.popover a:hover{background:var(--white-3);}
.popover hr{border:none;border-top:1px solid var(--white-3);margin:6px 0;}

.tooltip-demo{position:relative;display:inline-flex;}
.tooltip-bubble{
  position:absolute;bottom:calc(100% + 10px);inset-inline-start:50%;transform:translateX(-50%);
  background:var(--vip-bg);color:#fff;font-size:.75rem;font-weight:600;
  padding:8px 12px;border-radius:10px;white-space:nowrap;
  box-shadow:var(--shadow-med);z-index:var(--z-tooltip);
}
.tooltip-bubble::after{
  content:"";position:absolute;top:100%;inset-inline-start:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--vip-bg);
}

.drawer,.drawer-demo{
  border:0.8px solid var(--white-2);border-radius:24px;padding:var(--s-24);
  box-shadow:var(--shadow-med);max-width:300px;background:var(--white);
}
.drawer h4,.drawer-demo h4{font-size:.9375rem;margin-bottom:16px;}

.lightbox,.lightbox-demo{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;
  border-radius:20px;overflow:hidden;height:200px;
}
.lightbox div,.lightbox-demo div{background:var(--white-3);}
.lightbox div:first-child,.lightbox-demo div:first-child{grid-row:span 2;}

.accordion-item{border-bottom:1px solid var(--white-3);}
.accordion .accordion-item:last-child{border-bottom:none;}
.accordion-item .q{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--s-16) 4px;font-weight:700;font-size:.875rem;cursor:pointer;
}
.accordion-item .a{padding:0 4px var(--s-16);color:var(--text-secondary);font-size:.84375rem;}

/* ============================================================================
   DATA DISPLAY (docs 72–81)
   ========================================================================== */
table.dtable{width:100%;border-collapse:collapse;font-size:.84375rem;}
table.dtable th{
  text-align:start;font-size:.6875rem;text-transform:uppercase;color:var(--text-secondary);
  font-weight:800;padding:10px 14px;border-bottom:1.4px solid var(--white-2);
}
table.dtable td{padding:14px;border-bottom:1px solid var(--white-3);}
table.dtable tr:last-child td{border-bottom:none;}

.avatar{
  width:40px;height:40px;border-radius:50%;background:var(--white-3);color:var(--gray-1);
  display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;
}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.avatar-group{display:flex;}
.avatar-group .avatar{border:2.5px solid #fff;margin-inline-start:-10px;}
.avatar-group .avatar:first-child{margin-inline-start:0;}

.rating{display:flex;gap:3px;color:var(--red);}
.rating .icon{width:16px;height:16px;}

.progress{height:10px;border-radius:var(--r-pill);background:var(--white-3);overflow:hidden;}
.progress .fill{height:100%;background:var(--red);border-radius:var(--r-pill);}

.wizard{display:flex;align-items:center;}
.wizard .step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative;}
.wizard .step .dot{
  width:32px;height:32px;border-radius:50%;background:var(--white-3);color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8125rem;z-index:var(--z-raised);
}
.wizard .step.done .dot{background:var(--red);color:#fff;}
.wizard .step.active .dot{background:#fff;border:2px solid var(--red);color:var(--red);}
.wizard .step span{font-size:.6875rem;color:var(--text-secondary);font-weight:700;}
.wizard .step:not(:last-child)::after{
  content:"";position:absolute;top:16px;inset-inline-start:55%;width:90%;height:2px;background:var(--white-3);
}
.wizard .step.done:not(:last-child)::after{background:var(--red);}

.timeline{border-inline-start:2px solid var(--white-3);padding-inline-start:20px;display:flex;flex-direction:column;gap:22px;}
.timeline .ev{position:relative;}
.timeline .ev::before{
  content:"";position:absolute;inset-inline-start:-26px;top:2px;width:10px;height:10px;
  border-radius:50%;background:var(--red);
}
.timeline .ev b{font-size:.8125rem;display:block;}
.timeline .ev span{font-size:.71875rem;color:var(--text-secondary);}

.chart-bars{display:flex;align-items:flex-end;gap:10px;height:120px;}
.chart-bars .bar{flex:1;background:var(--white-3);border-radius:8px 8px 0 0;position:relative;}
.chart-bars .bar.hi{background:var(--red);}
.chart-bars .bar span{
  position:absolute;bottom:-20px;inset-inline-start:0;inset-inline-end:0;
  text-align:center;font-size:.65625rem;color:var(--text-secondary);font-weight:700;
}

.stat-card{border:0.8px solid var(--white-2);border-radius:20px;padding:var(--s-20);}
.stat-card .icon-wrap,.icon-wrap{
  width:40px;height:40px;border-radius:12px;background:#FFF0F1;color:var(--red);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.stat-card .num{font-size:1.625rem;font-weight:900;}
.stat-card .lbl2,.lbl2{font-size:.78125rem;color:var(--text-secondary);margin-top:2px;}
.stat-card .delta{font-size:.71875rem;font-weight:700;color:var(--ok);margin-top:8px;display:flex;align-items:center;gap:3px;}

.empty-state{
  border:1.4px dashed var(--white-4);border-radius:var(--r-card);
  padding:48px var(--s-24);text-align:center;
}
.empty-state .icon{color:var(--white-4);margin-bottom:12px;}
.empty-state h4{font-size:1rem;margin-bottom:6px;}
.empty-state p{color:var(--text-secondary);font-size:.84375rem;margin-bottom:18px;}

.kpi-ring{display:flex;align-items:center;gap:14px;}
.kpi-ring svg{width:64px;height:64px;transform:rotate(-90deg);}
.kpi-ring circle{fill:none;stroke-width:6;}
.kpi-ring .bg{stroke:var(--white-3);}
.kpi-ring .fg{stroke:var(--red);stroke-linecap:round;}
.kpi-ring .num{font-size:1.1875rem;font-weight:900;}
.kpi-ring .lbl2{font-size:.75rem;color:var(--text-secondary);font-weight:700;}

.map-demo{
  height:180px;border-radius:20px;
  background:repeating-linear-gradient(45deg,var(--white-3),var(--white-3) 10px,var(--white) 10px,var(--white) 20px);
  display:flex;align-items:center;justify-content:center;position:relative;
  border:0.8px solid var(--white-2);
}
.map-demo .pin{
  width:38px;height:38px;
  border-start-start-radius:50%;border-start-end-radius:50%;border-end-end-radius:50%;border-end-start-radius:0;
  background:var(--red);transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
}
.map-demo .pin .icon{transform:rotate(45deg);color:#fff;}

.share-row{display:flex;gap:8px;}
.share-row button{
  width:38px;height:38px;border-radius:50%;background:var(--white-3);border:none;
  display:flex;align-items:center;justify-content:center;color:var(--text-primary);
}

.spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid var(--white-3);border-top-color:var(--red);
  animation:spin .7s linear infinite;
}

.skeleton{
  background:linear-gradient(90deg,var(--skel-base) 25%,var(--skel-shine) 37%,var(--skel-base) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:12px;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

.date-range{
  display:flex;align-items:center;background:var(--white);
  border:1.5px solid var(--white-4);border-radius:var(--r-input);
  padding:12px 16px;gap:10px;font-size:.84375rem;font-weight:700;
}
.date-range .seg,.seg{display:flex;flex-direction:column;gap:2px;}
.date-range .seg span{font-size:.625rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-1);font-weight:800;}
.date-range .icon{color:var(--red);}

.switcher{display:inline-flex;align-items:center;gap:6px;background:var(--white-3);border-radius:var(--r-pill);padding:5px;}
.switcher button{border:none;background:transparent;padding:7px 13px;border-radius:var(--r-pill);font-size:.78125rem;font-weight:800;color:var(--text-secondary);}
.switcher button.active{background:var(--white);color:var(--text-primary);box-shadow:var(--shadow-subtle);}

.lang-switch{display:inline-flex;background:var(--white-3);border-radius:var(--r-pill);padding:4px;gap:2px;}
.lang-switch button{border:none;background:none;padding:8px 14px;border-radius:var(--r-pill);font-size:.78125rem;font-weight:800;color:var(--text-secondary);}
.lang-switch button.active{background:#fff;color:var(--text-primary);box-shadow:0 1px 4px rgba(0,0,0,.08);}

.divider{height:1px;background:var(--white-3);border:none;margin:0;}
.divider.v{width:1px;height:auto;align-self:stretch;}

.filter-panel{
  border:0.8px solid var(--white-2);border-radius:var(--r-card);
  padding:22px;display:flex;flex-direction:column;gap:18px;background:var(--white);
}
.filter-panel h5{font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);}

/* ============================================================================
   MESSAGING (docs 82–89)
   ========================================================================== */
.alert{
  display:flex;gap:12px;padding:16px 18px;border-radius:16px;
  font-size:.84375rem;align-items:flex-start;
}
.alert .icon{flex-shrink:0;margin-top:1px;}
.alert-info{background:var(--blue-soft);color:var(--blue-deep);}
.alert-success{background:var(--ok-bg);color:var(--ok-deep);}
.alert-warning{background:var(--warn-bg);color:var(--warn-deep);}
.alert-error{background:var(--err-strong);color:var(--err-deep);}

.bubble{max-width:70%;padding:12px 16px;border-radius:18px;font-size:.84375rem;}
.bubble.me{background:var(--red);color:#fff;border-end-end-radius:4px;margin-inline-start:auto;}
.bubble.them{background:var(--white-3);border-end-start-radius:4px;}

.notif-card{display:flex;gap:12px;padding:14px;border-radius:16px;background:var(--white-3);}
.notif-card .dot{width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:6px;flex-shrink:0;}
.notif-card b{font-size:.8125rem;}
.notif-card span{font-size:.75rem;color:var(--text-secondary);}

.notif-row{display:flex;align-items:flex-start;gap:10px;padding:10px 8px;border-radius:11px;}
.notif-row:hover{background:var(--white-3);}
.notif-row b{display:block;font-size:.78125rem;font-weight:800;}
.notif-row span{font-size:.71875rem;color:var(--text-secondary);}
.notif-row .dot{width:7px;height:7px;border-radius:50%;background:var(--red);margin-top:5px;flex-shrink:0;}

/* ============================================================================
   NAVIGATION (docs 1–8, 90–95)
   ========================================================================== */
.navbar-demo{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);
  border:0.8px solid var(--white-2);border-radius:24px;padding:14px 20px;background:var(--white);
}
.navbar-demo .brand,.brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.0625rem;}
.navbar-demo .brand svg,.brand .icon{color:var(--red);width:24px;height:24px;}
.navbar-demo nav{display:flex;gap:22px;font-size:.84375rem;font-weight:700;color:var(--text-secondary);}

.hamburger{
  width:var(--tap);height:var(--tap);border-radius:50%;background:var(--white-3);
  border:none;display:flex;align-items:center;justify-content:center;
}

.side-nav{
  border:0.8px solid var(--white-2);border-radius:20px;padding:14px;
  display:flex;flex-direction:column;gap:2px;width:200px;background:var(--white);
}
.side-nav a{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;
  font-size:.8125rem;font-weight:700;color:var(--text-secondary);
}
.side-nav a:hover{background:var(--white-3);color:var(--text-primary);}
.side-nav a.active{background:var(--selected-bg);color:var(--red);}

.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;color:var(--text-secondary);flex-wrap:wrap;}
.breadcrumb a{color:var(--text-secondary);}
.breadcrumb a:hover{color:var(--red);}
.breadcrumb .cur{color:var(--text-primary);font-weight:800;}
.breadcrumb .sep{color:var(--white-4);transform:var(--icon-flip,none);}

.crumbs{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--text-secondary);font-weight:600;flex-wrap:wrap;}
.crumbs .icon{width:14px;height:14px;transform:var(--icon-flip,none);}
.crumbs b{color:var(--text-primary);}

.tabs-underline{display:flex;gap:24px;border-bottom:1.4px solid var(--white-2);}
.tabs-underline button{
  background:none;border:none;padding:12px 2px;font-weight:700;font-size:.84375rem;
  color:var(--text-secondary);border-bottom:2.4px solid transparent;margin-bottom:-1.4px;
}
.tabs-underline button.active{color:var(--text-primary);border-color:var(--red);}

.tabs-pill{display:inline-flex;gap:4px;background:var(--white-3);padding:5px;border-radius:var(--r-pill);}
.tabs-pill button{border:none;background:none;padding:9px 16px;border-radius:var(--r-pill);font-size:.78125rem;font-weight:800;color:var(--text-secondary);}
.tabs-pill button.active{background:var(--red);color:#fff;}

.pagination{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.pagination button{
  min-width:var(--tap);height:var(--tap);border-radius:50%;border:none;
  background:var(--white-3);font-weight:700;font-size:.8125rem;color:var(--text-secondary);
}
.pagination button.active{background:var(--red);color:#fff;}

/* ============================================================================
   STRUCTURE & FOOTER (docs 90–95)
   ========================================================================== */
.footer-demo{border-radius:24px;background:#0F0F10;color:#fff;padding:var(--s-32);}
.footer-demo .cols{display:grid;grid-template-columns:1fr;gap:var(--s-24);}
@media(min-width:900px){ .footer-demo .cols{grid-template-columns:2fr 1fr 1fr 1fr;} }
@media(min-width:600px) and (max-width:899.98px){ .footer-demo .cols{grid-template-columns:1fr 1fr;} }
.footer-demo h5{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#8c8c8d;margin-bottom:12px;}
.footer-demo a{display:block;font-size:.8125rem;color:#d9d9d9;padding:5px 0;}
.footer-demo .col{display:flex;flex-direction:column;}

footer.page-foot{
  margin-top:100px;padding-top:var(--s-24);border-top:1px solid var(--white-3);
  color:var(--text-secondary);font-size:.78125rem;display:flex;justify-content:space-between;gap:var(--s-16);flex-wrap:wrap;
}

/* ============================================================================
   PLATFORM-SPECIFIC (docs 103–110 — payments, verification, saved searches,
   translation editor, ad slots)
   ========================================================================== */

/* ---- 103 · payment method selector ---- */
.pay-methods{display:flex;flex-direction:column;gap:10px;}
.pay-tile{
  display:flex;align-items:center;gap:12px;border:1.5px solid var(--white-4);
  border-radius:14px;padding:12px 14px;cursor:pointer;font-weight:700;font-size:.84375rem;
  position:relative;transition:border-color .15s ease,background .15s ease;
}
.pay-tile input{position:absolute;opacity:0;}        /* visually-hidden radio */
.pay-tile .pm-ic{
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:.6875rem;font-weight:900;flex-shrink:0;
}
.pay-tile .pm-txt{flex:1;}
.pay-tile .chk{opacity:0;color:var(--red);transition:opacity .15s ease;}
.pay-tile.active{border-color:var(--red);background:#FFF8F7;}
.pay-tile.active .chk{opacity:1;}

/* ---- 104 · verification checklist ---- */
.verify-list{display:flex;flex-direction:column;gap:12px;}
.v-item{display:flex;align-items:center;gap:10px;font-size:.84375rem;font-weight:600;color:var(--text-secondary);}
.v-item svg{color:var(--white-4);flex-shrink:0;}
.v-item.done{color:var(--text-primary);}
.v-item.done svg{color:var(--ok);}
.v-item.pending svg{color:var(--warn);}

/* ---- 105 · saved search with alerts ---- */
.saved-search{border:0.8px solid var(--white-2);border-radius:18px;padding:var(--s-16);background:var(--white);}
.saved-search .ss-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.84375rem;}
.saved-search .ss-meta{font-size:.75rem;color:var(--text-secondary);margin:6px 0 14px;}
.saved-search .ss-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}

/* ---- 106 · machine-translation status & editor ---- */
.translate-box{border:0.8px solid var(--white-2);border-radius:18px;padding:var(--s-16);background:var(--white);}
.t-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.t-tabs button{
  border:none;background:var(--white-3);padding:7px 12px;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:700;color:var(--text-secondary);
  display:flex;align-items:center;gap:6px;
}
.t-tabs button.active{background:var(--red);color:#fff;}
.mt-badge{
  background:var(--blue-soft);color:var(--blue);font-size:.59375rem;font-weight:800;
  padding:2px 6px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em;
}
.t-tabs button.active .mt-badge{background:rgba(255,255,255,.25);color:#fff;}
.t-text{font-size:.8125rem;color:var(--text-primary);line-height:1.5;margin-bottom:12px;}
.t-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}

/* ---- 107 · AdSense placeholder slot ---- */
.ad-slot{
  border:1.4px dashed var(--white-4);border-radius:14px;background:var(--white-3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:28px var(--s-16);color:var(--gray-1);
  font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
}
.ad-slot .ad-dim{font-size:.625rem;font-weight:700;color:var(--white-4);text-transform:none;letter-spacing:0;}