/* FastingVPS Billing — full redesign v3
   After huraga.css — uses !important where huraga fights back. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════════════════════ */
:root, [data-bs-theme=dark] {
  --bs-body-bg:#07090f;          --bs-body-bg-rgb:7,9,15;
  --bs-secondary-bg:#0d1019;     --bs-secondary-bg-rgb:13,16,25;
  --bs-tertiary-bg:#131724;      --bs-tertiary-bg-rgb:19,23,36;
  --bs-body-color:#e2e8f0;       --bs-body-color-rgb:226,232,240;
  --bs-secondary-color:#94a3b8;  --bs-tertiary-color:#475569;
  --bs-emphasis-color:#fff;
  --bs-border-color:rgba(255,255,255,0.06);
  --bs-border-color-translucent:rgba(255,255,255,0.06);
  --bs-primary:#51ae59;          --bs-primary-rgb:124,58,237;
  --bs-primary-text-emphasis:#7dd986;
  --bs-primary-bg-subtle:rgba(81,174,89,0.1);
  --bs-primary-border-subtle:rgba(81,174,89,0.22);
  --bs-link-color:#7dd986;       --bs-link-hover-color:#a3e9a8;
  --bs-card-bg:#0d1019;          --bs-card-border-color:rgba(255,255,255,0.06);
  --bs-card-cap-bg:#131724;      --bs-card-color:#e2e8f0;
  /* sidebar palette */
  --sb-bg:#0a0c14;
  --sb-border:rgba(255,255,255,0.05);
  --sb-active-bg:rgba(81,174,89,0.15);
  --sb-hover-bg:rgba(255,255,255,0.04);
  --sb-width:220px;
  --topbar-h:57px;
}

/* ══════════════════════════════════════════════════════════════════
   BASE RESET
══════════════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box }
html,body { height:100% }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  background:#09090b !important;
  color:#d4d4d8 !important;
}
h1,h2,h3,h4,h5,h6 { font-family:'Inter',system-ui,sans-serif; font-weight:700; color:#f1f5f9; letter-spacing:-0.3px }
a { color:#51ae59 }
a:hover { color:#6dbd74 }
::-webkit-scrollbar { width:4px; height:4px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px }
::-webkit-scrollbar-thumb:hover { background:#51ae59 }

/* ══════════════════════════════════════════════════════════════════
   APP SHELL LAYOUT
══════════════════════════════════════════════════════════════════ */
.fvps-shell {
  display:flex;
  flex-direction:column;
  min-height:100vh;
  max-width:100% !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}

/* hide FOSSBilling footer branding everywhere */
footer#footer { display:none !important }

/* topbar */
.fvps-shell > header {
  height:var(--topbar-h);
  flex-shrink:0;
  position:sticky;
  top:0;
  z-index:200;
  background:rgba(10,12,20,0.92) !important;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--sb-border) !important;
  display:flex;
  align-items:center;
  padding:0 1.5rem;
}

.fvps-body {
  display:flex;
  flex:1;
  max-width:100% !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}

.fvps-row {
  display:flex;
  flex:1;
  width:100%;
  margin:0 !important;
  flex-wrap:nowrap;
  align-items:stretch;
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════════ */
.fvps-sidebar-col {
  flex:0 0 var(--sb-width) !important;
  width:var(--sb-width) !important;
  min-width:var(--sb-width) !important;
  max-width:var(--sb-width) !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column;
  background:var(--sb-bg);
  border-right:1px solid var(--sb-border);
  position:sticky;
  top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  overflow-y:auto;
  overflow-x:hidden;
}

/* sidebar brand */
.fvps-sidebar-brand {
  padding:1.25rem 1rem 0.75rem;
  border-bottom:1px solid var(--sb-border);
  margin-bottom:0.5rem;
  flex-shrink:0;
}
.fvps-sidebar-brand a {
  font-family:'Inter',system-ui,sans-serif;
  font-weight:800;
  font-size:1.1rem;
  letter-spacing:-0.5px;
  color:#f1f5f9 !important;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.fvps-sidebar-brand a::before {
  content:'';
  width:8px; height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,#51ae59,#60a5fa);
  flex-shrink:0;
}

/* sidebar nav container */
.fvps-sidebar-col .offcanvas-md { background:transparent !important; border:none !important; width:100% !important }
.fvps-sidebar-col .offcanvas-body { padding:0.5rem !important; flex:1; display:flex; flex-direction:column; width:100% }

/* kill huraga's list-style borders */
.fvps-sidebar-col .offcanvas-item { border:none !important }
.fvps-sidebar-col .offcanvas-item:first-child { border:none !important }

.fvps-sidebar-col .nav.flex-column {
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  gap:1px;
  flex:1;
}

/* sidebar nav section label */
.fvps-sidebar-col .nav.flex-column > li.pt-3 {
  border-top:1px solid var(--sb-border) !important;
  margin-top:0.75rem !important;
  padding:0.75rem 0.75rem 0.35rem !important;
}
.fvps-sidebar-col .nav.flex-column > li.pt-3 h5 {
  font-size:0.6rem !important; font-weight:700 !important;
  letter-spacing:0.1em; text-transform:uppercase;
  color:#475569 !important; margin:0 0 0.35rem !important;
}
.fvps-sidebar-col .nav.flex-column > li.pt-3 h6 {
  font-size:0.95rem; font-weight:700; color:#f1f5f9; margin:0;
}

/* nav items */
.fvps-sidebar-col .nav-item.offcanvas-item > .nav-link {
  display:flex !important;
  align-items:center;
  gap:0.6rem;
  padding:0.5rem 0.75rem !important;
  border-radius:8px;
  color:#64748b !important;
  font-size:0.835rem;
  font-weight:500;
  transition:background 0.14s,color 0.14s;
  border-left:2px solid transparent;
  white-space:nowrap;
}
.fvps-sidebar-col .nav-item.offcanvas-item > .nav-link .icon {
  width:15px; height:15px; flex-shrink:0; opacity:0.6; transition:opacity 0.14s;
}
.fvps-sidebar-col .nav-item.offcanvas-item > .nav-link:hover {
  background:var(--sb-hover-bg) !important;
  color:#cbd5e1 !important;
}
.fvps-sidebar-col .nav-item.offcanvas-item > .nav-link:hover .icon { opacity:0.9 }

/* active */
.fvps-sidebar-col .offcanvas-item.active,
.fvps-sidebar-col .nav-item.offcanvas-item.active { background:transparent !important }
.fvps-sidebar-col .offcanvas-item.active > .nav-link,
.fvps-sidebar-col .nav-item.offcanvas-item.active > .nav-link,
.fvps-sidebar-col .nav-item.offcanvas-item > .nav-link.active {
  background:var(--sb-active-bg) !important;
  color:#e2e8f0 !important;
  font-weight:600;
  border-left-color:#51ae59;
}
.fvps-sidebar-col .offcanvas-item.active > .nav-link .icon,
.fvps-sidebar-col .nav-item.offcanvas-item.active > .nav-link .icon { opacity:1 }

/* ══════════════════════════════════════════════════════════════════
   TOPBAR NAVBAR
══════════════════════════════════════════════════════════════════ */
.navbar {
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  width:100%;
  height:100%;
}
.navbar-brand { display:none !important } /* brand is in sidebar on desktop */
@media(max-width:767px) { .navbar-brand { display:flex !important } }
.navbar-toggler { border-color:rgba(255,255,255,0.15) }

.navbar-nav { gap:0.15rem }
.nav-link { color:#64748b !important; font-size:0.845rem; font-weight:500; border-radius:6px; padding:0.4rem 0.6rem !important; transition:color 0.15s,background 0.15s }
.nav-link:hover { color:#e2e8f0 !important; background:rgba(255,255,255,0.04) }
.nav-link.active { color:#e2e8f0 !important }
.js-theme-toggler { display:none !important }

/* topbar: hide page-nav links (dashboard/order) — sidebar handles nav */
.navbar-nav > .nav-item.d-md-flex:not(:has(.dropdown-toggle)):not(:has(.btn)) { display:none !important }

.client-dropdown .nav-link.dropdown-toggle { color:#94a3b8 !important; display:flex; align-items:center; gap:0.5rem }
.client-dropdown .nav-link.dropdown-toggle:hover { color:#e2e8f0 !important }
.client-dropdown img { border-radius:50%; border:1.5px solid rgba(81,174,89,0.45) }

/* ══════════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════════════════════════════ */
.fvps-main-col {
  flex:1 !important;
  max-width:none !important;
  min-width:0;
  padding:2rem 2.5rem !important;
}
@media(max-width:767px) { .fvps-main-col { padding:1.25rem !important } }

#wrapper { padding-top:0 }
.content-block { padding-bottom:3rem }

/* breadcrumb */
.breadcrumb { background:none; padding:0; margin-bottom:1.5rem }
.breadcrumb-item { font-size:0.72rem; color:#334155 }
.breadcrumb-item a { color:#64748b; transition:color 0.14s }
.breadcrumb-item a:hover { color:#e2e8f0 }
.breadcrumb-item.active { color:#94a3b8 }
.breadcrumb-item+.breadcrumb-item::before { color:#334155 }

/* page heading */
.page-pretitle { font-size:0.65rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; background:linear-gradient(135deg,#51ae59,#60a5fa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; margin-bottom:0.3rem }
h1.page-title,.page-title { font-weight:800; letter-spacing:-0.5px; color:#f1f5f9; margin-bottom:1.75rem }

/* ══════════════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════════════ */
.card {
  background:#111113 !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  border-radius:8px !important;
  box-shadow:none;
}
.card:hover { border-color:rgba(255,255,255,0.1) !important; box-shadow:none }
.card-header {
  background:#111113 !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
  border-radius:8px 8px 0 0 !important;
  font-weight:600; font-size:0.75rem;
  color:#71717a;
  padding:0.75rem 1.25rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.card-footer { background:#111113 !important; border-top:1px solid rgba(255,255,255,0.06) !important; border-radius:0 0 8px 8px !important; padding:0.75rem 1.25rem }
.card-body { padding:1.25rem }

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════════ */
.btn { font-family:'Inter',system-ui,sans-serif; font-weight:600; border-radius:8px; font-size:0.845rem; transition:all 0.18s }
.btn-primary { background:#51ae59 !important; border-color:#51ae59 !important; color:#fff !important }
.btn-primary:hover { background:#459e50 !important; border-color:#459e50 !important; box-shadow:none !important }
.btn-outline-primary { border-color:rgba(81,174,89,0.45) !important; color:#7dd986 !important }
.btn-outline-primary:hover { background:#51ae59 !important; border-color:#51ae59 !important; color:#fff !important }
.btn-secondary { background:#131724 !important; border-color:rgba(255,255,255,0.08) !important; color:#94a3b8 !important }
.btn-secondary:hover { background:#1a2035 !important; color:#e2e8f0 !important }
.btn-success { background:#15803d !important; border-color:#15803d !important; color:#fff !important }
.btn-danger  { background:#b91c1c !important; border-color:#b91c1c !important; color:#fff !important }
.btn-sm { font-size:0.75rem; padding:0.3rem 0.7rem; border-radius:6px }

/* ══════════════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════════════ */
.form-control,.form-select { background:#131724 !important; border:1px solid rgba(255,255,255,0.09) !important; color:#e2e8f0 !important; border-radius:8px; font-size:0.875rem }
.form-control:focus,.form-select:focus { border-color:#51ae59 !important; box-shadow:0 0 0 3px rgba(81,174,89,0.18) !important; background:#131724 !important }
.form-control::placeholder { color:#334155 !important }
.form-label { font-size:0.8rem; font-weight:500; color:#64748b; margin-bottom:0.35rem }
.input-group-text { background:#0d1019 !important; border-color:rgba(255,255,255,0.09) !important; color:#64748b !important }
.form-check-input { background-color:#131724; border-color:rgba(255,255,255,0.18) }
.form-check-input:checked { background-color:#51ae59; border-color:#51ae59 }

/* ══════════════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════════════ */
.table { color:#e2e8f0; border-color:rgba(255,255,255,0.06); margin-bottom:0 }
.table>:not(caption)>*>* { background:transparent !important; border-bottom-color:rgba(255,255,255,0.05) !important; color:#e2e8f0 !important; padding:0.9rem 1rem; vertical-align:middle }
table>thead>tr>th { color:#334155 !important; font-size:0.67rem !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:0.08em !important; background:#131724 !important; border-bottom:1px solid rgba(255,255,255,0.06) }
.table tbody>tr:last-child>td { border-bottom:none !important }
.table-hover>tbody>tr:hover>* { background:rgba(255,255,255,0.018) !important }
.table-responsive { border-radius:12px; border:1px solid rgba(255,255,255,0.06) }

/* ══════════════════════════════════════════════════════════════════
   BADGES  (huraga forces color:#fff!important — beat it)
══════════════════════════════════════════════════════════════════ */
.badge { font-weight:600; font-size:0.67rem; letter-spacing:0.04em; padding:0.3em 0.6em; border-radius:4px }
.badge.bg-primary,.badge.text-bg-primary { background:rgba(81,174,89,0.16) !important; color:#7dd986 !important; border:1px solid rgba(81,174,89,0.25) }
.badge.bg-success,.badge.text-bg-success { background:rgba(34,197,94,0.12)  !important; color:#4ade80 !important; border:1px solid rgba(34,197,94,0.2) }
.badge.bg-warning,.badge.text-bg-warning { background:rgba(251,191,36,0.12) !important; color:#fbbf24 !important; border:1px solid rgba(251,191,36,0.2) }
.badge.bg-danger,.badge.text-bg-danger   { background:rgba(239,68,68,0.12)  !important; color:#f87171 !important; border:1px solid rgba(239,68,68,0.2) }
.badge.bg-info,.badge.text-bg-info       { background:rgba(96,165,250,0.12) !important; color:#93c5fd !important; border:1px solid rgba(96,165,250,0.2) }
.badge.bg-secondary,.badge.text-bg-secondary { background:rgba(255,255,255,0.06) !important; color:#64748b !important; border:1px solid rgba(255,255,255,0.09) }

/* ══════════════════════════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════════════════════════ */
.alert { border-radius:10px; font-size:0.845rem; align-items:flex-start !important }
.alert-primary { background:rgba(81,174,89,0.08) !important; border-color:rgba(81,174,89,0.22) !important; color:#a3e9a8 !important }
.alert-success  { background:rgba(34,197,94,0.07)  !important; border-color:rgba(34,197,94,0.2)  !important; color:#86efac !important }
.alert-warning  { background:rgba(251,191,36,0.07) !important; border-color:rgba(251,191,36,0.2) !important; color:#fde68a !important }
.alert-danger   { background:rgba(239,68,68,0.07)  !important; border-color:rgba(239,68,68,0.2)  !important; color:#fca5a5 !important }
.alert-info     { background:rgba(81,174,89,0.08) !important; border-color:rgba(81,174,89,0.22) !important; color:#a3e9a8 !important }

/* ══════════════════════════════════════════════════════════════════
   DROPDOWN
══════════════════════════════════════════════════════════════════ */
.dropdown-menu { background:#0d1019 !important; border:1px solid rgba(255,255,255,0.08) !important; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.7) !important; padding:0.3rem }
.dropdown-item { color:#64748b; font-size:0.835rem; border-radius:6px; padding:0.45rem 0.75rem }
.dropdown-item:hover,.dropdown-item:focus { background:rgba(81,174,89,0.1) !important; color:#e2e8f0 !important }
.dropdown-divider { border-color:rgba(255,255,255,0.06) }

/* ══════════════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════════════ */
.page-link { background:#0d1019; border-color:rgba(255,255,255,0.06); color:#64748b; border-radius:7px !important; margin:0 2px }
.page-link:hover { background:#131724 !important; color:#e2e8f0 !important }
.page-item.active .page-link { background:#51ae59 !important; border-color:#51ae59 !important; color:#fff !important }
.pagination { gap:2px }

/* ══════════════════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════════════════ */
.nav-tabs { border-bottom:1px solid rgba(255,255,255,0.06) }
.nav-tabs .nav-link { border:none; border-bottom:2px solid transparent; border-radius:0; color:#64748b !important; font-weight:500; font-size:0.845rem; padding:0.6rem 1rem }
.nav-tabs .nav-link:hover { color:#e2e8f0 !important; border-bottom-color:rgba(255,255,255,0.18); background:none !important }
.nav-tabs .nav-link.active { background:transparent !important; border-bottom-color:#51ae59; color:#e2e8f0 !important }
.nav-pills .nav-link { color:#64748b !important; border-radius:8px }
.nav-pills .nav-link:hover { background:rgba(255,255,255,0.04) !important; color:#e2e8f0 !important }
.nav-pills .nav-link.active { background:rgba(81,174,89,0.14) !important; color:#e2e8f0 !important }

/* ══════════════════════════════════════════════════════════════════
   LIST GROUP
══════════════════════════════════════════════════════════════════ */
.list-group-item { background:#0d1019 !important; border-color:rgba(255,255,255,0.06) !important; color:#e2e8f0 !important; font-size:0.875rem }
.list-group-item-action:hover { background:#131724 !important; color:#e2e8f0 !important }
.list-group-item.active { background:rgba(81,174,89,0.14) !important; border-color:rgba(81,174,89,0.25) !important; color:#e2e8f0 !important }
.email-list .list-group-item.active { color:#e2e8f0 !important }

/* ══════════════════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════════════════ */
.modal-content { background:#0d1019 !important; border:1px solid rgba(255,255,255,0.08) !important; border-radius:14px; box-shadow:0 32px 80px rgba(0,0,0,0.8) }
.modal-header { border-bottom:1px solid rgba(255,255,255,0.06) !important; padding:1.25rem 1.5rem }
.modal-body { padding:1.5rem }
.modal-footer { border-top:1px solid rgba(255,255,255,0.06) !important; padding:1rem 1.5rem }
.modal-title { font-weight:700; font-size:1rem; color:#f1f5f9 }
.btn-close { filter:invert(1) brightness(0.55) }
.modal-backdrop { background:rgba(0,0,0,0.75) }

/* ══════════════════════════════════════════════════════════════════
   MISC
══════════════════════════════════════════════════════════════════ */
hr { border-color:rgba(255,255,255,0.06) !important }
.text-muted { color:#64748b !important }
.text-secondary { color:#475569 !important }
.bg-body-secondary { background:#0d1019 !important }
.border { border-color:rgba(255,255,255,0.06) !important }
.progress { background:#131724; border-radius:100px; height:5px }
.progress-bar { background:linear-gradient(90deg,#51ae59,#51ae59); border-radius:100px }
code { color:#7dd986; background:rgba(81,174,89,0.08); padding:.15em .4em; border-radius:4px; font-size:0.85em }
pre { background:#131724; border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:1rem }

/* footer */
#footer { border-top:1px solid rgba(255,255,255,0.06); padding-top:1.25rem; color:#334155 !important }
#footer a { color:#475569 }
#footer a:hover { color:#94a3b8 }

/* ══════════════════════════════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════════════════════════════ */
.auth-center {
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
  background:#09090b;
}
.auth-box {
  position:relative;
  z-index:1;
  width:100%;
  max-width:360px;
  background:#111113;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  padding:1.75rem;
}
.auth-box--wide { max-width:440px }

.auth-logo {
  display:flex;
  align-items:center;
  gap:0.45rem;
  font-weight:700;
  font-size:0.9375rem;
  letter-spacing:-0.3px;
  color:#fafafa;
  margin-bottom:1.5rem;
  text-decoration:none;
}
.auth-logo-dot {
  width:8px; height:8px;
  border-radius:50%;
  background:#51ae59;
  flex-shrink:0;
}
.auth-title {
  font-size:1.25rem;
  font-weight:700;
  color:#fafafa;
  letter-spacing:-0.4px;
  margin:0 0 1.5rem;
}
.auth-form { display:flex; flex-direction:column; gap:1rem }

.af-field { display:flex; flex-direction:column; gap:0.35rem }
.af-field label {
  font-size:0.75rem;
  font-weight:500;
  color:#71717a;
}
.af-field input,
.af-field select {
  background:#09090b;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:6px;
  color:#e4e4e7;
  font-family:'Inter',system-ui,sans-serif;
  font-size:0.875rem;
  padding:0.5625rem 0.75rem;
  height:40px;
  outline:none;
  transition:border-color 0.1s;
  width:100%;
  -webkit-appearance:none;
}
.af-field input::placeholder { color:#3f3f46 }
.af-field input:focus,
.af-field select:focus { border-color:#51ae59 }

.af-label-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.af-forgot {
  font-size:0.75rem;
  color:#52525b;
  text-decoration:none;
  transition:color 0.1s;
}
.af-forgot:hover { color:#71717a }

.af-row { display:flex; gap:0.75rem }
.af-row .af-field { flex:1; min-width:0 }

.af-phone {
  display:flex;
  align-items:center;
  background:#09090b;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:6px;
  overflow:hidden;
}
.af-phone > span {
  padding:0 0.65rem;
  color:#52525b;
  font-size:0.875rem;
  border-right:1px solid rgba(255,255,255,0.08);
  user-select:none;
}
.af-phone input { border:none !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important }
.af-cc { width:55px !important; flex-shrink:0 }

.af-submit {
  background:#51ae59;
  border:none;
  border-radius:6px;
  color:#fff;
  cursor:pointer;
  font-family:'Inter',system-ui,sans-serif;
  font-size:0.875rem;
  font-weight:600;
  height:40px;
  width:100%;
  transition:opacity 0.12s;
  margin-top:0.25rem;
}
.af-submit:hover { opacity:0.85 }
.af-submit:active { opacity:1 }

.af-switch {
  margin-top:1.25rem;
  text-align:center;
  font-size:0.8125rem;
  color:#52525b;
}
.af-switch a { color:#51ae59; text-decoration:none }
.af-switch a:hover { opacity:0.8 }

.af-check {
  display:flex;
  align-items:flex-start;
  gap:0.5rem;
  font-size:0.8rem;
  color:#71717a;
}
.af-check input[type=checkbox] { width:auto; margin-top:2px; flex-shrink:0 }
.af-check a,.af-tos a { color:#51ae59 }
.af-tos {
  font-size:0.75rem;
  color:#3f3f46;
  text-align:center;
  margin-top:0.5rem;
}

@media(max-width:767px) {
  .auth-center {
    align-items:flex-start;
    padding:2.5rem 1rem 2rem;
  }
  .auth-box { padding:1.5rem }
  .af-field input,.af-field select { font-size:16px !important }
}

/* password-reset page */
body.page-password-reset,
body.page-set-password {
  background:#09090b !important;
  min-height:100vh;
  display:flex !important;
  flex-direction:column;
  justify-content:center;
}
body.page-password-reset .card,
body.page-set-password .card {
  max-width:380px;
  margin:0 auto;
  background:#111113 !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:8px !important;
  box-shadow:none !important;
  overflow:hidden;
}
body.page-password-reset .card-body,
body.page-set-password .card-body { padding:1.75rem !important }
body.page-password-reset .card h5,
body.page-set-password .card h5 {
  font-weight:700 !important;
  font-size:1.125rem !important;
  color:#fafafa !important;
  margin:0 0 1.25rem !important;
}
body.page-password-reset [class*="col-"]::before,
body.page-set-password [class*="col-"]::before {
  content:'FastingVPS';
  display:block;
  font-family:'Inter',system-ui,sans-serif;
  font-weight:700;
  font-size:0.9375rem;
  color:#fafafa;
  margin-bottom:1.5rem;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE  (max-width: 767px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── base ── */
  body {
    background-size:20px 20px !important;
    -webkit-text-size-adjust:100%;
  }

  /* ── topbar ── */
  .fvps-shell > header { height:52px; padding:0 1rem }
  .navbar-brand { display:flex !important; font-size:1rem !important }
  .navbar-toggler { display:none !important }
  .client-dropdown { display:flex !important }

  /* ── layout: force-hide sidebar, full-width content ── */
  .fvps-sidebar-col { display:none !important }
  .fvps-main-col {
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
    padding:1rem 1rem calc(72px + env(safe-area-inset-bottom,0px)) !important;
  }
  .fvps-row { min-height:auto; flex-wrap:wrap }

  /* ── hide FOSSBilling footer ── */
  footer#footer { display:none !important }

  /* ── MOBILE BOTTOM NAV ── */
  .mob-nav {
    position:fixed;
    bottom:0; left:0; right:0;
    height:calc(60px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:rgba(10,12,20,0.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-top:1px solid rgba(255,255,255,0.07);
    z-index:500;
    align-items:stretch;
  }
  .mob-nav-item {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:#475569;
    text-decoration:none;
    font-size:0.6rem;
    font-weight:600;
    letter-spacing:0.02em;
    text-transform:uppercase;
    transition:color 0.15s;
    padding:0 4px;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-nav-item svg {
    width:22px; height:22px;
    stroke-width:1.75;
    flex-shrink:0;
  }
  .mob-nav-item.active { color:#51ae59 }
  .mob-nav-item:hover  { color:#94a3b8 }

  /* active indicator dot */
  .mob-nav-item.active::after {
    content:'';
    position:absolute;
    bottom:calc(env(safe-area-inset-bottom,0px) + 6px);
    width:4px; height:4px;
    border-radius:50%;
    background:#51ae59;
  }
  .mob-nav-item { position:relative }

  /* hide footer back-to-top on mobile (overlaps bottom nav) */
  a[href="#top"] { display:none !important }

  /* ── cards ── */
  .card { border-radius:10px !important }
  .card-header { padding:0.75rem 1rem }
  .card-body   { padding:1rem }
  .card-footer { padding:0.75rem 1rem }
  .card { margin-bottom:0.85rem }

  /* ── buttons — bigger touch targets ── */
  .btn { min-height:44px; padding:0.6rem 1rem }
  .btn-sm { min-height:36px; padding:0.4rem 0.75rem }
  .btn-primary,.btn-secondary,.btn-outline-primary {
    font-size:0.875rem;
  }

  /* ── forms — 16px prevents iOS zoom ── */
  .form-control,
  .form-select,
  .af-field input,
  .af-field select {
    font-size:16px !important;
    min-height:46px;
    padding:0.65rem 0.85rem;
  }
  .form-label { font-size:0.8rem }

  /* ── tables — horizontal scroll ── */
  .table-responsive {
    border-radius:10px;
    -webkit-overflow-scrolling:touch;
  }
  .table > :not(caption) > * > * {
    padding:0.65rem 0.85rem;
    font-size:0.82rem;
    white-space:nowrap;
  }
  .table th { font-size:0.7rem !important }
  .table-responsive .table { margin-bottom:0 }

  /* ── pagination ── */
  .pagination { flex-wrap:wrap; gap:4px }
  .page-link { min-height:38px; min-width:38px; display:flex; align-items:center; justify-content:center }

  /* ── breadcrumb ── */
  .breadcrumb { display:none }

  /* ── page title ── */
  h1.page-title, .page-title { font-size:1.3rem; margin-bottom:1rem }

  /* ── modal ── */
  .modal-dialog { margin:0; max-width:100%; min-height:100dvh; display:flex; align-items:flex-end }
  .modal-content { border-radius:16px 16px 0 0 !important; border-bottom:none !important }

  /* ── dropdown ── */
  .dropdown-menu { min-width:200px }

  /* ── auth box ── */
  .auth-center { padding:1.25rem 1rem; align-items:flex-start; padding-top:3rem }
  .auth-box { border-radius:14px !important; padding:1.75rem 1.25rem }
  .auth-heading h1 { font-size:1.25rem }
  .af-row { flex-direction:column; gap:0 }
  .af-submit { min-height:48px; font-size:1rem }

  /* ── alerts ── */
  .alert { font-size:0.825rem; border-radius:8px }
}

/* ══════════════════════════════════════════════════════════════════
   SMALL MOBILE  (max-width: 375px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .fvps-shell > header { padding:0 0.75rem }
  .fvps-main-col { padding:0.75rem 0.75rem calc(68px + env(safe-area-inset-bottom,0px)) !important }
  .auth-box { padding:1.5rem 1rem }
  .mob-nav-item { font-size:0.55rem }
  .mob-nav-item svg { width:20px; height:20px }
}

/* ══════════════════════════════════════════════════════════════════
   TABLET  (768px – 1023px)
══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --sb-width: 190px }
  .fvps-main-col { padding:1.5rem !important }
  .auth-box { max-width:400px }
}


/* ══════════════════════════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════════════════════════ */

/* on-hold alert */
.d-alert {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:#111113;
  border:1px solid rgba(245,158,11,0.2);
  border-left:3px solid #f59e0b;
  border-radius:6px;
  padding:0.75rem 1rem;
  font-size:0.8125rem;
  color:#d4d4d8;
  margin-bottom:1rem;
}
.d-alert a { color:#f59e0b; text-decoration:none; white-space:nowrap; font-weight:600 }

/* ── balance card ──────────────────────────────────────────────── */
.d-balance-card {
  background:#111113;
  border:1px solid rgba(255,255,255,0.07);
  border-radius:10px;
  padding:1.25rem;
  margin-bottom:0.75rem;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
}
.d-bal-name {
  font-size:0.75rem;
  font-weight:500;
  color:#52525b;
  margin:0 0 0.35rem;
}
.d-bal-amount {
  font-size:2rem;
  font-weight:700;
  letter-spacing:-0.04em;
  color:#fafafa;
  line-height:1;
  margin:0 0 0.3rem;
}
.d-bal-label {
  font-size:0.75rem;
  color:#52525b;
  margin:0;
}
.d-bal-btn {
  display:inline-flex;
  align-items:center;
  background:#51ae59;
  color:#fff;
  font-size:0.8rem;
  font-weight:600;
  padding:0.45rem 0.875rem;
  border-radius:6px;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  transition:opacity 0.12s;
}
.d-bal-btn:hover { opacity:0.85; color:#fff }

/* ── stats grid ────────────────────────────────────────────────── */
.d-stats-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:0.75rem;
}
.d-stat-cell {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:1rem 0.5rem;
  text-decoration:none;
  border-right:1px solid rgba(255,255,255,0.06);
  transition:background 0.1s;
  -webkit-tap-highlight-color:transparent;
  text-align:center;
}
.d-stat-cell:last-child { border-right:none }
.d-stat-cell:hover { background:rgba(255,255,255,0.03) }
.d-stat-n {
  font-size:1.625rem;
  font-weight:700;
  letter-spacing:-0.03em;
  color:#fafafa;
  line-height:1;
  margin-bottom:0.4rem;
  display:block;
}
.d-stat-l {
  font-size:0.6875rem;
  color:#52525b;
  line-height:1.35;
  display:block;
}
.d-stat-cell--bad .d-stat-n  { color:#ef4444 }
.d-stat-cell--warn .d-stat-n { color:#f59e0b }

/* ── quick links ───────────────────────────────────────────────── */
.d-links {
  border:1px solid rgba(255,255,255,0.07);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:1.25rem;
}
.d-link-item {
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.875rem 1rem;
  border-bottom:1px solid rgba(255,255,255,0.05);
  text-decoration:none;
  color:#d4d4d8;
  transition:background 0.1s;
  -webkit-tap-highlight-color:transparent;
}
.d-link-item:last-child { border-bottom:none }
.d-link-item:hover { background:rgba(255,255,255,0.03); color:#fafafa }
.d-link-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border-radius:6px;
  background:rgba(255,255,255,0.05);
  color:#71717a;
  flex-shrink:0;
}
.d-link-item:hover .d-link-icon { color:#a1a1aa }
.d-link-label { flex:1; font-size:0.875rem; font-weight:500 }
.d-link-chevron { color:#3f3f46; flex-shrink:0 }

/* ── section headers ───────────────────────────────────────────── */
.d-section-hd {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:1.25rem 0 0.5rem;
}
.d-section-hd > span {
  font-size:0.6875rem;
  font-weight:600;
  color:#52525b;
  text-transform:uppercase;
  letter-spacing:0.07em;
}
.d-section-hd > a {
  font-size:0.75rem;
  color:#51ae59;
  text-decoration:none;
}
.d-section-hd > a:hover { opacity:0.8 }

/* ── recent rows ───────────────────────────────────────────────── */
.d-card {
  border:1px solid rgba(255,255,255,0.07);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:0.75rem;
}
.d-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  padding:0.8rem 1rem;
  border-bottom:1px solid rgba(255,255,255,0.04);
  text-decoration:none;
  transition:background 0.1s;
  -webkit-tap-highlight-color:transparent;
}
.d-row:last-child { border-bottom:none }
.d-row:hover { background:rgba(255,255,255,0.025) }
.d-row-info { display:flex; flex-direction:column; gap:0.2rem; min-width:0 }
.d-row-title {
  font-size:0.8125rem;
  font-weight:500;
  color:#d4d4d8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.d-row-meta { font-size:0.75rem; color:#52525b }
.d-badge-active    { font-size:0.75rem; font-weight:500; color:#51ae59;  flex-shrink:0 }
.d-badge-pending   { font-size:0.75rem; font-weight:500; color:#f59e0b;  flex-shrink:0 }
.d-badge-suspended { font-size:0.75rem; font-weight:500; color:#ef4444;  flex-shrink:0 }
.d-badge-cancelled { font-size:0.75rem; font-weight:500; color:#71717a;  flex-shrink:0 }
.d-badge-open      { font-size:0.75rem; font-weight:500; color:#38bdf8;  flex-shrink:0 }
.d-badge-on_hold   { font-size:0.75rem; font-weight:500; color:#f59e0b;  flex-shrink:0 }
.d-badge-closed    { font-size:0.75rem; font-weight:500; color:#52525b;  flex-shrink:0 }
.d-empty {
  padding:1.25rem 1rem;
  font-size:0.8125rem;
  color:#52525b;
  margin:0;
}
.d-empty a { color:#51ae59; text-decoration:none }

/* ── guest ─────────────────────────────────────────────────────── */
.d-guest { padding:2rem 0 1.5rem }
.d-guest-logo {
  display:flex;
  align-items:center;
  gap:0.4rem;
  font-weight:700;
  font-size:0.9375rem;
  color:#fafafa;
  margin-bottom:1.75rem;
}
.d-guest-dot {
  width:8px; height:8px;
  border-radius:50%;
  background:#51ae59;
}
.d-guest-h {
  font-size:1.875rem;
  font-weight:700;
  color:#fafafa;
  letter-spacing:-0.04em;
  line-height:1.2;
  margin:0 0 0.625rem;
}
.d-guest-sub {
  font-size:0.875rem;
  color:#71717a;
  line-height:1.6;
  margin:0 0 1.5rem;
}
.d-guest-btns { display:flex; gap:0.625rem }
.d-guest-btn-main {
  display:inline-flex;
  align-items:center;
  background:#51ae59;
  color:#fff;
  font-size:0.875rem;
  font-weight:600;
  padding:0.5625rem 1.125rem;
  border-radius:6px;
  text-decoration:none;
  transition:opacity 0.12s;
}
.d-guest-btn-main:hover { opacity:0.85; color:#fff }
.d-guest-btn-sec {
  display:inline-flex;
  align-items:center;
  color:#d4d4d8;
  font-size:0.875rem;
  font-weight:500;
  padding:0.5625rem 1.125rem;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.1);
  text-decoration:none;
  transition:border-color 0.12s;
}
.d-guest-btn-sec:hover { border-color:rgba(255,255,255,0.2); color:#fafafa }

/* ── mobile sign-out (profile page + bottom nav) ────────────────── */
.btn-signout-mobile {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  width:100%;
  padding:0.875rem 1rem;
  background:rgba(239,68,68,0.07);
  border:1px solid rgba(239,68,68,0.18);
  border-radius:12px;
  color:#f87171;
  font-size:0.9rem;
  font-weight:600;
  text-decoration:none;
  transition:background 0.15s,border-color 0.15s;
}
.btn-signout-mobile:hover {
  background:rgba(239,68,68,0.13);
  border-color:rgba(239,68,68,0.3);
  color:#fca5a5;
}
.mob-nav-logout {
  color:#f87171 !important;
}
.mob-nav-logout svg { stroke:#f87171 !important; opacity:0.75 !important }
.mob-nav-logout:hover,.mob-nav-logout.active { color:#fca5a5 !important }