@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ==========================================
   CANYONRIDGE MUNICIPALITY
   ========================================== */

:root {
    --primary: #14532d;
    --primary-light: #1f7a43;
    --primary-dark: #0b3d20;

    --secondary: #2563eb;
    --secondary-light: #3b82f6;

    --themepark: #b26b2a;
    --waterpark: #00a8ff;
    --zoo: #22c55e;
    --transport: #2563eb;

    --municipality: #6b7280;
    --school: #7c3aed;
    --news: #f59e0b;
    --emergency: #dc2626;

    --info: #0077ff;
    --warning: #f59e0b;
    --danger: #dc2626;
    --success: #16a34a;

    --background: #f4f6f8;
    --surface: #ffffff;

    --text: #1e293b;
    --text-light: #64748b;

    --border: #e2e8f0;

    --shadow-sm: 0 2px 10px rgba(0,0,0,.08);
    --shadow-md: 0 10px 25px rgba(0,0,0,.10);
    --shadow-lg: 0 20px 45px rgba(0,0,0,.15);

    --radius: 18px;
    --container: 1400px;
}

/* ==========================================
   RESET
   ========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--background);
    color: var(--text);
    font-family: "Outfit", sans-serif;
    line-height: 1.6;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */

h1,
h2,
h3,
h4 {
    line-height: 1.15;
    margin-bottom: 12px;
    font-weight: 700;
}

h1 {
    font-size: 4.5rem;
}

h2 {
    font-size: 2.2rem;
}

h3 {
    font-size: 1.4rem;
}

p {
    margin-bottom: 16px;
}

a {
    text-decoration: none;
}

/* ==========================================
   LAYOUT
   ========================================== */

.container {
    width: 92%;
    max-width: var(--container);
    margin: 0 auto;
}

.section {
    padding: 80px 0;
}

/* ==========================================
   ALERT BAR
   ========================================== */

.alert-bar {
    background: var(--warning);
    color: white;
    text-align: center;
    padding: 12px;
    font-weight: 600;
}

/* ==========================================
   HEADER
   ========================================== */

.site-header {
    background: var(--primary-dark);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 16px;
    color: white;
}

.logo img {
    height: 75px;
}

.logo h2 {
    margin: 0;
    font-size: 2rem;
    color: white;
}

.logo small {
    color: rgba(255,255,255,.75);
}

/* ==========================================
   NAVIGATION
   ========================================== */

.navbar ul {
    display: flex;
    list-style: none;
    gap: 32px;
}

.navbar a {
    color: white;
    font-weight: 600;
    transition: .2s;
}

.navbar a:hover {
    color: #c7f9cc;
}

/* ==========================================
   HERO
   ========================================== */

.hero {
    min-height: 700px;

    background:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.55)
        ),
        url("/images/hero.jpg");

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;

    color: white;
}

.hero-content {
    max-width: 800px;
}

.hero-content h1 {
    font-size: 5rem;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.4rem;
    margin-bottom: 30px;
}

/* ==========================================
   BUTTONS
   ========================================== */

.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: .2s;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

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

.btn-secondary {
    background: var(--secondary);
    color: white;
}

/* ==========================================
   QUICK LINKS
   ========================================== */

.quick-links {
    margin-top: -80px;
    position: relative;
    z-index: 5;
}

.card-grid {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
}

.card {
    background: white;
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-md);
    transition: .25s;
}

.card:hover {
    transform: translateY(-8px);
}

.card i {
    font-size: 2rem;
    margin-bottom: 15px;
}

.card:nth-child(1) i { color: var(--themepark); }
.card:nth-child(2) i { color: var(--waterpark); }
.card:nth-child(3) i { color: var(--zoo); }
.card:nth-child(4) i { color: var(--transport); }
.card:nth-child(5) i { color: var(--municipality); }
.card:nth-child(6) i { color: var(--school); }
.card:nth-child(7) i { color: var(--news); }
.card:nth-child(8) i { color: var(--emergency); }

.card:nth-child(1) { border-top: 5px solid var(--themepark); }
.card:nth-child(2) { border-top: 5px solid var(--waterpark); }
.card:nth-child(3) { border-top: 5px solid var(--zoo); }
.card:nth-child(4) { border-top: 5px solid var(--transport); }
.card:nth-child(5) { border-top: 5px solid var(--municipality); }
.card:nth-child(6) { border-top: 5px solid var(--school); }
.card:nth-child(7) { border-top: 5px solid var(--news); }
.card:nth-child(8) { border-top: 5px solid var(--emergency); }

.card-disabled {

    background: #e5e7eb;

    color: #6b7280;

    pointer-events: none;

    cursor: not-allowed;

    opacity: 0.75;

}

.card-disabled i {
    color: #6b7280;
}

.card-disabled:hover {
    transform: none;
}

/* ==========================================
   NEWS
   ========================================== */

.news-grid {
    display: grid;
    gap: 25px;
}

.news-card {
    background: white;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--primary);
}

/* ==========================================
   TRANSPORT
   ========================================== */

.transport-grid {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
}

.service-card {
    background: white;
    padding: 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.status-running {
    color: var(--success);
    font-weight: bold;
}

.status-delayed {
    color: var(--warning);
    font-weight: bold;
}

.status-disrupted {
    color: var(--danger);
    font-weight: bold;
}

/* ------------- */
.service-changes {

    background: #fff7ed;

    border: 1px solid #fdba74;

    border-left: 4px solid #f97316;

    border-radius: 10px;

    padding: 12px 16px;

    margin-bottom: 20px;

}

.service-change-item {

    margin-top: 6px;

    font-size: 0.95rem;

}

/* ==========================================
   TABLES
   ========================================== */

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    background: white;
    border-collapse: collapse;
    border-radius: var(--radius);
    overflow: hidden;
}

th {
    background: var(--primary);
    color: white;
}

th,
td {
    padding: 16px;
    border: 1px solid var(--border);
}

/* ==========================================
   FORMS
   ========================================== */

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

input,
textarea,
select {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

textarea {
    min-height: 150px;
}

/* ==========================================
   FOOTER
   ========================================== */

.site-footer {
    background: var(--primary-dark);
    color: white;
    margin-top: 100px;
}

.footer-top {
    padding: 70px 0;
}

.footer-grid {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
}

.site-footer h3 {
    margin-bottom: 18px;
}

.site-footer a {
    color: rgba(255,255,255,.85);
}

.site-footer ul {
    padding-left: 18px;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    text-align: center;
    padding: 25px;
}

/* ==========================================
   BADGES
   ========================================== */

.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
}

.badge-success {
    background: rgba(22,163,74,.15);
    color: var(--success);
}

.badge-info {
    background: rgba(245,158,11,.15);
    color: var(--info);
}

.badge-warning {
    background: rgba(245,158,11,.15);
    color: var(--warning);
}

.badge-danger {
    background: rgba(220,38,38,.15);
    color: var(--danger);
}

.badge-primary {
    background: darkslateblue;
    color: goldenrod
}

/* ==================================================
   TRANSPORT SYSTEM
   ================================================== */

/* ---------- PAGE HEADER ---------- */

.transport-header {
    margin-bottom: 40px;
}

.transport-header h1 {
    margin-bottom: 10px;
}

.transport-header p {
    color: var(--text-light);
}

/* ---------- INFO BAR ---------- */

.info-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;

    margin-bottom: 40px;
}

.info-card {
    background: white;
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* ---------- DEPARTURE BOARD ---------- */

.departure-board {

    background: #111827;

    color: white;

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow-lg);

    margin-bottom: 25px;
}

.departure-board-header {

    background: #1f2937;

    padding: 16px 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.departure-board-header h2 {
    margin: 0;
}

.departure-board-body {
    padding: 20px;
}

.departure-time {

    font-size: 3rem;

    font-weight: 700;

    line-height: 1;

    margin: 10px 0;
}

.departure-list {

    list-style: none;

    margin-top: 15px;
}

.departure-list li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 0;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.departure-list li:last-child {
    border-bottom: none;
}

/* ---------- LIVE DEPARTURES ---------- */

.departure-block {

    background: rgba(20,83,45,.08);

    padding: 20px;

    border-radius: 12px;

    margin-bottom: 20px;
}

.no-service {

    padding: 20px;

    border-radius: 12px;

    background: rgba(220,38,38,.1);

    color: var(--danger);

    font-weight: 600;

    margin-bottom: 20px;
}

/* ---------- LINE COLOURS ---------- */

.line-red {
    border-left: 6px solid #ef4444 !important;
}

.line-blue {
    border-left: 6px solid #3b82f6 !important;
}

.line-green {
    border-left: 6px solid #22c55e !important;
}

.line-yellow {
    border-left: 6px solid #eab308 !important;
}

.line-white {
    border-left: 6px solid #e5e7eb !important;
}

/* ---------- TIMETABLE ---------- */

.timetable-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;
}

.timetable-route {

    color: var(--text-light);

    margin-bottom: 25px;
}

.timetable-table {

    width: 100%;

    background: white;

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow-sm);
}

.timetable-table tbody tr:hover {

    background: rgba(37,99,235,.05);
}

.tag-cell {

    font-weight: 600;

    text-align: center;
}

.tag-badge {

    display: inline-block;

    min-width: 28px;

    text-align: center;

    font-weight: 700;

    padding: 4px 10px;

    border-radius: 999px;

}

.tag-active {

    background: green;

    color: white;

}

.tag-inactive {

    background: red;

    color: white;

}

.tag-none {

    color: #888;

}

/* ---------- TAG LEGEND ---------- */

.tag-legend {

    margin-top: 30px;

    background: white;

    padding: 25px;

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);
}

.tag-legend ul {

    margin-top: 15px;

    padding-left: 20px;
}

.tag-legend li {

    margin-bottom: 10px;
}

/* ---------- NETWORK PAGE ---------- */

.network-grid {

    display: grid;

    gap: 25px;

    grid-template-columns:
        repeat(auto-fit, minmax(300px, 1fr));
}

.network-widget {

    background: white;

    border-radius: var(--radius);

    padding: 25px;

    box-shadow: var(--shadow-sm);
}

.network-widget ul {

    padding-left: 20px;

    margin-top: 10px;
}

/* ---------- SHOPS ---------- */

.shop-grid {

    display: grid;

    gap: 25px;

    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));
}

.shop-card {

    background: white;

    border-radius: var(--radius);

    padding: 24px;

    box-shadow: var(--shadow-sm);

    transition: .2s;
}

.shop-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);
}

.shop-card h3 {

    margin-bottom: 10px;
}

/* ---------- SHOP STATUS ---------- */

.shop-open {

    color: var(--success);

    font-weight: 700;
}

.shop-closing {

    color: var(--warning);

    font-weight: 700;
}

.shop-closed {

    color: var(--danger);

    font-weight: 700;
}

/* ---------- ACTIVE TAGS ---------- */

.active-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 10px;
}

.active-tag {

    background: rgba(37,99,235,.1);

    color: var(--secondary);

    padding: 8px 14px;

    border-radius: 999px;

    font-size: .9rem;

    font-weight: 600;
}

/* ---------- SERVICE NOTICE ---------- */

.service-notice {

    background: rgba(245,158,11,.1);

    border-left: 5px solid var(--warning);

    padding: 18px;

    border-radius: 12px;

    margin-bottom: 25px;
}

.delayed-time {
    color: #dc2626;
    font-weight: 700;
    margin-left: 8px;
}

.original-time {
    text-decoration: line-through;
    color: #6b7280;
}

.delay-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 2rem;
    font-weight: 700;
}

/* ---------- LAST DEPARTURE ---------- */

.last-departure {

    margin-top: 20px;

    padding-top: 20px;

    border-top: 1px solid var(--border);
}

.last-departure strong {

    display: block;

    margin-bottom: 8px;
}

/* ---------- LARGE BOARD STYLE ---------- */

.station-board {

    background: #0f172a;

    color: white;

    border-radius: var(--radius);

    overflow: hidden;

    margin-bottom: 30px;

    box-shadow: var(--shadow-lg);
}

.station-board table {

    width: 100%;

    background: transparent;

    color: white;
}

.station-board th {

    background: #1e293b;

    color: white;

    border: none;
}

.station-board td {

    border: none;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.station-board tr:last-child td {
    border-bottom: none;
}

/* ---------- MOBILE ---------- */

@media (max-width: 768px) {

    .departure-time {
        font-size: 2rem;
    }

    .timetable-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }

    .departure-list li {

        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }

}

/* ==========================================
   MENU BOX
   ========================================== */

   .menu-toggle {

    display: none;

    background: none;

    border: none;

    color: white;

    font-size: 1.8rem;

    cursor: pointer;

}

@media (max-width:768px){

    .header-inner{

        height:70px;

        flex-direction:row;

        justify-content:space-between;

        padding:0;

    }

    .logo img{

        height:50px;

    }

    .logo h2{

        font-size:1.6rem;

    }

    .logo small{

        font-size:.75rem;

    }

    .menu-toggle{

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

}

.menu-toggle i{

    transition:
        transform .3s ease,
        opacity .25s ease;

}

.menu-toggle[aria-expanded="true"] i{

    transform: rotate(180deg);

}

.navbar a:active{

    background: rgba(255,255,255,.12);

}

    .navbar{

    position:fixed;

    top:70px;

    left:0;

    right:0;

    width:100%;

    z-index: 999;

    background:var(--primary-dark);

    box-shadow:var(--shadow-md);

    overflow:hidden;

    max-height:0;

    opacity:0;

    visibility:hidden;

    transform: translateY(-10px);

    transition:
        max-height .35s ease,
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

}

body.menu-open{

    overflow: hidden;

}

.navbar.active{

    max-height:700px;

    opacity:1;

    visibility:visible;

    transform: translateY(0);

}

.menu-overlay{

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.45);

    opacity: 0;

    visibility: hidden;

    transition: .25s;

    z-index: 998;

}

.menu-overlay.active{

    opacity: 1;

    visibility: visible;

}

    .navbar ul{

        flex-direction:column;

        gap:0;

    }

    .navbar li{

        width:100%;

    }

    .navbar a{

    display:block;

    padding:18px 24px;

    border-top:1px solid rgba(255,255,255,.08);

    transition:
        background .2s,
        padding-left .2s;

}

.navbar a:hover{

    background:rgba(255,255,255,.06);

    padding-left:34px;

}

}

.site-header{

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

}

.menu-toggle{

    transition:
        transform .2s,
        color .2s;

}

.menu-toggle:hover{

    transform:rotate(90deg);

}

.menu-toggle i{

    transition:
        transform .25s ease,
        opacity .25s ease;

}

.menu-toggle:hover i{

    transform:scale(1.1);

}


/* EMERGENCY */

.emergency-status.information{

    background:#ecfeff;
    border-left:6px solid #0891b2;

}

.emergency-status.minor{

    background:#fef9c3;
    border-left:6px solid #ca8a04;

}

.emergency-status.moderate{

    background:#ffedd5;
    border-left:6px solid #ea580c;

}

.emergency-status.major{

    background:#fee2e2;
    border-left:6px solid #dc2626;

}

.emergency-status.critical{

    background:#111827;
    color:white;
    border-left:6px solid black;

}

.emergency-status.success{

    background:#dcfce7;
    border-left:6px solid #16a34a;

}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1000px) {

    .hero {
        min-height: 550px;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }
}

@media (max-width: 700px) {

    h1 {
        font-size: 2.7rem;
    }

    .hero-content h1 {
        font-size: 2.7rem;
    }

    .hero-content p {
        font-size: 1.1rem;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================
   WESTERN NATURE
   ================================================== */

:root {

    --wn-primary: #8b5e3c;
    --wn-primary-dark: #5f3f29;

    --wn-jungle: #2e7d32;
    --wn-western: #8b5a2b;
    --wn-white: #4f83cc;
    --wn-tropizone: #00acc1;
    --wn-tech: #7c3aed;

}

/* ==================================================
   HERO
   ================================================== */

.wn-hero {

    min-height: 550px;

    display: flex;
    align-items: center;

    color: white;

    background:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.45)
        ),
        url("/images/westernnature/hero.jpg");

    background-size: cover;
    background-position: center;

}

.wn-hero-content {

    max-width: 700px;

}

.wn-hero h1 {

    font-size: 4rem;

    margin-bottom: 10px;

}

.wn-hero p {

    font-size: 1.2rem;

    opacity: .95;

}

.wn-logo {

    max-width: 250px;

    margin-bottom: 20px;

}

/* ==================================================
   AREA GRID
   ================================================== */

.area-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(300px,1fr));

    gap: 25px;

}

.area-card {

    background: white;

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow-md);

    transition: .25s;

}

.area-card:hover {

    transform: translateY(-6px);

}

.area-card img {

    width: 100%;
    height: 220px;

    object-fit: cover;

}

.area-card-content {

    padding: 20px;

}

/* ==================================================
   AREA COLORS
   ================================================== */

.area-jungle {

    border-top: 6px solid var(--wn-jungle);

}

.area-western {

    border-top: 6px solid var(--wn-western);

}

.area-white {

    border-top: 6px solid var(--wn-white);

}

.area-tropizone {

    border-top: 6px solid var(--wn-tropizone);

}

.area-tech {

    border-top: 6px solid var(--wn-tech);

}

/* ==================================================
   RIDES
   ================================================== */

.ride-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px,1fr));

    gap: 20px;

}

.ride-card {

    background: white;

    padding: 20px;

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

}

.ride-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}

.ride-logo {

    height: 50px;

    object-fit: contain;

}

.ride-wait {

    font-size: 1.4rem;

    font-weight: 700;

}

/* ==================================================
   STATUS BADGES
   ================================================== */

.status-open {

    background: #dcfce7;
    color: #166534;

}

.status-closed {

    background: #fee2e2;
    color: #991b1b;

}

.status-maintenance {

    background: #ede9fe;
    color: #6d28d9;

}

.status-construction {

    background: #cce5ff;

    color: #004085;

}

.status-delayed {

    background: #fef3c7;
    color: #92400e;

}

.status-badge {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: .85rem;

    font-weight: 600;

}

.operations-reason {

    max-width: 400px;

}

.operations-checkbox {

    transform: scale(1.3);

    cursor: pointer;

    accent-color: var(--primary-color);

    transition: transform 0.15s ease;

}

.operations-checkbox:hover {

    transform: scale(1.15);

}

.operations-stats {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    margin-bottom: 2rem;

}

.stat-card {

    padding: 1rem;

    border-radius: 10px;

    min-width: 140px;

}

.stat-card strong {

    display: block;

    font-size: 1.5rem;

    margin-top: .5rem;

}

.stat-open {
    background: green;
}

.stat-closed {
    background: red;
}

.stat-maintenance {
    background: blue;
}

.stat-construction {
    background: black;
}

.stat-delayed {
    background: orange;
}

/* ==================================================
   STATISTICS
   ================================================== */

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px,1fr));

    gap: 20px;

}

.stat-card {

    background: white;

    padding: 25px;

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

    text-align: center;

}

.stat-value {

    font-size: 2rem;

    font-weight: 800;

    color: var(--wn-primary);

}

.stat-label {

    margin-top: 5px;

    color: #666;

}

/* ==================================================
   REPORTS
   ================================================== */

.report-card {

    background: white;

    padding: 25px;

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

    margin-bottom: 20px;

}

.report-meta {

    color: #666;

    font-size: .9rem;

    margin-bottom: 10px;

}

.report-content {

    line-height: 1.6;

}

.report-content h1,
.report-content h2,
.report-content h3 {

    margin-top: 24px;

}

.report-content p {

    line-height: 1.6;

}

.report-content ul {

    margin-left: 20px;

}

.internal-section {

    margin-top: 40px;

    padding: 20px;

    background: #fff4e5;

    border: 1px solid #ffc107;

    border-radius: 10px;

}

.internal-section h2 {

    margin-top: 0;

    color: #c62828;

}

.internal-section::before {

    content:
        "ADMIN ONLY";

    display: inline-block;

    margin-bottom: 12px;

    padding: 4px 8px;

    font-size: 0.75rem;

    font-weight: 700;

    background: #ffc107;

    color: #000;

    border-radius: 4px;

}

.internal-section table {

    width: 100%;

    border-collapse: collapse;

}

.internal-section th,
.internal-section td {

    padding: 8px 12px;

    border: 1px solid #ddd;

}

.internal-section th {

    background: #f5f5f5;

}

.internal-section pre {

    padding: 12px;

    overflow-x: auto;

    border-radius: 6px;

    background: #222;

    color: #fff;

}

.internal-section {

    position: relative;
}

.internal-section .internal-warning {

    position: absolute;

    top: 12px;
    right: 12px;

    font-size: 0.8rem;

    font-weight: 600;

    color: #c62828;

}

/* ==================================================
   ENTERTAINMENT
   ================================================== */

.show-grid {

    display: grid;

    gap: 20px;

    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));

}

.show-card {

    background: white;

    padding: 25px;

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

}

.show-times {

    margin-top: 15px;

}

.show-times li {

    margin-bottom: 6px;

}

/* ==================================================
   CALENDAR
   ================================================== */

.calendar-layout {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 25px;

}

.calendar-panel {

    background: white;

    padding: 20px;

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

}

/* MONTH GRID */

.calendar-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 8px;

}

.calendar-weekday {

    text-align: center;

    font-weight: 700;

    color: #64748b;

    padding: 10px 0;

}

/* DAY CELLS */

.calendar-day {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 55px;

    border-radius: 10px;

    text-decoration: none;

    background: white;

    color: var(--text);

    border: 3px solid #e2e8f0;

    font-weight: 600;

    transition: .2s;

    box-shadow: var(--shadow-sm);

}

.calendar-day:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

}

/* EMPTY CELLS */

.calendar-empty {

    min-height: 55px;

}

/* DISABLED DAYS */

.calendar-day.calendar-disabled {

    background: #f3f4f6 !important;

    color: #9ca3af !important;

    border-color: #d1d5db !important;

    opacity: .6;

    cursor: not-allowed;

    box-shadow: none;

}

.calendar-day.calendar-disabled:hover {

    transform: none;

    box-shadow: none;

}

/* SELECTED DAY */

.calendar-day.selected {

    /* background: var(--wn-primary) !important; */

    color: red !important;

    border-color: var(--wn-primary-dark) !important;

    border-radius: 10px;

    border: 7.5px solid black !important;

    font-weight: 700;

}

/* ==================================================
   SEASON BORDERS
   ================================================== */

.calendar-day.season-normal {

    border-color: #3b82f6;

}

.calendar-day.season-summer {

    border-color: #f59e0b;

}

.calendar-day.season-halloween {

    border-color: #ea580c;

}

.calendar-day.season-christmas {

    border-color: #22c55e;

}

.calendar-day.season-offseason {

    border-color: #9ca3af;

}

/* ==================================================
   LEGEND
   ================================================== */

.calendar-legend {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #e2e8f0;

}

.calendar-legend div {

    display: flex;

    align-items: center;

    font-size: .9rem;

    font-weight: 500;

}

.legend-box {

    width: 18px;

    height: 18px;

    border-radius: 4px;

    margin-right: 8px;

    background: white;

    border: 3px solid #e2e8f0;

}

.legend-box.season-normal {

    border-color: #3b82f6;

}

.legend-box.season-summer {

    border-color: #f59e0b;

}

.legend-box.season-halloween {

    border-color: #ea580c;

}

.legend-box.season-christmas {

    border-color: #22c55e;

}

.legend-box.season-offseason {

    border-color: #9ca3af;

}

.schedule-metadata {

    margin-top: 20px;

    padding-top: 15px;

    border-top: 1px solid #e5e7eb;

    color: #6b7280;

}

.vacation-marker {

    color: #dc2626;

    font-weight: 700;

    margin-left: 2px;

}

.vacation-badge {

    background: #fef3c7;

    color: #92400e;

    margin-left: 8px;

}

/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 992px) {

    .calendar-layout {

        grid-template-columns: 1fr;

    }

}

@media (max-width: 768px) {

    .calendar-day {

        min-height: 45px;

        font-size: .9rem;

    }

}


/* ==================================================
   SEASON BADGES
   ================================================== */

.season-normal {

    background: #dbeafe;
    color: #1d4ed8;

}

.season-summer {

    background: #fef3c7;
    color: #92400e;

}

.season-summernight {

    background: #6A1B9A;
    color: #fff;
    border-color: #8e44ad;

}

.season-halloween {

    background: #ffedd5;
    color: #c2410c;

}

.season-christmas {

    background: #dcfce7;
    color: #166534;

}

.season-lowseason {

    background: #78909C;
    color: #fff;
    border-color: #90a4ae;

}

.season-offseason {

    background: #e5e7eb;
    color: #374151;

}

/* ==================================================
   BACKSTAGE
   ================================================== */

.backstage-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));

    gap: 20px;

}

.backstage-card {

    background: white;

    padding: 25px;

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

}

/* ==================================================
   MEDIA
   ================================================== */

.media-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap: 20px;

}

.media-card {

    background: white;

    padding: 20px;

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

}

.media-card audio {

    width: 100%;

    margin-top: 10px;

}

/* ==================================================
   RUSTY
   ================================================== */

.rusty-layout {

    display: grid;

    grid-template-columns:
        350px 1fr;

    gap: 30px;

}

.rusty-image {

    width: 100%;

    border-radius: var(--radius);

}

.rusty-info {

    background: white;

    padding: 25px;

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

}

/* ==================================================
   AREA OVERVIEW
   ================================================== */

.area-overview-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 25px;

}

.area-overview-card {

    background: white;

    border-radius: var(--radius);

    overflow: hidden;

    text-decoration: none;

    color: inherit;

    box-shadow: var(--shadow-sm);

    transition: .2s;

}

.area-overview-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}

.area-overview-card img {

    width: 100%;

    height: 220px;

    object-fit: cover;

}

.area-overview-content {

    padding: 20px;

}

.area-overview-content h3 {

    margin-bottom: 10px;

}

.area-overview-meta {

    margin-top: 15px;

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}

.area-overview-meta span {

    background: #f1f5f9;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: .85rem;

}

/* ==================================================
   AREA DETAIL PAGE
   ================================================== */

.area-hero {

    position: relative;

    height: 450px;

    overflow: hidden;

}

.area-hero img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.area-hero-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 40px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.7)
        );

    color: white;

}

.area-hero-overlay h1 {

    font-size: 3rem;

    margin-bottom: 10px;

}

.area-hero-overlay p {

    max-width: 700px;

}

/* ==================================================
   RIDE LIST PAGE
   ================================================== */

.ride-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 25px;

}

.filter-chip {

    background: white;

    border: 1px solid #e5e7eb;

    border-radius: 999px;

    padding: 8px 14px;

    text-decoration: none;

    color: inherit;

    transition: .2s;

}

.filter-chip:hover {

    background: #f8fafc;

}

.filter-chip.active {

    background: var(--wn-primary);

    color: white;

    border-color: var(--wn-primary);

}

.ride-preview {

    width: 100%;

    height: 180px;

    object-fit: cover;

    border-radius: 10px;

    margin-bottom: 15px;

}

.ride-meta {

    display: flex;

    gap: 10px;

    margin-top: 15px;

    flex-wrap: wrap;

}

.ride-meta span {

    background: #f1f5f9;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: .85rem;

}

/* ==================================================
   RIDE DETAIL PAGE
   ================================================== */

.ride-hero {

    position: relative;

    height: 500px;

    overflow: hidden;

}

.ride-hero img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.ride-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.75)
        );

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 40px;

    color: white;

}

.ride-hero-overlay h1 {

    font-size: 3rem;

    margin: 10px 0;

}

.ride-page-logo {

    max-width: 250px;

    max-height: 120px;

    object-fit: contain;

    margin-bottom: 20px;

}

@media (max-width: 768px) {

    .ride-hero {

        height: 350px;

    }

    .ride-hero-overlay h1 {

        font-size: 2rem;

    }

}

.admin-editor-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 24px;

}

.admin-card {

    background: #fff;

    border-radius: 16px;

    padding: 24px;

    margin-bottom: 24px;

    box-shadow:
        0 2px 10px
        rgba(0,0,0,.08);

}

.admin-card h2 {

    margin-top: 0;

}

.admin-input,
.admin-select,
.admin-textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid #d5dce7;

    border-radius: 10px;

    margin-bottom: 16px;

}

.admin-textarea {

    resize: vertical;

}

.admin-toolbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}

.admin-hero-card {

    background: #fff;

    border-radius: 16px;

    padding: 24px;

    margin-bottom: 24px;

    box-shadow:
        0 2px 10px
        rgba(0,0,0,.08);

}

.admin-stat-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 16px;

}

.admin-checkbox-row {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 15px;

}

@media (max-width: 900px) {

    .admin-editor-grid {

        grid-template-columns:
            1fr;

    }

}

.admin-ride-banner {

    position: relative;

    height: 280px;

    overflow: hidden;

    border-radius: 20px;

    margin-bottom: 25px;

}

.admin-ride-banner img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.admin-ride-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.75),
            rgba(0,0,0,.2)
        );

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 30px;

}

.admin-ride-overlay h1 {

    color: white;

    margin: 0;

    font-size: 3rem;

}

.admin-ride-overlay p {

    color: white;

    margin-top: 10px;

}

.admin-quick-stats {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin-bottom: 25px;

}

.admin-stat-card {

    background: white;

    border-radius: 16px;

    padding: 20px;

    text-align: center;

}

.admin-stat-value {

    font-size: 2rem;

    font-weight: 700;

}

.admin-stat-label {

    opacity: .7;

}

.admin-banner-placeholder {

    height: 320px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 120px;

    background: linear-gradient(
        135deg,
        #1b4f72,
        #2e86c1
    );

}

.admin-ride-overlay {

    position: absolute;

    inset: 0;

    padding: 30px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.8),
            rgba(0,0,0,.1)
        );

}

.admin-toggle-group {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 15px;

}

.admin-toggle {

    display: flex;

    gap: 12px;

    align-items: center;

    font-weight: 600;

}

.admin-ride-overlay h1 {

    color: white;

    font-size: 3rem;

    margin-bottom: 8px;

}

.admin-ride-overlay p {

    color: white;

}

.admin-checkbox-group {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 20px;

}

.admin-switch {

    position: relative;

    width: 50px;

    height: 26px;

}

.admin-switch input {

    display: none;

}

.admin-slider {

    position: absolute;

    inset: 0;

    background: #d8dee9;

    border-radius: 50px;

    transition: .2s;

}

.admin-slider::before {

    content: "";

    position: absolute;

    width: 20px;

    height: 20px;

    left: 3px;

    top: 3px;

    background: white;

    border-radius: 50%;

    transition: .2s;

}

.admin-switch input:checked + .admin-slider {

    background: #2ecc71;

}

.admin-switch input:checked + .admin-slider::before {

    transform: translateX(24px);

}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

}

input[type="number"] {

    -moz-appearance: textfield;

}

/* input[type="checkbox"] {

    transform: scale(1.3);

    cursor: pointer;

    accent-color: var(--primary-color);

} */

.admin-shop-banner {

    position: relative;

    height: 260px;

    overflow: hidden;

    border-radius: 20px;

    margin-bottom: 25px;

}

.admin-shop-banner img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.admin-shop-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    padding: 30px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.75),
            rgba(0,0,0,.15)
        );

}

.admin-shop-overlay h1 {

    color: white;

    margin: 0;

}

.admin-shop-overlay p {

    color: white;

    margin-top: 10px;

}

.admin-preview-logo {

    max-height: 90px;

    margin-bottom: 15px;

}

.admin-show-card {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 20px;

}

.admin-shows-card {

    grid-column: 1 / -1;

}

.admin-shows-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(450px, 1fr)
        );

    gap: 20px;

    margin-top: 20px;

}

.admin-show-card h3 {

    margin-top: 0;

}

.admin-show-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}

.admin-show-actions {

    display: flex;

    gap: 8px;

}

.admin-show-header h3 {

    margin: 0;

}

.admin-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}


.admin-input,
.admin-select,
.admin-textarea {

    width: 100%;

    padding: 12px 16px;

    border: 2px solid #d8dee9;

    border-radius: 12px;

    background: #fff;

    font-size: 15px;

    transition: all .2s ease;

}

.admin-input:hover,
.admin-select:hover,
.admin-textarea:hover {

    border-color: #8aa4ff;

}

.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {

    outline: none;

    border-color: #3564d8;

    box-shadow:
        0 0 0 4px
        rgba(
            53,
            100,
            216,
            .15
        );

}

.admin-select {

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%233564d8' stroke-width='2'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 15px center;

    padding-right: 45px;

}

/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 992px) {

    .calendar-layout {

        grid-template-columns: 1fr;

    }

    .rusty-layout {

        grid-template-columns: 1fr;

    }

}

@media (max-width: 768px) {

    .wn-hero h1 {

        font-size: 2.8rem;

    }

}

/* ==================================================
   RESPONSIVE IMPROVEMENTS
   ================================================== */

/* Large tablets */

@media (max-width: 1200px) {

    .wn-hero h1 {

        font-size: 3.2rem;

    }

}

/* Tablets */

@media (max-width: 992px) {

    .calendar-layout {

        grid-template-columns: 1fr;

    }

    .rusty-layout {

        grid-template-columns: 1fr;

    }

    .wn-hero {

        min-height: 450px;

    }

    .wn-hero h1 {

        font-size: 2.8rem;

    }

    .wn-logo {

        max-width: 200px;

    }

}

/* Phones */

@media (max-width: 768px) {

    .wn-hero {

        min-height: 350px;

        text-align: center;

    }

    .wn-hero h1 {

        font-size: 2.2rem;

    }

    .wn-hero p {

        font-size: 1rem;

    }

    .wn-logo {

        max-width: 160px;

    }

    .calendar-day {

        min-height: 42px;

        font-size: .85rem;

    }

    .calendar-day.selected {

        border-width: 4px !important;

    }

    .calendar-weekday {

        font-size: .8rem;

    }

    .calendar-legend {

        gap: 10px;

    }

    .calendar-legend div {

        font-size: .8rem;

    }

    .area-card img {

        height: 180px;

    }

    .ride-header {

        flex-direction: column;

        gap: 10px;

        align-items: flex-start;

    }

    .ride-wait {

        font-size: 1.1rem;

    }

    .stats-grid {

        grid-template-columns: 1fr;

    }

    .timetable-table {

        font-size: .9rem;

    }

}

/* Small phones */

@media (max-width: 480px) {

    .wn-hero {

        min-height: 300px;

    }

    .wn-hero h1 {

        font-size: 1.8rem;

    }

    .wn-hero p {

        font-size: .95rem;

    }

    .calendar-grid {

        gap: 4px;

    }

    .calendar-day {

        min-height: 36px;

        font-size: .75rem;

        border-width: 2px;
    }

    .calendar-day.selected {

        border-width: 3px !important;

    }

    .calendar-weekday {

        font-size: .7rem;

    }

    .vacation-marker {

        font-size: .75rem;

    }

    .calendar-panel {

        padding: 15px;

    }

    .area-card-content {

        padding: 15px;

    }

}