@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Jost:wght@400;500&display=swap');

:root {
    --beige       : rgba(245, 238, 225, 0.80);
    --beige-solid : rgba(245, 238, 225, 0.96);
    --beige-solid-strong-accent : rgba(176, 141, 91, 0.15);
    --beige-solid-strong : rgb(233, 226, 214);
    --border      : rgba(200, 185, 160, 0.45);
    --ink         : #2e2a24;
    --ink-muted   : #7a6f60;
    --accent      : #b08d5b;
    --nav-height  : 64px;
    --sidebar-width : 250px;
    --footer-height: auto;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family : 'Jost', sans-serif;
    background  : #faf6ef;
    color       : var(--ink);
}

footer {
    bottom    : 0;
    background : var(--beige);
    padding    : 1.5rem 2rem 1rem;
    text-align : center;
    height     : var(--footer-height);
    display    : flex;
    flex-direction: column;
    align-items: center;
}

.footer-links {
    display     : flex;
    align-items : center;
    gap         : 0.25rem;
    list-style  : none;
    flex        : 1;
}

.footer-links a {
    text-decoration : none;
    font-size       : 0.75rem;
    color           : var(--ink-muted);
    padding         : 0.4rem 0.9rem;
    border-radius   : 2px;
    transition      : color 0.2s;
}
.footer-socials {
    display : flex;
    gap     : 0.75rem;
    margin-bottom: auto; 
}

.social-link {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 28px;
    height          : 28px;
    color           : var(--ink-muted);
    border-radius   : 2px;
    transition      : color 0.2s;
    padding         : 0; 
}

.social-link:hover {
    color: var(--ink);
}

.footer-copyright {
    font-size : 0.75rem;
    color     : var(--ink-muted);
    margin-top: 1rem;
}


nav {
    position        : sticky;
    top             : 0;
    z-index         : 100;
    height          : var(--nav-height);
    width           : 100%;
    display         : flex;
    align-items     : center;
    padding         : 0 2rem 0 1rem;
    background      : var(--beige);
    backdrop-filter : blur(14px);
    border-bottom   : 1px solid var(--border);
    box-shadow      : 0 12px 16px rgba(160, 135, 90, 0.10);
    transition      : background 0.3s;
}

nav.scrolled {
    background : var(--beige-solid);
    box-shadow      : 0 12px 16px rgba(160, 135, 90, 0.10);
}

.nav-logo {
    text-decoration : none;
    margin-right    : .78rem;
    flex-shrink     : 0;
}

.nav-logo span {
    color : var(--accent);
}

.nav-links {
    display     : flex;
    align-items : center;
    gap         : 0.25rem;
    list-style  : none;
    flex        : 1;
}

.nav-links a {
    text-decoration : none;
    font-size       : 0.78rem;
    font-weight     : 500;
    letter-spacing  : 0.10em;
    text-transform  : uppercase;
    color           : var(--ink-muted);
    padding         : 0.4rem 0.9rem;
    border-radius   : 2px;
    transition      : color 0.2s;
}

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

.nav-auth {
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
    flex-shrink : 0;
}

.nav-auth a,
.nav-auth button {
    font-family    : 'Jost', sans-serif;
    font-size      : 0.75rem;
    font-weight    : 500;
    letter-spacing : 0.10em;
    text-transform : uppercase;
    text-decoration: none;
    padding        : 0.4rem 1rem;
    border-radius  : 2px;
    cursor         : pointer;
    transition     : background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-login {
    text-decoration : none;
    font-size       : 0.78rem;
    font-weight     : 500;
    letter-spacing  : 0.10em;
    text-transform  : uppercase;
    color           : var(--ink-muted);
    padding         : 0.4rem 0.9rem;
    border-radius   : 2px;
    transition      : color 0.2s;
}

.btn-login:hover {
    color : var(--ink);
}

.btn-register {
    text-decoration : none;
    font-size       : 0.78rem;
    font-weight     : 500;
    letter-spacing  : 0.10em;
    text-transform  : uppercase;
    color           : var(--ink-muted);
    padding         : 0.4rem 0.9rem;
    border-radius   : 2px;
    transition      : color 0.2s;
}

.btn-register:hover {
    color : var(--ink);
}

.btn-logout {
    color      : var(--ink-muted);
    background : transparent;
    border     : 1px solid var(--border);
}

.btn-logout:hover {
    color        : #c0392b;
    border-color : #c0392b;
    background   : transparent;
}

.nav-username {
    font-size  : 0.78rem;
    color      : var(--ink-muted);
}

.signup-container {
    max-width : 400px;
    margin    : 2rem auto;
    padding   : 2rem;
    background : var(--beige);
    border     : 1px solid var(--border);
    border-radius: 4px;
    box-shadow  : 0 4px 12px rgba(160, 135, 90, 0.10);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    margin-left : auto; 
}
.burger {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    gap            : 5px;
    background     : none;
    border         : none;
    cursor         : pointer;
    padding        : 4px;
}

.burger span {
    display       : block;
    width         : 25px;
    height        : 2px;
    background    : var(--ink-muted);
    border-radius : 3px;
    transition    : all 0.3s ease;
}

.burger:hover span {
    background: var(--ink);
}

.burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.burger-menu {
    display        : none;
    flex-direction : column;
    position       : absolute;
    top            : calc(100% + 10px);
    right          : 0;
    background     : #1a1a1a;;
    border         : 1px solid var(--border);
    border-radius  : 2px;
    min-width      : 180px;
    overflow       : hidden;
    z-index        : 999;
    box-shadow     : 0 8px 24px rgba(160, 135, 90, 0.15);
}

.burger-menu.open { display: flex; }

.burger-nav-links {
    display    : none;
    list-style : none;
    padding    : 0;
    margin     : 0;
}

.burger-bottom {
    display        : flex;
    flex-direction : column;
    border-top     : 1px solid var(--border);
}

.burger-item {
    display        : block;
    width          : 100%;
    padding        : 0.65rem 1.25rem;
    color          : rgba(255,255,255,0.8);
    text-decoration: none;
    background     : none;
    border         : none;
    text-align     : left;
    cursor         : pointer;
    font-family    : 'Jost', sans-serif;
    font-size      : 0.75rem;
    font-weight    : 500;
    letter-spacing : 0.10em;
    text-transform : uppercase;
    transition     : color 0.2s, background 0.2s;
}

.burger-item:hover {
    color     : #c9a96e;
    background: rgba(255,255,255,0.05);
}

/* Logout */
.btn-logout-burger {
    color: var(--ink-muted);
}

.btn-logout-burger:hover {
    color      : #c0392b;
    background : rgba(192, 57, 43, 0.06);
}

/* Register accent inside burger */
.burger-item--accent {
    color: var(--accent);
}

.burger-item--accent:hover {
    color      : #8a6b3a;
    background : rgba(176, 141, 91, 0.08);
}

.rooms-page-section {
    padding   : 0 0 5rem;
    background: #faf6ef;
}

@media (min-width: 769px) {
    .nav-links        { display: flex; }
    .mobile-only      { display: none; 
    }
    .desktop-auth     { display: flex; align-items: center; }
    .burger-nav-links { display: none !important; }

    .burger-bottom {
        border-top : none;
    }
}

/* ── Dropdown ── */
.nav-dropdown {
    position: relative;
}

.nav-dropdown > a {
    display    : flex;
    align-items: center;
    gap        : 5px;
}

.nav-dropdown::after {
    content : '';
    position: absolute;
    top     : 100%;
    left    : 0;
    width   : 100%;
    height  : 16px;
}

.nav-dropdown-menu {
    display      : none;
    position     : absolute;
    top          : calc(100% + 16px);  
    left         : 50%;
    transform    : translateX(-50%);
    background   : #1a1a1a;
    border-radius: 6px;
    min-width    : 160px;
    box-shadow   : 0 8px 24px rgba(0,0,0,0.2);
    list-style   : none;
    padding      : 6px 0;
    z-index      : 999;
}

.nav-dropdown-menu li a {
    display    : block;
    padding    : 10px 18px;
    font-size  : 0.85rem;
    color      : rgba(255,255,255,0.8);
    white-space: nowrap;
    transition : color 0.2s, background 0.2s;
}

.nav-dropdown-menu li a:hover {
    color     : #c9a96e;
    background: rgba(255,255,255,0.05);
}

.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown:hover::after             { display: block; }

/* Arrow pointer */
.nav-dropdown-menu::before {
    content     : '';
    position    : absolute;
    top         : -6px;
    left        : 50%;
    transform   : translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent #1a1a1a transparent;
}

@media (max-width: 768px) {
    .nav-links    { display: none; }
    .desktop-auth { display: none !important; }
    .burger-nav-links {
        display        : flex;
        flex-direction : column;
    }

    .burger-menu {
        position   : fixed;
        top        : var(--nav-height);
        left       : 0;
        right      : 0;
        width      : 100%;
        border-radius : 0;
        min-width  : unset;
        max-height : calc(100vh - var(--nav-height));
        overflow-y : auto;
        justify-content: space-between;
    }

    .burger-bottom {
        margin-top : auto;
        border-top : 1px solid var(--border);
    }

    .burger-item {
        padding: 0.9rem 1.5rem;
    }
    .footer-links {
        flex-direction: column;
        gap: 0.5rem;
    }
}