/* ============================================================
   CAPE TRAVELLERS GUIDE — MASTER DESIGN SYSTEM
   Reference: Travel Assistant section
   Frontend-only, additive, non-breaking.
   ============================================================ */

:root {
    /* ---------- COLOR PALETTE ---------- */
    /* Primary brand (Travel Assistant green) */
    --ds-primary:           #2d5016;
    --ds-primary-2:         #3e6b22;
    --ds-primary-grad:      linear-gradient(135deg, #2d5016 0%, #3e6b22 100%);
    --ds-primary-hover:     #244011;

    /* Accent (Premium golden) */
    --ds-accent:            #d4a855;
    --ds-accent-2:          #e6c378;
    --ds-accent-grad:       linear-gradient(135deg, #d4a855 0%, #e6c378 100%);
    --ds-accent-hover:      #b88f3d;
    --ds-accent-text:       #4a3308;

    /* Neutrals */
    --ds-bg:                #ffffff;
    --ds-bg-soft:           #fafafa;
    --ds-bg-muted:          #f5f5f5;
    --ds-border:            #e5e5e5;
    --ds-border-strong:     #d0d0d0;

    /* Text */
    --ds-text:              #1f1f1f;
    --ds-text-muted:        #4a4a4a;
    --ds-text-subtle:       #6b6b6b;
    --ds-text-on-primary:   #ffffff;
    --ds-text-on-accent:    #4a3308;

    /* Status (kept in family) */
    --ds-success-bg:        #e8f3dd;
    --ds-success-border:    #2d5016;
    --ds-success-text:      #1f3a0e;
    --ds-info-bg:           #e7f0fb;
    --ds-info-border:       #2c6db5;
    --ds-info-text:         #1a3f6b;
    --ds-warn-bg:           #fff4dc;
    --ds-warn-border:       #d4a855;
    --ds-warn-text:         #6b4f0f;

    /* ---------- SHAPE ---------- */
    --ds-radius-sm:         6px;
    --ds-radius:            10px;
    --ds-radius-lg:         14px;
    --ds-radius-pill:       999px;

    /* ---------- ELEVATION (subtle) ---------- */
    --ds-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.04);
    --ds-shadow:            0 2px 8px rgba(0, 0, 0, 0.06);
    --ds-shadow-lg:         0 6px 18px rgba(0, 0, 0, 0.08);
    --ds-shadow-hover:      0 8px 22px rgba(0, 0, 0, 0.10);

    /* ---------- SPACING SCALE (8px base) ---------- */
    --ds-space-1:           0.25rem;   /*  4px */
    --ds-space-2:           0.5rem;    /*  8px */
    --ds-space-3:           0.75rem;   /* 12px */
    --ds-space-4:           1rem;      /* 16px */
    --ds-space-5:           1.5rem;    /* 24px */
    --ds-space-6:           2rem;      /* 32px */
    --ds-space-7:           3rem;      /* 48px */
    --ds-space-8:           4rem;      /* 64px */

    /* ---------- TYPOGRAPHY ---------- */
    --ds-font-family:       'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --ds-line-body:         1.6;
    --ds-line-heading:      1.25;

    /* Fluid heading sizes (already used by hero) */
    --ds-h1-size:           clamp(2rem, 4vw + 1rem, 3.25rem);
    --ds-h2-size:           clamp(1.5rem, 2.2vw + 0.75rem, 2.25rem);
    --ds-h3-size:           clamp(1.15rem, 1vw + 0.85rem, 1.5rem);
    --ds-h4-size:           1.15rem;
    --ds-body-size:         1rem;
    --ds-small-size:        0.875rem;

    /* ---------- MOTION ---------- */
    --ds-ease:              cubic-bezier(.2, .7, .2, 1);
    --ds-dur-fast:          120ms;
    --ds-dur:               200ms;
}

/* ============================================================
   1. TYPOGRAPHY HIERARCHY
   ============================================================ */
body {
    font-family: var(--ds-font-family);
    color: var(--ds-text);
    line-height: var(--ds-line-body);
    font-size: var(--ds-body-size);
}

h1, .ds-h1 {
    font-size: var(--ds-h1-size);
    line-height: var(--ds-line-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}
h2, .ds-h2 {
    font-size: var(--ds-h2-size);
    line-height: var(--ds-line-heading);
    font-weight: 700;
    letter-spacing: -0.005em;
}
h3, .ds-h3 {
    font-size: var(--ds-h3-size);
    line-height: var(--ds-line-heading);
    font-weight: 600;
}
h4, .ds-h4, h5 {
    font-size: var(--ds-h4-size);
    line-height: var(--ds-line-heading);
    font-weight: 600;
}

.ds-text-muted   { color: var(--ds-text-muted) !important; }
.ds-text-subtle  { color: var(--ds-text-subtle) !important; }

/* ============================================================
   2. SECTION & SPACING RHYTHM
   ============================================================ */
.ds-section {
    padding-top: var(--ds-space-7);
    padding-bottom: var(--ds-space-7);
    scroll-margin-top: 80px;
}
.ds-section--soft  { background-color: var(--ds-bg-soft); }
.ds-section--muted { background-color: var(--ds-bg-muted); }

.ds-stack > * + * { margin-top: var(--ds-space-4); }
.ds-stack-lg > * + * { margin-top: var(--ds-space-5); }

/* ============================================================
   3. CARD SYSTEM (Travel Assistant master pattern)
   ============================================================ */
.ds-card {
    background: var(--ds-bg);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
    overflow: hidden;
    transition: box-shadow var(--ds-dur) var(--ds-ease),
                transform var(--ds-dur) var(--ds-ease);
}
.ds-card:hover { box-shadow: var(--ds-shadow-hover); }

.ds-card__header {
    padding: var(--ds-space-4) var(--ds-space-5);
    background: var(--ds-primary-grad);
    color: var(--ds-text-on-primary);
    font-weight: 600;
    font-size: var(--ds-h4-size);
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}
.ds-card__header--accent {
    background: var(--ds-accent-grad);
    color: var(--ds-text-on-accent);
}
.ds-card__header--neutral {
    background: var(--ds-bg-muted);
    color: var(--ds-text);
    border-bottom: 1px solid var(--ds-border);
}

.ds-card__body {
    padding: var(--ds-space-5);
    color: var(--ds-text);
}
.ds-card__body p { color: var(--ds-text-muted); margin-bottom: var(--ds-space-4); }
.ds-card__body > :last-child { margin-bottom: 0; }

/* Optional bridge: gently align Bootstrap `.card` to the system without breaking it */
.card.ds-aligned {
    border-radius: var(--ds-radius);
    border-color: var(--ds-border);
    box-shadow: var(--ds-shadow);
    overflow: hidden;
}

/* ============================================================
   4. BUTTON SYSTEM
   ============================================================ */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    min-height: 44px;
    padding: 0.6rem 1.25rem;
    border-radius: var(--ds-radius);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: var(--ds-body-size);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease),
                border-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease),
                transform var(--ds-dur-fast) var(--ds-ease);
}
.ds-btn:focus-visible {
    outline: 3px solid var(--ds-accent);
    outline-offset: 2px;
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn[disabled],
.ds-btn[aria-disabled="true"] {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* Primary — solid green gradient (Travel Assistant CTA) */
.ds-btn-primary {
    background: var(--ds-primary-grad);
    color: var(--ds-text-on-primary);
}
.ds-btn-primary:hover {
    background: var(--ds-primary-hover);
    color: var(--ds-text-on-primary);
    box-shadow: var(--ds-shadow);
}

/* Accent — golden CTA (Premium / hero) */
.ds-btn-accent {
    background: var(--ds-accent-grad);
    color: var(--ds-text-on-accent);
}
.ds-btn-accent:hover {
    background: var(--ds-accent-hover);
    color: var(--ds-text-on-accent);
    box-shadow: var(--ds-shadow);
}

/* Secondary — outline */
.ds-btn-secondary {
    background: transparent;
    color: var(--ds-primary);
    border-color: var(--ds-primary);
}
.ds-btn-secondary:hover {
    background: var(--ds-primary);
    color: var(--ds-text-on-primary);
}

/* Ghost — text-only */
.ds-btn-ghost {
    background: transparent;
    color: var(--ds-text);
    border-color: transparent;
}
.ds-btn-ghost:hover {
    background: var(--ds-bg-muted);
}

/* Size modifiers */
.ds-btn-sm { min-height: 36px; padding: 0.4rem 0.85rem; font-size: var(--ds-small-size); }
.ds-btn-lg { min-height: 52px; padding: 0.85rem 1.6rem; font-size: 1.05rem; }
.ds-btn-block { width: 100%; }

/* ============================================================
   5. ALERT / STATUS PILLS (matches TA card alerts)
   ============================================================ */
.ds-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3) var(--ds-space-4);
    border-radius: var(--ds-radius);
    border: 1px solid transparent;
    font-size: var(--ds-body-size);
}
.ds-alert--success { background: var(--ds-success-bg); border-color: var(--ds-success-border); color: var(--ds-success-text); }
.ds-alert--info    { background: var(--ds-info-bg);    border-color: var(--ds-info-border);    color: var(--ds-info-text); }
.ds-alert--warn    { background: var(--ds-warn-bg);    border-color: var(--ds-warn-border);    color: var(--ds-warn-text); }

/* ============================================================
   6. FORM CONTROL POLISH (lightweight, opt-in)
   ============================================================ */
.ds-input,
.ds-select,
.ds-textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.85rem;
    font-size: var(--ds-body-size);
    color: var(--ds-text);
    background: var(--ds-bg);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius);
    transition: border-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
    outline: none;
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.15);
}
.ds-textarea { min-height: 120px; resize: vertical; }
.ds-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--ds-space-2);
    color: var(--ds-text);
}

/* ============================================================
   7. UTILITIES
   ============================================================ */
.ds-radius      { border-radius: var(--ds-radius) !important; }
.ds-radius-lg   { border-radius: var(--ds-radius-lg) !important; }
.ds-shadow      { box-shadow: var(--ds-shadow) !important; }
.ds-shadow-none { box-shadow: none !important; }

.ds-divider {
    height: 1px;
    background: var(--ds-border);
    margin: var(--ds-space-5) 0;
    border: 0;
}

/* ============================================================
   8. RESPONSIVE TIGHTEN-UP
   ============================================================ */
@media (max-width: 576px) {
    .ds-section { padding-top: var(--ds-space-6); padding-bottom: var(--ds-space-6); }
    .ds-card__body { padding: var(--ds-space-4); }
    .ds-card__header { padding: var(--ds-space-3) var(--ds-space-4); }
}

/* ============================================================
   9. GLOBAL CONTAINER NORMALISATION
   One :is() selector covers every page-shell used in the app:
     • .container.my-5        → marketing / public pages
     • .container-fluid.my-5  → admin pages
     • .container.py-4        → multi-step enquiry flow
     • .container.py-5        → onboarding / agreement / sitemap / success pages
   No template HTML changes required.
   ============================================================ */

/* 9.1 Cards — single shape / elevation / hover */
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card {
    border-radius: var(--ds-radius) !important;
    border-color: var(--ds-border);
    box-shadow: var(--ds-shadow);
    transition: box-shadow var(--ds-dur) var(--ds-ease),
                transform var(--ds-dur) var(--ds-ease);
    overflow: hidden;
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card:hover {
    box-shadow: var(--ds-shadow-hover);
    transform: translateY(-4px);
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card img.card-img-top { transition: transform 0.4s var(--ds-ease); }
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card:hover img.card-img-top { transform: scale(1.04); }
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card.border-warning {
    border-color: var(--ds-accent) !important;
    border-width: 2px !important;
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .card-body { padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-5); }
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .card-title {
    font-size: var(--ds-h4-size);
    font-weight: 600;
    margin-bottom: var(--ds-space-2);
    color: var(--ds-text);
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .card-text { color: var(--ds-text-muted); font-size: 0.95rem; line-height: 1.55; }
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .card-text.small { font-size: 0.85rem; color: var(--ds-text-subtle); }
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .guide-bio { min-height: 3em; }
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .btn {
    border-radius: var(--ds-radius);
    min-height: 44px;
    font-weight: 600;
}

/* 9.2 Page titles — consistent with the design system H1 */
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) > h1,
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) > h2,
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) > .row > [class^="col-"] > h2 {
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: var(--ds-line-heading);
    color: var(--ds-text);
}

/* 9.3 Bootstrap button colour remap → design tokens */
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .btn-warning {
    background: var(--ds-accent-grad);
    border-color: var(--ds-accent);
    color: var(--ds-text-on-accent);
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .btn-warning:hover {
    background: var(--ds-accent-hover);
    border-color: var(--ds-accent-hover);
    color: var(--ds-text-on-accent);
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .btn-primary {
    background: var(--ds-primary-grad);
    border-color: var(--ds-primary);
    color: var(--ds-text-on-primary);
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .btn-primary:hover {
    background: var(--ds-primary-hover);
    border-color: var(--ds-primary-hover);
    color: var(--ds-text-on-primary);
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .btn-success {
    background: var(--ds-primary-grad);
    border-color: var(--ds-primary);
    color: var(--ds-text-on-primary);
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .btn-success:hover {
    background: var(--ds-primary-hover);
    border-color: var(--ds-primary-hover);
    color: var(--ds-text-on-primary);
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .btn-outline-primary {
    color: var(--ds-primary);
    border-color: var(--ds-primary);
    background: transparent;
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .btn-outline-primary:hover {
    background: var(--ds-primary);
    color: var(--ds-text-on-primary);
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .btn-outline-secondary {
    color: var(--ds-text-muted);
    border-color: var(--ds-border-strong);
    background: transparent;
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .btn-outline-secondary:hover {
    background: var(--ds-bg-muted);
    color: var(--ds-text);
    border-color: var(--ds-border-strong);
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .btn-outline-danger {
    color: var(--ds-text-muted);
    border-color: var(--ds-border-strong);
    background: transparent;
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .btn-outline-danger:hover {
    color: var(--ds-primary);
    border-color: var(--ds-primary);
    background: var(--ds-bg-muted);
}

/* 9.4 Card image aspect ratios — flush grids on every page */
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card img.card-img-top {
    aspect-ratio: 16 / 10;
    height: auto !important;
    object-fit: cover;
    width: 100%;
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .featured-guide-image img.card-img-top { aspect-ratio: 1 / 1; }
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .card-img-top.d-flex {
    aspect-ratio: 16 / 10;
    height: auto !important;
}

/* 9.5 Badges — single neutral / accent system */
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .badge {
    font-weight: 600;
    padding: 0.4em 0.7em;
    border-radius: var(--ds-radius-pill);
    letter-spacing: 0.01em;
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .badge.bg-warning {
    background: var(--ds-accent) !important;
    color: var(--ds-text-on-accent) !important;
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .badge.bg-secondary {
    background: var(--ds-bg-muted) !important;
    color: var(--ds-text-muted) !important;
    border: 1px solid var(--ds-border);
}

/* 9.5b Status-semantic badges INSIDE TABLES retain Bootstrap colours.
          (The bg-warning remap above is intentional for premium/featured chips
          in card bodies; it would strip semantic meaning from "Pending"
          status pills inside admin tables, so we re-establish them here.)        */
  :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .table .badge.bg-warning,
  :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) table .badge.bg-warning {
      background: #ffc107 !important;
      color: #000 !important;
      border: 0 !important;
  }
  :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .table .badge.bg-secondary,
  :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) table .badge.bg-secondary {
      background: #6c757d !important;
      color: #ffffff !important;
      border: 0 !important;
  }
  :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .table .badge.bg-success,
  :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) table .badge.bg-success {
      background: #198754 !important;
      color: #ffffff !important;
  }
  :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .table .badge.bg-danger,
  :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) table .badge.bg-danger {
      background: #dc3545 !important;
      color: #ffffff !important;
  }
  :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .table .badge.bg-info,
  :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) table .badge.bg-info {
      background: #0dcaf0 !important;
      color: #000 !important;
  }
  :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .table .badge.bg-primary,
  :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) table .badge.bg-primary {
      background: #0d6efd !important;
      color: #ffffff !important;
  }
  
/* 9.6 Equal column gutters everywhere */
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .row.g-3 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .row.g-4 { --bs-gutter-x: 1.5rem;  --bs-gutter-y: 1.5rem; }

/* 9.7 Carousel control + indicator harmony */
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .carousel-control-prev-icon,
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .carousel-control-next-icon {
    background-color: rgba(31, 31, 31, 0.85);
    border-radius: 50%;
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .carousel-indicators button {
    background-color: var(--ds-border-strong) !important;
    opacity: 1;
    border: 0;
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .carousel-indicators button.active {
    background-color: var(--ds-primary) !important;
}

/* 9.8 Form control polish — match design-system inputs */
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .form-control,
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .form-select {
    border-radius: var(--ds-radius);
    border-color: var(--ds-border);
    transition: border-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease);
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .form-control:focus,
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .form-select:focus {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.15);
}
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .form-label { font-weight: 600; color: var(--ds-text); }

/* 9.9 Alerts — same softness across every page */
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .alert {
    border-radius: var(--ds-radius);
    border-width: 1px;
}

/* ============================================================
   10. GLOBAL MOBILE OPTIMISATION
   Mirrors the homepage mobile pass on every page-shell.
   ============================================================ */
@media (max-width: 767.98px) {
    :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) {
        padding-left: var(--ds-space-4);
        padding-right: var(--ds-space-4);
    }
    :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .row > [class^="col-"] { margin-bottom: var(--ds-space-4); }
    :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .row > [class^="col-"]:last-child { margin-bottom: 0; }
    :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .card-body { padding: var(--ds-space-4); }
    :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .card .btn { width: 100%; }
    :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .carousel-control-prev,
    :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .carousel-control-next { width: 12%; }
    :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .carousel-control-prev-icon,
    :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .carousel-control-next-icon { padding: 0.6rem !important; }
    :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) .carousel-indicators { margin-top: var(--ds-space-4) !important; }

    a.btn, button.btn, .ds-btn { min-height: 44px; }
    body { overflow-x: hidden; }
}

@media (max-width: 380px) {
    :is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) {
          padding-left: var(--ds-space-3);
          padding-right: var(--ds-space-3);
      }
}

/* ============================================================
   11. FOOTER + NAVBAR HARMONISATION
   ============================================================ */
/* Brand "Become a Guide" CTA in footer → gold accent (matches Travel Assistant pattern site-wide). */
footer .btn.btn-primary {
    background: var(--ds-accent-grad);
    border-color: var(--ds-accent);
    color: var(--ds-text-on-accent);
    font-weight: 600;
    border-radius: var(--ds-radius);
    min-height: 44px;
}
footer .btn.btn-primary:hover {
    background: var(--ds-accent-hover);
    border-color: var(--ds-accent-hover);
    color: var(--ds-text-on-accent);
}
footer .btn.btn-outline-light {
    border-radius: var(--ds-radius);
    min-height: 44px;
    font-weight: 500;
}

/* Navbar links — slightly tighter focus ring + active-link weight */
.navbar .nav-link { font-weight: 500; }
.navbar .nav-link:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
    border-radius: var(--ds-radius-sm, 4px);
}

/* ============================================================
   12. PAGE-TITLE TYPOGRAPHY (centred page heads)
   ============================================================ */
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) > h1,
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) > .row > [class^="col-"] > h1,
:is(.container.my-5, .container-fluid.my-5, .container.py-4, .container.py-5) > .row > [class^="col-"] > .card .card-body > h2 {
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    line-height: var(--ds-line-heading);
}

/* ============================================================
   13. PREMIUM CARDS — DARK THEME
   Premium Guide cards (homepage #premium-guides carousels) and
   Premium Partner cards (homepage #premiumPartnersCarousel*) get a
   dark background with white text + icons. The gold --ds-accent
   border and the gold "Premium" pill remain to signal premium status.
   ============================================================ */
:is(#premium-guides, #premiumGuidesCarouselMobile,
    #premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card,
.premium-guide-card {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border-color: var(--ds-accent) !important;
}

/* Card text — titles, body copy, bios, small text */
:is(#premium-guides, #premiumGuidesCarouselMobile,
    #premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card .card-title,
:is(#premium-guides, #premiumGuidesCarouselMobile,
    #premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card .card-text,
:is(#premium-guides, #premiumGuidesCarouselMobile,
    #premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card .guide-bio,
:is(#premium-guides, #premiumGuidesCarouselMobile,
    #premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card p,
.premium-guide-card .card-title,
.premium-guide-card .card-text,
.premium-guide-card .guide-bio,
.premium-guide-card p {
    color: #ffffff !important;
}

/* Bootstrap muted helper inside premium cards — softer white instead */
:is(#premium-guides, #premiumGuidesCarouselMobile,
    #premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card .text-muted,
:is(#premium-guides, #premiumGuidesCarouselMobile,
    #premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card .text-secondary,
.premium-guide-card .text-muted,
.premium-guide-card .text-secondary {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* All Font Awesome icons inside the card → white
   (icons inside buttons are excluded so they inherit the button's own
    text colour and stay consistent with the button label) */
:is(#premium-guides, #premiumGuidesCarouselMobile,
    #premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card :not(.btn):not(.ds-btn) > i,
:is(#premium-guides, #premiumGuidesCarouselMobile,
    #premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card :not(.btn):not(.ds-btn) > .fa,
:is(#premium-guides, #premiumGuidesCarouselMobile,
    #premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card :not(.btn):not(.ds-btn) > .fas,
:is(#premium-guides, #premiumGuidesCarouselMobile,
    #premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card :not(.btn):not(.ds-btn) > .far,
:is(#premium-guides, #premiumGuidesCarouselMobile,
    #premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card :not(.btn):not(.ds-btn) > .fab,
.premium-guide-card :not(.btn):not(.ds-btn) > i,
.premium-guide-card :not(.btn):not(.ds-btn) > .fa,
.premium-guide-card :not(.btn):not(.ds-btn) > .fas,
.premium-guide-card :not(.btn):not(.ds-btn) > .far,
.premium-guide-card :not(.btn):not(.ds-btn) > .fab {
    color: #ffffff !important;
}

/* Empty image placeholder block on partner cards (no uploaded image) */
:is(#premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card .card-img-top.d-flex {
    background: #2a2a2a !important;
}
:is(#premiumPartnersCarousel, #premiumPartnersCarouselMobile) .card .card-img-top.d-flex i {
    color: var(--ds-accent) !important;
}