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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

/*==================================================
BODY
==================================================*/

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(145deg,#e5ecf8,#f5f7fb);
}

/*==================================================
MOBILE FRAME
==================================================*/

.mobile-frame{
    width:400px;
    min-height:100vh;
    background:#f5f6fb;
    position:relative;
    overflow:hidden;
 
    box-shadow:0 18px 45px rgba(48,65,110,.22);
}

/*==================================================
HEADER
==================================================*/
 .top-section{
    margin-top: 0rem;
    height:100px;
    background:linear-gradient(135deg,#8cb5ff,#6f97f3);
    border-bottom-left-radius:50px;
    border-bottom-right-radius:50px;

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

    padding:0 20px;
}

.header-content{
    display:flex;
    align-items:center;
    width:100%;
    max-width:340px;
}

.logo-circle{
    width:85px;
    height:85px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:18px;
    flex-shrink:0;
}

.logo-circle img{
    width:60px;
    height:auto;
}

.text-content{
    flex:1;
}

.app-title{
    position:static;
    margin:0;
    font-size:25px;
    font-weight:700;
    color:#fff;
    line-height:1.1;
}

.app-sub{
    position:static;
 
    font-size:18px;
    font-weight:500;
    color:#173b86;
}

/*==================================================
BOTTOM SECTION
==================================================*/

.bottom-section{
    position:absolute;
    top:100px;
    left:0;
    right:0;
    bottom:0;

    overflow-y:auto;
    overflow-x:hidden;

    background:#f5f6fb;

    border-top-left-radius:42px;
    border-top-right-radius:42px;

    padding:10px;
}

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

.bottom-section::-webkit-scrollbar{
    width:4px;
}

.bottom-section::-webkit-scrollbar-track{
    background:transparent;
}

.bottom-section::-webkit-scrollbar-thumb{
    background:#a8b3c7;
    border-radius:20px;
}

::-webkit-scrollbar{
    width:5px;
}

::-webkit-scrollbar-thumb{
    background:#b8c4d8;
    border-radius:20px;
}

.options{
    display:flex;
    align-items:center;
    margin-bottom:20px;
}

.options label{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:13px;
    color:#475569;
    font-weight:500;
}

.options input[type="checkbox"]{
    width:16px;
    height:16px;
    margin:0;
    padding:0;
    accent-color:#5f83e8;
    cursor:pointer;
    flex-shrink:0;
}
/*==================================================
COMMON CARD
==================================================*/

.main-card,
.login-card,
.profile-card{
    width:100%;
    background:#fff;
    border:1px solid #e4e7ef;
    border-radius:16px;
    padding:18px;
    margin-bottom:15px;
    box-shadow:0 4px 12px rgba(15,23,42,.06);
}

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

.card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    cursor:pointer;

    font-size:16px;
    font-weight:600;
    color:#172554;
}

.card-header>span{
    display:flex;
    align-items:center;
}

.card-header>span:first-child i{
    margin-right:6px;
}

.card-header i{
    color:#5578f5;
}

.static-header{
    cursor:default;
}

.collapsed{
    display:none;
}

/*==================================================
LOGIN HEADING
==================================================*/

.login-heading{
    font-size:24px;
    color:#172554;
    margin-bottom:5px;
}

.login-text{
    font-size:14px;
    color:#64748b;
    margin-bottom:20px;
}

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

.profile-card-header{
    display:flex;
    align-items:center;
    margin-bottom:15px;
}

.avatar{
    width:60px;
    height:60px;

    flex-shrink:0;

    margin-right:14px;

    border-radius:50%;

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

    background:linear-gradient(
        135deg,
        #7dabf4,
        #6f9cf2,
        #5f83e8
    );

    color:#fff;

    font-size:22px;
    font-weight:700;
}

.profile-card-header h3{
    font-size:18px;
    font-weight:700;
    color:#172554;
    margin-bottom:5px;
}

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

.status-badge{
    display:inline-block;
    padding:4px 12px;
    border-radius:30px;
    font-size:11px;
    font-weight:600;
}

.status-badge.active{
    background:#dcfce7;
    color:#15803d;
}

.status-badge.inactive{
    background:#fee2e2;
    color:#dc2626;
}

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

.expiry-alert{
    margin-bottom:14px;
    padding:12px;

    border-radius:10px;

    background:#fff8db;
    border-left:4px solid #facc15;

    color:#8a6d00;
    font-size:12px;
}

/*==================================================
PROFILE SECTION
==================================================*/

.profile-section{
    margin-bottom:16px;
}

.profile-section label{
    display:block;
    font-size:11px;
    color:#94a3b8;
    margin-bottom:4px;
}

.profile-section p{
    font-size:14px;
    font-weight:600;
    color:#1f2937;
}

/*==================================================
OVERVIEW GRID
==================================================*/

.overview-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    width:100%;
    margin:0 0 12px;
}

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

.overview-card{
    width:100%;
    min-width:0;
    height:70px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 11px;

    background:#fff;
    border:1px solid #e4e7ef;
    border-radius:13px;

    overflow:hidden;

    box-shadow:0 2px 6px rgba(15,23,42,.05);
}

/*==================================================
OVERVIEW ICON
==================================================*/

.icon{
    width:38px;
    height:38px;
    min-width:38px;

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

    border-radius:9px;

    font-size:17px;

    flex-shrink:0;
}

/*==================================================
OVERVIEW TEXT
==================================================*/

.text{
    flex:1;
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    overflow:hidden;
}

.text small{
    display:block;

    margin-bottom:4px;

    color:#172033;
    font-size:11px;
    font-weight:500;
    line-height:1.25;

    white-space:nowrap;
}

.text strong{
    display:block;

    color:#3159ef;
    font-size:13px;
    font-weight:600;
    line-height:1.3;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/*==================================================
ICON COLORS
==================================================*/

.purple-bg{
    background:#eee8ff;
    color:#6d28d9;
}

.blue-bg{
    background:#e8f1ff;
    color:#2563eb;
}

.green-bg{
    background:#e8faec;
    color:#16a34a;
}

.orange-bg{
    background:#fff1e3;
    color:#ff8437;
}

.pink-bg{
    background:#ffe7f0;
    color:#ec4899;
}

.cyan-bg{
    background:#e4f9fc;
    color:#06b6d4;
}

.violet-bg{
    background:#eee8ff;
    color:#7c3aed;
}

/*==================================================
INFO ROWS
==================================================*/

.info-rows{
    margin-top:8px;
}
 

.info-row:last-child{
    border-bottom:none;
}

.info-row i{
    width:38px;
    height:38px;

    margin-right:12px;

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

    flex-shrink:0;

    border-radius:10px;

    background:#edf4ff;
    color:#1c5ed3;

    font-size:15px;
}

.info-row label{
    display:block;

    margin-bottom:3px;

    color:#94a3b8;
    font-size:11px;
}

.info-row p{
    color:#1f2937;
    font-size:14px;
    font-weight:600;
}

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

.summary-card{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:10px;
    padding:10px;

    background:#f7f9fd;

    border:1px solid #e4e8f0;
    border-radius:10px;
}

.summary-actions{
    display:flex;
    align-items:center;
    gap:5px;
}

.summary-actions button{
    width:30px;
    height:30px;

    border:none;
    border-radius:7px;

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

    cursor:pointer;

    transition:.25s;
}

.edit-btn{
    background:#e8f1ff;
    color:#5578f5;
}

.edit-btn:hover{
    background:#dce9ff;
}

.delete-btn{
    background:#fef2f2;
    color:#ef4444;
}

.delete-btn:hover{
    background:#fde2e2;
}

/*==================================================
ORDER INPUT ROW
==================================================*/

.order-input-row{
    display:flex;
    align-items:center;
    gap:8px;

    width:100%;

    margin-top:12px;
}

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

.input-box{
    position:relative;
    margin-bottom:18px;
}

.input-box input{
    width:100%;
    height:46px;

    padding-left:45px;

    border:1px solid #dbe3ef;
    border-radius:10px;

    background:#f8fafc;

    outline:none;

    font-size:14px;
}

.input-box input:focus{
    border-color:#7d9ff5;
    box-shadow:0 0 0 3px rgba(125,159,245,.15);
}

.input-box i{
    position:absolute;
    left:16px;
    top:15px;

    color:#5f83e8;
}

/*==================================================
LOGIN OPTIONS
==================================================*/

.options{
    margin-bottom:20px;

    font-size:13px;
    color:#475569;
}

/*==================================================
COMMON LABELS
==================================================*/

label{
    font-weight:500;
}

/*==================================================
UTILITY
==================================================*/

.hidden{
    display:none !important;
}

.text-center{
    text-align:center;
}

.w-100{
    width:100%;
}

.mt-10{
    margin-top:10px;
}

.mt-15{
    margin-top:15px;
}

.mt-20{
    margin-top:20px;
}

.mb-10{
    margin-bottom:10px;
}

.mb-15{
    margin-bottom:15px;
}

.mb-20{
    margin-bottom:20px;
}

.d-flex{
    display:flex;
}

.align-center{
    align-items:center;
}

.justify-between{
    justify-content:space-between;
}

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

.action-grid,
.action-buttons{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-top:18px;
}

.btn{
    height:44px;
    border:none;
    border-radius:10px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    text-decoration:none;

    cursor:pointer;

    font-size:13px;
    font-weight:600;

    transition:.25s;
}

.btn i{
    font-size:14px;
}

/* Primary */

.btn.primary{
    background:linear-gradient(
        135deg,
        #7dabf4,
        #6f9cf2,
        #5f83e8
    );
    color:#fff;
}

.btn.primary:hover{
    opacity:.95;
}

/* Secondary */

.btn.secondary{
    background:#edf4ff;
    color:#1c5ed3;
}

.btn.secondary:hover{
    background:#dcecff;
}

/* Outline */

.btn.outline{
    background:#fff;
    border:1px solid #88b1fd;
    color:#1c5ed3;
}

.btn.outline:hover{
    background:#eef4ff;
}

/* Disabled */

.btn.disabled,
.btn:disabled{
    background:#e5e7eb;
    color:#9ca3af;
    cursor:not-allowed;
}

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

.login-btn{
    width:100%;
    height:46px;

    border:none;
    border-radius:10px;

    background:linear-gradient(
        135deg,
        #7dabf4,
        #6f9cf2,
        #5f83e8
    );

    color:#fff;

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:.3s;
}

.login-btn:hover{
    opacity:.9;
}

.login-btn i{
    margin-right:8px;
}

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

.subbtns{
    width:calc(100% - 28px);
    height:44px;

    margin:8px 14px 0;

    border:none;
    border-radius:10px;

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

    cursor:pointer;

    color:#fff;

    font-size:15px;
    font-weight:600;

    background:linear-gradient(
        135deg,
        #7dabf4,
        #6f9cf2,
        #5f83e8
    );

    box-shadow:0 5px 12px rgba(79,70,229,.18);

    transition:.25s;
}

.subbtns i{
    margin-right:6px;
    font-size:13px;
}

.subbtns:hover{
    background:linear-gradient(
        135deg,
        #9fc3ff,
        #86adfb,
        #7398f1
    );
}

.subbtns:disabled{
    background:#e1e4ea;
    color:#64748b;
    cursor:not-allowed;
    box-shadow:none;
}

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

.add-btn{
    width:40px;
    height:40px;

    flex:0 0 40px;

    border:none;
    border-radius:8px;

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

    cursor:pointer;

    color:#fff;
    font-size:16px;

    background:linear-gradient(
        135deg,
        #a9cbff,
        #91b7ff,
        #7d9ff5
    );

    box-shadow:0 4px 10px rgba(92,126,230,.18);
}

.add-btn:hover{
    background:linear-gradient(
        135deg,
        #9fc3ff,
        #86adfb,
        #7398f1
    );
}

/*==================================================
SIGNUP
==================================================*/

.signup{
    margin-top:18px;
    text-align:center;

    color:#64748b;
    font-size:13px;
}

.signup a{
    color:#5f83e8;
    text-decoration:none;
    font-weight:600;
}

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

input,
select,
textarea{
    width:100%;

    padding:11px 14px;

    border:1px solid #d9e2f2;
    border-radius:10px;

    outline:none;

    font-size:14px;

    transition:.2s;
}

input:focus,
select:focus,
textarea:focus{
    border-color:#7d9ff5;
    box-shadow:0 0 0 3px rgba(125,159,245,.15);
}

button{
    font-family:'Poppins',sans-serif;
}

/*==================================================
QUANTITY INPUT
==================================================*/

.qty-input{
    width:60px;
    height:40px;

    flex:0 0 60px;

    padding:0 10px;

    border:1px solid #d5dbe7;
    border-radius:8px;

    outline:none;

    font-size:12px;
    color:#374151;
}

.qty-input:focus{
    border-color:#91b7ff;
    box-shadow:0 0 0 3px rgba(145,183,255,.18);
}

.qty-input::placeholder{
    color:#9ca3af;
}

/*==================================================
SELECT2
==================================================*/

.order-input-row .select2-container{
    flex:1;
    min-width:0;
    width:auto !important;
}

.select2-container--default
.select2-selection--single{

    height:40px;

    border:1px solid #d5dbe7;
    border-radius:8px;
}

.select2-container--default
.select2-selection--single
.select2-selection__rendered{

    line-height:38px;

    padding-left:10px;
    padding-right:25px;

    font-size:12px;
    color:#374151;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.select2-container--default
.select2-selection--single
.select2-selection__arrow{

    height:38px;
}

/*==================================================
MODALS
==================================================*/

.modal-overlay{
    position:fixed;
    inset:0;

    display:none;

    align-items:center;
    justify-content:center;

    padding:18px;

    background:rgba(0,0,0,.45);

    z-index:999;
}

.modal-card{
    width:100%;
    max-width:390px;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

.plan-card{
    max-width:420px;
}

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

.modal-header{

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

    padding:16px 20px;

    background:linear-gradient(
        135deg,
        #7dabf4,
        #6f9cf2,
        #5f83e8
    );

    color:#fff;
}

.modal-header h3{
    font-size:16px;
    font-weight:600;
}

.closeModal,
.closePlanModal,
.closeViewPlan{
    cursor:pointer;
    font-size:22px;
}

/*==================================================
MODAL BODY
==================================================*/

#modalBody,
#planBody,
#viewPlanBody{

    padding:20px;

    max-height:65vh;

    overflow-y:auto;
}

#modalBody form,
#planBody form{

    display:flex;
    flex-direction:column;
    gap:14px;
}

#modalBody label,
#planBody label{

    font-size:12px;
    color:#64748b;
}

#modalBody button,
#planBody button{

    margin-top:8px;

    height:44px;

    border:none;
    border-radius:10px;

    cursor:pointer;

    color:#fff;
    font-size:14px;
    font-weight:600;

    background:linear-gradient(
        135deg,
        #7dabf4,
        #6f9cf2,
        #5f83e8
    );
}

#viewPlanBody label{
    color:#94a3b8;
    font-size:12px;
}

#viewPlanBody p{
    margin-top:4px;

    font-size:15px;
    font-weight:600;

    color:#1f2937;
}

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

@media(max-width:420px){

    body{
        background:#f5f6fb;
        align-items:flex-start;
        padding:0;
    }

    .mobile-frame{
        width:100%;
        min-height:100vh;
        height:100vh;

        border-radius:0;
        box-shadow:none;
    }

}


/*==================================================
LOGO IMAGE
==================================================*/

.logo-circle img{
    width:55px;
    height:auto;
}

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

.welcome-card{
    display:flex;
    align-items:center;
    padding:16px;
    margin-bottom:18px;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #7dabf4,
        #6f9cf2,
        #5f83e8
    );

    color:#fff;
}

.profile-circle{
    width:70px;
    height:70px;

    margin-right:16px;

    border-radius:50%;

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

    background:#fff;
    color:#5b38e8;

    font-size:28px;
    font-weight:700;

    flex-shrink:0;
}

.customer-name{
    margin:4px 0;
    font-size:24px;
    font-weight:700;
}

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

.subscription-card{
    padding:18px;
    margin-bottom:18px;

    border-radius:16px;

    color:#fff;

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

.subscription-card.expired{
    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );
}

.days-left{
    font-size:34px;
    font-weight:700;
}

/*==================================================
INFO CARDS
==================================================*/

.info-card{
    padding:16px 12px;
    margin-bottom:14px;

    text-align:center;

    border:none;
    border-radius:16px;

    color:#fff;

    box-shadow:0 4px 12px rgba(15,23,42,.08);
}
.plan-card {
    max-width: 420px;
      background:#6366f1;
}

.amount-card{
    background:#14b8a6;
}

.start-card{
    background:#f59e0b;
}

.expiry-card{
    background:#ec4899;
}

.info-card i{
    display:block;
    margin-bottom:8px;
    font-size:24px;
}

.info-card h6{
    margin-bottom:6px;
    font-size:13px;
    font-weight:600;
}

.info-card p{
    font-size:16px;
    font-weight:700;
}

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

.warning-card{
    margin-top:18px;
    padding:14px;

    border-left:4px solid #facc15;
    border-radius:12px;

    background:#fff8db;
}

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

.action-btn{
    width:100%;
    height:46px;

    margin-top:12px;

    border:none;
    border-radius:10px;

    font-size:15px;
    font-weight:600;
}

/*==================================================
BOOTSTRAP BUTTON OVERRIDES
==================================================*/

.btn-success{
    background:#16a34a;
    border:none;
}

.btn-success:hover{
    background:#15803d;
}

.btn-warning{
    border:none;
}

/*==================================================
BOOTSTRAP MOBILE MODAL
==================================================*/

.mobile-modal{
    max-width:390px;
}

.modal-content{
    border:none;
    border-radius:18px;
}

/*==================================================
DRAG HANDLE
==================================================*/

.drag-line{
    width:55px;
    height:5px;

    margin:10px auto;

    border-radius:20px;

    background:#d1d5db;
}

/*==================================================
PLAN OPTION
==================================================*/

.plan-option{
    border:1px solid #e5e7eb;
    border-radius:14px;
}

.plan-option{

    border:1px solid #e5e7eb;

    border-radius:16px;

    overflow:hidden;

    transition:.25s;

    cursor:pointer;

    margin-bottom:14px;
}

.plan-option:hover{

    border-color:#7d9ff5;

    box-shadow:0 8px 20px rgba(125,159,245,.15);
}

.plan-card-ui{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:5px;

    margin:0;

    cursor:pointer;
}

.plan-left{

    display:flex;

    align-items:center;

    gap:15px;
}

.plan-icon{

    width:55px;

    height:55px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;
}

.plan-icon.blue{

    background:#5f83e8;
}

.plan-icon.green{

    background:#10b981;
}

.plan-icon.purple{

    background:#7c3aed;
}

.plan-icon.orange{

    background:#f59e0b;
}

.plan-details h5{

    margin:0;

    font-size:16px;

    font-weight:600;

    color:#1f2937;
}

.plan-details span{

    display:block;

    margin-top:3px;

    font-size:13px;

    color:#64748b;
}

.plan-price{

    margin-top:8px;

    font-size:20px;

    font-weight:700;

    color:#2563eb;
}

.plan-option input[type="radio"]{

    width:22px;

    height:22px;

    accent-color:#5f83e8;
}


 

/* =========================
   ORDER ID
========================= */

.order-id {
    position: absolute;

    left: 122px;
    top: 75px;

    padding: 5px  ;

     
    border-radius: 20px;

    font-size: 13px;
    font-weight: 600;

    color: #172554;

    line-height: 1.2;

    z-index: 2;
}

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

.card {
    width: 100%;

    background: #ffffff;

    border: 1px solid #e4e7ef;

    border-radius: 12px;

    padding: 12px;

    margin-bottom: 8px;

    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.05);
}


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

.section-title {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 13px;

    font-size: 17px;
    font-weight: 600;

    color: #172554;
}


.section-title i {
    color: #5578f5;

    font-size: 16px;
}


/* =========================
   ORDER INFORMATION GRID
========================= */

.order-info-grid {
    width: 100%;

    display: grid;

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

    gap: 3px;
}


/* =========================
   INFO ROW
========================= */

.info-row {
    width: 100%;
    min-width: 0;

    padding: 3px;

    background: #f8faff;

    border: 1px solid #edf0f7;

    border-radius: 10px;
}


.info-row label {
    display: block;

    margin-bottom: 4px;

    font-size: 13px;
    font-weight: 600;

    color: #64748b;

    line-height: 1.2;

    letter-spacing: 0.1px;
}


.info-row p {
    width: 100%;

    margin: 0;

    font-size: 13px;
    font-weight: 600;

    color: #172554;

    line-height: 1.4;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* =========================
   STATUS
========================= */

.status-info {
    grid-column: 1 / -1;

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


.status {
    
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    letter-spacing: 0.2px;
}


.status.CREATED {
    color: #2563eb;
    background: #e8f1ff;
}


.status.WIP {
    color: #d97706;
    background: #fff4dc;
}


.status.DELIVERED {
    color: #16a34a;
    background: #e8faec;
}


.status.READYFORCOLLECTION {
    color: #7c3aed;

    background: #eee8ff;
}


.status.ABRUPTLYCLOSED {
    color: #dc2626;

    background: #fef2f2;
}


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

.cloth-header{
    width:100%;
    display:grid;
    grid-template-columns: minmax(0,2fr) 70px 80px;
    align-items:center;
    padding:10px 9px;
    margin-bottom:4px;
    background:#f3f6ff;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    color:#64748b;
    gap:10px;
}

.cloth-header span:nth-child(2),
.cloth-header span:nth-child(3){
    text-align:center;
}



.cloth-header span:last-child {
    text-align: right;
}


/* =========================
   CLOTH ROW
========================= */
.cloth-row span:nth-child(2),
.cloth-row span:nth-child(3){
    text-align:center;
}



.cloth-row {
    width: 100%;

    display: grid;

       grid-template-columns: minmax(0,2fr) 70px 80px;

    align-items: center;

     padding:10px 9px;
gap:10px;
    border-bottom: 1px solid #edf0f5;

    font-size: 14px;
    font-weight: 500;

    color: #374151;  margin-bottom:4px;  justify-content: space-between;
}


.cloth-row span:first-child {
    min-width: 120px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.cloth-row span:last-child {
    text-align: right;
}


/* =========================
   TOTAL
========================= */

.cloth-row.total {
    border-bottom: none;

    margin-top: 4px;

    padding-top: 11px;

    font-size: 15px;
    font-weight: 600;

    color: #172554;
}


.cloth-row.total span:last-child {
    color: #3159ef;
}


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

.savings-row {
    width: 100%;

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

 

    border-bottom: 1px solid #edf0f5;

    font-size: 14px;
}


.savings-row:last-child {
    border-bottom: none;
}


.savings-label {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #374151;

    font-weight: 500;
}


.savings-icon {
    width: 31px;
    height: 31px;

    border-radius: 8px;

    background: #f3f6ff;

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

    color: #5578f5;

    font-size: 13px;
}


.savings-value {
    font-size: 14px;
    font-weight: 600;

    color: #3159ef;
}


/* =========================
   ACTION SECTION
========================= */

.action-section {
    width: 100%;

    margin-top: 10px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


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

.btn {
    width: 100%;
    min-height: 46px;

    flex: none;

    padding: 0 14px;

    border-radius: 10px;

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

    text-align: center;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition: 0.2s ease;
}


.btn.primary {
    background: linear-gradient(
        135deg,
        #7dabf4,
        #6f9cf2,
        #5f83e8
    );

    color: #ffffff;

    border: none;

    box-shadow:
        0 5px 12px rgba(79, 70, 229, 0.18);
}


.btn.secondary {
    background: linear-gradient(
        135deg,
        #7dabf4,
        #6f9cf2,
        #5f83e8
    );

    color: #ffffff;

    border: 1px solid #dce4f5;

    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.05);
}


.btn:hover {
    transform: translateY(-1px);
}


.btn.primary:hover {
    background: linear-gradient(
        135deg,
        #9fc3ff,
        #86adfb,
        #7398f1
    );
}


.btn.secondary:hover {
    background: #f8faff;

    border-color: #b9c9ef;
}


 .info-row1 {
    width: 100%;
    display: flex;
    min-width: 0;
    padding: 3px;
    background: #f8faff;
    border: 1px solid #edf0f7;
    border-radius: 10px;    margin-bottom: 10px;
}
.info-row1 label {
    display: block;

    margin-bottom: 4px;

    font-size: 13px;
    font-weight: 600;

    color: #64748b;

    line-height: 1.2;

    letter-spacing: 0.1px;
}


.info-row1 p {
    width: 100%;

    margin: 0;

    font-size: 13px;
    font-weight: 600;

    color: #172554;

    line-height: 1.4;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.info-row1 i{
    width:38px;
    height:38px;

    margin-right:12px;

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

    flex-shrink:0;

    border-radius:10px;

    background:#edf4ff;
    color:#1c5ed3;

    font-size:15px;
}


.info-value{
font-size: 12px;

}