/* ================================================================
   AUTH.CSS — v6.3
   SCOPE: Authenticated shell ONLY
   Loads after base.css. Not loaded for guest pages.

   SCOPE RULE:
   ┌─────────────────────────────────────────────────────────────┐
   │  base.css  → global tokens + Bootstrap polish (no shell)    │
   │  auth.css  → shell tokens (#app-wrapper) + auth components  │
   │  guest.css → guest shell components only                    │
   │  page.css  → page-specific overrides                        │
   └─────────────────────────────────────────────────────────────┘
   ================================================================ */


/* ================================================================
   §0  SHELL TOKENS  (scoped to #app-wrapper)
   ================================================================ */

#app-wrapper {
  --app-sidebar-w: 272px;
  --app-header-h:  56px;
  --app-toggle-x:  14px;

  --account-btn-bg:           var(--app-ink-accent);
  --account-btn-bg-hover:     var(--app-ink-accent-hover);
  --account-btn-shadow:       rgba(80, 96, 240, 0.28);
  --account-btn-shadow-hover: rgba(80, 96, 240, 0.40);

  --sidebar-nav-active-bg:    var(--bs-primary-bg-subtle);
  --sidebar-nav-active-color: var(--app-ink-accent);
  --sidebar-nav-hover-bg:     var(--app-hover-light);
}

html[dir="rtl"] #app-wrapper { --app-toggle-x: -14px; }

[data-bs-theme="dark"] #app-wrapper {
  --account-btn-bg:           var(--app-ink-accent);
  --account-btn-bg-hover:     var(--app-ink-accent-hover);
  --account-btn-shadow:       rgba(123, 114, 245, 0.25);
  --account-btn-shadow-hover: rgba(123, 114, 245, 0.38);
  --sidebar-nav-hover-bg:     var(--app-hover-dark);
}


/* ================================================================
   §1  GLASS LAYER
   ================================================================ */

#app-sidebar      { background: var(--app-vibrancy-ultra-fallback);   }
#app-header,
#app-footer       { background: var(--app-vibrancy-regular-fallback); }
.account-dropdown { background: var(--app-vibrancy-thin-fallback);    }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  #app-sidebar {
    background:              var(--app-vibrancy-ultra-bg);
    backdrop-filter:         var(--app-vibrancy-ultra-blur);
    -webkit-backdrop-filter: var(--app-vibrancy-ultra-blur);
  }
  #app-header,
  #app-footer {
    background:              var(--app-vibrancy-regular-bg);
    backdrop-filter:         var(--app-vibrancy-regular-blur);
    -webkit-backdrop-filter: var(--app-vibrancy-regular-blur);
  }
  .account-dropdown {
    background:              var(--app-vibrancy-thin-bg);
    backdrop-filter:         var(--app-vibrancy-thin-blur);
    -webkit-backdrop-filter: var(--app-vibrancy-thin-blur);
  }
}


/* ================================================================
   §2  LAYOUT SHELL
   ================================================================ */

#app-sidebar {
  display:             flex;
  flex-direction:      column;
  width:               var(--app-sidebar-w);
  position:            fixed;
  inset-block-start:   0;
  inset-inline-start:  0;
  height:              100vh;
  overflow-y:          auto;
  overflow-x:          hidden;
  z-index:             1030;
  border-inline-end:   1px solid var(--app-border-strong);
  box-shadow:          var(--app-shadow-sm);
  overscroll-behavior: contain;
  transition:          transform var(--app-dur-slow) var(--app-ease-out);
  will-change:         transform;
  transform:           translateZ(0);
  scrollbar-width:     thin;
  scrollbar-color:     var(--app-ink-tertiary) transparent;
}
#app-sidebar::-webkit-scrollbar       { width: 4px; }
#app-sidebar::-webkit-scrollbar-track { background: transparent; }
#app-sidebar::-webkit-scrollbar-thumb { background: var(--app-ink-tertiary); border-radius: 2px; }

#app-main {
  margin-inline-start: var(--app-sidebar-w);
  min-width:           0;
  background-color:    var(--app-surface-0);
}

#app-header {
  display:           flex;
  align-items:       center;
  justify-content:   space-between;
  height:            var(--app-header-h);
  position:          sticky;
  inset-block-start: 0;
  z-index:           1020;
  padding-inline:    20px;
  gap:               12px;
  border-block-end:  1px solid var(--app-border);
}

#app-content { padding: 28px 24px; }

#app-footer {
  padding-inline:     24px;
  padding-block:      18px;
  border-block-start: 1px solid var(--app-border);
}

/* — Header zones — */
.header-start {
  display:     flex;
  align-items: center;
  gap:         8px;
  min-width:   0;
  flex:        1;
}

.header-page-title {
  font-size:      var(--app-fs-md);
  font-weight:    600;
  color:          var(--app-ink-primary);
  letter-spacing: -0.02em;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  min-width:      0;
}

.header-end {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

.header-divider {
  width:       1px;
  height:      18px;
  background:  var(--app-border);
  flex-shrink: 0;
}

/* — Footer — */
.footer-brand-name {
  font-size:      var(--app-fs-sm);
  font-weight:    700;
  color:          var(--app-ink-primary);
  letter-spacing: -0.02em;
}
.footer-brand       { color: var(--app-ink-primary); text-decoration: none; }
.footer-brand:hover { color: var(--app-ink-primary); }
.footer-brand-logo  { opacity: 0.65; }
.footer-copy {
  font-size:   var(--app-fs-xs);
  color:       var(--app-ink-tertiary);
  white-space: nowrap;
}
.footer-link {
  font-size:       var(--app-fs-xs);
  font-weight:     500;
  color:           var(--app-ink-tertiary);
  text-decoration: none;
  transition:      color var(--app-dur-fast);
}
.footer-link:hover { color: var(--app-ink-accent); }

[data-bs-theme="dark"] .header-page-title,
[data-bs-theme="dark"] .footer-brand-name { color: #FFFFFF; }
[data-bs-theme="dark"] .footer-copy       { color: #C7C7CC; }


/* ================================================================
   §3  SIDEBAR COMPONENTS
   ================================================================ */

.sidebar-brand {
  height:           var(--app-header-h);
  padding-inline:   16px;
  border-block-end: 1px solid var(--app-border);
  flex-shrink:      0;
  display:          flex;
  align-items:      center;
}
.sidebar-brand a {
  color:           var(--app-ink-primary);
  text-decoration: none;
  font-weight:     700;
  font-size:       var(--app-fs-lg);
  letter-spacing:  -0.025em;
}
.sidebar-brand a img { border-radius: 2px; }

/* — Balance gradient card — */
.d3m-balance-gradient-card {
  background:    var(--grad-brand);
  border-radius: var(--app-radius-panel);
  padding:       14px 16px 16px;
  margin-block:  4px;
  position:      relative;
  overflow:      hidden;
  flex-shrink:   0;
}
.d3m-balance-gradient-card::before,
.d3m-balance-gradient-card::after {
  content:        '';
  position:       absolute;
  border-radius:  50%;
  pointer-events: none;
}
.d3m-balance-gradient-card::before {
  inset-block-start: -24px;
  inset-inline-end:  -24px;
  width:    80px;
  height:   80px;
  background: rgba(255, 255, 255, 0.10);
}
.d3m-balance-gradient-card::after {
  inset-block-end:    -16px;
  inset-inline-start: 16px;
  width:    56px;
  height:   56px;
  background: rgba(255, 255, 255, 0.06);
}
.d3m-balance-gradient-label {
  font-size:        var(--app-fs-xs);
  font-weight:      600;
  letter-spacing:   0.07em;
  text-transform:   uppercase;
  color:            rgba(255, 255, 255, 0.65);
  margin-block-end: 4px;
  position:         relative;
  z-index:          1;
}
.d3m-balance-gradient-amount {
  font-size:      var(--app-fs-xl);
  font-weight:    700;
  letter-spacing: -0.035em;
  color:          #fff;
  line-height:    1.2;
  position:       relative;
  z-index:        1;
}
.sidebar-balance-toggle {
  width:         26px;
  height:        26px;
  margin:        -9px;
  border-radius: 7px;
  background:    rgba(255, 255, 255, 0.16);
  border:        none;
  color:         rgba(255, 255, 255, 0.80);
  font-size:     var(--app-fs-xs);
  cursor:        pointer;
  position:      relative;
  z-index:       1;
  transition:    background-color var(--app-dur-fast);
}
.sidebar-balance-toggle:hover { background: rgba(255, 255, 255, 0.24); }
.is-hidden { filter: blur(6px); user-select: none; }

/* — Section label — */
.sidebar-section-label {
  font-size:      var(--app-fs-xs);
  font-weight:    700;
  letter-spacing: var(--app-ls-widest);
  text-transform: uppercase;
  color:          var(--app-ink-tertiary);
  padding-inline: 16px;
  padding-block:  20px 5px;
  user-select:    none;
  flex-shrink:    0;
}

/* — Nav links — */
#app-sidebar .nav.flex-column { list-style: none; padding: 0; margin: 0; }

#app-sidebar .nav-link {
  display:        flex;
  align-items:    center;
  gap:            9px;
  color:          var(--nav-link-color);
  font-size:      var(--app-fs-md);
  font-weight:    500;
  letter-spacing: -0.01em;
  border-radius:  10px;
  margin-inline:  8px;
  margin-block:   1px;
  padding:        8px 10px;
  overflow:       hidden;
  position:       relative;
  min-width:      0;
  transition:
    background-color var(--app-dur-base) var(--app-ease-smooth),
    color            var(--app-dur-base) var(--app-ease-smooth);
}
#app-sidebar .nav-link::before {
  content:                 '';
  position:                absolute;
  inset-inline-start:      0;
  inset-block-start:       20%;
  width:                   3px;
  height:                  60%;
  border-start-end-radius: 3px;
  border-end-end-radius:   3px;
  background:              var(--app-ink-accent);
  opacity:                 0;
  transform:               translateX(-3px);
  transition:
    transform var(--app-dur-base) var(--app-ease-out),
    opacity   var(--app-dur-base) var(--app-ease-smooth);
}
html[dir="rtl"] #app-sidebar .nav-link::before {
  border-start-end-radius:   0;
  border-end-end-radius:     0;
  border-start-start-radius: 3px;
  border-end-start-radius:   3px;
  transform: translateX(3px);
}
#app-sidebar .nav-link.active::before                  { transform: translateX(0); opacity: 1; }
html[dir="rtl"] #app-sidebar .nav-link.active::before  { transform: translateX(0); }

#app-sidebar .nav-link > span {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  min-width:     0;
  flex:          1;
}
#app-sidebar .nav-link i {
  width:       17px;
  text-align:  center;
  font-size:   var(--app-fs-md);
  flex-shrink: 0;
  opacity:     0.55;
  transition:  opacity var(--app-dur-base) var(--app-ease-smooth);
}
#app-sidebar .nav-link:hover {
  background-color: var(--sidebar-nav-hover-bg);
  color:            var(--nav-link-color-hover);
}
#app-sidebar .nav-link:hover i { opacity: 1; }
#app-sidebar .nav-link.active {
  background-color: var(--sidebar-nav-active-bg);
  color:            var(--sidebar-nav-active-color);
  font-weight:      var(--nav-link-weight-active);
  box-shadow:       var(--app-shadow-xs);
}
#app-sidebar .nav-link.active i { opacity: 1; color: var(--app-ink-accent); }


/* ================================================================
   §4  HEADER COMPONENTS
   ================================================================ */

/* — Sidebar mobile toggle — */
#sidebar-toggle {
  display:         none;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   10px;
  background:      transparent;
  border:          1px solid var(--app-border);
  color:           var(--app-ink-secondary);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background-color var(--app-dur-fast), color var(--app-dur-fast);
}
#sidebar-toggle:hover { background: var(--app-hover-light); color: var(--app-ink-primary); }
[data-bs-theme="dark"] #sidebar-toggle:hover { background: var(--app-hover-dark); }

/* — Notification bell — */
.d3m-notif-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--app-border);
  border-radius: var(--bs-border-radius);
  background: var(--app-surface-1);
  color: var(--app-ink-secondary);
  font-size: var(--app-fs-md);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none !important;
  transition:
    background var(--app-dur-fast) var(--app-ease-smooth),
    border-color var(--app-dur-fast) var(--app-ease-smooth);
}

.d3m-notif-btn:is(:hover, :focus, :active, :visited) {
  color: var(--app-ink-secondary);
  text-decoration: none !important;
}

.d3m-notif-btn:hover {
  background: var(--app-surface-2);
  border-color: var(--app-border-strong);
}

[data-bs-theme="dark"] .d3m-notif-btn:hover {
  background: var(--app-hover-dark);
}

.d3m-notif-btn i {
  line-height: 1;
  text-decoration: none !important;
}

.d3m-notif-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--app-surface-1);
  border-radius: 50%;
  background: var(--bs-danger);
  pointer-events: none;
}

[dir="rtl"] .d3m-notif-dot {
  right: auto;
  left: 5px;
}
/* — Status pills — */
.status-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  height:         28px;
  padding-inline: 10px;
  border-radius:  999px;
  font-size:      var(--app-fs-xs);
  font-weight:    600;
  letter-spacing: -0.01em;
  white-space:    nowrap;
  border:         1px solid transparent;
  cursor:         default;
  user-select:    none;
}
.status-pill .pill-icon { font-size: var(--app-fs-xs); opacity: 0.8; }
.status-pill.pill-balance .pill-icon i {
  filter:  drop-shadow(0 0 3px rgba(45, 192, 119, 0.60));
  opacity: 1;
}
.status-pill.pill-balance {
  background:   var(--app-pill-balance-bg);
  color:        var(--app-pill-balance-ink);
  border-color: var(--pill-border-balance);
}
.status-pill.pill-orders {
  background:   var(--app-pill-orders-bg);
  color:        var(--app-pill-orders-ink);
  border-color: var(--pill-border-orders);
}
.status-pill.pill-clickable { cursor: pointer; text-decoration: none; }
.status-pill.pill-clickable:hover { filter: brightness(0.96); }

/* — Account button — */
.account-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  border:          none;
  background:      var(--account-btn-bg);
  color:           #fff;
  font-size:       var(--app-fs-sm);
  font-weight:     700;
  font-family:     var(--bs-body-font-family);
  letter-spacing:  -0.01em;
  cursor:          pointer;
  padding:         0;
  overflow:        hidden;
  box-shadow:      0 2px 8px var(--account-btn-shadow);
  transition:
    background var(--app-dur-fast) var(--app-ease-smooth),
    transform  var(--app-dur-active) var(--app-ease-spring),
    box-shadow var(--app-dur-fast) var(--app-ease-smooth);
}
.account-btn.dropdown-toggle::after { display: none !important; }
.account-btn:hover {
  background: var(--account-btn-bg-hover);
  box-shadow: 0 4px 14px var(--account-btn-shadow-hover);
  transform:  scale(1.05);
}
.account-btn:active { transform: scale(0.93); }
.account-avatar-img {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  object-fit:    cover;
  display:       block;
}

/* — Account dropdown — */
.account-dropdown {
  min-width:          220px;
  padding:            6px;
  border-radius:      var(--app-radius-card);
  border:             1px solid var(--app-border) !important;
  box-shadow:         var(--app-shadow-float);
  margin-block-start: 6px !important;
}
.account-dropdown-identity {
  padding:          8px 10px 10px;
  border-block-end: 1px solid var(--app-border);
  margin-block-end: 4px;
}
.account-dropdown-name {
  font-size:      var(--app-fs-md);
  font-weight:    600;
  color:          var(--app-ink-primary);
  letter-spacing: -0.02em;
}
.account-dropdown-email {
  font-size:          var(--app-fs-xs);
  color:              var(--app-ink-tertiary);
  margin-block-start: 1px;
}
.account-dropdown .dropdown-header {
  display:        flex;
  align-items:    center;
  gap:            6px;
  padding:        8px 10px 6px;
  font-size:      var(--app-fs-xs);
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--app-ink-tertiary);
}
.account-dropdown .dropdown-item {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         7px 10px;
  border-radius:   8px;
  font-size:       var(--app-fs-md);
  font-weight:     500;
  color:           var(--dropdown-item-color);
  letter-spacing:  -0.01em;
  transition:      background-color var(--app-dur-fast);
  text-decoration: none;
}
.account-dropdown .dropdown-item:hover:not(.active),
.account-dropdown .dropdown-item:focus-visible:not(.active) {
  background: var(--dropdown-item-bg-hover);
}
.account-dropdown .dropdown-item.item-destructive { color: #ff3c00; }
[data-bs-theme="dark"] .account-dropdown .dropdown-item.item-destructive { color: #FF453A; }
.account-dropdown .dropdown-divider { margin-block: 4px; border-color: var(--app-border); }

/* — Item / currency icon — */
.item-icon,
.currency-item-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   8px;
  background:      var(--app-surface-1);
  font-size:       var(--app-fs-sm);
  flex-shrink:     0;
}

/* — Theme toggle — */
.theme-toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-inline:  10px;
  padding-block:   5px;
}
.theme-toggle-label {
  display:        flex;
  align-items:    center;
  gap:            8px;
  font-size:      var(--app-fs-md);
  font-weight:    500;
  color:          var(--app-ink-primary);
  letter-spacing: -0.01em;
}
.theme-toggle {
  position:    relative;
  width:       36px;
  height:      22px;
  flex-shrink: 0;
}
.theme-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.theme-toggle-track {
  position:      absolute;
  inset:         0;
  border-radius: 999px;
  background:    var(--app-ink-tertiary);
  cursor:        pointer;
  transition:    background-color var(--app-dur-base) var(--app-ease-smooth);
}
.theme-toggle input:checked + .theme-toggle-track { background: var(--app-ink-accent); }
.theme-toggle-track::after {
  content:            '';
  position:           absolute;
  inset-block-start:  3px;
  inset-inline-start: 3px;
  width:              16px;
  height:             16px;
  border-radius:      50%;
  background:         white;
  box-shadow:         0 1px 3px rgba(0, 0, 0, 0.22);
  transition:         transform var(--app-dur-base) var(--app-ease-spring);
}
.theme-toggle input:checked + .theme-toggle-track::after {
  transform: translateX(var(--app-toggle-x));
}

/* — OTP input — */
.input-otp {
  font-family:    var(--app-font-mono);
  text-align:     center;
  letter-spacing: 0.15em;
}


/* ================================================================
   §5  LANGUAGE & CURRENCY SWITCHER
   ================================================================ */
/* — Row layout — */
.switcher-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             .625rem;
  padding-inline:  .625rem;
  padding-block:   .3125rem;
}

/* — Row label: Language / Currency — */
.switcher-row-label {
  display:        flex;
  align-items:    center;
  gap:            .3125rem;
  font-size:      var(--app-fs-xs);
  font-weight:    700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--bs-secondary-color);
  white-space:    nowrap;
  flex-shrink:    0;
}

.switcher-row-label i {
  color: var(--bs-tertiary-color);
}

/* — Chip group (languages) — */
.chip-group {
  display:         flex;
  flex-wrap:       wrap;
  gap:             .25rem;
  justify-content: flex-end;
}

/* — Chip base — */
.switcher-chip {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          1.375rem;
  padding-inline:  .5625rem;
  border-radius:   var(--app-radius-full, 999px);
  font-size:       var(--app-fs-xs);
  font-weight:     600;
  letter-spacing:  .02em;
  white-space:     nowrap;
  flex-shrink:     0;
  color:           var(--bs-secondary-color);
  background:      var(--bs-tertiary-bg);
  border:          1px solid var(--bs-border-color);
  text-decoration: none;
  cursor:          pointer;
  transition:
    background-color var(--app-dur-fast) var(--app-ease-smooth),
    color            var(--app-dur-fast) var(--app-ease-smooth),
    border-color     var(--app-dur-fast) var(--app-ease-smooth);
}

.switcher-chip:hover:not(.active) {
  background:      var(--bs-secondary-bg);
  border-color:    var(--app-border-strong);
  color:           var(--bs-body-color);
  text-decoration: none;
}

.switcher-chip.active {
  background:     var(--bs-primary-bg-subtle);
  border-color:   var(--bs-primary-border-subtle);
  color:          var(--bs-primary-text-emphasis);
  cursor:         default;
  pointer-events: none;
}

.switcher-chip:focus-visible {
  outline:        2px solid var(--comp-focus-outline);
  outline-offset: 2px;
  box-shadow:     none !important;
}

/* — Currency trigger button — */
.currency-trigger-wrap {
  position: relative;
}

.currency-trigger-btn {
  background:  transparent;
  border:      1px solid var(--bs-primary-border-subtle);
  display:     inline-flex;
  align-items: center;
  gap:         .3125rem;
  cursor:      pointer;
  color:       var(--bs-secondary-color);
}

.currency-trigger-btn i {
  color: var(--bs-tertiary-color);
}

/* — Currency hover submenu — */
.currency-submenu {
  position:           absolute;
  inset-inline-end:   0;
  inset-block-start:  calc(100% + .375rem);
  inset-block-end:    auto;
  width:              11rem;
  max-height:         12rem;
  overflow-y:         auto;
  background:         var(--app-vibrancy-thin-fallback);
  border:             1px solid var(--bs-border-color);
  border-radius:      var(--app-radius-card);
  box-shadow:         var(--app-shadow-float);
  padding:            .375rem;
  z-index:            9999;
  display:            flex;
  flex-direction:     column;
  gap:                .125rem;
  scrollbar-width:    thin;
  scrollbar-color:    var(--bs-tertiary-color) transparent;

  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
  transform:      translateY(-.25rem);
  transition:
    opacity    var(--app-dur-base) var(--app-ease-smooth),
    transform  var(--app-dur-base) var(--app-ease-smooth),
    visibility var(--app-dur-base);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .currency-submenu {
    background:              var(--app-vibrancy-thin-bg);
    backdrop-filter:         var(--app-vibrancy-thin-blur);
    -webkit-backdrop-filter: var(--app-vibrancy-thin-blur);
  }
}

.currency-submenu::-webkit-scrollbar {
  width: 3px;
}

.currency-submenu::-webkit-scrollbar-track {
  background: transparent;
}

.currency-submenu::-webkit-scrollbar-thumb {
  background: var(--bs-tertiary-color);
  border-radius: 2px;
}

/* يظهر عند hover */
.currency-trigger-wrap:hover .currency-submenu {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  transform:      translateY(0);
}

/* عناصر القائمة عمودية وتمتد بالكامل */
.currency-submenu .switcher-chip {
  width:           100%;
  justify-content: flex-start;
  height:          auto;
  padding-block:   .3125rem;
  border-radius:   var(--app-radius-sm, 8px);
}



/* ================================================================
   §6  SIDEBAR OVERLAY (mobile)
   ================================================================ */

#sidebar-overlay {
  display:                 none;
  position:                fixed;
  inset:                   0;
  background:              rgba(0, 0, 0, 0.32);
  backdrop-filter:         blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index:                 1029;
  animation:               fadeOverlay var(--app-dur-base) var(--app-ease-smooth);
}
#sidebar-overlay.active { display: block; }

@keyframes fadeOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ================================================================
   §7  ACCESSIBILITY & FOCUS RINGS
   ================================================================ */

.account-btn:focus-visible,
#sidebar-toggle:focus-visible,
.sidebar-balance-toggle:focus-visible,
#app-sidebar .nav-link:focus-visible,
.status-pill.pill-clickable:focus-visible,
.theme-toggle input:focus-visible + .theme-toggle-track,
.account-dropdown .dropdown-item:focus-visible,
.footer-link:focus-visible,
.currency-item:focus-visible,
.d3m-notif-btn:focus-visible {
  outline:        2px solid var(--comp-focus-outline);
  outline-offset: 3px;
  box-shadow:     none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
  .account-btn,
  .account-btn:hover { transform: none !important; }
}


/* ================================================================
   §8  RESPONSIVE SHELL
   ================================================================ */

@media (max-width: 991.98px) {
  #app-sidebar              { transform: translateX(-100%); }
  html[dir="rtl"] #app-sidebar { transform: translateX(100%); }
  #app-sidebar.sidebar-open { transform: translateX(0) !important; }
  #app-main                 { margin-inline-start: 0 !important; }
  #sidebar-toggle           { display: flex !important; }

  .status-pill    { font-size: var(--app-fs-xs); padding-inline: 8px; height: 26px; }
  .header-page-title { max-width: min(220px, calc(100vw - 160px)); }
  #app-footer .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767.98px) { #app-content { padding: 20px 16px; } }

@media (max-width: 575.98px) {
  .status-pill.pill-orders { display: none !important; }
}
@media (max-width: 767.98px) {
  #app-header {
    padding-inline: 10px;
    gap: 6px;
  }

  .header-start {
    flex: 0 0 auto;
    min-width: 0;
  }

  .header-page-title {
    display: none !important;
  }

  .header-end {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    gap: 6px;
  }

  #header-balance-pill {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: max-content;
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
  }

  #header-balance-amount {
    display: inline-block;
    width: auto;
    max-width: none;
    min-width: max-content;
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
  }

  #header-balance-pill .pill-icon {
    flex: 0 0 auto;
  }

  .account-btn {
    flex: 0 0 auto;
  }
}
@media (max-width: 380px) {
  #header-balance-pill .pill-icon {
    display: none;
  }

  #header-balance-pill {
    padding-inline: 8px;
  }
}


/* ================================================================
   §9  ACCOUNT LEVEL BADGE
   ================================================================ */

.account-level-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  height:         18px;
  padding-inline: 7px;
  border-radius:  var(--bs-border-radius-pill);
  font-size:      var(--app-fs-xs);
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background:     var(--bs-primary-bg-subtle);
  color:          var(--app-ink-accent);
  border:         1px solid var(--bs-primary-border-subtle);
  white-space:    nowrap;
}
.account-level-badge i { font-size: 10px; opacity: 0.85; }


/* ================================================================
   §10  NEW ORDER PAGE STYLES
   ================================================================ */

/* — Platform filter bar — */
.platform-filter-bar   { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.platform-filter-label {
  display:        flex;
  align-items:    center;
  gap:            4px;
  font-size:      var(--app-fs-xs);
  font-weight:    700;
  color:          var(--app-ink-tertiary);
  letter-spacing: var(--app-ls-wide);
  text-transform: uppercase;
  white-space:    nowrap;
  flex-shrink:    0;
}
.platform-filter-scroll { position: relative; flex: 1; min-width: 0; }
.platform-filter-scroll::after {
  content:        '';
  position:       absolute;
  inset-block:    0;
  width:          28px;
  pointer-events: none;
  z-index:        1;
}
html[dir="ltr"] .platform-filter-scroll::after {
  inset-inline-end: 0;
  background: linear-gradient(to left, var(--app-surface-1), transparent);
}
html[dir="rtl"] .platform-filter-scroll::after {
  inset-inline-start: 0;
  background: linear-gradient(to right, var(--app-surface-1), transparent);
}

.platform-filter-group {
  display:            flex;
  flex-wrap:          nowrap;
  gap:                2px;
  overflow-x:         auto;
  scrollbar-width:    none;
  -ms-overflow-style: none;
  padding-block:      1px;
}
.platform-filter-group::-webkit-scrollbar { display: none; }

.platform-btn {
  width:           36px;
  height:          36px;
  padding:         4px;
  border:          1px solid transparent;
  border-radius:   10px;
  background:      transparent;
  color:           var(--app-ink-tertiary);
  font-size:       0.875rem;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  cursor:          pointer;
  transition:
    background   var(--app-dur-fast) var(--app-ease-smooth),
    border-color var(--app-dur-fast) var(--app-ease-smooth),
    color        var(--app-dur-fast) var(--app-ease-smooth),
    transform    var(--app-dur-active) var(--app-ease-spring);
}
.platform-btn:hover:not(.active) {
  border-color: var(--app-border);
  background:   var(--app-surface-2);
  color:        var(--app-ink-primary);
}
.platform-btn.active {
  background:   var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
  color:        var(--app-ink-accent);
}
.platform-btn:active { transform: scale(0.88); }
.platform-btn:focus-visible {
  outline:        2px solid var(--comp-focus-outline);
  outline-offset: 3px;
  box-shadow:     none !important;
}

/* — Select2 overrides — */
.select2-container--default .select2-dropdown,
.select2-container--default .select2-results,
.select2-container--default .select2-results__options,
.select2-container--default .select2-results__option {
  background-color: var(--app-surface-1) !important;
  color:            var(--app-ink-primary) !important;
}
.select2-container--default .select2-results__option a,
.select2-container--default .select2-results__option span,
.select2-container--default .select2-results__option div { color: inherit !important; }

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.10) !important;
  color:            var(--app-ink-primary) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
  background-color: rgba(var(--bs-primary-rgb), 0.14) !important;
  color:            var(--app-ink-accent) !important;
  font-weight:      700;
}
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted,
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted,
.select2-container--default .select2-results__option[aria-selected="true"]:hover,
.select2-container--default .select2-results__option--selected:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.18) !important;
  color:            var(--app-ink-accent) !important;
}
.select2-container--default .select2-results__option[aria-disabled="true"],
.select2-results__message {
  background-color: var(--app-surface-1) !important;
  color:            var(--app-ink-tertiary) !important;
}
.select2-container .select2-selection__id,
.select2-container .select2-selection__id.badge {
  background-color: rgba(var(--bs-primary-rgb), 0.14) !important;
  color:            var(--app-ink-accent) !important;
  border:           1px solid rgba(var(--bs-primary-rgb), 0.28) !important;
  box-shadow:       none !important;
}
.select2-container--default .select2-results__option--highlighted .select2-selection__id,
.select2-container--default .select2-results__option:hover .select2-selection__id {
  background-color: rgba(var(--bs-primary-rgb), 0.22) !important;
  color:            var(--app-ink-accent) !important;
  border-color:     rgba(var(--bs-primary-rgb), 0.40) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-dropdown,
[data-bs-theme="dark"] .select2-container--default .select2-results,
[data-bs-theme="dark"] .select2-container--default .select2-results__options,
[data-bs-theme="dark"] .select2-container--default .select2-results__option {
  background-color: var(--app-surface-1) !important;
  color:            var(--app-ink-primary) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--default .select2-results__option:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.16) !important;
  color:            var(--app-ink-primary) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected {
  background-color: rgba(var(--bs-primary-rgb), 0.20) !important;
  color:            var(--app-ink-accent) !important;
}

/* — Service snapshot card — */
#service_name {
  font-size:      var(--app-fs-md);
  font-weight:    600;
  color:          var(--app-ink-primary);
  letter-spacing: -0.02em;
  line-height:    1.4;
}
#service_name.empty { color: var(--app-ink-tertiary); font-weight: 400; }

.svc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.svc-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  height:         20px;
  padding-inline: 7px;
  border-radius:  var(--bs-border-radius-pill);
  font-size:      var(--app-fs-xs);
  font-weight:    600;
  white-space:    nowrap;
  border:         1px solid transparent;
}
.svc-tag-speed   { background: var(--tag-speed-bg);   color: var(--tag-speed-ink);   border-color: var(--tag-speed-border);   }
.svc-tag-refill  { background: var(--tag-refill-bg);  color: var(--tag-refill-ink);  border-color: var(--tag-refill-border);  }
.svc-tag-quality { background: var(--tag-quality-bg); color: var(--tag-quality-ink); border-color: var(--tag-quality-border); }
.svc-tag-popular { background: var(--tag-popular-bg); color: var(--tag-popular-ink); border-color: var(--tag-popular-border); }
.svc-tag-stable  { background: var(--tag-stable-bg);  color: var(--tag-stable-ink);  border-color: var(--tag-stable-border);  }

.svc-divider { height: 1px; background: var(--app-border); margin: 0 -1.25rem; }

.svc-score-bar-track { height: 5px; border-radius: 99px; background: var(--app-surface-2); overflow: hidden; flex: 1; }
.svc-score-bar-fill  {
  height:        100%;
  border-radius: 99px;
  background:    linear-gradient(90deg, #2dc077, var(--bs-primary));
  transition:    width var(--app-dur-slow) var(--app-ease-out);
}

.svc-drop-dots { display: flex; gap: 3px; }
.svc-drop-dot  {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--app-surface-3);
  transition:    background var(--app-dur-fast);
}
.svc-drop-dot.on-low    { background: #2dc077; }
.svc-drop-dot.on-medium { background: #fbd61a; }
.svc-drop-dot.on-high   { background: #ff3c00; }

[data-bs-theme="dark"] .svc-drop-dot.on-low    { background: #30D158; }
[data-bs-theme="dark"] .svc-drop-dot.on-medium { background: #FFD60A; }
[data-bs-theme="dark"] .svc-drop-dot.on-high   { background: #FF453A; }

.svc-stat-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 8px; }
.svc-stat-label { font-size: var(--app-fs-xs); font-weight: 700; letter-spacing: var(--app-ls-wide); text-transform: uppercase; color: var(--app-ink-tertiary); margin-bottom: 3px; }
.svc-stat-value { font-size: var(--app-fs-sm); font-weight: 600; color: var(--app-ink-primary); }

.svc-warning {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  padding:       10px 12px;
  border-radius: 10px;
  background:    var(--svc-warning-bg);
  border:        1px solid var(--svc-warning-border);
  font-size:     var(--app-fs-xs);
  color:         var(--app-ink-secondary);
  line-height:   1.5;
}
.svc-warning i { color: #fbd61a; margin-top: 1px; flex-shrink: 0; }

.svc-desc       { font-size: var(--app-fs-sm); color: var(--app-ink-secondary); line-height: var(--app-lh-lg); }
.svc-desc.empty { color: var(--app-ink-tertiary); font-style: italic; }

/* — Order form helpers — */
.fields { margin-bottom: 1rem !important; }
.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .svc-score-bar-fill,
  .platform-btn { transition: none !important; }
  .platform-btn:active { transform: none !important; }
}

/* ================================================================
   AUTH.CSS — §10 PATCH — New Order page + Orders table refinements

   Add this block at the end of §10 in auth.css, or at the end of the
   stylesheet that loads after base.css.

   Purpose:
   - Fix low-contrast service stat labels in dark mode.
   - Restore service tag colors in dark mode.
   - Add horizontal fade behavior for the New Order platform selector.
   - Add progress-style status badges inside the Orders table.
   ================================================================ */


/* ================================================================
   1) Service stat label — dark mode contrast fix

   In dark mode, --app-ink-tertiary is too low-contrast on
   --app-surface-1 (#18181B). Using --app-ink-secondary improves
   readability while keeping the label visually secondary.

   Note:
   This selector only applies if the HTML element has .svc-stat-label.
   If your current markup uses only text-body-secondary, add
   .svc-stat-label to those stat-label elements.
   ================================================================ */

[data-bs-theme="dark"] .svc-stat-label {
  color: var(--app-ink-secondary);
}


/* ================================================================
   2) Service tags — dark mode color normalization

   The tag color tokens are already defined in base.css.
   This patch explicitly reapplies those tokens in dark mode so service
   tags remain visible and consistent on dark surfaces.
   ================================================================ */

[data-bs-theme="dark"] .svc-tag-speed {
  background:   var(--tag-speed-bg);
  border-color: var(--tag-speed-border);
  color:        var(--tag-speed-ink);
}

[data-bs-theme="dark"] .svc-tag-refill {
  background:   var(--tag-refill-bg);
  border-color: var(--tag-refill-border);
  color:        var(--tag-refill-ink);
}

[data-bs-theme="dark"] .svc-tag-popular {
  background:   var(--tag-popular-bg);
  border-color: var(--tag-popular-border);
  color:        var(--tag-popular-ink);
}

[data-bs-theme="dark"] .svc-tag-stable {
  background:   var(--tag-stable-bg);
  border-color: var(--tag-stable-border);
  color:        var(--tag-stable-ink);
}


/* ================================================================
   3) New Order platform horizontal scroll

   Used by .neworder-platform-scroll around the platform filter buttons.

   Behavior:
   - Allows horizontal scrolling when buttons overflow.
   - Hides the native scrollbar.
   - Adds a soft fade edge to indicate more content is available.
   - Reverses the fade direction for RTL layouts.
   ================================================================ */

.neworder-platform-scroll {
  position:           relative;
  overflow-x:         auto;
  overflow-y:         hidden;
  scrollbar-width:    none;
  -ms-overflow-style: none;
  padding-block:      1px;

  /* Fade edge for LTR layouts */
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 32px);
          mask-image: linear-gradient(to left, transparent 0%, black 32px);
}

.neworder-platform-scroll::-webkit-scrollbar {
  display: none;
}

html[dir="rtl"] .neworder-platform-scroll {
  /* Fade edge for RTL layouts */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 32px);
          mask-image: linear-gradient(to right, transparent 0%, black 32px);
}


/* ================================================================
   4) Orders table progress status badge

   Used with:
   .badge.rounded-pill.badge-status-inprogress.badge-progress-status

   Design intent:
   - Keep the badge compact.
   - Preserve the existing table badge spacing from base.css.
   - Render the progress fill behind the text.
   - Prevent the progress text from expanding the badge width too much.

   Important:
   max-inline-size controls the maximum visual width.
   Increase/decrease it if the badge needs to match your previous width
   more closely.
   ================================================================ */

.table-app td .badge-progress-status {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  inline-size: auto;
  max-inline-size: 105px;
}


/* Progress fill layer behind the badge text */
.table-app td .badge-progress-status .progress-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;

  width: 0;
  height: 100%;

  border-radius: inherit;
  background: currentColor;
  opacity: 0.16;

  z-index: -1;
  transition: width var(--app-dur-slow) var(--app-ease-out);
}


/* Text layer above the progress fill */
.table-app td .badge-progress-status .progress-text {
  position: relative;
  z-index: 1;

  display: block;
  min-inline-size: 0;
  max-inline-size: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Numeric percentage styling */
.table-app td .badge-progress-status .progress-percentage {
  font-family: var(--app-font-mono);
  font-weight: 700;
}

/* ================================================================
   GUEST.CSS — v6.2
   SCOPE: Guest / public shell ONLY
   Loads after base.css. Not loaded for authenticated pages.

   v6.2 changes (over v6.1):
   ─────────────────────────────────────────────────────────────────
   • Sync with base.css v6.2 (updated primary color tokens, radii).
   • No functional changes to guest shell behaviour.
   • Dark mode vibrancy contrast fix (v6.1) retained.
   ================================================================

   SCOPE RULE:
   ┌─────────────────────────────────────────────────────────────┐
   │  guest.css hosts only:                                       │
   │  - #guest-nav styles                                         │
   │  - #guest-footer styles                                      │
   │  - #guest-content padding                                    │
   └─────────────────────────────────────────────────────────────┘
   ================================================================ */


/* ================================================================
   §1  GLASS LAYER
   ================================================================ */

#guest-nav,
#guest-footer { background: var(--app-vibrancy-regular-fallback); }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  #guest-nav,
  #guest-footer {
    background:              var(--app-vibrancy-regular-bg);
    backdrop-filter:         var(--app-vibrancy-regular-blur);
    -webkit-backdrop-filter: var(--app-vibrancy-regular-blur);
  }
}


/* ================================================================
   §2  GUEST NAV
   ================================================================ */

#guest-nav {
  position:         sticky;
  top:              0;
  z-index:          1020;
  min-height:       52px;
  border-block-end: 1px solid var(--app-border);
}

#guest-nav .navbar-brand {
  font-weight:    700;
  font-size:      var(--app-fs-lg);
  letter-spacing: -0.02em;
  color:          var(--app-ink-primary);
}

#guest-nav .nav-link {
  font-size:      var(--app-fs-md);
  font-weight:    500;
  letter-spacing: var(--app-ls-normal);
  color:          var(--nav-link-color);
  padding-inline: 0.7rem;
  padding-block:  0.35rem;
  border-radius:  8px;
  transition:     color var(--app-dur-fast), background-color var(--app-dur-fast);
}
#guest-nav .nav-link:hover {
  color:      var(--nav-link-color-hover);
  background: var(--nav-link-bg-hover);
}
#guest-nav .nav-link.active {
  color:       var(--nav-link-color-active);
  font-weight: 600;
}

/* — Navbar toggler — */
/* — Navbar toggler — */
#guest-nav .navbar-toggler {
  --bs-navbar-toggler-border-color: transparent;
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
  --bs-navbar-toggler-focus-width: 0;

  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--bs-border-radius);
  transition: background-color var(--app-dur-fast);
}

#guest-nav .navbar-toggler:hover {
  background-color: var(--app-hover-light);
}

[data-bs-theme="dark"] #guest-nav .navbar-toggler:hover {
  background-color: var(--app-hover-dark);
}

#guest-nav .navbar-toggler:focus,
#guest-nav .navbar-toggler:active {
  box-shadow: none;
}

/* Compact keyboard focus — avoids the oversized Bootstrap focus ring */
#guest-nav .navbar-toggler:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--comp-focus-outline) !important;
}

/* Remove Bootstrap default hamburger image */
#guest-nav .navbar-toggler-icon {
  background-image: none;
}

/* — Animated two-line hamburger — */
#guest-nav .navbar-toggler .toggler-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
  margin: auto;
}

#guest-nav .navbar-toggler .toggler-icon::before,
#guest-nav .navbar-toggler .toggler-icon::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--app-ink-secondary);
  transition:
    top var(--app-dur-base) var(--app-ease-smooth),
    transform var(--app-dur-base) var(--app-ease-smooth),
    background-color var(--app-dur-fast) var(--app-ease-smooth);
}

#guest-nav .navbar-toggler .toggler-icon::before {
  top: 3px;
}

#guest-nav .navbar-toggler .toggler-icon::after {
  top: 10px;
}

/* Hide the old middle line if it still exists in the HTML */
#guest-nav .navbar-toggler .toggler-icon .toggler-line {
  display: none;
}

/* Open state — morph into X */
#guest-nav .navbar-toggler[aria-expanded="true"] .toggler-icon::before,
#guest-nav .navbar-toggler[aria-expanded="true"] .toggler-icon::after {
  top: 7px;
  background: var(--app-ink-primary);
}

#guest-nav .navbar-toggler[aria-expanded="true"] .toggler-icon::before {
  transform: rotate(45deg);
}

#guest-nav .navbar-toggler[aria-expanded="true"] .toggler-icon::after {
  transform: rotate(-45deg);
}


/* ================================================================
   §3  GUEST FOOTER
   ================================================================ */

#guest-footer {
  border-block-start: 1px solid var(--app-border);
  padding-block:      22px;
}

.gf-brand-name {
  font-size:      var(--app-fs-sm);
  font-weight:    700;
  color:          var(--app-ink-primary);
  letter-spacing: -0.02em;
}
.gf-brand       { color: var(--app-ink-primary); text-decoration: none; }
.gf-brand:hover { color: var(--app-ink-primary); }

.gf-link {
  font-size:       var(--app-fs-xs);
  font-weight:     500;
  color:           var(--app-ink-tertiary);
  text-decoration: none;
  transition:      color var(--app-dur-fast);
}
.gf-link:hover { color: var(--app-ink-accent); }

.gf-copy { font-size: var(--app-fs-xs); color: var(--app-ink-tertiary); white-space: nowrap; }

/* Dark mode vibrancy contrast — P0 fix from v6.1 */
[data-bs-theme="dark"] .gf-brand-name { color: #FFFFFF; }
[data-bs-theme="dark"] .gf-copy       { color: #C7C7CC; }


/* ================================================================
   §4  GUEST CONTENT
   ================================================================ */

#guest-content { scroll-behavior: smooth; }

#guest-content > .container,
#guest-content > .container-fluid {
  padding-block-start: 48px;
  padding-block-end:   48px;
}


/* ================================================================
   §5  ACCESSIBILITY & FOCUS RINGS
   ================================================================ */

#guest-nav .nav-link:focus-visible,
#guest-nav .navbar-toggler:focus-visible,
.gf-link:focus-visible {
  outline:        2px solid var(--comp-focus-outline);
  outline-offset: 3px;
  box-shadow:     none !important;
}
.gf-brand:focus-visible {
  outline:        2px solid var(--comp-focus-outline);
  outline-offset: 3px;
  border-radius:  4px;
}


/* ================================================================
   §6  RESPONSIVE
   ================================================================ */

@media (max-width: 991.98px) {
  #guest-nav #guest-navbar {
    background:         var(--app-vibrancy-regular-fallback);
    border-block-start: 1px solid var(--app-border);
    margin-block-start: 4px;
    padding-block:      8px 12px;
  }
  #guest-nav .navbar-nav { gap: 2px; }
  #guest-nav .nav-link {
    padding-inline: 12px;
    padding-block:  9px;
    border-radius:  8px;
    margin-inline:  4px;
  }
  #guest-footer .gf-inner { flex-direction: column; align-items: flex-start; }
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  @media (max-width: 991.98px) {
    #guest-nav #guest-navbar {
      background:              var(--app-vibrancy-regular-bg);
      backdrop-filter:         var(--app-vibrancy-regular-blur);
      -webkit-backdrop-filter: var(--app-vibrancy-regular-blur);
    }
  }
}

@media (max-width: 767.98px) {
  #guest-content > .container,
  #guest-content > .container-fluid {
    padding-block-start: 28px;
    padding-block-end:   28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #guest-nav .navbar-toggler .toggler-icon::before,
  #guest-nav .navbar-toggler .toggler-icon .toggler-line,
  #guest-nav .navbar-toggler .toggler-icon::after,
  .gf-link,
  #guest-nav .nav-link { transition: none !important; }
  #guest-content { scroll-behavior: auto; }
}

/* Footer repaint fix */
#app-footer {
  background: var(--app-surface-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}