.subscription-wrapper{

    max-width:1400px;

    margin:auto;

    padding:40px;

}

.subscription-header{

    text-align:center;

    margin-bottom:60px;

}

.subscription-header h1{

    font-size:48px;

    font-weight:800;

    color:#0d6efd;

}

.subscription-header h2{

    font-size:34px;

    margin-top:10px;

}

.subscription-header p{

    width:700px;

    max-width:100%;

    margin:20px auto;

    color:#777;

    line-height:1.8;

}

/* ==========================
        PROGRESS BAR
========================== */

.subscription-progress{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:70px;

}

.progress-step{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.progress-step span{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#ddd;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}

.progress-step.active span{

    background:#0d6efd;

    color:white;

}

.progress-step p{

    margin-top:12px;

    font-weight:600;

}

.progress-line{

    width:120px;

    height:4px;

    background:#ddd;

    margin:0 15px;

}

.subscription-footer{

    text-align:center;

    margin-top:40px;

}

.subscription-footer button{

    padding:14px 60px;

    border-radius:50px;

}

/* ==========================================================
                    PLAN GRID
========================================================== */

.plan-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    margin-top:50px;

}

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

.plan-card{

    position:relative;

    background:#ffffff;

    border-radius:25px;

    padding:35px;

    border:2px solid #ececec;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    transition:.35s ease;

    overflow:hidden;

}

.plan-card:hover{

    transform:translateY(-12px);

    box-shadow:0 22px 50px rgba(13,110,253,.18);

    border-color:#0d6efd;

}

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

.plan-header{

    text-align:center;

    margin-bottom:30px;

}

.plan-header h2{

    font-size:30px;

    font-weight:700;

    margin-bottom:10px;

}

.plan-header h1{

    font-size:42px;

    color:#0d6efd;

    font-weight:800;

}

.plan-header p{

    margin-top:15px;

    font-size:17px;

    color:#555;

}

.plan-header small{

    color:#999;

}

/* ==========================================================
                BADGES
========================================================== */

.popular-badge{

    display:inline-block;

    padding:8px 18px;

    background:#198754;

    color:#fff;

    border-radius:50px;

    font-size:13px;

    margin-bottom:18px;

}

.premium-badge{

    display:inline-block;

    padding:8px 18px;

    background:linear-gradient(
        135deg,
        #FFD700,
        #FFB400
    );

    color:#222;

    border-radius:50px;

    font-size:13px;

    margin-bottom:18px;

    font-weight:bold;

}

/* ==========================================================
                CATEGORY & SERVICE
========================================================== */

.plan-section{

    margin-top:28px;

}

.plan-section h5{

    margin-bottom:15px;

    font-size:17px;

    font-weight:700;

    color:#222;

}

.plan-section ul{

    list-style:none;

    padding:0;

    margin:0;

}

.plan-section li{

    margin-bottom:12px;

    color:#666;

    font-size:15px;

}

/* ==========================================================
                BUTTON
========================================================== */

.select-plan-btn{

    width:100%;

    margin-top:30px;

    border:none;

    border-radius:14px;

    padding:15px;

    background:#0d6efd;

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.select-plan-btn:hover{

    background:#0b5ed7;

}

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

.plan-card.selected{

    border:3px solid #0d6efd;

    background:#f4f8ff;

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(13,110,253,.22);

}

.plan-card.selected::after{

    content:"✔ Selected";

    position:absolute;

    top:18px;

    right:18px;

    background:#0d6efd;

    color:white;

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:bold;

}

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

.plan-card:nth-child(3){

    background:linear-gradient(
        180deg,
        #fffdf4,
        #ffffff
    );

    border-color:#FFD700;

}

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

.plan-card:nth-child(4){

    background:linear-gradient(
        180deg,
        #f7f1ff,
        #ffffff
    );

    border-color:#9c6bff;

}

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

@media(max-width:992px){

    .plan-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
                CONTINUE BUTTON
========================================================== */

.subscription-next-btn{

    min-width:220px;

    font-size:17px;

    font-weight:700;

    border-radius:50px;

    padding:15px 35px;

}

.subscription-next-btn:disabled{

    opacity:.45;

    cursor:not-allowed;

}

/*==========================================================
            STEP 2
==========================================================*/

.subscription-details-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

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

}

.details-header{

    text-align:center;

    margin-bottom:40px;

}

.details-header h2{

    font-size:32px;

    font-weight:700;

}

.details-header p{

    color:#777;

    margin-top:10px;

}

.subscription-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.subscription-grid .form-group{

    display:flex;

    flex-direction:column;

}

.subscription-grid label{

    margin-bottom:8px;

    font-weight:600;

}

.subscription-grid input,

.subscription-grid select{

    height:55px;

}

.wizard-buttons{

    display:flex;

    justify-content:space-between;

    margin-top:50px;

}

@media(max-width:768px){

.subscription-grid{

    grid-template-columns:1fr;

}

}

/*==========================================================
                REVIEW PAGE
==========================================================*/

.review-card{

    background:#fff;

    border-radius:20px;

    padding:40px;

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

}

.review-header{

    text-align:center;

    margin-bottom:40px;

}

.review-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-top:35px;

}

.review-section{

    margin-top:35px;

}

.review-section h5{

    margin-bottom:18px;

    color:#0d6efd;

}

#subscription-summary{

    background:#f8f9fa;

    padding:25px;

    border-radius:15px;

}

@media(max-width:768px){

.review-grid{

    grid-template-columns:1fr;

}

}

.progress-step.active span{

    background:#0d6efd;

    color:#fff;

}

.progress-step.active p{

    color:#0d6efd;

    font-weight:700;

}

.progress-line.active{

    background:#0d6efd;

}

/*==========================================================
                SUCCESS PAGE
==========================================================*/

.subscription-success-card{

    max-width:700px;

    margin:50px auto;

    padding:60px;

    background:#fff;

    border-radius:25px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.success-icon{

    font-size:90px;

    color:#198754;

    margin-bottom:25px;

}

.subscription-success-card h2{

    font-size:36px;

    font-weight:700;

    margin-bottom:15px;

}

.subscription-success-card p{

    color:#666;

    margin-bottom:40px;

}

.success-summary{

    background:#f8f9fa;

    border-radius:18px;

    padding:30px;

    margin-bottom:40px;

}

.summary-row{

    display:flex;

    justify-content:space-between;

    padding:15px 0;

    border-bottom:1px solid #e6e6e6;

}

.summary-row:last-child{

    border-bottom:none;

}

.success-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/* ================================
   SUBSCRIPTION BANNER
================================ */

.subscription-booking-banner{

    position: relative;
    overflow: hidden;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 18px 24px;

    margin-bottom: 25px;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #3b82f6,
        #60a5fa
    );

    color: #fff;

    box-shadow: 0 12px 28px rgba(37,99,235,.18);

    transition: .35s ease;
}

.subscription-booking-banner:hover{

    transform: translateY(-3px);

    box-shadow: 0 16px 35px rgba(37,99,235,.22);

}

.subscription-booking-banner::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

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

    border-radius:50%;

    top:-100px;

    right:-80px;

}

.membership-badge{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:6px 14px;

    border-radius:40px;

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

    font-size:.8rem;

    margin-bottom:10px;

}

.subscription-left{

    position:relative;

    z-index:2;

}

.subscription-left h2{

    font-size:2rem;
    font-weight:700;
    margin-bottom:4px;

}

.subscription-left h4{

    font-size:2rem;

    font-weight:700;

    margin-bottom:8px;

}

.subscription-left p{

    margin-bottom:8px;
    
    font-size:.92rem;

    margin-bottom:12px;

    color:rgba(255,255,255,.9);

    opacity:.95;

}

.subscription-left small{

    font-size:.95rem;

    opacity:.85;

}

.subscription-right .form-check{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 22px;

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

    border-radius:50px;

    backdrop-filter:blur(10px);

}

.subscription-right span{

    color:white;

    font-weight:600;

    font-size:1rem;

}

.subscription-right .form-check-input{

    width:55px;

    height:28px;

    cursor:pointer;

}

.subscription-progress{

    margin-top:10px;

}

.subscription-progress-bar{

    height:8px;

    border-radius:20px;

}

.progress-info{

    font-size:.82rem;

    margin-bottom:6px;

}

.subscription-switch-card{

    padding:14px 18px;

    min-width:170px;

    border-radius:16px;

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

    backdrop-filter:blur(10px);

}

.subscription-switch-card .form-check-input{

    width:46px;
    height:24px;

}

.subscription-benefits{

    margin-top:12px;

    gap:8px;

}

.subscription-benefits span{

    padding:5px 10px;

    font-size:.72rem;

    border-radius:18px;

}
/* ==========================
   LAUNDRY ITEM CARD
========================== */

.subscription-free{

    display:inline-flex;
    align-items:center;
    gap:6px;

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    color:var(--white);

    padding:8px 16px;

    border-radius:50px;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:0 8px 18px rgba(34,197,94,.25);

}

.item-quantity{

    font-size:1.1rem;

    font-weight:700;

    color:#1e293b;

}

.subscription-covered{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

}

.subscription-covered-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 14px;

    border-radius:30px;

    background:#dcfce7;

    color:#15803d;

    font-size:.78rem;

    font-weight:700;

    border:1px solid #bbf7d0;

}

.subscription-not-covered{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 14px;

    border-radius:30px;

    background:#fff7ed;

    color:#ea580c;

    border:1px solid #fed7aa;

    font-size:.78rem;

    font-weight:700;

}

.item-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

}

.subscription-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:5px 12px;

    border-radius:30px;

    background:#dcfce7;

    color:#15803d;

    border:1px solid #bbf7d0;

    font-size:.75rem;

    font-weight:700;

}

.subscription-badge i{

    color:#fbbf24;

}

.item-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

}

.subscription-covered-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    background:#dcfce7;

    color:#15803d;

    border:1px solid #bbf7d0;

    padding:5px 12px;

    border-radius:30px;

    font-size:.72rem;

    font-weight:700;

}

.subscription-covered-badge i{

    color:#fbbf24;

}

.subscription-not-covered{

    display:inline-flex;

    align-items:center;

    gap:6px;

    background:#fff7ed;

    color:#ea580c;

    border:1px solid #fed7aa;

    padding:5px 12px;

    border-radius:30px;

    font-size:.72rem;

    font-weight:700;

}

.subscription-required{

    display:inline-flex;

    align-items:center;

    gap:6px;

    background:#eff6ff;

    color:#2563eb;

    border:1px solid #bfdbfe;

    padding:5px 12px;

    border-radius:30px;

    font-size:.72rem;

    font-weight:700;

}

.service-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    margin-bottom:5px;

}

.service-covered{

    display:inline-flex;

    align-items:center;

    gap:5px;

    background:#dcfce7;

    color:#15803d;

    padding:4px 10px;

    border-radius:20px;

    font-size:.72rem;

    font-weight:700;

}

.service-covered i{

    color:#fbbf24;

}

.service-upgrade{

    display:inline-flex;

    align-items:center;

    gap:5px;

    background:#fff7ed;

    color:#ea580c;

    padding:4px 10px;

    border-radius:20px;

    font-size:.72rem;

    font-weight:700;

}

.service-paid{

    display:inline-flex;

    align-items:center;

    gap:5px;

    background:#eff6ff;

    color:#2563eb;

    padding:4px 10px;

    border-radius:20px;

    font-size:.72rem;

    font-weight:700;

}

.subscription-title{

    font-size:2rem;

    font-weight:800;

    line-height:1.2;

    word-break:break-word;

}

.subscription-title{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.title-icon{

    flex-shrink:0;

}

.subscription-plan-name{

    color:#64748b;

    font-size:1rem;

    font-weight:500;

}

.upgrade-actions{

    display:flex;

    justify-content:space-between;

    gap:15px;

}

.upgrade-actions .btn{

    flex:1;

}

.table{

    margin-bottom:0;

}

.table th{

    color:#64748b;

    font-weight:600;

    width:60%;

}

.table td{

    font-weight:700;

    color:#0f172a;

}


.subscription-summary-card .summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

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

}

.subscription-summary-card .summary-row:last-child{

    border-bottom:none;

}

.subscription-summary-card span{

    color:var(--text-light);

}

.subscription-summary-card strong{

    color:var(--text);

}
/*=========================================================
            SUBSCRIPTION SUMMARY
=========================================================*/

.subscription-summary-card{

    width:100%;

    padding:20px;

    border-radius:18px;

    background:var(--surface);

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

    overflow:hidden;

}

.summary-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

}

.summary-title i{

    color:#2563EB;

    font-size:20px;

}

.summary-title h4{

    margin:0;

}

.summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:15px 0;

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

}

.summary-row span{

    flex:1;

}

.summary-row strong{

    text-align:right;

}

.summary-row:last-child{

    border-bottom:none;

}

.summary-row span{

    color:var(--text-light);

}

.summary-row strong{

    color:var(--text);

}



/*=========================================================
                REVIEW PLAN CARD
=========================================================*/

.review-plan-card{

    background: var(--surface);

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

    border-radius: 20px;

    padding: 22px;

}

.review-plan-header{

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 20px;

}

.review-plan-header h3{

    margin: 0;

    font-size: 2rem;

    font-weight: 700;

    color: var(--text);

}

.review-plan-price{

    font-size: 2rem;

    font-weight: 800;

    color: var(--primary);

}

.review-plan-badge{

    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    padding: 8px 18px;

    border-radius: 30px;

    background: linear-gradient(135deg,#2563EB,#3B82F6);

    color: #fff;

    font-weight: 600;

}

.review-plan-info{

    display:flex;

    gap:14px;

    margin-top:20px;

}

.review-info-item{

    flex:1;

    background:#243447;

    border-radius:16px;

    padding:18px 12px;

    text-align:center;

}

.payment-btn{

    background: linear-gradient(
        135deg,
        #16A34A,
        #22C55E
    );

    color:#ffffff;

    font-weight:700;

    border:none;

}

.payment-btn i{

    color:#ffffff;

}

.payment-btn:hover{

    background: linear-gradient(
        135deg,
        #15803D,
        #16A34A
    );

}

/*=========================================================
            MOBILE UPGRADE CARDS
=========================================================*/

.mobile-upgrade-card,
.mobile-payment-card{

    display:none;

}

.upgrade-info-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 18px;

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

    background:var(--surface);

}

.upgrade-info-card:first-child{

    border-radius:18px 18px 0 0;

}

.upgrade-info-card:last-child{

    border-bottom:none;

    border-radius:0 0 18px 18px;

}

.upgrade-info-card span{

    color:var(--text-light);

}

.upgrade-info-card strong{

    color:var(--text);

}

.payment-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    background:var(--surface);

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

}

.payment-row:first-child{

    border-radius:18px 18px 0 0;

}

.payment-row:last-child{

    border-bottom:none;

    border-radius:0 0 18px 18px;

}

.payment-highlight{

    background:#DCFCE7;

}

.payment-highlight strong{

    color:#166534;

    font-weight:700;

}