/* ================================================================
   COFFEE ORDERING PAGE
   PREMIUM DARK COFFEE THEME
   PART 1 / 3

   Palette:
   Espresso       #160d09
   Dark Roast     #21130d
   Coffee         #3a2116
   Mocha          #5a3423
   Caramel        #b8783e
   Golden Coffee  #d6a15b
   Cream          #f5ead8
   Milk           #ead8bd
   Soft Brown     #bda58c
   ================================================================ */


/* ================================================================
   01. ROOT VARIABLES
   ================================================================ */

:root {

    --coffee-black: #0d0806;
    --espresso: #160d09;
    --dark-roast: #21130d;
    --roasted-coffee: #2b180f;

    --coffee-brown: #3a2116;
    --mocha: #5a3423;
    --cocoa: #6d4029;

    --caramel: #b8783e;
    --caramel-light: #d49a5c;
    --gold-coffee: #d6a15b;

    --cream: #f5ead8;
    --milk: #ead8bd;
    --latte: #d8c0a0;

    --muted-cream: #bda58c;
    --muted-brown: #8e725c;

    --danger: #c75b45;
    --success: #7fa66c;

    --white: #ffffff;

    --border-dark: rgba(255, 255, 255, 0.07);
    --border-coffee: rgba(214, 161, 91, 0.18);
    --border-light: rgba(245, 234, 216, 0.13);

    --glass-dark: rgba(27, 15, 10, 0.78);
    --glass-coffee: rgba(52, 29, 19, 0.72);

    --shadow-small:
        0 8px 25px rgba(0, 0, 0, 0.25);

    --shadow-medium:
        0 18px 50px rgba(0, 0, 0, 0.38);

    --shadow-large:
        0 30px 90px rgba(0, 0, 0, 0.55);

    --glow-coffee:
        0 0 35px rgba(184, 120, 62, 0.16);

    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 28px;
    --radius-pill: 999px;

    --transition-fast:
        180ms cubic-bezier(.2,.8,.2,1);

    --transition:
        300ms cubic-bezier(.2,.8,.2,1);

    --transition-slow:
        600ms cubic-bezier(.16,1,.3,1);

}


/* ================================================================
   02. GLOBAL RESET
   ================================================================ */


body {
  
    min-height: 100vh;

    background-image: url("https://karibubensmaker.com/public/assets/images/home/delicious-coffee.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    /* Keep page content above the background */
    position: relative;
}


/* Optional dark overlay over the background */
body::before {
    content: "";
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.35);

    z-index: -1;
    pointer-events: none;
}

/* Keep the actual page content visible */
body > * {
    position: relative;
    z-index: 1;
}



.order-page,
.order-page *,
.menu-modal,
.menu-modal *,
.cart-drawer,
.cart-drawer * {
    box-sizing: border-box;
}


.order-page button,
.menu-modal button,
.cart-drawer button,
.order-page input,
.order-page textarea {
    font: inherit;
}


.order-page button,
.menu-modal button,
.cart-drawer button {
    -webkit-tap-highlight-color: transparent;
}


/* ================================================================
   03. MAIN PAGE
   ================================================================ */

.order-page {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;

      margin-top: 40px;

    color: var(--cream);

    background:

        url("https://karibubensmaker.com/public/assets/images/home/delicious-coffee.webp")
        center / cover no-repeat fixed;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}



/* ================================================================
   04. COFFEE ATMOSPHERE
   ================================================================ */

.order-page::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .55;

    background-image:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.035) 0 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 70% 70%,
            rgba(255,255,255,.025) 0 1px,
            transparent 1px
        );

    background-size:
        45px 45px,
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

}


.order-page::after {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -300px;
    top: 250px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(184, 120, 62, 0.10),
            transparent 68%
        );

    filter: blur(20px);

    animation: coffeeGlow 9s ease-in-out infinite alternate;

}


@keyframes coffeeGlow {

    from {
        transform: translate3d(0, 0, 0) scale(.95);
        opacity: .55;
    }

    to {
        transform: translate3d(-50px, 30px, 0) scale(1.08);
        opacity: 1;
    }

}


/* ================================================================
   05. CONTENT LAYER
   ================================================================ */

.order-page > * {

    position: relative;

    z-index: 2;

}


/* ================================================================
   06. HEADER CART BUTTON
   ================================================================ */

.header-cart-button {

    position: fixed;

    z-index: 100;
    
    margin-top: 800px;

    top: 10px;
    right: 24px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px 12px 19px;

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

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

    color: var(--cream);

    background:
        linear-gradient(
            135deg,
            rgba(63, 35, 22, .94),
            rgba(27, 14, 9, .96)
        );

    box-shadow:
        0 10px 35px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.06);

    backdrop-filter: blur(18px);

    cursor: pointer;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


.header-cart-button:hover {

    transform: translateY(-3px);

    border-color:
        rgba(214, 161, 91, .55);

    box-shadow:
        0 16px 45px rgba(0,0,0,.45),
        0 0 30px rgba(184,120,62,.13);

}


.header-cart-button:active {

    transform: translateY(-1px) scale(.98);

}


.header-cart-count {

    min-width: 28px;
    height: 28px;

    display: inline-flex;

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

    padding: 0 7px;

    border-radius: 50%;

    color: var(--coffee-black);

    background:
        linear-gradient(
            135deg,
            var(--gold-coffee),
            var(--caramel-light)
        );

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

    box-shadow:
        0 4px 15px rgba(214,161,91,.22);

}


/* ================================================================
   07. ALERTS
   ================================================================ */

.order-alert {

    max-width: 1100px;

    margin:
        0 auto
        28px;

    padding: 17px 20px;

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

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

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

    background:
        rgba(33, 19, 13, .80);

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

    backdrop-filter: blur(15px);

    animation:
        alertIn .6s var(--transition-slow) both;

}


.order-alert-danger {

    border-color:
        rgba(199, 91, 69, .35);

    background:
        linear-gradient(
            135deg,
            rgba(91, 37, 27, .55),
            rgba(31, 15, 10, .82)
        );

}


.order-alert-success {

    border-color:
        rgba(127, 166, 108, .32);

    background:
        linear-gradient(
            135deg,
            rgba(51, 77, 43, .42),
            rgba(24, 20, 12, .82)
        );

}


.order-alert strong {

    color: var(--cream);

}


.order-alert span {

    color: var(--muted-cream);

}


@keyframes alertIn {

    from {
        opacity: 0;
        transform: translateY(-18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ================================================================
   08. SECTION LAYOUT
   ================================================================ */

.order-type-section,
.reservation-section,
.menu-section,
.customer-section {

    width: min(1180px, 100%);

    margin-left: auto;
    margin-right: auto;

}


.order-type-section {

    margin-top: 25px;

}


.reservation-section,
.menu-section,
.customer-section {

    margin-top: 90px;

}


/* ================================================================
   09. SECTION HEADINGS
   ================================================================ */

.section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 30px;

}


.section-kicker {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    min-width: 38px;
    height: 25px;

    padding: 0 10px;

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

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

    color: var(--gold-coffee);

    background:
        rgba(184, 120, 62, .08);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .18em;

}


.section-heading h2 {

    margin: 0;

    max-width: 700px;

    color: var(--cream);

    font-size:
        clamp(27px, 4vw, 46px);

    line-height: 1.05;

    font-weight: 750;

    letter-spacing: -.035em;

}


.section-heading h2::first-letter {

    color: var(--gold-coffee);

}


.section-heading p {

    max-width: 620px;

    margin: 13px 0 0;

    color: var(--muted-cream);

    font-size: 15px;

    line-height: 1.7;

}


/* ================================================================
   10. ORDER TYPE SELECTOR
   ================================================================ */

.order-type-selector {

    display: grid;

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

    gap: 18px;

}


/* ================================================================
   11. ORDER TYPE CARD
   ================================================================ */

.order-type-card {

    position: relative;

    min-height: 165px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    padding: 27px;

    overflow: hidden;

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

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

    color: var(--cream);

    text-align: left;

    background:
        linear-gradient(
            145deg,
            rgba(54, 30, 19, .80),
            rgba(20, 11, 7, .94)
        );

    box-shadow:
        0 12px 40px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.035);

    backdrop-filter: blur(16px);

    cursor: pointer;

    isolation: isolate;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);

}


.order-type-card::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    bottom: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184,120,62,.18),
            transparent 68%
        );

    filter: blur(5px);

    transition:
        transform var(--transition-slow),
        opacity var(--transition);

    z-index: -1;

}


.order-type-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(214,161,91,.30);

    box-shadow:
        0 24px 60px rgba(0,0,0,.42),
        0 0 35px rgba(184,120,62,.09);

}


.order-type-card:hover::before {

    transform: scale(1.45);

}


.order-type-card.active {

    border-color:
        rgba(214,161,91,.65);

    background:
        linear-gradient(
            145deg,
            rgba(83, 47, 29, .92),
            rgba(28, 15, 9, .98)
        );

    box-shadow:
        0 25px 65px rgba(0,0,0,.42),
        0 0 40px rgba(184,120,62,.14),
        inset 0 1px 0 rgba(255,255,255,.07);

}


.order-type-card.active::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,255,255,.045) 45%,
            transparent 65%
        );

    animation:
        cardShine 4s ease-in-out infinite;

}


@keyframes cardShine {

    0% {
        transform: translateX(-120%);
    }

    45%,
    100% {
        transform: translateX(120%);
    }

}


/* ================================================================
   12. ORDER TYPE ICON
   ================================================================ */

.order-type-icon {

    width: 54px;
    height: 54px;

    display: flex;

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

    margin-bottom: 23px;

    border-radius: 17px;

    border: 1px solid
        rgba(214,161,91,.20);

    background:
        linear-gradient(
            135deg,
            rgba(184,120,62,.18),
            rgba(54,30,19,.55)
        );

    font-size: 23px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06);

    transition:
        transform var(--transition),
        background var(--transition);

}


.order-type-card:hover .order-type-icon {

    transform:
        translateY(-3px)
        rotate(-3deg);

    background:
        linear-gradient(
            135deg,
            rgba(214,161,91,.24),
            rgba(54,30,19,.65)
        );

}


/* ================================================================
   13. ORDER TYPE CONTENT
   ================================================================ */

.order-type-content {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.order-type-content strong {

    color: var(--cream);

    font-size: 18px;

    font-weight: 700;

}


.order-type-content small {

    max-width: 250px;

    color: var(--muted-cream);

    font-size: 13px;

    line-height: 1.55;

}


/* ================================================================
   14. ORDER TYPE CHECK
   ================================================================ */

.order-type-check {

    position: absolute;

    top: 22px;
    right: 22px;

    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 50%;

    color: transparent;

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

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

    font-size: 13px;

    transform: scale(.8);

    opacity: .55;

    transition:
        transform var(--transition),
        opacity var(--transition),
        color var(--transition),
        background var(--transition);

}


.order-type-card.active .order-type-check {

    color: var(--coffee-black);

    background:
        linear-gradient(
            135deg,
            var(--gold-coffee),
            var(--caramel-light)
        );

    border-color: transparent;

    opacity: 1;

    transform: scale(1);

    box-shadow:
        0 5px 18px rgba(214,161,91,.25);

}


/* ================================================================
   15. FOCUS ACCESSIBILITY
   ================================================================ */

button:focus-visible,
input:focus-visible,
textarea:focus-visible {

    outline: 2px solid var(--gold-coffee);

    outline-offset: 4px;

}


/* ================================================================
   16. SELECTION
   ================================================================ */

::selection {

    color: var(--coffee-black);

    background:
        var(--gold-coffee);

}


/* ================================================================
   17. RESPONSIVE — TABLET
   ================================================================ */

@media (max-width: 900px) {

    .order-page {

        padding:
            25px
            22px
            80px;

    }


    .order-type-selector {

        grid-template-columns:
            1fr;

    }


    .order-type-card {

        min-height: 135px;
        display: grid;

    }


    .order-type-icon {

        margin-bottom: 17px;

    }


    .reservation-section,
    .menu-section,
    .customer-section {

        margin-top: 70px;

    }

}


/* ================================================================
   18. RESPONSIVE — MOBILE
   ================================================================ */

@media (max-width: 600px) {

    .order-page {

        padding:
            22px
            14px
            60px;

    }


    .header-cart-button {

        top: 13px;
        right: 13px;

        padding:
            9px
            10px
            9px
            14px;

    }


    .section-heading {

        margin-bottom: 22px;

    }


    .section-heading h2 {

        font-size: 30px;

    }


    .section-heading p {

        font-size: 13px;

        line-height: 1.6;

    }


    .order-type-card {
    min-height: 100px;
    width: 30%;
    padding: 18px 20px;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;

    border-radius: 0;
}



    .order-type-icon {

        width: 47px;
        height: 47px;

        margin-bottom: 15px;

        border-radius: 14px;

    }


    .order-type-content strong {

        font-size: 16px;

    }


    .order-type-content small {

        font-size: 12px;

    }


    .reservation-section,
    .menu-section,
    .customer-section {

        margin-top: 60px;

    }

}


/* ================================================================
   19. REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

    }

}








/* ================================================================
   COFFEE ORDERING PAGE
   PREMIUM DARK COFFEE THEME
   PART 2 / 3

   Reservation
   Form fields
   Menu categories
   Image cards
   Hover animations
   ================================================================ */


/* ================================================================
   20. RESERVATION CARD
   ================================================================ */

.reservation-card {

    position: relative;

    overflow: hidden;

    padding: clamp(22px, 4vw, 38px);

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

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

    background:
        linear-gradient(
            145deg,
            rgba(59, 33, 21, .78),
            rgba(21, 11, 7, .91)
        );

    box-shadow:
        var(--shadow-medium),
        inset 0 1px 0 rgba(255,255,255,.045);

    backdrop-filter: blur(18px);

}


/*
   Decorative coffee glow
*/

.reservation-card::before {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -210px;
    right: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(214,161,91,.14),
            transparent 68%
        );

    pointer-events: none;

}


.reservation-card::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214,161,91,.35),
            transparent
        );

}


/* ================================================================
   21. RESERVATION GRID
   ================================================================ */

.reservation-grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 20px;

}


/* ================================================================
   22. FORM FIELD
   ================================================================ */

.form-field {

    min-width: 0;

}


.form-field label {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 9px;

    color: var(--cream);

    font-size: 13px;

    font-weight: 650;

    letter-spacing: .01em;

}


.form-field label span {

    color: var(--muted-brown);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;

}


/* ================================================================
   23. INPUTS
   ================================================================ */

.form-field input,
.form-field textarea {

    width: 100%;

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

    border-radius: 14px;

    outline: none;

    color: var(--cream);

    background:
        linear-gradient(
            135deg,
            rgba(18,10,7,.82),
            rgba(43,24,15,.62)
        );

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.30);

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition),
        transform var(--transition);

}


.form-field input {

    height: 52px;

    padding:
        0 15px;

}


.form-field textarea {

    min-height: 110px;

    padding: 14px 15px;

    resize: vertical;

    line-height: 1.55;

}


/* ================================================================
   24. INPUT PLACEHOLDER
   ================================================================ */

.form-field input::placeholder,
.form-field textarea::placeholder {

    color:
        rgba(189,165,140,.42);

}


/* ================================================================
   25. INPUT HOVER
   ================================================================ */

.form-field input:hover,
.form-field textarea:hover {

    border-color:
        rgba(214,161,91,.22);

    background:
        linear-gradient(
            135deg,
            rgba(26,14,9,.88),
            rgba(52,29,19,.68)
        );

}


/* ================================================================
   26. INPUT FOCUS
   ================================================================ */

.form-field input:focus,
.form-field textarea:focus {

    border-color:
        rgba(214,161,91,.70);

    background:
        linear-gradient(
            135deg,
            rgba(29,15,9,.94),
            rgba(58,32,20,.75)
        );

    box-shadow:
        0 0 0 4px rgba(184,120,62,.09),
        0 8px 25px rgba(0,0,0,.20);

    transform:
        translateY(-1px);

}


/* ================================================================
   27. DATE / TIME INPUT ICONS
   ================================================================ */

.form-field input[type="date"],
.form-field input[type="time"] {

    color-scheme: dark;

}


.form-field input[type="date"]::-webkit-calendar-picker-indicator,
.form-field input[type="time"]::-webkit-calendar-picker-indicator {

    cursor: pointer;

    filter:
        sepia(1)
        saturate(2)
        brightness(1.2);

    opacity: .75;

    transition:
        transform var(--transition),
        opacity var(--transition);

}


.form-field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-field input[type="time"]::-webkit-calendar-picker-indicator:hover {

    opacity: 1;

    transform: scale(1.12);

}


/* ================================================================
   28. NUMBER INPUT
   ================================================================ */

.form-field input[type="number"] {

    color-scheme: dark;

}


.form-field input[type="number"]::-webkit-inner-spin-button,
.form-field input[type="number"]::-webkit-outer-spin-button {

    opacity: .65;

    filter:
        sepia(1)
        saturate(1.4);

}


/* ================================================================
   29. MENU SECTION
   ================================================================ */

.menu-section {

    position: relative;

}


/* ================================================================
   30. MENU RESULT COUNT
   ================================================================ */

.menu-result-count {

    flex-shrink: 0;

    padding:
        9px
        14px;

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

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

    color:
        var(--muted-cream);

    background:
        rgba(184,120,62,.07);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03);

}


/* ================================================================
   31. CATEGORY GRID
   ================================================================ */

.category-grid {

    display: grid;

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

    gap: 20px;

}


/* ================================================================
   32. CATEGORY CARD
   ================================================================ */

.category-card {

    position: relative;

    min-height: 245px;

    overflow: hidden;

    padding: 0;

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

    border-radius: 25px;

    color: var(--cream);

    background:
        var(--dark-roast);

    cursor: pointer;

    text-align: left;

    box-shadow:
        0 12px 38px rgba(0,0,0,.30);

    isolation: isolate;

    transform:
        translateZ(0);

    transition:
        transform var(--transition-slow),
        border-color var(--transition),
        box-shadow var(--transition);

}


/* ================================================================
   33. CATEGORY CARD HOVER
   ================================================================ */

.category-card:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(214,161,91,.38);

    box-shadow:
        0 28px 65px rgba(0,0,0,.48),
        0 0 35px rgba(184,120,62,.10);

}


.category-card:active {

    transform:
        translateY(-4px)
        scale(.985);

}


/* ================================================================
   34. CATEGORY IMAGE
   ================================================================ */

.category-card-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: -3;

    filter:
        saturate(.82)
        contrast(1.08)
        brightness(.68);

    transform:
        scale(1.02);

    transition:
        transform 900ms cubic-bezier(.16,1,.3,1),
        filter 600ms ease;

}


.category-card:hover
.category-card-image {

    transform:
        scale(1.12);

    filter:
        saturate(1.02)
        contrast(1.08)
        brightness(.78);

}


/* ================================================================
   35. CATEGORY IMAGE PLACEHOLDER
   ================================================================ */

.category-card-placeholder {

    position: absolute;

    inset: 0;

    z-index: -3;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(214,161,91,.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #3a2116,
            #160d09
        );

}


.category-card-placeholder::before {

    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    border:
        1px solid
        rgba(214,161,91,.15);

    box-shadow:
        0 0 0 25px rgba(214,161,91,.025),
        0 0 0 50px rgba(214,161,91,.015);

}


.category-card-placeholder span {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    color: var(--gold-coffee);

    background:
        rgba(13,8,6,.62);

    border:
        1px solid
        rgba(214,161,91,.25);

    box-shadow:
        0 10px 35px rgba(0,0,0,.35);

    font-size: 28px;

    font-weight: 700;

}


/* ================================================================
   36. CATEGORY DARK OVERLAY
   ================================================================ */

.category-card-overlay {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(13,8,6,.08) 0%,
            rgba(13,8,6,.15) 28%,
            rgba(13,8,6,.60) 65%,
            rgba(10,6,4,.96) 100%
        );

    transition:
        background var(--transition);

}


.category-card:hover
.category-card-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(13,8,6,.04),
            rgba(13,8,6,.16) 30%,
            rgba(13,8,6,.52) 62%,
            rgba(10,6,4,.93)
        );

}


/* ================================================================
   37. CATEGORY CARD CONTENT
   ================================================================ */

.category-card-content {

    position: absolute;

    left: 23px;
    right: 23px;
    bottom: 21px;

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.category-card-name {

    color: var(--cream);

    font-size: 21px;

    font-weight: 750;

    letter-spacing: -.025em;

    text-shadow:
        0 3px 15px rgba(0,0,0,.60);

    transition:
        color var(--transition),
        transform var(--transition);

}


.category-card:hover
.category-card-name {

    color:
        #ffe8c7;

    transform:
        translateX(3px);

}


.category-card-meta {

    color:
        rgba(245,234,216,.66);

    font-size: 11px;

    font-weight: 650;

    letter-spacing: .08em;

    text-transform: uppercase;

}


/* ================================================================
   38. CATEGORY ARROW
   ================================================================ */

.category-card-arrow {

    position: absolute;

    right: 20px;
    bottom: 20px;

    width: 39px;
    height: 39px;

    display: flex;

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

    border-radius: 50%;

    color:
        var(--gold-coffee);

    border:
        1px solid
        rgba(214,161,91,.25);

    background:
        rgba(13,8,6,.48);

    backdrop-filter:
        blur(8px);

    font-size: 18px;

    transition:
        transform var(--transition),
        color var(--transition),
        background var(--transition),
        border-color var(--transition);

}


.category-card:hover
.category-card-arrow {

    color:
        var(--coffee-black);

    background:
        linear-gradient(
            135deg,
            var(--gold-coffee),
            var(--caramel-light)
        );

    border-color:
        transparent;

    transform:
        translateX(4px)
        rotate(-5deg);

}


/* ================================================================
   39. CATEGORY CARD LIGHT SWEEP
   ================================================================ */

.category-card::after {

    content: "";

    position: absolute;

    top: -100%;
    left: -65%;

    width: 45%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );

    transform:
        rotate(22deg)
        translateX(-150%);

    pointer-events: none;

    transition:
        transform 900ms cubic-bezier(.16,1,.3,1);

}


.category-card:hover::after {

    transform:
        rotate(22deg)
        translateX(480%);

}


/* ================================================================
   40. CATEGORY CARD ENTRANCE ANIMATION
   ================================================================ */

.category-card {

    animation:
        categoryAppear .7s cubic-bezier(.16,1,.3,1) both;

}


.category-card:nth-child(1) {
    animation-delay: 60ms;
}

.category-card:nth-child(2) {
    animation-delay: 110ms;
}

.category-card:nth-child(3) {
    animation-delay: 160ms;
}

.category-card:nth-child(4) {
    animation-delay: 210ms;
}

.category-card:nth-child(5) {
    animation-delay: 260ms;
}

.category-card:nth-child(6) {
    animation-delay: 310ms;
}

.category-card:nth-child(7) {
    animation-delay: 360ms;
}

.category-card:nth-child(8) {
    animation-delay: 410ms;
}

.category-card:nth-child(9) {
    animation-delay: 460ms;
}


@keyframes categoryAppear {

    from {

        opacity: 0;

        transform:
            translateY(25px)
            scale(.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ================================================================
   41. CUSTOMER SECTION CARD
   ================================================================ */

.customer-section {

    position: relative;

}


.customer-card {

    position: relative;

    overflow: hidden;

    padding:
        clamp(22px, 4vw, 40px);

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

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

    background:
        linear-gradient(
            145deg,
            rgba(55,30,19,.76),
            rgba(18,10,6,.94)
        );

    box-shadow:
        var(--shadow-large),
        inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter:
        blur(18px);

}


.customer-card::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -300px;
    left: -230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184,120,62,.11),
            transparent 68%
        );

    pointer-events: none;

}


.customer-card::after {

    content: "";

    position: absolute;

    left: 10%;
    right: 10%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214,161,91,.28),
            transparent
        );

}


/* ================================================================
   42. CUSTOMER FORM GRID
   ================================================================ */

.form-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        22px 20px;

}


.form-field-full {

    grid-column:
        1 / -1;

}


/* ================================================================
   43. CUSTOMER FIELD SPACING
   ================================================================ */

.customer-card .form-field input,
.customer-card .form-field textarea {

    font-size: 14px;

}


/* ================================================================
   44. DELIVERY ADDRESS
   ================================================================ */

#deliveryAddressField {

    animation:
        deliveryFieldIn .4s cubic-bezier(.16,1,.3,1);

}


@keyframes deliveryFieldIn {

    from {

        opacity: 0;

        transform:
            translateY(-10px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ================================================================
   45. CHECKOUT AREA
   ================================================================ */

.checkout-submit {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 32px;

    padding-top: 27px;

    border-top:
        1px solid
        rgba(255,255,255,.07);

}


/* ================================================================
   46. CHECKOUT SUMMARY
   ================================================================ */

.checkout-summary {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.checkout-summary span {

    color:
        var(--muted-cream);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

}


.checkout-summary strong {

    color:
        var(--gold-coffee);

    font-size:
        clamp(25px, 4vw, 34px);

    font-weight: 800;

    letter-spacing: -.035em;

}


/* ================================================================
   47. BASIC BUTTON POLISH
   ================================================================ */

.order-page button {

    -webkit-appearance: none;

    appearance: none;

}


.order-page button:disabled {

    cursor: not-allowed;

    opacity: .55;

}


/* ================================================================
   48. TABLET MENU
   ================================================================ */

@media (max-width: 1000px) {

    .reservation-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .category-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* ================================================================
   49. MOBILE MENU
   ================================================================ */

@media (max-width: 650px) {

    .reservation-grid {

        grid-template-columns:
            1fr;

    }

    .order-type-selector {

    display: grid;

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

    gap: 5px;

    .order-type-card {
    min-height: 100px;
    width: 100%;
    padding: 18px 20px;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;

    border-radius: 0;
}

}


    .category-grid {

        grid-template-columns:
            1fr;

        gap: 15px;

    }


    .category-card {

        min-height: 220px;

        border-radius: 21px;

    }


    .category-card-content {

        left: 19px;
        right: 19px;
        bottom: 18px;

    }


    .category-card-name {

        font-size: 19px;

    }


    .category-card-arrow {

        right: 17px;
        bottom: 17px;

    }


    .form-grid {

        grid-template-columns:
            1fr;

    }


    .form-field-full {

        grid-column:
            auto;

    }


    .checkout-submit {

        flex-direction: column;

        align-items: stretch;

    }


    .checkout-summary {

        align-items: flex-start;

    }

}


/* ================================================================
   50. VERY SMALL PHONES
   ================================================================ */

@media (max-width: 380px) {

    .order-page {

        padding-left: 11px;
        padding-right: 11px;

    }


    .reservation-card,
    .customer-card {

        padding: 18px;

        border-radius: 20px;

    }


    .section-heading h2 {

        font-size: 27px;

    }


    .order-type-card {
    min-height: 100px;
    width: 100%;
    padding: 18px 20px;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;

    border-radius: 0;
}


}













/* ================================================================
   COFFEE ORDERING PAGE
   PREMIUM DARK COFFEE THEME
   PART 3 / 3

   Menu Modal
   Food Items
   Cart Drawer
   Quantity Controls
   Buttons
   Scrollbars
   Animations
   Final Polish
   ================================================================ */


/* ================================================================
   51. MENU MODAL
   ================================================================ */

.menu-modal {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

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

    padding: 20px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 300ms ease,
        visibility 300ms ease;

}


.menu-modal[aria-hidden="false"] {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}


/* ================================================================
   52. MODAL BACKDROP
   ================================================================ */

.menu-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(80,45,26,.14),
            transparent 35%
        ),
        rgba(5,3,2,.82);

    backdrop-filter:
        blur(12px);

}


/* ================================================================
   53. MODAL PANEL
   ================================================================ */

.menu-modal-panel {

    position: relative;

    z-index: 2;

    width:
        min(920px, 100%);

    max-height:
        min(850px, 90vh);

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(214,161,91,.22);

    border-radius:
        30px;

    background:
        linear-gradient(
            145deg,
            rgba(52,29,18,.98),
            rgba(15,8,5,.99)
        );

    box-shadow:
        0 40px 120px rgba(0,0,0,.72),
        0 0 60px rgba(184,120,62,.10),
        inset 0 1px 0 rgba(255,255,255,.05);

    transform:
        translateY(30px)
        scale(.96);

    transition:
        transform 450ms cubic-bezier(.16,1,.3,1);

}


.menu-modal[aria-hidden="false"]
.menu-modal-panel {

    transform:
        translateY(0)
        scale(1);

}


/* ================================================================
   54. MODAL HEADER
   ================================================================ */

.menu-modal-header {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        25px 28px;

    border-bottom:
        1px solid
        rgba(255,255,255,.065);

    background:
        linear-gradient(
            180deg,
            rgba(70,39,24,.36),
            transparent
        );

}


.modal-kicker {

    display: block;

    margin-bottom: 6px;

    color:
        var(--gold-coffee);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .20em;

    text-transform: uppercase;

}


.menu-modal-header h2 {

    margin: 0;

    color:
        var(--cream);

    font-size:
        clamp(25px, 4vw, 34px);

    line-height: 1;

    letter-spacing:
        -.035em;

}


/* ================================================================
   55. CLOSE BUTTON
   ================================================================ */

.menu-modal-close,
.cart-close {

    flex-shrink: 0;

    width: 44px;
    height: 44px;

    display: flex;

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

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

    border-radius: 50%;

    color:
        var(--latte);

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

    cursor: pointer;

    font-size: 27px;

    line-height: 1;

    transition:
        transform var(--transition),
        color var(--transition),
        background var(--transition),
        border-color var(--transition);

}


.menu-modal-close:hover,
.cart-close:hover {

    color:
        var(--coffee-black);

    background:
        var(--gold-coffee);

    border-color:
        var(--gold-coffee);

    transform:
        rotate(90deg);

}


/* ================================================================
   56. MODAL BODY
   ================================================================ */

.menu-modal-body {

    overflow-y: auto;

    padding:
        25px;

    overscroll-behavior:
        contain;

}


/* ================================================================
   57. MENU ITEMS GRID
   ================================================================ */

.menu-items,
#modalMenuItems {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

}


/* ================================================================
   58. FOOD ITEM CARD
   ================================================================ */

.menu-item {

    position: relative;

    display: flex;

    gap: 15px;

    min-width: 0;

    padding: 14px;

    overflow: hidden;

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

    border-radius:
        19px;

    background:
        linear-gradient(
            145deg,
            rgba(61,34,21,.68),
            rgba(23,12,8,.82)
        );

    box-shadow:
        0 10px 30px rgba(0,0,0,.20);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


.menu-item:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(214,161,91,.30);

    box-shadow:
        0 17px 40px rgba(0,0,0,.34),
        0 0 25px rgba(184,120,62,.07);

}


/* ================================================================
   59. FOOD IMAGE
   ================================================================ */

.menu-item-image,
.menu-item img {

    flex-shrink: 0;

    width: 92px;
    height: 92px;

    object-fit: cover;

    border-radius:
        15px;

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

    background:
        linear-gradient(
            135deg,
            var(--mocha),
            var(--espresso)
        );

    filter:
        saturate(.9)
        brightness(.88);

    transition:
        transform 500ms cubic-bezier(.16,1,.3,1),
        filter var(--transition);

}


.menu-item:hover .menu-item-image,
.menu-item:hover img {

    transform:
        scale(1.06);

    filter:
        saturate(1)
        brightness(1);

}


/* ================================================================
   60. FOOD ITEM CONTENT
   ================================================================ */

.menu-item-content {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 7px;

}


.menu-item-name {

    overflow: hidden;

    color:
        var(--cream);

    font-size: 16px;

    font-weight: 750;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.menu-item-description {

    display: -webkit-box;

    overflow: hidden;

    color:
        var(--muted-cream);

    font-size: 12px;

    line-height: 1.5;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}


.menu-item-price {

    color:
        var(--gold-coffee);

    font-size: 15px;

    font-weight: 800;

}


/* ================================================================
   61. ADD BUTTON
   ================================================================ */

.add-to-cart,
.menu-item-add,
.add-item-button {

    flex-shrink: 0;

    align-self: center;

    min-width: 42px;
    height: 42px;

    display: inline-flex;

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

    padding:
        0 13px;

    border:
        1px solid
        rgba(214,161,91,.30);

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

    color:
        var(--gold-coffee);

    background:
        rgba(184,120,62,.08);

    cursor: pointer;

    font-size: 20px;

    font-weight: 700;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition);

}


.add-to-cart:hover,
.menu-item-add:hover,
.add-item-button:hover {

    color:
        var(--coffee-black);

    background:
        linear-gradient(
            135deg,
            var(--gold-coffee),
            var(--caramel-light)
        );

    transform:
        scale(1.08);

    box-shadow:
        0 7px 22px rgba(214,161,91,.20);

}


.add-to-cart:active,
.menu-item-add:active,
.add-item-button:active {

    transform:
        scale(.94);

}


/* ================================================================
   62. CART DRAWER
   ================================================================ */

.cart-drawer {

    position: fixed;

    inset: 0;

    z-index: 1200;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 300ms ease,
        visibility 300ms ease;

}


.cart-drawer[aria-hidden="false"] {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}


/* ================================================================
   63. CART BACKDROP
   ================================================================ */

.cart-drawer-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(5,3,2,.70);

    backdrop-filter:
        blur(8px);

}


/* ================================================================
   64. CART PANEL
   ================================================================ */

.cart-panel {

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width:
        min(470px, 94vw);

    display: flex;

    flex-direction: column;

    background:
        linear-gradient(
            160deg,
            #382016 0%,
            #1d100a 48%,
            #0f0805 100%
        );

    border-left:
        1px solid
        rgba(214,161,91,.20);

    box-shadow:
        -25px 0 90px rgba(0,0,0,.60);

    transform:
        translateX(105%);

    transition:
        transform 500ms cubic-bezier(.16,1,.3,1);

}


.cart-drawer[aria-hidden="false"]
.cart-panel {

    transform:
        translateX(0);

}


/* ================================================================
   65. CART HEADER
   ================================================================ */

.cart-header {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        27px 25px;

    border-bottom:
        1px solid
        rgba(255,255,255,.065);

    background:
        linear-gradient(
            180deg,
            rgba(82,45,27,.30),
            transparent
        );

}


.cart-header h2 {

    margin: 0;

    color:
        var(--cream);

    font-size: 28px;

    line-height: 1;

    letter-spacing:
        -.035em;

}


/* ================================================================
   66. CART ITEMS AREA
   ================================================================ */

.cart-items {

    flex: 1;

    overflow-y: auto;

    padding:
        18px 20px;

}


/* ================================================================
   67. CART ITEM
   ================================================================ */

.cart-item {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 13px;

    padding:
        17px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);

    animation:
        cartItemIn .35s cubic-bezier(.16,1,.3,1) both;

}


@keyframes cartItemIn {

    from {

        opacity: 0;

        transform:
            translateX(18px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* ================================================================
   68. CART ITEM TEXT
   ================================================================ */

.cart-item-name {

    color:
        var(--cream);

    font-size: 15px;

    font-weight: 700;

}


.cart-item-price {

    margin-top: 4px;

    color:
        var(--gold-coffee);

    font-size: 13px;

    font-weight: 700;

}


.cart-item-total {

    color:
        var(--cream);

    font-size: 15px;

    font-weight: 800;

}


/* ================================================================
   69. CART QUANTITY CONTROLS
   ================================================================ */

.cart-item-quantity,
.quantity-controls {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 10px;

}


.cart-item-quantity button,
.quantity-controls button {

    width: 31px;
    height: 31px;

    display: inline-flex;

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

    border:
        1px solid
        rgba(214,161,91,.22);

    border-radius: 50%;

    color:
        var(--latte);

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

    cursor: pointer;

    transition:
        transform var(--transition),
        color var(--transition),
        background var(--transition),
        border-color var(--transition);

}


.cart-item-quantity button:hover,
.quantity-controls button:hover {

    color:
        var(--coffee-black);

    background:
        var(--gold-coffee);

    border-color:
        var(--gold-coffee);

    transform:
        scale(1.08);

}


.cart-item-quantity span,
.quantity-controls span {

    min-width: 22px;

    color:
        var(--cream);

    text-align: center;

    font-size: 13px;

    font-weight: 750;

}


/* ================================================================
   70. REMOVE ITEM
   ================================================================ */

.cart-item-remove {

    border: 0;

    color:
        rgba(189,165,140,.55);

    background:
        transparent;

    cursor: pointer;

    font-size: 11px;

    transition:
        color var(--transition);

}


.cart-item-remove:hover {

    color:
        #d9785e;

}


/* ================================================================
   71. EMPTY CART
   ================================================================ */

.cart-empty {

    min-height: 300px;

    display: flex;

    flex-direction: column;

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

    padding: 35px;

    text-align: center;

    color:
        var(--muted-cream);

}


.cart-empty::before {

    content: "☕";

    width: 75px;
    height: 75px;

    display: flex;

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

    margin-bottom: 20px;

    border-radius: 50%;

    border:
        1px solid
        rgba(214,161,91,.18);

    background:
        rgba(184,120,62,.07);

    font-size: 30px;

    box-shadow:
        0 0 35px rgba(184,120,62,.08);

}


.cart-empty strong {

    display: block;

    margin-bottom: 7px;

    color:
        var(--cream);

    font-size: 18px;

}


/* ================================================================
   72. CART FOOTER
   ================================================================ */

.cart-footer {

    flex-shrink: 0;

    padding:
        20px 22px 24px;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    background:
        linear-gradient(
            180deg,
            rgba(22,12,8,.80),
            rgba(13,8,5,.98)
        );

    box-shadow:
        0 -15px 35px rgba(0,0,0,.20);

}


/* ================================================================
   73. CART SUMMARY
   ================================================================ */

.cart-summary-line {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 11px;

    color:
        var(--muted-cream);

    font-size: 13px;

}


.cart-summary-line strong {

    color:
        var(--latte);

    font-weight: 700;

}


.cart-total {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 18px;

    padding-top: 17px;

    border-top:
        1px solid
        rgba(214,161,91,.15);

}


.cart-total span {

    color:
        var(--cream);

    font-size: 14px;

    font-weight: 700;

}


.cart-total strong {

    color:
        var(--gold-coffee);

    font-size: 28px;

    font-weight: 850;

    letter-spacing:
        -.04em;

}


/* ================================================================
   74. MAIN CHECKOUT BUTTON
   ================================================================ */

.place-order-button,
.cart-checkout-button {

    position: relative;

    overflow: hidden;

    border: 0;

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

    color:
        #180d07;

    background:
        linear-gradient(
            135deg,
            #e0ad69 0%,
            #c88847 48%,
            #a96432 100%
        );

    box-shadow:
        0 12px 30px rgba(184,120,62,.22),
        inset 0 1px 0 rgba(255,255,255,.28);

    cursor: pointer;

    font-weight: 800;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        filter var(--transition);

}


.place-order-button {

    min-width:
        220px;

    min-height:
        56px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    padding:
        0 22px;

}


.cart-checkout-button {

    width: 100%;

    min-height:
        54px;

    margin-top: 20px;

    font-size: 14px;

}


.place-order-button::before,
.cart-checkout-button::before {

    content: "";

    position: absolute;

    top: -100%;
    left: -60%;

    width: 45%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.40),
            transparent
        );

    transform:
        rotate(20deg)
        translateX(-180%);

    transition:
        transform 700ms cubic-bezier(.16,1,.3,1);

}


.place-order-button:hover,
.cart-checkout-button:hover {

    transform:
        translateY(-3px);

    filter:
        brightness(1.07);

    box-shadow:
        0 18px 42px rgba(184,120,62,.32),
        0 0 30px rgba(214,161,91,.10),
        inset 0 1px 0 rgba(255,255,255,.30);

}


.place-order-button:hover::before,
.cart-checkout-button:hover::before {

    transform:
        rotate(20deg)
        translateX(500%);

}


.place-order-button:active,
.cart-checkout-button:active {

    transform:
        translateY(-1px)
        scale(.985);

}


/* ================================================================
   75. SUBMIT ARROW
   ================================================================ */

.submit-arrow {

    display: inline-flex;

    transition:
        transform var(--transition);

}


.place-order-button:hover
.submit-arrow {

    transform:
        translateX(5px);

}


/* ================================================================
   76. BUTTON LOADING STATE
   ================================================================ */

.place-order-button.loading,
.cart-checkout-button.loading {

    pointer-events: none;

    opacity: .78;

}


.place-order-button.loading::after,
.cart-checkout-button.loading::after {

    content: "";

    position: absolute;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    border:
        2px solid
        rgba(24,13,7,.25);

    border-top-color:
        #180d07;

    animation:
        coffeeSpinner .7s linear infinite;

}


@keyframes coffeeSpinner {

    to {
        transform: rotate(360deg);
    }

}


/* ================================================================
   77. DELIVERY FEE HIGHLIGHT
   ================================================================ */

#deliveryFeeLine {

    padding:
        7px 9px;

    border-radius:
        9px;

    background:
        rgba(184,120,62,.055);

}


/* ================================================================
   78. CUSTOM SCROLLBARS
   ================================================================ */

* {

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(184,120,62,.55)
        rgba(20,11,7,.65);

}


::-webkit-scrollbar {

    width: 8px;
    height: 8px;

}


::-webkit-scrollbar-track {

    background:
        rgba(13,8,5,.65);

}


::-webkit-scrollbar-thumb {

    border:
        2px solid
        rgba(13,8,5,.65);

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            var(--caramel),
            var(--mocha)
        );

}


::-webkit-scrollbar-thumb:hover {

    background:
        linear-gradient(
            180deg,
            var(--gold-coffee),
            var(--caramel)
        );

}


/* ================================================================
   79. BODY LOCK SUPPORT
   ================================================================ */

body.modal-open,
body.cart-open {

    overflow: hidden;

}


/* ================================================================
   80. HIDDEN ELEMENT
   ================================================================ */

[hidden] {

    display: none !important;

}


/* ================================================================
   81. SMOOTH ELEMENT APPEARANCE
   ================================================================ */

.reservation-card,
.customer-card {

    animation:
        sectionCardIn .65s cubic-bezier(.16,1,.3,1) both;

}


@keyframes sectionCardIn {

    from {

        opacity: 0;

        transform:
            translateY(18px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ================================================================
   82. ACTIVE CART BUTTON PULSE
   ================================================================ */

.header-cart-count.bump {

    animation:
        cartBump .4s cubic-bezier(.16,1,.3,1);

}


@keyframes cartBump {

    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.30);
    }

    70% {
        transform: scale(.88);
    }

    100% {
        transform: scale(1);
    }

}



/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 900px) {

    .order-page {
        padding:
            35px 22px 65px;
    }

    .order-type-section,
    .reservation-section,
    .menu-section,
    .customer-section {
        width: 100%;
    }

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

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


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

@media (max-width: 600px) {

    .order-page {
        padding:
            25px 12px 55px;

        background-attachment:
            scroll;
    }

    .order-type-selector {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 6px;
    }

    .order-type-card {
        min-height: 78px;

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

        padding:
            8px 4px;

        border-radius:
            13px;

        text-align: center;
    }

    .order-type-icon {
        width: 32px;
        height: 32px;

        margin-bottom: 5px;

        border-radius: 9px;

        font-size: 14px;
    }

    .order-type-content {
        align-items: center;

        gap: 0;
    }

    .order-type-content strong {
        font-size: 11px;
        line-height: 1.1;

        white-space: nowrap;
    }

    .order-type-content small {
        display: none;
    }

    .order-type-check {
        top: 4px;
        right: 4px;

        width: 17px;
        height: 17px;

        font-size: 8px;
    }

    .section-heading {
        margin-bottom: 17px;
    }

    .section-heading h2 {
        font-size: 26px;
    }

    .section-heading p {
        font-size: 12px;
        line-height: 1.5;
    }

    .reservation-section,
    .menu-section,
    .customer-section {
        margin-top: 50px;
    }

    .reservation-card,
    .customer-card {
        padding:
            17px 13px;

        border-radius:
            18px;
    }

    .reservation-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .form-field label {
        font-size: 11px;
    }

    .form-field input {
        height: 43px;
    }

    .form-field textarea {
        min-height: 90px;
    }

    .category-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .category-card {
        min-height: 185px;

        border-radius: 17px;
    }

    .category-card-content {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }

    .category-card-name {
        font-size: 17px;
    }

    .header-cart-button {
        top: 10px;
        right: 10px;

        padding:
            7px 9px 7px 11px;
    }

    .header-cart-count {
        min-width: 22px;
        height: 22px;

        font-size: 10px;
    }

    .checkout-submit {
        flex-direction: column;
        align-items: stretch;

        gap: 12px;

        margin-top: 20px;
        padding-top: 16px;
    }

    .place-order-button {
        width: 100%;
        min-width: 0;
        min-height: 46px;
    }
}


/* ================================================================
   VERY SMALL PHONES
   ================================================================ */

@media (max-width: 380px) {

    .order-page {
        padding-left: 9px;
        padding-right: 9px;
    }

    .order-type-selector {
        gap: 4px;
    }

    .order-type-card {
        min-height: 70px;

        padding:
            6px 3px;

        border-radius:
            11px;
    }

    .order-type-icon {
        width: 28px;
        height: 28px;

        margin-bottom: 3px;

        border-radius: 8px;

        font-size: 12px;
    }

    .order-type-content strong {
        font-size: 10px;
    }

    .order-type-check {
        top: 3px;
        right: 3px;

        width: 15px;
        height: 15px;

        font-size: 7px;
    }

    .reservation-card,
    .customer-card {
        padding:
            14px 11px;
    }

    .section-heading h2 {
        font-size: 23px;
    }

    .category-card {
        min-height: 165px;
    }
}


/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ================================================================
   83. MOBILE MODAL
   ================================================================ */

@media (max-width: 700px) {

    .menu-modal {

        align-items:
            flex-end;

        padding: 0;

    }


    .menu-modal-panel {

        width: 100%;

        max-height:
            94vh;

        border-radius:
            28px 28px 0 0;

        transform:
            translateY(100%)
            scale(1);

    }


    .menu-modal[aria-hidden="false"]
    .menu-modal-panel {

        transform:
            translateY(0)
            scale(1);

    }


    .menu-modal-header {

        padding:
            21px 18px;

    }


    .menu-modal-body {

        padding:
            17px;

    }


    .menu-items,
    #modalMenuItems {

        grid-template-columns:
            1fr;

    }


    .menu-item {

        padding:
            12px;

    }


    .menu-item-image,
    .menu-item img {

        width: 78px;
        height: 78px;

    }

}


/* ================================================================
   84. MOBILE CART
   ================================================================ */

@media (max-width: 550px) {

    .cart-panel {

        width: 100%;

        border-left: 0;

        border-radius:
            25px 25px 0 0;

        top: auto;

        height:
            min(88vh, 720px);

        transform:
            translateY(105%);

    }


    .cart-drawer {

        display: flex;

        align-items: flex-end;

    }


    .cart-drawer[aria-hidden="false"]
    .cart-panel {

        transform:
            translateY(0);

    }


    .cart-header {

        padding:
            21px 18px;

    }


    .cart-items {

        padding:
            14px 17px;

    }


    .cart-footer {

        padding:
            17px;

    }

}


/* ================================================================
   85. SMALL MOBILE FOOD CARD
   ================================================================ */

@media (max-width: 400px) {

    .menu-item {

        gap: 10px;

    }


    .menu-item-image,
    .menu-item img {

        width: 68px;
        height: 68px;

        border-radius:
            12px;

    }


    .menu-item-name {

        font-size:
            14px;

    }


    .menu-item-description {

        font-size:
            11px;

    }


    .add-to-cart,
    .menu-item-add,
    .add-item-button {

        min-width:
            37px;

        width: 37px;
        height: 37px;

        padding: 0;

    }

}


/* ================================================================
   86. MOBILE CHECKOUT
   ================================================================ */

@media (max-width: 600px) {

    .place-order-button {

        width: 100%;

        min-width: 0;

    }


    .checkout-summary strong {

        font-size:
            29px;

    }

}


/* ================================================================
   87. TOUCH DEVICES
   ================================================================ */

@media (hover: none) {

    .category-card:hover {

        transform:
            none;

    }


    .category-card:hover
    .category-card-image {

        transform:
            scale(1.02);

    }


    .order-type-card:hover {

        transform:
            none;

    }


    .menu-item:hover {

        transform:
            none;

    }

}


/* ================================================================
   88. VERY LARGE SCREENS
   ================================================================ */

@media (min-width: 1500px) {

    .order-page {

        padding-left:
            8vw;

        padding-right:
            8vw;

    }


    .order-type-section,
    .reservation-section,
    .menu-section,
    .customer-section {

        width:
            min(1280px, 100%);

    }


    .category-card {

        min-height:
            270px;

    }

}


/* ================================================================
   89. FINAL COFFEE GLOW DETAILS
   ================================================================ */

.order-type-section::before,
.menu-section::before,
.customer-section::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(184,120,62,.055),
            transparent 70%
        );

    filter:
        blur(12px);

}


.order-type-section,
.menu-section,
.customer-section {

    position: relative;

}


/* ================================================================
   90. SELECTION MICRO-ANIMATION
   ================================================================ */

.order-type-card.active
.order-type-icon {

    animation:
        coffeeIconPop .45s cubic-bezier(.16,1,.3,1);

}


@keyframes coffeeIconPop {

    0% {

        transform:
            scale(.8)
            rotate(-5deg);

    }

    65% {

        transform:
            scale(1.08)
            rotate(2deg);

    }

    100% {

        transform:
            scale(1)
            rotate(0);

    }

}


/* ================================================================
   91. TOTAL NUMBER EMPHASIS
   ================================================================ */

#checkoutTotal,
#cartTotal {

    transition:
        color var(--transition),
        transform var(--transition);

}


.total-updated {

    animation:
        totalPop .35s cubic-bezier(.16,1,.3,1);

}


@keyframes totalPop {

    0% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.08);

        color:
            #ffe0ad;

    }

    100% {

        transform:
            scale(1);

    }

}


/* ================================================================
   92. PRINT
   ================================================================ */

@media print {

    .header-cart-button,
    .menu-modal,
    .cart-drawer {

        display: none !important;

    }


    .order-page {

        color:
            #111;

        background:
            white;

    }

}


/* ================================================================
   93. FINAL SAFETY
   ================================================================ */

img {

    max-width: 100%;

}


button {

    font-family:
        inherit;

}


textarea {

    font-family:
        inherit;

}






.order-type-icon .material-symbols-rounded {
    font-size: 26px;
    line-height: 1;
}

.order-type-check .material-symbols-rounded {
    font-size: 17px;
    line-height: 1;
    font-weight: 600;
}


/* ================================================================
   END — PREMIUM COFFEE THEME
   ================================================================ */