/* ============================================
   SMMSeen — FM26-inspired Dark Theme
   Bootstrap 5 Compatible
   ============================================ */

:root {
  --primary: #3b82f6;
  --primary-dim: rgba(59,130,246,0.15);
  --primary-border: rgba(59,130,246,0.3);
  --bg: #0b0e14;
  --bg-surface: #10131a;
  --bg-surface-2: #141820;
  --bg-hover: #1a1f2e;
  --border: rgba(255,255,255,0.07);
  --border-md: rgba(255,255,255,0.1);
  --text: #e2e8f0;
  --text-muted: #64748b;
  --text-dim: #334155;
  --success: #22c55e;
  --success-dim: rgba(34,197,94,0.12);
  --warning: #f59e0b;
  --warning-dim: rgba(245,158,11,0.12);
  --danger: #ef4444;
  --danger-dim: rgba(239,68,68,0.1);
  --radius: 10px;
  --radius-sm: 7px;
  --transition: all 0.2s ease;
}

*,*::before,*::after{box-sizing:border-box}
body{font-family:"Inter",system-ui,sans-serif;background:var(--bg);color:var(--text);margin:0;padding:0;overflow-x:hidden;font-size:14px;line-height:1.6}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:#60a5fa}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-surface)}
::-webkit-scrollbar-thumb{background:#1e293b;border-radius:3px}

/* TOP NAV */
.smm-topnav{position:sticky;top:0;z-index:1000;background:var(--bg-surface);border-bottom:0.5px solid var(--border);display:flex;align-items:center;height:52px;padding:0 20px}
.smm-topnav-logo{font-size:16px;font-weight:700;color:#fff;letter-spacing:-0.4px;margin-right:0;flex-shrink:0;text-decoration:none}
.smm-topnav-logo span{color:var(--primary)}
.smm-topnav-logo:hover{color:#fff}
.smm-topnav-links{display:flex;align-items:center;height:100%;flex:1;justify-content:center}
.smm-topnav-link{display:flex;align-items:center;height:100%;padding:0 14px;font-size:13px;color:var(--text-muted);text-decoration:none;border-bottom:2px solid transparent;transition:var(--transition);white-space:nowrap}
.smm-topnav-link:hover{color:var(--text);background:rgba(255,255,255,0.03)}
.smm-topnav-link.active{color:var(--text);border-bottom-color:var(--primary)}
.smm-topnav-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.smm-balance-wrap{display:flex;flex-direction:column;align-items:flex-end}
.smm-balance-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px}
.smm-balance-val{font-size:14px;font-weight:600;color:var(--primary)}
.smm-avatar{width:32px;height:32px;border-radius:50%;background:#1e3a5f;border:1.5px solid var(--primary-border);display:flex;align-items:center;justify-content:center;font-size:12px;color:#93c5fd;font-weight:600;cursor:pointer}
.smm-hamburger{display:none;flex-direction:column;gap:4px;background:transparent;border:0.5px solid var(--border-md);border-radius:6px;padding:7px;cursor:pointer;margin-left:8px}
.smm-hamburger span{display:block;width:18px;height:2px;background:var(--text-muted);border-radius:2px;transition:var(--transition)}
.smm-hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.smm-hamburger.open span:nth-child(2){opacity:0}
.smm-hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.smm-mobile-nav{display:none;flex-direction:column;background:rgba(16,19,26,0.98);border-bottom:0.5px solid var(--border);padding:8px 16px 16px}
.smm-mobile-nav.open{display:flex}
.smm-mobile-nav-link{font-size:14px;color:var(--text-muted);padding:10px 4px;border-bottom:0.5px solid var(--border);text-decoration:none;transition:color .2s}
.smm-mobile-nav-link:hover,.smm-mobile-nav-link.active{color:var(--text)}

@media(max-width:991px){
  .smm-topnav-links{display:none}
  .smm-hamburger{display:flex}
  .smm-balance-label{display:none}
}

/* GUEST NAV */
.smm-guestnav{position:sticky;top:0;z-index:1000;background:rgba(11,14,20,0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:0.5px solid var(--border);display:flex;align-items:center;height:62px;padding:0 32px}
.smm-guestnav-logo{font-size:18px;font-weight:700;color:#fff;letter-spacing:-0.5px;margin-right:auto;text-decoration:none}
.smm-guestnav-logo span{color:var(--primary)}
.smm-guestnav-logo:hover{color:#fff}
.smm-guestnav-links{display:flex;gap:4px;position:absolute;left:50%;transform:translateX(-50%)}
.smm-guestnav-link{font-size:13px;color:var(--text-muted);padding:7px 14px;border-radius:7px;text-decoration:none;transition:var(--transition)}
.smm-guestnav-link:hover{color:var(--text);background:rgba(255,255,255,0.05)}
.smm-guestnav-link.active{color:var(--text);background:var(--primary-dim);border:0.5px solid var(--primary-border)}
.smm-guestnav-right{display:flex;align-items:center;gap:10px}
.smm-btn-ghost{font-size:13px;color:var(--text-muted);padding:7px 16px;border:0.5px solid var(--border-md);border-radius:8px;background:transparent;text-decoration:none;transition:var(--transition)}
.smm-btn-ghost:hover{color:var(--text);border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.04)}
.smm-btn-fill{font-size:13px;color:#fff!important;padding:7px 18px;border-radius:8px;background:var(--primary);font-weight:600;text-decoration:none;transition:var(--transition);border:none}
.smm-btn-fill:hover{background:#2563eb;color:#fff!important}
.smm-ghambur{display:none;flex-direction:column;gap:5px;background:transparent;border:0.5px solid var(--border-md);border-radius:7px;padding:7px;cursor:pointer}
.smm-ghambur span{display:block;width:18px;height:2px;background:var(--text-muted);border-radius:2px;transition:var(--transition)}
.smm-ghambur.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.smm-ghambur.open span:nth-child(2){opacity:0}
.smm-ghambur.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.smm-guest-mobile-nav{display:none;flex-direction:column;background:rgba(11,14,20,0.98);border-bottom:0.5px solid var(--border);padding:12px 20px 20px}
.smm-guest-mobile-nav.open{display:flex}
.smm-guest-mobile-link{font-size:14px;color:var(--text-muted);padding:11px 4px;border-bottom:0.5px solid var(--border);text-decoration:none;transition:color .2s}
.smm-guest-mobile-link:hover,.smm-guest-mobile-link.active{color:var(--text)}
.smm-guest-mobile-btns{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.smm-guest-mobile-btns .smm-btn-ghost,.smm-guest-mobile-btns .smm-btn-fill{display:block;text-align:center;width:100%}

@media(max-width:991px){
  .smm-guestnav-links{display:none}
  .smm-btn-ghost{display:none}
  .smm-ghambur{display:flex}
  .smm-guestnav{padding:0 20px}
}

/* PAGE */
.smm-page{padding:24px 24px 48px;max-width:1400px;margin:0 auto}

/* TILES */
.smm-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.smm-tile{background:var(--bg-surface);padding:16px 18px;transition:background .2s;position:relative}
.smm-tile:hover{background:var(--bg-hover)}
.smm-tile-accent{position:absolute;top:0;left:0;width:3px;height:100%}
.smm-tile-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.smm-tile-val{font-size:24px;font-weight:700;color:var(--text);line-height:1}
.smm-tile-badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px;margin-top:6px}
.smm-tile-badge.up{background:var(--success-dim);color:#4ade80}
.smm-tile-badge.warn{background:var(--warning-dim);color:#fbbf24}
.smm-tile-badge.info{background:var(--primary-dim);color:#60a5fa}
.smm-tile-badge.purple{background:rgba(139,92,246,0.12);color:#a78bfa}
@media(max-width:767px){.smm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* CARD */
.smm-card{background:var(--bg-surface);border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.smm-card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:0.5px solid var(--border)}
.smm-card-title{font-size:13px;font-weight:600;color:var(--text)}
.smm-card-link{font-size:11px;color:var(--primary)}
.smm-card-body{padding:16px}

/* WELL */
.well{background:var(--bg-surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px}

/* TABLE */
.table{width:100%;border-collapse:collapse;font-size:13px;color:var(--text)}
.table thead tr{border-bottom:0.5px solid var(--border-md)}
.table thead th{padding:8px 12px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;background:rgba(255,255,255,0.02)}
.table tbody tr{border-bottom:0.5px solid var(--border);transition:background .15s}
.table tbody tr:hover{background:rgba(255,255,255,0.02)}
.table tbody tr:last-child{border-bottom:none}
.table tbody td{padding:10px 12px;vertical-align:middle}
.table.rtl-table{direction:rtl}

/* STATUS */
.status-pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 8px;border-radius:5px;white-space:nowrap}
.status-completed,.status-active{background:var(--success-dim);color:#4ade80}
.status-inprogress,.status-processing{background:var(--primary-dim);color:#60a5fa}
.status-pending{background:var(--warning-dim);color:#fbbf24}
.status-canceled,.status-partial{background:var(--danger-dim);color:#f87171}

/* FORMS */
.form-control,.form-select{background:var(--bg-surface-2)!important;border:0.5px solid var(--border-md)!important;border-radius:var(--radius-sm)!important;color:var(--text)!important;font-size:13px;padding:9px 12px;width:100%;transition:border-color .2s,box-shadow .2s;outline:none}
.form-control:focus,.form-select:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(59,130,246,0.15)!important;background:#0f1520!important}
.form-control::placeholder{color:var(--text-dim)}
textarea.form-control{height:auto;min-height:100px;resize:vertical}
.form-label,.control-label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.form-group{margin-bottom:16px}

/* BUTTONS */
.btn{font-size:13px;font-weight:600;padding:9px 20px;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:#2563eb;color:#fff}
.btn-default,.btn-secondary{background:rgba(255,255,255,0.05);border:0.5px solid var(--border-md);color:var(--text-muted)}
.btn-default:hover,.btn-secondary:hover{background:rgba(255,255,255,0.08);color:var(--text)}
.btn-danger{background:var(--danger-dim);color:#f87171;border:0.5px solid rgba(239,68,68,0.2)}
.btn-danger:hover{background:rgba(239,68,68,0.2)}
.btn-success{background:var(--success-dim);color:#4ade80;border:0.5px solid rgba(34,197,94,0.2)}
.btn-sm{font-size:12px;padding:5px 12px}
.btn-xs{font-size:11px;padding:3px 9px}
.btn-lg{font-size:14px;padding:11px 28px}
.btn-block,.w-100{width:100%;justify-content:center}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed}

/* ALERTS */
.alert{padding:12px 16px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:16px;display:flex;align-items:flex-start;gap:10px;position:relative}
.alert-success{background:var(--success-dim);color:#4ade80;border:0.5px solid rgba(34,197,94,0.2)}
.alert-danger{background:var(--danger-dim);color:#f87171;border:0.5px solid rgba(239,68,68,0.2)}
.alert-warning{background:var(--warning-dim);color:#fbbf24;border:0.5px solid rgba(245,158,11,0.2)}
.alert-info{background:var(--primary-dim);color:#60a5fa;border:0.5px solid var(--primary-border)}
.alert .btn-close,.alert .close{position:absolute;top:10px;right:12px;background:transparent;border:none;color:inherit;opacity:.6;cursor:pointer;font-size:16px;line-height:1}
.alert .btn-close:hover,.alert .close:hover{opacity:1}

/* NAV PILLS */
.nav-pills{display:flex;flex-wrap:wrap;gap:4px;padding:0;margin:0 0 16px;list-style:none}
.nav-pills .nav-link,.nav-pills>li>a{font-size:13px;color:var(--text-muted);padding:7px 14px;border-radius:7px;text-decoration:none;display:block;transition:var(--transition)}
.nav-pills .nav-link:hover,.nav-pills>li>a:hover{color:var(--text);background:rgba(255,255,255,0.05)}
.nav-pills .nav-link.active,.nav-pills>li.active>a{color:var(--text);background:var(--primary-dim);border:0.5px solid var(--primary-border)}
.nav-pills.rtl-nav{direction:rtl}

/* PAGINATION */
.pagination{display:flex;flex-wrap:wrap;gap:4px;padding:0;margin:16px 0;list-style:none}
.pagination li a,.pagination li span{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 6px;font-size:13px;color:var(--text-muted);background:var(--bg-surface);border:0.5px solid var(--border);border-radius:6px;text-decoration:none;transition:var(--transition)}
.pagination li a:hover{color:var(--text);background:var(--bg-hover)}
.pagination li.active a{background:var(--primary-dim);color:var(--primary);border-color:var(--primary-border)}
.pagination.rtl-pagination{direction:rtl}

/* DROPDOWN */
.dropdown-menu{background:var(--bg-surface-2);border:0.5px solid var(--border-md);border-radius:var(--radius-sm);padding:6px;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.dropdown-item{font-size:13px;color:var(--text-muted);padding:8px 10px;border-radius:5px;text-decoration:none;display:block;transition:var(--transition)}
.dropdown-item:hover{color:var(--text);background:var(--bg-hover)}

/* MODAL */
.modal-content{background:var(--bg-surface-2);border:0.5px solid var(--border-md);border-radius:var(--radius);color:var(--text)}
.modal-header{border-bottom:0.5px solid var(--border);padding:16px 20px}
.modal-title{font-size:15px;font-weight:600;color:var(--text)}
.modal-body{padding:20px}
.modal-footer{border-top:0.5px solid var(--border);padding:14px 20px;display:flex;gap:8px;justify-content:flex-end}
.btn-close{filter:invert(1) opacity(0.5)}
.btn-close:hover{filter:invert(1) opacity(1)}

/* INPUT GROUP */
.input-group{display:flex}
.input-group .form-control{border-radius:var(--radius-sm) 0 0 var(--radius-sm)!important}
.input-group-btn,.input-group-append{display:flex}
.input-group-btn .btn,.input-group-append .btn{border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:none}

/* BADGE */
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px}
.bg-primary{background:var(--primary-dim)!important;color:#60a5fa}
.bg-success{background:var(--success-dim)!important;color:#4ade80}
.bg-danger{background:var(--danger-dim)!important;color:#f87171}
.bg-warning{background:var(--warning-dim)!important;color:#fbbf24}
.bg-secondary{background:rgba(255,255,255,0.06)!important;color:var(--text-muted)}

/* NOTIFY */
#notify-wrapper{position:fixed;top:16px;right:16px;z-index:9999;min-width:280px;background:var(--bg-surface-2);border:0.5px solid rgba(34,197,94,0.3);border-radius:var(--radius-sm);color:#4ade80;padding:12px 16px;font-size:13px}
#notify-wrapper.hidden,#notify-wrapper.d-none{display:none!important}

/* UTILITIES */
.nowrap{white-space:nowrap}
.width-40{max-width:40%}
.hidden,.d-none{display:none!important}
.text-muted{color:var(--text-muted)!important}
.text-primary{color:var(--primary)!important}
.text-success{color:var(--success)!important}
.text-danger{color:var(--danger)!important}
.text-warning{color:var(--warning)!important}
.text-white{color:#fff!important}
.fw-bold{font-weight:700}
.fw-semibold{font-weight:600}
.small,small{font-size:12px}
.pull-right{float:right}
.pull-right-middle{display:flex;align-items:center;height:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* CONTAINER */
.container{max-width:960px;margin:0 auto;padding:0 20px}
.container-fluid{padding:0 20px}

/* HERO */
.smm-hero{padding:80px 0 60px;background:radial-gradient(circle at 10% 20%,rgba(59,130,246,0.1) 0%,transparent 50%),radial-gradient(circle at 90% 80%,rgba(139,92,246,0.08) 0%,transparent 50%)}
.smm-hero h1{font-size:clamp(32px,5vw,52px);font-weight:800;line-height:1.15;color:#fff}
.smm-hero-card{background:var(--bg-surface);border:0.5px solid var(--border-md);border-radius:16px;padding:32px;backdrop-filter:blur(12px)}
.glass-panel{background:rgba(255,255,255,0.03);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:0.5px solid var(--border-md);border-radius:16px}
.btn-electric{background:var(--primary);color:#fff;border:none;border-radius:10px;font-weight:700;padding:11px 26px;transition:var(--transition);display:inline-block;text-align:center}
.btn-electric:hover{background:#2563eb;color:#fff;transform:translateY(-1px)}
.btn-electric:focus{color:#fff}
.custom-pill-nav{border-bottom:1px solid var(--border);margin-bottom:24px}
.custom-pill-nav .nav-link{border-radius:0;border-bottom:2px solid transparent;background:transparent;color:var(--text-muted);font-weight:600}
.custom-pill-nav .nav-link.active{color:var(--text);border-bottom-color:var(--primary);background:transparent}
.form-control-custom{background:rgba(255,255,255,0.05)!important;border:0.5px solid var(--border-md)!important;border-radius:10px!important;color:#fff!important;height:48px}
.form-control-custom:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(59,130,246,0.15)!important;background:rgba(255,255,255,0.07)!important;color:#fff!important}
.form-check-input{background-color:rgba(255,255,255,0.1);border-color:var(--border-md)}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
.smm-partners{padding:32px 0;border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border)}
.partner-logo{font-size:16px;font-weight:700;color:var(--text-muted);opacity:.5;display:inline-block;transition:var(--transition)}
.partner-logo:hover{opacity:.9;color:var(--text)}
.smm-features{padding:80px 0}
.feature-card{padding:28px;border-radius:16px;transition:var(--transition);height:100%;display:flex;flex-direction:column}
.feature-card:hover{background:rgba(255,255,255,0.04);transform:translateY(-4px)}
.icon-box{width:52px;height:52px;border-radius:13px;margin-bottom:20px;background:var(--primary);display:flex;align-items:center;justify-content:center}
.smm-stats{padding:80px 0;background:rgba(255,255,255,0.015)}
.stat-number{font-size:44px;font-weight:900;color:var(--primary)}
.smm-footer{padding:48px 0 24px;border-top:0.5px solid var(--border);background:var(--bg);color:var(--text-muted)}
.footer-brand{font-weight:800;font-size:18px;color:#fff;display:block;margin-bottom:12px}
.footer-brand span{color:var(--primary)}
.footer-links{padding:0;margin:0;list-style:none}
.footer-links li{margin-bottom:8px}
.footer-links a{color:var(--text-muted);text-decoration:none;font-size:13px;transition:color .2s}
.footer-links a:hover{color:var(--primary)}

/* SIGNUP */
.signup-header{position:fixed;top:1rem;left:0;width:100%;z-index:50;padding:0 1rem}
.signup-nav{max-width:900px;margin:0 auto;background:rgba(11,14,20,0.75);backdrop-filter:blur(12px);border-radius:12px;border:0.5px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:10px 24px}
.signup-brand{font-size:18px;font-weight:700;color:#fff;letter-spacing:-0.4px}
.signup-nav-links{display:flex;gap:16px}
.signup-nav-link{color:var(--text-muted);font-size:13px;text-decoration:none;font-weight:500;transition:color .2s}
.signup-nav-link:hover{color:var(--text)}
.signup-footer{border-top:0.5px solid var(--border);background:rgba(11,14,20,0.5)}
.signup-footer-content{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:20px 24px;gap:12px}
.signup-footer-brand{font-size:15px;font-weight:700;color:#e2e8f0}
.signup-footer-copy{font-size:12px;color:var(--text-dim)}
.signup-footer-links{display:flex;gap:16px}
.signup-footer-link{color:var(--text-dim);font-size:12px;text-decoration:none;transition:color .2s}
.signup-footer-link:hover{color:var(--text)}

/* RTL */
.rtl-navbar,.rtl-form,.rtl-alert,.rtl-table,.rtl-nav,.rtl-content,.rtl-search,.rtl-pagination,.modal-rtl{direction:rtl}
.rtl-form,.rtl-alert,.rtl-content{text-align:right}

/* MISC */
#dripfeed-options{display:flex;gap:16px}
#dripfeed-options .form-group{flex:1}
#order_device div,#order_type_of_traffic div{display:inline-flex;gap:8px;margin:4px 8px}
.well-float{overflow-x:auto}
.order-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.favorite-active{color:#fbbf24}
[data-favorite-icon]{cursor:pointer;color:var(--text-dim);transition:color .2s}
[data-favorite-icon]:hover{color:#fbbf24}
.border-solid{border:0.5px solid var(--border)}
.border-rounded{border-radius:var(--radius-sm)}
.panel-body{padding:12px;font-size:13px;color:var(--text-muted)}
.help-block{font-size:12px;color:var(--text-muted);margin-top:4px;display:block}
.search-dropdown input{padding-left:32px!important}