/*
Theme Name: UstazPod Fee Portal
Theme URI: https://ustazpod.com/
Author: UstazPod
Description: UstazPod-branded student fee payment portal theme for WordPress and WooCommerce.
Version: 1.1.0
License: GPL-2.0-or-later
Text Domain: ustazpod-fee
*/
:root{
    --up-primary:#1fa2d6;
    --up-primary-dark:#147daf;
    --up-bg:#f4fbfe;
    --up-text:#0f172a;
    --up-muted:#64748b;
    --up-border:#dbeafe;
    --up-white:#ffffff;
    --up-success:#166534;
    --up-success-bg:#ecfdf5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;min-height:100%}
body{
    font-family:Poppins,Arial,sans-serif;
    background:
        radial-gradient(circle at 8% 35%,rgba(31,162,214,.08),transparent 24%),
        radial-gradient(circle at 92% 70%,rgba(20,125,175,.06),transparent 22%),
        var(--up-bg);
    color:var(--up-text);
    -webkit-font-smoothing:antialiased;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.35;
    background-image:radial-gradient(rgba(20,125,175,.12) .7px,transparent .7px);
    background-size:18px 18px;
    mask-image:linear-gradient(to bottom,black,transparent 75%);
}
a{color:var(--up-primary)}
button,input,select{font:inherit}

.up-container{width:min(100% - 32px,1100px);margin:0 auto}

.up-top-section{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,rgb(31,162,214),rgb(20,125,175));
    padding:54px 20px 104px;
    color:#fff;
    border-radius:0 0 42px 42px;
    box-shadow:0 14px 35px rgba(20,125,175,.16);
}
.up-header-glow{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    pointer-events:none;
}
.up-header-glow-one{width:260px;height:260px;right:-95px;top:-135px;box-shadow:0 0 0 38px rgba(255,255,255,.035)}
.up-header-glow-two{width:180px;height:180px;left:-80px;bottom:-120px;box-shadow:0 0 0 28px rgba(255,255,255,.035)}
.up-brand{text-align:center;position:relative;z-index:1}
.up-brand-mark{
    width:58px;height:58px;margin:0 auto 14px;border-radius:18px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 10px 28px rgba(7,75,110,.15);
    backdrop-filter:blur(8px);
}
.up-brand-cap{font-size:27px;line-height:1}
.up-brand-title{font-weight:700;font-size:34px;letter-spacing:-.7px;margin:0}
.up-subtitle{opacity:.92;margin:7px 0 0;font-size:15px}
.up-header-trust{
    display:inline-flex;align-items:center;gap:11px;margin-top:18px;
    padding:8px 13px;border:1px solid rgba(255,255,255,.2);
    border-radius:999px;background:rgba(255,255,255,.10);
    font-size:11px;font-weight:500;letter-spacing:.2px;
    backdrop-filter:blur(8px);
}
.up-trust-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:5px;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.up-trust-divider{width:1px;height:12px;background:rgba(255,255,255,.25)}

.up-main{position:relative;margin-top:-66px;padding:0 0 55px;z-index:2}
.up-payment-card{
    position:relative;
    max-width:700px;
    margin:0 auto;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(219,234,254,.95);
    border-radius:28px;
    padding:38px;
    box-shadow:0 24px 60px rgba(15,23,42,.10),0 5px 18px rgba(31,162,214,.08);
}
.up-payment-card:before{
    content:"";
    position:absolute;
    left:38px;right:38px;top:0;height:3px;border-radius:0 0 8px 8px;
    background:linear-gradient(90deg,var(--up-primary),var(--up-primary-dark));
}
.up-card-heading{text-align:center;margin-bottom:27px}
.up-card-eyebrow{
    display:inline-flex;align-items:center;gap:7px;
    color:var(--up-primary-dark);font-size:11px;font-weight:700;
    letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px;
}
.up-card-eyebrow:before{content:"";width:22px;height:1px;background:currentColor}
.up-card-eyebrow:after{content:"";width:22px;height:1px;background:currentColor}
.up-payment-card h1,.up-payment-card h2,.up-payment-card h3{margin-top:0}
.up-card-heading h2{font-size:25px;letter-spacing:-.35px;margin:0 0 7px}
.up-card-heading p{margin:0;color:var(--up-muted);font-size:13px}

.up-search-label{
    display:block;margin:0 0 8px 3px;font-size:12px;font-weight:600;color:#334155;
}
.up-input-wrap{position:relative;margin-bottom:13px}
.up-input-wrap i{
    position:absolute;left:17px;top:50%;transform:translateY(-50%);
    color:var(--up-primary);font-style:normal;font-size:17px;z-index:1;
}
.up-input,.up-payment-card input[type=text],
.up-payment-card input[type=email],
.up-payment-card input[type=number],
.up-payment-card select{
    width:100%;height:56px;border-radius:15px;border:1px solid var(--up-border);
    padding:0 17px 0 47px;font-size:14px;outline:none;background:#fbfdff;
    color:var(--up-text);transition:border-color .2s,box-shadow .2s,background .2s,transform .2s;
}
.up-input::placeholder{color:#94a3b8}
.up-input:hover,.up-payment-card input:hover,.up-payment-card select:hover{background:#fff;border-color:#bfdbfe}
.up-input:focus,.up-payment-card input:focus,.up-payment-card select:focus{
    border-color:var(--up-primary);
    background:#fff;
    box-shadow:0 0 0 .22rem rgba(31,162,214,.13);
}
.up-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:55px;padding:0 22px;border:0;border-radius:15px;
    background:linear-gradient(135deg,var(--up-primary),var(--up-primary-dark));
    color:#fff;font-weight:600;font-size:14px;text-decoration:none;
    cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s;
    box-shadow:0 9px 20px rgba(31,162,214,.20);
}
.up-btn:hover{background:linear-gradient(135deg,var(--up-primary),var(--up-primary-dark));color:#fff;transform:translateY(-2px);box-shadow:0 13px 26px rgba(20,125,175,.24);filter:saturate(1.04)}
.up-btn:active{transform:translateY(0);box-shadow:0 6px 14px rgba(20,125,175,.18)}
.up-btn:disabled{opacity:.7;cursor:wait;transform:none}
.up-btn-full{width:100%}

.up-student-result{
    margin-top:22px;border:1px solid #e2e8f0;border-radius:19px;padding:21px;
    background:linear-gradient(180deg,#fff,#fbfdff);
    box-shadow:0 8px 24px rgba(15,23,42,.05);
    animation:upResultIn .28s ease-out;
}
@keyframes upResultIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.up-result-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.up-result-title strong{font-size:14px}
.up-result-badge{
    display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;
    background:rgba(31,162,214,.09);color:var(--up-primary-dark);font-size:10px;font-weight:700;
}
.up-result-badge:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.up-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}
.up-table th,.up-table td{padding:12px 10px;border-bottom:1px solid #edf2f7;text-align:left;font-size:13px}
.up-table th{width:38%;font-weight:600;color:#64748b}
.up-table td{font-weight:500;color:#1e293b}
.up-table tr:last-child th,.up-table tr:last-child td{border-bottom:0}
.up-table tr:hover th,.up-table tr:hover td{background:rgba(31,162,214,.025)}
.up-payment-card .up-paid-message{
    margin-top:18px;padding:13px 14px;border-radius:13px;
    background:var(--up-success-bg);color:var(--up-success);
    border:1px solid #bbf7d0;font-size:12px;font-weight:500;
}
.up-footer-note{
    display:flex;align-items:center;justify-content:center;gap:7px;
    text-align:center;color:var(--up-muted);font-size:11px;line-height:1.6;margin:23px 0 0;
}
.up-footer-note:before{content:"🔒";font-size:12px}

.site-footer{text-align:center;padding:25px 16px 34px;color:var(--up-muted);font-size:12px}
.up-footer-inner{display:flex;align-items:center;justify-content:center;gap:10px}
.up-footer-inner strong,.up-footer-inner span{display:block}
.up-footer-inner strong{color:#475569;font-size:12px}
.up-footer-inner span{font-size:10px;margin-top:2px}
.up-footer-shield{
    width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    color:var(--up-primary-dark);background:rgba(31,162,214,.10);font-weight:800;font-size:14px;
}

.woocommerce .site-main,.woocommerce-page .site-main{width:min(100% - 32px,1100px);margin:40px auto}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
    background:var(--up-primary);color:#fff;border-radius:14px;padding:13px 20px;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{
    background:var(--up-primary-dark);color:#fff;
}
.woocommerce-message{border-top-color:var(--up-primary)}
.woocommerce-info{border-top-color:var(--up-primary)}

@media(max-width:600px){
    .up-top-section{padding:38px 16px 86px;border-radius:0 0 30px 30px}
    .up-brand-title{font-size:29px}
    .up-brand-mark{width:52px;height:52px;border-radius:16px}
    .up-header-trust{font-size:10px}
    .up-main{margin-top:-52px}
    .up-payment-card{padding:31px 18px 24px;border-radius:22px}
    .up-payment-card:before{left:22px;right:22px}
    .up-card-heading h2{font-size:22px}
    .up-table th,.up-table td{padding:10px 7px;font-size:12px}
    .up-table th{width:40%}
}
@media(max-width:380px){
    .up-container{width:min(100% - 22px,1100px)}
    .up-payment-card{padding-left:14px;padding-right:14px}
    .up-table th,.up-table td{font-size:11px}
}