/* 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: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #495057;
}

/* Designer directive: every heading/subheading is set in Fraunces, site-wide.
   The colour (black) is applied on the light-themed pages — base.html and the
   warm theme — NOT here, so the dark admin panel keeps its own legible heading
   colour. Body copy above is Plus Jakarta Sans. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
}

.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: #9A3412;
    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;
    }
}

/* ── Skip link (TT-114, WCAG 2.4.1 Bypass Blocks) ──────────────────────────────
   Shared by base.html and admin_base.html, which both load this file.

   Off-screen rather than `display: none` or `visibility: hidden`: those remove
   the link from the tab order, which is the one thing it exists to be in. It
   becomes visible only when focused, so the design is unchanged for everyone
   who never presses Tab.

   Deliberately not `.visually-hidden`: Bootstrap's version clips to a 1px box
   permanently, so the link would stay invisible even while focused, and a
   keyboard user would be tabbing to something they cannot see. */
.tt-skip-link {
    position: absolute;
    left: 0;
    top: -60px;
    z-index: 2000;
    padding: 12px 20px;
    background: #1e293b;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top 0.15s ease-in-out;
}

.tt-skip-link:focus,
.tt-skip-link:focus-visible {
    top: 0;
    color: #fff;
    outline: 3px solid #c2410c;
    outline-offset: 2px;
}

/* `main` only carries tabindex="-1" so the skip link can move focus into it. It
   is not an interactive control, so a ring around the whole page body would be
   noise — the visible result of using the link is that the next Tab lands on the
   first control inside the content. */
#main-content:focus {
    outline: none;
}

/* ── TT-118 — Bootstrap `info` / `warning` are not legible as text ──────────
   Bootstrap's own palette, used through the `.text-info` / `.text-warning`
   utilities, measures 1.96:1 and 1.63:1 on white. WCAG 2.1 AA wants 4.5:1 for
   normal-size text, so these were the worst contrast failures on the site —
   worse than the brand orange (TT-113), and with no brand decision attached,
   because the colours are Bootstrap's rather than TailsTap's.

   The replacements are Bootstrap 5.3's own `-text-emphasis` variants, which
   exist for exactly this: `#664d03` measures 7.99:1 on white and 7.58:1 on the
   admin body `#f8f9fa`; `#055160` measures 8.93:1 and 8.47:1. Both stay well
   clear on the tinted `bg-*-opacity-10` cards these figures often sit in.

   Scoped to the two utilities only — `bg-info` / `bg-warning` backgrounds and
   `border-*` are untouched, so badges and alert fills keep the bright colours
   they were designed with.

   The admin panel's dark slate `#1e293b` is only the navbar gradient; admin
   content sits on `#f8f9fa`. That is worth stating because it is the thing
   that would make this override wrong: against the slate these emphasis
   colours fall to 1.83:1 and 1.64:1. Nothing puts `.text-warning` /
   `.text-info` on the slate today, and nothing should.

   Both base templates load this file, so the rule lives here rather than being
   duplicated per theme — the same reasoning as the skip-link styles above. */
.text-warning {
    color: #664d03 !important;
}

.text-info {
    color: #055160 !important;
}

/* Rating stars keep the amber. They are graphics, not text: WCAG judges them
   under 1.4.11 (3:1 for meaningful non-text content), not 1.4.3, and recolouring
   every star on the site from amber to dark olive is a visible product change
   rather than a mechanical contrast fix. Left deliberately, not overlooked —
   amber on white is 1.63:1 and does still fail 1.4.11, which is tracked on
   TT-118 as its own decision (darker amber, an outline, or accept). */
.rating-stars .text-warning,
.rating-stars.text-warning,
.fa-star.text-warning,
.fa-star-half-alt.text-warning,
.far.fa-star.text-warning {
    color: #ffc107 !important;
}