/* =========================================================
   eScratch - app.css
   App-level polish (Bootstrap token-driven)
   ========================================================= */

/* =========================================================
   Base / document
   ========================================================= */

html,
body {
  height: 100%;
}

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

footer {
  background: transparent;
}

/* =========================================================
   Tokens / globals
   ========================================================= */

:root {
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.35);

  /* Button texture (default/light) */
  --es-btn-texture: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0) 55%,
    rgba(0, 0, 0, 0.10)
  );
  --es-btn-inset: inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  --es-btn-drop: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.18);

  /* Reusable “primary tint” knobs (used by tables/accordion/alerts) */
  --es-primary-tint-weak: 0.18;
  --es-primary-tint-med: 0.22;
  --es-primary-border-weak: 0.40;
  --es-primary-border-strong: 0.55;
}

[data-bs-theme="dark"] {
  --es-btn-texture: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.02) 55%,
    rgba(0, 0, 0, 0.35)
  );
  --es-btn-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45);
  --es-btn-drop: 0 0.3rem 0.9rem rgba(0, 0, 0, 0.35);

  /* Stronger tints in dark mode */
  --es-primary-tint-weak: 0.22;
  --es-primary-tint-med: 0.25;
  --es-primary-border-weak: 0.55;
  --es-primary-border-strong: 0.60;
}

/* =========================================================
   Form controls (app-wide)
   ========================================================= */

.form-control,
.form-select,
textarea.form-control {
  border-width: var(--bs-border-width);
  border-color: var(--bs-border-color);
  border-radius: 0.5rem;

  /* Kill any lingering bevel/shadow */
  box-shadow: none !important;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Unified focus state (orange theme) */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 var(--bs-focus-ring-width)
    rgba(var(--bs-primary-rgb), 0.15) !important;
}

.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
}

/* Preserve validation colors */
.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: var(--bs-success);
  box-shadow: 0 0 0 var(--bs-focus-ring-width)
    rgba(var(--bs-success-rgb), 0.25) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--bs-danger);
  box-shadow: 0 0 0 var(--bs-focus-ring-width)
    rgba(var(--bs-danger-rgb), 0.25) !important;
}

/* =========================================================
   Buttons: filled texture + no border
   ========================================================= */

.btn:not([class*="btn-outline-"]):not(.btn-link) {
  border: 0;
  background-image: var(--es-btn-texture);
  box-shadow: var(--es-btn-inset), var(--es-btn-drop);
  transform: translateY(0);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.btn:not([class*="btn-outline-"]):not(.btn-link):hover {
  transform: translateY(-1px);
}

.btn:not([class*="btn-outline-"]):not(.btn-link):active,
.btn:not([class*="btn-outline-"]):not(.btn-link).active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
  filter: saturate(1.02);
}

/* Give outline buttons the same “filled texture feel” when they become filled */
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
  background-image: var(--es-btn-texture);
  box-shadow: var(--es-btn-inset), var(--es-btn-drop);
}

/* =========================================================
   Button palettes + outline overrides (token-driven)
   ========================================================= */

/* Common outline behavior (primary + secondary) */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: transparent;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: transparent;
}

/* “Base” palette variables for filled buttons */
.btn-primary   { --es-btn-base: var(--bs-primary);   --es-btn-text: #fff; }
.btn-secondary { --es-btn-base: var(--bs-secondary); --es-btn-text: #fff; }
.btn-success   { --es-btn-base: var(--bs-success);   --es-btn-text: #fff; }
.btn-info      { --es-btn-base: var(--bs-info);      --es-btn-text: #fff; }
.btn-danger    { --es-btn-base: var(--bs-danger);    --es-btn-text: #fff; }
.btn-dark      { --es-btn-base: var(--bs-dark);      --es-btn-text: #fff; }
.btn-warning   { --es-btn-base: var(--bs-warning);   --es-btn-text: #000; }
.btn-light     { --es-btn-base: var(--bs-light);     --es-btn-text: #000; }

@supports (color: color-mix(in srgb, black, white)) {
  /* Apply token-driven hover/active via one rule */
  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-info,
  .btn-warning,
  .btn-danger,
  .btn-light,
  .btn-dark {
    --bs-btn-color: var(--es-btn-text);
    --bs-btn-bg: var(--es-btn-base);
    --bs-btn-hover-color: var(--es-btn-text);
    --bs-btn-active-color: var(--es-btn-text);
  }

  /* Default hover/active darken */
  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-info,
  .btn-danger,
  .btn-dark {
    --bs-btn-hover-bg: color-mix(in srgb, var(--es-btn-base) 85%, #000 15%);
    --bs-btn-active-bg: color-mix(in srgb, var(--es-btn-base) 78%, #000 22%);
  }

  /* Warning/light use different “mix” behavior for legibility */
  .btn-warning {
    --bs-btn-hover-bg: color-mix(in srgb, var(--es-btn-base) 88%, #fff 12%);
    --bs-btn-active-bg: color-mix(in srgb, var(--es-btn-base) 78%, #000 22%);
  }

  .btn-light {
    --bs-btn-hover-bg: color-mix(in srgb, var(--es-btn-base) 92%, #000 8%);
    --bs-btn-active-bg: color-mix(in srgb, var(--es-btn-base) 85%, #000 15%);
  }

  /* Alert: primary tint */
  .alert-primary {
    --bs-alert-bg: color-mix(in srgb, var(--bs-primary) 18%, var(--bs-body-bg));
    --bs-alert-border-color: color-mix(
      in srgb,
      var(--bs-primary) 55%,
      var(--bs-body-bg)
    );
    --bs-alert-color: color-mix(
      in srgb,
      var(--bs-primary) 35%,
      var(--bs-emphasis-color)
    );
  }
}

@supports not (color: color-mix(in srgb, black, white)) {
  /* Fallback: just ensure colors are correct */
  .btn-primary,
  .btn-secondary,
  .btn-success,
  .btn-info,
  .btn-warning,
  .btn-danger,
  .btn-light,
  .btn-dark {
    --bs-btn-bg: var(--es-btn-base);
    --bs-btn-color: var(--es-btn-text);
  }

  .alert-primary {
    --bs-alert-bg: rgba(var(--bs-primary-rgb), 0.18);
    --bs-alert-border-color: rgba(var(--bs-primary-rgb), 0.55);
    --bs-alert-color: var(--bs-body-color);
  }
}

/* =========================================================
   Disabled buttons: keep brand colors (FILLED + OUTLINE)
   ========================================================= */

/* Shared disabled reset */
.btn:disabled,
.btn.disabled,
.btn[disabled] {
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

@supports (color: color-mix(in srgb, black, white)) {
  /* Filled: primary/secondary */
  .btn.btn-primary:disabled,
  .btn.btn-primary.disabled,
  .btn.btn-primary[disabled] {
    background-color: color-mix(in srgb, var(--bs-primary) 55%, #fff 45%) !important;
    color: rgba(0, 0, 0, 0.60) !important;
    border-color: transparent !important;
  }

  .btn.btn-secondary:disabled,
  .btn.btn-secondary.disabled,
  .btn.btn-secondary[disabled] {
    background-color: color-mix(in srgb, var(--bs-secondary) 55%, #fff 45%) !important;
    color: rgba(0, 0, 0, 0.60) !important;
    border-color: transparent !important;
  }

  /* Outline: primary/secondary */
  .btn.btn-outline-primary:disabled,
  .btn.btn-outline-primary.disabled,
  .btn.btn-outline-primary[disabled] {
    color: color-mix(in srgb, var(--bs-primary) 55%, #fff 45%) !important;
    border-color: color-mix(in srgb, var(--bs-primary) 55%, #fff 45%) !important;
    background-color: transparent !important;
  }

  .btn.btn-outline-secondary:disabled,
  .btn.btn-outline-secondary.disabled,
  .btn.btn-outline-secondary[disabled] {
    color: color-mix(in srgb, var(--bs-secondary) 55%, #fff 45%) !important;
    border-color: color-mix(in srgb, var(--bs-secondary) 55%, #fff 45%) !important;
    background-color: transparent !important;
  }
}

@supports not (color: color-mix(in srgb, black, white)) {
  /* Filled: primary/secondary */
  .btn.btn-primary:disabled,
  .btn.btn-primary.disabled,
  .btn.btn-primary[disabled] {
    background-color: rgba(var(--bs-primary-rgb), 0.45) !important;
    color: rgba(0, 0, 0, 0.60) !important;
    border-color: transparent !important;
  }

  .btn.btn-secondary:disabled,
  .btn.btn-secondary.disabled,
  .btn.btn-secondary[disabled] {
    background-color: rgba(var(--bs-secondary-rgb), 0.45) !important;
    color: rgba(0, 0, 0, 0.60) !important;
    border-color: transparent !important;
  }

  /* Outline: primary/secondary */
  .btn.btn-outline-primary:disabled,
  .btn.btn-outline-primary.disabled,
  .btn.btn-outline-primary[disabled] {
    color: rgba(var(--bs-primary-rgb), 0.45) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.45) !important;
    background-color: transparent !important;
  }

  .btn.btn-outline-secondary:disabled,
  .btn.btn-outline-secondary.disabled,
  .btn.btn-outline-secondary[disabled] {
    color: rgba(var(--bs-secondary-rgb), 0.45) !important;
    border-color: rgba(var(--bs-secondary-rgb), 0.45) !important;
    background-color: transparent !important;
  }
}

/* =========================================================
   Checkboxes / radios (PRIMARY orange)
   ========================================================= */

.form-check-input {
  border-color: var(--bs-border-color);
  background-color: transparent;
  box-shadow: none !important;
}

.form-check-input:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.65);
  box-shadow: 0 0 0 var(--bs-focus-ring-width)
    rgba(var(--bs-primary-rgb), 0.25) !important;
}

.form-check-input[type="checkbox"]:checked,
.form-check-input[type="radio"]:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input[type="checkbox"]:checked:focus,
.form-check-input[type="radio"]:checked:focus {
  box-shadow: 0 0 0 var(--bs-focus-ring-width)
    rgba(var(--bs-primary-rgb), 0.35);
}

@supports (color: color-mix(in srgb, black, white)) {
  [data-bs-theme="dark"] .form-check-input:not(:checked) {
    border-color: color-mix(in srgb, var(--bs-border-color) 65%, #fff 35%);
  }
}

/* =========================================================
   Switch: primary track + visible thumb (SVG)
   ========================================================= */

.form-switch .form-check-input:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.65);
  box-shadow: 0 0 0 var(--bs-focus-ring-width)
    rgba(var(--bs-primary-rgb), 0.25);
}

.form-switch .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:not(:checked):focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e17237'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* =========================================================
   Progress bar: PRIMARY orange + animated stripes
   ========================================================= */

.progress-bar {
  background-color: var(--bs-primary);
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.20) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.20) 50%,
    rgba(255, 255, 255, 0.20) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: es-progress-stripes 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    animation: none;
  }
}

@keyframes es-progress-stripes {
  from {
    background-position-x: 1rem;
  }
  to {
    background-position-x: 0;
  }
}

/* =========================================================
   Accordion: neutral + subtle active, chevrons via SVG vars
   ========================================================= */

.accordion {
  --bs-accordion-active-color: var(--bs-emphasis-color);

  /* Use mix when available; fallback below keeps behavior */
  --bs-accordion-btn-focus-border-color: rgba(var(--bs-primary-rgb), 0.65);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width)
    rgba(var(--bs-primary-rgb), 0.25);
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--bs-body-color);

  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='rgba(222,226,230,0.9)' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='rgba(225,114,55,0.95)' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-bs-theme="light"] .accordion {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='rgba(68,68,68,0.85)' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button {
  color: var(--bs-body-color);
  background-color: transparent;
}

.accordion-button:focus {
  border-color: var(--bs-accordion-btn-focus-border-color);
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

@supports (color: color-mix(in srgb, black, white)) {
  .accordion {
    --bs-accordion-active-bg: color-mix(
      in srgb,
      var(--bs-primary) 10%,
      var(--bs-body-bg)
    );
  }

  [data-bs-theme="dark"] .accordion {
    --bs-accordion-active-bg: color-mix(
      in srgb,
      var(--bs-primary) 12%,
      var(--bs-body-bg)
    );
  }
}

.accordion-button:not(.collapsed) {
  color: var(--bs-emphasis-color);
  background-color: var(--bs-accordion-active-bg);
  border-color: rgba(var(--bs-primary-rgb), 0.55);
  box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  border-color: rgba(var(--bs-primary-rgb), var(--es-primary-border-strong));
}

.accordion-button::after {
  background-image: var(--bs-accordion-btn-icon) !important;
}

.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-active-icon) !important;
}

/* =========================================================
   Tables: header background uses light PRIMARY tint
   ========================================================= */

@supports (color: color-mix(in srgb, black, white)) {
  .table thead th {
    background-color: color-mix(
      in srgb,
      var(--bs-primary) calc(var(--es-primary-tint-weak) * 100%),
      var(--bs-body-bg)
    );
    color: var(--bs-emphasis-color);
    border-bottom-color: color-mix(
      in srgb,
      var(--bs-primary) calc(var(--es-primary-border-weak) * 100%),
      var(--bs-border-color)
    );
  }

  [data-bs-theme="dark"] .table thead th {
    background-color: color-mix(
      in srgb,
      var(--bs-primary) calc(var(--es-primary-tint-med) * 100%),
      var(--bs-body-bg)
    );
    border-bottom-color: color-mix(
      in srgb,
      var(--bs-primary) calc(var(--es-primary-border-strong) * 100%),
      var(--bs-border-color)
    );
  }
}

@supports not (color: color-mix(in srgb, black, white)) {
  .table thead th {
    background-color: rgba(var(--bs-primary-rgb), var(--es-primary-tint-weak));
    color: var(--bs-emphasis-color);
    border-bottom-color: rgba(
      var(--bs-primary-rgb),
      var(--es-primary-border-weak)
    );
  }

  [data-bs-theme="dark"] .table thead th {
    background-color: rgba(var(--bs-primary-rgb), var(--es-primary-tint-med));
    border-bottom-color: rgba(
      var(--bs-primary-rgb),
      var(--es-primary-border-strong)
    );
  }
}

/* =========================================================
   Cards: refined borders + soft elevation (token-based)
   ========================================================= */

.card {
  border-radius: 0.75rem;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.card.shadow,
.card.shadow-sm,
.card.shadow-lg {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
}

[data-bs-theme="dark"] .card {
  background-color: var(--bs-tertiary-bg);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.card.es-card {
  border-color: rgba(var(--bs-primary-rgb), 0.25);
}

/* =========================================================
   Password input with integrated toggle (single outline)
   ========================================================= */

.input-group.password-group {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-body-bg);
  transition: border-color 0.15s ease;
}

.input-group.password-group > .form-control,
.input-group.password-group > .es-password-toggle {
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  background: transparent;
}

.input-group.password-group > .form-control {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.input-group.password-group > .es-password-toggle {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  position: relative;
}

.input-group.password-group > .es-password-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--bs-border-color);
}

.input-group.password-group:focus-within {
  border-color: var(--bs-primary);
}

.input-group.password-group:focus-within > .es-password-toggle::before {
  background: var(--bs-primary);
}

.es-password-toggle:hover {
  background: var(--bs-secondary-bg);
}

.es-password-toggle .bi {
  font-size: 1.05rem;
  line-height: 1;
}

/* Optional hook */
.error-card {
  backdrop-filter: blur(2px);
}

/* =========================================================
   Footer styling + brand-hover social icons
   ========================================================= */

.site-footer {
  background: var(--bs-secondary);
  color: #fff;
}

.site-footer a {
  color: #fff;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer .small {
  opacity: 0.95;
}

.site-footer .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.site-footer .social-link:hover {
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}

.site-footer .social-icon {
  width: 28px;
  height: 28px;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter 0.15s ease;
}

/* Brand hover colors (icon filters) */
.site-footer .social-link[aria-label="Facebook"]:hover .social-icon {
  filter: invert(29%) sepia(91%) saturate(746%) hue-rotate(187deg)
    brightness(92%) contrast(92%);
}

.site-footer .social-link[aria-label="TikTok"]:hover .social-icon {
  filter: invert(88%) sepia(13%) saturate(7495%) hue-rotate(315deg)
    brightness(95%) contrast(105%);
}

.site-footer .social-link[aria-label="Instagram"]:hover .social-icon {
  filter: invert(33%) sepia(95%) saturate(1922%) hue-rotate(328deg)
    brightness(97%) contrast(94%);
}

.site-footer .social-link[aria-label="YouTube"]:hover .social-icon {
  filter: invert(16%) sepia(87%) saturate(6067%) hue-rotate(356deg)
    brightness(93%) contrast(110%);
}

/* Mobile footer: force one-row links w/ separators */
@media (max-width: 575.98px) {
  .site-footer .d-flex.flex-column.flex-sm-row.align-items-center.gap-2.gap-sm-3 {
    flex-direction: row !important;
    justify-content: center;
    gap: 1.25rem;
  }

  .site-footer
    .d-flex.flex-column.flex-sm-row.align-items-center.gap-2.gap-sm-3
    a + a::before {
    content: "|";
    display: inline-block;
    margin: 0 0.75rem;
    opacity: 0.7;
  }

  .site-footer a {
    font-size: 0.95rem;
  }
}

/* =========================================================
   OTP boxes
   ========================================================= */

.es-otp-row {
  flex-wrap: nowrap;
}

.es-otp-digit {
  width: 44px;
  height: 48px;
  font-size: 1.25rem;
  padding: 0;
}

@media (max-width: 420px) {
  .es-otp-digit {
    width: 40px;
    height: 46px;
    font-size: 1.15rem;
  }
}

/* =========================================================
   YouTube fallback (shared)
   ========================================================= */

.es-yt-fallback {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.es-yt-fallback-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transform: scale(1.02);
}

.es-yt-fallback-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.65));
  color: #fff;
}

.es-yt-fallback-title {
  font-weight: 700;
  font-size: 1rem;
}

.es-yt-fallback-sub {
  font-size: 0.875rem;
  opacity: 0.9;
}


/* =========================================================
   Wallet: balance flash on update (redirect after shop/cashout)
   ========================================================= */

@keyframes esWalletFlash {
  0%   { background-color: rgba(var(--bs-success-rgb), 0.18); }
  100% { background-color: transparent; }
}

.es-wallet-flash {
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  animation: esWalletFlash 1.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .es-wallet-flash {
    animation: none;
  }
}


/* =========================================================
   Global transaction loader (API + opt-in forms)
   ========================================================= */

#es-global-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1090;
}

#es-global-loader .es-loader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

#es-global-loader .spinner-border {
  width: 3rem;
  height: 3rem;
}

/* Toasts: bottom-centered host (keeps clear of top navbar) */
.es-toast-host {
  /* keep above footer/maintenance bar */
  margin-bottom: 4.5rem;
  width: min(560px, calc(100vw - 2rem));
}

/* Navigation loading state (sidebar/menu click) */
body.es-nav-loading {
  cursor: progress;
}


.es-toast-host .toast {
  width: 100%;
}