/*
 * Niz Rent A Car — Shared Beach Theme for Sub-pages
 * Loaded after each page's inline <style> to override old blue variables
 * with the beach/holiday palette.
 */

/* ── BEACH COLOUR PALETTE ── */
:root {
    --sea:        #00B4D8;
    --sea-dark:   #0077A8;
    --sea-light:  #90E0EF;
    --sand:       #FFF3DC;
    --sand-dark:  #F5DFA5;
    --coral:      #FF7F51;
    --coral-dark: #E05E30;
    --palm:       #2D6A4F;
    --sun:        #FFD166;
    --cream:      #FFFAF2;
    --text:       #2C3E50;
    --muted:      #7F8C9A;
    --dark:       #023e5c;
    --radius:     16px;
    --radius-lg:  24px;
    /* backwards-compatible aliases for old page CSS */
    --blue:       #00B4D8;
    --light:      #e0f7fa;
    --gray:       #FFFAF2;
}

/* ── BASE ── */
body {
    background: var(--cream) !important;
    color: var(--text);
    font-family: 'Inter', sans-serif;
}

/* ── NAV ── */
nav {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0,0,0,.08) !important;
    padding: 0 5% !important;
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: none !important;
}

/* Logo */
nav .logo,
nav .nav-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--dark) !important;
    text-decoration: none !important;
}
nav .logo::before,
nav .nav-logo::before {
    content: "";
}

/* Nav links */
nav .nav-links {
    display: flex !important;
    gap: 22px !important;
    list-style: none !important;
    align-items: center !important;
}
nav .nav-links a {
    text-decoration: none !important;
    color: var(--text) !important;
    font-weight: 500 !important;
    font-size: .9rem !important;
    transition: color .2s !important;
}
nav .nav-links a:hover {
    color: var(--sea) !important;
}

/* Book Now CTA button */
nav .nav-cta,
nav .nav-links a.nav-cta {
    background: var(--coral) !important;
    color: #fff !important;
    padding: 9px 20px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 12px rgba(255,127,81,.3) !important;
    transition: background .2s, transform .2s !important;
}
nav .nav-cta:hover,
nav .nav-links a.nav-cta:hover {
    background: var(--coral-dark) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* ── HERO BAR ── */
/* No !important here so inline background-image styles override this */
.hero-bar {
    background: linear-gradient(135deg, var(--dark) 0%, #005f8a 60%, var(--sea-dark) 100%);
    padding: 90px 5% 42px !important;
}
.hero-bar h1 {
    font-family: 'Playfair Display', serif !important;
    color: #fff !important;
}
.hero-bar .bc a,
.hero-bar .breadcrumb a {
    color: rgba(255,255,255,.75) !important;
}
.hero-bar .bc a:hover,
.hero-bar .breadcrumb a:hover {
    color: var(--sun) !important;
}
.hero-bar .cat-tag,
.hero-bar .hero-tag {
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    color: #fff !important;
}

/* ── SECTION HEADINGS ── */
h2 {
    color: var(--dark) !important;
}
h3 {
    color: var(--dark) !important;
}

/* ── CTA BOX ── */
.cta-box {
    background: linear-gradient(135deg, var(--dark) 0%, #005f8a 100%) !important;
    border-radius: var(--radius-lg) !important;
}
.cta-box h3 {
    font-family: 'Playfair Display', serif !important;
    color: #fff !important;
}
.cta-box p {
    color: rgba(255,255,255,.82) !important;
}
.cta-box a.btn-primary,
.cta-box .btn-whatsapp {
    background: #25d366 !important;
    box-shadow: 0 4px 16px rgba(37,211,102,.4) !important;
}

/* Generic "Book on WhatsApp" button anywhere on page */
a[href*="wa.me"].btn-primary,
a[href*="wa.me"].btn-whatsapp,
.btn-wa {
    background: #25d366 !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 16px rgba(37,211,102,.4) !important;
    transition: transform .2s, box-shadow .2s !important;
}
a[href*="wa.me"].btn-primary:hover,
a[href*="wa.me"].btn-whatsapp:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(37,211,102,.5) !important;
}

/* ── CONTENT CARDS / TABLES ── */
.info-box,
.tip-box {
    background: linear-gradient(135deg, #e0f7fa, #b2ebf2) !important;
    border: 1px solid #80deea !important;
    border-radius: var(--radius) !important;
}

/* ── FOOTER ── */
footer {
    background: linear-gradient(135deg, #023e5c 0%, #01506e 100%) !important;
    color: rgba(255,255,255,.7) !important;
    padding: 36px 5% !important;
    text-align: center !important;
    font-size: .87rem !important;
}
footer p {
    color: rgba(255,255,255,.7) !important;
    margin-bottom: 10px !important;
}
footer a {
    color: rgba(255,255,255,.65) !important;
    text-decoration: none !important;
    margin: 0 10px !important;
    transition: color .2s !important;
}
footer a:hover {
    color: var(--sun) !important;
}

/* ── WHATSAPP FLOAT BUTTON ── */
.whatsapp-float {
    position: fixed !important;
    bottom: 28px !important;
    right: 28px !important;
    z-index: 999 !important;
    width: 58px !important;
    height: 58px !important;
    background: #25d366 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 1.7rem !important;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(37,211,102,.5) !important;
    animation: waPulse 2.5s infinite !important;
}
.whatsapp-float:hover {
    transform: scale(1.1) !important;
    animation: none !important;
}
@keyframes waPulse {
    0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.5); }
    50%      { box-shadow: 0 4px 40px rgba(37,211,102,.75); }
}

/* ── HAMBURGER BUTTON (hidden on desktop) ── */
nav .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
}
nav .hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--dark);
    border-radius: 2px;
    transition: .3s;
}

/* ── TABLE OVERFLOW (mobile scroll) ── */
table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
}

/* ── MOBILE NAV ── */
@media (max-width: 768px) {
    nav .hamburger {
        display: flex !important;
    }
    nav .nav-links {
        display: none !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 68px !important;
        left: 0 !important; right: 0 !important;
        background: white !important;
        padding: 16px 5% !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
        gap: 0 !important;
        z-index: 999 !important;
    }
    nav .nav-links.open {
        display: flex !important;
    }
    nav .nav-links li {
        padding: 11px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    main {
        padding: 32px 16px 60px !important;
    }
    .hero-bar {
        padding: 80px 4% 28px !important;
    }
}