/* ===========================================================
   VERSION 2.0
   Refund Portal UI
=========================================================== */

:root{

    --primary:#0F62FE;
    --primary-dark:#0043CE;

    --success:#24A148;
    --danger:#DA1E28;

    --bg:#F4F7FC;
    --card:#FFFFFF;

    --border:#DDE4EE;

    --text:#21272A;
    --muted:#697077;

    --radius:18px;

    --shadow:
    0 10px 30px rgba(0,0,0,.08);

    --transition:.30s ease;

}

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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);

font-family:'Poppins',sans-serif;

color:var(--text);

line-height:1.6;

overflow-x:hidden;

}

/* ===========================================================
   BACKGROUND CIRCLES
=========================================================== */

.bg-circle{

position:fixed;

border-radius:50%;

filter:blur(70px);

z-index:-1;

opacity:.30;

}

.bg-circle-1{

width:300px;

height:300px;

background:#5AA9FF;

top:-80px;

left:-80px;

}

.bg-circle-2{

width:400px;

height:400px;

background:#D7E8FF;

right:-120px;

bottom:-120px;

}

/* ===========================================================
   CONTAINER
=========================================================== */

.container{

max-width:1180px;

}

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

.app-card{

background:var(--card);

border-radius:var(--radius);

box-shadow:var(--shadow);

border:none;

overflow:hidden;

transition:var(--transition);

}

.app-card:hover{

transform:translateY(-3px);

}

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

.app-header{

background:

linear-gradient(

135deg,

#0F62FE,

#4589FF

);

padding:38px;

color:white;

}

.app-header h2{

font-size:34px;

font-weight:700;

margin-bottom:8px;

}

.app-header p{

font-size:17px;

opacity:.92;

margin:0;

}

/* ===========================================================
   BADGE
=========================================================== */

.badge{

padding:12px 18px;

border-radius:30px;

font-weight:600;

}

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

form{

padding:40px;

}

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

.section-title{

font-size:24px;

font-weight:600;

color:var(--primary);

margin-bottom:25px;

display:flex;

align-items:center;

gap:10px;

}

.section-title i{

font-size:24px;

}

/* ===========================================================
   TYPOGRAPHY
=========================================================== */

h1,h2,h3,h4,h5{

font-weight:600;

}

p{

color:var(--muted);

}

small{

color:var(--muted);

}

/* ===========================================================
   HR
=========================================================== */

hr{

border:none;

height:1px;

background:#E5EAF2;

margin:50px 0;

}

/* ===========================================================
   LINKS
=========================================================== */

a{

text-decoration:none;

transition:var(--transition);

}

a:hover{

opacity:.85;

}

/* ===========================================================
   ICONS
=========================================================== */

.bi{

vertical-align:middle;

}

/* ===========================================================
   SECURE BOX
=========================================================== */

.secure-box{

display:flex;

align-items:center;

gap:18px;

padding:20px;

background:#EEF7FF;

border:1px solid #CBE3FF;

border-radius:16px;

height:100%;

}

.secure-box i{

font-size:34px;

color:var(--primary);

}

.secure-box strong{

display:block;

font-size:16px;

color:#111;

}

.secure-box p{

margin:0;

font-size:14px;

}

/* ===========================================================
   ALERT
=========================================================== */

.alert{

border-radius:16px;

padding:22px;

font-size:15px;

}

/* ===========================================================
   ANIMATION
=========================================================== */

.fade-up{

animation:fadeUp .45s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(20px);

}

100%{

opacity:1;

transform:translateY(0);

}

}
/* ===========================================================
   FORM LABELS
=========================================================== */

.form-label{

    font-weight:600;

    color:#343A40;

    margin-bottom:10px;

    font-size:15px;

}

.form-label i{

    color:var(--primary);

}

/* ===========================================================
   INPUTS
=========================================================== */

.form-control,
.form-select{

    height:56px;

    border-radius:14px;

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

    background:#fff;

    padding-left:18px;

    font-size:15px;

    transition:all .30s ease;

    box-shadow:none;

}

.form-control::placeholder{

    color:#A2A9B0;

}

.form-control:hover,
.form-select:hover{

    border-color:#8AB4FF;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(15,98,254,.10);

}

textarea.form-control{

    min-height:120px;

    resize:none;

}

/* ===========================================================
   VALIDATION
=========================================================== */

.form-control.is-valid{

    border-color:#24A148;

}

.form-control.is-invalid{

    border-color:#DA1E28;

}

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

.payment-card{

    position:relative;

    background:#FFFFFF;

    border:2px solid #E6EBF2;

    border-radius:18px;

    padding:30px;

    text-align:center;

    cursor:pointer;

    transition:all .30s ease;

    height:100%;

}

.payment-card:hover{

    transform:translateY(-5px);

    border-color:#8AB4FF;

    box-shadow:0 15px 30px rgba(15,98,254,.12);

}

.payment-card.active-payment{

    border:2px solid var(--primary);

    background:#EEF5FF;

    box-shadow:0 10px 25px rgba(15,98,254,.18);

}

.payment-card h5{

    margin-top:18px;

    margin-bottom:8px;

    font-size:20px;

    font-weight:600;

}

.payment-card p{

    margin:0;

    font-size:14px;

}

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

.payment-icon{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F3F8FF;

    color:var(--primary);

    font-size:34px;

}

.active-payment .payment-icon{

    background:var(--primary);

    color:white;

}

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

.payment-check{

    position:absolute;

    top:18px;

    right:18px;

    color:#24A148;

    font-size:22px;

    display:none;

}

.active-payment .payment-check{

    display:block;

}

/* ===========================================================
   BANK / CARD SECTION
=========================================================== */

#bankSection,
#cardSection{

    background:#FBFCFE;

    border:1px solid #E5EBF4;

    border-radius:18px;

    padding:28px;

    margin-top:25px;

    animation:fadeUp .35s ease;

}

/* ===========================================================
   INFORMATION BOX
=========================================================== */

.info-box{

    background:#F8FAFD;

    border:1px solid #E6EDF5;

    border-radius:16px;

    padding:22px;

}

.info-box h5{

    margin-bottom:10px;

}

.info-box ul{

    margin:0;

    padding-left:20px;

}

.info-box li{

    margin-bottom:6px;

}

/* ===========================================================
   CHECKBOX
=========================================================== */

.form-check{

    padding:18px;

    border-radius:14px;

    background:#F9FBFD;

    border:1px solid #E6EDF5;

}

.form-check-input{

    margin-top:.30rem;

    cursor:pointer;

}

.form-check-label{

    cursor:pointer;

    font-size:15px;

}

/* ===========================================================
   TRANSITIONS
=========================================================== */

#bankSection,
#cardSection,
.payment-card{

    transition:all .30s ease;

}

/* ===========================================================
   BUTTONS
=========================================================== */

.btn{

    transition:all .30s ease;

    font-weight:600;

    border-radius:14px;

}

.btn-primary{

    background:linear-gradient(135deg,#34C759,#7ED957);

    border:none;

    color:#FFFFFF;

    height:58px;

    min-width:260px;

    font-size:17px;

    font-weight:600;

    letter-spacing:.3px;

    box-shadow:0 10px 25px rgba(52,199,89,.30);

}

.btn-primary:hover{

    background:linear-gradient(135deg,#0353E9,#0F62FE);

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(15,98,254,.35);

}

.btn-primary:active{

    transform:scale(.98);

}

.btn-primary:disabled{

    opacity:.75;

    cursor:not-allowed;

}

/* ===========================================================
   FOOTER
=========================================================== */

.footer{

    margin-top:60px;

    padding:25px 0;

    color:#6B7280;

    font-size:14px;

    border-top:1px solid #E5EAF2;

}

.footer i{

    color:var(--primary);

}

.footer span{

    display:inline-block;

    margin-bottom:5px;

}

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

#loadingOverlay{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

    backdrop-filter:blur(4px);

}

.loading-box{

    width:360px;

    background:#FFF;

    border-radius:20px;

    padding:40px;

    text-align:center;

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.loading-box h5{

    margin-top:20px;

    font-weight:600;

}

.loading-box p{

    margin-top:10px;

    font-size:14px;

}

/* ===========================================================
   SPINNER
=========================================================== */

.spinner-border{

    width:4rem;

    height:4rem;

}

/* ===========================================================
   UTILITIES
=========================================================== */

.shadow-soft{

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.rounded-xl{

    border-radius:20px;

}

.text-small{

    font-size:14px;

}

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media(max-width:991px){

.app-header{

padding:28px;

text-align:center;

}

.app-header h2{

font-size:28px;

}

form{

padding:28px;

}

.payment-card{

padding:24px;

}

.loading-box{

width:90%;

}

.btn-primary{

width:100%;

min-width:auto;

}

}

@media(max-width:768px){

.container{

padding-left:15px;

padding-right:15px;

}

.app-header{

padding:22px;

}

.app-header h2{

font-size:24px;

}

.app-header p{

font-size:15px;

}

.section-title{

font-size:20px;

}

.section-title i{

font-size:20px;

}

form{

padding:22px;

}

.form-control,

.form-select{

height:52px;

font-size:15px;

}

.payment-card{

padding:22px;

}

.payment-icon{

width:60px;

height:60px;

font-size:28px;

}

.payment-card h5{

font-size:18px;

}

.btn-primary{

height:54px;

font-size:16px;

}

.footer{

text-align:center;

}

.footer .text-md-end{

text-align:center!important;

margin-top:10px;

}

}

@media(max-width:576px){

.app-header h2{

font-size:22px;

}

.badge{

font-size:12px!important;

padding:8px 14px;

}

.payment-card{

margin-bottom:15px;

}

.loading-box{

padding:28px;

}

.loading-box h5{

font-size:18px;

}

}

/* ===========================================================
   SCROLLBAR
=========================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#EDF2F7;

}

::-webkit-scrollbar-thumb{

background:#AAB7C8;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#7D8DA3;

}