/* =========================================================
   Locket Gold – Theme Sync
   Chuyển các trang công khai còn dùng slate/amber sang theme hồng.
   Được load SAU pink-theme.css trên các trang chưa có theme hồng.
   ========================================================= */

/* ---------- Base ---------- */
body.theme-sync {
  color: var(--pink-ink) !important;
  font-family: "Quicksand", "Inter", "Be Vietnam Pro", system-ui, sans-serif !important;
  background-color: transparent !important;
  overflow-x: hidden;
}

body.theme-sync::selection,
body.theme-sync *::selection {
  background: rgba(255, 111, 149, .28) !important;
  color: var(--pink-ink) !important;
}

/* ---------- Typography ---------- */
body.theme-sync h1,
body.theme-sync h2,
body.theme-sync h3,
body.theme-sync h4,
body.theme-sync .font-display {
  font-family: "Baloo 2", "Quicksand", "Inter", sans-serif !important;
  letter-spacing: -.03em;
}

body.theme-sync .text-slate-900,
body.theme-sync .text-slate-950,
body.theme-sync .text-gray-900,
body.theme-sync .text-gray-950,
body.theme-sync .text-zinc-900,
body.theme-sync .text-zinc-950,
body.theme-sync .text-black {
  color: var(--pink-ink) !important;
}

body.theme-sync .text-slate-800,
body.theme-sync .text-gray-800,
body.theme-sync .text-zinc-800 {
  color: #642844 !important;
}

body.theme-sync .text-slate-700,
body.theme-sync .text-gray-700,
body.theme-sync .text-zinc-700 {
  color: #713453 !important;
}

body.theme-sync .text-slate-600,
body.theme-sync .text-gray-600,
body.theme-sync .text-zinc-600 {
  color: var(--pink-muted) !important;
}

body.theme-sync .text-slate-500,
body.theme-sync .text-gray-500,
body.theme-sync .text-zinc-500 {
  color: #8f6278 !important;
}

body.theme-sync .text-slate-400,
body.theme-sync .text-gray-400,
body.theme-sync .text-zinc-400 {
  color: #a7798d !important;
}

body.theme-sync .text-slate-300,
body.theme-sync .text-gray-300,
body.theme-sync .text-zinc-300 {
  color: #c79bb0 !important;
}

body.theme-sync p,
body.theme-sync li,
body.theme-sync dd,
body.theme-sync dt {
  color: var(--pink-muted);
}

/* ---------- Gradient headings ---------- */
body.theme-sync .text-gradient,
body.theme-sync .gold-grad-text,
body.theme-sync [class*="bg-clip-text"][class*="from-amber"],
body.theme-sync [class*="bg-clip-text"][class*="from-yellow"],
body.theme-sync [class*="bg-clip-text"][class*="from-orange"] {
  background-image: linear-gradient(100deg, #ff6f95 0%, #ec3c6e 48%, #a10f42 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 6px rgba(236, 60, 110, .18)) !important;
}

/* ---------- Surfaces ---------- */
body.theme-sync .bg-slate-50,
body.theme-sync .bg-gray-50,
body.theme-sync .bg-zinc-50,
body.theme-sync .bg-slate-100,
body.theme-sync .bg-gray-100,
body.theme-sync .bg-zinc-100,
body.theme-sync .bg-slate-200\/60 {
  background-color: rgba(255, 244, 249, .78) !important;
}

body.theme-sync .bg-slate-200,
body.theme-sync .bg-gray-200,
body.theme-sync .bg-zinc-200 {
  background-color: rgba(255, 225, 239, .82) !important;
}

body.theme-sync .bg-white,
body.theme-sync [class*="bg-white/"] {
  background-color: rgba(255, 255, 255, .9) !important;
  border-color: var(--pink-border) !important;
  box-shadow: 0 18px 44px rgba(236, 60, 110, .09);
}

body.theme-sync [class*="border-slate-"],
body.theme-sync [class*="border-gray-"],
body.theme-sync [class*="border-zinc-"] {
  border-color: var(--pink-border) !important;
}

body.theme-sync [class*="divide-slate-"] > :not([hidden]) ~ :not([hidden]),
body.theme-sync [class*="divide-gray-"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--pink-border) !important;
}

/* ---------- Amber / gold gradients -> pink ---------- */
body.theme-sync [class*="from-amber-"],
body.theme-sync [class*="via-amber-"],
body.theme-sync [class*="to-amber-"],
body.theme-sync [class*="from-yellow-"],
body.theme-sync [class*="via-yellow-"],
body.theme-sync [class*="to-yellow-"],
body.theme-sync [class*="from-orange-"],
body.theme-sync [class*="via-orange-"],
body.theme-sync [class*="to-orange-"] {
  background-image: linear-gradient(120deg, #ffb6d2 0%, #ff80ab 48%, #f06292 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.theme-sync [class*="bg-amber-"],
body.theme-sync [class*="bg-yellow-"],
body.theme-sync [class*="bg-orange-"] {
  background-color: transparent !important;
  background-image: linear-gradient(120deg, #ffb6d2 0%, #ff80ab 48%, #f06292 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Các gradient nhạt (from-amber-50/100, from-amber-500/15...) phải là nền hồng pastel,
   không phải gradient đậm. Nếu không, các panel lồng trong card sẽ bị chói. */
body.theme-sync [class*="from-amber-50"],
body.theme-sync [class*="via-amber-50"],
body.theme-sync [class*="to-amber-50"],
body.theme-sync [class*="from-amber-100"],
body.theme-sync [class*="via-amber-100"],
body.theme-sync [class*="to-amber-100"],
body.theme-sync [class*="from-yellow-50"],
body.theme-sync [class*="from-yellow-100"],
body.theme-sync [class*="from-amber-500/1"],
body.theme-sync [class*="via-amber-500/1"],
body.theme-sync [class*="to-amber-500/1"],
body.theme-sync [class*="from-yellow-400/1"] {
  background-image: linear-gradient(135deg, rgba(255, 247, 252, .97) 0%, rgba(255, 226, 240, .93) 100%) !important;
  color: var(--pink-ink) !important;
  border-color: var(--pink-border) !important;
}

body.theme-sync [class*="bg-amber-50"],
body.theme-sync [class*="bg-amber-100"],
body.theme-sync [class*="bg-yellow-50"],
body.theme-sync [class*="bg-yellow-100"] {
  background-color: rgba(255, 132, 170, .12) !important;
  background-image: none !important;
  color: var(--pink-strong) !important;
  border-color: var(--pink-border) !important;
}

/* Nền amber trong suốt (badge, icon chip, active state) -> hồng nhạt */
body.theme-sync [class*="bg-amber-500/"],
body.theme-sync [class*="bg-yellow-500/"],
body.theme-sync [class*="bg-orange-500/"],
body.theme-sync [class*="bg-amber-400/"],
body.theme-sync [class*="bg-yellow-400/"] {
  background-color: rgba(255, 132, 170, .14) !important;
  background-image: none !important;
  color: var(--pink-strong) !important;
  border-color: var(--pink-border) !important;
}

body.theme-sync [class*="bg-accent"],
body.theme-sync [class*="accent-gradient"] {
  background-color: transparent !important;
  background-image: linear-gradient(120deg, #ffb6d2 0%, #ff80ab 48%, #f06292 100%) !important;
  color: #fff !important;
}

body.theme-sync .text-accent,
body.theme-sync .text-accent-dark,
body.theme-sync .text-accent-light,
body.theme-sync [class*="text-accent/"] {
  color: var(--pink-strong) !important;
}

body.theme-sync .border-accent,
body.theme-sync .border-accent-dark,
body.theme-sync .border-accent-light {
  border-color: var(--pink-border) !important;
}

body.theme-sync [class*="text-amber-"],
body.theme-sync [class*="text-yellow-"],
body.theme-sync [class*="text-orange-"] {
  color: var(--pink-strong) !important;
}

body.theme-sync [class*="border-amber-"],
body.theme-sync [class*="border-yellow-"],
body.theme-sync [class*="border-orange-"],
body.theme-sync [class*="border-accent"] {
  border-color: var(--pink-border) !important;
}

body.theme-sync [class*="decoration-amber-"],
body.theme-sync [class*="decoration-yellow-"] {
  text-decoration-color: var(--pink) !important;
}

/* ---------- Dark slate CTAs -> pink ---------- */
body.theme-sync a[class*="bg-slate-900"],
body.theme-sync button[class*="bg-slate-900"],
body.theme-sync a[class*="bg-gray-900"],
body.theme-sync button[class*="bg-gray-900"],
body.theme-sync a[class*="bg-zinc-900"],
body.theme-sync button[class*="bg-zinc-900"] {
  background-color: transparent !important;
  background-image: linear-gradient(120deg, #ff9ec3 0%, #ff6f95 48%, #e83367 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(236, 60, 110, .24) !important;
}

/* ---------- Header / footer ---------- */
body.theme-sync header[class] {
  background-color: rgba(255, 250, 252, .93) !important;
  border-color: var(--pink-border) !important;
  box-shadow: 0 10px 30px rgba(236, 60, 110, .08) !important;
}

body.theme-sync header a[href="/"]::after {
  content: none !important;
  display: none !important;
}

body.theme-sync header a[href="/"] span {
  color: var(--pink-ink) !important;
}

body.theme-sync header a[href="/"] [class*="text-amber-"] {
  color: var(--pink-strong) !important;
}

body.theme-sync footer[class] {
  background-color: rgba(255, 250, 252, .88) !important;
  border-color: var(--pink-border) !important;
  color: var(--pink-muted) !important;
}

/* ---------- Forms ---------- */
body.theme-sync input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.theme-sync textarea,
body.theme-sync select {
  background-color: rgba(255, 255, 255, .94) !important;
  border-color: rgba(255, 143, 181, .34) !important;
  color: var(--pink-ink) !important;
}

body.theme-sync input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
body.theme-sync textarea:focus,
body.theme-sync select:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 4px rgba(255, 111, 149, .16) !important;
}

body.theme-sync ::placeholder {
  color: #c18fa5 !important;
}

/* ---------- Dashboard ---------- */
body.dashboard-page .card-luxury,
body.dashboard-page .card-3d {
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid var(--pink-border) !important;
  border-bottom: 3px solid rgba(255, 143, 181, .42) !important;
  border-radius: 26px !important;
  box-shadow: 0 18px 42px rgba(236, 60, 110, .1) !important;
}

body.dashboard-page .card-luxury:hover,
body.dashboard-page .card-3d:hover {
  border-color: rgba(255, 111, 149, .55) !important;
  border-bottom-color: rgba(236, 60, 110, .55) !important;
  box-shadow: 0 26px 54px rgba(236, 60, 110, .18) !important;
}

body.dashboard-page #fx-three {
  opacity: .38 !important;
}

body.celebrity-page #fx-three {
  opacity: .46 !important;
}

body.dashboard-page .btn-gold,
body.dashboard-page .btn-3d-gold {
  background-image: linear-gradient(120deg, #ff8fb5 0%, #ec3c6e 48%, #d92b60 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  border-bottom: 3px solid #a10f42 !important;
  box-shadow: 0 4px 0 #a10f42, 0 10px 22px rgba(236, 60, 110, .26), inset 0 1px 0 rgba(255, 255, 255, .5) !important;
  text-shadow: 0 1px 0 rgba(161, 15, 66, .25) !important;
}

body.dashboard-page .btn-gold:hover,
body.dashboard-page .btn-3d-gold:hover {
  box-shadow: 0 6px 0 #a10f42, 0 14px 28px rgba(236, 60, 110, .34), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}

body.dashboard-page .gold-grad-text {
  background-image: linear-gradient(100deg, #ff6f95 0%, #ec3c6e 48%, #a10f42 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.dashboard-page [class*="from-amber-500/15"] {
  background-image: linear-gradient(120deg, rgba(255, 182, 210, .28) 0%, rgba(255, 255, 255, .6) 48%, rgba(255, 143, 181, .22) 100%) !important;
  border-color: var(--pink-border) !important;
  box-shadow: 0 16px 38px rgba(236, 60, 110, .08) !important;
}

body.dashboard-page .bg-slate-100,
body.dashboard-page .bg-slate-50 {
  background-color: rgba(255, 238, 246, .86) !important;
}

/* ---------- Celebrity Hub ---------- */
body.celebrity-page {
  --gold-3d-primary: #ff6f95;
  --gold-3d-light: #ffd1e2;
  --gold-3d-dark: #b3124d;
  --gold-3d-deep: #7a1236;
  --gold-glow: rgba(236, 60, 110, .3);
}

body.celebrity-page .glass-header-3d {
  background: rgba(255, 250, 252, .92) !important;
  border-bottom-color: var(--pink-border) !important;
  box-shadow: 0 10px 30px rgba(236, 60, 110, .1) !important;
}

body.celebrity-page .brand-emblem-3d {
  border-color: var(--pink) !important;
  box-shadow: 0 6px 14px rgba(236, 60, 110, .3), 0 2px 0 #b3124d, inset 0 2px 2px rgba(255, 255, 255, .55) !important;
}

body.celebrity-page .card-luxury,
body.celebrity-page .card-3d,
body.celebrity-page .stat-card-3d,
body.celebrity-page .radio-card-3d,
body.celebrity-page .trophy-card-3d {
  background: linear-gradient(165deg, #ffffff 0%, #fff8fc 60%, #fff0f7 100%) !important;
  border-color: var(--pink-border) !important;
  border-bottom-color: rgba(255, 143, 181, .5) !important;
  box-shadow: 0 14px 30px -6px rgba(236, 60, 110, .12), 0 4px 8px -2px rgba(236, 60, 110, .06), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

body.celebrity-page .card-luxury:hover,
body.celebrity-page .card-3d:hover,
body.celebrity-page .stat-card-3d:hover,
body.celebrity-page .radio-card-3d:hover,
body.celebrity-page .trophy-card-3d:hover {
  border-color: rgba(255, 111, 149, .55) !important;
  border-bottom-color: rgba(236, 60, 110, .65) !important;
  box-shadow: 0 22px 45px -8px rgba(236, 60, 110, .22), 0 8px 18px -4px rgba(236, 60, 110, .08), inset 0 1px 1px #ffffff !important;
}

body.celebrity-page .gold-grad-text {
  background-image: linear-gradient(135deg, #ff6f95 0%, #ec3c6e 52%, #a10f42 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(236, 60, 110, .22)) !important;
}

body.celebrity-page h1 .gold-grad-text {
  background-image: linear-gradient(135deg, #8f0e39 0%, #b3124d 52%, #7a1236 100%) !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .22)) !important;
}

body.celebrity-page .gold-grad-bg,
body.celebrity-page .badge-3d-gold {
  background-image: linear-gradient(120deg, #ffb6d2 0%, #ff80ab 48%, #f06292 100%) !important;
  border-color: #ffd1e2 !important;
  color: #fff !important;
}

body.celebrity-page .btn-gold,
body.celebrity-page .btn-3d-gold {
  background-image: linear-gradient(180deg, #ff8fb5 0%, #ec3c6e 52%, #d92b60 100%) !important;
  color: #fff !important;
  border: 1px solid #ff9ec3 !important;
  border-bottom: 3px solid #a10f42 !important;
  box-shadow: 0 4px 0 #a10f42, 0 8px 18px rgba(236, 60, 110, .35), inset 0 1px 1px rgba(255, 255, 255, .7) !important;
  text-shadow: 0 1px 0 rgba(161, 15, 66, .22) !important;
}

body.celebrity-page .btn-gold:hover,
body.celebrity-page .btn-3d-gold:hover {
  box-shadow: 0 6px 0 #a10f42, 0 12px 26px rgba(236, 60, 110, .45), inset 0 1px 1px #fff !important;
}

body.celebrity-page .btn-3d-slate,
body.celebrity-page .tab-3d-btn {
  background: linear-gradient(180deg, #ffffff 0%, #fff0f7 100%) !important;
  border-color: #ffd1e2 !important;
  border-bottom-color: #ffb6d2 !important;
  color: var(--pink-ink) !important;
  box-shadow: 0 3px 0 #ffb6d2, 0 6px 12px rgba(236, 60, 110, .08), inset 0 1px 0 #ffffff !important;
}

body.celebrity-page .tab-3d-btn.active {
  background: linear-gradient(180deg, #ffd1e2 0%, #ff8fb5 45%, #ec3c6e 100%) !important;
  color: #fff !important;
  border-color: #ffd1e2 !important;
  border-bottom-color: #a10f42 !important;
  box-shadow: 0 3px 0 #a10f42, 0 8px 18px rgba(236, 60, 110, .28), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

body.celebrity-page .btn-3d-dark {
  background: linear-gradient(180deg, #5f2440 0%, #2a1220 100%) !important;
  border-bottom-color: #12090f !important;
  box-shadow: 0 4px 0 #12090f, 0 8px 18px rgba(95, 36, 64, .28), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

body.celebrity-page .radar-box-3d,
body.celebrity-page .terminal-3d,
body.celebrity-page .table-3d,
body.celebrity-page .modal-box-3d {
  background-color: #241018 !important;
  border-color: rgba(255, 143, 181, .3) !important;
  box-shadow: 0 18px 40px rgba(36, 16, 24, .18) !important;
}

body.celebrity-page .radar-box-3d *,
body.celebrity-page .terminal-3d *,
body.celebrity-page .table-3d *,
body.celebrity-page .modal-box-3d * {
  --tw-text-opacity: 1;
}

body.celebrity-page .terminal-3d,
body.celebrity-page .terminal-3d * {
  color: #ffd1e2;
}

body.celebrity-page .radar-box-3d .text-slate-900,
body.celebrity-page .radar-box-3d .text-slate-800,
body.celebrity-page .modal-box-3d .text-slate-900,
body.celebrity-page .modal-box-3d .text-slate-800 {
  color: #ffd1e2 !important;
}

body.celebrity-page .pulse-gold {
  animation-name: fxPinkPulse !important;
}

@keyframes fxPinkPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236, 60, 110, .3); }
  50% { box-shadow: 0 0 0 12px rgba(236, 60, 110, 0); }
}

/* ---------- Forgot password ---------- */
body.forgot-page .card {
  background: rgba(255, 255, 255, .9) !important;
  border-color: var(--pink-border) !important;
  box-shadow: 0 24px 60px rgba(236, 60, 110, .14), 0 4px 12px rgba(236, 60, 110, .05) !important;
}

body.forgot-page .logo-img {
  background: #fff6fb;
  border-radius: 50%;
  padding: 4px;
  filter: drop-shadow(0 4px 12px rgba(236, 60, 110, .25)) !important;
}

body.forgot-page .logo-section h1 {
  color: var(--pink-ink) !important;
}

body.forgot-page .logo-section p {
  color: var(--pink-muted) !important;
}

body.forgot-page .form-group label {
  color: var(--pink-muted) !important;
}

body.forgot-page .input-wrap input {
  background: rgba(255, 255, 255, .96) !important;
  border-color: rgba(255, 143, 181, .34) !important;
  color: var(--pink-ink) !important;
}

body.forgot-page .input-wrap input:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 4px rgba(255, 111, 149, .16) !important;
}

body.forgot-page .input-wrap input:focus ~ .input-icon {
  color: var(--pink) !important;
}

body.forgot-page .btn-submit {
  background: linear-gradient(120deg, #ff9ec3 0%, #ff6f95 48%, #e83367 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(236, 60, 110, .26) !important;
}

body.forgot-page .btn-submit:hover {
  box-shadow: 0 14px 30px rgba(236, 60, 110, .34) !important;
}

body.forgot-page .back-link {
  color: var(--pink-muted) !important;
}

body.forgot-page .back-link:hover {
  color: var(--pink-strong) !important;
  background: rgba(255, 132, 170, .1) !important;
}

body.forgot-page .footer-text {
  color: #b98ea3 !important;
}

body.forgot-page .footer-text a {
  color: var(--pink-strong) !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
  body.theme-sync .text-slate-900,
  body.theme-sync .text-slate-800 {
    color: var(--pink-ink) !important;
  }
}