/* ظهور — project-wide typeface (Thmanyah Serif Display) */
@font-face{font-family:Thmanyah;font-weight:400;font-display:swap;src:url("../landing/font/ThmanyahSerifDisplay-Regular.otf")}
@font-face{font-family:Thmanyah;font-weight:500 600;font-display:swap;src:url("../landing/font/ThmanyahSerifDisplay-Medium.otf")}
@font-face{font-family:Thmanyah;font-weight:700 900;font-display:swap;src:url("../landing/font/ThmanyahSerifDisplay-Black.otf")}
:root{
  --ink:#FFFCF9;
  --ink-2:#0A0A0A;
  --surface:#FFFFFF;
  --surface-2:#F4F3F1;
  --border:#ECE7E1;
  --gold:#FF6A00;
  --gold-light:#FFA940;
  --gold-text:#B8480A;
  --gold-soft:rgba(255,106,0,0.10);
  --teal:#33b7a6;
  --teal-text:#0A7563;
  --teal-soft:rgba(51,183,166,0.14);
  --rose:#e15c74;
  --rose-text:#C81F40;
  --rose-soft:rgba(225,92,116,0.12);
  --text:#1A1A1A;
  --muted:#6E6A64;
  --font-display:'Thmanyah', Arial, sans-serif;
  --font-body:'Thmanyah', Arial, sans-serif;
  --font-mono:'Thmanyah', Arial, sans-serif;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 16px 44px rgba(30,15,0,0.10);
}

*{box-sizing:border-box;}
html{overflow-x:hidden;}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--font-body); line-height:1.7; -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button, input, select, textarea{font-family:inherit; font-size:1rem;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px;}

.container{max-width:1100px; margin-inline:auto; padding-inline:20px;}
.container-wide{max-width:1600px;}
.page{padding:36px 0 80px;}
.page-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:28px;}
.page-head h1{font-family:var(--font-display); font-weight:400; font-size:1.9rem; margin:0;}
.page-sub{color:var(--muted); font-size:0.92rem; margin-top:4px;}

/* ---- header / nav ---- */
.app-header{
  position:sticky; top:0; z-index:40; background:rgba(255,252,249,0.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.app-header-inner{
  max-width:1100px; margin-inline:auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:1.4rem;}
.brand .logo-mark{width:30px; height:30px; flex-shrink:0;}
.app-nav{display:flex; align-items:center; gap:22px; font-size:0.92rem;}
.app-nav a{color:var(--muted); transition:color .2s ease;}
.app-nav a.active, .app-nav a:hover{color:var(--text);}
.header-right{display:flex; align-items:center; gap:14px;}
.balance-chip{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  padding:8px 16px; border-radius:999px; font-family:var(--font-mono); font-size:0.88rem;
}
.balance-chip strong{color:var(--gold-text);}

@media (max-width:760px){
  .app-nav{ order:3; width:100%; justify-content:center; gap:16px; flex-wrap:wrap; }
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; font-weight:600; font-size:0.92rem;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{background:var(--gold); color:var(--ink-2);}
.btn-primary:hover{box-shadow:0 8px 24px rgba(255,106,0,.32); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-danger{background:var(--rose); color:#2a0a10;}
.btn-danger:hover{box-shadow:0 8px 24px rgba(225,92,116,.32);}
.btn-sm{padding:7px 14px; font-size:0.82rem;}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}

/* ---- collapsed row actions (admin orders table): one toggle button that
   reveals whatever action buttons/forms already exist for that row ---- */
summary.actions-toggle{ list-style:none; }
summary.actions-toggle::-webkit-details-marker{ display:none; }
summary.actions-toggle::after{ content:'▾'; margin-inline-start:6px; font-size:.75em; }
details.actions-menu[open] > summary.actions-toggle::after{ content:'▴'; }
details.actions-menu[open] > summary.actions-toggle{ margin-bottom:10px; }

/* ---- admin/services.php: add/edit-service card collapses to a single simple
   heading by default, and expands to the full field list on click (or already
   open, e.g. when editing, or reopened after a failed submit) ---- */
summary.service-form-summary{
  list-style:none; cursor:pointer; margin:0;
  font-weight:bold; font-size:1.17em; /* matches the plain <h3> this replaced */
}
summary.service-form-summary::-webkit-details-marker{ display:none; }
summary.service-form-summary::after{ content:'▾'; margin-inline-start:8px; font-size:.7em; color:var(--muted); vertical-align:middle; }
details.service-form-toggle[open] > summary.service-form-summary::after{ content:'▴'; }
.service-form-hint{ font-weight:normal; font-size:.7rem; color:var(--muted); margin-inline-start:4px; }
details.service-form-toggle[open] > summary.service-form-summary .service-form-hint{ display:none; }

/* ---- cards ---- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px;}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;}
.stat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px;}
.stat-card .label{color:var(--muted); font-size:0.82rem; margin-bottom:8px;}
.stat-card .value{font-family:var(--font-mono); font-size:1.7rem; font-weight:700; color:var(--gold-text);}
.live-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 0 rgba(51,183,166,.5); animation:liveDotPulse 2s infinite;
}
@keyframes liveDotPulse{
  0%{box-shadow:0 0 0 0 rgba(51,183,166,.5);}
  70%{box-shadow:0 0 0 6px rgba(51,183,166,0);}
  100%{box-shadow:0 0 0 0 rgba(51,183,166,0);}
}
@media (prefers-reduced-motion: reduce){.live-dot{animation:none;}}

/* ---- forms ---- */
.form-group{display:grid; gap:8px; margin-bottom:18px;}
.form-group label{font-size:0.88rem; color:var(--muted);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

/* ---- support contact card (WhatsApp / Telegram quick-contact, customer-facing) ----
   Was previously unstyled: the two <svg> icons have a viewBox but no width/height, so
   with no CSS to size them they fell back to the browser's default replaced-element
   box — rendering oversized — and the links had no button chrome at all. */
.support-contact-card{margin-bottom:24px;}
.support-contact{display:flex; gap:12px; flex-wrap:wrap;}
.support-contact-link{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px; border-radius:999px; border:1px solid var(--border);
  font-weight:600; font-size:0.92rem; color:var(--text);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.support-contact-link svg{width:20px; height:20px; flex-shrink:0; fill:currentColor;}
.support-contact-link:hover{transform:translateY(-1px);}
.support-contact-link--whatsapp{color:#25D366;}
.support-contact-link--whatsapp:hover{border-color:#25D366; background:rgba(37,211,102,.08);}
.support-contact-link--telegram{color:#229ED9;}
.support-contact-link--telegram:hover{border-color:#229ED9; background:rgba(34,158,217,.08);}
@media (max-width:600px){ .form-row{grid-template-columns:1fr;} }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=url], input[type=file], input[type=date], select, textarea{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:12px 14px; border-radius:var(--radius-sm); width:100%;
}
textarea{resize:vertical; min-height:90px;}
.form-actions{display:flex; gap:12px; margin-top:8px; flex-wrap:wrap;}
/* ---- admin/settings.php: grouped section cards (see $renderPaymentField() there) ---- */
.settings-section h2{
  font-family:var(--font-display); font-weight:400; font-size:1.3rem;
  margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--border);
}
.field-hint{color:var(--muted); font-size:0.78rem;}
.field-error{color:var(--rose-text); font-size:0.8rem;}

/* ---- admin/settings.php: merged settings hub (tab sidebar + panels) ----
   Five previously-separate admin pages (settings/backup/admins/activity_log/
   my-security) now live here as tabs, switched client-side by app.js-style
   inline JS; PHP still renders the correct initial tab server-side so the
   page works with JS off and so a direct link like ?tab=admins lands right. */
.settings-layout{display:grid; grid-template-columns:250px 1fr; gap:24px; align-items:start;}
.settings-tabs{
  display:flex; flex-direction:column; gap:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px; position:sticky; top:90px;
}
.settings-tab-btn{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--radius-sm);
  color:var(--text); font-size:0.92rem; font-weight:600;
  transition:background .15s ease, color .15s ease;
}
.settings-tab-btn:hover{background:var(--surface-2);}
.settings-tab-btn.active{background:var(--gold-soft); color:var(--gold-text);}
.settings-tab-icon{font-size:1.05rem; line-height:1; flex-shrink:0;}
.settings-tab-label{flex:1;}
.settings-tab-count{
  font-family:var(--font-mono); font-size:0.72rem; color:var(--muted);
  background:var(--surface-2); border-radius:999px; padding:2px 8px; flex-shrink:0;
}
.settings-tab-btn.active .settings-tab-count{background:rgba(255,255,255,.6); color:var(--gold-text);}
.settings-tab-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.settings-tab-dot.is-on{background:var(--teal);}
.settings-tab-dot.is-off{background:var(--border);}

.settings-panels{min-width:0;}
.settings-panel-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px;}
.settings-panel-head h2{font-family:var(--font-display); font-weight:400; font-size:1.35rem; margin:0;}
.settings-panel-head .page-sub{margin-top:4px;}

@media (max-width:760px){
  .settings-layout{grid-template-columns:1fr;}
  .settings-tabs{
    position:static; flex-direction:row; overflow-x:auto; gap:6px; padding:8px;
    -webkit-overflow-scrolling:touch;
  }
  .settings-tab-btn{white-space:nowrap; flex-shrink:0;}
  .settings-tab-label{flex:none;}
}

/* ---- admin/settings.php: "الإعدادات العامة" tab — sub-grouped payment fields
   (wallets/banks/crypto) laid out two-up instead of one long stacked list ---- */
.settings-subgroup{margin-bottom:22px;}
.settings-subgroup-label{
  display:flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700;
  color:var(--muted); margin-bottom:12px; padding-bottom:8px; border-bottom:1px dashed var(--border);
}
.settings-subgroup-label .icon{font-size:1rem; line-height:1;}
.settings-field-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
@media (max-width:600px){.settings-field-grid{grid-template-columns:1fr;}}

/* ---- toggle switches (on/off settings) — used in place of raw checkboxes on
   admin/settings.php's "الإعدادات العامة" tab; semantically clearer for a
   feature that's either on or off, vs. a checkbox which reads as "select this" ---- */
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; cursor:pointer;}
.toggle-row + .toggle-row{border-top:1px solid var(--border);}
.toggle-row-text{display:flex; flex-direction:column; gap:4px;}
.toggle-row-text strong{font-size:0.92rem; font-weight:600;}
.toggle-switch{position:relative; display:inline-block; width:44px; height:26px; flex-shrink:0;}
.toggle-switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.toggle-switch .track{
  position:absolute; inset:0; background:var(--border); border-radius:999px;
  transition:background .15s ease; pointer-events:none;
}
.toggle-switch .track::before{
  content:''; position:absolute; width:20px; height:20px; inset-inline-start:3px; top:3px;
  background:#fff; border-radius:50%; transition:inset-inline-start .15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.toggle-switch input:checked + .track{background:var(--gold);}
.toggle-switch input:checked + .track::before{inset-inline-start:21px;}
.toggle-switch input:focus-visible + .track{outline:2px solid var(--gold); outline-offset:2px;}

/* ---- auth pages ---- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow);}
.auth-card h1{font-family:var(--font-display); font-weight:400; font-size:1.7rem; text-align:center; margin:0 0 6px;}
.auth-card .sub{text-align:center; color:var(--muted); font-size:0.88rem; margin-bottom:26px;}
.auth-switch{text-align:center; margin-top:18px; font-size:0.88rem; color:var(--muted);}
.auth-switch a{color:var(--gold-text); font-weight:600;}

/* ---- alerts / flash ---- */
.alert{padding:13px 18px; border-radius:var(--radius-sm); font-size:0.9rem; margin-bottom:16px; border:1px solid transparent;}
.alert-success{background:var(--teal-soft); border-color:rgba(51,183,166,.35); color:var(--teal-text);}
.alert-error{background:var(--rose-soft); border-color:rgba(225,92,116,.35); color:var(--rose-text);}
.alert-info{background:var(--gold-soft); border-color:rgba(255,106,0,.3); color:var(--gold-text);}

/* ---- badges ---- */
.badge{display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; font-size:0.76rem; font-weight:600;}
.badge-pending{background:var(--gold-soft); color:var(--gold-text);}
.badge-success{background:var(--teal-soft); color:var(--teal-text);}
.badge-danger{background:var(--rose-soft); color:var(--rose-text);}
.badge-info{background:rgba(10,10,10,.06); color:var(--text);}

/* ---- tables ---- */
.table-wrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; overflow-y:hidden;}
table{width:100%; border-collapse:collapse; font-size:0.9rem;}
thead th{
  text-align:right; color:var(--muted); font-size:0.76rem; font-family:var(--font-mono);
  padding:14px 20px; border-bottom:1px solid var(--border); font-weight:600; white-space:nowrap;
}
tbody td{padding:14px 20px; border-bottom:1px solid var(--border); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(10,10,10,.02);}
/* Opt-in for tables with many columns (e.g. admin/orders.php's, orders.php's) — gives
   the table a sensible width to aim for on typical desktop screens. */
.table-wrap-wide table{min-width:960px;}
/* NOTE: deliberately NOT white-space:nowrap here (an earlier version of this rule had
   it, trading row-height consistency for a guarantee that no cell's content could ever
   force the table wider than its container — but nowrap is exactly what silently broke
   that guarantee: a browser sizes an auto-layout table to fit its widest unbroken line,
   so once this table picked up more columns than it had when 960px was chosen, nowrap
   pushed its real rendered width well past 960px on almost any screen, past what
   .table-wrap-wide's own breakpoint below accounts for, and .table-wrap's horizontal
   scroll kicked in to compensate — on screens wide enough that it visibly shouldn't have
   had to. Letting cells wrap instead means the table can never be forced wider than
   whatever space it's actually given, so .table-wrap's scroll fallback never triggers on
   content-width grounds — only remaining need for it at all is the dedicated breakpoint
   below, which removes min-width instead of relying on the fallback. Rows with a
   wrapped cell just end up a bit taller than a one-line row, which is the trade-off. */
.table-wrap-wide thead th, .table-wrap-wide tbody td{padding-left:12px; padding-right:12px;}
/* Column titles are nowrap by default (see thead th above), which is fine for tables
   with few/short-titled columns — but this table has enough columns, with long enough
   Arabic titles ("عدد البداية", "إعادة الطلب"...), that even with body cells free to wrap
   (above), nowrap headers alone could still force the table wider than its container.
   Letting titles wrap too removes that last remaining source of forced width. */
.table-wrap-wide thead th{white-space:normal;}
.cell-amount{font-family:var(--font-mono); color:var(--gold-text);}
.cell-actions{display:flex; gap:8px; flex-wrap:wrap;}
.empty-state{padding:50px 20px; text-align:center; color:var(--muted);}

/* ---- order table: compact service-ID badge + pop-up trigger buttons ---- */
.service-cell{display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.service-id-badge{
  display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px;
  background:rgba(10,10,10,.06); color:var(--text); font-family:var(--font-mono);
  font-size:0.78rem; font-weight:600; text-decoration:none; border:none; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.service-id-badge:hover{background:var(--gold-soft); color:var(--gold-text);}
.service-name-badge{
  display:inline-flex; align-items:center; padding:4px 12px; border-radius:999px;
  background:rgba(10,10,10,.06); color:var(--text); font-family:var(--font-body);
  font-size:0.82rem; font-weight:600; text-decoration:none; border:none; cursor:pointer;
  max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.service-name-badge:hover{background:var(--gold-soft); color:var(--gold-text);}
/* Customer-number badge + name tooltip: a plain <button> so tapping it on a phone (not
   just hovering with a mouse) reveals the name — CSS :focus persists after a click/tap
   until something else takes focus, so this needs no JS at all, unlike the browser's
   native title="" tooltip which only ever shows on hover. */
.customer-id-badge{
  position:relative; display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px;
  background:rgba(10,10,10,.06); border:none; color:var(--text); font-family:var(--font-mono);
  font-size:0.78rem; font-weight:600; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.customer-id-badge:hover, .customer-id-badge:focus{background:var(--gold-soft); color:var(--gold-text);}
/* General-purpose "single line only, never a scrollbar" treatment for any table cell
   whose value is free-form and unpredictable in length (a name, an email, a note...):
   clips to one line with an ellipsis instead of overflowing or wrapping to a second
   line, and — same hover-or-tap-to-reveal idea as .customer-id-badge above, reusing its
   .name-tip bubble — shows the untruncated value in a small popup on hover/focus, so
   nothing is actually lost, just hidden until asked for. See truncated() in
   includes/functions.php, which generates this markup.
   Two nested spans, not one: .cell-truncate (outer, no overflow set) is what .name-tip
   is positioned against, while .cell-truncate-text (inner) is what actually clips with
   overflow:hidden. Putting overflow:hidden and the popup on the SAME element clips the
   popup too — bottom:100% pushes it above the box, but the ancestor's own overflow:hidden
   still cuts off anything outside its bounds, popup included, so it silently never
   showed. Splitting the two roles across parent/child is what fixes that.
   tabindex on the outer span (not a <button>, this isn't an action) is what makes the
   popup reachable by a tap on mobile, not just a mouse hover — same reasoning as
   .customer-id-badge. The tooltip copy is aria-hidden: the visible span already carries
   the full text in the accessibility tree (CSS text-overflow only clips it visually),
   so without this a screen reader would announce the value twice. */
.cell-truncate{position:relative; display:inline-block; vertical-align:middle; cursor:default;}
.cell-truncate-text{display:block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.customer-id-badge .name-tip, .cell-truncate .name-tip{
  display:none; position:absolute; bottom:100%; right:0; margin-bottom:6px; z-index:20;
  background:var(--ink-2); color:#fff; padding:6px 12px; border-radius:8px;
  font-family:var(--font-body); font-size:0.78rem; font-weight:400;
}
.customer-id-badge .name-tip{white-space:nowrap;}
.cell-truncate .name-tip{white-space:normal; max-width:280px; text-align:right;}
.customer-id-badge:hover .name-tip, .customer-id-badge:focus .name-tip,
.cell-truncate:hover .name-tip, .cell-truncate:focus .name-tip{display:block;}
.service-details-btn{
  cursor:pointer; display:inline-flex; align-items:center; background:transparent;
  padding:3px 10px; border-radius:999px; border:1px solid var(--border);
  font-size:0.72rem; color:var(--muted); font-family:inherit; transition:border-color .15s ease, color .15s ease;
}
.service-details-btn:hover{border-color:var(--gold); color:var(--gold-text);}
/* Client orders page: the service name itself is the details-trigger, so it needs to
   read like a normal name, not the small muted pill above — same click behavior
   (still matched by .service-details-btn), reset visual treatment. */
.service-name-btn{
  background:none; border:none; padding:0; margin:0; border-radius:0;
  font-size:inherit; font-weight:inherit; color:inherit; text-align:inherit;
  text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px;
  text-decoration-color:var(--border);
  display:inline-block; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;
}
.service-name-btn:hover{color:var(--gold-text); text-decoration-color:var(--gold);}
/* Filled in by JS (openModal() in app.js) for both the service-details pop-up and the
   order-status-update pop-up — .service-details-body's row styling is reused as-is
   for both, so a plain read-only row and a <select>-based form row line up the same. */
.service-details-body{
  margin-top:8px; padding:10px 12px; background:var(--surface-2); border-radius:var(--radius-sm);
  display:flex; flex-direction:column; gap:5px; font-size:0.8rem; min-width:190px;
}
.service-details-body .sd-row{display:flex; justify-content:space-between; gap:14px;}
.service-details-body .sd-label{color:var(--muted); white-space:nowrap;}
.service-details-body .sd-value{font-weight:600;}
.service-details-body .sd-progress-track{background:var(--border); border-radius:999px; height:7px; overflow:hidden; margin-top:2px;}
.service-details-body .sd-progress-fill{background:var(--gold); height:100%; border-radius:999px;}

@media (max-width:760px){
  thead{display:none;}
  table, tbody, tr, td{display:block; width:100%;}
  .table-wrap-wide table{min-width:0;}
  .table-wrap-wide tbody td{white-space:normal; padding-left:0; padding-right:0;}
  tbody tr{border-bottom:1px solid var(--border); padding:14px 20px;}
  tbody td{border-bottom:none; padding:4px 0; display:flex; justify-content:space-between; gap:12px;}
  tbody td::before{content:attr(data-label); color:var(--muted); font-size:0.78rem;}
}

/* .table-wrap-wide (admin/orders.php, orders.php) carries a 960px min-width — comfortable
   on a normal desktop window, but NOT guaranteed below that, e.g. a laptop at 100% zoom
   with the window not maximized, a tablet, or a split-screen browser. Rather than let
   .table-wrap's horizontal-scroll fallback catch that gap, these specific tables drop to
   the same no-scroll stacked-card layout as the shared @media(max-width:760px) block
   above, just starting from a wider breakpoint — so there's no width where this table
   can still overflow into a scrollbar. (The 760px block above still independently
   covers everything narrower than this one, .table-wrap-wide included.) */
@media (max-width:1050px){
  .table-wrap-wide thead{display:none;}
  .table-wrap-wide table, .table-wrap-wide tbody, .table-wrap-wide tr, .table-wrap-wide td{display:block; width:100%;}
  .table-wrap-wide table{min-width:0;}
  .table-wrap-wide tbody tr{border-bottom:1px solid var(--border); padding:14px 20px;}
  .table-wrap-wide tbody td{border-bottom:none; padding:4px 0; display:flex; justify-content:space-between; gap:12px; white-space:normal;}
  .table-wrap-wide tbody td::before{content:attr(data-label); color:var(--muted); font-size:0.78rem;}
}

/* ---- services grid (browse + order) ---- */
.service-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:32px;}
.service-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px;
  display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:border-color .2s ease, transform .2s ease;
}
.service-card:hover{border-color:rgba(10,10,10,.16); transform:translateY(-2px);}
.service-card.selected, .service-card:has(input:checked){border-color:var(--gold); box-shadow:0 0 0 1px var(--gold);}
.service-card .platform-tag{font-size:0.72rem; color:var(--muted); font-family:var(--font-mono); text-transform:uppercase;}
.service-card h3{margin:0; font-size:1rem;}
.service-card .rate{font-family:var(--font-mono); color:var(--gold-text); font-size:0.95rem;}
.service-card .limits{font-size:0.76rem; color:var(--muted);}

.order-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; position:sticky; top:90px;}
.price-preview{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:18px; text-align:center; margin:16px 0;
}
.price-preview .amount{font-family:var(--font-mono); font-size:1.6rem; color:var(--gold-text); font-weight:700;}

.pill-group{display:flex; flex-wrap:wrap; gap:8px;}
.pill-group label{
  border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-size:0.85rem; cursor:pointer;
  background:var(--surface-2);
}
.pill-group input{position:absolute; opacity:0; pointer-events:none;}
.pill-group input:checked + span{color:var(--gold-text);}
.pill-group label:has(input:checked){border-color:var(--gold); background:var(--gold-soft);}

.receipt-preview{margin-top:10px; max-width:220px; border-radius:var(--radius-sm); border:1px solid var(--border); display:none;}

/* ---- star ratings ---- */
.stars{font-size:1rem; letter-spacing:1px;}
.stars-lg{font-size:1.5rem; letter-spacing:2px;}
.rating-line{display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted);}
.review-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px;}
.star-picker{display:flex; gap:6px; font-size:1.8rem;}
.star-picker input{position:absolute; opacity:0; pointer-events:none;}
.star-picker label{cursor:pointer; color:var(--muted); transition:color .15s ease;}
.star-picker label.filled{color:var(--gold-text);}

/* Bigger, playful variant used inside service.php's rating pop-up — same picker,
   same JS, just larger with a bit of bounce so picking a rating feels like an event
   rather than filling out a form field. Kept as a size/motion variant of .star-picker
   rather than a new component, so both share the same underlying interaction logic. */
.star-picker-lg{gap:12px; font-size:3.2rem; justify-content:center; margin:6px 0 4px;}
.star-picker-lg label{display:inline-block; transition:color .25s ease, transform .2s ease;}
.star-picker-lg label:hover{transform:scale(1.14);}
.star-picker-lg label.just-selected{animation:starPop .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes starPop{
  0%{transform:scale(1) rotate(0);}
  45%{transform:scale(1.4) rotate(8deg);}
  70%{transform:scale(.92) rotate(-3deg);}
  100%{transform:scale(1) rotate(0);}
}
@media (max-width:420px){.star-picker-lg{font-size:2.5rem; gap:8px;}}
@media (prefers-reduced-motion: reduce){
  .star-picker-lg label{transition:color .15s ease;}
  .star-picker-lg label:hover{transform:none;}
  .star-picker-lg label.just-selected{animation:none;}
}

/* ---- generic modal (service.php's rating pop-up only — admin panel pop-ups go
   through the shared openModal()/.notif-modal system in assets/js/app.js instead,
   alongside the notification center pop-up below) ---- */
.modal-overlay{position:fixed; inset:0; background:rgba(10,10,10,.5); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;}
.modal-overlay[hidden]{display:none;}
.modal-box{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; max-width:420px; width:100%; position:relative; animation:modalIn .18s ease;}
.modal-box h3{font-family:var(--font-display); font-weight:400; font-size:1.3rem; margin:0 0 14px;}
.modal-close{position:absolute; top:14px; inset-inline-end:18px; background:none; border:none; font-size:1.5rem; line-height:1; color:var(--muted); cursor:pointer; padding:4px;}
.modal-close:hover{color:var(--text);}
.modal-field{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:.9rem;}
.modal-field:last-of-type{border-bottom:none;}
.modal-field span{color:var(--muted);}
@keyframes modalIn{from{opacity:0; transform:scale(.97) translateY(4px);} to{opacity:1; transform:scale(1) translateY(0);}}
@media (prefers-reduced-motion: reduce){.modal-box{animation:none;}}

/* ---- notification center pop-up (assets/js/app.js) ----
   Deliberately no cursor:pointer / click handler on the backdrop itself — closing
   only happens via the ✕ or "إغلاق" button inside .notif-modal, by design. */
.notif-modal-backdrop{
  position:fixed; inset:0; background:rgba(10,8,6,.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  z-index:9999; animation:notifFadeIn .18s ease;
}
.notif-modal{
  position:relative; width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:30px 26px 24px; text-align:center; animation:notifPopIn .22s ease;
}
.notif-modal-close{
  position:absolute; top:14px; inset-inline-end:14px; width:30px; height:30px; padding:0;
  border-radius:50%; border:1px solid var(--border); background:var(--surface-2);
  color:var(--muted); font-size:1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease;
}
.notif-modal-close:hover{background:var(--rose-soft); color:var(--rose-text); border-color:transparent;}
.notif-modal-icon{font-size:2.4rem; line-height:1; margin-bottom:10px;}
.notif-modal-label{font-family:var(--font-display); font-weight:400; font-size:1.15rem; margin-bottom:8px;}
.notif-modal-message{color:var(--muted); font-size:0.92rem; line-height:1.6; margin:0;}
.notif-modal-extra{
  color:var(--gold-text); font-size:0.78rem; margin:12px 0 0; background:var(--gold-soft);
  border-radius:999px; padding:6px 14px; display:inline-block;
}
.notif-modal-actions{display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap;}
.notif-modal-actions .btn{flex:1; min-width:120px;}

@keyframes notifFadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes notifPopIn{from{opacity:0; transform:translateY(8px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}}

@media (max-width:480px){
  .notif-modal{padding:26px 20px 20px;}
  .notif-modal-actions{flex-direction:column-reverse;}
  .notif-modal-actions .btn{width:100%;}
}

/* ---- branded loading overlay (assets/js/app.js — shown on every <form> submit,
   admin and customer pages alike). Above absolutely everything else (modals
   included: z-index 9999 is the previous highest, used by the notification
   pop-up above) since a submission can in principle happen with a modal open. */
.brand-loader-overlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(255,252,249,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.brand-loader-overlay.is-visible{opacity:1; pointer-events:all;}
.brand-loader-face{width:80px; height:80px; animation:brandLoaderFloat 2.2s ease-in-out infinite;}
.brand-loader-eye{transform-box:fill-box; transform-origin:center; animation:brandLoaderWink 2.2s ease-in-out infinite;}
.brand-loader-text{font-family:var(--font-display); font-weight:400; font-size:1.05rem; color:var(--gold-text); letter-spacing:.5px;}

@keyframes brandLoaderFloat{
  0%, 100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-8px) rotate(-4deg);}
}
@keyframes brandLoaderWink{
  0%, 45%, 100%{transform:scaleY(1);}
  52%, 66%{transform:scaleY(.08);}
}
@media (prefers-reduced-motion: reduce){
  .brand-loader-face, .brand-loader-eye{animation:none;}
}

/* =====================================================================
   ظهور — هوية موحّدة مطابقة للصفحة الرئيسية (أبيض / أسود / برتقالي)
   هذا القسم يعدّل المظهر فقط فوق التنسيق الأساسي أعلاه، ولا يغيّر أي سلوك.
   ===================================================================== */
:root{
  --ink:#FFFFFF;
  --ink-2:#000000;
  --surface:#FFFFFF;
  --surface-2:#F2F2F2;
  --border:#EDEDED;
  --gold:#FF6900;
  --gold-light:#FF8B44;
  --gold-text:#D85A00;
  --gold-soft:rgba(255,105,0,0.10);
  --text:#000000;
  --muted:#6F6F6F;
  --radius:24px;
  --radius-sm:16px;
  --shadow:0 20px 50px rgba(0,0,0,0.08);
  --orange-bg:#F89A3E;
}
body{background:#fff; color:#000; font-weight:400;}
.page-head h1{font-size:2.2rem; line-height:1.2;}

/* ---- الشريط العلوي: حبّة سوداء عائمة مثل الصفحة الرئيسية ---- */
.app-header{
  background:linear-gradient(#fff 65%, rgba(255,255,255,0));
  backdrop-filter:none; border-bottom:none; padding:16px 16px 14px;
}
.app-header-inner{
  max-width:1100px; background:#000; color:#fff; border-radius:28px;
  padding:10px 22px; min-height:56px;
}
.app-header .brand{color:#fff; font-weight:900; font-size:1.25rem;}
.app-header .app-nav a{color:rgba(255,255,255,.68); font-weight:500;}
.app-header .app-nav a.active, .app-header .app-nav a:hover{color:#fff;}
.app-header .balance-chip{background:rgba(255,255,255,.12); border:none; color:#fff;}
.app-header .balance-chip strong{color:var(--gold-light);}
.app-header .btn-ghost{color:#fff; border-color:rgba(255,255,255,.28);}
.app-header .btn-ghost:hover{background:rgba(255,255,255,.14);}
.app-header .btn-primary{background:#fff; color:#000;}
@media (max-width:760px){ .app-header-inner{border-radius:24px; padding:12px 16px;} }

/* ---- الأزرار ---- */
.btn{font-weight:500;}
.btn-primary{background:#000; color:#fff;}
.btn-primary:hover{background:#1c1c1c; box-shadow:0 10px 26px rgba(0,0,0,.22);}
.btn-ghost{border-color:#D9D9D9;}
.btn-ghost:hover{background:var(--surface-2); border-color:#000;}
.btn-danger{background:#E5484D; color:#fff;}

/* ---- البطاقات والجداول ---- */
.card, .table-wrap, .order-panel, .service-card, .review-card, .settings-tabs, .balance-chip{border-color:var(--border);}
.card, .order-panel{box-shadow:0 1px 0 rgba(0,0,0,.02);}
.stat-card{background:var(--surface-2); border:none;}
.stat-card .value{color:#000;}
.stat-card .value, .cell-amount, .price-preview .amount, .service-card .rate{font-weight:900;}
.service-card:hover{border-color:#000;}
thead th{background:#FAFAFA; color:#6F6F6F;}

/* ---- الحقول ---- */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=url], input[type=file], input[type=date], select, textarea{
  background:var(--surface-2); border:1px solid transparent; border-radius:14px;
  transition:border-color .15s ease, background .15s ease;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:#000; background:#fff;}

/* ---- تبويبات الإعدادات ---- */
.settings-tab-btn.active{background:#000; color:#fff;}
.settings-tab-btn.active .settings-tab-count{background:rgba(255,255,255,.18); color:#fff;}

/* ---- صفحات الدخول والتسجيل: خلفية برتقالية كقسم الصفحة الرئيسية ---- */
body:has(.auth-wrap){background:var(--orange-bg);}
body:has(.auth-wrap) .app-header{background:transparent;}
.auth-card{border:none; border-radius:32px; padding:40px 36px; box-shadow:0 30px 70px rgba(0,0,0,.16);}
.auth-card h1{font-size:2rem;}
.auth-switch a{color:#000; text-decoration:underline; text-underline-offset:3px;}

/* ---- الشاشة المنبثقة وشاشة التحميل ---- */
.brand-loader-overlay{background:rgba(255,255,255,.95);}
.brand-loader-text{color:#000;}