/**
 * Colourscab Frontend Styles — Bold Vibrant Design System
 * Brand: hot magenta + electric cyan + sunshine yellow + mint lime
 */

/* Segoe UI everywhere — system font, no remote fetch. Fallbacks cover macOS/Linux. */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
    /* Brand */
    --cc-primary: #ff2e63;
    --cc-primary-dark: #e01650;
    --cc-cyan: #08d9d6;
    --cc-cyan-dark: #06b6b3;
    --cc-yellow: #ffd460;
    --cc-orange: #ff8a3d;
    --cc-lime: #7ee787;
    --cc-purple: #845ec2;

    /* Neutrals */
    --cc-deep: #252a34;
    --cc-deep-2: #0f1020;
    --cc-text: #2b2f3a;
    --cc-muted: #6b7280;
    --cc-cream: #fff8f0;
    --cc-surface: #ffffff;
    --cc-line: #ffe0e6;
    --cc-line-2: #f1e7d8;

    /* States */
    --cc-success: #10b981;
    --cc-warning: #f59e0b;
    --cc-danger:  #ef4444;
    --cc-info:    #06b6d4;

    /* Signature gradients */
    --cc-grad-primary: linear-gradient(135deg, #ff2e63 0%, #ff8a3d 50%, #ffd460 100%);
    --cc-grad-primary-strong: linear-gradient(135deg, #e01650 0%, #ff6b1a 55%, #f5b800 100%);
    --cc-grad-rainbow: linear-gradient(90deg, #ff2e63, #ff8a3d, #ffd460, #7ee787, #08d9d6, #845ec2);
    --cc-grad-cool: linear-gradient(135deg, #08d9d6 0%, #845ec2 100%);
    --cc-grad-deep: linear-gradient(135deg, #1a0b2e 0%, #0f1020 100%);

    /* Shadows */
    --cc-shadow-sm: 0 4px 12px rgba(255, 46, 99, 0.06);
    --cc-shadow:    0 12px 32px rgba(255, 46, 99, 0.10);
    --cc-shadow-lg: 0 24px 60px rgba(255, 46, 99, 0.16);
    --cc-shadow-deep: 0 20px 50px rgba(15, 16, 32, 0.18);

    /* Radii & misc */
    --cc-radius-xs: 8px;
    --cc-radius-sm: 12px;
    --cc-radius:    20px;
    --cc-radius-lg: 28px;
    --cc-radius-pill: 999px;

    /* Bootstrap overrides */
    --bs-primary: #ff2e63;
    --bs-primary-rgb: 255, 46, 99;
    --bs-link-color: #ff2e63;
    --bs-link-hover-color: #e01650;
    --bs-body-font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
input, button, select, textarea, optgroup { font-family: inherit; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cc-text);
    background: var(--cc-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cc-deep);
    margin: 0 0 .5em;
}

a {
    color: var(--cc-primary);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover { color: var(--cc-primary-dark); }

img { max-width: 100%; height: auto; }

::selection { background: var(--cc-primary); color: #fff; }

/* Container */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Utility wordmark */
.cc-rainbow-text {
    background: var(--cc-grad-rainbow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cc-grad-text {
    background: var(--cc-grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Top accent stripe used by header/footer */
.cc-stripe {
    height: 4px;
    background: var(--cc-grad-rainbow);
    background-size: 200% 100%;
    animation: cc-stripe-shift 12s linear infinite;
}
@keyframes cc-stripe-shift {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 rgba(15, 16, 32, .04);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.header.is-scrolled {
    box-shadow: 0 8px 30px rgba(15, 16, 32, .08);
}

/* Top utility bar */
.header-top-enhanced {
    background: var(--cc-grad-deep);
    color: #fff;
    padding: 8px 0;
    font-size: .8rem;
}
.header-top-enhanced .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.header-top-left, .header-top-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.top-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.85);
    font-size: .8rem;
    text-decoration: none;
    transition: color .2s;
}
.top-contact-item:hover { color: var(--cc-yellow); }
.top-contact-item i { color: var(--cc-cyan); }

.call-now-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cc-grad-primary);
    color: #fff !important;
    padding: 6px 14px;
    border-radius: var(--cc-radius-pill);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(255,46,99,.35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.call-now-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,46,99,.5); color: #fff; }
.call-now-btn i { font-size: .95rem; }

.whatsapp-float-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff !important;
    padding: 5px 12px;
    border-radius: var(--cc-radius-pill);
    font-size: .78rem;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.whatsapp-float-btn:hover { background: rgba(8,217,214,.18); border-color: var(--cc-cyan); color: #fff; }

.top-auth-link {
    color: rgba(255,255,255,.85);
    font-size: .8rem;
    text-decoration: none;
    padding: 4px 12px;
    border-radius: var(--cc-radius-pill);
    transition: background .2s, color .2s;
}
.top-auth-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.top-auth-link.active { background: rgba(8,217,214,.15); color: var(--cc-cyan); }
.top-divider { width: 1px; height: 18px; background: rgba(255,255,255,.18); }

/* Main nav */
.header-main { background: transparent; padding: 8px 0; }
.header .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--cc-deep);
    flex-shrink: 0;
    min-width: 0;
}
.logo:hover { color: var(--cc-deep); }
.logo img { max-height: 52px; width: auto; }
/* Brand image — sized by height, width auto so the original aspect ratio is preserved.
   The PNG is ~1195x427 (≈2.8:1), so 52px tall renders ~146px wide. Caps width on
   small screens so a wide logo never pushes the hamburger off the right edge. */
.logo-img {
    display: block;
    height: 52px;
    width: auto;
    max-width: clamp(140px, 38vw, 220px);
    object-fit: contain;
}
.logo-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--cc-grad-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(255,46,99,.35);
}
.logo-text .accent { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: var(--cc-grad-primary); -webkit-text-fill-color: transparent; }

.navbar-nav { gap: 6px; }
.nav-link {
    color: var(--cc-deep) !important;
    font-weight: 600;
    font-size: .95rem;
    padding: 10px 16px !important;
    border-radius: var(--cc-radius-pill);
    transition: background .2s, color .2s;
    position: relative;
}
.nav-link:hover { background: rgba(255,46,99,.08); color: var(--cc-primary) !important; }
.nav-link.active {
    color: var(--cc-primary) !important;
    background: linear-gradient(135deg, rgba(255,46,99,.12), rgba(255,212,96,.12));
}
.nav-link i { color: var(--cc-cyan); }

.navbar-toggler {
    border: 1.5px solid var(--cc-line);
    border-radius: 12px;
    padding: 6px 10px;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,46,99,.15); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ff2e63' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Offcanvas mobile nav */
.cc-offcanvas {
    width: 320px !important;
    background: var(--cc-cream);
}
.cc-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--cc-line);
    padding: 18px 20px;
}
.cc-offcanvas .offcanvas-body { padding: 16px 12px; }
.cc-offcanvas .nav-link {
    border-radius: 12px;
    padding: 12px 14px !important;
    margin-bottom: 4px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    border-radius: var(--cc-radius-pill);
    font-weight: 600;
    padding: 10px 22px;
    transition: transform .15s ease, box-shadow .2s ease, background .2s;
}
.btn:focus { box-shadow: 0 0 0 4px rgba(255,46,99,.15); }

.btn-primary,
.btn-cc-primary {
    background: var(--cc-grad-primary);
    border: none;
    color: #fff;
    box-shadow: 0 8px 22px rgba(255,46,99,.30);
}
.btn-primary:hover,
.btn-cc-primary:hover {
    background: var(--cc-grad-primary-strong);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255,46,99,.45);
    color: #fff;
}

.btn-cc-cyan {
    background: var(--cc-cyan);
    border: none;
    color: var(--cc-deep);
    box-shadow: 0 8px 22px rgba(8,217,214,.30);
}
.btn-cc-cyan:hover { background: var(--cc-cyan-dark); color: #fff; transform: translateY(-2px); }

.btn-cc-outline {
    background: transparent;
    border: 2px solid var(--cc-cyan);
    color: var(--cc-cyan-dark);
}
.btn-cc-outline:hover { background: var(--cc-cyan); color: var(--cc-deep); border-color: var(--cc-cyan); }

.btn-cc-ghost {
    background: transparent;
    border: 2px solid rgba(255,255,255,.4);
    color: #fff;
}
.btn-cc-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.7); }

.btn-secondary {
    background: var(--cc-deep);
    border: none;
    color: #fff;
}
.btn-secondary:hover { background: var(--cc-deep-2); color: #fff; }

.btn-success { background: var(--cc-success); border: none; }
.btn-success:hover { background: #059669; }

.btn-outline-primary {
    border: 2px solid var(--cc-primary);
    color: var(--cc-primary);
    background: transparent;
}
.btn-outline-primary:hover { background: var(--cc-primary); color: #fff; }

.btn-outline-light { border: 2px solid rgba(255,255,255,.5); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }

.btn-lg { padding: 14px 30px; font-size: 1rem; }
.btn-sm { padding: 6px 14px; font-size: .85rem; }

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select {
    border: 1.5px solid var(--cc-line);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
}
.form-control:focus, .form-select:focus {
    border-color: var(--cc-primary);
    box-shadow: 0 0 0 4px rgba(255,46,99,.12);
    outline: none;
}
.form-label { font-weight: 600; color: var(--cc-deep); margin-bottom: 6px; font-size: .9rem; }
.input-group-text {
    border: 1.5px solid var(--cc-line);
    background: var(--cc-cream);
    color: var(--cc-deep);
}

/* Field error state */
.error, .form-control.error {
    border-color: var(--cc-danger) !important;
    box-shadow: 0 0 0 4px rgba(239,68,68,.10) !important;
}

/* ============================================================
   CARDS (Bootstrap + custom)
   ============================================================ */
.card {
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    background: #fff;
    box-shadow: var(--cc-shadow-sm);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { box-shadow: var(--cc-shadow); transform: translateY(-2px); }
.card-header {
    background: linear-gradient(135deg, rgba(255,46,99,.06), rgba(8,217,214,.06));
    border-bottom: 1px solid var(--cc-line);
    font-weight: 700;
    color: var(--cc-deep);
    padding: 16px 20px;
}
.card-body { padding: 20px; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    border: none;
    border-radius: 14px;
    border-left: 4px solid var(--cc-primary);
    padding: 14px 18px;
    background: #fff;
    box-shadow: var(--cc-shadow-sm);
}
.alert-success { border-left-color: var(--cc-success); background: #ecfdf5; color: #065f46; }
.alert-danger  { border-left-color: var(--cc-danger);  background: #fef2f2; color: #991b1b; }
.alert-warning { border-left-color: var(--cc-warning); background: #fffbeb; color: #854d0e; }
.alert-info    { border-left-color: var(--cc-info);    background: #ecfeff; color: #155e75; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    border-radius: var(--cc-radius-pill);
    padding: .4em .8em;
    font-weight: 600;
}
.badge.bg-primary { background: var(--cc-grad-primary) !important; }
.badge.bg-success { background: var(--cc-success) !important; }
.badge.bg-warning { background: var(--cc-warning) !important; color: #fff; }
.badge.bg-info    { background: var(--cc-info) !important; }

/* Bootstrap bg/text overrides */
.bg-primary { background: var(--cc-grad-primary) !important; }
.text-primary { color: var(--cc-primary) !important; }
.text-warning { color: var(--cc-warning) !important; }
.text-success { color: var(--cc-success) !important; }
.bg-light { background: var(--cc-cream) !important; }
.bg-info { background: var(--cc-cyan) !important; }
.bg-success { background: var(--cc-success) !important; }
.bg-warning { background: var(--cc-warning) !important; }

/* Bootstrap "bg-opacity-10" tinted backgrounds for icon circles */
.bg-primary.bg-opacity-10 { background: rgba(255,46,99,.10) !important; color: var(--cc-primary); }
.bg-info.bg-opacity-10    { background: rgba(8,217,214,.12) !important; color: var(--cc-cyan-dark); }
.bg-success.bg-opacity-10 { background: rgba(126,231,135,.18) !important; color: #15803d; }
.bg-warning.bg-opacity-10 { background: rgba(255,212,96,.22) !important; color: #b45309; }

/* ============================================================
   HERO
   ============================================================ */
.hero-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15,16,32,.70) 0%, rgba(132,94,194,.40) 50%, rgba(255,46,99,.45) 100%),
                url('../images/puri.jpeg') center/cover no-repeat;
    color: #fff;
    isolation: isolate;
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: -10% -10% auto auto;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(8,217,214,.40), transparent 70%);
    border-radius: 50%;
    z-index: -1;
}
.hero-section::after {
    content: '';
    position: absolute;
    inset: auto auto -15% -15%;
    width: 440px; height: 440px;
    background: radial-gradient(circle, rgba(255,212,96,.35), transparent 70%);
    border-radius: 50%;
    z-index: -1;
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 90px 24px 140px;
    text-align: center;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(12px);
    color: #fff;
    padding: 8px 18px;
    border-radius: var(--cc-radius-pill);
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 28px;
}
.hero-badge i { color: var(--cc-yellow); }

.hero-title {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    color: #fff;
    font-size: clamp(2rem, 5.4vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
}
.hero-title span,
.hero-title .accent {
    background: var(--cc-grad-rainbow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hero-subtitle {
    color: rgba(255,255,255,.86);
    font-size: clamp(.95rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    max-width: 640px;
    margin: 0 auto 32px;
}
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-hero-primary {
    background: var(--cc-grad-primary);
    color: #fff;
    padding: 16px 32px;
    border-radius: var(--cc-radius-pill);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    box-shadow: 0 12px 28px rgba(255,46,99,.45);
    transition: transform .2s, box-shadow .2s;
}
.btn-hero-primary:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 16px 36px rgba(255,46,99,.55); }

.btn-hero-secondary {
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 16px 32px;
    border-radius: var(--cc-radius-pill);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid rgba(255,255,255,.32);
    transition: background .2s, border-color .2s;
}
.btn-hero-secondary:hover { background: rgba(8,217,214,.20); border-color: var(--cc-cyan); color: #fff; }

/* Floating booking bar overlapping hero */
.cc-search-bar {
    position: relative;
    z-index: 5;
    margin: -70px auto 0;
    max-width: 1100px;
    padding: 0 20px;
}
.cc-search-bar-inner {
    background: #fff;
    border-radius: var(--cc-radius-lg);
    box-shadow: 0 24px 60px rgba(15,16,32,.18);
    padding: 22px;
    border-top: 4px solid transparent;
    background-image:
        linear-gradient(#fff, #fff),
        var(--cc-grad-rainbow);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.cc-search-grid {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}
.cc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-field label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cc-muted); font-weight: 700; }
.cc-field .form-control, .cc-field .form-select {
    border: 1px solid transparent;
    background: var(--cc-cream);
    border-radius: 12px;
    padding: 10px 12px;
}
.cc-field .form-control:focus, .cc-field .form-select:focus {
    background: #fff;
    border-color: var(--cc-primary);
}
.cc-search-bar .btn {
    height: 100%;
    padding: 14px 24px;
    white-space: nowrap;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
    padding: 80px 0;
    background: var(--cc-cream);
}
.section-gray { background: #fff; }

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--cc-cyan-dark);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.section-tag::before {
    content: '';
    width: 28px; height: 3px;
    background: var(--cc-grad-primary);
    border-radius: 2px;
}
.section-title {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--cc-deep);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}
.section-subtitle {
    color: var(--cc-muted);
    font-size: 1.02rem;
    line-height: 1.65;
}

/* ============================================================
   STATS
   ============================================================ */
.stats-bar {
    background: #fff;
    padding: 36px 0;
    border-top: 1px solid var(--cc-line);
    border-bottom: 1px solid var(--cc-line);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}
.stat-item {
    padding: 8px 4px;
    position: relative;
}
.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -15px; top: 18%;
    width: 1px; height: 64%;
    background: var(--cc-line);
}
.stat-number {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
    font-weight: 800;
    line-height: 1;
    background: var(--cc-grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
}
.stat-label {
    font-size: .9rem;
    color: var(--cc-muted);
    font-weight: 600;
}

/* ============================================================
   PAGE HERO (compact banner shown on listing/detail pages)
   ============================================================ */
.page-hero {
    background: linear-gradient(135deg, rgba(255,46,99,.08), rgba(8,217,214,.08));
    border-bottom: 1px solid var(--cc-line);
    padding: 36px 0 28px;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--cc-grad-rainbow);
}
.page-hero h1 {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
    color: var(--cc-deep);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.page-hero h1 i { color: var(--cc-primary); font-size: 1.5rem; }
.page-hero p { color: var(--cc-muted); margin: 0; font-size: .98rem; }

/* ============================================================
   LISTING-PAGE SEARCH BAR
   ============================================================ */
.input-group {
    border-radius: var(--cc-radius-pill);
    overflow: hidden;
    box-shadow: var(--cc-shadow-sm);
    border: 1.5px solid var(--cc-line);
    background: #fff;
}
.input-group .form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    padding-top: 12px;
    padding-bottom: 12px;
}
.input-group .input-group-text {
    border: none !important;
    background: transparent;
    color: var(--cc-muted);
}
.input-group .btn { border-radius: 0 !important; padding-left: 22px; padding-right: 22px; }

/* ============================================================
   PACKAGE CARDS
   ============================================================ */
/* When packages are inside a Bootstrap row (listing pages), force a 2-up
   grid below the md breakpoint so the cards don't stretch full-width. */
.row > [class*="col-"] > .package-card { height: 100%; }
@media (max-width: 767.98px) {
    .row > [class*="col-"]:has(> .package-card),
    .row > [class*="col-"]:has(> .car-card) {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 26px;
}
.package-card {
    background: #fff;
    border-radius: var(--cc-radius);
    overflow: hidden;
    border: 1px solid var(--cc-line);
    box-shadow: var(--cc-shadow-sm);
    transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s, border-color .35s;
    display: flex;
    flex-direction: column;
}
.package-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--cc-shadow-lg);
    border-color: rgba(255,46,99,.28);
}
.package-image {
    position: relative;
    /* Uniform 16:10 aspect across every card so the grid stays even regardless
       of source image dimensions. Falls back to a min-height when aspect-ratio
       isn't supported (very old browsers). */
    aspect-ratio: 16 / 10;
    min-height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff8f0 0%, #ffe0e6 100%);
}
.package-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;   /* bias toward top — keeps faces / temple spires visible */
    transition: transform .6s ease;
    display: block;
}
.package-card:hover .package-image img { transform: scale(1.08); }
.package-image::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    background: linear-gradient(to top, rgba(15,16,32,.45), transparent);
    pointer-events: none;
}

.package-badge {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--cc-grad-primary);
    color: #fff;
    padding: 5px 12px;
    border-radius: var(--cc-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(255,46,99,.3);
    z-index: 2;
}
.package-wishlist {
    position: absolute;
    top: 14px; right: 14px;
    width: 38px; height: 38px;
    background: rgba(255,255,255,.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    transition: background .2s, color .2s;
    z-index: 2;
}
.package-wishlist i { color: var(--cc-primary); font-size: 1rem; }
.package-wishlist:hover { background: var(--cc-primary); }
.package-wishlist:hover i { color: #fff; }

.package-content,
.package-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }

/* Image placeholder + duration pill rendered ON the image (listing pages) */
.package-image-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--cc-muted);
    background: linear-gradient(135deg, #fff8f0 0%, #ffe0e6 100%);
    gap: 8px;
}
.package-image-placeholder i { font-size: 2.6rem; opacity: .5; }
.package-image .package-duration {
    position: absolute;
    bottom: 14px; left: 14px;
    background: rgba(255,255,255,.95);
    color: var(--cc-cyan-dark);
    backdrop-filter: blur(8px);
    z-index: 2;
    box-shadow: 0 4px 12px rgba(15,16,32,.15);
    margin: 0;
}

/* Price block variant used on listing cards */
.package-price .current {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--cc-deep);
    line-height: 1.2;
    margin-bottom: 2px;
}
.package-price .unit { font-size: .72rem; color: var(--cc-muted); font-weight: 600; }
.package-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(8,217,214,.14);
    color: var(--cc-cyan-dark);
    padding: 5px 12px;
    border-radius: var(--cc-radius-pill);
    font-size: .76rem;
    font-weight: 700;
    margin-bottom: 12px;
    align-self: flex-start;
}
.package-title {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cc-deep);
    margin: 0 0 8px;
    line-height: 1.35;
}
.package-location {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--cc-muted); font-size: .85rem; margin-bottom: 14px;
}
.package-location i { color: var(--cc-primary); }
.package-desc {
    color: var(--cc-muted); font-size: .85rem; line-height: 1.55;
    margin-bottom: 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.package-features {
    display: flex; gap: 14px; flex-wrap: wrap;
    padding: 14px 0;
    border-top: 1px dashed var(--cc-line);
    border-bottom: 1px dashed var(--cc-line);
    margin-bottom: 16px;
}
.package-feature {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; color: var(--cc-muted); font-weight: 500;
}
.package-feature i { color: var(--cc-success); font-size: .9rem; }
.package-footer {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; flex-wrap: wrap;
    margin-top: auto;
}
.package-price { display: flex; flex-direction: column; }
.price-from { font-size: .72rem; color: var(--cc-muted); font-weight: 600; }
.price-amount {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.35rem; font-weight: 800; color: var(--cc-deep);
    display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
}
.price-amount .old-price { font-size: .85rem; color: var(--cc-muted); text-decoration: line-through; font-weight: 500; }
.price-per { font-size: .72rem; font-weight: 600; color: var(--cc-muted); }

.btn-view {
    padding: 10px 20px;
    background: var(--cc-grad-primary);
    color: #fff !important;
    border: none;
    border-radius: var(--cc-radius-pill);
    font-size: .85rem; font-weight: 700;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 6px 18px rgba(255,46,99,.30);
    transition: transform .2s, box-shadow .2s;
    white-space: nowrap;
}
.btn-view:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,46,99,.45); color: #fff; }

.view-all-wrapper { text-align: center; margin-top: 48px; }
.btn-view-all {
    padding: 14px 32px;
    background: var(--cc-grad-primary);
    color: #fff !important;
    border: none;
    border-radius: var(--cc-radius-pill);
    font-size: .95rem; font-weight: 700;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 12px 28px rgba(255,46,99,.30);
    transition: transform .2s, box-shadow .2s;
}
.btn-view-all:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255,46,99,.45); color: #fff; }
.btn-view-all i { transition: transform .25s; }
.btn-view-all:hover i { transform: translateX(4px); }

/* ============================================================
   CARS / CAROUSEL
   ============================================================ */
.carousel-section {
    position: relative;
    padding: 0 56px;
}
.carousel-wrapper { overflow: hidden; }
.carousel-track {
    display: flex;
    gap: 22px;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.carousel-slide { flex: 0 0 calc(25% - 16.5px); min-width: calc(25% - 16.5px); }

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15,16,32,.10);
    transition: background .2s, transform .2s, color .2s;
    z-index: 10;
}
.carousel-btn:hover { background: var(--cc-grad-primary); border-color: transparent; }
.carousel-btn:hover i { color: #fff; }
.carousel-btn i { font-size: 1.25rem; color: var(--cc-deep); transition: color .2s; }
.carousel-btn.prev { left: 0; }
.carousel-btn.next { right: 0; }

.carousel-dots {
    display: flex; justify-content: center; gap: 10px; margin-top: 26px;
}
.carousel-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--cc-line);
    border: none; cursor: pointer;
    transition: all .25s;
    padding: 0;
}
.carousel-dot.active {
    background: var(--cc-grad-primary);
    width: 32px;
    border-radius: 5px;
}
.carousel-dot:hover:not(.active) { background: var(--cc-muted); }

.car-card {
    background: #fff;
    border-radius: var(--cc-radius);
    overflow: hidden;
    border: 1px solid var(--cc-line);
    box-shadow: var(--cc-shadow-sm);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    height: 100%;
    display: flex; flex-direction: column;
}
.car-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--cc-shadow);
    border-color: rgba(8,217,214,.4);
}
.car-image {
    /* Cars are product shots — show the whole vehicle, never crop. Uniform 4:3
       container, contain-fit on the image, soft brand-tinted backdrop. */
    aspect-ratio: 4 / 3;
    min-height: 150px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff8f0 0%, #ffe0e6 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 12px;
}
.car-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .4s;
    display: block;
}
.car-image-placeholder {
    height: 170px;
    background: linear-gradient(135deg, #fff8f0 0%, #ffe0e6 100%);
    display: flex; align-items: center; justify-content: center;
    color: var(--cc-muted); font-size: 2rem;
}
.car-card:hover .car-image img { transform: scale(1.06); }
.car-content, .car-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.car-name {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.05rem; font-weight: 700; color: var(--cc-deep);
    margin: 0 0 10px;
}
.car-type-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(8,217,214,.14);
    color: var(--cc-cyan-dark);
    padding: 4px 10px;
    border-radius: var(--cc-radius-pill);
    font-size: .72rem; font-weight: 700;
    margin-bottom: 10px;
    align-self: flex-start;
}
.car-specs, .car-features {
    display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.car-spec, .car-features > div, .car-features > span {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; color: var(--cc-muted);
}
.car-spec i, .car-features i { color: var(--cc-primary); }
.car-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 14px;
    border-top: 1px dashed var(--cc-line);
    margin-top: auto;
    gap: 10px;
}
.car-price {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.15rem; font-weight: 800; color: var(--cc-deep);
}
.car-price span { font-size: .8rem; font-weight: 500; color: var(--cc-muted); }

.btn-book-car {
    padding: 10px 20px;
    background: var(--cc-grad-primary);
    color: #fff !important;
    border: none;
    border-radius: var(--cc-radius-pill);
    font-size: .85rem; font-weight: 700;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-shadow: 0 6px 18px rgba(255,46,99,.28);
    transition: transform .2s, box-shadow .2s;
    cursor: pointer;
}
.btn-book-car:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,46,99,.42); color: #fff; }

/* Filter pills (cars page) */
.car-filter-pills {
    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px;
    justify-content: center;
}
.car-filter-pills a, .car-filter-pills .pill {
    padding: 8px 18px;
    border-radius: var(--cc-radius-pill);
    background: #fff;
    border: 1.5px solid var(--cc-line);
    color: var(--cc-deep);
    font-weight: 600; font-size: .85rem;
    text-decoration: none;
    transition: all .2s;
}
.car-filter-pills a:hover, .car-filter-pills .pill:hover { border-color: var(--cc-primary); color: var(--cc-primary); }
.car-filter-pills a.active, .car-filter-pills .pill.active {
    background: var(--cc-grad-primary); color: #fff; border-color: transparent;
    box-shadow: 0 6px 18px rgba(255,46,99,.30);
}
.car-info-box {
    background: linear-gradient(135deg, rgba(255,46,99,.05), rgba(8,217,214,.05));
    border: 1px solid var(--cc-line);
    border-radius: 14px;
    padding: 14px 18px;
}

/* ============================================================
   PACKAGE DETAIL PAGE  (package.php)
   ============================================================ */
/* Hero image with overlaid title + meta badges */
.package-hero {
    position: relative;
    border-radius: var(--cc-radius);
    overflow: hidden;
    margin-bottom: 24px;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #fff8f0 0%, #ffe0e6 100%);
    box-shadow: var(--cc-shadow);
}
.package-hero img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 35%;
    display: block;
}
.package-hero-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 30px 28px 24px;
    background: linear-gradient(to top, rgba(15,16,32,.85) 0%, rgba(15,16,32,.55) 60%, transparent 100%);
    color: #fff;
}
.package-hero-overlay h1 {
    color: #fff;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    margin: 0 0 12px;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.package-hero-badges {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.package-hero-badges .badge-item {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--cc-radius-pill);
    font-size: .82rem;
    font-weight: 600;
}
.package-hero-badges .badge-item i { color: var(--cc-yellow); }

/* 4-stat strip under the hero */
.package-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.package-stats .stat-card {
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm);
    padding: 18px 14px;
    text-align: center;
    box-shadow: var(--cc-shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.package-stats .stat-card:hover { transform: translateY(-2px); box-shadow: var(--cc-shadow); }
.package-stats .stat-card > i {
    display: block;
    font-size: 1.5rem;
    background: var(--cc-grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}
.package-stats .stat-value {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--cc-deep);
    line-height: 1;
    margin-bottom: 4px;
}
.package-stats .stat-label {
    font-size: .78rem;
    color: var(--cc-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Itinerary timeline */
.itinerary-timeline { position: relative; padding-left: 28px; }
.itinerary-timeline::before {
    content: '';
    position: absolute;
    top: 8px; bottom: 8px; left: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--cc-primary), var(--cc-cyan));
    border-radius: 2px;
}
.timeline-item {
    position: relative;
    padding: 0 0 22px 18px;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -22px; top: 6px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--cc-grad-primary);
    box-shadow: 0 0 0 4px #fff, 0 4px 10px rgba(255,46,99,.30);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item .day-badge {
    display: inline-block;
    background: var(--cc-grad-primary);
    color: #fff;
    padding: 3px 12px;
    border-radius: var(--cc-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(255,46,99,.30);
}
.timeline-item h4 {
    font-size: 1.05rem;
    margin: 0 0 6px;
    color: var(--cc-deep);
}
.timeline-item p {
    color: var(--cc-muted);
    font-size: .92rem;
    line-height: 1.6;
    margin: 0 0 8px;
}
.timeline-item .meta-info {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: .8rem; color: var(--cc-muted);
}
.timeline-item .meta-info span { display: inline-flex; align-items: center; gap: 5px; }
.timeline-item .meta-info i { color: var(--cc-cyan-dark); }

/* Booking sidebar */
.booking-sidebar {
    background: #fff;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    overflow: hidden;
    box-shadow: var(--cc-shadow);
}
.booking-sidebar .sidebar-header {
    background: var(--cc-grad-primary);
    color: #fff;
    padding: 18px 22px;
}
.booking-sidebar .sidebar-header h5 {
    color: #fff;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex; align-items: center;
}
.booking-sidebar .price-display {
    text-align: center;
    padding: 22px 22px 18px;
    background: linear-gradient(135deg, rgba(255,46,99,.06), rgba(8,217,214,.06));
    border-bottom: 1px solid var(--cc-line);
}
.booking-sidebar .current-price {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    background: var(--cc-grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}
.booking-sidebar .price-unit {
    font-size: .82rem;
    color: var(--cc-muted);
    font-weight: 600;
    margin-top: 4px;
}
.booking-sidebar .sidebar-body { padding: 22px; }
.booking-sidebar .help-section {
    background: var(--cc-cream);
    border-top: 1px solid var(--cc-line);
    padding: 16px 22px;
    text-align: center;
}
.booking-sidebar .btn-call {
    border-radius: var(--cc-radius-pill);
    padding: 8px 16px;
    font-size: .85rem;
    font-weight: 600;
}
.btn-book {
    width: 100%;
    background: var(--cc-grad-primary);
    border: none;
    color: #fff;
    font-weight: 700;
    padding: 14px 22px;
    border-radius: var(--cc-radius-pill);
    box-shadow: 0 10px 24px rgba(255,46,99,.30);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .2s, box-shadow .2s;
}
.btn-book:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255,46,99,.45); color: #fff; }

/* Vehicle picker — overrides the inline style block in package.php so the
   indigo defaults pick up our brand pink + cyan. Specificity-bumped via .booking-sidebar. */
.booking-sidebar .step-badge {
    background: var(--cc-grad-primary) !important;
}
.booking-sidebar .vehicle-card-label {
    border-radius: 14px !important;
    border-color: var(--cc-line) !important;
}
.booking-sidebar .vehicle-card-label:hover {
    border-color: var(--cc-primary) !important;
    background: rgba(255,46,99,.04) !important;
}
.booking-sidebar .vehicle-radio:checked + .vehicle-card-label {
    border-color: var(--cc-primary) !important;
    background: linear-gradient(135deg, rgba(255,46,99,.10), rgba(8,217,214,.06)) !important;
    box-shadow: 0 6px 18px rgba(255,46,99,.18) !important;
}
.booking-sidebar .vehicle-radio:checked + .vehicle-card-label .vehicle-check {
    background: var(--cc-grad-primary) !important;
    border-color: transparent !important;
}
.booking-sidebar .price-amount { color: var(--cc-primary) !important; }
.booking-sidebar .vehicle-icon.bg-primary  { background: var(--cc-grad-primary) !important; }
.booking-sidebar .vehicle-icon.bg-success  { background: linear-gradient(135deg, #7ee787, #15803d) !important; }
.booking-sidebar .vehicle-icon.bg-info     { background: linear-gradient(135deg, #08d9d6, #06b6b3) !important; }
.booking-sidebar .vehicle-icon.bg-warning  { background: linear-gradient(135deg, #ffd460, #f59e0b) !important; }
.booking-sidebar .vehicle-icon.bg-danger   { background: linear-gradient(135deg, #ff8a3d, #ff2e63) !important; }
.booking-sidebar .vehicle-icon.bg-secondary{ background: var(--cc-grad-deep) !important; }

/* Breadcrumb */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: .9rem;
}
.breadcrumb-item a { color: var(--cc-primary); font-weight: 600; }
.breadcrumb-item.active { color: var(--cc-deep); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--cc-muted); }

/* Mobile tweaks for package detail */
@media (max-width: 768px) {
    .package-hero { aspect-ratio: 16 / 10; margin-bottom: 16px; }
    .package-hero-overlay { padding: 20px 16px 16px; }
    .package-hero-badges .badge-item { font-size: .72rem; padding: 4px 10px; }
    .package-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
    .package-stats .stat-card { padding: 14px 10px; }
    .package-stats .stat-card > i { font-size: 1.3rem; margin-bottom: 6px; }
    .package-stats .stat-value { font-size: 1.15rem; }
    .package-stats .stat-label { font-size: .68rem; }
    .booking-sidebar { margin-top: 18px; position: static !important; top: auto !important; }
    .itinerary-timeline { padding-left: 22px; }
    .timeline-item { padding-left: 14px; }
    .timeline-item h4 { font-size: .98rem; }
}

/* ============================================================
   FEATURES
   ============================================================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}
.feature-card {
    text-align: center;
    padding: 36px 22px;
    background: #fff;
    border-radius: var(--cc-radius);
    border: 1px solid var(--cc-line);
    box-shadow: var(--cc-shadow-sm);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--cc-grad-rainbow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--cc-shadow); border-color: rgba(255,46,99,.25); }
.feature-card:hover::before { transform: scaleX(1); }

.feature-icon {
    width: 76px; height: 76px;
    border-radius: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto 22px;
    transition: transform .3s;
}
.feature-card:hover .feature-icon { transform: rotate(-6deg) scale(1.05); }

.feature-icon.blue   { background: linear-gradient(135deg, #08d9d6, #06b6b3); color: #fff; }
.feature-icon.green  { background: linear-gradient(135deg, #7ee787, #15803d); color: #fff; }
.feature-icon.orange { background: linear-gradient(135deg, #ff8a3d, #ff2e63); color: #fff; }
.feature-icon.purple { background: linear-gradient(135deg, #845ec2, #5d3fa3); color: #fff; }
.feature-icon i { font-size: 2rem; }

.feature-title {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.1rem; font-weight: 700; color: var(--cc-deep);
    margin: 0 0 8px;
}
.feature-desc { font-size: .9rem; color: var(--cc-muted); line-height: 1.6; margin: 0; }

/* Stat icon circles inside cards (from listing pages) */
.stat-icon {
    width: 60px; height: 60px;
    border-radius: 18px;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
    background: var(--cc-grad-deep);
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: -200px -150px auto auto;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(255,46,99,.30), transparent 70%);
    border-radius: 50%;
}
.cta-section::after {
    content: '';
    position: absolute;
    inset: auto auto -200px -150px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(8,217,214,.30), transparent 70%);
    border-radius: 50%;
}
.cta-content { position: relative; z-index: 2; }
.cta-title {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}
.cta-subtitle {
    color: rgba(255,255,255,.78);
    font-size: 1.08rem; max-width: 620px;
    margin: 0 auto 36px;
}
.cta-buttons {
    display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
}
.btn-cta-primary {
    padding: 16px 36px;
    background: var(--cc-grad-primary);
    color: #fff;
    border: none;
    border-radius: var(--cc-radius-pill);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px;
    box-shadow: 0 12px 30px rgba(255,46,99,.45);
    transition: transform .2s, box-shadow .2s;
}
.btn-cta-primary:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 16px 38px rgba(255,46,99,.55); }
.btn-cta-secondary {
    padding: 16px 36px;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.4);
    border-radius: var(--cc-radius-pill);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px;
    transition: background .2s, border-color .2s;
}
.btn-cta-secondary:hover { background: rgba(8,217,214,.20); border-color: var(--cc-cyan); color: #fff; }

/* ============================================================
   WHATSAPP FAB
   ============================================================ */
.whatsapp-float {
    position: fixed;
    bottom: 28px; right: 28px;
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 28px rgba(37,211,102,.45);
    z-index: 1040;
    transition: transform .25s, box-shadow .25s;
    text-decoration: none;
    animation: cc-pulse-green 2.5s infinite;
}
.whatsapp-float:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 16px 36px rgba(37,211,102,.55); }
.whatsapp-float i { color: #fff; font-size: 1.7rem; }
@keyframes cc-pulse-green {
    0%, 100% { box-shadow: 0 12px 28px rgba(37,211,102,.45); }
    50%      { box-shadow: 0 12px 28px rgba(37,211,102,.45), 0 0 0 14px rgba(37,211,102,.0); }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 70px 20px;
    background: #fff;
    border-radius: var(--cc-radius);
    border: 1px dashed var(--cc-line);
}
.empty-state i { font-size: 3rem; color: var(--cc-line-2); margin-bottom: 16px; display: block; }
.empty-state p { color: var(--cc-muted); margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background: var(--cc-deep-2);
    color: rgba(255,255,255,.78);
    padding: 64px 0 24px;
    margin-top: 60px;
    position: relative;
}
.footer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--cc-grad-rainbow);
    background-size: 200% 100%;
    animation: cc-stripe-shift 12s linear infinite;
}
.footer h4 {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}
.footer-logo {
    height: 56px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    /* Full-colour brand logo on transparent background — no filter needed.
       The bright orange/blue/multicolour pops cleanly on the dark footer. */
    transition: transform .2s, opacity .2s;
}
.footer-logo:hover { transform: translateY(-1px); }
.footer p { color: rgba(255,255,255,.72); font-size: .9rem; line-height: 1.65; margin: 0 0 10px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 8px; }
.footer a {
    color: rgba(255,255,255,.78);
    text-decoration: none;
    transition: color .2s, padding-left .2s;
    font-size: .92rem;
}
.footer a:hover { color: var(--cc-cyan); padding-left: 4px; }
.footer i { color: var(--cc-cyan); margin-right: 6px; }

.footer-newsletter {
    background: linear-gradient(135deg, rgba(255,46,99,.12), rgba(8,217,214,.12));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--cc-radius);
    padding: 22px 24px;
    margin-bottom: 36px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
    justify-content: space-between;
}
.footer-newsletter h5 {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    color: #fff; font-weight: 700; margin: 0 0 4px; font-size: 1.15rem;
}
.footer-newsletter p { margin: 0; color: rgba(255,255,255,.7); }
.footer-newsletter form {
    display: flex; gap: 8px; flex: 1; min-width: 280px;
}
.footer-newsletter input[type="email"] {
    flex: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--cc-radius-pill);
}
.footer-newsletter input[type="email"]::placeholder { color: rgba(255,255,255,.5); }

.footer-social {
    display: flex; gap: 10px; margin-top: 12px;
}
.footer-social a {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.85);
    transition: background .2s, border-color .2s, transform .2s;
}
.footer-social a:hover { background: var(--cc-cyan); border-color: var(--cc-cyan); color: var(--cc-deep); transform: translateY(-2px); padding-left: 0; }
.footer-social i { margin: 0; color: inherit; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 36px;
    padding-top: 20px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 8px;
    font-size: .82rem;
    color: rgba(255,255,255,.55);
}
.footer-bottom a { color: var(--cc-cyan); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { gap: 6px; }
.page-link {
    border: 1.5px solid var(--cc-line);
    color: var(--cc-deep);
    border-radius: 12px !important;
    padding: 8px 14px;
    font-weight: 600;
    background: #fff;
}
.page-link:hover { background: rgba(255,46,99,.08); color: var(--cc-primary); border-color: var(--cc-primary); }
.page-item.active .page-link {
    background: var(--cc-grad-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(255,46,99,.30);
}

/* ============================================================
   MODAL (Bootstrap)
   ============================================================ */
.modal-content {
    border: none;
    border-radius: var(--cc-radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(15,16,32,.30);
}
.modal-header {
    background: var(--cc-grad-primary);
    color: #fff;
    border: none;
    padding: 18px 24px;
}
.modal-header .modal-title { color: #fff; font-weight: 700; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--cc-line); padding: 16px 24px; }

/* ============================================================
   AUTH / DASHBOARD CARDS
   ============================================================ */
.auth-card {
    max-width: 460px;
    margin: 60px auto;
    background: #fff;
    border-radius: var(--cc-radius-lg);
    box-shadow: var(--cc-shadow);
    overflow: hidden;
    border: 1px solid var(--cc-line);
}
.auth-card-header {
    padding: 32px 32px 16px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255,46,99,.06), rgba(8,217,214,.06));
}
.auth-card-header h2 {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    color: var(--cc-deep);
    margin: 0 0 6px;
}
.auth-card-body { padding: 24px 32px 32px; }

/* Tables */
.table {
    --bs-table-bg: #fff;
    border-radius: var(--cc-radius);
    overflow: hidden;
    box-shadow: var(--cc-shadow-sm);
}
.table thead th {
    background: linear-gradient(135deg, rgba(255,46,99,.06), rgba(8,217,214,.06));
    color: var(--cc-deep);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cc-line);
    padding: 14px 16px;
}
.table tbody td { padding: 14px 16px; border-color: var(--cc-line); vertical-align: middle; }
.table-hover tbody tr:hover { background: rgba(255,46,99,.04); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .carousel-slide { flex: 0 0 calc(50% - 11px); min-width: calc(50% - 11px); }
    .carousel-section { padding: 0 50px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(2n)::after { display: none; }
    .cc-search-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .container { padding: 0 16px; }

    /* Header */
    .header-top-enhanced .container { justify-content: center; }
    .header-top-left, .header-top-right { justify-content: center; }
    .top-contact-item span:not(.cc-show-mobile) { display: none; }
    .whatsapp-float-btn span { display: none; }
    .logo-img { height: 42px; max-width: 60vw; }

    /* Hero */
    .hero-content { padding: 60px 18px 100px; }
    .hero-title { font-size: clamp(1.75rem, 7vw, 2.4rem); }
    .hero-subtitle { font-size: .92rem; }
    .hero-section::before, .hero-section::after { width: 280px; height: 280px; }

    .cc-search-bar { margin-top: -50px; }
    .cc-search-bar-inner { padding: 16px; }
    .cc-search-grid { grid-template-columns: 1fr; gap: 10px; }
    .cc-search-bar .btn { width: 100%; }

    /* Section */
    .section { padding: 50px 0; }
    .section-header { margin-bottom: 32px; }
    .section-title { font-size: 1.5rem; }
    .section-subtitle { font-size: .92rem; }

    /* Search bar — keep the input visible, shrink the button label */
    .input-group .btn { padding-left: 14px; padding-right: 14px; font-size: .85rem; }
    .input-group .form-control { padding-left: 4px; font-size: .9rem; }
    .input-group .input-group-text { padding-left: 14px; padding-right: 6px; }

    /* Packages 2-col compact (works for both .packages-grid AND Bootstrap-row layouts) */
    .packages-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .row.g-4, .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
    /* Slightly taller crop on mobile so subjects read well in the small card */
    .package-image { aspect-ratio: 4 / 3; min-height: 120px; }
    .package-content, .package-body { padding: 12px; }
    .package-title { font-size: .92rem; line-height: 1.3; margin-bottom: 6px;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .package-desc, .package-features { display: none; }
    .package-location { font-size: .72rem; margin-bottom: 8px; }
    .package-duration { font-size: .65rem; padding: 3px 8px; margin-bottom: 8px; }
    .package-image .package-duration { bottom: 8px; left: 8px; padding: 3px 8px; }
    .package-badge { font-size: .62rem; padding: 3px 8px; top: 8px; left: 8px; }
    .package-wishlist { width: 30px; height: 30px; top: 8px; right: 8px; }
    .package-wishlist i { font-size: .8rem; }
    .package-footer { flex-direction: column; align-items: stretch; gap: 8px; }
    .package-footer .package-price { text-align: left; }
    .price-amount { font-size: 1.05rem; }
    .package-price .current { font-size: .85rem; }
    .package-price .unit { font-size: .62rem; }
    .btn-view { width: 100%; justify-content: center; padding: 9px 12px; font-size: .72rem; }
    .btn-view i { display: none; }

    /* Features 2x2 */
    .features-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .feature-card { padding: 22px 14px; }
    .feature-icon { width: 56px; height: 56px; margin-bottom: 14px; border-radius: 16px; }
    .feature-icon i { font-size: 1.4rem; }
    .feature-title { font-size: .92rem; }
    .feature-desc { font-size: .75rem; }

    /* Cars carousel: 1 per view, scroll-snap feel */
    .carousel-slide { flex: 0 0 100%; min-width: 100%; }
    .carousel-section { padding: 0 36px; }
    .carousel-btn { width: 36px; height: 36px; }

    /* Stats 2x2 */
    .stats-bar { padding: 26px 0; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .stat-item::after { display: none !important; }
    .stat-number { font-size: 1.6rem; }
    .stat-label { font-size: .78rem; }

    /* CTA */
    .cta-section { padding: 60px 16px; }
    .cta-buttons { flex-direction: column; align-items: stretch; }
    .cta-buttons .btn-cta-primary, .cta-buttons .btn-cta-secondary { width: 100%; justify-content: center; }

    /* Footer */
    .footer { padding: 44px 0 18px; }
    .footer-newsletter { padding: 18px; }
    .footer-newsletter form { width: 100%; }
    .footer-bottom { justify-content: center; text-align: center; }

    /* WhatsApp FAB smaller */
    .whatsapp-float { width: 52px; height: 52px; bottom: 18px; right: 18px; }
    .whatsapp-float i { font-size: 1.4rem; }

    /* View all */
    .btn-view-all { padding: 12px 24px; font-size: .85rem; }
    .view-all-wrapper { margin-top: 28px; }

    /* Auth */
    .auth-card { margin: 24px 12px; }
    .auth-card-header, .auth-card-body { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 420px) {
    /* Homepage .packages-grid only — go to single column with the full content visible.
       Listing pages (packages.php) keep the compact 2-col grid set above. */
    .packages-grid { grid-template-columns: 1fr; gap: 14px; }
    .packages-grid .package-image { aspect-ratio: 16 / 10; min-height: 170px; }
    .packages-grid .package-desc { display: -webkit-box; }
    .packages-grid .package-features { display: flex; }
    .logo-img { height: 36px; max-width: 55vw; }
}