/* ============================================================ */
/* ============ CNA UI KIT — FULL CSS FILE ==================== */
/* File: cna-ui.css  |  Link: <link href="/assets/css/cna-ui.css" rel="stylesheet"> */
/* ============================================================ */

/* ==================== THEME TOKENS ==================== */
:root{
    --page-bg:#FBF7F1; --section-bg:#FFFDF9; --card-bg:#FFFFFF; --card-bg-soft:#FCF7F0;
    --text-primary:#241A15; --text-secondary:#6E625A; --text-muted:#8E8177;
    --brand-primary:#A95520; --brand-dark:#743714; --brand-orange:#C96A28;
    --brand-light:#E7B27E; --brand-pale:#F4E4D2;
    --border:#E8DDD1; --border-strong:#D8C6B5;
    --button-bg:#A95520; --button-hover:#873F15;
    --footer-bg:#F2E9DE;
    --deco:rgba(196,133,75,.09);
    --green-bg:#E4EEDD; --green:#5F8A4E;
    --purple-bg:#EFE3F5; --purple:#8B56A8;
    --pink-bg:#F8E3E9;  --pink:#C05474;
    --gold-bg:#F6E7CF;  --gold:#B07A24;
    --blue-bg:#E1EAF6;  --blue:#4A72A8;
    --danger:#C0392B;
    --shadow-sm:0 3px 12px rgba(72,40,20,.07);
    --shadow-md:0 10px 30px rgba(72,40,20,.10);
    --shadow-lg:0 20px 50px rgba(72,40,20,.14);
    --transition:all .25s ease;
    --font-head:"Plus Jakarta Sans","Inter",sans-serif;
}

/* dark mode — body.dark-mode toggle ke liye */
body.dark-mode{
    --page-bg:#17100C; --section-bg:#1D140F; --card-bg:#211812; --card-bg-soft:#261B14;
    --text-primary:#FFF8F0; --text-secondary:#D4C2B2; --text-muted:#A99382;
    --brand-primary:#C86B28; --brand-dark:#8C471D; --brand-orange:#D77A30;
    --brand-light:#E5A064; --brand-pale:#3A2518;
    --border:#493326; --border-strong:#65452F;
    --button-bg:#B75A20; --button-hover:#D06D29;
    --footer-bg:#120C09;
    --deco:rgba(215,122,48,.06);
    --green-bg:#22301E; --green:#9CC285;
    --purple-bg:#2B2033; --purple:#B57EDC;
    --pink-bg:#33202A;  --pink:#E08AA4;
    --gold-bg:#332817;  --gold:#DCA84E;
    --blue-bg:#1D2633;  --blue:#8AB2E0;
    --shadow-sm:0 3px 14px rgba(0,0,0,.22);
    --shadow-md:0 10px 32px rgba(0,0,0,.32);
    --shadow-lg:0 20px 50px rgba(0,0,0,.42);
}

/* ==================== BASE ==================== */
body{
    background:var(--page-bg); color:var(--text-primary);
    font-family:"Inter",Arial,sans-serif;
    transition:background-color .25s ease, color .25s ease;
}

/* ==================== PAGE HEAD ==================== */
.cna-page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.cna-page-title{font-family:var(--font-head); font-size:20px; font-weight:800; letter-spacing:-.5px; color:var(--text-primary); display:flex; align-items:center; gap:10px; margin:0}
.cna-page-title .ico{width:38px; height:38px; border-radius:11px; background:var(--brand-pale); color:var(--brand-primary); display:inline-flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0}
.cna-page-sub{font-size:11.5px; color:var(--text-secondary); margin:3px 0 0}

/* ==================== BUTTONS ==================== */
.cna-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    height:38px; padding:0 18px; border-radius:11px;
    font-size:12.5px; font-weight:700; font-family:inherit; line-height:1;
    border:1px solid transparent; cursor:pointer; white-space:nowrap;
    transition:var(--transition); text-decoration:none;
}
.cna-btn:active{transform:scale(.97)}
.cna-btn:disabled,.cna-btn.disabled{opacity:.55; pointer-events:none}
.cna-btn-primary{background:linear-gradient(135deg,var(--brand-orange),var(--brand-primary)); color:#fff}
.cna-btn-primary:hover{background:var(--button-hover); color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(169,85,32,.28)}
.cna-btn-secondary{background:var(--card-bg); border-color:var(--border-strong); color:var(--text-primary)}
.cna-btn-secondary:hover{border-color:var(--brand-primary); color:var(--brand-primary)}
.cna-btn-soft{background:var(--brand-pale); color:var(--brand-primary)}
.cna-btn-soft:hover{background:var(--brand-primary); color:#fff}
.cna-btn-success{background:var(--green); color:#fff}
.cna-btn-danger{background:var(--danger); color:#fff}
.cna-btn-warning{background:var(--gold); color:#fff}
.cna-btn-ghost{background:transparent; color:var(--brand-primary)}
.cna-btn-ghost:hover{background:var(--brand-pale)}
.cna-btn-link{background:none; border:0; height:auto; padding:0 4px; color:var(--brand-primary)}
.cna-btn-link:hover{text-decoration:underline}
.cna-btn-sm{height:31px; padding:0 13px; font-size:11.5px; border-radius:9px}
.cna-btn-lg{height:47px; padding:0 26px; font-size:13.5px; border-radius:26px}
.cna-btn-block{width:100%}
.cna-btn-icon{width:38px; padding:0}

/* ==================== FORMS ==================== */
.cna-form-group{margin-bottom:15px}
.cna-label{display:block; font-size:11.5px; font-weight:700; color:var(--text-primary); margin-bottom:6px}
.cna-label .req{color:var(--danger)}
.cna-input,.cna-select,.cna-textarea{
    width:100%; min-height:40px; padding:9px 13px;
    background:var(--card-bg); border:1.5px solid var(--border);
    border-radius:11px; font-family:inherit; font-size:12.5px;
    color:var(--text-primary); transition:var(--transition); outline:none;
}
.cna-textarea{min-height:96px; resize:vertical}
.cna-select{
    appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238E8177' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 13px center;
}
.cna-input:focus,.cna-select:focus,.cna-textarea:focus{
    border-color:var(--brand-primary);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent);
}
.cna-input::placeholder,.cna-textarea::placeholder{color:var(--text-muted)}
.cna-input:disabled,.cna-select:disabled,.cna-textarea:disabled{background:var(--card-bg-soft); opacity:.7; cursor:not-allowed}
.cna-input.is-invalid,.cna-select.is-invalid,.cna-textarea.is-invalid{border-color:var(--danger)}
.cna-input.is-valid,.cna-select.is-valid,.cna-textarea.is-valid{border-color:var(--green)}
.cna-hint{font-size:10.5px; color:var(--text-muted); margin-top:5px}
.cna-error{font-size:10.5px; color:var(--danger); margin-top:5px; font-weight:600}
.cna-input-group{display:flex; gap:8px}
.cna-input-group .cna-input,.cna-input-group .cna-select{flex:1}
.cna-input-icon{position:relative}
.cna-input-icon > i{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; pointer-events:none}
.cna-input-icon .cna-input{padding-left:36px}

/* checkbox / radio */
.cna-check{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); cursor:pointer; user-select:none}
.cna-check input{accent-color:var(--brand-primary); width:15px; height:15px; cursor:pointer}

/* toggle switch */
.cna-switch{position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0}
.cna-switch input{opacity:0; width:0; height:0}
.cna-switch .slider{position:absolute; inset:0; background:var(--border-strong); border-radius:99px; transition:var(--transition); cursor:pointer}
.cna-switch .slider::before{content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:var(--transition)}
.cna-switch input:checked + .slider{background:var(--brand-primary)}
.cna-switch input:checked + .slider::before{transform:translateX(18px)}

/* ==================== TABLES ==================== */
.cna-table-wrap{overflow-x:auto; background:var(--card-bg); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm)}
.cna-table{width:100%; border-collapse:collapse; font-size:12px; min-width:600px}
.cna-table thead th{
    background:var(--brand-pale); color:var(--brand-primary);
    font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
    padding:12px 14px; text-align:left; white-space:nowrap;
}
.cna-table tbody td{padding:12px 14px; border-top:1px solid var(--border); color:var(--text-primary); vertical-align:middle}
.cna-table tbody tr{transition:background .15s}
.cna-table tbody tr:hover{background:var(--card-bg-soft)}
.cna-table-striped tbody tr:nth-child(even){background:var(--card-bg-soft)}
.cna-table .t-money{font-weight:800; color:var(--green); white-space:nowrap}
.cna-table .t-money.neg{color:var(--danger)}
body.dark-mode .t-money{color:#9CC285}
body.dark-mode .t-money.neg{color:#E8998D}

/* ==================== ALERTS ==================== */
.cna-alert{
    display:flex; align-items:flex-start; gap:10px;
    padding:12px 15px; border-radius:13px;
    font-size:12px; font-weight:600; line-height:1.5; margin-bottom:12px;
}
.cna-alert i{font-size:14px; margin-top:1px; flex-shrink:0}
.cna-alert-success{background:var(--green-bg); color:var(--green)}
.cna-alert-danger{background:rgba(192,57,43,.12); color:var(--danger)}
.cna-alert-warning{background:var(--gold-bg); color:var(--gold)}
.cna-alert-info{background:var(--blue-bg); color:var(--blue)}
.cna-alert-brand{background:var(--brand-pale); color:var(--brand-primary)}
body.dark-mode .cna-alert-danger{color:#E8998D}

/* ==================== BADGES ==================== */
.cna-badge{display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:4px 10px; border-radius:99px; white-space:nowrap}
.cna-badge-success{background:var(--green-bg); color:var(--green)}
.cna-badge-danger{background:rgba(192,57,43,.12); color:var(--danger)}
.cna-badge-warning{background:var(--gold-bg); color:var(--gold)}
.cna-badge-info{background:var(--blue-bg); color:var(--blue)}
.cna-badge-purple{background:var(--purple-bg); color:var(--purple)}
.cna-badge-brand{background:var(--brand-pale); color:var(--brand-primary)}
.cna-badge-gray{background:var(--card-bg-soft); color:var(--text-muted); border:1px solid var(--border)}
body.dark-mode .cna-badge-danger{color:#E8998D}

/* ==================== CARD ==================== */
.cna-card{background:var(--card-bg); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm); overflow:hidden}
.cna-card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); flex-wrap:wrap}
.cna-card-head h3{font-size:13.5px; font-weight:800; color:var(--text-primary); margin:0}
.cna-card-body{padding:16px}
.cna-card-foot{padding:12px 16px; border-top:1px solid var(--border); background:var(--card-bg-soft)}

/* ==================== MODAL ==================== */
.cna-modal{position:fixed; inset:0; background:rgba(20,10,4,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); z-index:999998; display:flex; align-items:center; justify-content:center; padding:18px; opacity:0; visibility:hidden; transition:all .25s ease}
.cna-modal.show{opacity:1; visibility:visible}
.cna-modal-box{background:var(--card-bg); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg); width:100%; max-width:480px; overflow:hidden; transform:translateY(14px) scale(.97); transition:all .25s ease}
.cna-modal.show .cna-modal-box{transform:none}
.cna-modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border)}
.cna-modal-title{font-family:var(--font-head); font-weight:800; font-size:14px; color:var(--text-primary); display:flex; align-items:center; gap:8px}
.cna-modal-close{width:30px; height:30px; border:1px solid var(--border); background:var(--card-bg-soft); color:var(--text-secondary); border-radius:9px; font-size:13px; cursor:pointer}
.cna-modal-body{padding:16px; max-height:70vh; overflow-y:auto}
.cna-modal-foot{display:flex; justify-content:flex-end; gap:9px; padding:13px 16px; border-top:1px solid var(--border); background:var(--card-bg-soft)}

/* ==================== PAGINATION ==================== */
.cna-pagination{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:16px 0}
.cna-pagination a,.cna-pagination span{
    min-width:34px; height:34px; padding:0 10px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; background:var(--card-bg);
    border:1px solid var(--border); color:var(--text-secondary); transition:var(--transition);
}
.cna-pagination a:hover{border-color:var(--brand-primary); color:var(--brand-primary)}
.cna-pagination .active{background:var(--brand-primary); border-color:var(--brand-primary); color:#fff}
.cna-pagination .disabled{opacity:.45; pointer-events:none}

/* ==================== PROGRESS ==================== */
.cna-progress{height:9px; background:var(--brand-pale); border-radius:99px; overflow:hidden}
.cna-progress-bar{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brand-orange),var(--brand-primary)); transition:width .4s ease}
.cna-progress.green .cna-progress-bar{background:var(--green)}

/* ==================== TABS ==================== */
.cna-tabs{display:flex; gap:6px; flex-wrap:wrap; background:var(--card-bg-soft); border:1px solid var(--border); border-radius:13px; padding:5px; width:fit-content; max-width:100%}
.cna-tab{height:34px; padding:0 16px; border-radius:9px; border:0; background:transparent; color:var(--text-secondary); font-size:12px; font-weight:700; cursor:pointer; transition:var(--transition); font-family:inherit}
.cna-tab:hover{color:var(--brand-primary)}
.cna-tab.active{background:var(--brand-primary); color:#fff; box-shadow:0 3px 10px rgba(169,85,32,.25)}
.cna-tab-pane{display:none; padding-top:14px}
.cna-tab-pane.active{display:block}

/* ==================== EXTRAS ==================== */
.cna-chip{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:99px; background:var(--brand-pale); color:var(--brand-primary); font-size:11px; font-weight:800}
.cna-spinner{width:18px; height:18px; border:2.5px solid var(--brand-pale); border-top-color:var(--brand-primary); border-radius:50%; animation:cnaSpin .7s linear infinite; display:inline-block}
@keyframes cnaSpin{to{transform:rotate(360deg)}}
.cna-divider{height:1px; background:var(--border); border:0; margin:16px 0}
.cna-text-muted{color:var(--text-muted)}
.cna-text-green{color:var(--green); font-weight:700}
.cna-text-red{color:var(--danger); font-weight:700}
/* ==================== AUTH PAGES ==================== */
.cna-auth{min-height:calc(100vh - 200px); display:flex; align-items:center; justify-content:center; padding:40px 14px}
.cna-auth-box{width:100%; max-width:420px; background:var(--card-bg); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-md); padding:30px 26px}
.cna-auth-head{text-align:center; margin-bottom:20px}
.cna-auth-icon{width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,var(--brand-orange),var(--brand-primary)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 8px 18px rgba(169,85,32,.3)}
.cna-auth-title{font-family:var(--font-head); font-size:20px; font-weight:800; letter-spacing:-.5px; color:var(--text-primary); margin:12px 0 4px}
.cna-auth-sub{font-size:11.5px; color:var(--text-secondary); margin:0}
.cna-pass-wrap{position:relative}
.cna-pass-wrap .cna-input{padding-right:42px}
.cna-pass-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:30px; height:30px; border:0; background:transparent; color:var(--text-muted); border-radius:8px; cursor:pointer; font-size:14px}
.cna-pass-toggle:hover{color:var(--brand-primary); background:var(--brand-pale)}
.cna-captcha img,.cna-captcha canvas,.cna-captcha iframe{max-width:100%; border-radius:9px}
.cna-captcha input{max-width:100%}
.cna-auth-links{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:16px; font-size:11.5px}
.cna-auth-links a{color:var(--brand-primary); font-weight:700; display:inline-flex; align-items:center; gap:5px}
.cna-auth-links a:hover{color:var(--brand-orange)}
.cna-auth-sep{width:1px; height:14px; background:var(--border-strong)}
.cna-auth-foot{text-align:center; font-size:12px; color:var(--text-secondary); margin:0}
.cna-auth-foot a{color:var(--brand-primary); font-weight:800}
.cna-auth-foot a:hover{color:var(--brand-orange)}
/* ============================================================
   UNIVERSAL FIX — input with leading icon
   Kisi bhi input ke andar icon overlap na ho
   ============================================================ */

/* Har wrapper jiske andar icon ho — position relative */
.input-icon-wrap,
.wd-input-icon,
.dp-input-icon,
.sp-input-icon,
.st-input-icon,
.fp-input-icon,
.rg-input-icon,
.cp-input-icon,
.cna-input-icon {
    position: relative !important;
    display: block !important;
}

/* Icon — absolute, vertically centered, sab se peeche */
.input-icon-wrap > i,
.wd-input-icon > i,
.dp-input-icon > i,
.sp-input-icon > i,
.st-input-icon > i,
.fp-input-icon > i,
.rg-input-icon > i,
.cp-input-icon > i,
.cna-input-icon > i {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    color: var(--text-muted) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: transparent !important;
}

/* Input — LEFT padding taake icon ke upar text na jaye */
.input-icon-wrap > input,
.wd-input-icon > input,
.dp-input-icon > input,
.sp-input-icon > input,
.st-input-icon > input,
.fp-input-icon > input,
.rg-input-icon > input,
.cp-input-icon > input,
.cna-input-icon > input,
.cna-input-icon > .cna-input,
.input-icon-wrap > .form-control,
.wd-input-icon > .wd-input,
.dp-input-icon > .dp-input {
    padding-left: 42px !important;
}

/* Placeholder bhi thoda inset ho */
.input-icon-wrap > input::placeholder,
.wd-input-icon > input::placeholder,
.dp-input-icon > input::placeholder,
.sp-input-icon > input::placeholder,
.st-input-icon > input::placeholder,
.fp-input-icon > input::placeholder,
.rg-input-icon > input::placeholder,
.cp-input-icon > input::placeholder,
.cna-input-icon > input::placeholder {
    padding-left: 0;
}
/* news page */
.cna-news-item{margin-bottom:14px}
.cna-news-body{font-size:12.5px; line-height:1.7; color:var(--text-secondary)}
.cna-news-body img{max-width:100%; height:auto; border-radius:10px}
.cna-news-body a{color:var(--brand-primary); font-weight:600}
/* ==================== FAQ PAGE ==================== */
.cna-faq-content{font-size:12.5px; line-height:1.7; color:var(--text-secondary)}
.cna-faq-content h2, .cna-faq-content h3{
    font-family:var(--font-head); font-size:14px; font-weight:800;
    color:var(--text-primary); margin:18px 0 6px;
}
.cna-faq-content h2:first-child, .cna-faq-content h3:first-child{margin-top:0}
.cna-faq-content p{margin:0 0 10px}
.cna-faq-content a{color:var(--brand-primary); font-weight:700}
.cna-faq-content ul, .cna-faq-content ol{padding-left:20px; margin:0 0 10px}
.cna-faq-content img{max-width:100%; border-radius:10px}

/* help box */
.cna-faq-help{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.cna-faq-help-info{display:flex; align-items:center; gap:13px}
.cna-faq-help-ico{
    width:46px; height:46px; border-radius:14px; flex-shrink:0;
    background:linear-gradient(135deg,var(--brand-orange),var(--brand-primary));
    color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:20px;
    box-shadow:0 6px 14px rgba(169,85,32,.28);
}
.cna-faq-help-info h3{font-family:var(--font-head); font-size:14px; font-weight:800; color:var(--text-primary); margin:0 0 3px}
.cna-faq-help-info p{font-size:11.5px; color:var(--text-secondary); margin:0}
.cna-faq-help-actions{display:flex; gap:8px; flex-wrap:wrap}
/* ==================== CNA ALERT (with title + details) ==================== */
.cna-alert{
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.6;
    font-weight: 600;
    margin-bottom: 14px;
}
.cna-alert > i{
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}
.cna-alert-body{ flex: 1; min-width: 0; }
.cna-alert-title{
    display: block;
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 800;
    margin-bottom: 4px;
}
.cna-alert-text{
    font-size: 12px;
    line-height: 1.55;
}
.cna-alert-text p{ margin: 0 0 4px; }
.cna-alert-text p:last-child{ margin-bottom: 0; }

.cna-alert-details{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed currentColor;
    display: flex; flex-direction: column; gap: 4px;
    opacity: .9;
}
.cna-alert-row{
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
}
.cna-alert-lbl{ font-weight: 600; }
.cna-alert-val{
    font-family: var(--font-head);
    font-weight: 800;
}

.cna-alert-success{ background: var(--green-bg); color: var(--green); }
.cna-alert-error  { background: rgba(192,57,43,.12); color: var(--danger); }
.cna-alert-warning{ background: var(--gold-bg); color: var(--gold); }
.cna-alert-info   { background: var(--blue-bg); color: var(--blue); }
body.dark-mode .cna-alert-success{ color: #9CC285; }
body.dark-mode .cna-alert-error  { color: #E8998D; }