:root{
    --navy:#0f172a;
    --navy-soft:#1e293b;
    --gold:#c9a24d;
    --gold-dark:#a9822f;
    --cream:#f8f5ef;
    --white:#ffffff;
    --muted:#64748b;
    --line:#e2e8f0;
    --success:#16a34a;
    --danger:#dc2626;
    --shadow:0 18px 45px rgba(15,23,42,0.12);
    --radius:18px;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Segoe UI", Arial, sans-serif;
    background:#f8fafc;
    color:var(--navy);
    line-height:1.6;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

/* NAVBAR */

.site-navbar{
    width:100%;
    min-height:82px;
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(14px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 6%;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 8px 25px rgba(15,23,42,0.08);
}

.site-logo a{
    font-size:1.45rem;
    font-weight:800;
    letter-spacing:0.08em;
    color:var(--navy);
}

.site-logo span{
    color:var(--gold);
}

.site-links{
    display:flex;
    align-items:center;
    gap:1.6rem;
}

.site-links a{
    color:var(--navy-soft);
    font-weight:600;
    font-size:0.95rem;
    transition:0.25s;
}

.site-links a:hover{
    color:var(--gold-dark);
}

.nav-btn,
.primary-btn,
.secondary-btn,
.outline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:999px;
    padding:13px 24px;
    font-weight:700;
    transition:0.25s;
    cursor:pointer;
}

.nav-btn,
.primary-btn{
    background:var(--gold);
    color:white !important;
    box-shadow:0 8px 20px rgba(201,162,77,0.32);
}

.nav-btn:hover,
.primary-btn:hover{
    background:var(--gold-dark);
    transform:translateY(-2px);
}

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

.outline-btn{
    border:1px solid var(--line);
    color:var(--navy);
    background:white;
}

/* HERO */

.hero{
    min-height:calc(100vh - 82px);
    display:flex;
    align-items:center;
    padding:7rem 6%;
    background:
        linear-gradient(90deg, rgba(15,23,42,.88), rgba(15,23,42,.48)),
        url("/website/images/hero.jpg");
    background-size:cover;
    background-position:center;
    position:relative;
}

.hero-content{
    max-width:760px;
    color:white;
}

.hero-badge{
    display:inline-block;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    padding:8px 16px;
    border-radius:999px;
    font-size:0.85rem;
    margin-bottom:22px;
    color:#fef3c7;
}

.hero-content h1{
    font-size:clamp(2.6rem, 6vw, 5.4rem);
    line-height:0.98;
    letter-spacing:-0.04em;
    margin-bottom:1.5rem;
}

.hero-content p{
    font-size:1.15rem;
    max-width:620px;
    color:#e2e8f0;
    margin-bottom:2rem;
}

.hero-buttons{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    margin-top:3rem;
    max-width:650px;
}

.hero-stat{
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.15);
    padding:18px;
    border-radius:18px;
    backdrop-filter:blur(10px);
}

.hero-stat h3{
    font-size:1.8rem;
    color:white;
}

.hero-stat p{
    font-size:0.85rem;
    margin:0;
    color:#cbd5e1;
}

/* SECTIONS */

.section{
    padding:5rem 6%;
}

.section-header{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:1.5rem;
    margin-bottom:2.5rem;
}

.section-kicker{
    color:var(--gold-dark);
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:.78rem;
    font-weight:800;
    margin-bottom:.5rem;
}

.section h2,
.section-header h2{
    font-size:clamp(2rem, 4vw, 3.2rem);
    line-height:1.08;
    letter-spacing:-0.03em;
}

.section-intro{
    max-width:620px;
    color:var(--muted);
}

/* ROOMS */

.room-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:1.6rem;
}

.room-card{
    background:white;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:0.25s;
}

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

.room-image{
    height:240px;
    background:
        linear-gradient(rgba(15,23,42,.05), rgba(15,23,42,.15)),
        url("/website/images/room-1.jpg");
    background-size:cover;
    background-position:center;
}

.room-body{
    padding:1.5rem;
}

.room-body h3{
    font-size:1.4rem;
    margin-bottom:.35rem;
}

.room-body p{
    color:var(--muted);
    margin-bottom:.35rem;
}

.room-price{
    font-size:1.35rem;
    font-weight:800;
    color:var(--navy);
    margin:1rem 0;
}

.room-actions{
    display:flex;
    gap:.8rem;
    flex-wrap:wrap;
}

/* FEATURE CARDS */

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.4rem;
}

.feature-card{
    background:white;
    border-radius:var(--radius);
    padding:1.5rem;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.feature-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    background:#fef3c7;
    color:var(--gold-dark);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    margin-bottom:1rem;
}

.feature-card h3{
    margin-bottom:.5rem;
}

.feature-card p{
    color:var(--muted);
}

/* ABOUT / CONTACT BLOCKS */

.split-section{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:2rem;
    align-items:center;
}

.glass-box{
    background:white;
    border-radius:24px;
    box-shadow:var(--shadow);
    padding:2rem;
}

.contact-list{
    display:grid;
    gap:1rem;
    margin-top:1rem;
}

.contact-item{
    background:#f8fafc;
    border:1px solid var(--line);
    padding:1rem;
    border-radius:14px;
}

/* AUTH */

.auth-page{
    min-height:calc(100vh - 82px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4rem 6%;
    background:
        radial-gradient(circle at top left, rgba(201,162,77,.18), transparent 35%),
        #f8fafc;
}

.auth-card{
    width:100%;
    max-width:460px;
    background:white;
    border-radius:24px;
    padding:2.2rem;
    box-shadow:var(--shadow);
}

.auth-card h1{
    font-size:2rem;
    margin-bottom:.4rem;
}

.auth-card p{
    color:var(--muted);
    margin-bottom:1.4rem;
}

.auth-card form{
    display:grid;
    gap:1rem;
}

.auth-card input,
.auth-card textarea,
.auth-card select,
.form-control{
    width:100%;
    padding:15px 16px;
    border:1px solid var(--line);
    border-radius:14px;
    outline:none;
    background:#fff;
    font-size:.95rem;
}

.auth-card input:focus,
.auth-card textarea:focus,
.auth-card select:focus,
.form-control:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(201,162,77,.14);
}

.auth-card button,
.form-button{
    border:none;
    padding:15px 18px;
    border-radius:14px;
    background:var(--navy);
    color:white;
    font-weight:800;
    cursor:pointer;
}

/* ACCOUNT */

.account-page{
    padding:4.5rem 6%;
    min-height:calc(100vh - 82px);
}

.account-header{
    background:
        linear-gradient(135deg, var(--navy), #334155);
    color:white;
    border-radius:28px;
    padding:2.5rem;
    margin-bottom:2rem;
    box-shadow:var(--shadow);
}

.account-header h1{
    font-size:clamp(2rem, 4vw, 3rem);
}

.account-header p{
    color:#cbd5e1;
}

.account-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.3rem;
}

.account-card{
    background:white;
    color:var(--navy);
    border-radius:20px;
    padding:1.5rem;
    box-shadow:0 10px 30px rgba(15,23,42,.08);
    transition:0.25s;
}

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

.account-card h3{
    margin-bottom:.5rem;
}

.account-card p{
    color:var(--muted);
}

/* TABLES */

.website-table{
    width:100%;
    background:white;
    border-collapse:collapse;
    margin-top:1.5rem;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
}

.website-table th,
.website-table td{
    padding:1rem;
    border-bottom:1px solid var(--line);
    text-align:left;
}

.website-table th{
    background:var(--navy);
    color:white;
}

.website-table tr:hover td{
    background:#f8fafc;
}

/* FOOTER */

.site-footer{
    background:var(--navy);
    color:white;
    padding:4rem 6% 2rem;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:2rem;
    margin-bottom:2rem;
}

.site-footer h3{
    margin-bottom:1rem;
}

.site-footer p,
.site-footer a{
    color:#cbd5e1;
    display:block;
    margin-bottom:.5rem;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:1.2rem;
    color:#94a3b8;
    font-size:.9rem;
}

/* RESPONSIVE */

.mobile-menu-btn{
    display:none;
}

@media(max-width:1024px){
    .room-grid,
    .feature-grid,
    .account-grid,
    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .split-section{
        grid-template-columns:1fr;
    }
}

@media(max-width:760px){
    .site-navbar{
        padding:1rem 5%;
        align-items:flex-start;
    }

    .mobile-menu-btn{
        display:block;
        border:none;
        background:var(--navy);
        color:white;
        padding:10px 14px;
        border-radius:10px;
        cursor:pointer;
    }

    .site-links{
        display:none;
        width:100%;
        flex-direction:column;
        align-items:flex-start;
        background:white;
        padding:1rem 0;
    }

    .site-links.active{
        display:flex;
    }

    .site-navbar{
        flex-wrap:wrap;
    }

    .hero{
        min-height:auto;
        padding:5rem 5%;
    }

    .hero-stats{
        grid-template-columns:1fr;
    }

    .section-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .room-grid,
    .feature-grid,
    .account-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .site-footer{
        padding:3rem 5% 2rem;
    }

    .website-table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }
}

/* CLIENT DASHBOARD IMPROVEMENTS */

.cards{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:1.4rem;
    margin-bottom:2rem;
}

.dashboard-card{
    background:linear-gradient(180deg, #ffffff, #f8fafc);
    border:1px solid var(--line);
    border-radius:22px;
    padding:1.6rem;
    box-shadow:0 12px 30px rgba(15,23,42,.08);
    position:relative;
    overflow:hidden;
}

.dashboard-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg, var(--gold), var(--gold-dark));
}

.dashboard-card h3{
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--muted);
    margin-bottom:.8rem;
}

.dashboard-card h1{
    font-size:2.4rem;
    color:var(--navy);
    line-height:1;
}

.account-header{
    position:relative;
    overflow:hidden;
}

.account-header::after{
    content:"";
    position:absolute;
    right:-80px;
    top:-80px;
    width:230px;
    height:230px;
    border-radius:50%;
    background:rgba(201,162,77,.18);
}

.account-grid{
    margin-top:2rem;
}

.account-card{
    border:1px solid var(--line);
    min-height:160px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.account-card h3{
    font-size:1.25rem;
}

.account-card p{
    font-size:.95rem;
}

.profile-card{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:2rem;
    align-items:start;
}

.avatar-circle{
    width:110px;
    height:110px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--gold), var(--gold-dark));
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:3rem;
    font-weight:800;
    box-shadow:0 14px 28px rgba(201,162,77,.25);
}

.profile-details{
    display:grid;
    gap:1rem;
}

.profile-row{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:1rem;
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:14px;
}

.profile-row strong{
    color:var(--muted);
}

.profile-actions{
    grid-column:1 / -1;
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:1rem;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    padding:7px 13px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:800;
    text-transform:capitalize;
    background:#e2e8f0;
    color:var(--navy);
}

.status-paid,
.status-successful,
.status-checked_out,
.status-available{
    background:#dcfce7;
    color:#166534;
}

.status-pending,
.status-partial,
.status-booked,
.status-reserved{
    background:#fef3c7;
    color:#92400e;
}

.status-failed,
.status-cancelled{
    background:#fee2e2;
    color:#991b1b;
}

.status-checked_in,
.status-occupied{
    background:#dbeafe;
    color:#1e40af;
}

@media(max-width:1024px){
    .cards{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:760px){
    .account-page{
        padding:2.5rem 5%;
    }

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

    .dashboard-card h1{
        font-size:2rem;
    }

    .profile-card{
        grid-template-columns:1fr;
        text-align:left;
    }

    .profile-row{
        flex-direction:column;
    }

    .profile-actions{
        flex-direction:column;
    }

    .profile-actions a{
        width:100%;
    }
}

/* PREMIUM HOME PAGE */

.luxury-hero{
    min-height:calc(100vh - 82px);
    position:relative;
    display:flex;
    align-items:center;
    padding:7rem 6% 10rem;
    background:
        url("/website/images/hero.jpg");
    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(15,23,42,.92), rgba(15,23,42,.45)),
        radial-gradient(circle at 80% 20%, rgba(201,162,77,.32), transparent 30%);
}

.luxury-hero-content{
    position:relative;
    z-index:2;
    max-width:760px;
    color:white;
}

.luxury-hero-content h1{
    font-size:clamp(3rem, 7vw, 6.5rem);
    line-height:.95;
    letter-spacing:-.06em;
    margin-bottom:1.4rem;
}

.luxury-hero-content p{
    font-size:1.2rem;
    max-width:620px;
    color:#e2e8f0;
    margin-bottom:2rem;
}

.booking-strip{
    position:absolute;
    z-index:3;
    left:6%;
    right:6%;
    bottom:2rem;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);
    border-radius:24px;
    padding:1.2rem;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
    align-items:center;
    box-shadow:0 25px 55px rgba(15,23,42,.22);
}

.booking-strip div{
    padding:0 1rem;
    border-right:1px solid var(--line);
}

.booking-strip div:last-of-type{
    border-right:none;
}

.booking-strip small{
    display:block;
    color:var(--muted);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.7rem;
}

.booking-strip strong{
    font-size:1.05rem;
    color:var(--navy);
}

.premium-room{
    border:1px solid rgba(201,162,77,.22);
}

.room-tag{
    display:inline-block;
    background:#dcfce7;
    color:#166534;
    padding:6px 12px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:800;
    margin-bottom:.8rem;
}

.luxury-band{
    background:
        linear-gradient(135deg, #0f172a, #1e293b);
    color:white;
    padding:5rem 6%;
}

.luxury-band h2{
    font-size:clamp(2rem, 4vw, 3.2rem);
    margin-bottom:2rem;
}

.luxury-band .feature-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:white;
}

.luxury-band .feature-card p{
    color:#cbd5e1;
}

.contact-card{
    border:1px solid rgba(201,162,77,.2);
}

.cta-section{
    margin:4rem 6%;
    border-radius:32px;
    padding:4rem 2rem;
    text-align:center;
    color:white;
    background:
        linear-gradient(135deg, rgba(15,23,42,.95), rgba(30,41,59,.9)),
        url("/website/images/banner.jpg");
    background-size:cover;
    background-position:center;
    box-shadow:var(--shadow);
}

.cta-section h2{
    font-size:clamp(2rem, 5vw, 4rem);
    margin-bottom:1rem;
}

.cta-section p{
    color:#cbd5e1;
    max-width:650px;
    margin:0 auto 2rem;
}

.cta-section .hero-buttons{
    justify-content:center;
}

@media(max-width:900px){
    .booking-strip{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        margin-top:3rem;
        grid-template-columns:1fr;
    }

    .booking-strip div{
        border-right:none;
        border-bottom:1px solid var(--line);
        padding:1rem;
    }

    .luxury-hero{
        display:block;
        padding:5rem 5%;
    }

    .luxury-hero-content{
        margin-top:3rem;
    }
}
/* HERO SLIDESHOW */

.hero-slider{
    position:absolute;
    inset:0;
    z-index:0;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transform:scale(1.08);
    transition:opacity 1.2s ease, transform 5s ease;
    background-size:cover;
    background-position:center;
}

.hero-slide.active{
    opacity:1;
    transform:scale(1);
}

.slide-1{
    background-image:url("/website/images/hero.jpg");
}

.slide-2{
    background-image:url("/website/images/room-1.jpg");
}

.slide-3{
    background-image:url("/website/images/restaurant.jpg");
}

.luxury-hero{
    animation:fadeIn 0.8s ease;
}

.luxury-hero-content{
    animation:slideUp 1s ease forwards;
}

.booking-strip{
    animation:floatUp 1s ease forwards;
}

.room-card,
.feature-card,
.glass-box,
.dashboard-card,
.account-card{
    animation:softReveal .8s ease both;
}

.room-card:hover,
.feature-card:hover,
.account-card:hover{
    transform:translateY(-8px);
}

.primary-btn,
.secondary-btn,
.outline-btn{
    transition:.3s ease;
}

.primary-btn:hover,
.secondary-btn:hover,
.outline-btn:hover{
    transform:translateY(-3px);
}

@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(35px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes floatUp{
    from{
        opacity:0;
        transform:translateY(45px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes softReveal{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}