/* =========================================================================
   Jebly landing — dark theme for the legacy main.css pages and the
   third-party widgets the shared layout loads.

   landing.css re-themes every Jebly component through its tokens. The views
   that extend layouts/landing/app.blade.php but are still drawn by
   public/assets/landing/css/main.css (about, contact, the policy pages, rider
   registration, the vendor registration steps 2-3) carry hard-coded #fff
   surfaces and their own --landing-* variables, and the layout also loads
   intlTelInput, Bootstrap and toastr, which ship light-only colours.

   Every rule here is scoped to :root[data-theme="dark"], so light mode is
   byte-for-byte what main.css paints. Every value is a --jb-* token. Loaded
   after landing-bridge.css; goes away with main.css (PORT_AUDIT.md D16).
   ========================================================================= */

/* --- main.css variables --------------------------------------------------- */
:root[data-theme="dark"] {
  --landing-text: var(--jb-text-primary);
  --landing-muted: var(--jb-text-secondary);
  --landing-soft: var(--jb-soft-primary);
  --landing-border: var(--jb-chip-border);
  --landing-shadow: var(--jb-shadow-float);
  --body-bg: var(--jb-background);
  --body-clr: var(--jb-text-secondary);
  --title-clr: var(--jb-text-primary);
  --header-bg: var(--jb-surface);
  --section-bg: var(--jb-background);
  --border-clr: var(--jb-chip-border);
  --border-light: var(--jb-chip-border);
}

/* --- page shell (views whose <body> is not .jb) --------------------------- */
:root[data-theme="dark"] body:not(.jb) {
  background: var(--jb-background);
  color: var(--jb-text-secondary);
}
:root[data-theme="dark"] .page-hero {
  background:
    radial-gradient(60% 55% at 50% 0%, var(--jb-soft-primary) 0%, transparent 70%),
    var(--jb-background);
}
:root[data-theme="dark"] .page-hero .breadcrumb a { color: var(--jb-accent-primary-text); }
:root[data-theme="dark"] .page-content,
:root[data-theme="dark"] .contact-section,
:root[data-theme="dark"] .reg-section { background: var(--jb-background); }

/* --- cards ------------------------------------------------------------------ */
:root[data-theme="dark"] .content-card,
:root[data-theme="dark"] .contact-form-card,
:root[data-theme="dark"] .contact-card,
:root[data-theme="dark"] .reg-container > .card,
:root[data-theme="dark"] .reg-container .__card,
:root[data-theme="dark"] .reg-card,
:root[data-theme="dark"] .success-box {
  background: var(--jb-surface);
  border-color: var(--jb-chip-border);
  box-shadow: var(--jb-shadow-float);
  color: var(--jb-text-secondary);
}
:root[data-theme="dark"] .reg-container .card-header { background: var(--jb-surface); border-color: var(--jb-chip-border); }
/* CMS rich text inside the policy cards carries no colour of its own. */
:root[data-theme="dark"] .content-card :where(p, li, span, div, td, th) { color: inherit; }
:root[data-theme="dark"] .content-card :where(a) { color: var(--jb-accent-primary-text); }
:root[data-theme="dark"] .content-card :where(strong, b) { color: var(--jb-text-primary); }
:root[data-theme="dark"] .content-card :where(hr) { border-color: var(--jb-chip-border); }
:root[data-theme="dark"] .content-card :where(table) { border-color: var(--jb-chip-border); }
:root[data-theme="dark"] .cc-icon { background: var(--jb-soft-primary); color: var(--jb-accent-primary-text); }

/* --- forms (contact form, rider registration, bs4 controls) ---------------- */
:root[data-theme="dark"] .cf-group input,
:root[data-theme="dark"] .cf-group textarea,
:root[data-theme="dark"] body:not(.jb) .form-control,
:root[data-theme="dark"] body:not(.jb) .__form-control,
:root[data-theme="dark"] body:not(.jb) .reg-card :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  background: var(--jb-background);
  border-color: var(--jb-chip-border);
  color: var(--jb-text-primary);
}
:root[data-theme="dark"] .cf-group input::placeholder,
:root[data-theme="dark"] .cf-group textarea::placeholder,
:root[data-theme="dark"] body:not(.jb) .form-control::placeholder,
:root[data-theme="dark"] body:not(.jb) .__form-control::placeholder,
:root[data-theme="dark"] body:not(.jb) .reg-card :where(input, textarea)::placeholder { color: var(--jb-hint); }
:root[data-theme="dark"] .cf-group input:focus,
:root[data-theme="dark"] .cf-group textarea:focus,
:root[data-theme="dark"] body:not(.jb) .form-control:focus,
:root[data-theme="dark"] body:not(.jb) .__form-control:focus {
  border-color: var(--jb-primary);
  box-shadow: 0 0 0 3px var(--jb-primary-a25);
  background: var(--jb-surface);
}
:root[data-theme="dark"] body:not(.jb) .reg-card :where(label, h3, h4) { color: var(--jb-text-primary); }
:root[data-theme="dark"] body:not(.jb) .reg-card :where(.form-hint, small) { color: var(--jb-text-secondary); }
:root[data-theme="dark"] .upload-area { background: var(--jb-background); border-color: var(--jb-chip-border); color: var(--jb-text-secondary); }
:root[data-theme="dark"] .cf-submit,
:root[data-theme="dark"] .submit-btn,
:root[data-theme="dark"] .btn-next,
:root[data-theme="dark"] .btn-home { background: var(--jb-primary); color: var(--jb-on-primary); }
/* bs .bg-white cells (captcha image) and text utilities */
:root[data-theme="dark"] body:not(.jb) .bg-white { background-color: var(--jb-surface) !important; }
:root[data-theme="dark"] body:not(.jb) .text-muted { color: var(--jb-text-secondary) !important; }
:root[data-theme="dark"] body:not(.jb) .text-danger { color: var(--jb-error) !important; }

/* --- vendor registration steps 2-3 (stepper, plans, payment) ---------------
   Scoped to body:not(.jb): the /vendor/apply sheet (register.css) restyles
   the same partial classes itself. */
:root[data-theme="dark"] body:not(.jb) .stepper-circle { background: var(--jb-chip-background); border-color: var(--jb-chip-border); color: var(--jb-text-secondary); }
:root[data-theme="dark"] body:not(.jb) .stepper-step.active .stepper-circle { background: var(--jb-primary); border-color: var(--jb-primary); color: var(--jb-on-primary); }
:root[data-theme="dark"] body:not(.jb) .stepper-step.active { color: var(--jb-accent-primary-text); }
:root[data-theme="dark"] body:not(.jb) .stepper-connector { background: var(--jb-chip-border); }
:root[data-theme="dark"] body:not(.jb) .plan-check-item .plan-check-item-inner,
:root[data-theme="dark"] body:not(.jb) .payment-item .payment-item-inner,
:root[data-theme="dark"] body:not(.jb) .__plan-item {
  background: var(--jb-surface);
  border-color: var(--jb-chip-border);
  color: var(--jb-text-secondary);
}
:root[data-theme="dark"] body:not(.jb) .plan-check-item .plan-check-item-inner h5,
:root[data-theme="dark"] body:not(.jb) .__plan-item .price,
:root[data-theme="dark"] body:not(.jb) .payment-section-title { color: var(--jb-text-primary); }
:root[data-theme="dark"] body:not(.jb) .__plan-item .title { color: var(--jb-accent-primary-text); }
:root[data-theme="dark"] body:not(.jb) .plan-check-item input:checked + .plan-check-item-inner,
:root[data-theme="dark"] body:not(.jb) .payment-item input:checked ~ .payment-item-inner {
  background: var(--jb-soft-primary);
  border-color: var(--jb-primary);
}
:root[data-theme="dark"] body:not(.jb) .__plan-item.active { background: var(--jb-primary); border-color: var(--jb-primary); color: var(--jb-on-primary); }
:root[data-theme="dark"] body:not(.jb) .__plan-item.active .title,
:root[data-theme="dark"] body:not(.jb) .__plan-item.active .price { color: var(--jb-on-primary); }
:root[data-theme="dark"] body:not(.jb) .__plan-item .day-count { background: var(--jb-chip-background); color: var(--jb-text-secondary); }
:root[data-theme="dark"] body:not(.jb) .payment-divider { border-color: var(--jb-chip-border); background: var(--jb-chip-border); }
:root[data-theme="dark"] body:not(.jb) .store-apply-navs { border-color: var(--jb-chip-border); }
:root[data-theme="dark"] body:not(.jb) .store-apply-navs .nav-link.active,
:root[data-theme="dark"] body:not(.jb) .store-apply-navs .nav-link:hover {
  background: var(--jb-surface);
  border-color: var(--jb-chip-border) var(--jb-chip-border) var(--jb-surface);
  color: var(--jb-accent-primary-text);
}

/* --- legacy footer (views that are not .jb keep main.css's footer) --------- */
:root[data-theme="dark"] body:not(.jb) .footer { background: var(--jb-inverse-surface); }
/* The newsletter band takes the CMS primary (a neon #00e77b by default),
   which glares on slate; the brand green is the same hue, one step calmer. */
:root[data-theme="dark"] .newsletter-area { background: var(--jb-primary); box-shadow: var(--jb-shadow-float); }
:root[data-theme="dark"] .nl-form { background: var(--jb-surface); }
:root[data-theme="dark"] .nl-form input { background: transparent; color: var(--jb-text-primary); }
:root[data-theme="dark"] .nl-form input::placeholder { color: var(--jb-hint); }
:root[data-theme="dark"] .nl-form button { background: var(--jb-primary); color: var(--jb-on-primary); }

/* --- intlTelInput (tel inputs on the registration views) -------------------- */
:root[data-theme="dark"] .iti__country-list {
  background-color: var(--jb-surface);
  border-color: var(--jb-chip-border);
  color: var(--jb-text-primary);
  box-shadow: var(--jb-shadow-float);
}
:root[data-theme="dark"] .iti__country.iti__highlight,
:root[data-theme="dark"] .iti__selected-flag:hover,
:root[data-theme="dark"] .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag { background-color: var(--jb-chip-background); }
:root[data-theme="dark"] .iti__dial-code { color: var(--jb-text-secondary); }
:root[data-theme="dark"] .iti__divider { border-color: var(--jb-chip-border); }
:root[data-theme="dark"] .iti__arrow { border-top-color: var(--jb-text-secondary); }
:root[data-theme="dark"] .iti__arrow--up { border-bottom-color: var(--jb-text-secondary); }
:root[data-theme="dark"] .iti__search-input { background: var(--jb-background); color: var(--jb-text-primary); border-color: var(--jb-chip-border); }

/* --- toastr --------------------------------------------------------------- */
:root[data-theme="dark"] #toast-container > div { box-shadow: var(--jb-shadow-float); }