/* =========================================================
   UNOMAS - SUBSCRIPTION FLOW
   subscribe.blade.php / pay.blade.php / success.blade.php
   ========================================================= */

:root{
    --usf-red:#e53935;
    --usf-red-2:#f04a45;
    --usf-red-dark:#c92d29;
    --usf-ink:#07101a;
    --usf-ink-2:#0b1723;
    --usf-text:#17212a;
    --usf-muted:#6e7a85;
    --usf-line:#e1e6eb;
    --usf-bg:#f5f7f9;
    --usf-green:#1aa86b;
}

/* ---------- shared hero ---------- */

.usf-hero{
    position:relative;
    overflow:hidden;
    padding:150px 0 70px;
    color:#fff;
    background:
        radial-gradient(circle at 82% 35%,rgba(229,57,53,.13),transparent 24%),
        linear-gradient(120deg,#050b12,#0b1723);
}

.usf-hero:after{
    content:"";
    position:absolute;
    width:560px;
    height:560px;
    right:-170px;
    top:-250px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:50%;
    box-shadow:
        0 0 0 70px rgba(255,255,255,.012),
        0 0 0 140px rgba(255,255,255,.007);
}

.usf-hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:60px;
    align-items:center;
}

.usf-hero-copy{
    max-width:780px;
}

.usf-hero h1{
    margin:10px 0 17px;
    font-size:50px;
    line-height:1.06;
    letter-spacing:-.04em;
}

.usf-hero h1 strong{
    color:var(--usf-red-2);
}

.usf-hero p{
    max-width:720px;
    margin:0;
    color:#aebac6;
    font-size:14px;
    line-height:1.75;
}

.usf-progress{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:29px;
}

.usf-progress>span{
    display:flex;
    align-items:center;
    gap:8px;
    color:#71808e;
    font-size:10px;
    font-weight:700;
}

.usf-progress>span b{
    width:28px;
    height:28px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.14);
    color:#82909d;
    font-size:9px;
}

.usf-progress>span.active{
    color:#fff;
}

.usf-progress>span.active b{
    border-color:var(--usf-red);
    background:var(--usf-red);
    color:#fff;
    box-shadow:0 0 0 5px rgba(229,57,53,.10);
}

.usf-progress>span.done{
    color:#bec8d1;
}

.usf-progress>span.done b{
    background:#172532;
    border-color:#314252;
    color:var(--usf-red);
}

.usf-progress>i{
    width:34px;
    height:1px;
    background:rgba(255,255,255,.12);
}

.usf-status-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    flex:0 0 52px;
    border-radius:13px;
    background:rgba(229,57,53,.11);
    border:1px solid rgba(229,57,53,.25);
    color:var(--usf-red);
    font-size:20px;
}

.usf-hero-status,
.usf-plan-hero-card{
    position:relative;
    z-index:2;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(8,18,28,.80);
    backdrop-filter:blur(14px);
    border-radius:15px;
    box-shadow:0 25px 65px rgba(0,0,0,.28);
}

.usf-hero-status{
    padding:22px;
    display:flex;
    align-items:center;
    gap:15px;
}

.usf-hero-status small,
.usf-plan-hero-card>span{
    display:block;
    color:#738291;
    font-size:8px;
    font-weight:800;
    letter-spacing:.13em;
}

.usf-hero-status b{
    display:block;
    margin:3px 0;
    color:#fff;
    font-size:17px;
}

.usf-hero-status span{
    color:#96a4b1;
    font-size:10px;
}

.usf-plan-hero-card{
    padding:26px;
}

.usf-plan-hero-card h2{
    margin:7px 0 18px;
    font-size:25px;
}

.usf-plan-hero-card strong{
    display:inline-block;
    font-size:39px;
    line-height:1;
}

.usf-plan-hero-card small{
    display:block;
    color:#81909d;
    margin-top:6px;
    font-size:10px;
}

.usf-success-hero{
    position:relative;
    z-index:2;
    max-width:820px;
    margin:0 auto;
    text-align:center;
}

.usf-success-mark{
    width:68px;
    height:68px;
    margin:0 auto 22px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(26,168,107,.13);
    border:1px solid rgba(26,168,107,.34);
    color:#35c985;
    font-size:25px;
    box-shadow:0 0 0 10px rgba(26,168,107,.035);
}

.usf-success-hero h1{
    margin-left:auto;
    margin-right:auto;
}

.usf-success-hero p{
    margin-left:auto;
    margin-right:auto;
}

.usf-progress--center{
    justify-content:center;
}

/* ---------- page layouts ---------- */

.sp-wrap,
.pay-wrap,
.sf-wrap{
    padding:64px 0 90px;
    background:var(--usf-bg);
    color:var(--usf-text);
}

.sp-container,
.pay-container{
    width:min(1180px,calc(100% - 36px));
    max-width:none;
    margin:0 auto;
    padding:0;
}

.sf-container{
    width:min(980px,calc(100% - 36px));
    max-width:none;
    margin:0 auto;
    padding:0;
}

.sp-grid,
.pay-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 370px;
    gap:24px;
    align-items:start;
}

/* ---------- cards ---------- */

.sp-card,
.pay-card,
.sf-card{
    background:#fff;
    border:1px solid var(--usf-line);
    border-radius:16px;
    box-shadow:0 14px 42px rgba(7,16,26,.055);
    overflow:hidden;
}

.sp-card__head,
.pay-card__head{
    padding:29px 32px 0;
}

.sp-card__body,
.pay-card__body{
    padding:30px 32px 34px;
}

.sp-title,
.pay-title,
.sf-title{
    margin:0;
    color:#121b24;
    font-size:24px;
    line-height:1.25;
    letter-spacing:-.02em;
}

.sp-sub,
.pay-sub,
.sf-sub{
    margin:7px 0 0;
    color:#7b8792;
    font-size:12px;
    line-height:1.65;
    opacity:1;
}

/* ---------- form sections ---------- */

#verify-wrapper,
#confirmation-wrapper,
#regform-wrapper,
#regbiz-wrapper{
    position:relative;
}

#verify-wrapper:before,
#confirmation-wrapper:before,
#regform-wrapper:before,
#regbiz-wrapper:before{
    content:"";
    display:block;
    width:42px;
    height:3px;
    margin-bottom:19px;
    border-radius:10px;
    background:linear-gradient(90deg,var(--usf-red),var(--usf-red-2));
}

.sp-row,
.pay-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.sp-label,
.pay-label{
    display:block;
    margin-bottom:7px;
    color:#303a43;
    font-size:11px;
    font-weight:700;
    opacity:1;
}

.sp-input,
.pay-input,
.sp-card input:not([type="checkbox"]):not([type="radio"]),
.sp-card select,
.sp-card textarea,
.pay-card input:not([type="checkbox"]):not([type="radio"]),
.pay-card select,
.pay-card textarea{
    width:100%;
    min-height:46px;
    height:auto;
    padding:11px 13px;
    border:1px solid #dbe1e6;
    border-radius:8px;
    background:#fbfcfd;
    color:#26313b;
    font-family:'Montserrat',sans-serif;
    font-size:12px;
    outline:0;
    box-shadow:none;
    transition:.18s ease;
}

.sp-input:focus,
.pay-input:focus,
.sp-card input:focus,
.sp-card select:focus,
.sp-card textarea:focus,
.pay-card input:focus,
.pay-card select:focus,
.pay-card textarea:focus{
    border-color:var(--usf-red);
    background:#fff;
    box-shadow:0 0 0 3px rgba(229,57,53,.07);
}

.sp-card .form-group,
.sp-card .input-field{
    margin-bottom:16px;
}

.sp-card label,
.pay-card label{
    color:#35404a;
    font-family:'Montserrat',sans-serif;
    font-size:11px;
    font-weight:700;
}

.sp-divider,
.pay-divider{
    height:1px;
    margin:22px 0;
    background:var(--usf-line);
}

/* ---------- buttons ---------- */

.sp-btn,
.pay-btn,
.sf-btn{
    min-height:47px;
    border:1px solid #dbe1e6;
    border-radius:9px;
    padding:11px 17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-family:'Montserrat',sans-serif;
    font-size:11px;
    font-weight:800;
    letter-spacing:.01em;
    text-decoration:none!important;
    cursor:pointer;
    transition:.18s ease;
}

.sp-btn--primary,
.pay-btn--primary,
.sf-btn--primary{
    color:#fff!important;
    border-color:var(--usf-red);
    background:linear-gradient(135deg,var(--usf-red),var(--usf-red-dark));
    box-shadow:0 9px 22px rgba(229,57,53,.16);
}

.sp-btn--primary:hover,
.pay-btn--primary:hover,
.sf-btn--primary:hover{
    color:#fff!important;
    transform:translateY(-1px);
    box-shadow:0 12px 27px rgba(229,57,53,.22);
}

.sp-btn--ghost,
.pay-btn--ghost,
.sf-btn--ghost{
    background:#fff;
    color:#27313a!important;
}

.sp-btn--ghost:hover,
.pay-btn--ghost:hover,
.sf-btn--ghost:hover{
    color:var(--usf-red)!important;
    border-color:#e8b8b5;
    background:#fff9f8;
}

.sp-btn--full,
.pay-btn--full{
    width:100%;
}

.sp-btn.disabled,
.pay-btn.disabled{
    opacity:.48;
    cursor:not-allowed;
}

/* ---------- user account ---------- */

.user-box{
    display:none;
    align-items:center;
    gap:12px;
    margin-bottom:24px;
    padding:14px 15px;
    border:1px solid var(--usf-line);
    border-radius:11px;
    background:#f8fafb;
}

.user-box.active{
    display:flex;
}

.user-avatar{
    width:42px;
    height:42px;
    flex:0 0 42px;
    overflow:hidden;
    border-radius:50%;
    background:#e8edf1;
}

.user-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.user-info{
    min-width:0;
    flex:1;
}

.user-name,
.user-email{
    margin:0;
}

.user-name{
    color:#1d2730;
    font-size:12px;
    font-weight:800;
}

.user-email{
    margin-top:2px;
    color:#7b8791;
    font-size:10px;
}

.logout-btn{
    border:0;
    background:transparent;
    color:var(--usf-red);
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}

/* ---------- summaries ---------- */

.sp-summary,
.pay-summary{
    padding:22px;
    border:1px solid var(--usf-line);
    border-radius:13px;
    background:#fafbfc;
}

.sp-summary__top,
.pay-summary__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:13px;
}

.sp-badge,
.pay-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 9px;
    border-radius:6px;
    background:#fff1f0;
    color:var(--usf-red);
    font-size:8px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.sp-planname,
.pay-planname{
    margin:9px 0 0;
    color:#17212a;
    font-size:18px;
    font-weight:800;
}

.sp-planmeta,
.pay-planmeta{
    margin:5px 0 0;
    color:#77838e;
    font-size:10px;
    line-height:1.55;
    opacity:1;
}

.sp-list,
.pay-list{
    list-style:none;
    padding:0;
    margin:17px 0 0;
}

.sp-list li,
.pay-list li{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:8px 0;
    color:#66727d;
    font-size:10px;
    line-height:1.45;
    opacity:1;
}

.sp-list i,
.pay-list i{
    margin-top:2px;
    color:var(--usf-green);
}

.sp-totals,
.pay-totals{
    margin-top:10px;
}

.sp-totals__row,
.pay-totals__row{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin:8px 0;
    color:#697580;
    font-size:11px;
}

.sp-totals__row strong,
.pay-totals__row strong{
    color:#1e2831;
    font-weight:800;
}

.sp-total,
.pay-total{
    padding-top:10px;
    border-top:1px solid var(--usf-line);
    color:#17212a;
    font-size:15px;
    font-weight:800;
}

/* ---------- trust ---------- */

.sp-trust,
.pay-trust{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:16px;
}

.sp-trust__item,
.pay-trust__item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:11px 12px;
    border:1px solid var(--usf-line);
    border-radius:9px;
    background:#fff;
}

.sp-trust__item i,
.pay-trust__item i{
    margin-top:2px;
    color:var(--usf-red);
}

.sp-trust__item strong,
.pay-trust__item strong{
    display:block;
    color:#25303a;
    font-size:10px;
}

.sp-trust__item span,
.pay-trust__item span{
    display:block;
    margin-top:1px;
    color:#89939d;
    font-size:9px;
    opacity:1;
}

.sp-mini,
.pay-mini,
.sf-help{
    margin-top:13px;
    padding:16px;
    border:1px solid var(--usf-line);
    border-radius:10px;
    background:#fff;
}

.sp-mini h4,
.pay-mini h4,
.sf-help h4{
    margin:0 0 7px;
    color:#202a33;
    font-size:11px;
    font-weight:800;
}

.sp-mini p,
.pay-mini p,
.sf-help p{
    margin:0;
    color:#7b8791;
    font-size:10px;
    line-height:1.65;
    opacity:1;
}

/* ---------- coupon ---------- */

.sp-coupon-row{
    display:flex;
    align-items:center;
    gap:9px;
}

.sp-coupon-result{
    display:none;
    margin-top:9px;
    padding:10px 12px;
    border:1px solid #dfe5e9;
    border-radius:8px;
    background:#f7f9fa;
    font-size:10px;
    font-weight:700;
}

/* ---------- payment methods ---------- */

.list-payment{
    list-style:none;
    padding:0!important;
    margin:0;
}

.list-payment>li{
    display:none;
    padding:17px;
    border:1px solid var(--usf-line);
    border-radius:10px;
    background:#fafbfc;
}

.list-payment p{
    color:#6e7a85;
    font-size:11px;
    line-height:1.6;
}

ul.bank_accounts{
    list-style:none;
    padding:0;
    margin:14px 0 0;
}

ul.bank_accounts li{
    min-height:auto!important;
    max-width:none!important;
    margin:0 0 9px!important;
    padding:12px;
    display:flex;
    align-items:center;
    gap:13px;
    border:1px solid #e0e5e9;
    border-radius:9px;
    background:#fff;
}

ul.bank_accounts li img{
    width:58px!important;
    height:58px;
    object-fit:contain;
}

ul.bank_accounts li span{
    color:#68747f;
    font-size:10px;
    line-height:1.45;
}

.qr_code{
    width:256px;
    max-width:100%;
    margin:auto;
}

.pay-note{
    margin-top:11px;
    padding:11px 13px;
    border:1px solid #e4e8ec;
    border-radius:9px;
    background:#f8fafb;
    color:#5e6974;
    font-size:10px;
    font-weight:600;
}

.pay-note.ok{
    border-color:rgba(26,168,107,.25);
    background:rgba(26,168,107,.07);
}

/* ---------- success ---------- */

.sf-card__head{
    padding:28px 30px;
    display:flex;
    gap:14px;
    align-items:flex-start;
    border-bottom:1px solid var(--usf-line);
}

.sf-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(26,168,107,.10);
    border:1px solid rgba(26,168,107,.20);
    color:var(--usf-green);
    font-size:18px;
}

.sf-body{
    padding:30px;
}

.sf-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:11px;
}

.sf-box{
    padding:15px;
    border:1px solid var(--usf-line);
    border-radius:10px;
    background:#fafbfc;
}

.sf-label{
    display:block;
    margin-bottom:5px;
    color:#8b959e;
    font-size:8px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    opacity:1;
}

.sf-value{
    color:#202a33;
    font-size:12px;
    font-weight:800;
}

.sf-note{
    margin-top:14px;
    padding:13px 15px;
    border:1px solid rgba(26,168,107,.24);
    border-radius:9px;
    background:rgba(26,168,107,.07);
    color:#4d6258;
    font-size:10px;
    line-height:1.6;
    font-weight:600;
    opacity:1;
}

.sf-note.warn{
    border-color:rgba(229,57,53,.24);
    background:rgba(229,57,53,.065);
    color:#6a5452;
}

.sf-actions{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:19px;
}

.sf-help{
    margin-top:18px;
    padding:19px;
    background:#07101a;
    border-color:#07101a;
}

.sf-help h4{
    color:#fff;
}

.sf-help p{
    color:#a1aeba;
}

/* ---------- fixes for generated field templates ---------- */

.sp-card .row.sign-row{
    margin-left:-7px;
    margin-right:-7px;
}

.sp-card .row.sign-row>[class*="col"],
.sp-card .row.sign-row>.input-field{
    padding-left:7px;
    padding-right:7px;
}

.sp-card .select-wrapper,
.sp-card .input-field{
    width:100%;
}

.sp-card input[type="checkbox"]{
    accent-color:var(--usf-red);
}

.sp-muted{
    margin-top:10px;
    color:#89939d;
    font-size:9px;
    line-height:1.5;
    opacity:1;
}

/* ---------- responsive ---------- */

@media(max-width:1050px){
    .sp-grid,
    .pay-grid{
        grid-template-columns:1fr;
    }

    .sp-grid>aside,
    .pay-grid>aside{
        order:-1;
    }
}

@media(max-width:768px){
    .usf-hero{
        padding:120px 0 55px;
    }

    .usf-hero-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .usf-hero h1{
        font-size:38px;
    }

    .usf-hero-status,
    .usf-plan-hero-card{
        max-width:420px;
    }

    .sp-wrap,
    .pay-wrap,
    .sf-wrap{
        padding:38px 0 65px;
    }

    .sp-card__head,
    .pay-card__head,
    .sp-card__body,
    .pay-card__body,
    .sf-card__head,
    .sf-body{
        padding-left:21px;
        padding-right:21px;
    }

    .sp-row,
    .pay-row,
    .sf-grid{
        grid-template-columns:1fr;
    }

    .sp-coupon-row{
        align-items:stretch;
        flex-direction:column;
    }

    .usf-progress{
        gap:7px;
        overflow-x:auto;
        padding-bottom:3px;
    }

    .usf-progress>i{
        width:18px;
        flex:0 0 18px;
    }

    .sf-actions{
        flex-direction:column;
    }

    .sf-btn{
        width:100%;
    }
}

@media(max-width:480px){
    .usf-hero h1{
        font-size:33px;
    }

    .usf-progress>span{
        font-size:9px;
    }

    .usf-progress>span b{
        width:25px;
        height:25px;
    }
}