/* ---------------------------------------------------------------------------
 * bs-theme.css — retheme Bootstrap 5.3 onto منافساتي's existing design tokens.
 *
 * Loaded AFTER bootstrap.rtl.min.css, BEFORE any page CSS. Every value here
 * points at the same --accent/--card/--line/--font variables app.css already
 * defines in :root, so there is exactly ONE place brand colours live.
 *
 * Bootstrap 5.3 gotcha this file exists to solve: component classes compile
 * their colours to component-scoped vars (.btn-primary sets --bs-btn-bg:#0d6efd
 * literally). Overriding --bs-primary alone does NOT retheme buttons — you must
 * override the component vars. That is the documented no-build theming path.
 * ------------------------------------------------------------------------- */

:root {
  /* ---- typography: keep the self-hosted Plex Arabic + metric fallback (CWV) ---- */
  --bs-body-font-family: var(--font);
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.5;

  /* ---- surfaces & text ---- */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--soft);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line2);

  /* ---- brand ---- */
  --bs-primary: var(--accent);
  --bs-primary-rgb: 37, 99, 235;          /* #2563eb — rgba() consumers need the triplet */
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accentd);
  --bs-link-color-rgb: 37, 99, 235;

  --bs-success: var(--green);
  --bs-success-rgb: 22, 163, 74;
  --bs-danger: var(--red);
  --bs-danger-rgb: 220, 38, 38;
  --bs-warning: var(--orange);
  --bs-warning-rgb: 217, 119, 6;

  /* ---- shape: app.css uses noticeably rounder corners than Bootstrap's default ---- */
  --bs-border-radius: 11px;
  --bs-border-radius-sm: 9px;
  --bs-border-radius-lg: 14px;
  --bs-border-radius-xl: 20px;

  /* ---- focus ring ---- */
  --bs-focus-ring-color: var(--accentbg);
  --bs-focus-ring-width: 3px;

  /* ---- subtle tints (bg-*-subtle / text-*-emphasis utilities) ----
     These are what the tinted chips, icon boxes and status pills on /notifications use instead
     of hand-rolled colour classes. Warning maps to the award-yellow the site already used for
     ترسية accents (#fef9c3/#854d0e), not Bootstrap's amber. */
  --bs-primary-bg-subtle: var(--accentbg);
  --bs-primary-text-emphasis: var(--accent);
  --bs-success-bg-subtle: var(--greenbg);
  --bs-success-text-emphasis: #15803d;
  --bs-warning-bg-subtle: #fef9c3;
  --bs-warning-text-emphasis: #854d0e;
  --bs-danger-bg-subtle: var(--redbg);
  --bs-danger-text-emphasis: #b91c1c;
  --bs-secondary-bg-subtle: var(--greybg);
  --bs-secondary-text-emphasis: var(--muted);
}

/* Alpine: elements marked x-cloak must be hidden until Alpine initialises and strips the
   attribute, otherwise collapsed panels flash open during first paint. Required by Alpine's
   docs and deliberately !important so it beats any display utility on the same element. */
[x-cloak] { display: none !important; }

/* ---- buttons ---- */
.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accentd);
  --bs-btn-hover-border-color: var(--accentd);
  --bs-btn-active-bg: var(--accentd);
  --bs-btn-active-border-color: var(--accentd);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--accentbg);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent);
  --bs-btn-active-bg: var(--accentbg);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-active-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-outline-secondary {
  --bs-btn-color: var(--muted);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--greybg);
  --bs-btn-hover-border-color: var(--line);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: var(--greybg);
  --bs-btn-active-color: var(--text);
}
/* app.css buttons are 700-weight; Bootstrap defaults to 400 */
.btn { --bs-btn-font-weight: 700; }

/* ---- cards ---- */
.card {
  --bs-card-bg: var(--card);
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: 20px;
  --bs-card-inner-border-radius: 19px;
  box-shadow: var(--shadow);
}

/* ---- forms ---- */
/* Bootstrap's default control is noticeably thinner than the hand-tuned original
   (.375rem/.75rem padding at 1rem) — it read as flimsy next to the rest of the page.
   These are the values app.css already used for .co-i / input.fld. Radius comes from
   --bs-border-radius (11px) set above, so it is not repeated here. */
.form-control, .form-select {
  border-color: var(--line);
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
}
.form-control { padding: 11px 13px; }
/* selects keep Bootstrap's arrow-side padding — a padding SHORTHAND here overlaps the text onto
   the chevron (bootstrap.rtl reserves 2.25rem on the arrow side) */
.form-select { padding-block: 11px; padding-inline-start: 13px; }
/* restate the small variants: this file loads after bootstrap.css, so without these the block
   above silently neuters `-sm` and every small control renders full-size */
.form-control-sm { padding: 5px 10px; font-size: 13px; }
.form-select-sm { padding-block: 5px; padding-inline-start: 10px; font-size: 13px; }
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accentbg);
}
.form-label { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accentbg); }

/* ---- modals ----
   Bootstrap's .modal-title inherits h5 sizing and the .fs-* utilities are !important, so the
   size is set here and the markup carries NO fs-/fw- class. These restore the hand-rolled
   dialog's proportions: a 16.5px/800 heading and 1.8 body leading, which read better at this
   dialog width than Bootstrap's 20px/500 + 1.5. */
/* SURFACE: Bootstrap defaults --bs-modal-bg (and --bs-dropdown-bg) to var(--bs-body-bg), which
   this theme maps to the page's cold blue-grey #f1f5f9 — so every dialog rendered flat and
   bluish instead of as a white card. Remap both to the card surface; radius/border match .card.
   The grey stays where it belongs: .form-control keeps the body-bg fill (the filled-input look),
   which now reads as depth ON the white dialog instead of vanishing into it. */
.modal {
  --bs-modal-bg: var(--card);
  --bs-modal-border-color: var(--line);
  --bs-modal-border-radius: 16px;
}
.dropdown-menu {
  --bs-dropdown-bg: var(--card);
  --bs-dropdown-border-color: var(--line);
}
.modal-title { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.modal-body p { line-height: 1.8; }
/* Dialog labels sit above a single field and read lighter than the section labels on /pricing,
   which is why this is scoped to .modal rather than changing .form-label globally. */
.modal .form-label { font-size: 13px; font-weight: 400; }

/* ---- toggle switch ----
   Was hand-built in notifications.php's inline <style> (a hidden checkbox, an empty <i> as the
   track, and a ::before knob with a hardcoded translateX for RTL) — which is why it existed on
   exactly one page. Bootstrap's .form-switch is the same control and handles checked/disabled and
   the RTL knob direction itself, so it now belongs to every page that loads Bootstrap. Only the
   size is restated: Bootstrap's default reads small beside a settings row. */
.form-switch .form-check-input { width: 42px; height: 24px; margin: 0; cursor: pointer; }
.form-switch .form-check-input:disabled { opacity: .45; cursor: not-allowed; }

/* ---- alerts: match app.css's existing tinted-note palette ---- */
.alert { --bs-alert-border-radius: 12px; font-weight: 600; }
.alert-success { --bs-alert-bg: var(--greenbg);  --bs-alert-border-color: #bbf7d0; --bs-alert-color: #15803d; }
.alert-warning { --bs-alert-bg: var(--orangebg); --bs-alert-border-color: #fcd9a4; --bs-alert-color: #92400e; }
.alert-danger  { --bs-alert-bg: var(--redbg);    --bs-alert-border-color: #fecaca; --bs-alert-color: #b91c1c; }

/* ---------------------------------------------------------------------------
 * Moyasar isolation.
 *
 * The embedded payment form injects its own markup into .mysr-form and is
 * styled by moyasar.css (loaded from their CDN AFTER this file). Bootstrap's
 * Reboot restyles bare input/button/label elements, which would otherwise leak
 * into the card form. Reboot's element selectors are specificity 0-0-1, so a
 * single descendant rule here outranks them without touching Moyasar's own.
 * Anything inside .mysr-form keeps the browser/Moyasar defaults.
 * ------------------------------------------------------------------------- */
.mysr-form button,
.mysr-form input,
.mysr-form label,
.mysr-form select {
  font-family: inherit;
}
.mysr-form .btn { --bs-btn-font-weight: initial; }

/* Moyasar's stylesheet sets NO font-size of its own — the form is built to inherit, and the only
   defence it ships is `h6{font-size:inherit}`. Bootstrap's Reboot assigns explicit sizes to
   <legend> (calc(1.5rem + .3vw), plus float:right) and to h1–h5, none of which Moyasar guards.
   That is what rendered «معلومات البطاقة» oversized. Hand those elements back to inheritance. */
.mysr-form legend,
.mysr-form h1, .mysr-form h2, .mysr-form h3,
.mysr-form h4, .mysr-form h5, .mysr-form h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
}