/* =========================
   BASE
========================= */
#dsc-page body{
    font-family: Arial, Helvetica, sans-serif;
    background:#f4f6fa;
    margin:0;
}

#dsc-page *{
    box-sizing:border-box;
}

#dsc-page .pay_container{
    max-width:1200px;
    margin:15px auto;
    background:#fff;
    padding:20px;
    border-radius:10px;
}

#dsc-page .page-title{
    margin:2px 0 6px;
    text-align:center;
    color:#003366;
}

/* =========================
   GRID
========================= */
#dsc-page .grid{
    display:grid;
    grid-template-columns:1fr 0.9fr 1.1fr;
    gap:14px;
}

#dsc-page .box{
    border:1px solid #ddd;
    border-radius:8px;
    padding:14px;
}

/* =========================
   IMAGE
========================= */
#dsc-page .image-box img{
    width:100%;
    max-height:280px;
    object-fit:contain;
}

/* =========================
   OPTIONS – SMALL RECTANGULAR BUTTONS
========================= */
#dsc-page .options{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

#dsc-page .options input{
    display:none;
}

/* 🔥 SMALL RECTANGULAR LOOK */
#dsc-page .options label{
    min-width:64px;
    height:30px;
    padding:0 10px;
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:12px;
    font-weight:600;
    line-height:1;
    border-radius:4px;
    border:1px solid #aaa;
    cursor:pointer;
    background:#fff;
    user-select:none;
}

/* ACTIVE */
#dsc-page .options input:checked + label{
    background:#003366;
    color:#fff;
    border-color:#003366;
    box-shadow:0 0 4px rgba(0,51,102,.4);
}

/* DISABLED */
#dsc-page .options input:disabled + label{
    background:#eee;
    color:#999;
    border-color:#ccc;
    cursor:not-allowed;
}

/* =========================
   FLOATING INPUTS – MODERN
========================= */
#dsc-page .group{
    margin-bottom:12px;
}

#dsc-page .floating{
    position:relative;
    width:100%;
    margin-top:12px;
}

/* INPUT */
#dsc-page .floating input{
    width:100%;
    height:33px;
    padding:10px 12px;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:14px;
    outline:none;
    background:#fff;
    transition:border .25s, box-shadow .25s;
}

/* FOCUS */
#dsc-page .floating input:focus{
    border-color:#003366;
    box-shadow:0 0 20px rgba(0,51,102,.25);
}

/* LABEL = PLACEHOLDER */
#dsc-page .floating label{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px;
    color:#777;
    background:#fff;
    padding:0 4px;
    pointer-events:none;
    transition:.50s ease;
}

/* 🔥 ANIMATED FLOAT */
#dsc-page .floating input:focus + label,
#dsc-page .floating input:not(:placeholder-shown) + label{
    top:-4px;
    font-size:11px;
    color:#003366;
}

/* =========================
   INPUT ROWS
========================= */
#dsc-page .input-row{
    display:flex;
    gap:14px;
    width:100%;
}

#dsc-page .mobile-box{ flex:2.8; }
#dsc-page .email-box{ flex:7.2; }

#dsc-page .city-box{ flex:7.8; }
#dsc-page .pincode-box{ flex:2.2; }

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

/* REMOVE SPACE ABOVE & BELOW ORDER SUMMARY TITLE */
#dsc-page .summary-title,
#dsc-page .summary-title h3{
    margin:0 !important;
    padding:0 !important;
    line-height:1.1;
}


#dsc-page .summary-table{
	margin: 0 auto;          /* centers the table */
    text-align: center;     /* centers the content */
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}



#dsc-page .summary-table td{
	
    padding:5px 4px;
    line-height:1.5;
}

#dsc-page .summary-table span{
    margin-right:16px;
}

/* AMOUNT */
#dsc-page .price,
#dsc-page #totalPrice{
    font-size:22px;
    font-weight:800;
    color:#c40000;
    white-space:nowrap;
}

/* =========================
   BUTTONS
========================= */
#dsc-page .btn-row{
    display:flex;
    gap:10px;
    margin-top:14px;
}

#dsc-page .pay-btn{
    width:70%;
    padding:10px;
    font-size:16px;
    font-weight:700;
    letter-spacing:3px;
    border-radius:10px;
    border:none;
    background:#003366;
    color:#fff;
    cursor:pointer;
}

#dsc-page .reset-btn{
    width:30%;
    padding:10px;
    font-size:16px;
    font-weight:700;
    letter-spacing:3px;
    border-radius:10px;
    border:none;
   /* background:#DBDADA;*/
    color:#C1C0C0;
	/*border:2px solid #DBDADA;*/
    cursor:pointer;
}

#dsc-page .reset-btn:hover{
    color:#003366;
}

#dsc-page .pay-btn:hover{
    background:#c40;
}


/* =========================
   MOBILE RESPONSIVE
========================= */
@media (max-width: 900px){

    #dsc-page .grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    #dsc-page .image-box img{
        max-height:220px;
    }
}


/* =========================
   PRICE ANIMATION
========================= */
@keyframes pricePop{
    0%{ transform:scale(1); color:#c40000; }
    40%{ transform:scale(1.18); color:#ff0000; }
    100%{ transform:scale(1); color:#c40000; }
}

#dsc-page .price-animate{
    animation:pricePop .35s ease-in-out;
}

/* =========================
   ERROR SHAKE
========================= */
@keyframes shake{
    0%{ transform:translateX(0); }
    25%{ transform:translateX(-4px); }
    50%{ transform:translateX(4px); }
    75%{ transform:translateX(-4px); }
    100%{ transform:translateX(0); }
}

#dsc-page .error-shake{
    animation:shake .3s ease;
    border-color:#c40000 !important;
    box-shadow:0 0 6px rgba(196,0,0,.6);
}