html,body{margin:0!important;padding:0!important;background:#f7f7f7!important;}
body.pw-checkout-standalone{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
/* =========================================================
   PlatterWala Website — Checkout v1.0.2
========================================================= */

.pw-checkout-page{
    min-height:70vh;
    background:#f7f7f7;
    padding:0 18px 70px;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    color:#171717;
}

.pw-checkout-brandbar{
    width:calc(100% + 36px);
    margin-left:-18px;
    min-height:68px;
    padding:0 5%;
    box-sizing:border-box;
    background:#090909;
    border-bottom:3px solid #ff6b00;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.pw-checkout-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff !important;
    text-decoration:none !important;
}

.pw-brand-mark{
    width:38px;
    height:38px;
    border:2px solid #ff6b00;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#ff6b00;
    font-weight:950;
    font-size:13px;
}

.pw-brand-logo{
    width:44px;
    height:44px;
    object-fit:contain;
    display:block;
    flex:0 0 44px;
}

.pw-brand-name{
    font-size:23px;
    font-weight:950;
    letter-spacing:-1px;
}

.pw-brand-name span{
    color:#ff6b00;
}

.pw-brand-secure{
    color:#ddd;
    font-size:11px;
    font-weight:700;
}

.pw-checkout-wrap{
    width:min(1180px,100%);
    margin:25px auto 0;
    display:grid;
    grid-template-columns:minmax(0,1fr) 350px;
    gap:20px;
    align-items:start;
}

.pw-checkout-main{min-width:0}

.pw-checkout-back{
    display:inline-flex;
    margin-bottom:13px;
    color:#555 !important;
    text-decoration:none !important;
    font-size:13px;
    font-weight:700;
}

.pw-checkout-heading{margin-bottom:18px}
.pw-checkout-heading h1{
    margin:0;
    color:#171717;
    font-size:30px;
    font-weight:950;
}
.pw-checkout-heading p{
    margin:5px 0 0;
    color:#777;
    font-size:13px;
}

.pw-checkout-card{
    margin-bottom:14px;
    padding:18px;
    background:#fff;
    border:1px solid #e9e9e9;
    border-radius:13px;
    box-shadow:0 2px 8px rgba(0,0,0,.03);
}

.pw-checkout-card-head{margin-bottom:16px}
.pw-checkout-card-head>div{
    display:flex;
    align-items:center;
    gap:10px;
}
.pw-checkout-card-head strong{
    color:#171717;
    font-size:17px;
    font-weight:900;
}
.pw-step-no{
    width:28px;height:28px;border-radius:50%;
    display:grid;place-items:center;
    background:#ff6b00;color:#fff;
    font-size:13px;font-weight:900;
}

.pw-order-types{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}
.pw-order-type{
    min-height:75px;
    padding:11px;
    border:1px solid #dedede;
    border-radius:10px;
    background:#fff;
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
    cursor:pointer;
    transition:.15s ease;
}
.pw-order-type.active{
    border-color:#ff6b00;
    box-shadow:0 0 0 2px rgba(255,107,0,.10);
    background:#fffaf6;
}
.pw-order-type-icon{
    width:40px;height:40px;flex:0 0 40px;
    border-radius:50%;
    display:grid;place-items:center;
    background:#fff3ea;font-size:20px;
}
.pw-order-type span:last-child{
    display:flex;flex-direction:column;gap:3px;
}
.pw-order-type strong{color:#222;font-size:13px}
.pw-order-type small{color:#777;font-size:10px}

.pw-checkout-notice{
    margin-top:12px;padding:10px 12px;border-radius:8px;
    background:#fff4eb;color:#9a4c00;font-size:12px;line-height:1.4;
}

.pw-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
}
.pw-form-grid label{display:flex;flex-direction:column;gap:6px}
.pw-form-grid label span{
    color:#333;font-size:12px;font-weight:800;
}
.pw-form-grid input,
.pw-form-grid textarea,
.pw-notes{
    width:100%;box-sizing:border-box;
    border:1px solid #ddd !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#222 !important;
    padding:11px 12px !important;
    outline:none !important;
    box-shadow:none !important;
    font-size:13px !important;
}
.pw-form-grid input:focus,
.pw-form-grid textarea:focus,
.pw-notes:focus{
    border-color:#ff6b00 !important;
}
.pw-field-full{grid-column:1/-1}
.pw-notes{resize:vertical}

.pw-payment-preview{margin-bottom:0}
.pw-payment-coming{
    padding:14px;border-radius:9px;background:#f8f8f8;
    display:flex;align-items:center;gap:12px;
}
.pw-payment-coming>span{font-size:25px}
.pw-payment-coming div{display:flex;flex-direction:column;gap:3px}
.pw-payment-coming strong{font-size:13px}
.pw-payment-coming small{color:#777;font-size:11px}

.pw-checkout-summary{
    position:sticky;top:15px;padding:16px;
    background:#fff;border:1px solid #e6e6e6;border-radius:13px;
    box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.pw-summary-head{
    padding-bottom:12px;border-bottom:1px solid #eee;
    display:flex;justify-content:space-between;gap:10px;
}
.pw-summary-head strong{color:#171717;font-size:18px;font-weight:900}
.pw-summary-head span{color:#777;font-size:11px}
.pw-summary-items{max-height:270px;overflow:auto}
.pw-summary-empty{padding:35px 10px;text-align:center;color:#888;font-size:12px}
.pw-summary-item{
    padding:11px 0;border-bottom:1px solid #f0f0f0;
    display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px;
}
.pw-summary-item img{
    width:54px;height:54px;border-radius:8px;object-fit:cover;background:#eee;
}
.pw-summary-item-info{min-width:0}
.pw-summary-item-name{
    display:block;color:#222;font-size:12px;font-weight:800;line-height:1.25;
}
.pw-summary-item-meta{margin-top:4px;color:#777;font-size:11px}

.pw-summary-lines{padding-top:10px}
.pw-summary-lines>div{
    min-height:28px;display:flex;align-items:center;justify-content:space-between;
    gap:15px;color:#666;font-size:12px;
}
.pw-summary-lines>div strong{color:#333}
.pw-summary-discount strong{color:#168548!important;font-weight:800}
.pw-summary-discount small{font-size:10px;color:#777;font-weight:700}
.pw-summary-total{
    margin-top:6px;padding-top:12px;border-top:1px solid #ddd;
}
.pw-summary-total span{color:#171717;font-size:17px;font-weight:950}
.pw-summary-total strong{color:#171717 !important;font-size:20px;font-weight:950}

.pw-place-order{
    width:100%;min-height:49px;margin-top:12px;border:0;border-radius:9px;
    background:#ff6b00;color:#fff;display:flex;align-items:center;
    justify-content:center;gap:10px;font-size:14px;font-weight:900;cursor:pointer;
}
.pw-place-order:hover{background:#f15f00}
.pw-place-order span{font-size:19px}
.pw-checkout-secure{
    margin-top:10px;text-align:center;color:#168548;font-size:10px;
}

@media (max-width:900px){
    .pw-checkout-wrap{grid-template-columns:1fr}
    .pw-checkout-summary{position:relative;top:auto}
}

@media (max-width:767px){
    .pw-checkout-page{padding:0 10px 85px}

    .pw-checkout-brandbar{
        width:calc(100% + 20px);
        margin-left:-10px;
        padding:0 15px;
        min-height:58px;
    }

    .pw-brand-logo{width:40px;height:40px;flex-basis:40px}
    .pw-brand-name{font-size:20px}
    .pw-brand-secure{font-size:10px}
    .pw-checkout-wrap{margin-top:18px}
    .pw-checkout-heading h1{font-size:25px}

    /* =====================================================
       MOBILE — ORDER TYPE
       All three options stay in one compact row.
    ===================================================== */
    .pw-checkout-card{
        padding:12px;
        margin-bottom:12px;
        border-radius:11px;
    }

    .pw-checkout-card-head{
        margin-bottom:10px;
    }

    .pw-checkout-card-head>div{
        gap:8px;
    }

    .pw-checkout-card-head strong{
        font-size:16px;
    }

    .pw-step-no{
        width:26px;
        height:26px;
        font-size:12px;
    }

    .pw-order-types{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:6px;
        width:100%;
    }

    .pw-order-type{
        min-width:0;
        min-height:68px;
        height:68px;
        padding:7px 5px;
        border-radius:9px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:4px;
        text-align:center;
    }

    .pw-order-type-icon{
        width:30px;
        height:30px;
        flex:0 0 30px;
        font-size:16px;
    }

    .pw-order-type span:last-child{
        min-width:0;
        width:100%;
        gap:1px;
        align-items:center;
    }

    .pw-order-type strong{
        font-size:11px;
        line-height:1.15;
        white-space:nowrap;
    }

    .pw-order-type small{
        font-size:8px;
        line-height:1.1;
        white-space:nowrap;
    }

    /* =====================================================
       MOBILE — CUSTOMER DETAILS
       Compact two-column fields where possible.
    ===================================================== */
    .pw-form-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }

    .pw-form-grid label{
        gap:4px;
        min-width:0;
    }

    .pw-form-grid label span{
        font-size:11px;
        line-height:1.2;
    }

    .pw-form-grid input,
    .pw-form-grid textarea,
    .pw-notes{
        padding:9px 10px !important;
        min-height:40px;
        font-size:12px !important;
    }

    .pw-field-full{
        grid-column:1/-1;
    }

    .pw-checkout-notice{
        margin-top:9px;
        padding:8px 10px;
        font-size:11px;
    }

    .pw-checkout-summary{
        padding:12px;
    }
}


/* Order-type dependent customer fields */
.pw-form-grid label[hidden]{display:none!important;}
.pw-form-grid label[style*="display: none"]{display:none!important;}