/* =========================================================
   ALAQ CHECKOUT
========================================================= */


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

.checkout-page-header {
    padding:
        82px
        32px
        60px;

    background:
        linear-gradient(
            180deg,
            #f6f1e8,
            #fffdf8
        );
}


.checkout-page-header-inner {
    max-width: 1400px;

    margin:
        0
        auto;
}


.checkout-page-header h1 {
    margin:
        0
        0
        15px;

    color:
        var(--alaq-deep);

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

    font-size:
        clamp(
            44px,
            6vw,
            70px
        );

    font-weight: 500;

    line-height: 1;

    letter-spacing: -2.5px;
}


.checkout-page-header p {
    max-width: 580px;

    margin: 0;

    color:
        var(--alaq-muted);

    font-size: 12px;

    line-height: 1.9;
}


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

.checkout-layout {
    max-width: 1400px;

    margin:
        0
        auto;

    padding:
        55px
        32px
        110px;

    display: grid;

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

    gap:
        clamp(
            50px,
            7vw,
            95px
        );

    align-items: start;
}


/* =========================================================
   BLOCK
========================================================= */

.checkout-block {
    padding:
        0
        0
        45px;

    margin-bottom: 45px;

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


.checkout-block:last-child {
    margin-bottom: 0;
}


.checkout-block-heading {
    margin-bottom: 25px;

    display: flex;

    align-items: flex-start;

    justify-content:
        space-between;

    gap: 25px;
}


.checkout-step {
    display: block;

    margin-bottom: 9px;

    color:
        var(--alaq-green-soft);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;
}


.checkout-block-heading h2 {
    margin:
        0
        0
        7px;

    color:
        var(--alaq-deep);

    font-size: 22px;

    font-weight: 500;

    letter-spacing: -0.7px;
}


.checkout-block-heading p {
    max-width: 500px;

    margin: 0;

    color:
        var(--alaq-muted);

    font-size: 10px;

    line-height: 1.8;
}


.checkout-text-button {
    flex-shrink: 0;

    padding:
        8px
        0;

    border: 0;

    background:
        transparent;

    color:
        var(--alaq-green);

    font-size: 10px;

    font-weight: 600;
}


/* =========================================================
   ADDRESSES
========================================================= */

.checkout-addresses {
    display: grid;

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

    gap: 12px;
}


.checkout-address-card {
    position: relative;

    min-height: 160px;

    padding:
        20px;

    display: grid;

    grid-template-columns:
        18px
        1fr;

    gap: 13px;

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

    background:
        var(--alaq-white);

    cursor: pointer;

    transition:
        border-color
        0.2s ease,
        background
        0.2s ease,
        transform
        0.2s ease;
}


.checkout-address-card:hover {
    border-color:
        rgba(
            11,
            74,
            71,
            0.35
        );

    transform:
        translateY(-1px);
}


.checkout-address-card.selected {
    border-color:
        var(--alaq-green);

    background:
        rgba(
            244,
            240,
            231,
            0.55
        );
}


.address-selection-dot {
    width: 15px;

    height: 15px;

    margin-top: 2px;

    border:
        1px solid
        #9baba8;

    border-radius: 50%;

    position: relative;
}


.checkout-address-card.selected
.address-selection-dot {
    border-color:
        var(--alaq-green);
}


.checkout-address-card.selected
.address-selection-dot::after {
    content: "";

    position: absolute;

    inset: 3px;

    border-radius: 50%;

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


.checkout-address-title {
    margin-bottom: 7px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}


.checkout-address-title strong {
    color:
        var(--alaq-deep);

    font-size: 12px;

    font-weight: 600;
}


.default-address-badge {
    padding:
        3px
        7px;

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);

    font-size: 7px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


.checkout-address-info > span {
    color:
        var(--alaq-muted);

    font-size: 9px;
}


.checkout-address-info p {
    margin:
        9px
        0
        0;

    color:
        var(--alaq-muted);

    font-size: 9px;

    line-height: 1.7;
}


/* =========================================================
   NO ADDRESS
========================================================= */

.no-checkout-address {
    grid-column:
        1 / -1;

    padding:
        38px;

    border:
        1px dashed
        rgba(
            11,
            74,
            71,
            0.25
        );

    background:
        rgba(
            244,
            240,
            231,
            0.35
        );

    text-align: center;
}


.no-checkout-address h3 {
    margin:
        0
        0
        7px;

    color:
        var(--alaq-deep);

    font-size: 16px;

    font-weight: 500;
}


.no-checkout-address p {
    margin:
        0
        0
        18px;

    color:
        var(--alaq-muted);

    font-size: 10px;
}


.no-checkout-address button {
    min-height: 42px;

    padding:
        0
        18px;

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

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);

    font-size: 10px;

    font-weight: 600;
}


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

.payment-methods {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;
}


.payment-method-card {
    position: relative;

    min-height: 110px;

    padding:
        20px;

    display: grid;

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

    gap: 13px;

    align-items: flex-start;

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

    background:
        var(--alaq-white);

    cursor: pointer;

    transition:
        border-color
        0.2s ease,
        background
        0.2s ease;
}


.payment-method-card:has(
    input:checked
) {
    border-color:
        var(--alaq-green);

    background:
        rgba(
            244,
            240,
            231,
            0.50
        );
}


.payment-method-card input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.payment-radio {
    width: 15px;

    height: 15px;

    margin-top: 2px;

    border:
        1px solid
        #9baaa7;

    border-radius: 50%;

    position: relative;
}


.payment-method-card
input:checked +
.payment-radio {
    border-color:
        var(--alaq-green);
}


.payment-method-card
input:checked +
.payment-radio::after {
    content: "";

    position: absolute;

    inset: 3px;

    border-radius: 50%;

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


.payment-method-content {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.payment-method-content strong {
    color:
        var(--alaq-deep);

    font-size: 11px;

    font-weight: 600;
}


.payment-method-content span {
    color:
        var(--alaq-muted);

    font-size: 8px;

    line-height: 1.6;
}


.payment-code {
    color:
        var(--alaq-green-soft);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   NOTES
========================================================= */

.checkout-notes {
    width: 100%;

    min-height: 125px;

    padding:
        14px;

    resize: vertical;

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

    outline: none;

    background:
        var(--alaq-white);

    color:
        var(--alaq-text);

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

    font-size: 10px;

    line-height: 1.7;
}


.checkout-notes:focus {
    border-color:
        var(--alaq-green);

    box-shadow:
        0 0 0 3px
        rgba(
            11,
            74,
            71,
            0.06
        );
}


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

.checkout-summary {
    position: sticky;

    top: 105px;

    padding:
        32px;

    border:
        1px solid
        rgba(
            4,
            30,
            29,
            0.08
        );

    background:
        linear-gradient(
            145deg,
            #f1eadf,
            #faf7f1
        );
}


.checkout-summary-eyebrow {
    display: block;

    margin-bottom: 8px;

    color:
        var(--alaq-green-soft);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.checkout-summary h2 {
    margin:
        0
        0
        25px;

    color:
        var(--alaq-deep);

    font-size: 24px;

    font-weight: 500;

    letter-spacing: -0.8px;
}


/* =========================================================
   SUMMARY ITEMS
========================================================= */

.checkout-items {
    margin-bottom: 25px;

    padding-bottom: 22px;

    border-bottom:
        1px solid
        rgba(
            4,
            30,
            29,
            0.11
        );
}


.checkout-item {
    padding:
        10px
        0;

    display: grid;

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

    gap: 12px;

    align-items: center;
}


.checkout-item-image {
    position: relative;

    width: 58px;

    aspect-ratio:
        0.78;

    overflow: visible;

    background:
        #eee8df;
}


.checkout-item-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.checkout-item-placeholder {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        rgba(
            4,
            30,
            29,
            0.15
        );

    font-family:
        Georgia,
        serif;

    font-size: 32px;
}


.checkout-item-quantity {
    position: absolute;

    right: -7px;

    top: -7px;

    width: 19px;

    height: 19px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);

    font-size: 7px;

    font-weight: 700;
}


.checkout-item-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.checkout-item-info strong {
    overflow: hidden;

    color:
        var(--alaq-deep);

    font-size: 10px;

    font-weight: 600;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.checkout-item-info span {
    color:
        var(--alaq-muted);

    font-size: 8px;
}


.checkout-item-total {
    color:
        var(--alaq-deep);

    font-size: 10px;
}


/* =========================================================
   SUMMARY PRICE
========================================================= */

.checkout-price-row {
    margin-bottom: 14px;

    display: flex;

    justify-content:
        space-between;

    gap: 20px;

    color:
        var(--alaq-muted);

    font-size: 10px;
}


.checkout-price-row strong {
    color:
        var(--alaq-deep);

    font-size: 10px;
}


.checkout-summary-divider {
    height: 1px;

    margin:
        22px
        0;

    background:
        rgba(
            4,
            30,
            29,
            0.12
        );
}


.checkout-price-row.total {
    margin-bottom: 25px;

    color:
        var(--alaq-deep);

    font-size: 13px;

    font-weight: 600;
}


.checkout-price-row.total strong {
    font-size: 16px;
}


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

.place-order-button {
    width: 100%;

    min-height: 55px;

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

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);

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

    font-size: 11px;

    font-weight: 700;

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


.place-order-button:hover:not(:disabled) {
    transform:
        translateY(-1px);

    background:
        var(--alaq-deep);
}


.place-order-button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


.back-to-cart-link {
    margin-top: 16px;

    display: block;

    color:
        var(--alaq-green);

    text-align: center;

    font-size: 9px;

    font-weight: 600;
}


.checkout-security-note {
    margin:
        24px
        0
        0;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(
            4,
            30,
            29,
            0.10
        );

    color:
        var(--alaq-muted);

    font-size: 8px;

    line-height: 1.7;
}


/* =========================================================
   MESSAGE
========================================================= */

.checkout-message {
    display: none;

    margin-bottom: 15px;

    padding:
        11px
        13px;

    font-size: 9px;

    line-height: 1.6;
}


.checkout-message.show {
    display: block;
}


.checkout-message.error {
    border:
        1px solid
        rgba(
            158,
            53,
            49,
            0.20
        );

    background:
        #fff2f0;

    color:
        #97332f;
}


/* =========================================================
   LOADING
========================================================= */

.checkout-loading {
    grid-column:
        1 / -1;

    padding:
        30px
        10px;

    color:
        var(--alaq-muted);

    text-align: center;

    font-size: 9px;
}


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

body.checkout-modal-open {
    overflow: hidden;
}


.checkout-modal {
    position: fixed;

    inset: 0;

    z-index: 2500;

    padding:
        20px;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity
        0.25s ease,
        visibility
        0.25s ease;
}


.checkout-modal.show {
    opacity: 1;

    visibility: visible;
}


.checkout-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            2,
            22,
            21,
            0.75
        );

    backdrop-filter:
        blur(7px);
}


.checkout-modal-card,
.checkout-success-card {
    position: relative;

    z-index: 2;

    width:
        min(
            100%,
            660px
        );

    max-height:
        calc(
            100vh - 40px
        );

    overflow-y: auto;

    padding:
        38px;

    background:
        var(--alaq-white);

    box-shadow:
        0 35px 90px
        rgba(
            0,
            0,
            0,
            0.28
        );
}


.checkout-modal-close {
    position: absolute;

    top: 12px;

    right: 15px;

    width: 35px;

    height: 35px;

    border: 0;

    background:
        transparent;

    color:
        var(--alaq-muted);

    font-size: 24px;
}


body[dir="rtl"]
.checkout-modal-close {
    right: auto;

    left: 15px;
}


.checkout-modal-header {
    margin-bottom: 28px;
}


.checkout-modal-header h2 {
    margin:
        0
        0
        8px;

    color:
        var(--alaq-deep);

    font-size: 27px;

    font-weight: 500;

    letter-spacing: -1px;
}


.checkout-modal-header p {
    max-width: 450px;

    margin: 0;

    color:
        var(--alaq-muted);

    font-size: 10px;

    line-height: 1.7;
}


/* =========================================================
   ADDRESS FORM
========================================================= */

.checkout-form-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        17px
        14px;
}


.checkout-form-group.full-width {
    grid-column:
        1 / -1;
}


.checkout-form-group label {
    display: block;

    margin-bottom: 6px;

    color:
        var(--alaq-deep);

    font-size: 9px;

    font-weight: 600;
}


.checkout-form-group input,
.checkout-form-group textarea {
    width: 100%;

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

    outline: none;

    background:
        var(--alaq-white);

    color:
        var(--alaq-text);

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

    font-size: 10px;
}


.checkout-form-group input {
    height: 45px;

    padding:
        0
        12px;
}


.checkout-form-group textarea {
    padding: 12px;

    resize: vertical;
}


.checkout-form-group input:focus,
.checkout-form-group textarea:focus {
    border-color:
        var(--alaq-green);

    box-shadow:
        0 0 0 3px
        rgba(
            11,
            74,
            71,
            0.06
        );
}


.default-address-option {
    margin:
        20px
        0;

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        var(--alaq-muted);

    font-size: 9px;
}


.default-address-option input {
    accent-color:
        var(--alaq-green);
}


.save-address-button {
    width: 100%;

    min-height: 49px;

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

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);

    font-size: 10px;

    font-weight: 700;
}


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

.checkout-success-card {
    width:
        min(
            100%,
            480px
        );

    padding:
        45px;

    text-align: center;
}


.checkout-success-logo {
    width: 100px;

    margin:
        0
        auto
        22px;
}


.checkout-success-logo img {
    width: 100%;
}


.checkout-success-card h2 {
    margin:
        0
        0
        10px;

    color:
        var(--alaq-deep);

    font-size: 32px;

    font-weight: 500;
}


.checkout-success-card p {
    margin:
        0
        0
        17px;

    color:
        var(--alaq-muted);

    font-size: 10px;

    line-height: 1.8;
}


.success-order-number {
    margin:
        20px
        0
        25px;

    padding:
        12px;

    background:
        var(--alaq-ivory);

    color:
        var(--alaq-green);

    font-size: 11px;

    font-weight: 700;
}


.success-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 9px;
}


.success-primary,
.success-secondary {
    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

    font-weight: 700;
}


.success-primary {
    background:
        var(--alaq-green);

    color:
        var(--alaq-white);
}


.success-secondary {
    border:
        1px solid
        var(--alaq-green);

    color:
        var(--alaq-green);
}


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

@media (
    max-width: 950px
) {

    .checkout-layout {
        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .checkout-summary {
        position: static;
    }

}


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

@media (
    max-width: 680px
) {

    .checkout-page-header {
        padding:
            65px
            18px
            45px;
    }


    .checkout-page-header h1 {
        font-size: 43px;
    }


    .checkout-layout {
        padding:
            35px
            18px
            80px;
    }


    .checkout-addresses {
        grid-template-columns:
            1fr;
    }


    .payment-methods {
        grid-template-columns:
            1fr;
    }


    .checkout-block-heading {
        flex-direction: column;
    }


    .checkout-form-grid {
        grid-template-columns:
            1fr;
    }


    .checkout-form-group.full-width {
        grid-column: auto;
    }


    .checkout-modal-card,
    .checkout-success-card {
        padding:
            35px
            20px;
    }


    .success-actions {
        grid-template-columns:
            1fr;
    }

}