@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

/* ===========================
   VARIABLE
=========================== */

:root {
    --primary: #006FEE;
    --primary-dark: #0057c2;
    --dark: #101828;
    --text: #5B6072;
    --muted: #9AA0B4;
    --bg: #FFFFFF;
    --soft: #EAF2FF;
    --border: #DCE3EF;
    --green: #10B981;
    --red: #EF4444;
    --yellow: #FBBF24;
}

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

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

body {
    overflow-x: hidden;
    background: var(--bg);
    color: var(--dark);
    font: 15px/1.6 'Nunito', sans-serif;
}

/* ===========================
   TEXT
=========================== */

.text-blue {
    color: var(--primary);
}

.text-muted-mainps {
    color: var(--muted);
}

.mono {
    font-family: 'Space Mono', monospace;
}

/* ===========================
   NAVBAR
=========================== */

.mainps-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 32px;
    background: #fff;
    border-bottom: 2px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 111, 238, .08);
}

.mainps-navbar .navbar-brand {
    color: var(--primary) !important;
    font-size: 22px;
    font-weight: 900;
    text-decoration: none;
}

.logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.mainps-navbar .nav-link {
    padding: 8px 16px !important;
    border-radius: 10px;
    color: var(--dark) !important;
    font-size: 14px;
    font-weight: 800;
    transition: .2s;
}

.mainps-navbar .nav-link:hover,
.mainps-navbar .nav-link.active {
    background: var(--soft);
    color: var(--primary) !important;
}

/* NAVBAR BUTTON */

.btn-navbar-cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 24px;
    background: var(--primary);
    color: #fff !important;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(0, 111, 238, .25);
    transition: .2s;
}

.btn-navbar-cta:hover {
    background: var(--primary-dark);
    color: #fff !important;
    transform: translateY(-2px);
}

/* ===========================
   BUTTON
=========================== */

.btn-blue,
.btn-main,
.btn-book {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: none;
    border-radius: 12px;
    background: var(--primary);
    color: #fff !important;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition: .2s;
}

.btn-blue:hover,
.btn-main:hover,
.btn-book:hover {
    background: var(--primary-dark);
    color: #fff !important;
    transform: translateY(-2px);
}

.btn-outline-blue,
.btn-outline-main {
    display: inline-flex;
    padding: 11px 28px;
    border: 2px solid var(--primary);
    border-radius: 12px;
    background: #fff;
    color: var(--primary);
    font-weight: 900;
    text-decoration: none;
    transition: .2s;
}

.btn-outline-blue:hover,
.btn-outline-main:hover {
    background: var(--soft);
}

/* ===========================
   CARD
=========================== */

.mainps-card {
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 111, 238, .08);
}

/* ===========================
   FORM
=========================== */

.form-label {
    color: var(--dark);
    font-weight: 800;
}

.form-control,
.form-select {
    height: 55px;
    border: 2px solid var(--border);
    border-radius: 16px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .25rem rgba(0, 111, 238, .15);
}

.is-invalid {
    border: 2px solid var(--red) !important;
}

.invalid-feedback {
    display: block;
    color: var(--red);
    font-size: 13px;
}

/* ===========================
   BADGE STATUS
=========================== */

.badge-tersedia,
.badge-penuh,
.badge-booking {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
}

.badge-tersedia {
    background: #D1FAE5;
    color: var(--green);
}

.badge-penuh {
    background: #FEE2E2;
    color: var(--red);
}

.badge-booking {
    background: #FEF3C7;
    color: #92400E;
}

/* ROOM TYPE */

.badge-reguler,
.badge-vip,
.badge-vvip {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
}

.badge-reguler {
    background: #EAF2FF;
    color: var(--primary);
}

.badge-vip {
    background: #FCE7F3;
    color: #BE185D;
}

.badge-vvip {
    background: #FEF3C7;
    color: #92400E;
}

/* ===========================
   SLOT
=========================== */

.slot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.slot-pill {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    font-family: 'Space Mono', monospace;
}

.slot-kosong {
    background: #D1FAE5;
    color: #059669;
}

.slot-terisi {
    background: #FEE2E2;
    color: #DC2626;
    text-decoration: line-through;
}

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

.mainps-footer {
    margin-top: 64px;
    padding: 48px 0 24px;
    background: #F1F6FE;
    color: #14497A;
}

.mainps-footer .navbar-brand {
    color: #14497A;
    font-size: 22px;
    font-weight: 900;
    text-decoration: none;
}

.footer-logo {
    height: 36px;
}

.footer-links {
    padding: 0;
    list-style: none;
}

.footer-links a {
    color: #14497A;
    text-decoration: none;
    font-weight: 700;
}

.footer-links a:hover {
    color: var(--primary);
}

/* ===========================
   ANIMATION
=========================== */

.live-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    animation: blink 1.4s infinite;
}

@keyframes blink {
    50% {
        opacity: .25;
    }
}