/*
|--------------------------------------------------------------------------
| Back Nine Ordering Platform
|--------------------------------------------------------------------------
| File:
| /backnine/assets/css/style.css
|--------------------------------------------------------------------------
*/

* {
    box-sizing: border-box;
}

:root {
    --green: #9bd12f;
    --green-dark: #6ca51d;
    --green-soft: #eff8df;

    --dark: #111820;
    --dark-soft: #1d2731;

    --white: #ffffff;
    --background: #f5f7f3;

    --border: #dde4d9;
    --muted: #68727b;

    --red: #a52626;
    --red-soft: #ffeaea;

    --yellow: #8a6400;
    --yellow-soft: #fff3d4;

    --blue: #2868a9;
    --blue-soft: #eaf3ff;

    --radius: 18px;

    --shadow:
        0 12px 30px
        rgba(17, 24, 32, 0.07);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        var(--background);

    color:
        var(--dark);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

img {
    max-width: 100%;
}

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

a {
    color: inherit;
}

/*
|--------------------------------------------------------------------------
| Main Layout
|--------------------------------------------------------------------------
*/

.container {
    width:
        min(
            1180px,
            calc(100% - 30px)
        );

    margin: auto;

    padding:
        28px 0 70px;
}

.container-narrow {
    width:
        min(
            850px,
            calc(100% - 30px)
        );

    margin: auto;

    padding:
        28px 0 70px;
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.site-header {
    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

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

    backdrop-filter:
        blur(10px);
}

.site-header-inner {
    width:
        min(
            1180px,
            calc(100% - 30px)
        );

    min-height: 82px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;
}

.site-brand {
    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;
}

.site-brand img {
    width: 58px;
    height: 58px;

    object-fit: contain;
}

.site-brand-title {
    font-size: 20px;

    font-weight: 900;

    letter-spacing: 1px;
}

.site-brand-subtitle {
    margin-top: 4px;

    color:
        var(--green-dark);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.4px;
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        13px 18px;

    border: 0;

    border-radius: 11px;

    cursor: pointer;

    text-align: center;

    text-decoration: none;

    font-size: 14px;

    font-weight: 900;

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

.btn:hover {
    transform:
        translateY(-1px);
}

.btn-dark {
    background:
        var(--dark);

    color:
        var(--white);
}

.btn-dark:hover {
    background:
        var(--dark-soft);
}

.btn-green {
    background:
        var(--green);

    color:
        var(--dark);
}

.btn-green:hover {
    background:
        #a9df3d;
}

.btn-light {
    border:
        1px solid
        var(--border);

    background:
        var(--white);

    color:
        var(--dark);
}

.btn-danger {
    background:
        var(--red-soft);

    color:
        var(--red);
}

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.6;

    cursor: not-allowed;

    transform: none;
}

/*
|--------------------------------------------------------------------------
| Page Headings
|--------------------------------------------------------------------------
*/

.page-heading {
    margin-bottom:
        26px;
}

.page-eyebrow {
    margin-bottom:
        8px;

    color:
        var(--green-dark);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.4px;

    text-transform:
        uppercase;
}

.page-heading h1 {
    margin: 0;

    font-size:
        clamp(
            34px,
            5vw,
            52px
        );

    line-height: 1;

    letter-spacing:
        -1.5px;
}

.page-heading p {
    max-width: 700px;

    margin:
        11px 0 0;

    color:
        var(--muted);

    line-height: 1.55;
}

/*
|--------------------------------------------------------------------------
| Cards / Panels
|--------------------------------------------------------------------------
*/

.card,
.panel {
    padding: 23px;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

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

.card + .card,
.panel + .panel {
    margin-top:
        18px;
}

.card h2,
.panel h2 {
    margin:
        0 0 17px;

    font-size: 22px;
}

/*
|--------------------------------------------------------------------------
| Alerts
|--------------------------------------------------------------------------
*/

.alert {
    padding:
        14px 16px;

    margin-bottom:
        20px;

    border-radius: 11px;

    font-size: 13px;

    font-weight: 800;

    line-height: 1.5;
}

.alert-success {
    background:
        #e8f7e6;

    color:
        #236426;
}

.alert-error {
    background:
        var(--red-soft);

    color:
        var(--red);
}

.alert-warning {
    background:
        var(--yellow-soft);

    color:
        var(--yellow);
}

.alert-info {
    background:
        var(--blue-soft);

    color:
        var(--blue);
}

/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/

.field {
    display: block;

    margin-bottom:
        17px;
}

.field-label {
    display: block;

    margin-bottom:
        7px;

    font-size: 12px;

    font-weight: 900;
}

.required {
    color:
        var(--red);
}

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

    padding:
        13px 14px;

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

    border-radius: 10px;

    background:
        var(--white);

    color:
        var(--dark);

    outline: none;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color:
        var(--green-dark);

    box-shadow:
        0 0 0 3px
        rgba(
            155,
            209,
            47,
            0.16
        );
}

.field textarea {
    min-height: 90px;

    resize: vertical;
}

.field-help {
    display: block;

    margin-top: 6px;

    color:
        var(--muted);

    font-size: 11px;

    line-height: 1.45;
}

/*
|--------------------------------------------------------------------------
| Fixed Delivery Address
|--------------------------------------------------------------------------
*/

.delivery-address-box {
    padding: 15px;

    border-left:
        5px solid
        var(--green);

    border-radius: 11px;

    background:
        var(--green-soft);
}

.delivery-address-label {
    margin-bottom: 5px;

    color:
        var(--green-dark);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform:
        uppercase;
}

.delivery-address-value {
    font-size: 14px;

    font-weight: 900;

    line-height: 1.45;
}

/*
|--------------------------------------------------------------------------
| Menu Cards
|--------------------------------------------------------------------------
*/

.menu-grid {
    display: grid;

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

    gap: 18px;
}

.menu-card {
    position: relative;

    overflow: hidden;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

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

.menu-card::before {
    content: "";

    position: absolute;

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

    height: 5px;

    background:
        var(--green);
}

.menu-card-body {
    padding: 22px;
}

.menu-card-header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 15px;
}

.menu-card-title {
    margin: 0;

    font-size: 21px;

    font-weight: 900;
}

.menu-price {
    flex: 0 0 auto;

    padding:
        8px 11px;

    border-radius:
        999px;

    background:
        var(--green-soft);

    color:
        #4c7517;

    font-weight: 900;
}

.menu-description {
    margin:
        9px 0 16px;

    color:
        var(--muted);

    font-size: 14px;

    line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Toppings
|--------------------------------------------------------------------------
*/

.customize-box {
    margin:
        14px 0;

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

    border-radius: 12px;

    background:
        #fafbf9;
}

.customize-box summary {
    cursor: pointer;

    padding: 13px;

    font-size: 13px;

    font-weight: 900;
}

.customize-body {
    padding:
        0 13px 14px;
}

.topping-grid {
    display: grid;

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

    gap: 8px;
}

.topping-option {
    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 10px;

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

    border-radius: 9px;

    background:
        var(--white);

    cursor: pointer;

    font-size: 12px;

    font-weight: 700;
}

.topping-option input {
    accent-color:
        var(--green-dark);
}

/*
|--------------------------------------------------------------------------
| Cart
|--------------------------------------------------------------------------
*/

.cart-item {
    position: relative;

    overflow: hidden;

    display: grid;

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

    gap: 20px;

    padding: 22px;

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

    border-radius:
        var(--radius);

    background:
        var(--white);

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

.cart-item + .cart-item {
    margin-top: 14px;
}

.cart-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background:
        var(--green);
}

.cart-item-name {
    margin:
        0 0 8px;

    font-size: 20px;

    font-weight: 900;
}

.cart-item-detail {
    margin:
        4px 0;

    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.45;
}

/*
|--------------------------------------------------------------------------
| Totals
|--------------------------------------------------------------------------
*/

.total-row {
    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    padding:
        8px 0;
}

.grand-total {
    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    margin-top: 10px;

    padding-top: 16px;

    border-top:
        2px solid
        var(--dark);

    font-size: 21px;

    font-weight: 900;
}

/*
|--------------------------------------------------------------------------
| Dark Order Summary
|--------------------------------------------------------------------------
*/

.order-summary {
    overflow: hidden;

    border-radius:
        var(--radius);

    background:
        var(--dark);

    color:
        var(--white);

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

.order-summary-inner {
    padding: 22px;
}

.order-summary .total-row {
    color:
        #d1d8dd;
}

.order-summary .grand-total {
    border-color:
        rgba(
            255,
            255,
            255,
            0.18
        );
}

/*
|--------------------------------------------------------------------------
| Payment Status
|--------------------------------------------------------------------------
*/

.payment-status {
    padding:
        15px 18px;

    border-radius: 12px;

    text-align: center;

    font-size: 14px;

    font-weight: 900;
}

.payment-status-paid {
    background:
        var(--green-soft);

    color:
        #4b7618;
}

.payment-status-cash {
    background:
        var(--yellow-soft);

    color:
        var(--yellow);
}

.payment-status-pending {
    background:
        var(--blue-soft);

    color:
        var(--blue);
}

/*
|--------------------------------------------------------------------------
| Success
|--------------------------------------------------------------------------
*/

.success-check {
    width: 74px;
    height: 74px;

    display: grid;

    place-items: center;

    margin:
        0 auto 18px;

    border-radius: 50%;

    background:
        var(--green);

    color:
        var(--dark);

    font-size: 38px;

    font-weight: 900;
}

/*
|--------------------------------------------------------------------------
| Utility
|--------------------------------------------------------------------------
*/

.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

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

.mt-0 {
    margin-top: 0;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-footer {
    padding:
        30px 15px 45px;

    text-align: center;

    color:
        var(--muted);

    font-size: 11px;

    line-height: 1.7;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 850px) {

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

@media (max-width: 600px) {

    .container,
    .container-narrow {
        width:
            calc(
                100% - 20px
            );

        padding-top: 20px;
    }

    .site-header-inner {
        width:
            calc(
                100% - 20px
            );

        min-height: 72px;
    }

    .site-brand img {
        width: 48px;
        height: 48px;
    }

    .site-brand-title {
        font-size: 17px;
    }

    .site-brand-subtitle {
        font-size: 7px;
    }

    .card,
    .panel {
        padding: 19px;
    }

    .cart-item {
        grid-template-columns:
            1fr;
    }

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