/* ==========================================================================
   Car-Stories pricing page
   Layout, spacing, cards, badges and buttons come from Bootstrap.
   This file adds the brand colours as Bootstrap-style utilities plus the
   few things Bootstrap cannot express (plan slider, card hover, popover).
   ========================================================================== */

.cs-pricing {
    --cs-darkgreen: var(--car-stories-darkgreen, rgb(52, 98, 110));
    --cs-lightgreen: var(--car-stories-lightgreen, rgb(101, 142, 149));
    --cs-darkblue: var(--car-stories-darkblue, rgb(15, 25, 68));
    --cs-ochre: var(--car-stories-ochre, rgb(209, 173, 95));
    --cs-ochre-dark: rgb(130, 100, 40);
    --cs-accent-text: var(--cs-darkgreen);   /* green used as text/icon colour */
}

/* Dark mode: dark green is too low in contrast as text */
[data-bs-theme="dark"] .cs-pricing,
.cs-pricing[data-bs-theme="dark"] {
    --cs-accent-text: var(--cs-lightgreen);
}

/* ----- Brand utilities (same naming scheme as Bootstrap) ----- */
.text-cs-green      { color: var(--cs-accent-text) !important; }
.text-cs-ink        { color: var(--cs-darkblue) !important; }
.text-cs-ochre      { color: var(--cs-ochre) !important; }
.text-cs-ochre-dark { color: var(--cs-ochre-dark) !important; }
.bg-cs-green        { background-color: var(--cs-darkgreen) !important; }
.bg-cs-green-subtle { background-color: color-mix(in srgb, var(--cs-lightgreen) 15%, transparent) !important; }
.bg-cs-ochre-solid  { background-color: var(--cs-ochre) !important; }
.bg-cs-ochre-subtle { background-color: color-mix(in srgb, var(--cs-ochre) 20%, transparent) !important; }
.border-cs-green    { border-color: var(--cs-darkgreen) !important; }
.border-cs-ochre    { border-color: var(--cs-ochre) !important; }
.border-dashed      { border-style: dashed !important; }

/* Button variants via Bootstrap's button variables */
.btn-cs-green {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cs-darkgreen);
    --bs-btn-border-color: var(--cs-darkgreen);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-darkblue);
    --bs-btn-hover-border-color: var(--cs-darkblue);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-darkblue);
    --bs-btn-active-border-color: var(--cs-darkblue);
    --bs-btn-focus-shadow-rgb: 52, 98, 110;
}
.btn-outline-cs-green {
    --bs-btn-color: var(--cs-accent-text);
    --bs-btn-border-color: var(--cs-darkgreen);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cs-darkgreen);
    --bs-btn-hover-border-color: var(--cs-darkgreen);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cs-darkgreen);
    --bs-btn-active-border-color: var(--cs-lightgreen);
    --bs-btn-focus-shadow-rgb: 52, 98, 110;
}

/* Brand gradients, referenced by Model.Color of cards and feature slides */
.bg-cs-sage   { background: linear-gradient(135deg, var(--cs-lightgreen), var(--cs-darkgreen)) !important; }
.bg-cs-deep   { background: linear-gradient(135deg, var(--cs-darkgreen), var(--cs-darkblue)) !important; }
.bg-cs-night  { background: linear-gradient(135deg, rgb(36, 52, 110), var(--cs-darkblue)) !important; }
.bg-cs-forest { background: linear-gradient(135deg, var(--cs-darkgreen), rgb(35, 71, 80)) !important; }
.bg-cs-pine   { background: linear-gradient(135deg, rgb(42, 85, 96), rgb(22, 50, 58)) !important; }
.bg-cs-ochre  { background: linear-gradient(135deg, var(--cs-ochre), rgb(150, 116, 48)) !important; }

/* ----- Small helpers ----- */
.cs-narrow       { max-width: 46rem; }
.cs-icon-box     { width: 3rem; height: 3rem; flex-shrink: 0; }
.cs-no-scrollbar { scrollbar-width: none; }
.cs-no-scrollbar::-webkit-scrollbar { display: none; }

/* Free notice: ochre marker on the left */
.cs-notice { border-left: 6px solid var(--cs-ochre) !important; }

/* Segment pills in brand green (template default would be blue) */
.cs-segment-switch {
    --bs-nav-pills-link-active-bg: var(--cs-darkgreen);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--cs-accent-text);
}
.cs-segment-switch .nav-link.active { background-color: var(--cs-darkgreen) !important; color: #fff !important; }

/* Segment panels: coloured top border and a light tint */
.cs-panel          { border-top-width: 4px !important; }
.cs-panel-private  { border-color: var(--cs-ochre) !important; background: color-mix(in srgb, var(--cs-ochre) 6%, var(--bs-body-bg)); }
.cs-panel-business { border-color: var(--cs-darkgreen) !important; background: color-mix(in srgb, var(--cs-darkgreen) 6%, var(--bs-body-bg)); }

/* ----- Plan slider: swipe on small screens, centered grid on desktop ----- */
.cs-plan-track {
    position: relative; /* reference for offsetLeft in script */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.cs-plan-track > .price-card { flex: 0 0 85%; max-width: 340px; scroll-snap-align: center; }

@media (min-width: 768px) {
    .cs-plan-track > .price-card { flex-basis: 46%; }
}
@media (min-width: 992px) {
    .cs-plan-track { flex-wrap: wrap !important; justify-content: center; overflow: visible !important; }
    .cs-plan-track > .price-card { flex: 0 0 auto; width: 320px; }
}

.cs-plan-nav { width: 2.5rem; height: 2.5rem; z-index: 2; transition: opacity .2s; }
.cs-plan-nav:disabled { opacity: 0 !important; pointer-events: none; }

/* ----- Price card (always light, see data-bs-theme on the card) ----- */
.cs-price-card {
    --cs-accent-text: var(--cs-darkgreen);
    --bs-body-color: var(--cs-darkblue);
    --bs-secondary-color: rgba(15, 25, 68, .6);
    --bs-border-color: rgba(15, 25, 68, .1);
    color: var(--cs-darkblue);
    transition: box-shadow .2s, transform .2s;
}
.cs-price-card:hover,
.cs-price-card:focus-within { transform: translateY(-4px); box-shadow: 0 1.25rem 2.5rem rgba(15, 25, 68, .14) !important; }

.cs-price-accent { height: 6px; transition: height .2s; }
.cs-price-card:hover .cs-price-accent { height: 9px; }

/* Reserved heights keep prices and dividers aligned across cards */
.cs-price-head   { min-height: 3rem; }
.cs-price-tax    { min-height: 1.25rem; }
.cs-price-yearly { min-height: 2.9rem; }

.cs-feature-row { margin-inline: -.5rem; transition: background-color .15s; }
.cs-feature-row:hover { background-color: color-mix(in srgb, var(--cs-lightgreen) 10%, transparent); }
.cs-feature-row > i { width: 1rem; }

/* Excluded features: keep them quiet */
.cs-price-card .fa-times,
.cs-price-card .fa-xmark,
.cs-price-card .fa-minus { color: rgba(15, 25, 68, .3) !important; }

/* "?" button next to a feature */
.cs-info { width: 1.25rem; height: 1.25rem; font-size: .75rem; line-height: 1; cursor: help; }
.cs-info[aria-describedby] { background-color: var(--cs-darkgreen); color: #fff; } /* popover open */

/* Popover (rendered in <body>, therefore not scoped) */
.popover.cs-price-popover {
    --bs-popover-max-width: 280px;
    --bs-popover-border-color: rgba(52, 98, 110, .25);
    --bs-popover-border-radius: .85rem;
    --bs-popover-header-bg: rgba(101, 142, 149, .12);
    --bs-popover-header-color: var(--car-stories-darkgreen, rgb(52, 98, 110));
    --bs-popover-font-size: .875rem;
    --bs-popover-box-shadow: 0 .75rem 2rem rgba(15, 25, 68, .15);
    box-shadow: var(--bs-popover-box-shadow);
}

/* ----- Feature carousel ----- */
.cs-feature-visual { min-height: 240px; }
.cs-feature-fallback iconify-icon { font-size: clamp(6rem, 18vw, 11rem); }
.cs-glass-btn { width: 2.5rem; height: 2.5rem; background: rgba(15, 25, 68, .55); color: #fff; backdrop-filter: blur(4px); }
.cs-glass-btn:hover,
.cs-glass-btn:focus-visible { background: rgba(15, 25, 68, .8); color: #fff; }

@media (min-width: 992px) {
    .cs-feature-visual { min-height: 440px; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-price-card,
    .cs-price-card:hover,
    .cs-price-card:focus-within { transition: none; transform: none; }
}