:root{
    --green:#0d6b43;
    --green2:#084c31;
    --mint:#eaf5ef;
    --ink:#12231c;
    --muted:#6d7c74;
    --line:#dce7e1;
    --cream:#f7faf8;
    --white:#fff;
    --shadow:0 18px 60px rgba(13,55,36,.10);

    /* Tavisha brand colors */
    --tavisha-red:#9b111e;
    --tavisha-red-dark:#7d0d18;
    --tavisha-gold:#c7a45a;
    --tavisha-black:#171717;
}


/* =========================================================
   GLOBAL
   ========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:DM Sans,Arial,sans-serif;
    color:var(--ink);
    background:var(--cream);
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

.container{
    width:min(1180px,92%);
    margin:auto;
}


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

.tavisha-header{
    width:100%;
    background:#ffffff;
    border-bottom:1px solid #eeeeee;

    position:sticky;
    top:0;
    z-index:1000;

    box-shadow:0 2px 14px rgba(0,0,0,.04);
}


.tavisha-header-inner{
    max-width:1200px;
    height:88px;
    margin:0 auto;
    padding:0 24px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;
}


/* =========================================================
   TAVISHA LOGO
   ========================================================= */

.tavisha-brand{
    display:flex;
    align-items:center;
    flex-shrink:0;

    text-decoration:none;
}


.tavisha-logo{
    width:180px;
    height:auto;

    display:block;

    object-fit:contain;
}


/* =========================================================
   TAVISHA DESKTOP NAVIGATION
   ========================================================= */

.tavisha-nav{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:28px;
    margin-left:auto;
}


.tavisha-nav a{
    color:#333333;
    text-decoration:none;

    font-family:"DM Sans",sans-serif;
    font-size:14px;
    font-weight:600;

    transition:
        color .2s ease,
        opacity .2s ease;
}


.tavisha-nav a:hover{
    color:var(--tavisha-red);
}


/* =========================================================
   TAVISHA BOOK NOW BUTTON
   ========================================================= */

.tavisha-book-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:110px;

    padding:11px 20px;

    background:var(--tavisha-red);
    color:#ffffff !important;

    border-radius:4px;

    font-family:"DM Sans",sans-serif;
    font-size:14px;
    font-weight:700;

    text-decoration:none;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.tavisha-book-btn:hover{
    background:var(--tavisha-red-dark);
    color:#ffffff !important;

    transform:translateY(-1px);

    box-shadow:0 6px 18px rgba(155,17,30,.20);
}


/* =========================================================
   TAVISHA MOBILE MENU BUTTON
   ========================================================= */

.tavisha-menu-btn{
    display:none;

    width:42px;
    height:42px;

    border:1px solid #dddddd;
    border-radius:5px;

    background:#ffffff;

    cursor:pointer;

    align-items:center;
    justify-content:center;
    flex-direction:column;

    gap:5px;
}


.tavisha-menu-btn span{
    width:20px;
    height:2px;

    background:#333333;

    display:block;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


/* =========================================================
   TAVISHA MOBILE NAVIGATION
   ========================================================= */

.tavisha-mobile-nav{
    display:none;

    width:100%;

    background:#ffffff;

    border-top:1px solid #eeeeee;

    padding:15px 24px 20px;
}


.tavisha-mobile-nav a{
    display:block;

    padding:12px 0;

    color:#333333;

    text-decoration:none;

    font-family:"DM Sans",sans-serif;
    font-size:15px;
    font-weight:600;

    border-bottom:1px solid #f1f1f1;
}


.tavisha-mobile-nav a:last-child{
    border-bottom:none;
}


.tavisha-mobile-nav a:hover{
    color:var(--tavisha-red);
}


.tavisha-mobile-nav.active{
    display:block;
}


/* =========================================================
   OLD / EXISTING NAVIGATION
   Kept because other HTML pages may use it.
   ========================================================= */

.nav{
    position:sticky;
    top:0;
    z-index:20;

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

    backdrop-filter:blur(14px);

    border-bottom:1px solid var(--line);
}


.navin{
    height:76px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:24px;
}


.brand{
    display:flex;
    align-items:center;

    gap:12px;

    font-weight:800;
}


.brandlogo{
    width:48px;
    height:48px;

    border-radius:10px;

    display:block;

    object-fit:contain;
    object-position:center;
    flex-shrink:0;
}


.brand small{
    display:block;

    color:var(--muted);

    font-size:11px;
    font-weight:600;

    letter-spacing:.08em;
    text-transform:uppercase;
}


.links{
    display:flex;

    gap:25px;

    font-size:14px;
    font-weight:600;
}


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


.navcta{
    background:var(--green);
    color:#fff;

    padding:11px 17px;

    border-radius:999px;

    font-weight:700;
}


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

.hero{
    min-height:640px;

    display:grid;
    place-items:center;

    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(4,31,20,.76),
            rgba(4,31,20,.20)
        ),
        center/cover;
}

.hero .container{
    padding:90px 0;
}


.eyebrow{
    color:#bde4cf;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-size:12px;
    font-weight:800;
}


.hero h1{
    font-family:"Playfair Display",serif;

    color:#fff;

    font-size:clamp(46px,7vw,86px);

    line-height:.98;

    max-width:800px;

    margin:18px 0;
}


.hero p{
    color:#e6f0eb;

    max-width:620px;

    font-size:18px;

    line-height:1.7;
}


/* =========================================================
   SEARCH BOX
   ========================================================= */

.searchbox{
    margin-top:38px;

    background:#fff;

    border-radius:20px;

    padding:14px;

    display:grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr
        .8fr
        auto;

    gap:8px;

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


.searchbox label{
    font-size:10px;

    color:var(--muted);

    display:block;

    margin:0 0 5px 10px;

    text-transform:uppercase;

    font-weight:800;
}


.searchbox input,
.searchbox select{
    width:100%;

    border:0;

    background:#f5f8f6;

    padding:12px;

    border-radius:11px;

    outline:none;
}


.primary{
    border:0;

    background:var(--green);

    color:#fff;

    padding:14px 20px;

    border-radius:12px;

    font-weight:800;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section{
    padding:90px 0;
}


.sectionhead{
    display:flex;

    align-items:end;
    justify-content:space-between;

    gap:30px;

    margin-bottom:30px;
}


.kicker{
    color:var(--green);

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.14em;

    font-size:11px;
}


.section h2{
    font-family:"Playfair Display",serif;

    font-size:46px;

    margin:8px 0 0;
}


.muted{
    color:var(--muted);

    line-height:1.7;
}


/* =========================================================
   HOTEL GRID
   ========================================================= */

.grid4{
    display:grid;

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

    gap:18px;
}


.card{
    background:#fff;

    border:1px solid var(--line);

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 8px 30px rgba(20,60,42,.05);
}


.cardimg{
    height:235px;

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


.cardbody{
    padding:22px;
}


.pill{
    display:inline-block;

    background:var(--mint);

    color:var(--green);

    font-size:11px;

    font-weight:800;

    padding:6px 10px;

    border-radius:999px;
}


.card h3{
    font-family:"Playfair Display",serif;

    font-size:27px;

    margin:13px 0 5px;
}


.price{
    font-weight:800;

    font-size:20px;
}


.price span{
    font-size:12px;

    color:var(--muted);

    font-weight:500;
}


.row{
    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:10px;
}


.outline{
    border:1px solid var(--green);

    color:var(--green);

    background:#fff;

    padding:10px 14px;

    border-radius:10px;

    font-weight:800;
}


/* =========================================================
   FEATURE SECTION
   ========================================================= */

.feature{
    display:grid;

    grid-template-columns:
        1.1fr
        .9fr;

    gap:50px;

    align-items:center;
}


.featureimg{
    height:520px;

    border-radius:28px;

    background:
        url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=1400&q=85")
        center/cover;
}


.feature h2{
    font-family:"Playfair Display",serif;

    font-size:52px;

    line-height:1.05;
}


.checks{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:15px;

    margin-top:25px;
}


.check{
    background:#fff;

    border:1px solid var(--line);

    padding:17px;

    border-radius:15px;
}


/* =========================================================
   CTA
   ========================================================= */

.cta{
    background:var(--green2);

    color:#fff;

    border-radius:28px;

    padding:55px;

    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:30px;
}


.cta h2{
    font-family:"Playfair Display",serif;

    font-size:44px;

    margin:0;
}


.cta .primary{
    background:#fff;

    color:var(--green2);
}


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

.footer{
    background:#082d1f;

    color:#cfe0d7;

    padding:55px 0;
}


.footergrid{
    display:grid;

    grid-template-columns:
        2fr
        1fr
        1fr;

    gap:40px;
}


.footer h4{
    color:#fff;
}


.footer a{
    display:block;

    margin:10px 0;

    color:#cfe0d7;

    font-size:14px;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal{
    position:fixed;

    inset:0;

    background:rgba(3,20,13,.65);

    display:none;

    place-items:center;

    z-index:50;

    padding:20px;
}


.modal.open{
    display:grid;
}


.modalbox{
    background:#fff;

    width:min(720px,100%);

    border-radius:24px;

    padding:28px;
}


.modalhead{
    display:flex;

    justify-content:space-between;
    align-items:center;
}


.close{
    border:0;

    background:#eef4f0;

    width:38px;
    height:38px;

    border-radius:50%;
}


.formgrid{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:15px;
}


.field label{
    font-size:12px;

    font-weight:800;

    color:var(--muted);

    display:block;

    margin-bottom:7px;
}


.field input,
.field select,
.field textarea{
    width:100%;

    padding:12px;

    border:1px solid var(--line);

    border-radius:10px;

    background:#fbfdfc;
}


.field.full{
    grid-column:1/-1;
}


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

.pagehero{
    background:
        linear-gradient(
            90deg,
            rgba(4,40,25,.78),
            rgba(4,40,25,.25)
        ),
        url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=1800&q=85")
        center/cover;

    color:white;

    padding:100px 0;
}


.pagehero h1{
    font-family:"Playfair Display",serif;

    font-size:64px;

    margin:10px 0;
}


.detail{
    display:grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap:25px;

    margin-top:-50px;

    position:relative;
}


.panel{
    background:#fff;

    border:1px solid var(--line);

    border-radius:22px;

    padding:26px;

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


.detailimg{
    min-height:510px;

    border-radius:22px;

    background-size:cover;

    background-position:center;
}


.rooms{
    display:grid;

    gap:12px;
}


.room{
    display:flex;

    justify-content:space-between;
    align-items:center;

    border:1px solid var(--line);

    padding:16px;

    border-radius:14px;
}


/* =========================================================
   ADMIN
   ========================================================= */

.admin{
    display:grid;

    grid-template-columns:
        240px
        1fr;

    min-height:100vh;
}


.sidebar{
    background:#082d1f;

    color:white;

    padding:25px;

    position:sticky;

    top:0;

    height:100vh;
}


.sidebrand{
    font-weight:900;

    font-size:18px;

    margin-bottom:35px;
}


.sidebtn{
    width:100%;

    text-align:left;

    background:transparent;

    color:#cfe0d7;

    border:0;

    padding:12px;

    border-radius:10px;

    margin:3px 0;
}


.sidebtn.active,
.sidebtn:hover{
    background:#124f37;

    color:#fff;
}


.adminmain{
    padding:35px;
}


.stats{
    display:grid;

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

    gap:15px;
}


.stat{
    background:#fff;

    border:1px solid var(--line);

    border-radius:18px;

    padding:20px;
}


.stat strong{
    font-size:30px;

    display:block;
}


.tablewrap{
    overflow:auto;

    background:#fff;

    border:1px solid var(--line);

    border-radius:18px;
}


.table{
    width:100%;

    border-collapse:collapse;
}


.table th,
.table td{
    padding:15px;

    border-bottom:1px solid var(--line);

    text-align:left;

    font-size:14px;
}


.toolbar{
    display:flex;

    justify-content:space-between;

    gap:15px;

    margin:30px 0 15px;
}


.editor{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:15px;
}


.editor .full{
    grid-column:1/-1;
}


/* =========================================================
   PHASE 3
   ========================================================= */

.menubtn{
    display:none;

    border:0;

    background:transparent;

    font-size:26px;

    color:var(--green);
}


.booking-layout{
    display:grid;

    grid-template-columns:
        1.25fr
        .75fr;

    gap:24px;

    align-items:start;
}


.summary{
    position:sticky;

    top:95px;
}


.summaryline{
    display:flex;

    justify-content:space-between;

    gap:15px;

    padding:10px 0;

    border-bottom:1px solid var(--line);
}


.summarytotal{
    font-size:26px;

    font-weight:900;

    color:var(--green);
}


.notice{
    padding:14px 16px;

    border-radius:12px;

    background:var(--mint);

    color:var(--green2);

    font-size:13px;

    line-height:1.5;
}


.error{
    background:#fff1f1;

    color:#a32626;
}


.successbox{
    border-left:5px solid var(--green);
}


.badge{
    display:inline-flex;

    align-items:center;

    padding:6px 10px;

    border-radius:999px;

    font-size:11px;

    font-weight:800;

    background:#eef3f0;

    color:#446156;
}


.badge.confirmed{
    background:#e6f6ed;

    color:#17653e;
}


.badge.cancelled{
    background:#fff0f0;

    color:#a22d2d;
}


.badge.checked-in{
    background:#eef3ff;

    color:#3158a6;
}


.badge.completed{
    background:#f2efff;

    color:#5c45a4;
}


.actionrow{
    display:flex;

    gap:8px;

    flex-wrap:wrap;
}


.mini{
    border:1px solid var(--line);

    background:white;

    padding:7px 10px;

    border-radius:8px;

    font-weight:700;

    font-size:12px;
}


.danger{
    border-color:#e8c1c1;

    color:#a32626;
}


.tabbar{
    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin:25px 0;
}


.tab{
    border:1px solid var(--line);

    background:#fff;

    padding:10px 14px;

    border-radius:10px;

    font-weight:800;
}


.tab.active{
    background:var(--green);

    color:#fff;

    border-color:var(--green);
}


.hidden{
    display:none!important;
}


.empty{
    padding:40px;

    text-align:center;

    color:var(--muted);
}


.roomchoice{
    display:grid;

    grid-template-columns:
        1fr
        auto;

    gap:10px;

    align-items:center;

    padding:12px;

    border:1px solid var(--line);

    border-radius:12px;

    margin:8px 0;
}


.hotel-actions{
    display:flex;

    gap:8px;

    margin-top:14px;

    flex-wrap:wrap;
}


.soft{
    background:var(--mint);

    color:var(--green);

    border:0;

    padding:10px 13px;

    border-radius:10px;

    font-weight:800;
}


.hero-badges{
    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-top:22px;
}


.hero-badges span{
    padding:8px 12px;

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

    border:1px solid rgba(255,255,255,.22);

    color:#fff;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    backdrop-filter:blur(6px);
}


/* =========================================================
   HOTEL GALLERY
   ========================================================= */

.hotel-gallery{
    margin:20px 0 28px;

    padding:22px;

    border:1px solid var(--line);

    border-radius:24px;

    background:rgba(255,255,255,.03);
}


.gallery-head{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-bottom:16px;
}


.gallery-head h3{
    margin:4px 0 0;
}


.ghost{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:10px 14px;

    border:1px solid var(--line);

    border-radius:12px;

    color:inherit;

    text-decoration:none;

    font-weight:700;

    font-size:13px;
}


.gallery-grid{
    display:grid;

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

    gap:10px;
}


.gallery-item{
    position:relative;

    display:block;

    min-height:150px;

    border-radius:16px;

    overflow:hidden;

    background:#eee;
}


.gallery-item.featured{
    grid-column:span 2;

    grid-row:span 2;

    min-height:310px;
}


.gallery-item img{
    width:100%;

    height:100%;

    min-height:150px;

    object-fit:cover;

    display:block;

    transition:
        transform .35s ease;
}


.gallery-item:hover img{
    transform:scale(1.04);
}


.gallery-item span{
    position:absolute;

    left:10px;
    bottom:10px;

    padding:6px 9px;

    border-radius:999px;

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

    color:#fff;

    font-size:11px;

    font-weight:700;

    backdrop-filter:blur(6px);
}


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

@media(max-width:900px){

    /* Tavisha header */

    .tavisha-header-inner{
        height:78px;

        padding:0 20px;
    }


    .tavisha-logo{
        width:155px;
    }


    .tavisha-nav{
        gap:18px;
    }


    .tavisha-nav a{
        font-size:13px;
    }


    .tavisha-book-btn{
        min-width:95px;

        padding:10px 14px;
    }


    /* Existing website */

    .links{
        display:none;
    }


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


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


    .feature,
    .detail{
        grid-template-columns:1fr;
    }


    .featureimg{
        height:360px;
    }


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


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


    .sidebar{
        position:relative;

        height:auto;
    }


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


    .pagehero h1{
        font-size:46px;
    }


    .booking-layout{
        grid-template-columns:1fr;
    }


    .summary{
        position:relative;

        top:auto;
    }


    .menubtn{
        display:block;
    }


    .navcta{
        display:none;
    }


    .links{
        display:none;

        position:absolute;

        top:76px;

        left:0;
        right:0;

        background:#fff;

        border-bottom:1px solid var(--line);

        padding:16px 4%;

        flex-direction:column;

        gap:12px;
    }


    .links.show{
        display:flex;
    }

}


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

@media(max-width:700px){

    .tavisha-header-inner{
        height:72px;

        padding:0 16px;
    }


    .tavisha-logo{
        width:145px;
    }


    .tavisha-nav{
        display:none;
    }


    .tavisha-menu-btn{
        display:flex;
    }

}


@media(max-width:560px){

    .tavisha-logo{
        width:130px;
    }


    .tavisha-header-inner{
        padding:0 12px;
    }


    .hero{
        min-height:720px;
    }


    .searchbox,
    .grid4,
    .checks,
    .formgrid,
    .editor{
        grid-template-columns:1fr;
    }


    .section h2,
    .feature h2{
        font-size:38px;
    }


    .cta{
        padding:32px;

        display:block;
    }


    .cta .primary{
        margin-top:20px;
    }


    .detailimg{
        min-height:300px;
    }


    .navin{
        gap:10px;
    }


    .brand{
        font-size:13px;
    }


    .brandlogo{
        width:40px;

        height:40px;
    }


    .pagehero{
        padding:70px 0;
    }


    .pagehero h1{
        font-size:40px;
    }


    .adminmain{
        padding:22px;
    }


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


    .table th,
    .table td{
        padding:11px;

        font-size:12px;
    }


    .gallery-grid{
        grid-template-columns:
            repeat(2,1fr);
    }


    .gallery-item.featured{
        grid-column:span 2;

        grid-row:auto;

        min-height:220px;
    }


    .gallery-head{
        align-items:flex-start;

        flex-direction:column;
    }

}


@media(max-width:400px){

    .tavisha-logo{
        width:120px;
    }


    .tavisha-header-inner{
        padding:0 10px;
    }

}