*{box-sizing:border-box}html,body{overflow-x:hidden;max-width:100vw}body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:#f4f7fb;color:#172033}a{color:#5b4fe9;text-decoration:none}
a, button, img, summary, [role="button"] { -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; -webkit-user-drag: none !important; }
html,body,button,.button,a,input,select,textarea{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input, select, textarea, [contenteditable="true"], .copyable, code, pre { -webkit-touch-callout: default !important; -webkit-user-select: text !important; user-select: text !important; }
.header-brand-link{display:inline-flex !important;align-items:center;margin-right:8px;text-decoration:none;flex-shrink:0}
.header-brand-logo{width:32px;height:32px;object-fit:contain;border-radius:8px;display:block !important;background:#fff;border:1px solid #e2e8f0;box-shadow:0 2px 6px rgba(0,0,0,0.06)}
@media(min-width:901px){.header-brand-link{display:inline-flex !important}}
.ptr-indicator{position:fixed;top:0;left:50%;transform:translate(-50%,-60px);z-index:999999;width:44px;height:44px;border-radius:50%;background:#ffffff;box-shadow:0 6px 22px rgba(0,0,0,0.22);display:grid;place-items:center;pointer-events:none;transition:transform .18s ease-out,opacity .18s ease-out;opacity:0}
.ptr-spinner{font-size:22px;font-weight:900;color:#6157e8;display:inline-block;line-height:1}
.ptr-refreshing .ptr-spinner{animation:ptrSpin .6s linear infinite}
@keyframes ptrSpin{100%{transform:rotate(360deg)}}
button,.button{border:0;background:#6157e8;color:#fff;border-radius:9px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;display:inline-block}.secondary{background:#eef0ff;color:#5148cf}.danger{background:#dc3545!important;color:#fff!important}.small{padding:6px 9px;font-size:13px}.layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh}#app-sidebar{background:#171b35;color:#dce0ff;padding:26px 20px;position:sticky;top:0;height:100vh}.brand{font-size:26px;font-weight:800;color:#fff;display:block}#app-sidebar small{color:#8f98bd}nav{display:flex;flex-direction:column;gap:5px;margin-top:28px}nav a{padding:10px 12px;border-radius:8px;color:#dce0ff}nav a:hover{background:#272c51}nav hr{border:0;border-top:1px solid #303657;width:100%}nav b{font-size:12px;color:#8f98bd;padding:5px 12px}main{min-width:0}header{position:sticky;top:0;z-index:45;height:70px;background:rgba(255,255,255,0.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #e8eaf2;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 3px 16px rgba(23,32,51,0.05)}header h1{font-size:23px;margin:0}header>div{display:flex;align-items:center;gap:14px}.menu{display:none}.balance{padding:7px 13px!important;background:linear-gradient(135deg,#ecfdf5,#d1fae5)!important;color:#065f46!important;border:1px solid #a7f3d0!important;border-radius:99px!important;font-weight:800!important;font-size:13.5px!important;box-shadow:0 2px 6px rgba(16,185,129,0.12)!important}.content{padding:28px;max-width:1450px;margin:auto}.notice,.alert{padding:13px 16px;border-radius:12px;margin-bottom:16px;font-weight:500;font-size:14px;line-height:1.45}.notice,.success{background:#f0fdf4!important;border:1px solid #bbf7d0!important;color:#166534!important;box-shadow:0 2px 6px rgba(22,101,52,0.06)}.error{background:#fef2f2!important;border:1px solid #fecaca!important;color:#991b1b!important;border-left:4px solid #ef4444!important;box-shadow:0 2px 6px rgba(153,27,27,0.06)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}.stats article,.card,.service-card{background:#fff;border:1px solid #e9ebf2;border-radius:15px;padding:22px;box-shadow:0 5px 18px #28304d0a}.stats b{font-size:30px;display:block;color:#5148cf}.stats span,.service-card>span{color:#788097}.actions{display:flex;flex-wrap:wrap;gap:10px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card h2{font-size:20px}.service-card footer{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.service-card footer b{font-size:20px;color:#087b5d}.search{width:100%;max-width:500px;margin-bottom:20px}.form{max-width:720px;display:grid;gap:14px}.form h2{margin:0}.form-head{display:flex;justify-content:space-between;gap:15px}label{display:grid;gap:6px;font-weight:600}input,select,textarea{width:100%;border:1px solid #d9ddea;border-radius:99px;border-radius:9px;padding:11px 12px;font:inherit;background:#fff}label small,td small{display:block;color:#788097;font-weight:400}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}.table-wrap{overflow:auto;background:#fff;border-radius:14px;border:1px solid #e7e9f1}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid #eceef4;vertical-align:top}th{background:#f8f9fc;color:#667085}.inline{display:flex;gap:6px;align-items:center}.inline input,.inline select{width:auto;min-width:100px;padding:7px}.status{padding:4px 8px;border-radius:15px;background:#eee}.completed{background:#dff8ee;color:#087354}.cancelled{background:#ffe1e5;color:#a92233}details pre{white-space:pre-wrap;max-width:450px}dialog{border:0;border-radius:14px;box-shadow:0 20px 60px #0003;width:min(500px,90%)}dialog form{display:grid;gap:12px}.auth{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#efefff,#e8faf3)}.auth-card{background:#fff;border-radius:18px;padding:32px;width:min(430px,92%);display:grid;gap:15px;box-shadow:0 20px 60px #31357818}.auth-card h1,.auth-card p{margin:0}.links{display:flex;justify-content:space-between;gap:10px}
@media(max-width:900px){.layout{grid-template-columns:1fr}#app-sidebar{position:fixed;z-index:20;left:-260px;transition:.2s;width:250px}#app-sidebar.open{left:0}.menu{display:block;padding:7px 10px}header{padding:0 16px}header h1{font-size:18px}.content{padding:16px}.stats{grid-template-columns:1fr 1fr}.service-grid{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}}
@media(max-width:580px){.stats,.service-grid{grid-template-columns:1fr}.form-head{display:block}.links{flex-direction:column}}
.balance-form{display:flex;gap:6px;align-items:center;min-width:470px}.balance-form input,.balance-form select{width:auto;min-width:90px;padding:7px}
.auth-card input{border:1.5px solid #9fa9bf}.auth-card input::placeholder{color:#788298;opacity:1}.auth-card input:focus{outline:none;border-color:#6157e8;box-shadow:0 0 0 3px #6157e81a}.password-field{position:relative}.password-field input{padding-right:52px}.password-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);padding:7px 10px;background:transparent;color:#596279;font-size:18px;line-height:1}.password-toggle.showing{background:#eef0ff}.demo-login{padding:9px 12px;background:#f1f3ff;color:#3f399e;border:1px solid #d7dafa;border-radius:8px;font-size:14px;text-align:center}.secure-password-input{-webkit-text-security:disc!important;text-security:disc!important}.secure-password-input.show-text{-webkit-text-security:none!important;text-security:none!important}
nav a.active{background:#6157e8;color:#fff;box-shadow:0 6px 18px #6157e833}.header-title{display:flex;align-items:center;gap:12px}.admin-welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;margin-bottom:22px;border-radius:15px;background:linear-gradient(135deg,#5b50df,#786ef0);color:#fff}.admin-welcome h2,.admin-welcome p{margin:0}.admin-welcome p{opacity:.85;margin-top:5px}.server-pill{padding:8px 13px;border-radius:20px;font-weight:700;white-space:nowrap}.server-pill.online{background:#dff9ed;color:#087354}.server-pill.offline{background:#ffe1e5;color:#a92233}.admin-stats{grid-template-columns:repeat(5,1fr)}.stats article small{display:block;color:#8991a5;margin-top:6px}.admin-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px}.management-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.management-grid a{display:grid;gap:3px;padding:15px;border:1px solid #e3e6f1;border-radius:11px;color:#28304a;transition:.2s}.management-grid a:hover{border-color:#6157e8;background:#f7f6ff;transform:translateY(-2px)}.management-grid span{color:#7c8499;font-size:14px}.pending-card{display:flex;flex-direction:column;gap:10px}.pending-card h2{margin:0 0 4px}.pending-card a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:#f6f7fb;color:#2d354d}.pending-card b{display:grid;place-items:center;min-width:34px;height:34px;border-radius:9px;background:#e7e8ff;color:#5148cf;font-size:18px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.section-head h2{margin:0}.recent-card{padding:0;overflow:hidden}.recent-card .section-head{padding:20px 22px}.flat{border:0;border-radius:0}.empty-state{text-align:center!important;color:#8991a5;padding:30px!important}
@media(max-width:1100px){.admin-stats{grid-template-columns:repeat(3,1fr)}.admin-grid{grid-template-columns:1fr}}
@media(max-width:700px){.admin-stats{grid-template-columns:1fr 1fr}.management-grid{grid-template-columns:1fr}.admin-welcome{align-items:flex-start;flex-direction:column}}
.page-tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.filter-links{display:flex;flex-wrap:wrap;gap:8px}.filter-links a{padding:8px 13px;border-radius:8px;background:#fff;border:1px solid #e0e3ee;color:#586078}.filter-links a.active{background:#6157e8;border-color:#6157e8;color:#fff}.approved{background:#dff8ee;color:#087354}.rejected{background:#ffe1e5;color:#a92233}.processing{background:#fff2d8;color:#9b6500}.pending{background:#ecebff;color:#5148cf}
/* App-like responsive shell */
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}body{min-height:100dvh}.nav-backdrop,.bottom-nav{display:none}button,.button,input,select,textarea{min-height:44px}button:focus-visible,.button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #6157e833;outline-offset:2px}.is-loading{opacity:.72;cursor:wait}.pagination{flex-direction:row;justify-content:center;flex-wrap:wrap;margin:20px 0}.pagination a{color:#5148cf;background:#fff;border:1px solid #dddff0;min-width:40px;text-align:center}.pagination a.active{background:#6157e8;color:#fff}.service-card,.card,.stats article{transition:transform .18s ease,box-shadow .18s ease}.service-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px #28304d14}
.sidebar-close-btn{display:none}
@media(max-width:900px){
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}.layout{min-height:100dvh}#app-sidebar{height:100dvh;height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(90px + env(safe-area-inset-bottom));padding-left:18px;padding-right:18px;box-shadow:none;transition:transform .25s ease,left .25s ease;transform:translateX(-105%);position:fixed;left:0;top:0;bottom:0;width:260px;max-width:85vw;z-index:999}#app-sidebar.open{transform:translateX(0);box-shadow:18px 0 45px rgba(16,20,43,0.35)}.sidebar-close-btn{display:grid!important;place-items:center;position:absolute;top:16px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.12);color:#fff;font-size:16px;font-weight:700;line-height:1;border:0;padding:0;cursor:pointer;transition:background .15s ease}.sidebar-close-btn:hover,.sidebar-close-btn:active{background:rgba(255,255,255,0.25)}.nav-backdrop{display:block;position:fixed;inset:0;border:0;border-radius:0;padding:0;background:#10142b80;opacity:0;visibility:hidden;transition:.22s;z-index:40}.nav-open{overflow:hidden}.nav-open .nav-backdrop{opacity:1;visibility:visible}header{position:sticky;top:0;z-index:30;height:calc(64px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);box-shadow:0 2px 14px #22283d0d}.menu{font-size:21px;min-width:44px;padding:6px;background:#f0efff;color:#5148cf}.content{padding:16px 12px}.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:35;height:calc(64px + env(safe-area-inset-bottom));padding:5px 6px env(safe-area-inset-bottom);background:#fffffff7;border-top:1px solid #e5e7f0;box-shadow:0 -8px 30px #252c4415;backdrop-filter:blur(16px)}.bottom-nav-5{grid-template-columns:repeat(5,1fr)!important}.bottom-nav-4{grid-template-columns:repeat(4,1fr)!important}.bottom-nav-3{grid-template-columns:repeat(3,1fr)!important}.bottom-nav a{display:grid;place-items:center;align-content:center;gap:2px;color:#7a8195;border-radius:10px;text-align:center;padding:4px 2px;transition:background-color .15s,color .15s}.bottom-nav a .nav-icon,.bottom-nav a>span{font-size:20px;line-height:1;display:inline-block}.bottom-nav a::before,.bottom-nav a::after{content:none!important}.bottom-nav a small{font-size:11px;font-weight:600;display:block}.bottom-nav a.active{color:#14a58a;background:#eaf8f5}.admin-area .bottom-nav a.active,.admin-bottom-nav a.active{color:#6157e8;background:#eef0ff;font-weight:700}.bottom-badge{position:absolute;top:-5px;right:-9px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;padding:1px 5px;border-radius:99px;line-height:1.2;box-shadow:0 2px 6px rgba(0,0,0,0.25);min-width:16px;text-align:center;transition:transform .2s ease}.badge-bump{animation:badgePulse .45s ease}
@keyframes badgePulse{0%{transform:scale(1)}50%{transform:scale(1.38);background:#dc2626}100%{transform:scale(1)}}
.logout-link{font-size:0}.logout-link::after{content:'โช';font-size:22px}.stats{gap:12px}.stats article,.card,.service-card{border-radius:16px;padding:18px}.stats b{font-size:26px}.form{max-width:none}.balance-form{min-width:0;flex-wrap:wrap}.balance-form input,.balance-form select{flex:1 1 120px}.inline{flex-wrap:wrap}.page-tools{align-items:flex-start;overflow-x:auto}.filter-links{flex-wrap:nowrap}.filter-links a{white-space:nowrap}
}
.pricing-card-details:not([open])>.option-rate-form{display:none!important}
.admin-pricing-groups{display:grid;gap:18px}.admin-pricing-category{padding:16px;background:#fff;border:1px solid #dce3ee;border-radius:18px;box-shadow:0 7px 23px #26314a0c}.admin-pricing-category>.category-head{margin-bottom:13px;padding-bottom:12px;border-bottom:1px solid #e8ecf3}.admin-pricing-category .admin-pricing-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.user-status-form select{min-width:112px;min-height:38px;padding:6px 8px}.user-icon-actions .lock-user{background:#e94b5f}.user-icon-actions .login-user{background:#16bd68}@media(max-width:760px){.admin-pricing-category{padding:11px}.admin-pricing-category .admin-pricing-cards{grid-template-columns:1fr}}
.admin-order-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.admin-order-card{background:#fff;border:1px solid #dfe5ee;border-radius:16px;padding:17px;box-shadow:0 7px 22px #26314a0b}.admin-order-card>header{height:auto;padding:0 0 12px;border:0}.admin-order-card>header div{display:grid}.admin-order-card small{color:#778195}.order-card-meta{display:flex;justify-content:space-between;gap:10px;padding:11px;background:#f5f7fb;border-radius:10px}.order-result-form{display:grid;gap:10px;margin-top:12px}.success-result-fields{display:grid;gap:10px;padding:12px;background:#f7f8ff;border:1px solid #e1e3fb;border-radius:11px}.user-text-result{display:grid;gap:7px}.user-text-result pre{max-width:360px;max-height:220px;overflow:auto;white-space:pre-wrap;background:#f5f7fb;padding:10px;border-radius:9px}.result-expired-note{display:block;color:#a92233}@media(max-width:900px){.admin-order-result-grid{grid-template-columns:1fr}}
.result-type-picker{display:grid;gap:6px;margin-bottom:2px}.result-type-picker-label{font-size:12px;font-weight:700;color:#475569}.result-type-pills{display:flex;flex-wrap:wrap;gap:7px}.result-pill{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;background:#fff;border:1px solid #cbd5e1;border-radius:8px;font-size:12px;font-weight:600;color:#334155;cursor:pointer;user-select:none;transition:all .15s ease-in-out}.result-pill:hover{border-color:#6366f1;background:#f8fafc}.result-pill input[type=radio]{accent-color:#4f46e5;margin:0;cursor:pointer}.result-pill.active,.result-pill:has(input[type=radio]:checked){background:#eef2ff;border-color:#4f46e5;color:#4338ca;font-weight:700;box-shadow:0 0 0 1px #4f46e5}
*[hidden]{display:none!important}
.layout>aside{display:flex;flex-direction:column}.layout>aside nav{flex:1}.sidebar-logout{margin-top:auto!important;background:#2a2140!important;color:#ffccd3!important;border:1px solid #523047;font-weight:700}.sidebar-logout span{font-size:18px}
.user-list-panel{padding:22px;background:#fff;border:1px solid #e0e5ee;border-radius:18px;box-shadow:0 8px 26px #26314a0d}.user-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}.user-list-toolbar label{display:flex;align-items:center;gap:8px;font-weight:500}.user-list-toolbar select{width:75px}.user-list-toolbar input{width:240px}.user-list-toolbar button{min-height:44px}.user-list-table{overflow:auto}.user-list-table table{min-width:850px}.user-list-table th{background:#fff}.user-list-table td{vertical-align:middle}.user-list-table small{margin-top:3px}.user-icon-actions{display:flex;gap:7px;align-items:center}.user-icon-actions form{margin:0;display:inline-flex}.user-icon-actions button{display:grid;place-items:center;width:44px;height:38px;min-height:38px;padding:0;border-radius:8px;font-size:18px;border:0;cursor:pointer;color:#fff;transition:transform .12s ease, filter .12s ease, opacity .12s ease}.user-icon-actions .lock-user{background:#ef4444}.user-icon-actions .login-user{background:#10b981}.user-icon-actions .edit-user{background:#4f46e5}.user-icon-actions .balance-user{background:#7040e8}.user-icon-actions .password-user{background:#f59e0b}.user-icon-actions button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.1)}.user-icon-actions button:active:not(:disabled){transform:translateY(0);filter:brightness(0.95)}.user-icon-actions button:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.user-list-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;color:#70798d}.user-list-footer .pagination-bar{flex:1;margin:0!important;border:0!important;padding:0!important}.user-action-dialog{border:0;border-radius:18px;padding:0;box-shadow:0 20px 60px rgba(0,0,0,0.3);background:#fff;width:calc(100% - 32px);max-width:480px;margin:auto}.user-action-dialog::backdrop{background:rgba(15,23,42,0.6);backdrop-filter:blur(4px)}.user-action-dialog form{display:grid;gap:14px;padding:20px 22px}.user-action-dialog .modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #e2e8f0;margin-bottom:4px}.user-action-dialog .modal-header h3{margin:0;font-size:17px;font-weight:700}.user-action-dialog .modal-close{background:transparent;border:0;font-size:22px;line-height:1;color:#64748b;cursor:pointer;padding:4px 8px;border-radius:6px;min-height:auto;display:inline-flex;align-items:center;justify-content:center}.user-action-dialog .modal-close:hover{background:#f1f5f9;color:#0f172a}.user-action-dialog .modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px}.impersonation-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;margin-bottom:15px;border-radius:12px;background:#fff3cd;color:#735b00;border:1px solid #eedb96}.impersonation-bar a{padding:8px 11px;border-radius:8px;background:#5148cf;color:#fff;font-weight:700}
@media(max-width:620px){.user-list-panel{padding:12px;background:transparent;border:0;box-shadow:none}.user-list-toolbar{align-items:stretch;flex-direction:column}.user-list-toolbar label{width:100%}.user-list-toolbar input{min-width:0;flex:1}.user-list-table{overflow:visible}.user-list-table table{min-width:0;display:block}.user-list-table thead{display:none}.user-list-table tbody{display:grid;gap:11px}.user-list-table tr{display:grid;padding:13px;background:#fff;border:1px solid #dfe5ef;border-radius:14px;box-shadow:0 5px 18px #26314a0b}.user-list-table td{display:grid;grid-template-columns:85px 1fr;padding:8px 0;border-bottom:1px solid #edf0f5;align-items:center}.user-list-table td::before{content:attr(data-label);color:#7a8395;font-size:12px}.user-list-table td:last-child{border:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}.user-icon-actions{display:flex!important;flex-wrap:wrap!important;gap:6px!important;justify-content:flex-start!important;width:100%!important}.user-icon-actions button,.user-icon-actions a,.user-icon-actions .button{width:38px!important;height:34px!important;min-height:34px!important;padding:0!important;border-radius:7px!important;font-size:15px!important;display:grid!important;place-items:center!important}.user-list-footer{align-items:stretch;flex-direction:column}.impersonation-bar{align-items:stretch;flex-direction:column}.impersonation-bar a{text-align:center}}
.admin-dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;margin-bottom:16px;border:1px solid #dbe2ee;border-radius:18px;background:linear-gradient(135deg,#fff,#eef4ff);box-shadow:0 8px 25px #26314a0c}.admin-dashboard-head h2{margin:4px 0}.admin-dashboard-head p{margin:0;color:#70798d}.admin-dashboard-metrics{padding:18px!important;margin-bottom:16px!important;border:1px solid #dbe2ee!important;border-radius:18px!important;background:#fff!important}.admin-dashboard-columns{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}.admin-dashboard-card{padding:19px;background:#fff;border:1px solid #dce2ec;border-radius:18px;box-shadow:0 8px 25px #26314a0d}.admin-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.admin-card-heading h3{margin:3px 0 0}.admin-card-heading small{color:#7a8396}.admin-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-action-grid a{display:grid;grid-template-columns:42px 1fr;column-gap:10px;padding:13px;border:1px solid #e0e5ef;border-radius:13px;background:#f8faff;color:#253047}.admin-action-grid a>span{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#e8edff;color:#5148cf;font-size:19px}.admin-action-grid a small{color:#7a8395}.admin-action-grid a:hover{border-color:#8ca7ed;background:#fff;transform:translateY(-1px)}.admin-pending-list{display:grid;gap:8px}.admin-pending-list>a{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:11px;border-radius:12px;background:#f7f8fc;color:#263047}.admin-pending-list>a>span{font-size:11px;font-weight:800;color:#6157e8}.admin-pending-list div{display:grid}.admin-pending-list small{color:#788195}.admin-pricing-card{overflow:hidden}.admin-pricing-card>header{margin:-16px -16px 0;padding:15px 16px;background:linear-gradient(135deg,#f7f9ff,#edf2ff)}
@media(max-width:1050px){.admin-dashboard-columns{grid-template-columns:1fr}}@media(max-width:620px){.admin-dashboard-head{align-items:flex-start;flex-direction:column;padding:17px}.admin-dashboard-card{padding:14px}.admin-action-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.admin-action-grid a{display:flex;min-width:0;min-height:92px;padding:9px 5px;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:5px}.admin-action-grid a>span{display:grid;flex:0 0 34px;width:34px;height:34px;font-size:16px}.admin-action-grid a>b{font-size:11px;line-height:1.2;overflow-wrap:anywhere}.admin-action-grid a>small{display:none}.admin-dashboard-metrics{padding:10px!important}}
.reference-metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.reference-metric{display:grid;place-items:center;gap:4px;min-height:118px;padding:13px;border:1px solid #e0e5ef;border-radius:14px;background:#f8faff;color:#253047;text-align:center}.reference-metric>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#e8edff;color:#5148cf;font-size:19px}.reference-metric strong{font-size:23px}.reference-metric small{color:#747e92}.reference-metric.success>span{background:#e3f8ef;color:#087354}.reference-metric.pending-color>span{background:#fff2d8;color:#9b6500}.reference-metric.cancelled-color>span{background:#ffe5e9;color:#a92233}.pricing-card-details>summary{display:grid;grid-template-columns:1fr auto 22px;align-items:center;gap:10px;padding:15px 16px;cursor:pointer;list-style:none;background:linear-gradient(135deg,#f7f9ff,#edf2ff)}.pricing-card-details>summary::-webkit-details-marker{display:none}.pricing-card-details>summary h3{margin:3px 0 0}.pricing-card-details>summary small{color:#7b8395}.pricing-card-details>summary>i{font-style:normal;transition:.18s}.pricing-card-details[open]>summary>i{transform:rotate(180deg)}.pricing-card-details .option-rate-form{padding:0 14px 14px}.service-master-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:11px;background:#eaf4ff}.service-master-switch b,.service-master-switch small{display:block}.service-master-switch small{color:#718096}.admin-pricing-card:has(.pricing-card-details){padding:0}.admin-pricing-card:has(.pricing-card-details)>header{display:none}
@media(max-width:1100px){.reference-metric-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.reference-metric-grid{grid-template-columns:repeat(3,1fr);gap:7px}.reference-metric{min-height:93px;padding:8px 4px}.reference-metric>span{width:31px;height:31px;font-size:15px}.reference-metric strong{font-size:18px}.reference-metric small{font-size:10px}.admin-pricing-cards{grid-template-columns:1fr}.pricing-card-details>summary{padding:13px}.option-rate-card{grid-template-columns:minmax(0,1fr) 82px 42px}}
@media(max-width:620px){
header h1{font-size:16px;line-height:1.2;margin:0}.balance{font-size:13px;padding:7px 9px}.content{padding:14px 12px}.stats{grid-template-columns:1fr 1fr!important}.stats article{padding:15px}.stats b{font-size:23px}.stats span{font-size:13px}.service-grid{gap:12px}.service-card h2{font-size:18px;margin:9px 0}.service-card p{font-size:14px}.service-card footer{margin-top:14px}.actions{display:grid}.actions .button{text-align:center}.form-head p{margin-top:0}.form-head b{display:block;margin-bottom:12px;color:#087b5d}dialog{width:calc(100% - 24px);max-height:88dvh;margin:auto;padding:20px}.auth-card{padding:24px 20px}.table-wrap{overflow:visible;background:transparent;border:0}.table-wrap table{min-width:0;display:block}.table-wrap thead{display:none}.table-wrap tbody{display:grid;gap:12px}.table-wrap tr{display:grid;background:#fff;border:1px solid #e5e8f1;border-radius:15px;padding:8px 14px;box-shadow:0 5px 18px #28304d0a}.table-wrap td{display:grid;grid-template-columns:minmax(88px,34%) 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #edf0f5;overflow-wrap:anywhere}.table-wrap td:last-child{border-bottom:0}.table-wrap td::before{content:attr(data-label);font-size:12px;font-weight:700;color:#7b8397;text-transform:none}.table-wrap td[colspan]{display:block;text-align:center}.table-wrap td[colspan]::before{display:none}.table-wrap .inline{align-items:stretch}.table-wrap .inline input,.table-wrap .inline select,.table-wrap .inline button{width:100%}details pre{max-width:100%;font-size:12px}.recent-card{padding:0 12px 12px}.recent-card .section-head{padding:17px 4px}.admin-welcome{padding:18px}.section-head h2{font-size:18px}
}
/* Branding, configurable payments and wide desktop layout */
.auth-brand{display:flex;align-items:center;gap:14px}.auth-brand img{width:52px;height:52px;object-fit:contain;border-radius:12px;background:#fff;padding:3px;border:1.5px solid #e2e8f0;box-shadow:0 4px 14px rgba(0,0,0,0.08);display:block;flex-shrink:0}.telegram-login{display:flex;align-items:center;justify-content:center;gap:9px;padding:11px;border-radius:10px;background:#229ed9;color:#fff;font-weight:700}.telegram-login span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#fff;color:#229ed9}.brand{display:flex;align-items:center;gap:10px}.brand img{width:32px;height:32px;object-fit:contain;border-radius:8px;background:#fff;padding:2px;border:1px solid rgba(255,255,255,0.2);box-shadow:0 2px 6px rgba(0,0,0,0.12);display:block;flex-shrink:0}.brand::before{display:none!important}.payment-method-list{display:grid;gap:10px;margin-top:16px}.payment-method-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 14px;background:#f8f9ff;border:1px solid #e2e5f1;border-radius:12px}.payment-method-item div{display:flex;align-items:center;gap:10px}.payment-method-item small{color:#7b8396}.payment-settings-grid{display:grid;gap:10px;margin-top:12px}.payment-setting-row{display:grid;grid-template-columns:90px 1fr 130px;align-items:center;gap:10px}.branding-setting,.telegram-setting,.payment-setting{grid-column:1/-1}.settings-copy{min-width:0}#operatorRateFields{display:grid;gap:12px}
@media(min-width:901px){.layout{grid-template-columns:280px minmax(0,1fr)}#app-sidebar{width:280px}.content{width:100%;max-width:none;padding:24px 32px;box-sizing:border-box}header{padding:0 32px;height:68px;box-sizing:border-box}.service-grid{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}.dashboard-services-panel,.admin-data-panel,.pricing-panel,.settings-console{max-width:none;margin:0}}
@media(max-width:620px){.payment-setting-row{grid-template-columns:1fr}.payment-method-item{align-items:flex-start;flex-direction:column}.auth-brand h1{font-size:23px}}
.admin-card-search{max-width:420px;margin:0 0 18px}.admin-pricing-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.admin-pricing-card{padding:20px;background:#fff;border:1px solid #e1e6ef;border-radius:18px;box-shadow:0 8px 26px #26314a0b}.admin-pricing-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid #edf0f5}.admin-pricing-card h3{margin:3px 0 0}.admin-pricing-card header small{color:#7b8395}.option-rate-form,.simple-rate-form{display:grid;gap:14px;margin-top:15px}.option-rate-list{display:grid;gap:9px}.option-rate-card{display:grid;grid-template-columns:minmax(0,1fr) 110px 44px;align-items:center;gap:10px;padding:11px;border:1px solid #e6e9f1;border-radius:12px;background:#fafbfe}.option-rate-card>span:first-child{min-width:0}.option-rate-card b,.option-rate-card small{display:block}.option-rate-card small{margin-top:3px;color:#798196}.option-rate-card input[type=number]{min-height:40px;padding:7px}.option-switch{position:relative;width:42px;height:24px}.option-switch input{position:absolute;opacity:0}.option-switch i{display:block;width:42px;height:24px;border-radius:99px;background:#cfd4df;cursor:pointer}.option-switch i::after{content:'';display:block;width:18px;height:18px;margin:3px;border-radius:50%;background:#fff;transition:.18s}.option-switch input:checked+i{background:#14a58a}.option-switch input:checked+i::after{transform:translateX(18px)}.simple-rate-form{grid-template-columns:1fr 1fr auto;align-items:end}.recharge-filters{margin-bottom:17px}.recharge-admin-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.recharge-admin-card{padding:19px;background:#fff;border:1px solid #e2e6ee;border-radius:18px;box-shadow:0 7px 24px #26314a09}.recharge-admin-card>header{display:flex;align-items:flex-start;justify-content:space-between}.recharge-admin-card h3{margin:0 0 4px}.recharge-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:15px 0}.recharge-meta span{padding:10px;border-radius:10px;background:#f7f8fc}.recharge-meta small,.recharge-meta b{display:block}.payment-proof{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #dce2ed;border-radius:12px;font-weight:700}.payment-proof img{width:76px;height:76px;object-fit:cover;border-radius:9px}.recharge-review{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:14px}
@media(max-width:1050px){.admin-pricing-cards,.recharge-admin-cards{grid-template-columns:1fr}}
@media(max-width:620px){.admin-pricing-card,.recharge-admin-card{padding:14px}.option-rate-card{grid-template-columns:1fr 90px 42px}.simple-rate-form,.recharge-review{grid-template-columns:1fr}.recharge-meta{grid-template-columns:1fr 1fr}}
/* Compact, high-contrast desktop cards */
@media(min-width:769px){
.dashboard-service,.reference-service-tile{min-height:92px!important;padding:13px 15px!important;box-shadow:0 6px 18px #26314a14!important}
.dashboard-service:nth-child(8n+1),.reference-service-tile:nth-child(8n+1){background:#eaf4ff!important;border-color:#bcd9f7!important}
.dashboard-service:nth-child(8n+2),.reference-service-tile:nth-child(8n+2){background:#f2ecff!important;border-color:#d5c5f7!important}
.dashboard-service:nth-child(8n+3),.reference-service-tile:nth-child(8n+3){background:#e6f8f0!important;border-color:#b9e8d3!important}
.dashboard-service:nth-child(8n+4),.reference-service-tile:nth-child(8n+4){background:#fff3df!important;border-color:#f2d39e!important}
.dashboard-service:nth-child(8n+5),.reference-service-tile:nth-child(8n+5){background:#ffeaf0!important;border-color:#f2bdcb!important}
.dashboard-service:nth-child(8n+6),.reference-service-tile:nth-child(8n+6){background:#eaf0ff!important;border-color:#bfd0f4!important}
.dashboard-service:nth-child(8n+7),.reference-service-tile:nth-child(8n+7){background:#fff1dc!important;border-color:#efd19e!important}
.dashboard-service:nth-child(8n),.reference-service-tile:nth-child(8n){background:#e4f7f8!important;border-color:#b5e1e4!important}
.admin-pricing-cards{gap:15px}.admin-pricing-card{padding:16px;background:linear-gradient(145deg,#fff,#f1f4ff);border-color:#c8d3e5;box-shadow:0 8px 24px #26314a16}
.option-rate-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.option-rate-card{padding:9px;background:#fff;border-color:#d8dfeb}
}
@media(min-width:769px) and (max-width:1200px){.option-rate-list{grid-template-columns:1fr}}
.recharge-wallet-hero{display:flex;justify-content:space-between;gap:14px;max-width:820px;margin:0 auto 18px}.recharge-wallet-hero>div{display:grid;gap:4px;width:100%;min-width:220px;padding:22px 24px;border-radius:18px;background:linear-gradient(135deg,#1e1b4b 0%,#312e81 40%,#4338ca 100%)!important;border:1px solid rgba(255,255,255,0.15)!important;box-shadow:0 12px 32px rgba(49,46,129,0.25)!important;color:#fff}.recharge-wallet-hero>div:last-child{min-width:150px;background:linear-gradient(135deg,#4f46e5,#6366f1)!important}.recharge-wallet-hero small{color:#c7d2fe!important;font-size:13px;font-weight:600}.recharge-wallet-hero span{color:#e0e7ff!important;font-size:13px;opacity:.9}.recharge-wallet-hero strong{font-size:32px!important;font-weight:800!important;letter-spacing:-0.5px;color:#fff}.recharge-add-form{max-width:820px!important}.selected-payment{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid #c7d2fe;border-radius:16px;background:linear-gradient(135deg,#f5f7ff,#eef2ff)}.selected-payment>div{display:grid;gap:3px}.selected-payment strong{font-size:21px;color:#312e81}.selected-payment span{color:#4f46e5;font-weight:600}.fee-preview{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}.fee-preview b{color:#15803d}@media(max-width:900px){.bottom-nav{grid-template-columns:repeat(4,1fr)!important}}@media(max-width:620px){.recharge-wallet-hero{display:grid;grid-template-columns:1fr 120px}.recharge-wallet-hero>div,.recharge-wallet-hero>div:last-child{min-width:0;padding:16px}.recharge-wallet-hero strong{font-size:24px!important}.selected-payment{align-items:stretch;flex-direction:column}.selected-payment button{width:100%}.fee-preview{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Organized admin rate management */
.admin-page-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;margin-bottom:22px;background:linear-gradient(135deg,#fff,#f2f1ff);border:1px solid #e4e5f2;border-radius:18px}.admin-page-head h2{margin:4px 0 6px;font-size:26px}.admin-page-head p,.section-copy p{margin:0;color:#70788e}.eyebrow{color:#6157e8;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.summary-chips{display:flex;gap:10px;flex-wrap:wrap}.summary-chips span{padding:10px 13px;background:#fff;border:1px solid #e1e3ee;border-radius:12px;color:#60687b;white-space:nowrap}.summary-chips b{color:#5148cf;font-size:18px}.settings-section{margin-bottom:28px}.settings-section>.section-head{margin-bottom:14px}.section-copy h2{font-size:21px;margin:0 0 4px}.count-badge{background:#e9e8ff;color:#5148cf;border-radius:99px;padding:5px 10px;font-weight:700}.rate-grid{display:grid;gap:14px}.operator-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.service-rate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rate-card{display:grid;gap:14px;padding:18px;background:#fff;border:1px solid #e4e7fo;border-radius:15px;box-shadow:0 5px 18px #28304d08}.rate-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.rate-card-head small{display:block;color:#7c8497;font-weight:700;margin-bottom:4px}.rate-card h3{font-size:18px;line-height:1.35;margin:0}.state-dot{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}.state-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}.state-dot.on{background:#e3f8ef;color:#087354}.state-dot.off{background:#f0f1f5;color:#6e7482}.rate-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rate-fields label{font-size:13px;color:#5e6679}.rate-description{color:#727a8e;font-size:14px;line-height:1.5;margin:0;min-height:42px}.rate-card>button{width:100%}
@media(max-width:1150px){.operator-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.admin-page-head{align-items:flex-start;flex-direction:column;padding:19px}.summary-chips{width:100%}.summary-chips span{flex:1}.operator-grid,.service-rate-grid{grid-template-columns:1fr}.rate-description{min-height:0}}
@media(max-width:420px){.rate-fields{grid-template-columns:1fr}.admin-page-head h2{font-size:22px}}
/* Modern user management */
.user-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.user-admin-card{display:grid;align-content:start;background:#fff;border:1px solid #e3e6ef;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px #28304d0a}.user-card-top{display:flex;align-items:center;gap:12px;padding:20px}.user-avatar{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#6157e8,#8d84f4);color:#fff;font-size:21px;font-weight:800}.user-identity{min-width:0;flex:1}.user-identity h3{margin:0 0 4px;font-size:18px}.user-identity p{margin:0;color:#7b8396;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-state{padding:6px 9px;border-radius:99px;font-size:12px;font-weight:800;white-space:nowrap}.account-state.active{background:#e3f8ef;color:#087354}.account-state.pending{background:#fff3d9;color:#946000}.account-state.suspended{background:#ffe7ea;color:#a92233}.user-balance-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 20px;padding:16px;border-radius:14px;background:#f7f7fc}.user-balance-row small{display:block;color:#7a8295;margin-bottom:3px}.user-balance-row strong{font-size:22px;color:#242b42}.user-balance-row a{font-size:13px;font-weight:700;white-space:nowrap}.balance-panel{margin:14px 20px 0;border:1px solid #e4e6ef;border-radius:12px;overflow:hidden}.balance-panel summary{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;color:#515a70;font-weight:700;cursor:pointer;list-style:none}.balance-panel summary::-webkit-details-marker{display:none}.balance-panel[open] summary{background:#f8f8fc;border-bottom:1px solid #e5e7ef}.balance-panel[open] summary span{transform:rotate(180deg)}.balance-editor{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}.balance-editor label{font-size:12px;color:#6c7488}.balance-editor .note-field,.balance-editor button{grid-column:1/-1}.user-card-actions{display:flex;gap:8px;padding:16px 20px 20px}.user-card-actions button{min-height:40px;padding:8px 13px;font-size:13px}.button-muted{background:#eef0f5;color:#535c70}.button-danger-ghost{margin-left:auto;background:#fff0f2;color:#bc293d}.self-account-note{margin:16px 20px 20px;padding:11px 13px;border-radius:10px;background:#f4f5f9;color:#71798b;font-size:13px;text-align:center}.attention-chip{background:#fff7e5!important;border-color:#f0ddb2!important}.attention-chip b{color:#a56a00!important}
@media(max-width:1080px){.user-admin-grid{grid-template-columns:1fr}}
@media(max-width:620px){.users-page-head{margin-bottom:14px}.user-admin-grid{gap:12px}.user-admin-card{border-radius:16px}.user-card-top{padding:16px;align-items:flex-start}.user-avatar{width:44px;height:44px;flex-basis:44px;border-radius:12px}.user-identity p{white-space:normal}.account-state{font-size:11px}.user-balance-row{margin:0 14px;padding:14px}.user-balance-row strong{font-size:20px}.balance-panel{margin:12px 14px 0}.balance-editor{grid-template-columns:1fr}.balance-editor .note-field,.balance-editor button{grid-column:auto}.user-card-actions{display:grid;grid-template-columns:1fr 1fr;padding:14px}.user-card-actions button{width:100%;margin:0}.user-card-actions.actions-pending button:first-of-type{grid-column:1/-1}.button-danger-ghost{min-width:74px}.self-account-note{margin:14px}}
/* Category-based service directory */
.service-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:24px 26px;margin-bottom:22px;background:linear-gradient(135deg,#fff,#f1f0ff);border:1px solid #e3e5ef;border-radius:18px}.service-page-head h2{margin:4px 0 5px;font-size:26px}.service-page-head p{margin:0;color:#747c90}.service-search{position:relative;display:block;flex:0 1 370px}.service-search>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:22px;color:#7b8397}.service-search input{padding-left:43px;margin:0;background:#fff}.service-groups,.admin-service-groups{display:grid;gap:24px}.service-category,.category-admin-section{padding:20px;background:#fff;border:1px solid #e3e6ef;border-radius:18px;box-shadow:0 7px 24px #28304d08}.category-head,.category-title{display:flex;align-items:center;gap:12px}.category-head{margin-bottom:16px}.category-head h2,.category-title h2{margin:0;font-size:20px}.category-head p,.category-title p{margin:3px 0 0;color:#82899a;font-size:13px}.category-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#6157e8,#8e86f5);color:#fff;font-size:18px;font-weight:800}.grouped-service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.modern-service-card{display:flex;flex-direction:column;min-height:210px;padding:18px;box-shadow:none;background:#fafaff}.modern-service-card:hover{background:#fff}.service-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.service-card-top>span{font-size:12px;color:#737b8e}.service-card-top>b{font-size:17px;color:#087b5d}.modern-service-card h3{font-size:18px;line-height:1.35;margin:14px 0 8px}.modern-service-card p{font-size:14px;color:#747c8e;line-height:1.55;margin:0}.modern-service-card footer{margin-top:auto;padding-top:16px}.modern-service-card footer .button{display:flex;align-items:center;justify-content:space-between;width:100%}.service-unavailable{display:block;padding:11px;text-align:center;border-radius:9px;background:#f0f1f5;color:#777e8e}.category-admin-section>.section-head{margin-bottom:16px}.admin-service-groups .category-admin-section{padding:20px}.admin-service-groups .service-rate-grid{margin-top:4px}
@media(max-width:1100px){.grouped-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.service-page-head{align-items:stretch;flex-direction:column;padding:19px}.service-page-head h2{font-size:22px}.service-search{flex-basis:auto}.service-category,.category-admin-section,.admin-service-groups .category-admin-section{padding:14px;border-radius:16px}.grouped-service-grid{grid-template-columns:1fr}.modern-service-card{min-height:0}.service-groups,.admin-service-groups{gap:16px}.category-head{margin-bottom:12px}}
/* Reference-inspired unified admin console */
body{background:#f7f8fc}aside{background:#1e2a47;padding:24px 17px}.brand{font-size:23px}.brand::before{content:'โ';display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;border-radius:9px;background:#6157e8;color:#fff;font-size:13px}aside small{color:#8f9aba;margin-left:40px}nav{margin-top:26px}nav b{color:#7885a6;text-transform:uppercase;letter-spacing:.07em}nav a{position:relative;padding:11px 12px 11px 38px;color:#b7c0da}nav a::before{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:16px}nav a[href="admin.php"]::before{content:'โซ'}nav a[href="admin_orders.php"]::before{content:'โค'}nav a[href="admin_api_orders.php"]::before{content:'๐ฆ'}nav a[href="admin_users.php"]::before{content:'โ'}nav a[href="admin_notifications.php"]::before{content:'๐ข'}nav a[href="admin_chat.php"]::before{content:'๐ฌ'}nav a[href="admin_otp_logs.php"]::before{content:'๐'}nav a[href="admin_recharges.php"]::before{content:'โป'}nav a[href="admin_services.php"]::before{content:'โ'}nav a[href="admin_api.php"]::before{content:'โก'}nav a[href="admin_settings.php"]::before{content:'โ'}nav a.active{background:#3f8df5;box-shadow:0 7px 18px #193c753d;color:#fff}header{position:sticky;top:0;z-index:99;height:70px;background:#ffffff;border-bottom:1px solid #e8eaf2;box-shadow:0 2px 14px rgba(34,40,61,0.06)}.content{max-width:1380px;padding:30px}.admin-welcome{background:#fff;color:#20283b;border:1px solid #e5e8f0;box-shadow:0 8px 25px #25304a0a}.admin-welcome p{color:#7a8294}.admin-stats{grid-template-columns:repeat(3,1fr);padding:20px;background:#fff;border:1px solid #e5e8f0;border-radius:17px}.admin-stats article{position:relative;text-align:center;background:#f9fafc;box-shadow:none;border-color:#dde2eb}.admin-stats article::before{display:grid;place-items:center;width:43px;height:43px;margin:0 auto 7px;border-radius:50%;background:#e9e7ff;color:#6539ef;font-size:22px}.admin-stats article:nth-child(1)::before{content:'โ'}.admin-stats article:nth-child(2)::before{content:'โค'}.admin-stats article:nth-child(3)::before{content:'โป'}.admin-stats article:nth-child(4)::before{content:'เงณ'}.admin-stats article:nth-child(5)::before{content:'โ';background:#e0f8eb;color:#0baa60}.admin-stats b{color:#182139}.admin-page-head.compact-page-head{padding:20px 22px}.admin-data-panel{background:#fff;border:1px solid #e4e7ef;border-radius:17px;box-shadow:0 8px 28px #26314a0b;overflow:hidden}.data-panel-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid #edf0f5}.order-tabs, .user-tabs{display:flex;align-items:center;gap:6px;overflow-x:auto}.order-tabs a, .user-tabs a{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:99px;color:#6b7488;font-weight:700;white-space:nowrap}.order-tabs a span, .user-tabs a span{padding:2px 6px;border-radius:99px;background:#edf0f6;font-size:11px}.order-tabs a.active, .user-tabs a.active{background:#3f8df5;color:#fff}.order-tabs a.active span, .user-tabs a.active span{background:#ffffff30}.panel-search{position:relative;display:block;min-width:240px}.panel-search>span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#858da0}.panel-search input{padding-left:36px;min-height:40px}.admin-table{border:0;border-radius:0}.admin-table table{min-width:1000px}.admin-table th{background:#fff;border-bottom:1px solid #e7eaf1;font-size:12px;text-transform:uppercase;letter-spacing:.04em}.admin-table td{padding-top:15px;padding-bottom:15px}.order-update-form{display:grid;grid-template-columns:1fr;gap:6px;min-width:150px}.order-update-form input,.order-update-form select,.order-update-form button{min-height:36px;padding:7px 9px;font-size:12px}.order-update-form button{background:#3f8df5}
@media(max-width:900px){.layout{display:flex!important;flex-direction:column!important;width:100%!important;max-width:100vw!important;overflow-x:hidden!important}#app-sidebar{position:fixed!important;z-index:999!important;left:-290px!important;width:280px!important;transition:left .25s ease!important}#app-sidebar.open{left:0!important}main{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}.content{width:100%!important;max-width:100vw!important;box-sizing:border-box!important;padding:16px 12px!important}.data-panel-toolbar{align-items:stretch;flex-direction:column}.panel-search{min-width:0}.admin-stats{grid-template-columns:1fr 1fr!important;padding:12px}.admin-table table{min-width:0}}
@media(max-width:620px){.admin-page-head.compact-page-head{padding:17px}.admin-page-head.compact-page-head .summary-chips{display:none}.order-tabs{margin:0 -4px}.data-panel-toolbar{padding:13px}.admin-data-panel{background:transparent;border:0;box-shadow:none;overflow:visible}.admin-table tr{padding:10px 14px}.order-update-form{min-width:0}.order-update-form input,.order-update-form select,.order-update-form button{width:100%}}
.settings-console{display:grid;grid-template-columns:1fr 1fr;gap:16px}.settings-console-card{display:flex;align-items:center;gap:15px;padding:20px;background:#fff;border:1px solid #e4e7ef;border-radius:16px;box-shadow:0 7px 24px #26314a09}.settings-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:13px;background:#ece9ff;color:#6439ea;font-size:20px;font-weight:800}.settings-icon.green{background:#e2f8ec;color:#0b9c59}.settings-icon.orange{background:#fff1d9;color:#b66b00}.settings-copy{min-width:0;flex:1}.settings-copy h3{margin:0 0 4px}.settings-copy p{margin:0;color:#788095;font-size:14px}.switch-select{min-width:120px;font-size:12px;color:#70788c}.switch-select select{margin-top:5px}.notice-setting{grid-column:1/-1;align-items:flex-start}.notice-setting textarea{margin-top:14px}.settings-save{grid-column:1/-1;display:flex;justify-content:flex-end}.settings-save button{min-width:220px;background:#3f8df5}
.settings-floating-save-btn{position:fixed;bottom:24px;right:24px;z-index:99;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 22px;border-radius:99px;background:linear-gradient(135deg,#6157e8,#4f46e5);color:#fff;font-size:14px;font-weight:700;border:1px solid rgba(255,255,255,0.25);box-shadow:0 10px 25px rgba(97,87,232,0.45),0 2px 6px rgba(0,0,0,0.15);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.settings-floating-save-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(97,87,232,0.55)}
.settings-floating-save-btn:active{transform:scale(0.97)}
@media(max-width:900px){.settings-floating-save-btn{bottom:calc(72px + env(safe-area-inset-bottom) + 12px);right:16px}}
@media(max-width:760px){.settings-console{grid-template-columns:1fr}.settings-console-card,.notice-setting,.settings-save{grid-column:1}.settings-console-card{align-items:flex-start;flex-wrap:wrap}.switch-select{width:100%}.settings-save button{width:100%}}
/* Mobile form controls and dense dashboard layouts */
input[type="radio"],input[type="checkbox"]{width:auto;min-width:0;min-height:0;padding:0;flex:0 0 auto}
@media(max-width:620px){
header{padding-left:10px!important;padding-right:10px!important;gap:8px!important}
.header-title{min-width:0;gap:8px!important;flex:1 1 auto}
.header-title h1{min-width:0;line-height:1.2!important;overflow-wrap:anywhere}
header>div:last-child{flex:0 0 auto;gap:6px!important}
.user-area header .balance{padding:5px 8px!important;font-size:11px!important}
.content{padding-left:10px!important;padding-right:10px!important}
.reference-dashboard-panel{padding:10px!important}
.reference-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.reference-metric{min-width:0!important;min-height:104px!important;padding:10px 6px!important}
.reference-metric small{font-size:11px!important;line-height:1.25!important;overflow-wrap:anywhere}
.recharge-add-form{padding:14px!important;gap:12px!important}
.recharge-add-form .full-span>div[style*="minmax(200px"]{grid-template-columns:1fr!important}
.recharge-add-form #lbl-wallet-main,.recharge-add-form #lbl-wallet-recharge{min-width:0!important;padding:12px!important}
.recharge-add-form #lbl-wallet-main>div,.recharge-add-form #lbl-wallet-recharge>div{min-width:0!important}
.recharge-add-form .fee-preview{grid-template-columns:1fr!important}
}
/* Polished user workspace */
.user-area aside{background:linear-gradient(180deg,#183348,#12293d)}.user-area nav a.active{background:#14a58a;box-shadow:0 7px 18px #0b705d38}.user-area nav a[href="dashboard.php"]::before{content:'โซ'}.user-area nav a[href="services.php"]::before{content:'โ'}.user-area nav a[href="orders.php"]::before{content:'โค'}.user-area nav a[href="recharge.php"]::before{content:'๏ผ'}.user-area nav a[href="wallet.php"]::before{content:'เงณ'}.user-area nav a[href="profile.php"]::before{content:'โ'}.user-area .brand::before{background:#14a58a}.user-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;margin-bottom:16px;border-radius:20px;background:linear-gradient(135deg,#fff,#eaf9f5);border:1px solid #dcece8}.user-hero h2{margin:5px 0 7px;font-size:27px}.user-hero p{margin:0;color:#6f7a8a}.hero-balance{display:grid;min-width:230px;padding:18px 20px;border-radius:16px;background:#123e45;color:#fff}.hero-balance small{opacity:.72}.hero-balance strong{font-size:30px;margin:3px 0}.hero-balance a{color:#8de8d7;font-size:13px;font-weight:700}.dashboard-notice{display:flex;align-items:center;gap:11px;padding:12px 15px;margin-bottom:16px;border:1px solid #dce8f4;border-radius:12px;background:#f4f9ff;color:#496177}.dashboard-notice>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#3f8df5;color:#fff;font-weight:800}.dashboard-notice p{margin:0}.user-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:20px}.user-metric{display:flex;align-items:center;gap:13px;padding:17px;background:#fff;border:1px solid #e2e7ed;border-radius:16px;color:#283247;box-shadow:0 6px 20px #26314a08;transition:.18s}.user-metric:hover{transform:translateY(-2px);box-shadow:0 10px 25px #26314a12}.metric-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:13px;background:#dcf7ee;color:#0a956f;font-size:22px;font-weight:800}.metric-icon.violet{background:#eeeaff;color:#6a45e6}.metric-icon.orange{background:#fff1d9;color:#bd7200}.metric-icon.blue{background:#e4f1ff;color:#277ac9}.metric-icon.green{background:#e0f8ea;color:#0b9a56}.metric-icon.pink{background:#ffe7ed;color:#c33b5a}.user-metric div{display:grid}.user-metric strong{font-size:21px}.user-metric small{color:#7a8395}.dashboard-services-panel{padding:22px;background:#fff;border:1px solid #e2e6ed;border-radius:19px;box-shadow:0 8px 26px #26314a09}.dashboard-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:17px}.dashboard-section-head h2{margin:3px 0}.dashboard-section-head p{margin:0;color:#7b8394}.dashboard-section-head>a{font-weight:700;color:#0b987d;white-space:nowrap}
.user-area .content>.table-wrap,.user-area .content>.two-col>.card,.user-area .content>form.card{box-shadow:0 8px 26px #26314a09;border-radius:17px}.user-area .content>form.card{margin:auto}.user-area .content>.stats{max-width:100%}
@media(max-width:760px){.user-hero{align-items:stretch;flex-direction:column;padding:21px}.hero-balance{min-width:0}.user-metrics{grid-template-columns:repeat(3,1fr);gap:8px}.user-metric{flex-direction:column;align-items:center;text-align:center;padding:10px 6px}}
@media(max-width:460px){.user-hero h2{font-size:23px}.user-metrics{grid-template-columns:repeat(3,1fr);gap:6px}.user-metric{align-items:center;flex-direction:column;padding:8px 4px;text-align:center}.user-metric strong{font-size:15px}.user-metric small{font-size:10px}.metric-icon{width:34px;height:34px;font-size:16px}.dashboard-services-panel{padding:12px}.dashboard-section-head{align-items:flex-start;flex-direction:column}}
/* Clean Responsive Dashboard Service Grid System */
.dashboard-service-grid,
.reference-service-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
gap: 16px !important;
width: 100% !important;
}
.dashboard-service,
.reference-service-tile {
position: relative !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
min-height: 96px !important;
padding: 14px 16px !important;
background: #ffffff !important;
border: 1px solid #e2e6f0 !important;
border-radius: 16px !important;
box-shadow: 0 4px 15px rgba(38, 49, 74, 0.05) !important;
text-decoration: none !important;
color: #172033 !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
box-sizing: border-box !important;
}
.dashboard-service:hover,
.reference-service-tile:hover {
transform: translateY(-3px) !important;
box-shadow: 0 10px 28px rgba(20, 165, 138, 0.14) !important;
border-color: #14a58a !important;
background: #f7fcfb !important;
}
.dashboard-service .service-symbol,
.reference-service-tile .service-tile-icon {
display: grid !important;
place-items: center !important;
flex: 0 0 42px !important;
width: 42px !important;
height: 42px !important;
border-radius: 12px !important;
background: #eaf8f5 !important;
font-size: 22px !important;
line-height: 1 !important;
color: #0b9a7c !important;
flex-shrink: 0 !important;
}
.dashboard-service > div,
.reference-service-tile > div {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
min-width: 0 !important;
flex: 1 !important;
}
.dashboard-service h3,
.dashboard-service strong,
.reference-service-tile strong {
margin: 0 !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #172033 !important;
line-height: 1.3 !important;
white-space: normal !important;
word-break: break-word !important;
overflow: visible !important;
text-overflow: clip !important;
}
.dashboard-service p,
.dashboard-service em,
.reference-service-tile em {
margin: 0 !important;
font-size: 12px !important;
font-style: normal !important;
color: #64748b !important;
line-height: 1.35 !important;
white-space: normal !important;
word-break: break-word !important;
overflow: visible !important;
text-overflow: clip !important;
}
.dashboard-service > i,
.reference-service-tile > i {
font-size: 11.5px !important;
font-weight: 700 !important;
font-style: normal !important;
color: #14a58a !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
margin-left: auto !important;
padding-left: 4px !important;
}
/* Admin-off services stay visible, with a clear non-orderable state. */
.dashboard-service.service-is-off,
.reference-service-tile.service-is-off,
.service-card.service-is-off {
background: #fff1f2 !important;
border-color: #fecdd3 !important;
box-shadow: none !important;
}
.dashboard-service.service-is-off:hover,
.reference-service-tile.service-is-off:hover {
background: #fff1f2 !important;
border-color: #fb7185 !important;
}
.service-is-off > i,
.service-is-off .service-unavailable,
.service-is-off .service-rate-badge,
.service-status-badge {
color: #be123c !important;
}
.service-is-off .service-rate-badge,
.service-status-badge {
display: inline-flex !important;
align-items: center;
width: fit-content;
padding: 3px 8px;
margin-top: 3px;
border: 1px solid #fecdd3;
border-radius: 99px;
background: #ffe4e6;
font-size: 11px;
font-weight: 800;
line-height: 1.2;
}
/* Website shortcuts belong to the browser portal, not the native app UI. */
html.android-native-app .useful-sites-panel {
display: none !important;
}
/* Distinct card backgrounds on desktop */
.dashboard-service:nth-child(8n+1),.reference-service-tile:nth-child(8n+1){background:#f4f9ff!important;border-color:#dbe9fa!important}
.dashboard-service:nth-child(8n+2),.reference-service-tile:nth-child(8n+2){background:#f8f5ff!important;border-color:#e6ddfa!important}
.dashboard-service:nth-child(8n+3),.reference-service-tile:nth-child(8n+3){background:#f1fbf7!important;border-color:#d4f3e6!important}
.dashboard-service:nth-child(8n+4),.reference-service-tile:nth-child(8n+4){background:#fff9f0!important;border-color:#fae8cc!important}
.dashboard-service:nth-child(8n+5),.reference-service-tile:nth-child(8n+5){background:#fff3f6!important;border-color:#fad4de!important}
.dashboard-service:nth-child(8n+6),.reference-service-tile:nth-child(8n+6){background:#f2f6ff!important;border-color:#d9e4fa!important}
.dashboard-service:nth-child(8n+7),.reference-service-tile:nth-child(8n+7){background:#fdf8f0!important;border-color:#f7e8ce!important}
.dashboard-service:nth-child(8n),.reference-service-tile:nth-child(8n){background:#f0fafb!important;border-color:#d3f1f3!important}
.service-rate-badge,
.make-service-price {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 3px 9px !important;
border-radius: 99px !important;
background: #e6f8f0 !important;
color: #087354 !important;
font-size: 11.5px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
border: 1px solid rgba(8, 115, 84, 0.16) !important;
white-space: nowrap !important;
width: fit-content !important;
margin-top: 3px !important;
}
/* Mobile View: two readable columns; service names are never line-clamped. */
@media (max-width: 768px) {
.dashboard-services-panel {
padding: 14px 10px !important;
border-radius: 16px !important;
}
.dashboard-section-head h2 {
font-size: 19px !important;
font-weight: 800 !important;
}
.dashboard-section-head p {
font-size: 13px !important;
}
.dashboard-service-grid,
.reference-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
}
.dashboard-service,
.reference-service-tile {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
min-height: 106px !important;
padding: 10px 4px 8px !important;
border-radius: 13px !important;
gap: 2px !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.dashboard-service .service-symbol,
.reference-service-tile .service-tile-icon {
width: 44px !important;
height: 44px !important;
flex: 0 0 44px !important;
font-size: 24px !important;
margin-bottom: 4px !important;
border-radius: 12px !important;
}
.dashboard-service > div,
.reference-service-tile > div {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.dashboard-service h3,
.dashboard-service strong,
.reference-service-tile strong {
font-size: 12.5px !important;
font-weight: 750 !important;
line-height: 1.35 !important;
text-align: center !important;
white-space: normal !important;
display: block !important;
overflow: visible !important;
word-break: break-word !important;
color: #1e293b !important;
}
.service-rate-badge,
.make-service-price {
display: inline-flex !important;
margin: 4px auto 0 !important;
font-size: 11px !important;
font-weight: 800 !important;
padding: 3px 8px !important;
text-align: center !important;
line-height: 1.2 !important;
border-radius: 99px !important;
}
.dashboard-service p,
.dashboard-service em,
.reference-service-tile em,
.dashboard-service > i,
.reference-service-tile > i {
display: none !important;
}
.service-status-badge {
display: inline-flex !important;
margin: 4px auto 0 !important;
text-align: center !important;
}
}
.profile-menu{position:relative}.profile-menu>summary{display:block;cursor:pointer;list-style:none}.profile-menu>summary::-webkit-details-marker{display:none}.profile-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#14a58a,#48c4ae);color:#fff;font-size:17px;font-weight:800;box-shadow:0 5px 14px #0b705d2b}.profile-avatar.large{width:48px;height:48px;border-radius:14px;font-size:20px}.profile-dropdown{position:absolute;right:0;top:50px;z-index:80;width:290px;padding:10px;background:#fff;border:1px solid #e2e5ed;border-radius:15px;box-shadow:0 18px 45px #17213a26}.profile-summary{display:flex;align-items:center;gap:11px;padding:8px 8px 13px;border-bottom:1px solid #eceef3}.profile-summary>div{display:grid;min-width:0}.profile-summary small{color:#7b8496}.profile-dropdown>a{display:flex;align-items:center;gap:11px;padding:11px 10px;border-radius:10px;color:#273147}.profile-dropdown>a:hover{background:#f3f7f8}.profile-dropdown>a>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#e8f7f3;color:#0b9278}.profile-dropdown>a>div{display:grid}.profile-dropdown>a small{color:#858d9d;font-size:11px}.profile-dropdown .profile-logout{color:#b62a3e}.profile-dropdown .profile-logout>span{background:#ffedf0;color:#c62c42}.profile-dropdown footer{display:flex;justify-content:space-between;gap:10px;margin:5px -10px -10px;padding:11px 14px;border-radius:0 0 14px 14px;background:#f5f7fa;color:#7c8494;font-size:11px}.profile-dropdown footer b{color:#4c5669}.profile-menu[open] .profile-avatar{outline:3px solid #14a58a26}
@media(max-width:520px){.profile-dropdown{position:fixed;top:66px;right:10px;left:10px;width:auto}.profile-avatar{width:38px;height:38px}.user-area header>div:last-child{gap:8px}}
.profile-menu .profile-avatar{display:grid!important}
/* Two-column order forms with image upload */
.order-form{max-width:900px;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;padding:24px}.order-form>.form-head,.order-form>.notice,.order-form>.full-span{grid-column:1/-1}.order-form>.form-head{align-items:center;margin-bottom:2px;padding-bottom:16px;border-bottom:1px solid #e7eaf0}.order-form label{align-content:start}.order-form input,.order-form select,.order-form textarea{border:1.5px solid #cfd6e3;border-radius:10px;background:#fff}.order-form input::placeholder,.order-form textarea::placeholder{color:#9aa3b3;opacity:1}.order-form input:focus,.order-form select:focus,.order-form textarea:focus{border-color:#6157e8;box-shadow:0 0 0 3px #6157e815;outline:0}.upload-field{gap:8px}.upload-title{font-weight:700}.upload-drop{position:relative;display:grid;place-items:center;align-content:center;gap:3px;min-height:145px;padding:18px;border:2px dashed #bfc8d8;border-radius:14px;background:#f8faff;text-align:center;cursor:pointer;transition:.18s}.upload-drop:hover{border-color:#6157e8;background:#f5f3ff}.upload-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#e9e7ff;color:#6157e8;font-size:23px}.upload-drop>b{color:#3c465b}.upload-drop>small{color:#80899b;font-weight:400}.upload-drop input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.upload-preview{display:block;max-width:240px;max-height:180px;margin-top:8px;padding:5px;border:1px solid #dce1e9;border-radius:12px;object-fit:cover}.upload-preview[hidden]{display:none}.order-form>button{min-height:50px;font-size:16px}
@media(max-width:680px){.order-form{grid-template-columns:1fr;padding:17px;gap:14px}.order-form>.form-head,.order-form>.notice,.order-form>.full-span{grid-column:1}.upload-drop{min-height:125px}.upload-preview{max-width:100%}}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
eDokani-style Admin Pricing Page
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
/* Page header */
.pricing-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;margin-bottom:22px;background:linear-gradient(135deg,#fff,#f2f1ff);border:1px solid #e4e5f2;border-radius:18px}
.pricing-head h2{margin:4px 0 6px;font-size:28px;color:#1a1f36}
.pricing-head p{margin:0;color:#70788e;font-size:15px}
/* Main panel */
.pricing-panel{background:#fff;border:1px solid #e4e7ef;border-radius:16px;box-shadow:0 8px 30px #26314a0c;overflow:hidden}
/* Toolbar */
.pricing-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid #edf0f5}
.pricing-entries{display:flex;align-items:center;gap:8px;color:#6b7488;font-size:14px}
.pricing-entries select{width:auto;min-width:68px;min-height:38px;padding:7px 10px;font-size:13px;border-radius:8px;border:1px solid #d5d9e5;background:#fff}
.pricing-search-box{display:flex;align-items:center;gap:8px;color:#6b7488;font-size:14px}
.pricing-search-box input{width:220px;min-height:38px;padding:7px 12px;font-size:13px;border-radius:8px;border:1px solid #d5d9e5}
.pricing-search-box input:focus{border-color:#6157e8;box-shadow:0 0 0 3px #6157e815;outline:none}
/* Table */
.pricing-table-wrap{overflow-x:auto}
#pricingTable{width:100%;border-collapse:collapse;min-width:700px}
#pricingTable thead{background:#1e2a47}
#pricingTable th{padding:15px 20px;font-size:13px;font-weight:700;color:#c5cde0;text-align:left;letter-spacing:.03em;border-bottom:none}
#pricingTable tbody tr{transition:background .15s}
#pricingTable tbody tr:hover{background:#f6f7fc}
#pricingTable td{padding:18px 20px;border-bottom:1px solid #eceef4;vertical-align:middle;color:#2d354d;font-size:14px}
.ptbl-id{width:65px}
.ptbl-action{width:130px}
/* Operator price lines */
.op-price-line{padding:3px 0;font-size:13px;color:#4a5068;line-height:1.55}
.variant-price-line{padding:2px 0 2px 38px;font-size:12px;color:#737b8f}
.op-tag{display:inline-block;min-width:30px;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:800;text-align:center;margin-right:4px}
.op-tag.on{background:#d4edda;color:#155724}
.op-tag.off{background:#f8d7da;color:#721c24}
/* Simple price */
.simple-price{font-weight:700;color:#1a1f36;font-size:15px}
/* Action buttons */
.pricing-actions{display:flex;align-items:center;gap:8px}
.pricing-toggle{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;font-size:18px;cursor:pointer;border:0;transition:all .2s;box-shadow:0 3px 10px #0002}
.pricing-toggle.on{background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff}
.pricing-toggle.on:hover{background:linear-gradient(135deg,#219a52,#27ae60);transform:translateY(-1px);box-shadow:0 5px 15px #27ae6040}
.pricing-toggle.off{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff}
.pricing-toggle.off:hover{background:linear-gradient(135deg,#c0392b,#a93226);transform:translateY(-1px);box-shadow:0 5px 15px #e74c3c40}
.pricing-edit{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#8e44ad,#9b59b6);color:#fff;font-size:16px;cursor:pointer;border:0;transition:all .2s;box-shadow:0 3px 10px #0002}
.pricing-edit:hover{background:linear-gradient(135deg,#7d3c98,#8e44ad);transform:translateY(-1px);box-shadow:0 5px 15px #8e44ad40}
/* Footer & pagination */
.pricing-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-top:1px solid #edf0f5;color:#6b7488;font-size:14px}
.pricing-pages{display:flex;gap:4px}
.pricing-pages button{min-width:36px;min-height:36px;padding:4px 10px;border-radius:7px;background:#fff;border:1px solid #d8dce6;color:#5148cf;font-size:13px;font-weight:600;cursor:pointer;transition:.18s}
.pricing-pages button:hover:not(:disabled):not(.active){background:#f3f2ff;border-color:#b8b3f0}
.pricing-pages button.active{background:#5148cf;color:#fff;border-color:#5148cf;box-shadow:0 3px 10px #5148cf33}
.pricing-pages button:disabled{opacity:.35;cursor:default}
/* Modals */
.pricing-modal{border:0;border-radius:18px;box-shadow:0 25px 70px #10142b40;width:min(480px,92%);padding:0;overflow:hidden}
.pricing-modal::backdrop{background:rgba(15,23,42,0.45);backdrop-filter:blur(3px)}
.pricing-modal form{display:grid;gap:16px;padding:24px}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;background:#ffffff;border-bottom:1px solid #eef2f6;margin:-24px -24px 16px}
.modal-header h2,.modal-header h3{margin:0;color:#1e293b!important;font-size:16px!important;font-weight:700!important}
.modal-close{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#f1f5f9;color:#64748b;font-size:20px;border:0;cursor:pointer;transition:.15s;padding:0;line-height:1}
.modal-close:hover{background:#e2e8f0;color:#0f172a}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:8px;border-top:1px solid #edf0f5}
.modal-actions button{min-width:120px}
/* โโ Pricing responsive โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
@media(max-width:900px){
.pricing-head{padding:19px}.pricing-head h2{font-size:24px}
.pricing-toolbar{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px}
.pricing-search-box input{width:100%}
.pricing-footer{flex-direction:column;gap:10px;text-align:center;padding:14px 16px}
}
@media(max-width:620px){
.pricing-head{border-radius:14px;padding:16px}
.pricing-panel{border-radius:14px}
.pricing-table-wrap{overflow:visible}
#pricingTable{min-width:0;display:block}
#pricingTable thead{display:none}
#pricingTable tbody{display:grid;gap:12px;padding:12px}
#pricingTable tr{display:grid;background:#fff;border:1px solid #e5e8f1;border-radius:15px;padding:10px 16px;box-shadow:0 5px 18px #28304d0a}
#pricingTable td{display:grid;grid-template-columns:minmax(80px,30%) 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #edf0f5;overflow-wrap:anywhere}
#pricingTable td:last-child{border-bottom:0}
#pricingTable td::before{content:attr(data-label);font-size:12px;font-weight:700;color:#7b8397}
.pricing-actions{justify-content:flex-end}
.pricing-modal{width:calc(100% - 20px);border-radius:16px}
.modal-header{margin:-24px -24px 14px;padding:14px 18px}
.pricing-modal form{padding:20px}
}
/* Mobile help, Telegram chat and WebView-safe edges */
.sidebar-help{margin-top:auto!important;background:#173c57!important;color:#bfe9ff!important;border:1px solid #285d7c;font-weight:700}.sidebar-help span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#229ed9;color:#fff}.sidebar-help+.sidebar-logout{margin-top:4px!important}
.auth .telegram-login{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:80;width:auto;padding:10px 14px 10px 10px;border-radius:99px;box-shadow:0 10px 28px #146c963d}.auth{padding:24px max(16px,env(safe-area-inset-right)) max(88px,calc(24px + env(safe-area-inset-bottom))) max(16px,env(safe-area-inset-left));overflow:auto}html,body{max-width:100%;overflow-x:clip}img,video,canvas,svg{max-width:100%}
@media(max-width:620px){.layout,.layout main,.content{width:100%;min-width:0}.content>*{max-width:100%}.auth-card{width:100%;max-width:430px}.links{flex-wrap:wrap}.auth .telegram-login{right:calc(24px + env(safe-area-inset-right));bottom:calc(82px + env(safe-area-inset-bottom));width:52px;height:52px;padding:7px;font-size:0;border-radius:50%}.auth .telegram-login span{width:38px;height:38px;font-size:18px;margin:0}.auth .telegram-login::after{content:none}}
/* Polished responsive login */
.auth{position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 15% 15%,#ffffffaa 0 9%,transparent 28%),linear-gradient(145deg,#f0f1ff 0%,#edf7fb 52%,#e8fbf5 100%)}
.auth::before,.auth::after{content:'';position:fixed;border-radius:50%;filter:blur(2px);pointer-events:none}.auth::before{width:230px;height:230px;left:-95px;top:-95px;background:#7065ef12}.auth::after{width:260px;height:260px;right:-130px;bottom:-120px;background:#19ae8f12}
.auth-card{position:relative;z-index:2;width:min(420px,100%);padding:30px;border:1px solid #ffffff;background:#fffffff7;box-shadow:0 22px 65px #29325718}
.auth-brand{justify-content:center;text-align:center}.auth-brand img{width:50px;height:50px;flex:0 0 50px}.auth-brand h1{margin:0;font-size:clamp(22px,4vw,28px);line-height:1.2}.auth-card>p{text-align:center;color:#687187;font-size:14px}.auth-card label{font-size:14px;color:#252d42}.auth-card input{min-height:46px;background:#f9fbff;border-color:#cbd3e2}.auth-card>button{min-height:46px;background:linear-gradient(135deg,#6157e8,#7167ed);box-shadow:0 8px 18px #6157e82b}.auth-card .links{align-items:center;font-size:14px}.auth-card .links a{padding:3px 0}.auth .telegram-login{transition:transform .18s ease,box-shadow .18s ease}.auth .telegram-login:hover{transform:translateY(-2px);box-shadow:0 14px 32px #146c9650}
@media(max-width:620px){.auth{align-items:flex-start;padding-top:max(52px,calc(34px + env(safe-area-inset-top)));padding-bottom:max(118px,calc(100px + env(safe-area-inset-bottom)))}.auth-card{padding:24px 20px;border-radius:20px}.auth-brand{gap:10px}.auth-brand img{width:44px;height:44px;flex-basis:44px}.auth-brand h1{font-size:22px}.auth-card>p{margin-top:-2px}.auth-card .links{display:grid;grid-template-columns:1fr 1fr;text-align:center;gap:8px}.auth .telegram-login{right:calc(20px + env(safe-area-inset-right));bottom:calc(76px + env(safe-area-inset-bottom));width:50px;height:50px}.auth .telegram-login span{width:36px;height:36px}}
@media(max-width:380px){.auth{padding-left:12px;padding-right:12px}.auth-card{padding:21px 17px}.auth-brand h1{font-size:20px}.auth-card .links{font-size:13px}}
.auth-card,.auth-card>*{min-width:0;max-width:100%}.auth-card h1{overflow-wrap:anywhere}.auth-card .alert{width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal;line-height:1.5}.reset-action{display:block;width:100%;text-align:center;background:#13a47f}
.password-help-card{text-align:center}.password-help-icon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto;border-radius:17px;background:#ebe9ff;color:#6157e8;font-size:23px}.password-help-card>p{line-height:1.65;color:#626c80}.password-help-card>small{color:#7c8597}.password-help-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.password-help-actions a{text-align:center}@media(max-width:380px){.password-help-actions{grid-template-columns:1fr}}
/* Make service price badge */
.make-service-price{display:inline-flex;width:max-content;margin-top:9px;padding:5px 10px;border-radius:999px;background:#e9fbf6;color:#087f6b;font-size:13px;font-style:normal;font-weight:800}
.service-rate-badge{display:inline-flex;width:max-content;margin-top:7px;padding:4px 9px;border-radius:999px;background:#e9fbf6;color:#087f6b;font-size:13px;font-style:normal;font-weight:800}
.order-live-price{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:13px 15px;border:1px solid #bdebdc;border-radius:12px;background:#edfbf6;color:#087354}.order-live-price span{font-size:13px;font-weight:700}.order-live-price strong{margin-left:auto;font-size:22px}.order-live-price small{flex-basis:100%;color:#568073}.order-live-price.unavailable{border-color:#f0c6cc;background:#fff0f2;color:#a92233}.order-live-price.unavailable small{color:#a45c66}@media(max-width:620px){.order-live-price strong{margin-left:auto}.order-live-price small{width:100%}}
.server-copy-upload{max-width:720px;margin:30px auto;padding:24px}.server-copy-drop{min-height:260px;background:linear-gradient(145deg,#f4f3ff,#ecfbf7);border-color:#948cf0}.server-copy-drop .upload-icon{width:64px;height:64px;font-size:17px;font-weight:900}.server-copy-editor{max-width:980px;grid-template-columns:repeat(2,minmax(0,1fr))}.server-copy-preview{display:flex;align-items:center;gap:16px;padding:14px;border-radius:14px;background:#edf9f6}.server-copy-preview img{width:76px;height:90px;object-fit:cover;border-radius:10px}.server-copy-preview div{display:grid;gap:4px}.server-copy-preview b{font-size:18px}@media(max-width:620px){.server-copy-upload{margin:12px 0;padding:14px}.server-copy-drop{min-height:210px}.server-copy-editor{grid-template-columns:1fr}.server-copy-editor>label,.server-copy-editor>.full-span{grid-column:1}.server-copy-editor{padding:14px}}
.server-copy-success{max-width:680px;margin:35px auto;text-align:center}.server-copy-success>span{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:#dff8ee;color:#087354;font-size:34px;font-weight:900}.server-copy-success h2{margin:0 0 6px}.server-copy-success .actions{justify-content:center;margin-top:18px}
.user-order-simple table{min-width:600px}.user-order-simple th:nth-child(1),.user-order-simple td:nth-child(1),.user-order-simple th:nth-child(5),.user-order-simple td:nth-child(5){display:none}.user-order-simple th:nth-child(3){font-size:0}.user-order-simple th:nth-child(3)::after{content:'View';font-size:14px}.user-order-simple th:nth-child(6){font-size:0}.user-order-simple th:nth-child(6)::after{content:'Save';font-size:14px}.admin-current-result{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;padding:10px;border-radius:10px;background:#f5f7fb}@media(max-width:760px){.user-order-simple table{min-width:0}.user-order-simple tr[data-item]{padding:14px}.user-order-simple td:nth-child(2),.user-order-simple td:nth-child(3),.user-order-simple td:nth-child(4),.user-order-simple td:nth-child(6){display:flex!important;align-items:center;justify-content:space-between;gap:12px}.user-order-simple td:nth-child(2)::before{content:'เฆธเงเฆฌเฆพ'}.user-order-simple td:nth-child(3)::before{content:'View'}.user-order-simple td:nth-child(4)::before{content:'เฆฎเงเฆฒเงเฆฏ'}.user-order-simple td:nth-child(6)::before{content:'Save'}}
/* API provider and sub-account management */
.admin-area nav a[href="admin_api.php"]::before{content:'โก';font-size:16px}.api-create-card,.api-provider-card{padding:18px;background:#fff;border:1px solid #dfe5ef;border-radius:17px;box-shadow:0 8px 25px #26314a0b}.api-create-card{margin-bottom:16px}.api-provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.api-provider-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.api-provider-card h3,.api-provider-card h4{margin:2px 0}.api-status{padding:5px 9px;border-radius:99px;font-size:12px;font-weight:800}.api-status.active{background:#dff8ed;color:#087756}.api-status.inactive{background:#ffe5e8;color:#a42a3a}.api-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.api-form label,.sub-api-row label{display:grid;gap:4px;font-size:12px;font-weight:700}.api-form button{grid-column:1/-1}.sub-api-zone{margin-top:16px;padding-top:14px;border-top:1px solid #e7eaf1}.sub-api-title{display:flex;align-items:center;justify-content:space-between}.sub-api-title span{padding:3px 8px;border-radius:99px;background:#edf0ff;color:#554ad5;font-size:12px}.sub-api-row{display:grid;grid-template-columns:1fr .65fr .7fr auto;gap:7px;margin-top:9px;padding:11px;border:1px solid #e2e7ef;border-radius:12px;background:#f8faff}.api-credentials{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px}.api-credentials code{padding:5px 7px;border-radius:7px;background:#edf1f7;overflow-wrap:anywhere}.sub-api-create{display:grid;grid-template-columns:1fr .65fr .7fr auto;gap:7px;margin-top:10px}.api-form input,.api-form select,.sub-api-row input,.sub-api-row select,.sub-api-create>*{min-width:0}@media(max-width:900px){.api-provider-grid{grid-template-columns:1fr}}@media(max-width:620px){.api-create-card,.api-provider-card{padding:13px}.api-form{grid-template-columns:1fr}.sub-api-row,.sub-api-create{grid-template-columns:1fr 1fr}.sub-api-row button,.sub-api-create button{grid-column:1/-1}}
.make-service-container{max-width:980px;margin:10px auto}
.smart-breakdown-banner{transition:all .2s ease}
.smart-breakdown-banner:hover{box-shadow:0 4px 15px rgba(20,165,138,0.1)}
.server-copy-editor label input,.server-copy-editor label select,.server-copy-editor label textarea{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;background:#f8fafc;transition:border-color .15s,box-shadow .15s}
.server-copy-editor label input:focus,.server-copy-editor label select:focus,.server-copy-editor label textarea:focus{outline:none;border-color:#14a58a;box-shadow:0 0 0 3px rgba(20,165,138,0.15);background:#fff}
/* โโ Categorized Mobile Recharge โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.recharge-category-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.recharge-category-tabs::-webkit-scrollbar{height:4px}
.recharge-category-tabs::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
.cat-tab-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:99px;font-size:13px;font-weight:700;color:#475569;cursor:pointer;white-space:nowrap;transition:all .15s ease}
.cat-tab-btn:hover{background:#e2e8f0;color:#1e293b}
.cat-tab-btn.active{background:#14a58a;color:#fff;border-color:#14a58a;box-shadow:0 3px 10px rgba(20,165,138,0.25)}
.cat-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;font-size:11px;font-weight:800;background:rgba(0,0,0,0.08);color:inherit}
.cat-tab-btn.active .cat-badge{background:rgba(255,255,255,0.25);color:#fff}
.offer-search-container{margin-bottom:14px}
.offer-search-container input{width:100%;padding:10px 14px;border:1px solid #cbd5e1;border-radius:10px;font-size:14px;background:#f8fafc}
.offer-search-container input:focus{outline:none;border-color:#14a58a;box-shadow:0 0 0 3px rgba(20,165,138,0.15);background:#fff}
.regular-amount-panel{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px;margin-bottom:14px}
.quick-amount-chips{display:flex;gap:8px;flex-wrap:wrap}
.quick-amt-chip{padding:7px 14px;border-radius:8px;background:#fff;border:1px solid #cbd5e1;color:#1e293b;font-weight:700;font-size:13px;cursor:pointer;transition:all .15s ease}
.quick-amt-chip:hover{background:#14a58a;color:#fff;border-color:#14a58a;transform:translateY(-1px)}
.offer-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:14px}
.recharge-offer-card{display:flex;flex-direction:column;justify-content:space-between;padding:14px;border-radius:12px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 2px 8px rgba(0,0,0,0.03);cursor:pointer;transition:all .2s ease;text-align:left}
.recharge-offer-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.07);border-color:#14a58a}
.offer-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.offer-type-badge{padding:3px 8px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:0.3px}
.offer-type-badge.type-internet{background:#e0f2fe;color:#0369a1}
.offer-type-badge.type-minutes{background:#f3e8ff;color:#7e22ce}
.offer-type-badge.type-bundle{background:#dcfce7;color:#15803d}
.offer-type-badge.type-callrate{background:#fef3c7;color:#b45309}
.offer-type-badge.type-special{background:#ffe4e6;color:#e11d48}
.offer-type-badge.type-default{background:#f1f5f9;color:#475569}
.offer-price-tag{font-size:18px;font-weight:800;color:#0f172a}
.offer-card-title{font-size:15px;font-weight:700;color:#1e293b;margin-bottom:4px;line-height:1.3}
.offer-card-desc{font-size:12px;color:#64748b;margin-bottom:12px;flex:1}
.offer-buy-btn{width:100%;padding:8px 12px;background:#f8fafc;border:1px solid #cbd5e1;border-radius:7px;font-size:13px;font-weight:700;color:#1e293b;cursor:pointer;transition:all .15s ease;text-align:center}
.recharge-offer-card:hover .offer-buy-btn{background:#14a58a;color:#fff;border-color:#14a58a}
.no-offer-box{grid-column:1/-1;text-align:center;padding:35px 20px;background:#fff;border-radius:12px;border:1px dashed #cbd5e1}
.make-search-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:flex-end}
@media(max-width:680px){
.make-search-grid{grid-template-columns:1fr!important}
.make-search-grid button{width:100%!important}
}
/* Password reset OTP */
.password-help-card>small{line-height:1.55}.otp-log-filter{display:flex;align-items:flex-end;gap:10px;margin-bottom:16px}.otp-log-filter label{min-width:220px}.otp-status.sent{background:#e6f0ff;color:#2457a7}.otp-status.used{background:#dff8ee;color:#087354}.otp-status.send_failed,.otp-status.locked{background:#ffe1e5;color:#a92233}.otp-status.expired,.otp-status.rate_limited{background:#fff1cf;color:#8a5a00}.otp-status.created{background:#eef0ff;color:#5148cf}@media(max-width:620px){.otp-log-filter{display:grid;grid-template-columns:1fr auto}.otp-log-filter label{min-width:0}}
.admin-pricing-card{scroll-margin-top:96px}.pricing-save-toast{position:fixed;right:24px;bottom:24px;z-index:9999;padding:12px 18px;border-radius:12px;background:#087354;color:#fff;font-weight:700;box-shadow:0 12px 32px #0003;opacity:0;transform:translateY(14px);pointer-events:none;transition:.2s}.pricing-save-toast.error{background:#a92233}.pricing-save-toast.show{opacity:1;transform:translateY(0)}@media(max-width:620px){.pricing-save-toast{left:16px;right:16px;bottom:78px;text-align:center}}
.admin-order-toolbar{align-items:flex-start;flex-direction:column;gap:14px}
.is-loading,[aria-disabled="true"]{opacity:.68;cursor:wait!important;pointer-events:none}
.admin-order-search{display:flex;align-items:center;flex-wrap:wrap;gap:9px;width:100%}
.admin-order-search input[type="search"]{flex:1 1 340px;min-width:220px;max-width:620px;height:44px;border:1px solid #d8def0;border-radius:10px;background:#fff;padding:0 14px;color:#17213b}
.admin-order-search button,.admin-order-search .button{height:44px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0 18px}
.admin-order-search small{color:#6b7280;font-weight:700}
@media(max-width:640px){.admin-order-search input[type="search"]{flex-basis:100%;max-width:none}.admin-order-search button,.admin-order-search .button{flex:1}}
/* ==========================================================================
Notifications System Redesign
========================================================================== */
.notifications-container{max-width:880px;margin:0 auto}
.notif-header-hero{display:flex;justify-content:space-between;align-items:center;gap:14px;background:linear-gradient(135deg,#f8faff 0%,#edf2fe 100%);border:1px solid #dbe4f9;border-radius:16px;padding:20px 24px;margin-bottom:18px}
.notif-header-hero h2{margin:3px 0 4px;font-size:20px;color:#1e293b}
.notif-header-hero p{margin:0;color:#64748b;font-size:13.5px}
.notif-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.notif-filter-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px}
.notif-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:99px;background:#fff;border:1.5px solid #e2e8f0;color:#475569;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;transition:all .15s ease}
.notif-tab:hover{border-color:#6157e8;color:#6157e8}
.notif-tab.active{background:#6157e8;border-color:#6157e8;color:#fff;box-shadow:0 4px 12px #6157e830}
.notif-tab .tab-count{background:#fff3;padding:1px 7px;border-radius:12px;font-size:11px}
.notif-list{display:grid;gap:12px}
.notif-card{position:relative;display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px 18px;box-shadow:0 2px 10px #0f172a06;transition:all .2s ease}
.notif-card:hover{border-color:#cbd5e1;box-shadow:0 6px 20px #0f172a0a;transform:translateY(-1px)}
.notif-card.unread{border-left:4px solid #6157e8;background:#fcfdff}
.notif-icon-wrap{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.notif-content{flex:1;min-width:0}
.notif-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.notif-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.notif-pill{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase}
.notif-title{font-size:15px;color:#1e293b;font-weight:700}
.notif-time{font-size:12px;color:#94a3b8;white-space:nowrap;font-weight:600}
.notif-body p{margin:0;color:#475569;font-size:14px;line-height:1.5}
.unread-dot{display:none !important}
/* Category Badges */
.badge-success{background:#dcfce7;color:#15803d}
.badge-danger{background:#fee2e2;color:#b91c1c}
.badge-purple{background:#f3e8ff;color:#7e22ce}
.badge-primary{background:#dbeafe;color:#1d4ed8}
.badge-warning{background:#fef3c7;color:#b45309}
.badge-promo{background:#fce7f3;color:#be185d}
.badge-info{background:#e0e7ff;color:#4338ca}
.notif-empty-state{background:#fff;border:1.5px dashed #cbd5e1;border-radius:16px;padding:48px 24px;text-align:center}
.notif-empty-state .empty-icon{font-size:48px;margin-bottom:10px}
.notif-empty-state h3{margin:0 0 6px;color:#1e293b}
.notif-empty-state p{margin:0;color:#64748b;font-size:14px;max-width:420px;margin:0 auto}
/* Header & Sidebar Badge Utilities */
.header-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#f0efff;color:#5148cf;font-size:19px;text-decoration:none;transition:all .15s ease}
.header-icon-btn:hover{background:#e3e0ff;transform:scale(1.05)}
.icon-badge{position:absolute;top:-3px;right:-3px;background:#e11d48;color:#fff;font-size:10px;font-weight:800;border-radius:99px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid #fff;box-shadow:0 2px 5px #e11d4840}
.nav-badge{background:#e11d48;color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:99px;margin-left:auto}
.admin-user-pill{display:inline-flex;align-items:center;padding:6px 12px;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:10px;font-size:13px;font-weight:700;color:#1e293b}
.bottom-nav-5{grid-template-columns:repeat(5,1fr)!important}
.bottom-badge{position:absolute;top:-4px;right:-8px;background:#e11d48;color:#fff;font-size:9px;font-weight:800;border-radius:99px;min-width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;padding:0 2px;border:1.5px solid #fff}
/* ==========================================================================
Admin Notification Broadcast Panel
========================================================================== */
.admin-notification-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:start}
@media(max-width:880px){.admin-notification-grid{grid-template-columns:1fr}}
.history-list{display:grid;gap:12px}
.history-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px;transition:background .15s}
.history-item:hover{background:#f1f5f9}
/* ==========================================================================
Live Support Chat System (User & Admin)
========================================================================== */
.chat-app-wrapper{max-width:860px;margin:0 auto}
.chat-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;display:flex;flex-direction:column;height:calc(100vh - 170px);min-height:560px;max-height:760px;box-shadow:0 8px 30px #0f172a0c;overflow:hidden}
.chat-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:linear-gradient(180deg,#fafbff 0%,#f4f6fc 100%)}
.chat-header-info{display:flex;align-items:center;gap:12px}
.support-avatar{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#6157e8,#8b5cf6);color:#fff;display:grid;place-items:center;font-size:22px;position:relative}
.online-indicator{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;background:#10b981;border:2px solid #fff;border-radius:50%}
.support-title{margin:0;font-size:16px;color:#1e293b;font-weight:700}
.support-status{color:#059669;font-weight:600;font-size:12px}
.chat-messages-container{flex:1;overflow-y:auto;padding:20px;background:#f8faff;display:flex;flex-direction:column;gap:12px}
.chat-welcome-box{background:#fff;border:1.5px dashed #cbd5e1;border-radius:14px;padding:20px;text-align:center;margin-bottom:10px}
.chat-welcome-box .welcome-icon{font-size:36px;margin-bottom:6px}
.chat-welcome-box h4{margin:0 0 6px;color:#1e293b;font-size:15px}
.chat-welcome-box p{margin:0 0 12px;color:#64748b;font-size:13px;line-height:1.4}
.quick-prompts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.quick-prompts button{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600;color:#334155;cursor:pointer;transition:all .15s}
.quick-prompts button:hover{background:#6157e8;color:#fff;border-color:#6157e8}
.chat-bubble-row{display:flex;width:100%}
.chat-bubble-row.outgoing{justify-content:flex-end}
.chat-bubble-row.incoming{justify-content:flex-start}
.chat-bubble{max-width:75%;border-radius:16px;padding:12px 16px;position:relative;word-break:break-word;box-shadow:0 2px 8px #0f172a08}
.chat-bubble-row.outgoing .chat-bubble{background:linear-gradient(135deg,#6157e8,#5148cf);color:#fff;border-bottom-right-radius:4px}
.chat-bubble-row.incoming .chat-bubble{background:#fff;border:1px solid #e2e8f0;color:#1e293b;border-bottom-left-radius:4px}
.sender-name{display:block;font-size:11px;font-weight:800;color:#6157e8;margin-bottom:4px}
.chat-text{font-size:14.5px;line-height:1.45}
.chat-time{font-size:11px;margin-top:5px;opacity:.75;text-align:right}
.chat-bubble-row.incoming .chat-time{color:#94a3b8}
.chat-attachment-wrap{margin-bottom:8px;border-radius:10px;overflow:hidden;background:#0001}
.chat-attachment-wrap img{display:block;max-width:100%;max-height:260px;object-fit:cover;border-radius:10px;cursor:zoom-in;transition:transform .2s}
.chat-attachment-wrap img:hover{transform:scale(1.02)}
.image-preview-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#f1f5f9;border-top:1px solid #e2e8f0}
.preview-thumbnail-wrap{position:relative;width:50px;height:50px;border-radius:8px;overflow:hidden;border:1px solid #cbd5e1;background:#fff;display:grid;place-items:center;flex-shrink:0}
.preview-thumbnail-wrap img{width:100%;height:100%;object-fit:cover}
.preview-doc-badge{width:100%;height:100%;display:grid;place-items:center;font-size:22px;background:#f8fafc}
.remove-preview-btn{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;font-size:10px;cursor:pointer;display:grid;place-items:center;line-height:1;padding:0;z-index:2}
.preview-info{display:grid;gap:2px;min-width:0;flex:1}
.preview-info strong{font-size:13px;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.preview-info small{color:#64748b;font-size:11px}
.chat-input-form{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid #e2e8f0;background:#fff;position:relative}
.chat-attach-btn{width:42px;height:42px;border-radius:12px;border:1px solid #cbd5e1;background:#f8fafc;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:all .15s;flex-shrink:0;color:#475569}
.chat-attach-btn:hover{background:#f1f5f9;border-color:#6157e8;color:#6157e8}
.chat-mic-btn{width:42px;height:42px;border-radius:12px;border:1px solid #cbd5e1;background:#f8fafc;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:all .15s;flex-shrink:0;color:#475569}
.chat-mic-btn:hover{background:#fee2e2;border-color:#fca5a5;color:#ef4444;transform:scale(1.04)}
.chat-mic-btn.recording{background:#ef4444;color:#fff;border-color:#dc2626;animation:mic-pulse 1.2s infinite}
@keyframes mic-pulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,0.6)}70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
/* Recording Status HUD Bar */
.chat-recording-hud{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:linear-gradient(135deg,#fff1f2,#ffe4e6);border-top:1px solid #fecdd3;width:100%;box-sizing:border-box;animation:slideUpHud .2s ease-out}
@keyframes slideUpHud{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.recording-hud-info{display:flex;align-items:center;gap:10px}
.recording-pulse-circle{width:12px;height:12px;border-radius:50%;background:#e11d48;animation:pulseCircle .8s infinite alternate}
@keyframes pulseCircle{0%{transform:scale(0.85);opacity:0.7}100%{transform:scale(1.25);opacity:1}}
.recording-hud-title{font-size:13.5px;font-weight:700;color:#9f1239;display:flex;align-items:center;gap:6px}
.recording-hud-timer{font-family:monospace,sans-serif;font-size:14px;font-weight:800;color:#be123c;background:#fff;padding:3px 8px;border-radius:6px;border:1px solid #fda4af}
.recording-hud-actions{display:flex;align-items:center;gap:8px}
.hud-btn-cancel{padding:7px 12px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;color:#475569;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .15s}
.hud-btn-cancel:hover{background:#f1f5f9;color:#0f172a}
.hud-btn-send{padding:7px 14px;border-radius:8px;border:none;background:linear-gradient(135deg,#e11d48,#be123c);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;box-shadow:0 3px 10px rgba(225,29,72,0.3);transition:all .15s}
.hud-btn-send:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(225,29,72,0.4)}
/* Audio Player in Chat Bubble */
.chat-audio-player{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;margin-bottom:6px;min-width:240px;max-width:320px;box-sizing:border-box}
.chat-bubble-row.outgoing .chat-audio-player{background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.25);color:#fff}
.chat-bubble-row.incoming .chat-audio-player{background:#f8fafc;border:1px solid #e2e8f0;color:#1e293b}
.audio-play-btn{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;flex-shrink:0;font-size:14px;transition:transform .15s,background .15s}
.chat-bubble-row.outgoing .audio-play-btn{background:#ffffff;color:#5b21b6;box-shadow:0 3px 10px rgba(0,0,0,0.15)}
.chat-bubble-row.incoming .audio-play-btn{background:linear-gradient(135deg,#6157e8,#4f46e5);color:#ffffff;box-shadow:0 3px 10px rgba(97,87,232,0.3)}
.audio-play-btn:hover{transform:scale(1.08)}
.audio-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.audio-progress-bar{width:100%;height:6px;border-radius:99px;position:relative;cursor:pointer;overflow:hidden}
.chat-bubble-row.outgoing .audio-progress-bar{background:rgba(255,255,255,0.28)}
.chat-bubble-row.incoming .audio-progress-bar{background:#cbd5e1}
.audio-progress-fill{height:100%;width:0%;border-radius:99px;transition:width 0.1s linear}
.chat-bubble-row.outgoing .audio-progress-fill{background:#ffffff}
.chat-bubble-row.incoming .audio-progress-fill{background:#6157e8}
.audio-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-family:monospace,sans-serif;opacity:0.85}
.audio-dl-btn{color:inherit;text-decoration:none;font-size:12px;opacity:0.8;padding:2px 4px;border-radius:4px;transition:opacity .15s}
.audio-dl-btn:hover{opacity:1}
/* Document & Spreadsheet Attachment Card in Chat */
.chat-doc-card{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;margin-bottom:6px;min-width:230px;max-width:320px;text-decoration:none;transition:transform .15s,box-shadow .15s;box-sizing:border-box}
.chat-doc-card:hover{transform:translateY(-2px)}
.chat-bubble-row.outgoing .chat-doc-card{background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.28);color:#ffffff!important}
.chat-bubble-row.incoming .chat-doc-card{background:#f8fafc;border:1px solid #e2e8f0;color:#1e293b!important}
.chat-doc-icon-wrap{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.doc-icon-pdf{background:#fee2e2;color:#dc2626}
.doc-icon-excel{background:#dcfce7;color:#15803d}
.doc-icon-csv{background:#fef9c3;color:#a16207}
.doc-icon-generic{background:#e0e7ff;color:#4338ca}
.chat-doc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chat-doc-name{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.chat-doc-type-badge{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;opacity:0.8}
.chat-doc-download-icon{font-size:16px;opacity:0.85;flex-shrink:0;transition:transform .15s}
.chat-doc-card:hover .chat-doc-download-icon{transform:translateY(2px);opacity:1}
.chat-input-form textarea{flex:1;border:1.5px solid #cbd5e1;border-radius:12px;padding:10px 14px;font-size:14px;resize:none;max-height:100px;outline:0;font-family:inherit}
.chat-input-form textarea:focus{border-color:#6157e8;box-shadow:0 0 0 3px #6157e815}
.chat-send-btn{width:44px;height:44px;border-radius:12px;border:none;background:linear-gradient(135deg,#6157e8,#5148cf);color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:all .15s;flex-shrink:0}
.chat-send-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #6157e830}
.chat-send-btn:disabled{opacity:.5;cursor:not-allowed}
/* Image Zoom Modal */
.image-modal{display:none;position:fixed;inset:0;z-index:99999;background:rgba(15,23,42,.85);backdrop-filter:blur(6px);align-items:center;justify-content:center;flex-direction:column;padding:20px}
.close-modal-btn{position:absolute;top:20px;right:24px;color:#fff;font-size:28px;font-weight:800;cursor:pointer}
.modal-content{max-width:90vw;max-height:80vh;border-radius:12px;box-shadow:0 12px 40px #0008;object-fit:contain}
.modal-caption{margin-top:14px}
/* ==========================================================================
Admin Live Support Desk (admin_chat.php) & Admin Header Profile
========================================================================== */
.admin-profile-menu summary {
display: block;
cursor: pointer;
list-style: none;
padding: 0;
margin: 0;
border: none;
background: transparent;
}
.admin-profile-menu summary::-webkit-details-marker {
display: none;
}
.admin-avatar-badge {
display: grid !important;
place-items: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #6157e8, #4338ca) !important;
color: #fff !important;
font-size: 18px;
box-shadow: 0 4px 14px rgba(97, 87, 232, 0.28);
transition: transform .15s ease, box-shadow .15s ease;
}
.admin-profile-menu summary:hover .admin-avatar-badge {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(97, 87, 232, 0.38);
}
.admin-profile-menu[open] .admin-avatar-badge {
outline: 3px solid rgba(97, 87, 232, 0.25);
}
.admin-chat-layout {
display: grid;
grid-template-columns: 350px 1fr;
height: calc(100vh - 130px);
min-height: 600px;
border: 1px solid #e2e8f0;
border-radius: 18px;
background: #fff;
overflow: hidden;
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
box-sizing: border-box;
}
.chat-sidebar-panel {
border-right: 1px solid #e2e8f0;
background: #fafbff;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
min-width: 0;
box-sizing: border-box;
}
.chat-sidebar-head {
padding: 14px 16px;
border-bottom: 1px solid #e2e8f0;
background: #ffffff;
box-sizing: border-box;
}
.sidebar-head-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
gap: 8px;
}
.sidebar-head-title {
margin: 0;
font-size: 15px;
font-weight: 700;
color: #1e293b;
white-space: nowrap;
}
.refresh-conv-btn {
min-height: 32px !important;
height: 32px !important;
width: 32px !important;
padding: 0 !important;
border-radius: 8px !important;
background: #f1f5f9 !important;
color: #475569 !important;
border: 1px solid #cbd5e1 !important;
font-size: 13px !important;
display: grid !important;
place-items: center !important;
cursor: pointer !important;
transition: all .15s ease !important;
}
.refresh-conv-btn:hover {
background: #6157e8 !important;
color: #fff !important;
border-color: #6157e8 !important;
}
.chat-search-wrap input {
width: 100%;
padding: 9px 12px;
border: 1.5px solid #cbd5e1;
border-radius: 10px;
font-size: 13px;
outline: 0;
box-sizing: border-box;
background: #f8fafc;
}
.chat-search-wrap input:focus {
border-color: #6157e8;
background: #fff;
box-shadow: 0 0 0 3px rgba(97, 87, 232, 0.12);
}
.conversations-scroll {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.conv-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
transition: background .15s ease;
min-width: 0;
box-sizing: border-box;
}
.conv-item:hover {
background: #f1f5f9;
}
.conv-item.active {
background: #eef2ff;
border-left: 4px solid #6157e8;
}
.conv-item.unread {
background: #fff1f2;
}
.conv-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e0e7ff;
color: #4f46e5;
display: grid;
place-items: center;
font-weight: 800;
font-size: 15px;
flex-shrink: 0;
}
.conv-item.unread .conv-avatar {
background: #ffe4e6;
color: #e11d48;
}
.conv-details {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.conv-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
}
.conv-name-wrap {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
flex: 1;
overflow: hidden;
}
.conv-name {
font-size: 14px;
font-weight: 700;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conv-time {
font-size: 11px;
color: #94a3b8;
white-space: nowrap;
flex-shrink: 0;
}
.conv-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.conv-snippet {
font-size: 12.5px;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.conv-badge {
background: #e11d48;
color: #fff;
font-size: 10px;
font-weight: 800;
border-radius: 99px;
padding: 1px 7px;
flex-shrink: 0;
}
.chat-main-panel {
display: flex;
flex-direction: column;
background: #fff;
height: 100%;
min-height: 0;
min-width: 0;
}
.active-chat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 18px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
gap: 12px;
flex-wrap: wrap;
}
.active-user-meta {
display: flex;
align-items: center;
gap: 10px;
}
.mobile-chat-back-btn {
display: none;
}
.user-avatar-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: #6157e8;
color: #fff;
display: grid;
place-items: center;
font-weight: 800;
font-size: 16px;
}
.user-uid-pill {
background: #e0e7ff;
color: #4338ca;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 6px;
}
.active-user-stats {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.stat-pill {
display: inline-flex;
gap: 4px;
font-size: 12px;
padding: 4px 8px;
border-radius: 6px;
background: #fff;
border: 1px solid #cbd5e1;
color: #475569;
}
.stat-pill.balance-pill b {
color: #059669;
}
.no-chat-placeholder {
margin: auto;
text-align: center;
padding: 40px 20px;
color: #64748b;
}
.no-chat-placeholder h3 {
margin: 0 0 6px;
color: #1e293b;
}
.no-chat-placeholder p {
margin: 0;
font-size: 14px;
max-width: 340px;
}
#adminMessagesList, #messagesList {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
/* Mobile & Tablet Adaptive Viewport for Admin Chat */
@media (max-width: 960px) {
.content {
padding: 10px 8px !important;
}
.admin-chat-layout {
display: block !important;
height: calc(100dvh - 120px) !important;
min-height: 480px !important;
border-radius: 14px !important;
width: 100% !important;
max-width: 100% !important;
}
.chat-sidebar-panel {
width: 100% !important;
height: 100% !important;
display: flex !important;
border-right: none !important;
}
.chat-main-panel {
display: none !important;
width: 100% !important;
height: 100% !important;
}
.admin-chat-layout.has-active-chat .chat-sidebar-panel {
display: none !important;
}
.admin-chat-layout.has-active-chat .chat-main-panel {
display: flex !important;
}
.mobile-chat-back-btn {
display: inline-flex !important;
padding: 6px 10px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
background: #f1f5f9 !important;
color: #334155 !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
}
.active-chat-header {
padding: 10px 12px !important;
gap: 8px !important;
}
.active-user-meta {
gap: 8px !important;
flex: 1 !important;
min-width: 0 !important;
}
.active-user-meta .user-avatar-circle {
width: 36px !important;
height: 36px !important;
font-size: 14px !important;
flex-shrink: 0 !important;
}
.active-user-meta strong {
font-size: 14px !important;
max-width: 140px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.active-user-stats {
width: 100% !important;
justify-content: flex-start !important;
padding-top: 6px !important;
border-top: 1px dashed #e2e8f0 !important;
gap: 6px !important;
}
.stat-pill {
font-size: 11px !important;
padding: 3px 6px !important;
}
.chat-messages-container {
padding: 12px 10px !important;
gap: 10px !important;
}
.chat-bubble {
max-width: 86% !important;
padding: 9px 12px !important;
}
.chat-bubble .chat-text {
font-size: 13.5px !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
.chat-input-form {
padding: 8px 10px !important;
gap: 6px !important;
}
.chat-input-form textarea {
padding: 8px 10px !important;
font-size: 13px !important;
min-height: 40px !important;
}
}
/* Guest Chat Badges in Admin */
.guest-avatar{background:#f1f5f9!important;color:#64748b!important;border:1.5px solid #cbd5e1!important}
.guest-pill-badge{background:#fef3c7;color:#b45309;font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px;white-space:nowrap;letter-spacing:.2px}
/* Login Page Live Chat Button */
.livechat-login-btn{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff!important;font-weight:700;font-size:14.5px;text-decoration:none;box-shadow:0 6px 18px rgba(14,165,233,0.28);transition:all .18s ease;margin-top:6px}
.livechat-login-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(14,165,233,0.38)}
.livechat-login-btn span{font-size:18px}
/* ==========================================================================
Bottom Navigation 5-Item Modern Upgrade with Centered Home Button
========================================================================== */
@media(max-width:900px){
body{padding-bottom:calc(76px + env(safe-area-inset-bottom))!important}
.bottom-nav.bottom-nav-5{
display:grid!important;
grid-template-columns:repeat(5,1fr)!important;
height:calc(66px + env(safe-area-inset-bottom))!important;
padding:4px 4px env(safe-area-inset-bottom)!important;
background:rgba(255,255,255,0.96)!important;
backdrop-filter:blur(20px)!important;
border-top:1px solid #e2e8f0!important;
box-shadow:0 -6px 25px rgba(15,23,42,0.08)!important;
align-items:center!important;
}
.bottom-nav.bottom-nav-5 a{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
padding:4px 2px!important;
border-radius:12px!important;
color:#64748b!important;
text-decoration:none!important;
transition:all 0.18s ease!important;
min-height:56px!important;
gap:2px!important;
}
.bottom-nav.bottom-nav-5 a .nav-icon{
font-size:22px!important;
line-height:1.1!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
.bottom-nav.bottom-nav-5 a small{
font-size:12px!important;
font-weight:700!important;
letter-spacing:0.1px!important;
line-height:1.1!important;
white-space:nowrap!important;
}
.bottom-nav.bottom-nav-5 a.active{
color:#6157e8!important;
background:#f0efff!important;
}
.bottom-nav.bottom-nav-5 a.nav-home-center{
color:#6157e8!important;
font-weight:800!important;
}
.bottom-nav.bottom-nav-5 a.nav-home-center .nav-icon{
font-size:25px!important;
filter:drop-shadow(0 2px 4px rgba(97,87,232,0.25));
}
.bottom-nav.bottom-nav-5 a.nav-home-center.active{
background:linear-gradient(135deg,#f0efff,#e6e4ff)!important;
color:#5148cf!important;
box-shadow:inset 0 0 0 1.5px #6157e830!important;
}
}
/* ==========================================================================
Universal Typography Standard & Font Size Harmonization Across All Pages
========================================================================== */
html, body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Bengali", "Hind Siliguri", Arial, sans-serif !important;
font-size: 14px;
line-height: 1.5;
color: #1e293b;
-webkit-font-smoothing: antialiased;
}
/* 1. Primary Page Headers (Unified) */
header h1,
.header-title h1,
.auth-brand h1,
.notif-header-hero h2,
.admin-page-head h2,
.admin-dashboard-head h2 {
font-size: 19px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
color: #0f172a !important;
letter-spacing: -0.2px !important;
}
/* 2. Section & Container Headings */
h2,
.card h2,
.form h2,
.section-head h2,
.settings-section h2,
.two-col h2,
.auth-card h2,
.password-help-card h2 {
font-size: 16.5px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
color: #1e293b !important;
}
/* 3. Card Titles & Panel Headings */
h3,
.service-card h2,
.rate-card h3,
.admin-card-heading h3,
.admin-dashboard-card h3,
.pending-card h2,
.offer-card-title,
.support-title,
.recharge-admin-card h3,
.user-identity h3,
.notif-title {
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: #1e293b !important;
}
/* 4. Subheadings, Welcome Headers & Eyebrows */
h4,
.eyebrow,
.chat-welcome-box h4 {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #334155 !important;
}
/* 5. General Paragraphs & Content Text */
p,
.card p,
.form p,
.service-card p,
.rate-description,
.notif-body p,
.chat-text,
.auth-card > p,
.password-help-card > p,
.admin-page-head p,
.admin-dashboard-head p {
font-size: 13.5px !important;
line-height: 1.55 !important;
color: #475569 !important;
}
/* 6. Form Elements, Labels & Inputs */
label,
.rate-fields label,
.balance-editor label {
font-size: 13.5px !important;
font-weight: 600 !important;
color: #1e293b !important;
}
input,
select,
textarea {
font-size: 14px !important;
font-family: inherit !important;
color: #0f172a !important;
}
/* 7. Buttons (Standard & Small) */
button,
.button {
font-size: 14px !important;
font-weight: 700 !important;
font-family: inherit !important;
}
button.small,
.button.small,
.small {
font-size: 12.5px !important;
font-weight: 700 !important;
}
/* 8. Small Text, Hints, Footnotes & Timestamps */
small,
label small,
td small,
.admin-card-heading small,
.user-identity p,
.conv-snippet,
.recharge-meta small,
.notif-time,
.chat-time,
aside small,
.order-live-price small,
.stats article small {
font-size: 12px !important;
line-height: 1.45 !important;
color: #64748b !important;
font-weight: 400 !important;
}
/* 9. Metrics & Stat Big Numbers (Harmonized) */
.stats b,
.reference-metric strong,
.recharge-wallet-hero strong,
.admin-stats b,
.user-balance-row strong,
.offer-price-tag,
.service-card footer b,
.server-copy-preview b {
font-size: 22px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
}
/* 10. Tables & Data Grids */
table th {
font-size: 13px !important;
font-weight: 700 !important;
color: #475569 !important;
}
table td {
font-size: 13.5px !important;
color: #1e293b !important;
}
.table-wrap td::before,
#pricingTable td::before,
.user-list-table td::before {
font-size: 12px !important;
font-weight: 700 !important;
color: #64748b !important;
}
/* 11. Badges & Pills */
.status,
.badge,
.notif-pill,
.server-pill,
.step-label,
.offer-type-badge,
.guest-pill-badge,
.nav-badge,
.icon-badge,
.account-state,
.user-uid-pill,
.count-badge,
.state-dot,
.stat-pill {
font-size: 11.5px !important;
font-weight: 700 !important;
}
/* 12. Navigation & Branding */
aside .brand {
font-size: 20px !important;
font-weight: 800 !important;
}
aside nav a {
font-size: 13.5px !important;
font-weight: 600 !important;
}
aside nav b {
font-size: 11.5px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.balance {
font-size: 13.5px !important;
font-weight: 700 !important;
}
/* Mobile Responsive Typography Refinements */
@media (max-width: 620px) {
header h1,
.header-title h1,
.auth-brand h1,
.notif-header-hero h2,
.admin-page-head h2,
.admin-dashboard-head h2 {
font-size: 17px !important;
}
h2,
.card h2,
.form h2,
.section-head h2,
.settings-section h2,
.two-col h2 {
font-size: 15.5px !important;
}
.stats b,
.reference-metric strong,
.recharge-wallet-hero strong,
.admin-stats b,
.user-balance-row strong {
font-size: 19px !important;
}
}
/* ==========================================================================
Chat Bubble Contrast & Button Alignment Fixes
========================================================================== */
.chat-bubble-row.outgoing .chat-bubble {
background: linear-gradient(135deg, #5b4fe9, #4a3fd8) !important;
color: #ffffff !important;
border: none !important;
box-shadow: 0 4px 14px rgba(91, 79, 233, 0.28) !important;
}
.chat-bubble-row.outgoing .chat-text,
.chat-bubble-row.outgoing .chat-bubble p,
.chat-bubble-row.outgoing .chat-bubble span {
color: #ffffff !important;
font-weight: 500 !important;
font-size: 14px !important;
}
.chat-bubble-row.outgoing .chat-time {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 11px !important;
}
.chat-bubble-row.incoming .chat-bubble {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
color: #1e293b !important;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}
.chat-bubble-row.incoming .chat-text,
.chat-bubble-row.incoming .chat-bubble p {
color: #1e293b !important;
font-size: 14px !important;
}
.chat-bubble-row.incoming .chat-time {
color: #94a3b8 !important;
font-size: 11px !important;
}
/* Perfect alignment for camera and send buttons */
.chat-attach-btn {
width: 42px !important;
height: 42px !important;
min-height: 42px !important;
border-radius: 12px !important;
border: 1.5px solid #cbd5e1 !important;
background: #f8fafc !important;
color: #475569 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.18s ease !important;
flex-shrink: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.chat-attach-btn:hover {
background: #eff6ff !important;
color: #5b4fe9 !important;
border-color: #5b4fe9 !important;
transform: translateY(-1px) !important;
}
.chat-attach-btn svg {
display: block !important;
margin: auto !important;
}
.chat-send-btn {
width: 44px !important;
height: 44px !important;
min-height: 44px !important;
border-radius: 12px !important;
border: none !important;
background: linear-gradient(135deg, #5b4fe9, #4a3fd8) !important;
color: #ffffff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.18s ease !important;
flex-shrink: 0 !important;
padding: 0 !important;
box-shadow: 0 4px 12px rgba(91, 79, 233, 0.3) !important;
}
.chat-send-btn:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(91, 79, 233, 0.4) !important;
}
.chat-send-btn svg {
display: block !important;
margin: auto !important;
}
/* Full Mobile Viewport Safeguards */
@media (max-width: 900px) {
body {
padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
overflow-x: hidden !important;
}
.content {
padding: 14px 12px 20px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.chat-app-wrapper {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
}
.chat-card {
height: calc(100dvh - 165px) !important;
min-height: 480px !important;
max-height: calc(100vh - 150px) !important;
margin-bottom: 8px !important;
border-radius: 14px !important;
}
.chat-messages-container {
padding: 14px 12px !important;
}
.chat-input-form {
padding: 10px 12px !important;
gap: 8px !important;
}
.chat-input-form textarea {
min-height: 42px !important;
max-height: 80px !important;
padding: 9px 12px !important;
}
.chat-bubble {
max-width: 85% !important;
padding: 10px 14px !important;
}
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
In-App Native-Feel Dialog & Toast System (Zero Site Links)
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.app-dialog-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.68);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
}
.app-dialog-backdrop.active {
opacity: 1;
pointer-events: auto;
}
.app-dialog-card {
background: #ffffff;
width: 100%;
max-width: 380px;
border-radius: 20px;
box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
padding: 24px 22px 20px;
transform: scale(0.9) translateY(12px);
transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
text-align: center;
box-sizing: border-box;
border: 1px solid #e2e8f0;
}
.app-dialog-backdrop.active .app-dialog-card {
transform: scale(1) translateY(0);
}
.app-dialog-icon {
width: 54px;
height: 54px;
margin: 0 auto 12px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 26px;
}
.app-dialog-icon.info { background: #eff6ff; color: #3b82f6; }
.app-dialog-icon.success { background: #ecfdf5; color: #10b981; }
.app-dialog-icon.warning { background: #fffbeb; color: #f59e0b; }
.app-dialog-icon.error { background: #fef2f2; color: #ef4444; }
.app-dialog-title {
font-size: 17px;
font-weight: 700;
color: #0f172a;
margin: 0 0 8px;
line-height: 1.35;
}
.app-dialog-message {
font-size: 14px;
color: #475569;
margin: 0 0 20px;
line-height: 1.55;
word-break: break-word;
}
.app-dialog-actions {
display: flex;
gap: 10px;
justify-content: center;
}
.app-dialog-btn {
flex: 1;
min-height: 42px;
padding: 10px 16px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
border: 0;
cursor: pointer;
transition: transform 0.1s, opacity 0.15s;
}
.app-dialog-btn:active {
transform: scale(0.97);
}
.app-dialog-btn.primary {
background: #6157e8;
color: #ffffff;
box-shadow: 0 4px 12px rgba(97, 87, 232, 0.3);
}
.app-dialog-btn.danger {
background: #ef4444;
color: #ffffff;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.app-dialog-btn.secondary {
background: #f1f5f9;
color: #475569;
border: 1px solid #cbd5e1;
}
/* App Toast Container & Notifications */
.app-toast-container {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1000000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
width: calc(100% - 32px);
max-width: 400px;
}
.app-toast {
pointer-events: auto;
background: #1e293b;
color: #ffffff;
padding: 12px 16px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
animation: appToastIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: opacity 0.2s, transform 0.2s;
box-sizing: border-box;
}
.app-toast.success { background: #065f46; border-left: 4px solid #10b981; }
.app-toast.error { background: #991b1b; border-left: 4px solid #ef4444; }
.app-toast.warning { background: #92400e; border-left: 4px solid #f59e0b; }
.app-toast.info { background: #1e3a8a; border-left: 4px solid #3b82f6; }
@keyframes appToastIn {
from { opacity: 0; transform: translateY(-16px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ==========================================================================
Admin Panel Comprehensive Typography & Size Harmonization
========================================================================== */
body {
font-size: 13.5px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
header h1 {
font-size: 17px !important;
font-weight: 700 !important;
color: #172033;
letter-spacing: -0.01em;
}
.admin-page-head h2,
.admin-dashboard-head h2,
.compact-page-head h2,
.pricing-head h2 {
font-size: 20px !important;
font-weight: 800 !important;
letter-spacing: -0.015em;
color: #172033;
margin: 2px 0;
}
.admin-page-head .eyebrow,
.compact-page-head .eyebrow {
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #6157e8;
display: inline-block;
}
.admin-page-head p,
.admin-dashboard-head p,
.compact-page-head p {
font-size: 12.5px !important;
color: #64748b;
margin: 2px 0 0;
line-height: 1.45;
}
.category-head h2,
.admin-pricing-category .category-head h2,
.settings-console-card h3,
.admin-dashboard-card h3,
.admin-card-heading h3,
.admin-pricing-category h3,
.admin-order-card h3,
.section-head h2,
.pending-card h2,
.service-card h2,
.recharge-admin-card h3 {
font-size: 15px !important;
font-weight: 700 !important;
color: #1e293b;
margin: 0 0 3px;
letter-spacing: -0.01em;
}
.category-head p,
.settings-console-card p,
.settings-copy p,
.admin-dashboard-card p,
.admin-card-heading p,
.admin-pricing-card p {
font-size: 12.5px !important;
color: #64748b;
line-height: 1.45;
}
/* Global Form Controls & Labels */
label {
font-size: 13px !important;
font-weight: 600;
color: #334155;
}
input, select, textarea {
font-size: 13px !important;
color: #1e293b;
}
input::placeholder, textarea::placeholder {
font-size: 12.5px !important;
color: #94a3b8;
}
button, .button {
font-size: 13px !important;
font-weight: 600;
}
/* Dashboard Action Cards */
.admin-action-grid a b {
font-size: 13px !important;
font-weight: 700;
}
.admin-action-grid a small,
.admin-pending-list small {
font-size: 11px !important;
color: #64748b;
}
/* Tables & Lists */
table th, .user-list-table th {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b !important;
padding: 10px 13px;
}
table td, .user-list-table td {
font-size: 13px !important;
color: #1e293b;
padding: 10px 13px;
}
table td b, .user-list-table b {
font-size: 13px !important;
font-weight: 700;
}
small, td small, label small, .settings-console-card small {
font-size: 11.5px !important;
color: #64748b !important;
line-height: 1.4;
}
/* Badges & Pills */
.server-pill, .count-badge, .status, .step-label {
font-size: 11px !important;
font-weight: 700 !important;
}
/* Big Metric Numbers */
.stats b, .reference-metric strong {
font-size: 20px !important;
font-weight: 800;
line-height: 1.2;
}
.stats span, .reference-metric small {
font-size: 11.5px !important;
color: #64748b;
}
/* Tabs & Filter Links */
.order-tabs a,
.filter-links a,
.recharge-page-tabs a {
font-size: 12.5px !important;
font-weight: 600;
}
/* Modals */
dialog h3, .modal-header h3 {
font-size: 15.5px !important;
font-weight: 700 !important;
color: #1e293b;
}
/* ==========================================================================
Header Sticky Guarantee System (Desktop & Mobile)
========================================================================== */
html, body {
overflow-x: clip !important;
}
body .layout > main {
min-width: 0;
position: relative;
}
body .layout > main > header,
body > .layout > main > header,
header.app-header {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
height: 70px !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
border-bottom: 1px solid #e2e8f0 !important;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
}
@media (max-width: 900px) {
body .layout > main > header,
body > .layout > main > header,
header.app-header {
height: calc(64px + env(safe-area-inset-top)) !important;
padding-top: env(safe-area-inset-top) !important;
}
}
/* Card Header Reset Guarantee (Prevent card headers from becoming sticky/fixed height) */
.admin-order-card > header,
.recharge-admin-card > header,
.admin-pricing-card > header,
.api-provider-card > header,
.service-card > header {
position: static !important;
height: auto !important;
min-height: 0 !important;
padding: 0 0 12px 0 !important;
border: 0 !important;
border-bottom: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 10px !important;
}
.admin-order-card > header div,
.recharge-admin-card > header div {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 0 !important;
flex: 1 !important;
}
/* ==========================================================================
Sidebar Community / Support Group Join Link
========================================================================== */
.sidebar-community-link {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 13px !important;
border-radius: 11px !important;
font-weight: 700 !important;
font-size: 13px !important;
margin-top: 5px !important;
text-decoration: none !important;
transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
.sidebar-community-telegram {
background: linear-gradient(135deg, #229ed9, #177cb0) !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(34, 158, 217, 0.35);
}
.sidebar-community-whatsapp {
background: linear-gradient(135deg, #25d366, #128c7e) !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
.sidebar-community-link:hover {
transform: translateY(-2px);
filter: brightness(1.08);
}
/* ==========================================================================
Admin Settings Categorized Grouping & Filter Tabs
========================================================================== */
.settings-category-nav-wrapper {
position: sticky;
top: 70px;
z-index: 30;
background: rgba(244, 247, 251, 0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 8px 0 16px;
margin-bottom: 8px;
}
.settings-category-nav {
display: flex;
align-items: center;
gap: 6px;
padding: 6px;
background: #e6ecf5;
border-radius: 14px;
border: 1px solid #d8e1ee;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.04);
}
.settings-category-nav::-webkit-scrollbar {
display: none;
}
.settings-tab-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 16px;
border-radius: 10px;
background: transparent;
border: 0;
color: #475569;
font-size: 13px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
-webkit-user-select: none;
}
.settings-tab-btn:hover {
color: #1e293b;
background: rgba(255, 255, 255, 0.65);
}
.settings-tab-btn.active {
background: #ffffff;
color: #4338ca;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
font-weight: 800;
}
.settings-tab-btn .tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 7px;
border-radius: 99px;
font-size: 11px;
background: #f1f5f9;
color: #64748b;
font-weight: 800;
}
.settings-tab-btn.active .tab-badge {
background: #e0e7ff;
color: #4338ca;
}
.settings-group-section {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 22px;
margin-bottom: 22px;
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
scroll-margin-top: 140px;
animation: settingsFadeIn 0.22s ease-out;
}
@keyframes settingsFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.settings-group-head {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 14px;
margin-bottom: 18px;
border-bottom: 1px solid #f1f5f9;
}
.settings-group-icon {
display: grid;
place-items: center;
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 13px;
font-size: 20px;
}
.settings-group-head h2 {
font-size: 16px !important;
font-weight: 800 !important;
color: #1e293b;
margin: 0;
}
.settings-group-head p {
font-size: 12.5px !important;
color: #64748b;
margin: 2px 0 0;
line-height: 1.4;
}
@media (max-width: 600px) {
.settings-group-section {
padding: 16px;
border-radius: 16px;
}
.settings-group-head {
gap: 10px;
padding-bottom: 12px;
margin-bottom: 14px;
}
.settings-group-icon {
flex: 0 0 38px;
width: 38px;
height: 38px;
font-size: 18px;
}
}
/* ==========================================================================
Compact Order Badge & Expandable Correction Button
========================================================================== */
.order-id-badge {
font-size: 11.5px !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight: 700 !important;
background: #f1f5f9;
color: #1e293b;
padding: 2px 7px;
border-radius: 6px;
border: 1px solid #e2e8f0;
letter-spacing: 0.02em;
display: inline-block;
}
.order-uid-badge {
font-size: 10.5px !important;
font-weight: 700 !important;
color: #64748b;
background: #f8fafc;
border: 1px solid #f1f5f9;
padding: 2px 6px;
border-radius: 6px;
display: inline-block;
}
.order-edit-details {
margin-top: 12px;
border-top: 1px dashed #e2e8f0;
padding-top: 10px;
}
.order-edit-btn {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
background: #f8faff;
border: 1px solid #e0e7ff;
border-radius: 9px;
color: #4f46e5;
font-size: 12px;
font-weight: 700;
cursor: pointer;
list-style: none;
user-select: none;
transition: all .18s ease;
}
.order-edit-btn::-webkit-details-marker {
display: none;
}
.order-edit-btn:hover {
background: #eef2ff;
border-color: #c7d2fe;
}
.order-edit-chevron {
margin-left: auto;
font-style: normal;
font-size: 14px;
font-weight: bold;
transition: transform .2s ease;
}
.order-edit-details[open] .order-edit-chevron {
transform: rotate(180deg);
}
.order-edit-details[open] .order-edit-btn {
background: #eef2ff;
border-color: #6366f1;
color: #4338ca;
}
/* ==========================================================================
User Notifications Center & Responsive Cards
========================================================================== */
.notifications-container {
max-width: 960px;
margin: 0 auto;
width: 100%;
}
.notif-header-hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 20px 24px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 18px;
margin-bottom: 16px;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}
.notif-header-hero h2 {
font-size: 18px !important;
font-weight: 800 !important;
color: #1e293b;
margin: 2px 0;
}
.notif-header-hero p {
font-size: 12.5px !important;
color: #64748b;
margin: 0;
}
.notif-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Filter Tabs */
.notif-filter-tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 4px 0 16px;
margin-bottom: 4px;
}
.notif-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 99px;
background: #ffffff;
border: 1px solid #e2e8f0;
color: #475569;
font-size: 12px;
font-weight: 700;
text-decoration: none;
transition: all .18s ease;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
}
.notif-tab:hover {
border-color: #6157e8;
color: #6157e8;
background: #f8faff;
}
.notif-tab.active {
background: linear-gradient(135deg, #6157e8, #4f46e5);
color: #ffffff;
border-color: transparent;
box-shadow: 0 4px 14px rgba(97, 87, 232, 0.32);
}
.notif-tab .tab-count {
background: rgba(255, 255, 255, 0.25);
padding: 2px 6px;
border-radius: 99px;
font-size: 11px;
}
/* Notification Cards List */
.notif-list {
display: grid;
gap: 12px;
width: 100%;
}
.notif-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
box-shadow: 0 3px 12px rgba(15, 23, 42, 0.03);
position: relative;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.notif-card.unread {
background: #fbfbfe;
border-color: #c7d2fe;
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);
}
.notif-icon-wrap {
display: grid;
place-items: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 12px;
font-size: 19px;
background: #f1f5f9;
}
.notif-content {
flex: 1;
min-width: 0; /* CRITICAL for flex item overflow wrapping */
width: 100%;
}
.notif-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 10px;
margin-bottom: 6px;
}
.notif-title-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
flex: 1 1 auto;
}
.notif-title {
font-size: 13.5px !important;
font-weight: 700 !important;
color: #1e293b;
overflow-wrap: anywhere;
word-break: break-word;
}
.notif-pill {
font-size: 10.5px !important;
font-weight: 700;
padding: 2px 7px;
border-radius: 6px;
white-space: nowrap;
display: inline-block;
}
.notif-time {
font-size: 11px !important;
color: #64748b;
white-space: nowrap;
margin-left: auto;
}
.notif-body {
width: 100%;
min-width: 0;
}
.notif-body p {
margin: 0;
font-size: 13px !important;
color: #334155;
line-height: 1.55;
overflow-wrap: anywhere !important;
word-break: break-word !important;
white-space: normal !important;
}
/* Badge Color Themes */
.badge-success {
background: #ecfdf5 !important;
color: #059669 !important;
border: 1px solid #a7f3d0;
}
.badge-danger {
background: #fef2f2 !important;
color: #dc2626 !important;
border: 1px solid #fecaca;
}
.badge-warning {
background: #fffbeb !important;
color: #d97706 !important;
border: 1px solid #fde68a;
}
.badge-primary {
background: #eef2ff !important;
color: #4f46e5 !important;
border: 1px solid #c7d2fe;
}
.badge-purple {
background: #f5f3ff !important;
color: #7c3aed !important;
border: 1px solid #ddd6fe;
}
.badge-promo {
background: #fff1f2 !important;
color: #e11d48 !important;
border: 1px solid #fecdd3;
}
.badge-info {
background: #f0fdf4 !important;
color: #166534 !important;
border: 1px solid #bbf7d0;
}
.unread-dot {
display: none !important;
}
.notif-empty-state {
text-align: center;
padding: 40px 20px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 18px;
color: #64748b;
}
.notif-empty-state .empty-icon {
font-size: 40px;
margin-bottom: 8px;
}
@media (max-width: 600px) {
.notif-header-hero {
flex-direction: column;
align-items: flex-start;
padding: 16px;
}
.notif-card {
padding: 13px 14px;
gap: 10px;
}
.notif-icon-wrap {
flex: 0 0 36px;
width: 36px;
height: 36px;
font-size: 16px;
}
.notif-top {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.notif-time {
margin-left: 0;
}
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
In-App Toast & Modal Dialog Engine
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.app-toast-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999999;
display: flex;
flex-direction: column;
gap: 10px;
max-width: min(92vw, 380px);
pointer-events: none;
}
.app-toast {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 18px;
background: #1e293b;
color: #ffffff;
border-radius: 12px;
font-size: 13.5px;
font-weight: 600;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
pointer-events: auto;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
animation: toastSlideUp 0.28s ease;
}
.app-toast.success { background: linear-gradient(135deg, #059669, #047857); }
.app-toast.error { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.app-toast.warning { background: linear-gradient(135deg, #d97706, #b45309); }
.app-toast.info { background: linear-gradient(135deg, #4f46e5, #4338ca); }
@keyframes toastSlideUp {
from { opacity: 0; transform: translateY(18px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.app-dialog-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: grid;
place-items: center;
padding: 16px;
box-sizing: border-box;
z-index: 99999;
opacity: 0;
transition: opacity 0.2s ease;
}
.app-dialog-backdrop.active {
opacity: 1;
}
.app-dialog-card {
background: #ffffff;
border-radius: 20px;
padding: 26px 22px;
width: min(92vw, 420px);
box-shadow: 0 25px 60px rgba(15, 23, 42, 0.28);
animation: dialogPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
@keyframes dialogPop {
from { opacity: 0; transform: scale(0.92) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.app-dialog-actions {
display: flex;
gap: 10px;
margin-top: 18px;
}
.app-dialog-btn {
flex: 1;
min-height: 44px;
padding: 10px 16px;
border-radius: 10px;
font-weight: 700;
font-size: 13.5px;
border: 0;
cursor: pointer;
text-align: center;
transition: 0.15s ease;
}
.app-dialog-btn.primary {
background: linear-gradient(135deg, #6157e8, #4f46e5);
color: #fff;
box-shadow: 0 4px 14px rgba(97, 87, 232, 0.35);
}
.app-dialog-btn.secondary {
background: #f1f5f9;
color: #475569;
}
.sidebar-app-download {
display: flex !important;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(5, 150, 105, 0.08));
border: 1px solid rgba(16, 185, 129, 0.28);
color: #10b981 !important;
font-weight: 700;
margin-top: 8px;
transition: 0.15s ease;
}
.sidebar-app-download:hover {
background: rgba(16, 185, 129, 0.22);
transform: translateY(-1px);
}
.dashboard-app-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
margin-bottom: 16px;
border-radius: 16px;
background: linear-gradient(135deg, #4f46e5, #3b82f6);
color: #ffffff;
box-shadow: 0 8px 24px rgba(79, 70, 229, 0.25);
}
.dashboard-app-banner h3 {
margin: 0 0 4px;
font-size: 16px;
color: #fff;
}
.dashboard-app-banner p {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.88);
}
.dashboard-app-banner a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
border-radius: 10px;
background: #ffffff;
color: #4338ca;
font-weight: 800;
font-size: 13px;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
text-decoration: none;
}
.running-notice {
background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
border: 1px solid #fde68a !important;
border-radius: 12px !important;
color: #92400e !important;
padding: 8px 14px !important;
font-size: 13.5px !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin: 0 0 20px 0 !important;
box-shadow: 0 3px 10px rgba(180, 83, 9, 0.05) !important;
overflow: hidden !important;
min-height: 42px !important;
box-sizing: border-box !important;
}
.running-notice .notice-icon-badge {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
background: #f59e0b !important;
color: #ffffff !important;
padding: 3px 10px !important;
border-radius: 99px !important;
font-size: 11.5px !important;
font-weight: 800 !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
box-shadow: 0 2px 6px rgba(245, 158, 11, 0.28) !important;
}
.running-notice marquee {
display: block !important;
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
line-height: 1.4 !important;
}
/* User & Admin Orders Modern Card System */
.user-orders-container {
width: 100%;
max-width: 100%;
margin-bottom: 24px;
box-sizing: border-box;
}
.user-order-tabs-toolbar {
margin-bottom: 14px;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.user-orders-table-wrap {
width: 100%;
max-width: 100%;
background: #fff;
border: 1px solid #e5e8f0;
border-radius: 16px;
overflow-x: auto;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
box-sizing: border-box;
}
.user-order-table {
width: 100%;
border-collapse: collapse;
min-width: 0;
}
.user-order-table th,
.user-order-table td {
padding: 14px 16px;
border-bottom: 1px solid #eceef4;
text-align: left;
vertical-align: middle;
}
.user-order-table th {
background: #f8fafc;
color: #64748b;
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
@media (max-width: 768px) {
.content {
padding: 14px 10px !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
.user-orders-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.user-orders-table-wrap {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: block !important;
box-sizing: border-box !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
}
.user-order-tabs-toolbar {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
padding-bottom: 6px !important;
margin-bottom: 12px !important;
-webkit-overflow-scrolling: touch;
}
.user-order-tabs-toolbar .order-tabs {
display: flex !important;
gap: 6px !important;
width: max-content !important;
}
.user-order-table,
.user-order-table tbody,
.user-order-table tfoot {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: block !important;
box-sizing: border-box !important;
border: 0 !important;
}
.user-order-table thead {
display: none !important;
}
.user-order-table tr[data-item] {
display: block !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 16px !important;
padding: 14px !important;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-bottom: 14px !important;
overflow: hidden !important;
}
.user-order-table td {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 10px !important;
padding: 9px 0 !important;
border-bottom: 1px dashed #f1f5f9 !important;
font-size: 13px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.user-order-table td:last-child {
border-bottom: 0 !important;
}
.user-order-table td.empty-state {
display: block !important;
text-align: center !important;
padding: 36px 20px !important;
background: #ffffff !important;
border: 1px dashed #cbd5e1 !important;
border-radius: 16px !important;
margin: 10px 0 !important;
color: #64748b !important;
width: 100% !important;
box-sizing: border-box !important;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}
.user-order-table td.empty-state::before {
display: none !important;
content: none !important;
}
.user-order-table td.empty-state > * {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.user-order-table td::before {
content: attr(data-label) !important;
font-weight: 700 !important;
color: #64748b !important;
font-size: 12px !important;
text-align: left !important;
flex: 0 0 auto !important;
}
.user-order-table td > div {
flex: 1 1 auto !important;
min-width: 0 !important;
word-break: break-word !important;
text-align: right !important;
}
.user-order-table td > div b {
font-size: 13px !important;
}
/* Complex rows expand to full width block */
.user-order-table td[data-label="เฆธเงเฆฌเฆพเฆฐ เฆจเฆพเฆฎ"],
.user-order-table td[data-label="Service Name"] {
display: block !important;
padding: 10px 0 !important;
}
.user-order-table td[data-label="เฆธเงเฆฌเฆพเฆฐ เฆจเฆพเฆฎ"]::before,
.user-order-table td[data-label="Service Name"]::before {
display: block !important;
margin-bottom: 4px !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.user-order-table td[data-label="เฆธเงเฆฌเฆพเฆฐ เฆจเฆพเฆฎ"] > div,
.user-order-table td[data-label="Service Name"] > div {
text-align: left !important;
width: 100% !important;
}
.user-order-table td[data-label="เฆซเฆฒเฆพเฆซเฆฒ"],
.user-order-table td[data-label="Result"] {
display: block !important;
padding: 10px 0 4px !important;
border-bottom: 0 !important;
}
.user-order-table td[data-label="เฆซเฆฒเฆพเฆซเฆฒ"]::before,
.user-order-table td[data-label="Result"]::before {
display: block !important;
margin-bottom: 6px !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
.user-order-table td[data-label="เฆซเฆฒเฆพเฆซเฆฒ"] > div,
.user-order-table td[data-label="Result"] > div {
text-align: left !important;
width: 100% !important;
}
.user-order-table td[data-label="เฆซเฆฒเฆพเฆซเฆฒ"] .button,
.user-order-table td[data-label="Result"] .button {
flex: 1 1 auto !important;
text-align: center !important;
}
.order-details-grid {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.order-detail-item {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: baseline !important;
gap: 4px 8px !important;
padding: 7px 9px !important;
}
.order-detail-item .detail-label {
white-space: normal !important;
flex: 0 1 auto !important;
min-width: 0 !important;
font-size: 11.5px !important;
}
.order-detail-item .detail-value {
flex: 1 1 auto !important;
min-width: 0 !important;
justify-content: flex-end !important;
text-align: right !important;
word-break: break-word !important;
}
.order-detail-item .detail-text {
font-size: 12px !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
.user-text-result pre {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
overflow-x: auto !important;
word-break: break-all !important;
white-space: pre-wrap !important;
font-size: 11.5px !important;
}
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Order Details Box, Form Data & Copy Button Styles
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.order-details-box {
margin-top: 10px;
padding: 11px 13px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
font-size: 12.5px;
box-sizing: border-box;
width: 100%;
}
.order-details-box.admin-view {
background: #f8faff;
border-color: #dbe4f9;
}
.order-details-title {
display: flex;
align-items: center;
gap: 6px;
font-weight: 800;
color: #334155;
font-size: 12px;
margin-bottom: 8px;
letter-spacing: 0.2px;
}
.order-details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 7px 10px;
}
.order-detail-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
background: #ffffff;
padding: 6px 9px;
border-radius: 8px;
border: 1px solid #eef2f6;
box-sizing: border-box;
min-width: 0;
}
.order-detail-item .detail-label {
color: #64748b;
font-weight: 600;
font-size: 11.5px;
flex-shrink: 0;
}
.order-detail-item .detail-value {
display: inline-flex;
align-items: center;
gap: 5px;
text-align: right;
word-break: break-word;
min-width: 0;
}
.order-detail-item .detail-text {
color: #0f172a;
font-weight: 700;
font-size: 12px;
word-break: break-word;
overflow-wrap: anywhere;
}
.copy-field-btn {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 6px;
font-size: 10px;
font-weight: 700;
background: #eef2ff;
color: #4f46e5;
border: 1px solid #c7d2fe;
border-radius: 5px;
cursor: pointer;
line-height: 1.2;
transition: all 0.15s ease;
white-space: nowrap;
}
.copy-field-btn:hover {
background: #4f46e5;
color: #ffffff;
border-color: #4338ca;
}
.copy-field-btn.copied {
background: #10b981;
color: #ffffff;
border-color: #059669;
}
.order-detail-note {
margin-top: 8px;
padding: 7px 10px;
background: #fffbeb;
border: 1px solid #fef3c7;
border-left: 3px solid #f59e0b;
border-radius: 6px;
font-size: 11.5px;
color: #92400e;
line-height: 1.4;
word-break: break-word;
}
.order-detail-attachment {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
padding: 7px 10px;
background: #f0fdf4;
border: 1px solid #dcfce7;
border-radius: 8px;
font-size: 11.5px;
flex-wrap: wrap;
}
.order-detail-attachment .attachment-label {
font-weight: 700;
color: #166534;
}
.order-detail-attachment .attachment-actions {
display: inline-flex;
gap: 6px;
}
.user-order-form-details summary {
user-select: none;
transition: color 0.15s ease;
}
.user-order-form-details summary:hover {
color: #4338ca !important;
}
.user-order-form-details .order-details-box {
margin-top: 4px;
padding: 8px 10px;
font-size: 11.5px;
background: #f8fafc;
}
.user-order-form-details .order-detail-item {
padding: 4px 6px;
}
/* Sidebar Brand Logo Styling */
.brand {
font-size: 22px !important;
font-weight: 800 !important;
color: #ffffff !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
text-decoration: none !important;
line-height: 1.2;
}
.brand img {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
object-fit: contain !important;
border-radius: 9px !important;
background: #ffffff !important;
padding: 3px !important;
border: 1px solid rgba(255,255,255,0.2) !important;
box-shadow: 0 3px 8px rgba(0,0,0,0.2) !important;
display: inline-block !important;
flex-shrink: 0 !important;
}
/* Auth Pages Brand Logo Styling */
.auth-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.auth-brand img {
width: 44px;
height: 44px;
object-fit: contain;
border-radius: 10px;
background: #ffffff;
padding: 3px;
border: 1px solid #cbd5e1;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* System Settings Console & Category Navigation */
.settings-category-nav-wrapper {
margin: 14px 0 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.settings-category-nav {
display: flex;
gap: 8px;
padding: 4px;
background: #f1f5f9;
border-radius: 14px;
border: 1px solid #e2e8f0;
width: max-content;
max-width: 100%;
}
.settings-tab-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 10px;
border: 0;
background: transparent;
color: #475569;
font-weight: 700;
font-size: 12.5px;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
}
.settings-tab-btn:hover {
background: #ffffff;
color: #1e293b;
}
.settings-tab-btn.active {
background: #ffffff !important;
color: #4338ca !important;
box-shadow: 0 2px 8px rgba(15,23,42,0.08) !important;
}
.settings-tab-btn .tab-badge {
padding: 2px 7px;
border-radius: 99px;
background: #e2e8f0;
color: #334155;
font-size: 11px;
}
.settings-group-section {
display: block;
margin-bottom: 24px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 16px rgba(15,23,42,0.03);
}
.settings-group-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid #f1f5f9;
}
.settings-group-head h2 {
font-size: 17px;
margin: 0;
color: #0f172a;
}
.settings-group-head p {
margin: 2px 0 0;
font-size: 12px;
color: #64748b;
}
.settings-group-icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
font-size: 20px;
flex-shrink: 0;
}
.settings-console {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
}
.settings-console-card {
display: flex;
gap: 14px;
padding: 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
}
.settings-console-card .settings-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 10px;
font-size: 18px;
background: #ffffff;
flex-shrink: 0;
}
.settings-console-card .settings-copy {
flex: 1;
min-width: 0;
}
.settings-console-card h3 {
font-size: 14px;
margin: 0 0 4px;
color: #1e293b;
}
.settings-console-card p {
font-size: 12px;
color: #64748b;
margin: 0;
line-height: 1.4;
}
.payment-settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.payment-setting-row {
display: flex;
align-items: center;
gap: 8px;
background: #ffffff;
padding: 8px 12px;
border-radius: 10px;
border: 1px solid #cbd5e1;
}
.payment-setting-row b {
min-width: 50px;
font-size: 13px;
color: #334155;
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Language Switcher Styles (Sidebar & Header)
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.sidebar-lang-switch {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
padding: 3px;
margin: 14px 0 8px;
gap: 3px;
width: 100%;
box-sizing: border-box;
}
.sidebar-lang-switch .lang-btn {
flex: 1 1 50%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 6px;
min-height: 34px;
font-size: 12px;
font-weight: 700;
color: #c4ccdf;
background: transparent;
border: 0;
border-radius: 9px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
box-sizing: border-box;
}
.sidebar-lang-switch .lang-btn:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
}
.sidebar-lang-switch .lang-btn.active {
color: #ffffff;
background: linear-gradient(135deg, #6157e8, #4f46e5);
box-shadow: 0 2px 8px rgba(97, 87, 232, 0.4);
}
.user-area .sidebar-lang-switch .lang-btn.active {
background: linear-gradient(135deg, #14a58a, #0d9488);
box-shadow: 0 2px 8px rgba(20, 165, 138, 0.4);
}
.auth-card .sidebar-lang-switch {
background: #f1f5f9;
border: 1px solid #e2e8f0;
}
.auth-card .sidebar-lang-switch .lang-btn {
color: #64748b;
}
.auth-card .sidebar-lang-switch .lang-btn:hover {
color: #1e293b;
background: rgba(0, 0, 0, 0.05);
}
.auth-card .sidebar-lang-switch .lang-btn.active {
color: #ffffff !important;
background: linear-gradient(135deg, #6157e8, #4f46e5) !important;
box-shadow: 0 2px 8px rgba(97, 87, 232, 0.35);
}
.sidebar-lang-switch .lang-btn span {
font-size: 14px;
line-height: 1;
}
.header-lang-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 5px 10px;
min-height: 34px;
border-radius: 99px;
font-size: 12px;
font-weight: 800;
color: #4338ca;
background: #eef2ff;
border: 1px solid #c7d2fe;
cursor: pointer;
transition: all 0.18s ease;
box-shadow: 0 1px 4px rgba(99, 102, 241, 0.08);
}
.user-area .header-lang-toggle {
color: #065f46;
background: #ecfdf5;
border-color: #a7f3d0;
box-shadow: 0 1px 4px rgba(16, 185, 129, 0.08);
}
.header-lang-toggle:hover {
transform: translateY(-1px);
filter: brightness(0.96);
}
.header-lang-toggle:active {
transform: translateY(0);
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Global Mobile Page Cut-Off Prevention Rules
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
@media (max-width: 900px) {
html, body {
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
body {
padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
}
.layout, main, .content {
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
.card, .form, .service-card, .table-wrap, .dashboard-services-panel {
max-width: 100% !important;
box-sizing: border-box !important;
}
.order-form {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.bottom-nav {
width: 100% !important;
max-width: 100vw !important;
box-sizing: border-box !important;
}
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Mobile Recharge & Recharge Wallet Premium Design System
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.mobile-recharge-container, .user-orders-container {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
/* Top Balance Hero */
.recharge-balance-hero, .recharge-wallet-hero {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
color: #ffffff;
padding: 22px 28px;
border-radius: 18px;
margin-bottom: 24px;
box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.35);
flex-wrap: wrap;
gap: 16px;
}
.hero-left {
display: flex;
align-items: center;
gap: 16px;
}
.hero-left .hero-icon {
font-size: 38px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.hero-subtitle {
font-size: 13.5px;
opacity: 0.9;
font-weight: 500;
display: block;
margin-bottom: 4px;
}
.hero-balance {
font-size: 32px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.5px;
margin: 0;
color: #ffffff;
}
.hero-right {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.hero-commission-badge {
background: rgba(255, 255, 255, 0.18);
padding: 8px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.25);
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
}
.hero-commission-badge b {
color: #fef08a;
font-size: 15px;
}
.btn-wallet-link, .btn-add-money-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: 12px;
font-size: 13.5px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-wallet-link {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-wallet-link:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
.btn-add-money-link {
background: #ffffff;
color: #0369a1;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.btn-add-money-link:hover {
background: #f8fafc;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
/* Grid Layout */
.recharge-main-grid {
display: grid;
grid-template-columns: 420px 1fr;
gap: 24px;
align-items: start;
}
@media (max-width: 992px) {
.recharge-main-grid {
grid-template-columns: 1fr;
}
}
/* Form Card */
.recharge-form-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 24px;
box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
}
.form-card-header h3 {
font-size: 18px;
font-weight: 800;
color: #0f172a;
margin: 0 0 4px 0;
}
.form-card-header p {
font-size: 13px;
color: #64748b;
margin: 0 0 18px 0;
}
/* Operator Select Grid */
.operator-select-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.op-pill {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 8px;
border: 1.5px solid #e2e8f0;
border-radius: 14px;
cursor: pointer;
background: #f8fafc;
transition: all 0.2s ease;
text-align: center;
gap: 5px;
}
.op-pill:hover {
border-color: #93c5fd;
background: #f0f9ff;
transform: translateY(-2px);
}
.op-pill.active {
border-color: #0284c7;
background: #e0f2fe;
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.18);
}
.op-badge {
font-size: 11px;
font-weight: 800;
padding: 3px 8px;
border-radius: 6px;
color: #ffffff;
letter-spacing: 0.5px;
}
.op-gp { background: #0072ce; }
.op-bl { background: #ff6000; }
.op-robi { background: #d4001a; }
.op-airtel { background: #e40000; }
.op-teletalk { background: #0b8235; }
.op-skitto { background: #7c3aed; }
.op-name {
font-size: 12px;
font-weight: 700;
color: #1e293b;
}
/* Form Inputs */
.form-group-recharge {
margin-bottom: 18px;
}
.form-group-recharge label {
display: block;
font-size: 13.5px;
font-weight: 700;
color: #334155;
margin-bottom: 6px;
}
.input-with-icon, .input-with-currency {
position: relative;
display: flex;
align-items: center;
}
.input-with-icon input, .input-with-currency input, .form-group-recharge input, .form-group-recharge select {
width: 100%;
padding: 12px 14px;
border: 1.5px solid #cbd5e1;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
color: #0f172a;
background: #ffffff;
box-sizing: border-box;
transition: all 0.2s ease;
}
.input-with-icon input {
padding-left: 42px;
padding-right: 60px;
font-size: 16px;
letter-spacing: 0.5px;
}
.input-with-currency input {
padding-left: 36px;
font-size: 18px;
font-weight: 800;
}
.input-with-icon input:focus, .input-with-currency input:focus, .form-group-recharge input:focus, .form-group-recharge select:focus {
border-color: #0284c7;
outline: none;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}
.input-prefix-icon {
position: absolute;
left: 14px;
font-size: 18px;
color: #64748b;
pointer-events: none;
}
.currency-symbol {
position: absolute;
left: 14px;
font-size: 18px;
font-weight: 800;
color: #0284c7;
pointer-events: none;
}
.operator-tag {
position: absolute;
right: 10px;
background: #0284c7;
color: #ffffff;
font-size: 11px;
font-weight: 800;
padding: 4px 8px;
border-radius: 6px;
}
/* Connection Type Toggle */
.conn-type-toggle {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background: #f1f5f9;
padding: 4px;
border-radius: 12px;
gap: 4px;
}
.conn-btn {
border: none;
background: transparent;
padding: 8px 6px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 700;
color: #475569;
cursor: pointer;
transition: all 0.15s ease;
}
.conn-btn.active {
background: #ffffff;
color: #0284c7;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
/* Quick Amount Chips */
.quick-amount-chips {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
margin-top: 8px;
}
@media (max-width: 480px) {
.quick-amount-chips {
grid-template-columns: repeat(3, 1fr);
}
}
.chip-btn {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 6px 4px;
font-size: 12px;
font-weight: 700;
color: #334155;
cursor: pointer;
transition: all 0.15s ease;
}
.chip-btn:hover {
background: #e0f2fe;
border-color: #38bdf8;
color: #0369a1;
}
/* Smart Matched Offer Alert Card */
.smart-offer-card {
background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
border: 1.5px solid #fde68a;
border-radius: 14px;
padding: 14px 16px;
margin-bottom: 18px;
animation: fadeInSmart 0.3s ease;
}
@keyframes fadeInSmart {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.smart-card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.smart-badge {
background: #d97706;
color: #ffffff;
font-size: 10.5px;
font-weight: 800;
padding: 2px 7px;
border-radius: 6px;
}
.smart-validity {
font-size: 12px;
font-weight: 700;
color: #78350f;
}
.smart-offer-card h4 {
margin: 0 0 3px 0;
font-size: 15px;
font-weight: 800;
color: #92400e;
}
.smart-offer-card p {
margin: 0 0 10px 0;
font-size: 12.5px;
color: #a16207;
}
.smart-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.smart-cashback {
font-size: 12px;
font-weight: 700;
color: #15803d;
}
.btn-smart-select {
background: #d97706;
color: #ffffff;
border: none;
padding: 5px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-smart-select:hover {
background: #b45309;
}
/* Selected Offer Bar */
.selected-offer-preview {
display: flex;
justify-content: space-between;
align-items: center;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 12px;
padding: 10px 14px;
margin-bottom: 18px;
}
.preview-info small {
display: block;
font-size: 11px;
color: #166534;
font-weight: 600;
}
.preview-info strong {
font-size: 13.5px;
color: #14532d;
display: block;
}
.preview-info span {
font-size: 11.5px;
color: #15803d;
font-weight: 700;
}
.btn-clear-pack {
background: #fee2e2;
color: #dc2626;
border: none;
width: 26px;
height: 26px;
border-radius: 50%;
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.btn-clear-pack:hover {
background: #fecaca;
}
/* Submit Button */
.btn-recharge-submit {
width: 100%;
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
color: #ffffff;
border: none;
padding: 14px 20px;
border-radius: 14px;
font-size: 16px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 6px 18px rgba(2, 132, 199, 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
}
.btn-recharge-submit:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(2, 132, 199, 0.4);
}
.btn-recharge-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Offers Catalog */
.recharge-offers-catalog {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 24px;
box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
}
.catalog-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}
.catalog-header h3 {
margin: 0 0 3px 0;
font-size: 18px;
font-weight: 800;
color: #0f172a;
}
.catalog-header p {
margin: 0;
font-size: 13px;
color: #64748b;
}
.catalog-search input {
padding: 8px 14px;
border: 1.5px solid #cbd5e1;
border-radius: 10px;
font-size: 13px;
width: 220px;
}
/* Offer Category Tabs */
.offer-category-tabs {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 8px;
margin-bottom: 16px;
scrollbar-width: thin;
}
.cat-tab {
background: #f1f5f9;
border: none;
border-radius: 10px;
padding: 8px 14px;
font-size: 13px;
font-weight: 700;
color: #475569;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
}
.cat-tab:hover {
background: #e2e8f0;
}
.cat-tab.active {
background: #0284c7;
color: #ffffff;
box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}
/* Offers Grid & Cards */
.offers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
max-height: 520px;
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
}
.offer-card {
border: 1.5px solid #e2e8f0;
background: #ffffff;
border-radius: 16px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.2s ease;
position: relative;
}
.offer-card:hover {
border-color: #38bdf8;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}
.offer-card.selected {
border-color: #0284c7;
background: #f0f9ff;
box-shadow: 0 0 0 2px #0284c7;
}
.off-card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.off-cat-pill {
background: #f1f5f9;
color: #475569;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 6px;
}
.off-badges-wrap {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.off-popular-tag {
background: #fee2e2;
color: #dc2626;
font-size: 10px;
font-weight: 800;
padding: 1px 6px;
border-radius: 5px;
}
.off-cashback-tag {
background: #dcfce7;
color: #15803d;
font-size: 10.5px;
font-weight: 800;
padding: 1px 6px;
border-radius: 5px;
}
.off-title {
margin: 0 0 4px 0;
font-size: 15px;
font-weight: 800;
color: #0f172a;
line-height: 1.3;
}
.off-details {
margin: 0 0 12px 0;
font-size: 12px;
color: #64748b;
line-height: 1.4;
}
.off-card-footer {
border-top: 1px solid #f1f5f9;
padding-top: 10px;
margin-top: auto;
}
.off-meta {
margin-bottom: 6px;
}
.off-validity {
font-size: 12px;
color: #475569;
font-weight: 600;
}
.off-price-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
.off-price {
font-size: 18px;
font-weight: 900;
color: #0284c7;
}
.btn-choose-offer {
background: #0284c7;
color: #ffffff;
border: none;
padding: 6px 14px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-choose-offer:hover {
background: #0369a1;
}
/* Modals */
.recharge-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 16px;
}
.recharge-modal-box {
background: #ffffff;
border-radius: 20px;
width: 100%;
max-width: 480px;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25);
overflow: hidden;
animation: modalPop 0.25s ease;
}
@keyframes modalPop {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 22px;
border-bottom: 1px solid #f1f5f9;
}
.modal-header h3 {
margin: 0;
font-size: 17px;
font-weight: 800;
color: #0f172a;
}
.modal-close {
background: transparent;
border: none;
font-size: 24px;
color: #94a3b8;
cursor: pointer;
line-height: 1;
}
.modal-close:hover {
color: #0f172a;
}
.modal-body {
padding: 20px 22px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 22px;
background: #f8fafc;
border-top: 1px solid #f1f5f9;
}
.confirm-summary-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 14px 16px;
margin-bottom: 16px;
}
.summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
font-size: 13.5px;
color: #475569;
}
.phone-highlight {
font-size: 16px;
color: #0f172a;
letter-spacing: 0.5px;
}
.form-group-modal {
margin-top: 14px;
}
.form-group-modal label {
display: block;
font-size: 13.5px;
font-weight: 700;
color: #334155;
margin-bottom: 6px;
}
.btn-cancel {
background: #e2e8f0;
border: none;
padding: 10px 18px;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
color: #475569;
cursor: pointer;
}
.btn-confirm-final {
background: #0284c7;
border: none;
padding: 10px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 800;
color: #ffffff;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}
.btn-confirm-final:hover {
background: #0369a1;
}
/* Success Modal */
.success-box {
text-align: center;
padding: 28px 24px;
}
.success-icon-wrap {
width: 64px;
height: 64px;
background: #dcfce7;
color: #16a34a;
font-size: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px auto;
}
.success-box h3 {
font-size: 20px;
font-weight: 800;
color: #0f172a;
margin: 0 0 6px 0;
}
.success-box p {
font-size: 13.5px;
color: #64748b;
margin: 0 0 18px 0;
}
.success-details-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 12px 16px;
margin-bottom: 20px;
text-align: left;
}
.success-modal-actions {
display: flex;
gap: 10px;
justify-content: center;
}
/* Add Money Grid & Payment Selector */
.add-money-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (max-width: 860px) {
.add-money-grid {
grid-template-columns: 1fr;
}
}
.deposit-form-box, .recent-deposits-box {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 24px;
box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
}
.form-header-box h3 {
font-size: 17px;
font-weight: 800;
color: #0f172a;
margin: 0 0 4px 0;
}
.form-header-box p {
font-size: 13px;
color: #64748b;
margin: 0 0 18px 0;
}
.payment-method-selector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.method-card-label {
display: block;
cursor: pointer;
}
.method-card-label input {
display: none;
}
.method-card-content {
border: 1.5px solid #e2e8f0;
background: #f8fafc;
border-radius: 12px;
padding: 10px 12px;
transition: all 0.2s ease;
}
.method-card-label input:checked + .method-card-content {
border-color: #0284c7;
background: #e0f2fe;
box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
}
.m-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.m-top b {
font-size: 13px;
color: #1e293b;
}
.m-action {
font-size: 10.5px;
font-weight: 700;
background: #e2e8f0;
color: #475569;
padding: 1px 6px;
border-radius: 4px;
}
.m-number {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13.5px;
font-weight: 700;
color: #0284c7;
}
.btn-copy-num {
background: #e0f2fe;
color: #0369a1;
border: none;
padding: 2px 6px;
border-radius: 4px;
font-size: 10.5px;
font-weight: 700;
cursor: pointer;
}
.deposit-history-card {
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 10px;
background: #f8fafc;
}
.dp-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 6px;
}
.dp-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Badges & Action Buttons */
.operator-badge-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.3px;
}
.btn-action-sm {
padding: 5px 10px;
border-radius: 6px;
border: none;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-success-sm {
background: #16a34a;
color: #ffffff;
}
.btn-cancel-sm {
background: #dc2626;
color: #ffffff;
}
.btn-success-sm:hover { background: #15803d; }
.btn-cancel-sm:hover { background: #b91c1c; }
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Mobile Recharge Modern Responsive Design System
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.rc-page-wrapper {
max-width: 600px;
margin: 0 auto;
width: 100%;
padding: 0 12px;
box-sizing: border-box;
}
/* Stepper Progress */
.rc-stepper {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
padding: 0 8px;
}
.rc-step {
display: flex;
align-items: center;
gap: 8px;
opacity: 0.45;
transition: all 0.2s ease;
}
.rc-step.active {
opacity: 1;
}
.rc-step.completed {
opacity: 0.85;
}
.rc-step-circle {
width: 28px;
height: 28px;
border-radius: 50%;
background: #e2e8f0;
color: #475569;
font-weight: 800;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.rc-step.active .rc-step-circle {
background: #6157e8;
color: #ffffff;
box-shadow: 0 0 0 3px rgba(97, 87, 232, 0.25);
}
.rc-step.completed .rc-step-circle {
background: #16a34a;
color: #ffffff;
}
.rc-step-text {
font-size: 13px;
font-weight: 700;
color: #1e293b;
white-space: nowrap;
}
.rc-step-bar {
flex: 1;
max-width: 50px;
height: 3px;
background: #e2e8f0;
margin: 0 8px;
border-radius: 2px;
transition: all 0.2s ease;
}
.rc-step-bar.active {
background: #6157e8;
}
@media (max-width: 480px) {
.rc-step-text {
font-size: 11px;
}
.rc-step-bar {
max-width: 25px;
margin: 0 4px;
}
.rc-step {
gap: 4px;
}
}
/* Card */
.rc-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 18px;
padding: 22px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
box-sizing: border-box;
width: 100%;
}
.rc-card-title {
margin-bottom: 18px;
}
.rc-card-title h3 {
margin: 0 0 4px 0;
font-size: 17px;
font-weight: 800;
color: #0f172a;
}
.rc-card-title p {
margin: 0;
font-size: 12.5px;
color: #64748b;
}
/* Top Wallet Banner */
.rc-wallet-banner {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #5b50df 0%, #786ef0 100%);
border-radius: 14px;
padding: 14px 16px;
color: #ffffff;
margin-bottom: 20px;
box-shadow: 0 6px 18px rgba(91, 80, 223, 0.25);
flex-wrap: wrap;
gap: 10px;
}
.rc-wallet-info {
display: flex;
align-items: center;
gap: 12px;
}
.rc-wallet-icon {
font-size: 26px;
background: rgba(255, 255, 255, 0.2);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
}
.rc-wallet-lbl {
font-size: 11.5px;
opacity: 0.9;
display: block;
}
.rc-wallet-val {
font-size: 22px;
font-weight: 800;
margin: 0;
color: #ffffff !important;
line-height: 1.1;
}
.rc-wallet-actions {
display: flex;
align-items: center;
gap: 8px;
}
.rc-comm-pill {
background: rgba(255, 255, 255, 0.18);
padding: 5px 10px;
border-radius: 8px;
font-size: 11.5px;
font-weight: 700;
}
.rc-comm-pill b {
color: #fef08a;
}
.rc-stmt-btn {
background: #ffffff;
color: #5148cf;
font-size: 12px;
font-weight: 700;
padding: 6px 12px;
border-radius: 8px;
text-decoration: none;
transition: all 0.15s ease;
}
.rc-stmt-btn:hover {
background: #f5f3ff;
}
/* Form Group */
.rc-form-group {
margin-bottom: 18px;
}
.rc-form-group label {
display: block;
font-size: 13px;
font-weight: 700;
color: #334155;
margin-bottom: 6px;
}
.rc-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.rc-input-wrap input {
width: 100%;
padding: 12px 14px 12px 42px;
border: 1.5px solid #cbd5e1;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
color: #0f172a;
background: #ffffff;
box-sizing: border-box;
transition: all 0.2s ease;
}
.rc-input-wrap input:focus {
border-color: #6157e8;
outline: none;
box-shadow: 0 0 0 3px rgba(97, 87, 232, 0.18);
}
.rc-input-icon, .rc-currency-symbol {
position: absolute;
left: 14px;
font-size: 17px;
color: #64748b;
pointer-events: none;
}
.rc-currency-symbol {
color: #6157e8;
font-weight: 800;
}
.rc-operator-tag {
position: absolute;
right: 10px;
background: #6157e8;
color: #ffffff;
font-size: 11px;
font-weight: 800;
padding: 3px 8px;
border-radius: 6px;
letter-spacing: 0.5px;
}
/* Operator Grid */
.rc-op-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.rc-op-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 6px;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
background: #ffffff;
cursor: pointer;
transition: all 0.15s ease;
gap: 4px;
}
.rc-op-btn:hover {
border-color: #c4b5fd;
background: #faf5ff;
}
.rc-op-btn.active {
border-color: #6157e8;
background: #f5f3ff;
box-shadow: 0 2px 8px rgba(97, 87, 232, 0.18);
}
.rc-badge {
font-size: 10.5px;
font-weight: 800;
padding: 2px 7px;
border-radius: 6px;
color: #ffffff;
letter-spacing: 0.4px;
}
.rc-gp { background: #0072ce; }
.rc-bl { background: #ff6000; }
.rc-robi { background: #d4001a; }
.rc-airtel { background: #e40000; }
.rc-teletalk { background: #0b8235; }
.rc-skitto { background: #7c3aed; }
.rc-op-name {
font-size: 11.5px;
font-weight: 700;
color: #1e293b;
}
/* Connection Type Toggle */
.rc-type-toggle {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background: #f1f5f9;
padding: 4px;
border-radius: 10px;
gap: 4px;
}
.rc-type-btn {
border: none;
background: transparent;
padding: 8px 4px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
color: #475569;
cursor: pointer;
transition: all 0.15s ease;
}
.rc-type-btn.active {
background: #ffffff;
color: #6157e8;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* Primary Submit Button */
.rc-btn-primary {
width: 100%;
background: linear-gradient(135deg, #6157e8 0%, #5148cf 100%);
color: #ffffff;
border: none;
padding: 13px 18px;
border-radius: 12px;
font-size: 15px;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 14px rgba(97, 87, 232, 0.28);
transition: all 0.15s ease;
box-sizing: border-box;
}
.rc-btn-primary:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(97, 87, 232, 0.35);
}
.rc-btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.rc-btn-secondary {
background: #f1f5f9;
border: 1px solid #cbd5e1;
color: #334155;
padding: 13px 18px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
}
.rc-btn-secondary:hover {
background: #e2e8f0;
}
/* Step 2: Selected Bar */
.rc-selected-bar {
display: flex;
align-items: center;
justify-content: space-between;
background: #f5f3ff;
border: 1.5px solid #ddd6fe;
border-radius: 14px;
padding: 12px 16px;
margin-bottom: 16px;
}
.rc-sel-left {
display: flex;
align-items: center;
gap: 10px;
}
.rc-sel-phone {
font-size: 16px;
color: #0f172a;
display: block;
line-height: 1.2;
}
.rc-sel-meta {
font-size: 11.5px;
color: #64748b;
font-weight: 600;
}
.rc-btn-edit {
background: #ffffff;
border: 1px solid #cbd5e1;
color: #334155;
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
}
.rc-btn-edit:hover {
background: #f8fafc;
}
/* Direct Amount Box */
.rc-amount-box {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 16px;
margin-bottom: 16px;
}
.rc-amount-box label {
display: block;
font-size: 13px;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
}
.rc-amount-row {
display: flex;
gap: 10px;
}
.rc-btn-direct-submit {
background: #6157e8;
color: #ffffff;
border: none;
padding: 0 16px;
border-radius: 12px;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
}
.rc-btn-direct-submit:hover {
background: #5148cf;
}
/* Quick Chips */
.rc-quick-chips {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
margin-top: 10px;
}
@media (max-width: 480px) {
.rc-quick-chips {
grid-template-columns: repeat(3, 1fr);
}
}
.rc-chip {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 7px 4px;
font-size: 12px;
font-weight: 700;
color: #334155;
cursor: pointer;
transition: all 0.15s ease;
}
.rc-chip:hover {
background: #f5f3ff;
border-color: #c4b5fd;
color: #5148cf;
}
/* Smart Offer Alert */
.rc-smart-alert {
background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
border: 1.5px solid #fde68a;
border-radius: 12px;
padding: 12px 14px;
margin-top: 12px;
}
.rc-smart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.rc-smart-badge {
background: #d97706;
color: #ffffff;
font-size: 10px;
font-weight: 800;
padding: 2px 6px;
border-radius: 6px;
}
.rc-smart-val {
font-size: 11.5px;
font-weight: 700;
color: #78350f;
}
.rc-smart-title {
margin: 0 0 2px 0;
font-size: 14px;
font-weight: 800;
color: #92400e;
}
.rc-smart-desc {
margin: 0 0 8px 0;
font-size: 11.5px;
color: #a16207;
}
.rc-smart-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.rc-smart-cash {
font-size: 11.5px;
font-weight: 700;
color: #15803d;
}
.rc-btn-smart-use {
background: #d97706;
color: #ffffff;
border: none;
padding: 5px 12px;
border-radius: 8px;
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
}
.rc-btn-smart-use:hover {
background: #b45309;
}
/* Category Tabs */
.rc-tabs-wrap {
display: flex;
gap: 6px;
overflow-x: auto;
padding-bottom: 6px;
margin-bottom: 14px;
scrollbar-width: thin;
}
.rc-tab {
background: #f1f5f9;
border: none;
border-radius: 8px;
padding: 7px 12px;
font-size: 12px;
font-weight: 700;
color: #475569;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
}
.rc-tab:hover {
background: #e2e8f0;
}
.rc-tab.active {
background: #6157e8;
color: #ffffff;
box-shadow: 0 2px 6px rgba(97, 87, 232, 0.25);
}
/* Offers Grid */
.rc-offers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 12px;
}
@media (max-width: 480px) {
.rc-offers-grid {
grid-template-columns: 1fr;
}
}
.rc-offer-card {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 14px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.15s ease;
}
.rc-offer-card:hover {
border-color: #a5b4fc;
box-shadow: 0 4px 12px rgba(97, 87, 232, 0.08);
}
.rc-off-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 6px;
}
.rc-off-cat-pill {
background: #f1f5f9;
color: #475569;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 5px;
}
.rc-off-badges {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.rc-off-pop-tag {
background: #fee2e2;
color: #dc2626;
font-size: 9.5px;
font-weight: 800;
padding: 1px 5px;
border-radius: 4px;
}
.rc-off-cash-tag {
background: #dcfce7;
color: #15803d;
font-size: 10px;
font-weight: 800;
padding: 1px 5px;
border-radius: 4px;
}
.rc-off-title {
margin: 0 0 4px 0;
font-size: 14px;
font-weight: 800;
color: #0f172a;
line-height: 1.3;
}
.rc-off-desc {
margin: 0 0 10px 0;
font-size: 11.5px;
color: #64748b;
line-height: 1.35;
}
.rc-off-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #f1f5f9;
padding-top: 8px;
margin-top: auto;
}
.rc-off-val {
font-size: 11px;
font-weight: 700;
color: #475569;
}
.rc-off-buy-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.rc-off-price {
font-size: 15px;
font-weight: 800;
color: #0f172a;
}
.rc-btn-buy {
background: #6157e8;
color: #ffffff;
border: none;
padding: 5px 12px;
border-radius: 8px;
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
}
.rc-btn-buy:hover {
background: #5148cf;
}
/* Step 3: Summary */
.rc-confirm-icon-circle {
width: 48px;
height: 48px;
background: #eef0ff;
color: #6157e8;
font-size: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 8px auto;
}
.rc-summary-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 14px 16px;
margin-bottom: 18px;
}
.rc-summary-line {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 13px;
color: #475569;
}
.rc-phone-bold {
font-size: 16px;
color: #0f172a;
letter-spacing: 0.5px;
}
.rc-op-summary-tag {
background: #eef0ff;
color: #5148cf;
font-weight: 700;
padding: 3px 8px;
border-radius: 6px;
font-size: 12px;
}
.rc-cashback-row {
background: #f0fdf4;
padding: 8px 10px;
border-radius: 8px;
margin: 4px 0;
}
.rc-bal-row {
border-top: 1px dashed #cbd5e1;
padding-top: 8px;
margin-top: 4px;
}
.rc-confirm-actions {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
/* Success View */
.rc-success-card {
text-align: center;
padding: 24px 20px;
}
.rc-success-icon-wrap {
width: 56px;
height: 56px;
background: #dcfce7;
color: #16a34a;
font-size: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px auto;
}
.rc-success-card h3 {
font-size: 18px;
font-weight: 800;
color: #0f172a;
margin: 0 0 4px 0;
}
.rc-success-card p {
font-size: 12.5px;
color: #64748b;
margin: 0 0 16px 0;
}