/* ==========================================================
   Chatpata Club Smart Order
   File : layout.css
   Description : Page Layout
   ========================================================== */

/* ==========================================
   BODY
========================================== */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

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

.header {

    position: sticky;
    top: 0;
    z-index: var(--z-header);

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

    height: var(--header-height);

    padding: 0 var(--space-24);

    background: var(--color-white);

    border-bottom: var(--border);

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

}

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

.logo-area {

    display: flex;
    align-items: center;
    gap: var(--space-12);

    min-width: 0;

}

.brand-home-link {

    color: inherit;

    text-decoration: none;

}

.brand-copy {

    min-width: 0;

}

#restaurantName {

    display: flex;

    align-items: baseline;

    gap: 6px;

    margin: 0;

    font-family: "Lobster", cursive;

    font-size: 28px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0;

}

.brand-chatpata {

    color: var(--color-primary);

}

.brand-club {

    color: #159447;

}

.logo {

    width: 54px;
    height: 54px;
    object-fit: contain;

}

.brand-tagline,
.brand-slogan {

    margin: 0;

    color: var(--color-text-light);

    line-height: 1.2;

    letter-spacing: 0;

}

.brand-tagline {

    margin-top: 4px;

    color: #18763d;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

}

.brand-slogan {

    margin-top: 1px;

    font-size: 10px;

    font-weight: 500;

}

.header-right {

    display: flex;
    align-items: center;
    gap: var(--space-12);

}

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

.hero {

    margin: var(--space-24);

    border-radius: var(--radius-lg);

    display: flex;

    align-items: center;

    min-height: 190px;

    padding: 32px 40px;

    background: var(--gradient-primary);

    color: white;

}

.hero h2 {

    color: white;

    font-size: 2.2rem;

    margin-bottom: var(--space-12);

}

.hero p {

    color: rgba(255,255,255,.9);

    margin-bottom: 0;

}

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

.search-section {

    margin: 0 var(--space-24) var(--space-24);

}

/* ==========================================
   MAIN LAYOUT
========================================== */

.main-layout {

    display: grid;

    grid-template-columns: 260px 1fr;

    gap: var(--grid-gap);

    width: 100%;

    max-width: var(--container-width);

    margin: auto;

    padding: 0 var(--space-24) var(--space-48);

}

/* ==========================================
   SIDEBAR
========================================== */

.sidebar {

    background: var(--color-white);

    border-radius: var(--radius-lg);

    padding: var(--space-20);

    border: var(--border);

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

    height: fit-content;

    position: sticky;

    top: calc(var(--header-height) + 20px);

}

.sidebar h3 {

    margin-bottom: var(--space-20);

}

.sidebar ul {

    display: flex;

    flex-direction: column;

    gap: var(--space-8);

}

/* ==========================================
   PRODUCTS
========================================== */

.products-section {

    display: flex;

    flex-direction: column;

    gap: var(--space-24);

}

.section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.section-header select {

    width: 220px;

}


/* ==========================================================
   PRODUCT GRID
========================================================== */

.product-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(280px,1fr));

    gap:24px;

    align-items:start;

}

/* ==========================================
   FLOATING CART
========================================== */

.floating-cart {

    position: fixed;

    bottom: 24px;

    right: 24px;

    width: var(--floating-cart-width);

    background: var(--gradient-primary);

    color: white;

    border-radius: var(--radius-xl);

    padding: 14px 14px 14px 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: var(--space-12);

    box-shadow:
        0 18px 36px rgba(255, 107, 0, .22),
        var(--shadow-lg);

    z-index: var(--z-floating-cart);

    transition:transform .2s, box-shadow .2s;

}

.hero-content {

    max-width: 760px;

}

.order-status-message {

    display: inline-flex;

    align-items: center;

    min-height: 34px;

    margin-bottom: var(--space-12);

    padding: 7px 13px;

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

    border-radius: 6px;

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

    color: #fff;

    font-size: 14px;

    font-weight: 700;

}

.hero.is-open .order-status-message {

    border-color: #8be0ab;

    background: #147a3f;

    box-shadow: 0 0 0 3px rgba(38,180,91,.18), 0 5px 16px rgba(15,91,48,.3);

}

.hero.is-closed .order-status-message {

    border-color: #ffaaa4;

    background: #b42318;

    box-shadow: 0 0 0 3px rgba(231,76,60,.18), 0 5px 16px rgba(123,27,20,.3);

}

.hero.is-syncing .order-status-message {

    border-color: rgba(255,255,255,.55);

    background: rgba(68,75,85,.72);

    box-shadow: 0 4px 12px rgba(31,41,55,.2);

}

.hero.is-closed {

    background: #444b55;

}

.floating-cart:hover {

    transform:translateY(-2px);

    box-shadow:
        0 22px 44px rgba(255, 107, 0, .26),
        var(--shadow-lg);

}

/* ==========================================
   CART DRAWER
========================================== */

.cart-drawer {

    position: fixed;

    top: 0;

    right: -100%;

    width: var(--cart-width);

    max-width: 100%;

    height: 100vh;

    background: white;

    display: flex;

    flex-direction: column;

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

    transition: right .35s ease;

    z-index: var(--z-cart);

}

.cart-drawer.open {

    right: 0;

}

.drawer-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: var(--space-20);

    border-bottom: var(--border);

}

/* ==========================================
   Cart Drawer Layout
========================================== */

.cart-drawer{

    display:flex;

    flex-direction:column;

}

#checkoutContainer{

    flex:1;

    display:flex;

    flex-direction:column;

    min-height:0;

    overflow:hidden;

}

#cartView{

    flex:1;

    display:flex;

    flex-direction:column;

    min-height:0;

    overflow:hidden;

}

#cartView.hidden{

    display:none !important;

}

.cart-items{

    flex:1;

    min-height:0;

    overflow-y:auto;

    overflow-x:hidden;

    padding:var(--space-20);

}

.cart-summary{

    flex-shrink:0;

    background:#fff;

    padding:var(--space-20);

    border-top:var(--border);

}

.cart-summary > div {

    display: flex;

    justify-content: space-between;

    margin-bottom: var(--space-12);

}

.grand-total {

    font-weight: var(--font-weight-bold);

    font-size: var(--font-size-lg);

}



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

.modal {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    background: var(--overlay);

    z-index: var(--z-modal);

    padding: var(--space-24);

}

.modal.open {

    display: flex;

}

.modal-content {

    width: 100%;

    max-width: var(--modal-width);

    max-height: 90vh;

    overflow-y: auto;

    background: white;

    border-radius: var(--radius-lg);

    padding: var(--space-32);

    position: relative;

}

.success-box {

    background: white;

    width: 100%;

    max-width: 480px;

    text-align: center;

    border-radius: var(--radius-lg);

    padding: var(--space-40);

}

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

footer {

    margin-top: auto;

    padding: var(--space-24);

    text-align: center;

    color: var(--color-text-light);

}

.footer-content {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;

    margin: 0;

    font-size: 13px;

}

.footer-content a {

    color: var(--color-text);

    font-weight: 500;

    text-decoration: none;

}

.footer-content a:hover,
.footer-content a:focus-visible {

    color: var(--color-primary);

    text-decoration: underline;
    text-underline-offset: 3px;

}

.footer-separator {

    color: var(--color-primary);

}

.cart-summary > .hidden {

    display: none !important;

}