/* =========================================================
   GATRAD KRUPA
   PREMIUM CHECKOUT
   PROFESSIONAL RESPONSIVE DESIGN
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

    --gk-green: #536442;
    --gk-green-dark: #354329;
    --gk-green-soft: #eef2e9;

    --gk-red: #9b3d3d;
    --gk-red-soft: #fff4f4;

    --gk-gold: #b08b45;

    --gk-text: #20241d;
    --gk-muted: #74786f;

    --gk-border: #e4e6df;
    --gk-bg: #f7f7f4;
    --gk-white: #ffffff;

    --gk-shadow:
        0 18px 55px rgba(30, 35, 25, .08);

    --gk-radius: 16px;

}


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

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #fafaf8 0%,
            #f4f5f1 100%
        );

    color: var(--gk-text);

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

    -webkit-font-smoothing: antialiased;

}


button,
input,
textarea {

    font: inherit;

}


button {

    border: 0;

}


a {

    color: inherit;

    text-decoration: none;

}


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

.checkout-header {

    position: sticky;

    top: 0;

    z-index: 100;

    height: 74px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 clamp(20px, 5vw, 72px);

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

    border-bottom:
        1px solid rgba(70, 80, 60, .10);

    backdrop-filter:
        blur(16px);

}


.brand {

    color: var(--gk-green);

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 3px;

}


.back-store {

    color: var(--gk-muted);

    font-size: 12px;

    font-weight: 600;

    transition:
        color .25s ease,
        transform .25s ease;

}


.back-store:hover {

    color: var(--gk-green);

    transform:
        translateX(-3px);

}


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

.checkout-page {

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;

    padding:
        58px 24px 90px;

}


/* =========================================================
   LOGIN REQUIRED
   ========================================================= */

.login-required {

    max-width: 540px;

    margin:
        70px auto;

    padding: 48px 32px;

    text-align: center;

    background: var(--gk-white);

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

    border-radius: 22px;

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

    animation:
        gkFadeUp .55s ease both;

}


.login-required[hidden] {

    display: none;

}


.lock-icon {

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 22px;

    border-radius: 50%;

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

    font-size: 25px;

}


.login-required h1 {

    margin-bottom: 10px;

    font-size: 28px;

}


.login-required p {

    max-width: 400px;

    margin:
        0 auto 26px;

    color: var(--gk-muted);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   CHECKOUT CONTENT
   ========================================================= */

.checkout-content[hidden] {

    display: none;

}


.checkout-content {

    animation:
        gkFadeUp .55s ease both;

}


/* =========================================================
   TITLE
   ========================================================= */

.checkout-title {

    margin-bottom: 32px;

}


.checkout-title span {

    display: inline-block;

    margin-bottom: 9px;

    color: var(--gk-green);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

}


.checkout-title h1 {

    margin-bottom: 9px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight: 500;

    letter-spacing: -.5px;

}


.checkout-title p {

    color: var(--gk-muted);

    font-size: 14px;

}


/* =========================================================
   JUNAGADH WARNING
   ========================================================= */

.delivery-warning {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 16px;

    padding: 18px 20px;

    background:
        var(--gk-red-soft);

    border:
        1px solid #efcccc;

    border-left:
        4px solid var(--gk-red);

    border-radius: 12px;

    color: #713434;

}


.delivery-warning-icon {

    flex: 0 0 27px;

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--gk-red);

    color: white;

    font-size: 13px;

    font-weight: 800;

}


.delivery-warning strong {

    font-size: 13px;

}


.delivery-warning p {

    margin-top: 5px;

    font-size: 12px;

    line-height: 1.7;

}


.delivery-warning p strong {

    color: var(--gk-red);

}


/* =========================================================
   VERIFIED
   ========================================================= */

.delivery-verified {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 22px;

    padding: 15px 18px;

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

    border:
        1px solid #d7dfce;

    border-radius: 12px;

    color: var(--gk-green);

    animation:
        gkVerified .4s ease both;

}


.delivery-verified[hidden] {

    display: none;

}


.verified-icon {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--gk-green);

    color: white;

    font-size: 14px;

    font-weight: 800;

}


.delivery-verified strong {

    display: block;

    margin-bottom: 3px;

    font-size: 12px;

}


.delivery-verified p {

    color: #70786a;

    font-size: 11px;

}


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

.checkout-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(320px, .8fr);

    gap: 25px;

    align-items: start;

}


/* =========================================================
   CARD
   ========================================================= */

.checkout-card {

    background:
        var(--gk-white);

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

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

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

}


.checkout-card > h2 {

    padding:
        25px 28px 0;

    font-size: 18px;

    font-weight: 700;

}


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

#checkoutForm {

    padding:
        24px 28px 30px;

}


.logged-in-user {

    margin-bottom: 22px;

    padding:
        10px 13px;

    border-radius: 8px;

    background:
        #f7f8f5;

    color: var(--gk-muted);

    font-size: 11px;

}


.form-group {

    margin-bottom: 19px;

}


.form-group label {

    display: block;

    margin-bottom: 8px;

    color: #34382f;

    font-size: 12px;

    font-weight: 700;

}


.form-group input,
.form-group textarea {

    width: 100%;

    outline: none;

    border:
        1px solid #dfe2da;

    border-radius: 9px;

    background:
        #fff;

    color: var(--gk-text);

    font-size: 13px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.form-group input {

    height: 49px;

    padding:
        0 14px;

}


.form-group textarea {

    min-height: 105px;

    padding:
        13px 14px;

    resize: vertical;

    line-height: 1.6;

}


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

    color: #a3a69e;

}


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

    border-color:
        var(--gk-green);

    background:
        #fff;

    box-shadow:
        0 0 0 4px
        rgba(83, 100, 66, .08);

}


/* =========================================================
   CITY VALID / INVALID
   ========================================================= */

#customerCity.gk-city-valid {

    border-color:
        var(--gk-green);

    background:
        #f7faf5;

    box-shadow:
        0 0 0 3px
        rgba(83, 100, 66, .07);

}


#customerCity.gk-city-invalid {

    border-color:
        var(--gk-red);

    background:
        #fff8f8;

    box-shadow:
        0 0 0 3px
        rgba(155, 61, 61, .06);

}


/* =========================================================
   TWO COLUMNS
   ========================================================= */

.two-columns {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

}


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

.payment-title {

    margin:
        30px 0 13px;

    font-size: 16px;

    font-weight: 700;

}


/* =========================================================
   COD VERIFICATION
   ========================================================= */

.cod-verification {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

    padding:
        14px 15px;

    border:
        1px solid #d9e0d3;

    border-radius: 10px;

    background:
        #f7faf5;

}


.cod-verification > span {

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--gk-green);

    color: white;

    font-size: 13px;

    font-weight: 800;

}


.cod-verification strong {

    display: block;

    margin-bottom: 3px;

    color: var(--gk-green);

    font-size: 12px;

}


.cod-verification p {

    color: var(--gk-muted);

    font-size: 10px;

}


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

.payment-options {

    margin-bottom: 23px;

}


.payment-option {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 67px;

    padding:
        12px 14px;

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

    border-radius: 10px;

    background:
        #fbfcfa;

    cursor: default;

}


.payment-option input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.payment-radio {

    flex: 0 0 18px;

    width: 18px;

    height: 18px;

    border:
        2px solid var(--gk-green);

    border-radius: 50%;

    position: relative;

}


.payment-option input:checked
+ .payment-radio::after {

    content: "";

    position: absolute;

    width: 8px;

    height: 8px;

    top: 3px;

    left: 3px;

    border-radius: 50%;

    background:
        var(--gk-green);

}


.payment-option strong {

    display: block;

    margin-bottom: 4px;

    font-size: 12px;

}


.payment-option small {

    color: var(--gk-muted);

    font-size: 10px;

}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.primary-button {

    width: 100%;

    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background:
        var(--gk-green);

    color: white;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.2px;

    cursor: pointer;

    box-shadow:
        0 9px 22px
        rgba(83, 100, 66, .18);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;

}


.primary-button:hover {

    background:
        var(--gk-green-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 28px
        rgba(83, 100, 66, .24);

}


.primary-button:active {

    transform:
        translateY(0);

}


.primary-button:disabled {

    opacity: .55;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;

}


/* =========================================================
   ORDER BUTTON LOADING
   ========================================================= */

#placeOrderButton:disabled {

    position: relative;

}


#placeOrderButton:disabled::after {

    content: "";

    width: 15px;

    height: 15px;

    margin-left: 10px;

    border:
        2px solid rgba(255,255,255,.45);

    border-top-color:
        white;

    border-radius: 50%;

    animation:
        gkSpin .7s linear infinite;

}


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

.checkout-security {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    margin-top: 17px;

}


.checkout-security span {

    font-size: 11px;

}


.checkout-security p {

    color: #92958e;

    font-size: 10px;

}


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

.order-summary {

    position: sticky;

    top: 96px;

    padding-bottom: 24px;

    overflow: hidden;

}


.order-summary > h2 {

    padding:
        25px 24px 20px;

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

}


/* =========================================================
   ORDER ITEMS
   ========================================================= */

#orderItems {

    padding:
        6px 24px;

}


.checkout-cart-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        15px 0;

    border-bottom:
        1px solid #eeeeea;

}


.checkout-cart-item strong {

    color: var(--gk-text);

    font-size: 12px;

}


.checkout-cart-item > strong {

    white-space: nowrap;

    color: var(--gk-green);

}


.empty-cart {

    padding:
        25px 0;

    color: var(--gk-muted);

    font-size: 12px;

    text-align: center;

}


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

.summary-line {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    margin:
        0 24px;

    padding:
        15px 0;

    border-bottom:
        1px solid #eeeeea;

    color: var(--gk-muted);

    font-size: 12px;

}


.summary-line strong {

    color: var(--gk-text);

    font-weight: 600;

}


.summary-total {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin:
        0 24px;

    padding:
        22px 0;

    font-size: 15px;

    font-weight: 800;

}


.summary-total strong {

    color: var(--gk-green);

    font-size: 20px;

}


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

.summary-cod {

    display: flex;

    align-items: center;

    gap: 11px;

    margin:
        0 24px;

    padding:
        13px;

    border-radius: 10px;

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

}


.summary-cod > span {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--gk-green);

    color: white;

    font-size: 12px;

}


.summary-cod strong {

    display: block;

    margin-bottom: 2px;

    color: var(--gk-green);

    font-size: 11px;

}


.summary-cod p {

    color: var(--gk-muted);

    font-size: 9px;

}


/* =========================================================
   FOCUS ACCESSIBILITY
   ========================================================= */

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

    outline:
        3px solid
        rgba(83, 100, 66, .22);

    outline-offset:
        2px;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes gkFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(18px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes gkVerified {

    from {

        opacity: 0;

        transform:
            translateY(-6px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes gkSpin {

    to {

        transform:
            rotate(360deg);

    }

}


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

@media (
    max-width: 900px
) {

    .checkout-grid {

        grid-template-columns:
            1fr;

    }


    .order-summary {

        position:
            static;

    }

}


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

@media (
    max-width: 600px
) {

    .checkout-header {

        height: 64px;

        padding:
            0 17px;

    }


    .brand {

        font-size: 12px;

        letter-spacing:
            2px;

    }


    .back-store {

        font-size: 10px;

    }


    .checkout-page {

        padding:
            35px 14px 60px;

    }


    .checkout-title {

        margin-bottom:
            24px;

    }


    .checkout-title h1 {

        font-size:
            32px;

        line-height:
            1.12;

    }


    .delivery-warning {

        padding:
            15px;

    }


    .delivery-warning p {

        font-size:
            11px;

    }


    .checkout-card > h2 {

        padding:
            21px 18px 0;

        font-size:
            16px;

    }


    #checkoutForm {

        padding:
            20px 18px 23px;

    }


    .two-columns {

        grid-template-columns:
            1fr;

        gap: 0;

    }


    .form-group {

        margin-bottom:
            17px;

    }


    .order-summary {

        margin-top:
            0;

    }


    .order-summary > h2 {

        padding:
            21px 18px;

    }


    #orderItems {

        padding:
            4px 18px;

    }


    .summary-line {

        margin:
            0 18px;

    }


    .summary-total {

        margin:
            0 18px;

    }


    .summary-cod {

        margin:
            0 18px;

    }


    .login-required {

        margin:
            40px auto;

        padding:
            38px 22px;

    }


    .login-required h1 {

        font-size:
            25px;

    }

}


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

@media (
    max-width: 380px
) {

    .checkout-title h1 {

        font-size:
            28px;

    }


    .checkout-page {

        padding-left:
            11px;

        padding-right:
            11px;

    }


    .checkout-card {

        border-radius:
            13px;

    }


    .primary-button {

        font-size:
            10px;

    }

}


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

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

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

        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}