/* =========================================================
   CRUST & FIRE — CHECKOUT PAGE
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --primary: #e63920;
    --primary-dark: #c92d18;

    --accent: #ffb703;

    --dark: #171717;

    --text: #333;

    --text-light: #777;

    --white: #fff;

    --off-white: #fffaf5;

    --cream: #fff3e8;

    --border: rgba(23, 23, 23, 0.09);

    --green: #25d366;

    --shadow-sm:
        0 6px 20px rgba(0, 0, 0, 0.06);

    --shadow-md:
        0 18px 50px rgba(0, 0, 0, 0.10);

    --radius-md: 18px;

    --radius-lg: 27px;

    --transition:
        0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =========================================================
   RESET
   ========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family:
        "Poppins",
        sans-serif;

    color: var(--text);

    background:
        var(--off-white);

    line-height: 1.6;

    overflow-x: hidden;

}

body.modal-open {

    overflow: hidden;

}

a {

    color: inherit;

    text-decoration: none;

}

button,

input,

textarea {

    font-family: inherit;

}

button {

    cursor: pointer;

}

img {

    display: block;

    width: 100%;

}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {

    width:
        min(92%, 1200px);

    margin: 0 auto;

}


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

.checkout-header {

    position: sticky;

    top: 0;

    z-index: 500;

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

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

    backdrop-filter:
        blur(18px);

}

.checkout-header-container {

    width:
        min(92%, 1200px);

    min-height: 80px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


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

.checkout-logo {

    display: flex;

    align-items: center;

    gap: 10px;

}

.checkout-logo-icon {

    width: 43px;

    height: 43px;

    display: grid;

    place-items: center;

    color: white;

    background:
        var(--primary);

    border-radius: 13px;

    transform:
        rotate(-8deg);

}

.checkout-logo-text {

    color:
        var(--dark);

    font-size:
        1.3rem;

    font-weight: 800;

}

.checkout-logo-text span {

    color:
        var(--primary);

}


/* =========================================================
   SECURITY
   ========================================================= */

.checkout-security {

    display: flex;

    align-items: center;

    gap: 7px;

    color:
        #5d8d67;

    font-size:
        0.65rem;

    font-weight: 600;

}

.checkout-security i {

    font-size:
        0.7rem;

}


/* =========================================================
   PAGE HEADING
   ========================================================= */

.checkout-heading {

    padding:
        70px 0 40px;

    text-align:
        center;

}

.checkout-tag {

    display:
        inline-flex;

    align-items:
        center;

    gap: 8px;

    margin-bottom:
        12px;

    color:
        var(--primary);

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}

.checkout-heading h1 {

    color:
        var(--dark);

    font-size:
        clamp(2.2rem, 5vw, 3.5rem);

    line-height:
        1.1;

    margin-bottom:
        13px;

    font-weight:
        800;

}

.checkout-heading h1 span {

    color:
        var(--primary);

}

.checkout-heading p {

    color:
        var(--text-light);

    font-size:
        0.83rem;

}


/* =========================================================
   CHECKOUT SECTION
   ========================================================= */

.checkout-section {

    padding:
        20px 0 90px;

}


/* =========================================================
   CHECKOUT LAYOUT
   ========================================================= */

.checkout-layout {

    display:
        grid;

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

    align-items:
        start;

    gap:
        30px;

}


/* =========================================================
   FORM WRAPPER
   ========================================================= */

.checkout-form-wrapper {

    padding:
        32px;

    background:
        white;

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

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

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

}


/* =========================================================
   FORM HEADING
   ========================================================= */

.form-heading {

    margin-bottom:
        28px;

}

.form-heading > div {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

}

.step-number {

    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        white;

    background:
        var(--primary);

    border-radius:
        12px;

    font-size:
        0.65rem;

    font-weight:
        800;

}

.form-heading h2 {

    margin-bottom:
        2px;

    color:
        var(--dark);

    font-size:
        1.1rem;

    font-weight:
        800;

}

.form-heading p {

    color:
        var(--text-light);

    font-size:
        0.63rem;

}


/* =========================================================
   FORM GROUP
   ========================================================= */

.form-group {

    margin-bottom:
        20px;

}

.form-group label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--dark);

    font-size:
        0.68rem;

    font-weight:
        700;

}

.form-group label > span {

    color:
        var(--primary);

}

.form-group label small {

    color:
        var(--text-light);

    font-size:
        0.55rem;

    font-weight:
        400;

}


/* =========================================================
   INPUT WRAPPER
   ========================================================= */

.input-wrapper {

    position:
        relative;

}

.input-wrapper > i {

    position:
        absolute;

    left:
        16px;

    top:
        50%;

    z-index:
        2;

    color:
        #aaa;

    font-size:
        0.75rem;

    transform:
        translateY(-50%);

    pointer-events:
        none;

}

.input-wrapper input,

.input-wrapper textarea {

    width:
        100%;

    color:
        var(--dark);

    background:
        #fffdfb;

    border:
        1px solid #e8e1dc;

    border-radius:
        12px;

    outline:
        none;

    font-size:
        0.7rem;

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

}

.input-wrapper input {

    height:
        50px;

    padding:
        0 16px 0 43px;

}

.input-wrapper textarea {

    min-height:
        110px;

    padding:
        14px 16px 14px 43px;

    resize:
        vertical;

}

.input-wrapper input::placeholder,

.input-wrapper textarea::placeholder {

    color:
        #b4aea9;

}

.input-wrapper input:focus,

.input-wrapper textarea:focus {

    background:
        white;

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 4px
        rgba(230,57,32,0.08);

}

.textarea-wrapper > i {

    top:
        21px;

    transform:
        none;

}


/* =========================================================
   ERROR
   ========================================================= */

.error-message {

    display:
        block;

    min-height:
        0;

    margin-top:
        5px;

    color:
        var(--primary);

    font-size:
        0.56rem;

}

.form-group.error
.input-wrapper input,

.form-group.error
.input-wrapper textarea {

    border-color:
        var(--primary);

    background:
        #fff8f6;

}


/* =========================================================
   PAYMENT SECTION
   ========================================================= */

.payment-section {

    margin-top:
        35px;

    padding-top:
        30px;

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

}

.payment-heading {

    margin-bottom:
        20px;

}


/* =========================================================
   PAYMENT OPTIONS
   ========================================================= */

.payment-options {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}

.payment-option {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        16px;

    background:
        #fffdfb;

    border:
        1px solid #e8e1dc;

    border-radius:
        14px;

    cursor:
        pointer;

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

}

.payment-option:hover {

    transform:
        translateY(-2px);

    border-color:
        #d9cec7;

}

.payment-option.active {

    background:
        var(--cream);

    border-color:
        var(--primary);

}


/* hide radio */

.payment-option input {

    position:
        absolute;

    opacity:
        0;

}


/* custom radio */

.payment-radio {

    width:
        18px;

    height:
        18px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        2px solid #ccc;

    border-radius:
        50%;

}

.payment-option.active
.payment-radio {

    border-color:
        var(--primary);

}

.payment-option.active
.payment-radio::after {

    content:
        "";

    width:
        8px;

    height:
        8px;

    background:
        var(--primary);

    border-radius:
        50%;

}


/* payment icon */

.payment-icon {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--primary);

    background:
        white;

    border-radius:
        10px;

}

.payment-content {

    display:
        flex;

    flex-direction:
        column;

}

.payment-content strong {

    color:
        var(--dark);

    font-size:
        0.68rem;

}

.payment-content small {

    color:
        var(--text-light);

    font-size:
        0.53rem;

}


/* =========================================================
   TERMS
   ========================================================= */

.terms-checkbox {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-top:
        25px;

    color:
        var(--text-light);

    font-size:
        0.58rem;

    line-height:
        1.6;

    cursor:
        pointer;

}

.terms-checkbox input {

    position:
        absolute;

    opacity:
        0;

}

.custom-checkbox {

    width:
        19px;

    height:
        19px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid #d8d0cb;

    border-radius:
        5px;

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

}

.custom-checkbox i {

    display:
        none;

    color:
        white;

    font-size:
        0.55rem;

}

.terms-checkbox input:checked
+ .custom-checkbox {

    background:
        var(--primary);

    border-color:
        var(--primary);

}

.terms-checkbox input:checked
+ .custom-checkbox i {

    display:
        block;

}


/* =========================================================
   PLACE ORDER
   ========================================================= */

.place-order-btn {

    width:
        100%;

    min-height:
        56px;

    margin-top:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        0 20px;

    color:
        white;

    background:
        var(--primary);

    border:
        none;

    border-radius:
        14px;

    box-shadow:
        0 14px 30px
        rgba(230,57,32,0.22);

    font-size:
        0.72rem;

    font-weight:
        700;

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

}

.place-order-btn:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 38px
        rgba(230,57,32,0.28);

}

.place-order-btn > span {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}

.place-order-btn > i {

    transition:
        transform var(--transition);

}

.place-order-btn:hover > i {

    transform:
        translateX(4px);

}

.place-order-btn.loading {

    opacity:
        0.7;

    pointer-events:
        none;

}


/* =========================================================
   CHECKOUT SUMMARY
   ========================================================= */

.checkout-summary {

    position:
        sticky;

    top:
        105px;

    padding:
        27px;

    background:
        white;

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

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

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

}


/* =========================================================
   SUMMARY TOP
   ========================================================= */

.summary-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        23px;

}

.summary-top > div:first-child > span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--primary);

    font-size:
        0.58rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

}

.summary-top h2 {

    color:
        var(--dark);

    font-size:
        1.05rem;

    font-weight:
        800;

}

.summary-icon {

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--primary);

    background:
        var(--cream);

    border-radius:
        13px;

}


/* =========================================================
   CHECKOUT ITEMS
   ========================================================= */

.checkout-items {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    max-height:
        350px;

    overflow-y:
        auto;

    padding-right:
        4px;

}

.checkout-item {

    display:
        grid;

    grid-template-columns:
        52px 1fr auto;

    align-items:
        center;

    gap:
        10px;

}

.checkout-item-image {

    width:
        52px;

    height:
        52px;

    overflow:
        hidden;

    background:
        var(--cream);

    border-radius:
        10px;

}

.checkout-item-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}

.checkout-item-info {

    min-width:
        0;

}

.checkout-item-info strong {

    display:
        block;

    overflow:
        hidden;

    color:
        var(--dark);

    font-size:
        0.62rem;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}

.checkout-item-info span {

    color:
        var(--text-light);

    font-size:
        0.52rem;

}

.checkout-item-price {

    color:
        var(--dark);

    font-size:
        0.62rem;

    font-weight:
        700;

    white-space:
        nowrap;

}


/* =========================================================
   SUMMARY LINES
   ========================================================= */

.checkout-summary-lines {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    margin-top:
        22px;

}

.checkout-summary-lines > div {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

}

.checkout-summary-lines span {

    color:
        var(--text-light);

    font-size:
        0.62rem;

}

.checkout-summary-lines strong {

    color:
        var(--dark);

    font-size:
        0.62rem;

}


/* =========================================================
   DIVIDER
   ========================================================= */

.summary-divider {

    height:
        1px;

    margin:
        20px 0;

    background:
        var(--border);

}


/* =========================================================
   TOTAL
   ========================================================= */

.checkout-total {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}

.checkout-total span {

    color:
        var(--dark);

    font-size:
        0.8rem;

    font-weight:
        700;

}

.checkout-total strong {

    color:
        var(--primary);

    font-size:
        1.3rem;

    font-weight:
        800;

}


/* =========================================================
   EDIT CART
   ========================================================= */

.edit-cart-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        18px;

    color:
        var(--text-light);

    font-size:
        0.58rem;

    font-weight:
        600;

    transition:
        color var(--transition);

}

.edit-cart-link:hover {

    color:
        var(--primary);

}


/* =========================================================
   ORDER PROTECTION
   ========================================================= */

.order-protection {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-top:
        22px;

    padding:
        13px;

    background:
        #f5faf5;

    border-radius:
        11px;

}

.order-protection > i {

    color:
        #459357;

    margin-top:
        2px;

}

.order-protection div {

    display:
        flex;

    flex-direction:
        column;

}

.order-protection strong {

    color:
        #467650;

    font-size:
        0.56rem;

}

.order-protection span {

    margin-top:
        2px;

    color:
        #79927d;

    font-size:
        0.5rem;

}


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

.success-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        5000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

}

.success-modal.show {

    display:
        flex;

}

.success-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(10,10,10,0.75);

    backdrop-filter:
        blur(8px);

}

.success-box {

    position:
        relative;

    z-index:
        2;

    width:
        min(100%, 500px);

    max-height:
        90vh;

    overflow-y:
        auto;

    padding:
        40px 32px;

    text-align:
        center;

    background:
        white;

    border-radius:
        28px;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,0.25);

    animation:
        successPop 0.45s
        cubic-bezier(.17,.67,.35,1.4);

}

@keyframes successPop {

    from {

        opacity:
            0;

        transform:
            scale(0.85)
            translateY(20px);

    }

    to {

        opacity:
            1;

        transform:
            scale(1)
            translateY(0);

    }

}

.success-icon {

    width:
        75px;

    height:
        75px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 18px;

    color:
        white;

    background:
        #42a35b;

    border-radius:
        50%;

    font-size:
        1.7rem;

    box-shadow:
        0 12px 30px
        rgba(66,163,91,0.22);

}

.success-label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #42a35b;

    font-size:
        0.58rem;

    font-weight:
        800;

    letter-spacing:
        1.4px;

}

.success-box h2 {

    margin-bottom:
        7px;

    color:
        var(--dark);

    font-size:
        2rem;

    font-weight:
        800;

}

.success-box > p {

    color:
        var(--text-light);

    font-size:
        0.7rem;

}

.success-order-number {

    display:
        inline-block;

    margin:
        18px 0 25px;

    padding:
        9px 15px;

    color:
        var(--text-light);

    background:
        #f7f5f3;

    border-radius:
        9px;

    font-size:
        0.6rem;

}

.success-order-number strong {

    color:
        var(--dark);

}


/* =========================================================
   SUCCESS ACTIONS
   ========================================================= */

.success-actions {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}

.whatsapp-btn,

.email-btn,

.home-btn {

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        0 18px;

    border:
        none;

    border-radius:
        12px;

    font-size:
        0.65rem;

    font-weight:
        700;

}

.whatsapp-btn {

    color:
        white;

    background:
        var(--green);

}

.whatsapp-btn:hover {

    background:
        #1ebd5a;

}

.email-btn {

    color:
        var(--dark);

    background:
        #f4f1ee;

}

.email-btn:hover {

    background:
        #e9e3df;

}

.home-btn {

    color:
        var(--text-light);

    background:
        transparent;

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

}

.home-btn:hover {

    color:
        var(--primary);

    border-color:
        var(--primary);

}


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

.checkout-footer {

    padding:
        25px 0;

    background:
        #171717;

}

.checkout-footer .container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}

.checkout-footer p,

.checkout-footer div {

    color:
        rgba(255,255,255,0.45);

    font-size:
        0.58rem;

}

.checkout-footer div {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


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

@media (max-width: 950px) {

    .checkout-layout {

        grid-template-columns:
            1fr;

    }

    .checkout-summary {

        position:
            static;

        order:
            -1;

    }

}


@media (max-width: 600px) {

    .checkout-header-container {

        min-height:
            70px;

    }

    .checkout-logo-text {

        font-size:
            1.05rem;

    }

    .checkout-logo-icon {

        width:
            38px;

        height:
            38px;

    }

    .checkout-security {

        font-size:
            0;

    }

    .checkout-security i {

        font-size:
            0.85rem;

    }

    .checkout-heading {

        padding:
            52px 0 30px;

    }

    .checkout-heading h1 {

        font-size:
            2.2rem;

    }

    .checkout-form-wrapper {

        padding:
            22px 17px;

        border-radius:
            20px;

    }

    .checkout-summary {

        padding:
            22px;

        border-radius:
            20px;

    }

    .success-box {

        padding:
            35px 20px;

    }

    .checkout-footer .container {

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

    }

}