/* TailsTap Custom Styles */

/* UI sans — Plus Jakarta Sans (the design's body/label face). Self-hosted
   like Inter and Fraunces: the site has a CSP and ships no CDN fonts.
   Declared here rather than in warm-theme.css because the public navbar
   renders on every page, while warm-theme.css loads on six marketing pages. */
@font-face {
    font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400;
    font-display: swap;
    src: url("../vendor/plus-jakarta-sans/plus-jakarta-sans-400.503e7cbdb484.woff2") format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500;
    font-display: swap;
    src: url("../vendor/plus-jakarta-sans/plus-jakarta-sans-500.e5e6761eaecb.woff2") format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600;
    font-display: swap;
    src: url("../vendor/plus-jakarta-sans/plus-jakarta-sans-600.79e62f3332cd.woff2") format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700;
    font-display: swap;
    src: url("../vendor/plus-jakarta-sans/plus-jakarta-sans-700.5b629bd8abb4.woff2") format('woff2');
}

/* Heading serif — Fraunces. SemiBold 600 for headings, Bold 700 for the
   stats band (per the Figma specs). Declared here beside Jakarta so the auth
   pages can use it without pulling in the whole .tt-warm marketing theme;
   an unused @font-face costs nothing until a rule references the family. */
@font-face {
    font-family: 'Fraunces'; font-style: normal; font-weight: 600;
    font-display: swap;
    src: url("../vendor/fraunces/fraunces-600.b8dca52ca5f9.woff2") format('woff2');
}
@font-face {
    font-family: 'Fraunces'; font-style: italic; font-weight: 600;
    font-display: swap;
    src: url("../vendor/fraunces/fraunces-600italic.a31da9ead03f.woff2") format('woff2');
}
@font-face {
    font-family: 'Fraunces'; font-style: normal; font-weight: 700;
    font-display: swap;
    src: url("../vendor/fraunces/fraunces-700.d99d78cac1e8.woff2") format('woff2');
}

/* Root Variables */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --border-radius: 8px;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --transition: all 0.3s ease;
    /* TailsTap brand sage green — mirrored from --primary-color in base.html's
       inline :root block so tailstap.css can reference it standalone. */
    --tailstap-primary: #5c8d89;
    --tailstap-primary-dark: #497470;
}

/* Global Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #495057;
}

.btn {
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: var(--transition);
    border-width: 1px;
}

.btn:hover {
    transform: translateY(-1px);
}

.card {
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Navigation */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
}

.nav-link {
    font-weight: 500;
    transition: var(--transition);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #5c8d89 0%, #497470 100%);
    color: white;
    padding: 4rem 0;
}

.hero-section h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-section p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

/* Service Cards */
.service-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition);
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, var(--primary-color), var(--info-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-size: 1.5rem;
}

/* Vendor Dashboard */
.vendor-dashboard .dashboard-stat {
    border-radius: 12px;
    padding: 2rem;
    color: white;
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    position: relative;
    overflow: hidden;
}

.vendor-dashboard .dashboard-stat::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: var(--transition);
}

.vendor-dashboard .dashboard-stat:hover::before {
    transform: scale(1.2);
}

/* Booking Flow */
.booking-step {
    position: relative;
    z-index: 1;
}

.booking-step::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 2rem;
    height: 2px;
    background: #dee2e6;
    transform: translateY(-50%);
    z-index: -1;
}

.booking-step:last-child::before {
    display: none;
}

.booking-step.completed::before {
    background: var(--success-color);
}

.vendor-card {
    border: 2px solid transparent;
    transition: var(--transition);
    cursor: pointer;
}

.vendor-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
}

.vendor-card.selected {
    border-color: var(--success-color);
    background-color: #f8fff9;
}

.time-slot {
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: white;
}

.time-slot:hover:not(.unavailable) {
    border-color: var(--primary-color);
    background-color: #f0f8ff;
}

.time-slot.selected {
    border-color: var(--success-color);
    background-color: var(--success-color);
    color: white;
}

.time-slot.unavailable {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Admin Dashboard */
.admin-dashboard .admin-sidebar {
    background: linear-gradient(180deg, #1f2937 0%, #374151 100%);
    min-height: 100vh;
}

.admin-dashboard .metric-card {
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    background: white;
    transition: var(--transition);
}

.admin-dashboard .metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.metric-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Status Badges */
.status-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pending {
    background-color: #fff3cd;
    color: #856404;
}

.status-confirmed {
    background-color: #d1fae5;
    color: #059669;
}

.status-completed {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.status-cancelled {
    background-color: #fee2e2;
    color: #dc2626;
}

/* Rating Stars */
.rating-stars {
    color: #ffc107;
}

.rating-stars .fa-star {
    margin-right: 2px;
}

/* Loading States */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 123, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
}

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

/* Form Enhancements */
.form-control, .form-select {
    border-radius: var(--border-radius);
    border: 1px solid #ced4da;
    transition: var(--transition);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Table Enhancements */
.table {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.table th {
    font-weight: 600;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.04);
}

/* Modal Enhancements */
.modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.modal-header {
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    color: white;
    border-bottom: none;
}

/* Alert Enhancements */
.alert {
    border-radius: 12px;
    border: none;
    padding: 1rem 1.25rem;
}

.alert-primary {
    background-color: #e7f3ff;
    color: #004085;
}

.alert-success {
    background-color: #d1fae5;
    color: #047857;
}

.alert-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.alert-danger {
    background-color: #fee2e2;
    color: #b91c1c;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2rem;
    }

    .hero-section p {
        font-size: 1rem;
    }

    .metric-card {
        margin-bottom: 1rem;
    }

    .vendor-card {
        margin-bottom: 1.5rem;
    }

    .booking-step::before {
        display: none;
    }
}

/* Utility Classes */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-soft {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
}

.rounded-lg {
    border-radius: 12px !important;
}

.rounded-xl {
    border-radius: 16px !important;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.6s ease-in;
}

.slide-in-up {
    animation: slideInUp 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ─── M9: Identity Verification ─── */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    background-color: #d1fae5;
    color: #059669;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.verified-badge i {
    font-size: 0.75rem;
}

/* M5: Approval workflow status badges */
.status-requested {
    background: #fff3cd;
    color: #856404;
}
.status-declined {
    background: #f8d7da;
    color: #721c24;
}
.status-expired {
    background: #e2e3e5;
    color: #6c757d;
}

/* ─── M2: Notification System ─── */
.notification-dropdown {
    width: 340px;
    max-height: 420px;
    overflow-y: auto;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.notification-dropdown-item {
    white-space: normal;
    border-bottom: 1px solid #f0f0f0;
}

.notification-dropdown-item:last-child {
    border-bottom: none;
}

.notification-dropdown-item:hover {
    background-color: #eef4f3;
}

.notification-unread {
    background-color: #eef4f3;
    border-left: 3px solid var(--primary-color, #5c8d89);
}

.notification-badge {
    font-size: 0.6rem !important;
    min-width: 1.1rem;
    height: 1.1rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
}

.notification-bell .fa-bell {
    font-size: 1.1rem;
}

/* ─── M1: Reviews & Ratings ─── */
.star-select {
    gap: 0.25rem;
}

.star-label {
    cursor: pointer;
    font-size: 1.75rem;
    color: #dee2e6;
    transition: color 0.15s ease;
}

.star-radio:checked ~ .star-label {
    color: #ffc107;
}

.star-label:hover,
.star-label:hover ~ .star-label {
    color: #ffc107;
}

.review-card .rating-stars {
    color: #ffc107;
    font-size: 0.85rem;
}

.review-card .vendor-response {
    border-left: 3px solid var(--primary-color, #5c8d89);
}

.rating-summary .display-5 {
    color: var(--primary-color, #5c8d89);
}

.rating-bar {
    height: 8px;
    border-radius: 4px;
    background: #e9ecef;
    overflow: hidden;
}

.rating-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: #ffc107;
    transition: width 0.3s ease;
}

/* ─── M10: Meet & Greet ─── */
.mg-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 2.5rem 0;
    border-radius: 0 0 2rem 2rem;
    margin-bottom: 2rem;
}

.mg-info-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.mg-detail {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.mg-detail:last-child {
    border-bottom: none;
}

.mg-detail i {
    width: 2rem;
    color: var(--primary-color);
}

.mg-price-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
}

/* --- M11: Dispute Resolution --- */
.dispute-card {
    border-left: 3px solid transparent;
    transition: border-color 0.2s;
}

.dispute-card.dispute-open { border-left-color: #dc3545; }
.dispute-card.dispute-under-review { border-left-color: #ffc107; }
.dispute-card.dispute-awaiting-response { border-left-color: #0dcaf0; }
.dispute-card.dispute-resolved { border-left-color: #198754; }
.dispute-card.dispute-closed { border-left-color: #6c757d; }

.dispute-message {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

.dispute-message-customer {
    background-color: #eef4f3;
    border-left: 3px solid #5c8d89;
}

.dispute-message-vendor {
    background-color: #f0f9ff;
    border-left: 3px solid #0d6efd;
}

.dispute-message-admin {
    background-color: #fff3cd;
    border-left: 3px solid #ffc107;
}

.dispute-message-internal {
    background-color: #f8f9fa;
    border-left: 3px dashed #6c757d;
    font-style: italic;
}

.dispute-resolution-card {
    border: 2px solid #198754;
    border-radius: 0.75rem;
}

.dispute-stats .stat-card {
    text-align: center;
    padding: 1rem;
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* M13 Phase 3 — pricing page */
.plan-card {
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.plan-card--popular {
    border: 2px solid var(--primary-color, #5c8d89);
}
@media (min-width: 768px) {
    .plan-card--popular {
        transform: scale(1.03);
    }
}
.plan-card__badge {
    position: absolute;
    top: -0.75rem;
    right: 1rem;
    background: var(--primary-color, #5c8d89);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.plan-card__badge--launch {
    background: #f59e0b;
    top: 1.5rem;
}
.plan-card__price {
    margin-top: 0.5rem;
}
.plan-card__caption {
    margin-top: 0.25rem;
    min-height: 2.25rem;
}
.plan-card__bullets {
    list-style: none;
    padding-left: 0;
}
.plan-card__bullets li {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
[data-pricing-root][data-billing-cycle="monthly"] .price-annual,
[data-pricing-root][data-billing-cycle="monthly"] .caption-annual { display: none; }
[data-pricing-root][data-billing-cycle="annual"] .price-monthly,
[data-pricing-root][data-billing-cycle="annual"] .caption-monthly { display: none; }

/* M13 Phase 4 — selectable plan card */
.plan-card--selectable {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
.plan-card--selectable:hover {
    border-color: var(--tailstap-primary);
}
.plan-card--selectable:focus-within {
    outline: 2px solid var(--tailstap-primary);
    outline-offset: 2px;
}
.plan-card--selected {
    border: 2px solid var(--tailstap-primary);
    box-shadow: 0 0 0 4px rgba(92, 141, 137, 0.15);
}
.plan-card__check {
    display: none;
}
.plan-card--selected .plan-card__check {
    display: block;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: var(--tailstap-primary);
    font-size: 1.5rem;
}

/* M13 Phase 5 — vendor plan page */
.plan-feature-matrix .is-current-column {
  background: rgba(92, 141, 137, 0.06);
  font-weight: 600;
}

/* ------------------------------------------------------------------
   Pricing page — TC2000-style integrated table
   --pricing-cols is set inline from the template (plan count); the grid
   reserves one feature-label column + N plan columns.
   ------------------------------------------------------------------ */
.pricing-page {
    background: #fff;
}

.pricing-table {
    --pricing-cols: 4;                 /* fallback — template sets this inline */
    --pricing-border: #eef0f3;
    border-top: 1px solid var(--pricing-border);
}

.pricing-table__row {
    display: grid;
    grid-template-columns: 1.4fr repeat(var(--pricing-cols, 4), 1fr);
    border-bottom: 1px solid var(--pricing-border);
    align-items: center;
    min-height: 56px;
}

.pricing-table__row--head {
    align-items: flex-start;
    padding: 1.5rem 0 1.75rem;
    border-bottom: 1px solid var(--pricing-border);
}

.pricing-table__row--foot {
    padding: 1.5rem 0;
    border-bottom: none;
}

.pricing-table__feature {
    padding: 0.75rem 1.25rem;
    color: #1f2937;
    font-weight: 500;
}

.pricing-table__plan {
    padding: 0.75rem 1rem;
    text-align: center;
    position: relative;
}

.pricing-table__plan--popular {
    background: rgba(92, 141, 137, 0.04);
}

/* Current-plan column (vendor portal /business/plan/). Wins over --popular
   tinting so the vendor's active plan is the strongest emphasis on the row. */
.pricing-table__plan--current {
    background: rgba(92, 141, 137, 0.10);
    box-shadow: inset 0 0 0 1px rgba(92, 141, 137, 0.25);
}
.plan-card__badge--current {
    background: #1f2937;
}

.pricing-table__plan-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.5rem;
    line-height: 1.1;
}

.pricing-table__plan-name--sm {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.pricing-table__price {
    margin: 0.25rem 0 0.25rem;
    line-height: 1.2;
    min-height: 3.25rem;
}

.pricing-table__price .price-original {
    display: inline-block;
    color: #9ca3af;
    text-decoration: line-through;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.pricing-table__price .price-effective {
    display: block;
    color: #111827;
    font-size: 1.5rem;
    font-weight: 600;
}

.pricing-table__price .price-effective small {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.pricing-table__caption {
    min-height: 1.5rem;
}

.pricing-table__section-header {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0.75rem 1.25rem;
    background: #f7f8fa;
    border-bottom: 1px solid var(--pricing-border);
    border-left: 4px solid var(--tailstap-primary);
}

.pricing-table__section-title {
    font-weight: 600;
    color: #1f2937;
    font-size: 1.05rem;
}

/* Feature value visuals (dots / dashes) */
.feature-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tailstap-primary);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
}

.feature-dash {
    color: #d1d5db;
    font-weight: 600;
}

/* Billing-cycle toggle (radio pill group) */
.billing-toggle {
    display: inline-flex;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 999px;
    gap: 2px;
}

.billing-toggle__option {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.billing-toggle__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.billing-toggle__option span {
    display: inline-block;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    font-weight: 500;
    color: #4b5563;
    font-size: 0.9rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.billing-toggle__option input:checked + span {
    background: #fff;
    color: var(--tailstap-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.billing-toggle__option:hover input:not(:checked) + span {
    color: #1f2937;
}

.billing-toggle__option input:focus-visible + span {
    outline: 2px solid var(--tailstap-primary);
    outline-offset: 2px;
}

/* Pill-shaped "Select" CTA */
.btn-pill-select {
    background: var(--tailstap-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.5rem;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn-pill-select:hover,
.btn-pill-select:focus {
    background: var(--tailstap-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

/* Neutral disabled pill — current plan, "Not available", "Downgrade scheduled". */
.btn-pill-disabled {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 0.55rem 1.5rem;
    font-weight: 600;
    cursor: not-allowed;
}
.btn-pill-disabled:disabled {
    opacity: 1;
}

/* Responsive: stack on small screens.
   The legacy [data-billing-cycle] visibility toggles at lines 706-709
   above already handle .price-monthly / .price-annual / .caption-* show/hide
   for both the old plan-card layout and the new pricing-table — no need
   to duplicate them here. */
@media (max-width: 991px) {
    .pricing-table__row,
    .pricing-table__row--head,
    .pricing-table__row--foot {
        grid-template-columns: 1fr;
    }
    .pricing-table__feature {
        background: #f7f8fa;
        font-weight: 600;
    }
    .pricing-table__row--head .pricing-table__feature,
    .pricing-table__row--foot .pricing-table__feature {
        background: transparent;
    }
    /* Annotate feature-row plan cells with the plan name so stacked
       values aren't orphaned. Head/foot already render the plan name
       as a heading — suppress the annotation there. */
    .pricing-table__row .pricing-table__plan[data-plan-name]::before {
        content: attr(data-plan-name);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #6b7280;
        margin-bottom: 0.25rem;
    }
    .pricing-table__row--head .pricing-table__plan::before,
    .pricing-table__row--foot .pricing-table__plan::before {
        content: none;
    }
}

@media (max-width: 575px) {
    .pricing-table__plan-name {
        font-size: 1.4rem;
    }
}

/* ── Cookie-consent banner ──────────────────────────────────────────────── */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    background: #EA580C;
    color: #fff;
}
.cookie-consent__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
}
.cookie-consent__text {
    font-size: 0.9rem;
}
.cookie-consent__text a {
    color: #fff;
    text-decoration: underline;
}
.cookie-consent__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
@media (max-width: 575px) {
    .cookie-consent__inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .cookie-consent__actions {
        justify-content: center;
    }
}