/* =========================================================
   GLOBAL RESET
========================================================= */
*, *::before, *::after{
    box-sizing:border-box;
}

/* =========================================================
   BASE PAGE
========================================================= */
body{
    font-family:'Segoe UI', Arial, sans-serif;
    background:#f5f7fb;
    margin:0;
    color:#333;
    font-size:15px;
    line-height:1.6;
    -webkit-text-size-adjust:100%;
}

/* =========================================================
   WRAPPER / CONTAINER
========================================================= */
.wrapper,
.container{
    max-width:960px;
    margin:28px auto;
    padding:0 16px;
}

/* =========================================================
   CARD
========================================================= */
.card{
    background:#fff;
    padding:28px;
    border-radius:20px;
    margin-bottom:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}

/* =========================================================
   INFO / SUMMARY BOX
========================================================= */
.box,
.summary{
    background:#f4f0ff;
    padding:18px 20px;
    border-radius:16px;
    margin-bottom:22px;
}

.box div,
.summary div{
    margin:8px 0;
    font-size:14px;
}

/* =========================================================
   HEADINGS
========================================================= */
h1,h2,h3{
    margin:0 0 10px;
    font-weight:700;
    color:#111827;
}

/* =========================================================
   ROW / COLUMN (CARDS, PRICE, BUTTONS)
========================================================= */
.row{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}
.col{
    flex:1;
    min-width:260px;
}

/* =========================================================
   TEXT
========================================================= */
small{
    display:block;
    font-size:13px;
    color:#555;
    line-height:1.5;
    margin-top:6px;
}

.highlight{
    color:#6a11cb;
    font-weight:700;
}

/* =========================================================
   PRICE
========================================================= */
.price{
    font-size:18px;
    font-weight:700;
    color:#6a11cb;
}

/* =========================================================
   FORM LABELS
========================================================= */
label{
    display:block;
    font-size:14px;
    font-weight:600;
    margin-top:16px;
}
.req{color:#ef4444}

/* =========================================================
   INPUTS / SELECT / TEXTAREA
========================================================= */
input,
select,
textarea{
    width:100%;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid #d1d5db;
    font-size:15px;
    background:#fff;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:#6a11cb;
    box-shadow:0 0 0 3px rgba(106,17,203,.15);
}

textarea{
    min-height:90px;
    resize:vertical;
}

/* =========================================================
   RADIO / CHECKBOX
========================================================= */
.radio{
    margin:10px 0;
    font-size:14px;
}
.radio input{
    margin-right:8px;
    accent-color:#6a11cb;
}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
    padding:14px 28px;
    border-radius:999px;
    border:none;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
    width:100%;
}

.btn-primary,
.btn-online{
    background:linear-gradient(135deg,#6a11cb,#8e2de2);
    color:#fff;
    box-shadow:0 10px 24px rgba(106,17,203,.35);
}

.btn-secondary,
.btn-offline{
    background:#f3f4f6;
    color:#374151;
}

.btn:active{
    transform:scale(.98);
}

/* UTR input ke niche space */
#txtUTR{
    margin-bottom:18px;
}

/* Submit button se pehle gap */
.upi-submit-wrap{
    margin-top:20px;
}

/* =========================================================
   ACTION ROW (NEXT / BACK)
========================================================= */
.actions{
    display:flex;
    gap:14px;
    margin-top:26px;
}
.actions .btn{
    flex:1;
}

/* ASP.NET submit fix */
.actions input[type="submit"]{
    width:100%;
}

/* =========================================================
   MAP
========================================================= */
#map{
    width:100%;
    height:260px;
    border-radius:16px;
    margin-top:12px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}

/* =========================================================
   ERROR TEXT
========================================================= */
.error{
    color:#ef4444;
    font-size:13px;
    margin-top:6px;
}

/* =========================================================
   TABLET
========================================================= */
@media(max-width:768px){

    .card{
        padding:22px;
    }

    .col{
        min-width:100%;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */
@media(max-width:480px){

    body{
        font-size:14px;
    }

    .card{
        padding:18px;
        border-radius:16px;
    }

    .row{
        flex-direction:column;
        gap:12px;
    }

    .price{
        font-size:17px;
    }

    .btn{
        padding:16px 20px;
        font-size:16px;
    }

    .actions{
        flex-direction:column;
    }

    #map{
        height:220px;
    }
}

/* ===== Payment Options UI ===== */

.option-box{
    background:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:14px 16px;
    margin-bottom:14px;
}

.option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    cursor:pointer;
    font-size:14px;
}

.option:not(:last-child){
    margin-bottom:6px;
}

.option:hover{
    background:#f4f0ff;
}

.option input{
    accent-color:#6a11cb;
    transform:scale(1.1);
}

.option span{
    font-weight:600;
    color:#374151;
}

/* Mobile fine-tune */
@media(max-width:480px){
    .option{
        font-size:15px;
        padding:12px;
    }
}
/* ===== Selection Card UI ===== */

.hidden-radio{
    display:none;
}

.select-box{
    border:1.5px solid #e5e7eb;
    border-radius:16px;
    padding:14px 16px;
    margin-bottom:12px;
    cursor:pointer;
    transition:.2s;
    background:#fff;
}

.select-box:hover{
    border-color:#6a11cb;
    background:#f4f0ff;
}

.select-box.selected{
    border-color:#6a11cb;
    background:#f4f0ff;
    box-shadow:0 6px 18px rgba(106,17,203,.18);
}

.select-title{
    font-size:15px;
    font-weight:700;
    color:#111827;
}

.select-desc{
    font-size:13px;
    color:#6b7280;
    margin-top:4px;
}

/* Mobile */
@media(max-width:480px){
    .select-box{
        padding:16px;
    }
}
/* =========================================================
   STEP PROGRESS (1 > 2 > 3)
========================================================= */

.steps{
    display:flex;
    justify-content:space-between;
    position:relative;
    padding:10px 6px;
}

.steps::before{
    content:"";
    position:absolute;
    top:28px;
    left:8%;
    right:8%;
    height:2px;
    background:#e5e7eb;
    z-index:0;
}

.step{
    position:relative;
    z-index:1;
    text-align:center;
    font-size:13px;
    font-weight:600;
    color:#9ca3af;
    flex:1;
}

/* Circle */
.step::before{
    content:attr(data-step);
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    margin:0 auto 6px;
    border-radius:50%;
    background:#e5e7eb;
    color:#6b7280;
    font-weight:700;
}

/* Active step */
.step.active{
    color:#6a11cb;
}

.step.active::before{
    background:linear-gradient(135deg,#6a11cb,#8e2de2);
    color:#fff;
}

/* Completed step (optional – future use) */
.step.done::before{
    background:#6a11cb;
    color:#fff;
}

/* Mobile fine tuning */
/* =========================================================
   SMALL MOBILE – FONT FIX
========================================================= */
@media(max-width:480px){

    /* Base font thoda bada */
    body{
        font-size:15.5px;
        line-height:1.7;
    }

    /* Headings */
    h1{ font-size:20px; }
    h2{ font-size:18px; }
    h3{ font-size:16.5px; }

    /* Card text */
    .card{
        padding:18px;
        border-radius:16px;
        font-size:15px;
    }

    /* Labels & normal text */
    label,
    .box div,
    .summary div,
    small{
        font-size:14.5px;
    }

    /* Price highlight */
    .price{
        font-size:18px;
    }

    /* Inputs */
    input,
    select,
    textarea{
        font-size:15.5px;
        padding:15px 16px;
    }

    /* Buttons */
    .btn{
        padding:16px 22px;
        font-size:16px;
    }

    /* Payment options */
    .option{
        font-size:15.5px;
        padding:14px;
    }

    /* Selection cards */
    .select-title{
        font-size:15.5px;
    }
    .select-desc{
        font-size:14px;
    }

    /* Step progress */
    .step{
        font-size:13px;
    }
    .step::before{
        width:34px;
        height:34px;
        font-size:14px;
    }

    /* Samagri row */
    .samagri-row{
        font-size:15px;
    }

    #map{
        height:220px;
    }

    .actions{
        flex-direction:column;
    }
}

/* ===== STEP 3 FIX ===== */

/* Samagri row full width & alignment */
.samagri-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid #e5e7eb;
    font-size:14px;
}
.samagri-row span{
    margin-left:auto;
    font-weight:600;
}

/* Select cards spacing */
.select-box{
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:14px 16px;
    margin-bottom:12px;
    cursor:pointer;
    transition:.2s;
    background:#fff;
}
.select-box.selected{
    border-color:#6a11cb;
    background:#f4f0ff;
    box-shadow:0 0 0 2px rgba(106,17,203,.15);
}

/* Modal FORCE FIX */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:9999;
}
.modal-content{
    background:#fff;
    width:90%;
    max-width:900px;
    margin:40px auto;
    padding:20px;
    border-radius:18px;
}