/* Shared theme foundation for the public end-user top-up pages. */
:root,
[data-agent-theme="violet"] {
  --accent: #696cff;
  --accent-2: #575ae0;
  --bg-1: #f6f7ff;
  --bg-2: #eef0ff;
  --glass: #ffffffcc;
  --stroke: #dadeff;
  --text: #232447;
  --muted: #7a7db1;
  --ok: #16c47f;
  --danger: #ef476f;
  --sheen: rgba(255, 255, 255, .65);
  --glow: rgba(105, 108, 255, .45);
  --theme-font: Inter, "Segoe UI", Arial, sans-serif;
  --theme-background: radial-gradient(1200px 600px at -10% -10%, #e7e8ff 0%, transparent 60%), radial-gradient(900px 500px at 110% 10%, #edefff 0%, transparent 55%), linear-gradient(180deg, var(--bg-1), var(--bg-2));
}

[data-agent-theme="midnight"] {
  --accent: #f4c430; --accent-2: #d4a017; --bg-1: #0d0d1a; --bg-2: #12122a;
  --glass: rgba(255,255,255,.06); --stroke: rgba(244,196,48,.25); --text: #f0f0ff;
  --muted: #8888aa; --ok: #22c55e; --danger: #ef4444; --sheen: rgba(244,196,48,.45); --glow: rgba(244,196,48,.55);
  --theme-font: "Segoe UI", Arial, sans-serif;
  --theme-background: radial-gradient(800px 500px at 0% 0%, #1e0a3c 0%, transparent 60%), radial-gradient(600px 400px at 100% 100%, #1a0a00 0%, transparent 55%), linear-gradient(180deg, #0d0d1a, #12122a);
}

[data-agent-theme="bigo"] {
  --accent: #c026d3; --accent-2: #a21caf; --bg-1: #0f0520; --bg-2: #180535;
  --glass: rgba(192,38,211,.10); --stroke: rgba(192,38,211,.32); --text: #f5f0ff;
  --muted: #c4b5fd; --ok: #22c55e; --danger: #f43f5e; --sheen: rgba(232,121,249,.45); --glow: rgba(192,38,211,.60);
  --theme-font: "Segoe UI", Arial, sans-serif;
  --theme-background: radial-gradient(ellipse 900px 600px at 15% 0%, #3b0764 0%, transparent 55%), radial-gradient(ellipse 700px 500px at 85% 100%, #4c0519 0%, transparent 55%), linear-gradient(160deg, #0f0520, #180535 50%, #0f0520);
}

[data-agent-theme="sakura"] {
  --accent: #f43f8a; --accent-2: #db2777; --bg-1: #fff5f9; --bg-2: #fef0f5;
  --glass: rgba(255,255,255,.92); --stroke: #fac8dc; --text: #3d1438;
  --muted: #be6a97; --ok: #10b981; --danger: #ef4444; --sheen: rgba(244,63,138,.35); --glow: rgba(244,63,138,.45);
  --theme-font: "Segoe UI", Arial, sans-serif;
  --theme-background: linear-gradient(140deg, #fff5f9 0%, #fdf2fc 55%, #f0ebff 100%);
}

[data-agent-theme="diamond"] {
  --accent: #7dd3fc; --accent-2: #38bdf8; --bg-1: #050914; --bg-2: #0b1424;
  --glass: rgba(125,211,252,.07); --stroke: rgba(125,211,252,.28); --text: #eaf6ff;
  --muted: #7c93ad; --ok: #34d399; --danger: #fb7185; --sheen: rgba(255,255,255,.7); --glow: rgba(56,189,248,.55);
  --theme-font: "Segoe UI", Arial, sans-serif;
  --theme-background: radial-gradient(ellipse 1000px 650px at 10% -5%, #0e2a45 0%, transparent 55%), radial-gradient(ellipse 800px 550px at 105% 105%, #0a1b33 0%, transparent 55%), linear-gradient(165deg, #050914, #0b1424 55%, #050914);
}

[data-agent-theme="midautumn"] {
  --accent: #f6ad37; --accent-2: #e08e1f; --bg-1: #1a1033; --bg-2: #120b26;
  --glass: rgba(246,173,55,.08); --stroke: rgba(246,173,55,.28); --text: #fdf3e0;
  --muted: #b8a9d9; --ok: #22c55e; --danger: #f87171; --sheen: rgba(255,224,153,.6); --glow: rgba(246,173,55,.5);
  --theme-font: "Segoe UI", Arial, sans-serif;
  --theme-background: radial-gradient(circle 420px at 82% 12%, rgba(246,173,55,.32) 0%, transparent 62%), radial-gradient(ellipse 900px 600px at 8% 100%, #241a45 0%, transparent 55%), linear-gradient(160deg, #1a1033, #120b26 55%, #1a1033);
}

[data-agent-theme="christmas"] {
  --accent: #e5395a; --accent-2: #b71c3c; --bg-1: #0b1f16; --bg-2: #071410;
  --glass: rgba(229,57,90,.08); --stroke: rgba(229,57,90,.26); --text: #fdf3f0;
  --muted: #9fc2ae; --ok: #4ade80; --danger: #f87171; --sheen: rgba(255,255,255,.65); --glow: rgba(229,57,90,.5);
  --theme-font: "Segoe UI", Arial, sans-serif;
  --theme-background: radial-gradient(ellipse 600px 400px at 12% 8%, rgba(229,57,90,.18) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at 90% 18%, rgba(255,213,79,.12) 0%, transparent 60%), radial-gradient(ellipse 700px 500px at 50% 112%, rgba(27,94,63,.55) 0%, transparent 65%), linear-gradient(160deg, #0b1f16, #071410 55%, #0b1f16);
}

[data-agent-theme="tet"] {
  --accent: #e0331f; --accent-2: #ffb300; --bg-1: #fff6e6; --bg-2: #ffe9c7;
  --glass: rgba(255,247,230,.88); --stroke: rgba(224,51,31,.22); --text: #5c1a12;
  --muted: #a9765f; --ok: #2e7d32; --danger: #c62828; --sheen: rgba(255,215,120,.65); --glow: rgba(224,51,31,.40);
  --theme-font: "Segoe UI", Arial, sans-serif;
  --theme-background: linear-gradient(140deg, #fff6e6 0%, #ffe9c7 55%, #ffdca0 100%);
}

body[data-agent-theme] {
  background: var(--theme-background) !important;
  background-attachment: fixed !important;
  color: var(--text);
  font-family: var(--theme-font);
  --input-text: #232447;
  --input-placeholder: #7a7db1;
  --input-surface: #f4f5ff;
}

body[data-agent-theme="midnight"],
body[data-agent-theme="bigo"],
body[data-agent-theme="diamond"],
body[data-agent-theme="midautumn"],
body[data-agent-theme="christmas"] {
  --input-text: #fff8e7;
  --input-placeholder: rgba(255, 248, 231, .62);
  --input-surface: rgba(255, 255, 255, .10);
}

body[data-agent-theme="sakura"] {
  --input-text: #3d1438;
  --input-placeholder: #a86a8d;
  --input-surface: rgba(255, 255, 255, .92);
}

/* Consistent input text across Chrome, Safari/iOS, autofill and disabled fields. */
body[data-agent-theme] .form-control.input-soft,
body[data-agent-theme] .form-control.input-soft:focus,
body[data-agent-theme] .form-control.input-soft:disabled,
body[data-agent-theme] .form-control.input-soft[readonly] {
  color: var(--input-text) !important;
  -webkit-text-fill-color: var(--input-text) !important;
  caret-color: var(--accent);
  opacity: 1 !important;
}

body[data-agent-theme] .form-control.input-soft::placeholder {
  color: var(--input-placeholder) !important;
  -webkit-text-fill-color: var(--input-placeholder) !important;
  opacity: 1;
}

body[data-agent-theme] .input-group-text.input-soft {
  color: var(--input-text) !important;
  -webkit-text-fill-color: var(--input-text) !important;
}

body[data-agent-theme] .form-control.input-soft:-webkit-autofill,
body[data-agent-theme] .form-control.input-soft:-webkit-autofill:hover,
body[data-agent-theme] .form-control.input-soft:-webkit-autofill:focus {
  color: var(--input-text) !important;
  -webkit-text-fill-color: var(--input-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--input-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--input-surface) inset !important;
  caret-color: var(--accent);
}

/* Tết: deeper lacquer red, warm gold, and decorations used as a frame. */
body[data-agent-theme="tet"] {
  --accent: #f6c453;
  --accent-2: #d99a24;
  --bg-1: #4b080b;
  --bg-2: #780f14;
  --glass: rgba(72, 8, 12, .88);
  --stroke: rgba(246, 196, 83, .34);
  --text: #fff8e7;
  --muted: #e9cfa5;
  --ok: #5dcc82;
  --danger: #ff7b73;
  --sheen: rgba(255, 234, 168, .62);
  --glow: rgba(246, 196, 83, .42);
  --theme-background:
    radial-gradient(700px 460px at 12% -8%, rgba(246,196,83,.19), transparent 62%),
    radial-gradient(640px 440px at 105% 22%, rgba(219,55,36,.30), transparent 64%),
    linear-gradient(155deg, #42070a 0%, #731017 48%, #380609 100%);
  --input-text: #531014;
  --input-placeholder: #9b7470;
  --input-surface: rgba(255,248,231,.96);
}

body[data-agent-theme="tet"] .hero,
body[data-agent-theme="tet"] .glass,
body[data-agent-theme="tet"] .processing,
body[data-agent-theme="tet"] .result-card {
  background: linear-gradient(145deg, rgba(105,15,20,.94), rgba(57,7,11,.94)) !important;
  border-color: rgba(246,196,83,.38) !important;
  box-shadow: 0 22px 64px rgba(28,0,3,.34), inset 0 1px 0 rgba(255,239,190,.08) !important;
}

body[data-agent-theme="tet"] .money-card {
  background: linear-gradient(145deg, rgba(126,20,25,.92), rgba(80,10,15,.92)) !important;
  border-color: rgba(246,196,83,.30) !important;
  color: var(--text) !important;
}

body[data-agent-theme="tet"] .money-card:hover {
  border-color: rgba(246,196,83,.58) !important;
  box-shadow: 0 12px 30px rgba(30,0,3,.34) !important;
}

body[data-agent-theme="tet"] .money-card.active {
  background: linear-gradient(145deg, #a62127, #681016) !important;
  border-color: #f6c453 !important;
  box-shadow: 0 0 0 1px rgba(246,196,83,.65) inset, 0 14px 34px rgba(35,0,3,.42) !important;
}

body[data-agent-theme="tet"] .money-diamond,
body[data-agent-theme="tet"] .money-diamond .diamond-icon,
body[data-agent-theme="tet"] #diamondOut {
  color: #ffd875 !important;
  text-shadow: 0 1px 2px rgba(40,0,0,.75), 0 0 12px rgba(246,196,83,.20) !important;
}

body[data-agent-theme="tet"] .money-vnd { color: #f7dfb4 !important; }

body[data-agent-theme="tet"] .input-soft,
body[data-agent-theme="tet"] .input-group-text.input-soft {
  background: rgba(255,248,231,.96) !important;
  border-color: rgba(246,196,83,.60) !important;
  color: #531014 !important;
}

body[data-agent-theme="tet"] .form-control.input-soft::placeholder { color: #9b7470 !important; }
body[data-agent-theme="tet"] .form-control.input-soft:focus {
  border-color: #f6c453 !important;
  box-shadow: 0 0 0 3px rgba(246,196,83,.24) !important;
}

body[data-agent-theme="tet"] .btn-confirm,
body[data-agent-theme="tet"] .btn-accent {
  color: #4a090c !important;
  background: linear-gradient(135deg, #ffe18a, #e5a72e) !important;
  border-color: rgba(255,235,174,.78) !important;
  box-shadow: 0 12px 30px rgba(30,0,3,.34) !important;
}

body[data-agent-theme="tet"] .mai-branch {
  top: -38px !important;
  left: -70px !important;
  width: clamp(300px, 34vw, 470px) !important;
  transform: rotate(-3deg) !important;
  transform-origin: top left;
  opacity: .92;
  z-index: 1060 !important;
  pointer-events: none !important;
}

body[data-agent-theme="tet"] .firecracker {
  top: 42px !important;
  right: -14px !important;
  width: clamp(76px, 9vw, 108px) !important;
  opacity: .88;
}

body[data-agent-theme="tet"] .tet-scroll {
  top: 46% !important;
  left: -8px !important;
  width: clamp(48px, 6vw, 72px) !important;
  opacity: .78;
}

body[data-agent-theme="tet"] .tet-watermelon {
  right: -4px !important;
  bottom: 8px !important;
  width: clamp(66px, 9vw, 104px) !important;
  opacity: .70;
}

body[data-agent-theme="tet"] .petal-tet.envelope-card {
  width: 42px;
  height: auto;
  border-radius: 7px;
  box-shadow: 0 6px 16px rgba(35, 0, 3, .34);
}

/* Mid-Autumn lanterns: 20% larger than the original 40-44px artwork. */
body[data-agent-theme="midautumn"] .lantern {
  width: 52px;
  filter: drop-shadow(0 0 7px rgba(246, 173, 55, .72)) contrast(1.12) saturate(1.10);
}

/* Original flight speed, staggered so more lanterns are visible at once. */
body[data-agent-theme="midautumn"] .lt1 { animation-duration: 16s; animation-delay: -1s; }
body[data-agent-theme="midautumn"] .lt2 { animation-duration: 20s; animation-delay: -11s; }
body[data-agent-theme="midautumn"] .lt3 { animation-duration: 14s; animation-delay: -5s; }
body[data-agent-theme="midautumn"] .lt4 { animation-duration: 18s; animation-delay: -14s; }
body[data-agent-theme="midautumn"] .lt5 { animation-duration: 22s; animation-delay: -7s; }
body[data-agent-theme="midautumn"] .lt6 { animation-duration: 17s; animation-delay: -10s; }

/* Mobile decorations: visible but never allowed to intercept taps. */
@media (max-width: 640px) {
  body[data-agent-theme="midautumn"] .lantern {
    z-index: 3;
    width: clamp(29px, 9.6vw, 41px);
    pointer-events: none;
    animation-name: lantern-float-mobile;
    filter: drop-shadow(0 0 6px rgba(246, 173, 55, .65)) contrast(1.16) saturate(1.14);
  }

  body[data-agent-theme="midautumn"] .lt1 { left: 3%; }
  body[data-agent-theme="midautumn"] .lt2 { left: 20%; }
  body[data-agent-theme="midautumn"] .lt3 { left: 37%; }
  body[data-agent-theme="midautumn"] .lt4 { left: 55%; }
  body[data-agent-theme="midautumn"] .lt5 { left: 73%; }
  body[data-agent-theme="midautumn"] .lt6 { left: auto; right: 3%; }

  body[data-agent-theme="tet"] .mai-branch {
    top: -18px !important;
    left: -78px !important;
    width: min(250px, 70vw) !important;
    opacity: .72;
  }

  body[data-agent-theme="tet"] .firecracker {
    top: 118px !important;
    right: -18px !important;
    width: 64px !important;
    opacity: .55;
  }

  body[data-agent-theme="tet"] .tet-scroll,
  body[data-agent-theme="tet"] .tet-watermelon { display: none; }

  body[data-agent-theme="tet"] .tp2,
  body[data-agent-theme="tet"] .tp4,
  body[data-agent-theme="tet"] .tp6 { display: none; }

  body[data-agent-theme="tet"] .petal-tet {
    z-index: 2;
    opacity: .38;
  }

  body[data-agent-theme="tet"] .petal-tet.envelope-card {
    width: 34px;
  }
}

@keyframes lantern-float-mobile {
  0%   { transform: translateY(0) translateX(0) rotate(-3deg); opacity: 0; }
  10%  { opacity: .78; }
  50%  { transform: translateY(-52vh) translateX(8px) rotate(3deg); opacity: .70; }
  90%  { opacity: .48; }
  100% { transform: translateY(-110vh) translateX(-7px) rotate(-3deg); opacity: 0; }
}

/*
 * iOS WebKit turns fixed filtered PNGs above a backdrop-filter card into large
 * blurred colour patches. Give WebKit a stable stacking context, keep animated
 * artwork below the content, and avoid the problematic GPU filter combination.
 */
@supports (-webkit-touch-callout: none) {
  body[data-agent-theme] {
    background-attachment: scroll !important;
  }

  body[data-agent-theme]::before,
  body[data-agent-theme]::after {
    background-attachment: scroll !important;
  }

  @media (min-width: 0px) {
    body[data-agent-theme] { isolation: isolate; }

    body[data-agent-theme] .container {
      position: relative;
      z-index: 2;
    }

    @media (max-width: 640px) {
      body[data-agent-theme="midautumn"] .lantern,
      body[data-agent-theme="midautumn"] .moon,
      body[data-agent-theme="midautumn"] .mid-cloud,
      body[data-agent-theme="midautumn"] .lion-dance {
        z-index: 0;
        filter: none !important;
        will-change: transform, opacity;
      }
    }

    body[data-agent-theme="christmas"] .ornament,
    body[data-agent-theme="christmas"] .snow,
    body[data-agent-theme="christmas"] .snowman,
    body[data-agent-theme="christmas"] .santa,
    body[data-agent-theme="christmas"] .santa-flying,
    body[data-agent-theme="christmas"] .shooting-star,
    body[data-agent-theme="tet"] .petal-tet,
    body[data-agent-theme="tet"] .mai-branch,
    body[data-agent-theme="tet"] .firecracker,
    body[data-agent-theme="tet"] .tet-scroll,
    body[data-agent-theme="tet"] .tet-watermelon {
      z-index: 0;
      animation: none !important;
      filter: none !important;
      will-change: auto !important;
      -webkit-transform: none !important;
      transform: none !important;
    }

    body[data-agent-theme="christmas"] .avatar-frame::before {
      animation: none !important;
      filter: none !important;
      will-change: auto !important;
      -webkit-transform: none !important;
      transform: none !important;
    }

    body[data-agent-theme] .hero,
    body[data-agent-theme] .glass,
    body[data-agent-theme] .processing,
    body[data-agent-theme] .result-card {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    body[data-agent-theme="midautumn"] .glass,
    body[data-agent-theme="midautumn"] .processing,
    body[data-agent-theme="midautumn"] .result-card {
      background: linear-gradient(145deg, rgba(55, 22, 58, .76), rgba(35, 14, 48, .72)) !important;
      border-color: rgba(246, 173, 55, .42) !important;
      box-shadow: 0 22px 60px rgba(15, 5, 28, .30), inset 0 1px 0 rgba(255, 225, 165, .10) !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-agent-theme] .lantern,
  body[data-agent-theme] .mid-cloud,
  body[data-agent-theme] .lion-dance,
  body[data-agent-theme] .snow,
  body[data-agent-theme] .santa-flying,
  body[data-agent-theme] .petal-tet {
    animation: none !important;
  }
}