:root {
    --edu-primary: #117a8b;
    --edu-primary-dark: #0c5f6d;
    --edu-primary-light: #1ab8d4;
    --edu-accent: #ffc107;
    --edu-accent-dark: #e0a800;
    --edu-bg: #eef4f8;
    --edu-surface: #ffffff;
    --edu-text: #1e2a36;
    --edu-muted: #6b7c8f;
    --edu-border: #dde6ee;
    --edu-radius: 14px;
    --edu-radius-sm: 10px;
    --edu-shadow: 0 8px 24px rgba(17, 122, 139, 0.08);
    --edu-shadow-lg: 0 16px 40px rgba(17, 122, 139, 0.12);
    --edu-transition: 0.2s ease;
}

body.hold-transition {
    font-family: "Sarabun", "Segoe UI", Tahoma, sans-serif;
    color: var(--edu-text);
    background: var(--edu-bg);
}

.content-wrapper {
    background: var(--edu-bg) !important;
}

.main-header.navbar {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--edu-border);
    box-shadow: 0 2px 12px rgba(17, 122, 139, 0.05);
}

.main-header .nav-link {
    color: var(--edu-text) !important;
    font-weight: 500;
}

.main-header.index-topnav .nav-link,
.main-header.index-topnav .navbar-brand {
    color: #fff !important;
}

.main-sidebar.sidebar-light-primary,
.main-sidebar.bg-info {
    background: linear-gradient(180deg, var(--edu-primary-dark) 0%, var(--edu-primary) 55%, #159aaa 100%) !important;
    border-right: none;
    box-shadow: var(--edu-shadow-lg);
}

.main-sidebar .brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1rem 0.85rem;
}

.main-sidebar .brand-text {
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

.main-sidebar .nav-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: var(--edu-radius-sm);
    margin: 0.15rem 0.5rem;
    transition: background var(--edu-transition), color var(--edu-transition), transform var(--edu-transition);
}

.main-sidebar .nav-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.main-sidebar .nav-sidebar .nav-link.active,
.main-sidebar .nav-sidebar .menu-open > .nav-link {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.content-header h1 {
    font-weight: 700;
    color: var(--edu-primary-dark);
}

.info-box.bg-white,
.card,
.modal-content {
    border: 1px solid var(--edu-border) !important;
    border-radius: var(--edu-radius) !important;
    box-shadow: var(--edu-shadow) !important;
    background: var(--edu-surface) !important;
}

.info-box.bg-white {
    padding: 1rem 1.1rem;
    margin-bottom: 1.1rem;
}

.content .col-md-4 > .info-box.bg-white,
.content .col-md-6 > .info-box.bg-white,
.content .col-lg-4 > .info-box.bg-white,
.content .col-sm-6 > .info-box.bg-white {
    height: 100%;
}

.seat-card-img {
    border-radius: var(--edu-radius-sm);
    max-height: 180px;
    object-fit: cover;
    width: 100%;
}

.content hr {
    border-color: var(--edu-border);
}

.info-box img.elevation-3 {
    border-radius: var(--edu-radius-sm);
    box-shadow: var(--edu-shadow) !important;
}

.info-box h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--edu-primary-dark);
}

.info-box p {
    color: var(--edu-muted);
}

.btn {
    border-radius: var(--edu-radius-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform var(--edu-transition), box-shadow var(--edu-transition), background var(--edu-transition);
}

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

.btn-primary,
.btn-info {
    background: linear-gradient(135deg, var(--edu-primary-light), var(--edu-primary)) !important;
    border-color: var(--edu-primary) !important;
    box-shadow: 0 4px 14px rgba(17, 122, 139, 0.25);
}

.btn-primary:hover,
.btn-info:hover {
    background: linear-gradient(135deg, var(--edu-primary), var(--edu-primary-dark)) !important;
    border-color: var(--edu-primary-dark) !important;
}

.btn-success {
    background: linear-gradient(135deg, #34c759, #1f9d47) !important;
    border-color: #1f9d47 !important;
}

.btn-warning {
    background: linear-gradient(135deg, #ffd95a, var(--edu-accent)) !important;
    border-color: var(--edu-accent-dark) !important;
    color: #4a3b00 !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ff6b6b, #e03131) !important;
    border-color: #c92a2a !important;
}

.btn-round {
    border-radius: 999px !important;
}

.form-control,
.custom-select,
.input-group-text {
    border-radius: var(--edu-radius-sm) !important;
    border-color: var(--edu-border) !important;
    min-height: 42px;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--edu-primary-light) !important;
    box-shadow: 0 0 0 0.2rem rgba(26, 184, 212, 0.18) !important;
}

.table {
    border-radius: var(--edu-radius);
    overflow: hidden;
}

.table thead th {
    background: #f7fafc;
    color: var(--edu-primary-dark);
    font-weight: 700;
    border-bottom-width: 1px;
}

.main-footer {
    background: transparent !important;
    border-top: 1px solid var(--edu-border);
    color: var(--edu-muted);
}

.info-box > .btn-success,
.info-box > .btn-warning,
.info-box > .btn-danger,
.legend-bar .btn {
    border-radius: 999px !important;
    pointer-events: none;
    font-size: 0.9rem;
    padding: 0.55rem 1rem;
}

.content .col-12.btn,
.content button.col-12 {
    border-radius: var(--edu-radius-sm) !important;
    white-space: normal;
    line-height: 1.35;
}

.swal2-popup {
    font-family: "Sarabun", "Segoe UI", Tahoma, sans-serif !important;
    border-radius: var(--edu-radius) !important;
}

.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, var(--edu-primary-light), var(--edu-primary)) !important;
    border-radius: var(--edu-radius-sm) !important;
    font-weight: 600;
}

.content-header.booking-page-hero {
    background:
        linear-gradient(135deg, rgba(10, 79, 92, 0.88) 0%, rgba(17, 122, 139, 0.82) 50%, rgba(26, 184, 212, 0.78) 100%),
        url('../img/hero-booking.svg') center center / cover no-repeat;
    padding: 2rem 0 1.5rem;
    margin-bottom: 0;
    border-bottom: none;
    box-shadow: var(--edu-shadow-lg);
}

.booking-hero-title {
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.35);
    margin-bottom: 1.25rem;
    line-height: 1.15;
}

.booking-hero-date {
    color: #fff !important;
    font-size: 1.35rem;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

.booking-hero-date .fas {
    margin-right: 0.35rem;
    opacity: 0.95;
}

.booking-hero-search.input-group {
    align-items: stretch;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    background: #fff;
}

.booking-hero-search .booking-date-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px !important;
    min-height: 42px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: var(--edu-text) !important;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    -webkit-text-fill-color: var(--edu-text);
    line-height: 1.5;
}

.booking-hero-search .booking-date-input:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

.booking-hero-search .booking-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.75;
}

.booking-hero-search .input-group-append {
    display: flex;
    margin-left: 0 !important;
}

.booking-hero-search-btn {
    height: 42px !important;
    min-height: 42px !important;
    border: none !important;
    border-left: 1px solid var(--edu-border) !important;
    border-radius: 0 !important;
    font-weight: 600;
    color: var(--edu-primary-dark) !important;
    background: #fff !important;
    box-shadow: none !important;
    white-space: nowrap;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transform: none !important;
}

.booking-hero-search-btn:hover {
    background: #f4f8f9 !important;
    color: var(--edu-primary) !important;
    transform: none !important;
}

/* index.php — top navigation layout */
body.layout-top-nav .content-wrapper,
body.layout-top-nav .main-footer {
    margin-left: 0 !important;
}

body.layout-top-nav .content-wrapper > .content-header.booking-page-hero {
    margin-top: 0;
}

.edu-content-card {
    border: none;
    border-radius: var(--edu-radius);
    overflow: hidden;
}

.edu-content-card .card-body {
    padding: 1.5rem;
}

.edu-content-image {
    display: block;
    border-radius: var(--edu-radius-sm);
}

.edu-rules-panel .card-body {
    padding: 2rem 1.75rem;
}

.edu-rules-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2rem;
}

.edu-rules-heading {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--edu-primary-dark);
}

.edu-rules-lead {
    margin: 0;
    color: var(--edu-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.edu-rules-grid > [class*="col-"] {
    margin-bottom: 1rem;
}

.edu-rule-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    height: 100%;
    padding: 1.25rem 1.15rem;
    background: linear-gradient(135deg, #f8fbfd 0%, #ffffff 100%);
    border: 1px solid var(--edu-border);
    border-radius: var(--edu-radius-sm);
    box-shadow: 0 4px 14px rgba(17, 122, 139, 0.06);
    transition: transform var(--edu-transition), box-shadow var(--edu-transition), border-color var(--edu-transition);
}

.edu-rule-item:hover {
    transform: translateY(-2px);
    border-color: rgba(26, 184, 212, 0.35);
    box-shadow: 0 10px 24px rgba(17, 122, 139, 0.1);
}

.edu-rule-item-warning {
    background: linear-gradient(135deg, #fffbf0 0%, #ffffff 100%);
    border-color: rgba(255, 193, 7, 0.35);
}

.edu-rule-item-warning:hover {
    border-color: rgba(255, 193, 7, 0.55);
    box-shadow: 0 10px 24px rgba(255, 193, 7, 0.12);
}

.edu-rule-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.25rem;
    color: #fff;
}

.edu-rule-icon-primary {
    background: linear-gradient(135deg, var(--edu-primary-light), var(--edu-primary));
}

.edu-rule-icon-info {
    background: linear-gradient(135deg, #4fc3f7, #0288d1);
}

.edu-rule-icon-teal {
    background: linear-gradient(135deg, #26c6da, #00838f);
}

.edu-rule-icon-warning {
    background: linear-gradient(135deg, #ffd54f, #f9a825);
    color: #5d4037;
}

.edu-rule-body {
    min-width: 0;
}

.edu-rule-num {
    display: inline-block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--edu-primary);
    opacity: 0.85;
}

.edu-rule-text {
    margin: 0;
    color: var(--edu-text);
    font-size: 1rem;
    line-height: 1.65;
}

.edu-rule-text strong {
    color: var(--edu-primary-dark);
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .edu-rules-panel .card-body {
        padding: 1.25rem 1rem;
    }

    .edu-rule-item {
        padding: 1rem;
    }

    .edu-rule-icon {
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
    }
}

.index-topnav {
    background: linear-gradient(135deg, var(--edu-primary-dark) 0%, var(--edu-primary) 55%, #159aaa 100%) !important;
    border-bottom: none !important;
    box-shadow: var(--edu-shadow-lg);
    padding: 0.35rem 1rem;
    min-height: 64px;
}

.main-header.index-topnav {
    background: linear-gradient(135deg, var(--edu-primary-dark) 0%, var(--edu-primary) 55%, #159aaa 100%) !important;
}

.index-topnav-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff !important;
    letter-spacing: 0.02em;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.index-topnav-logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px;
}

.index-topnav-toggler {
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff !important;
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
}

.index-topnav-toggler i {
    color: #fff !important;
}

.index-topnav-toggler:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2);
}

.index-topnav-menu .nav-link {
    color: #fff !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.5rem 1rem !important;
    margin: 0.15rem 0.2rem;
    transition: background var(--edu-transition), color var(--edu-transition), transform var(--edu-transition);
}

.index-topnav-menu .nav-link i {
    margin-right: 0.35rem;
    opacity: 0.95;
    color: #fff !important;
}

.index-topnav-menu .nav-link:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff !important;
    transform: translateY(-1px);
}

.index-topnav-menu .nav-link.active {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.index-topnav-user {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.index-topnav-user i {
    margin-right: 0.35rem;
}

.index-topnav-btn {
    border-radius: 999px !important;
    font-weight: 700;
    padding: 0.45rem 1.1rem !important;
    white-space: nowrap;
}

.index-topnav-login {
    color: var(--edu-primary-dark) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.index-topnav-login:hover {
    background: #fff !important;
    color: var(--edu-primary) !important;
}

@media (max-width: 991.98px) {
    .index-topnav-menu {
        padding: 0.75rem 0 0.5rem;
    }

    .index-topnav-menu .nav-link {
        border-radius: 10px;
        margin: 0.1rem 0;
    }

    .index-topnav-actions {
        padding: 0.5rem 0 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        margin-top: 0.35rem;
    }

    .index-topnav-user {
        display: block;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.35rem;
    }
}

@media (max-width: 767.98px) {
    .info-box.bg-white {
        margin-bottom: 0.75rem;
    }

    .content-header h1 {
        font-size: 1.35rem;
    }

    .booking-hero-title {
        font-size: 1.75rem;
        letter-spacing: 0.08em;
    }

    .booking-hero-date {
        font-size: 1.1rem;
    }

    .index-topnav-brand span {
        font-size: 1rem;
    }
}