/* =========
   Global theme
   ========= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  --bg: #010018;
  --text: #04FFFB;
  --white: #ffffff;
  --muted: rgba(255,255,255,.72);
  --card: rgba(255,255,255,.06);
  --card-2: rgba(255,255,255,.02);
  --border: rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.18);
  --shadow: rgba(0,0,0,.45);
  --shadow-2: rgba(0,0,0,.55);
  --focus: rgba(4,255,251,.25);
}

body.theme {
  background: var(--bg);
  color: var(--text);
  font-family:
    system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.5;
  min-height: 100vh;
}

/* Layout helper used on login pages */
.center {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(16px, 4vw, 48px);
  display: grid;
  place-items: center;
  min-height: 100vh;
}

/* =========
   Cards / Forms / Buttons
   ========= */
.card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 28rem;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px var(--shadow);
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.card:hover { box-shadow: 0 40px 100px var(--shadow-2); border-color: var(--border-strong); }
.card__header { padding: 28px 28px 8px; }
.card__header h1 { margin: 0 0 6px; font-weight: 700; }
.card__header .muted { margin: 0; color: var(--muted); }

.form { padding: 20px 28px 28px; display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: .9rem; color: var(--muted); }
.field > input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--white);
  outline: none; transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
}
.field > input:focus {
  box-shadow: 0 0 0 3px var(--focus), 0 10px 30px rgba(4,217,255,.10);
  border-color: var(--text); transform: translateY(-1px);
}
.actions { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.actions__left { display: flex; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--border); color: var(--white);
  background: rgba(255,255,255,.04); cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(180deg, rgba(4,217,255,.25), rgba(4,217,255,.08));
  border-color: rgba(4,217,255,.45);
}
.btn:hover, .btn:focus-visible, .btn-primary:hover, .btn-primary:focus-visible {
  background: #04FFFB !important;
  color: #010018 !important;
  border-color: #04FFFB !important;
  box-shadow: 0 8px 28px rgba(4,255,251,.25);
  transform: translateY(-1px);
}

.login-title {
  background: linear-gradient(45deg, #CDE0F7, var(--text));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; letter-spacing: .5px;
}

/* Password eye toggle */
.field.field--has-toggle { position: relative; }
.field.field--has-toggle > input.has-toggle { padding-right: 44px; }
.field.field--has-toggle > .eye-toggle {
  position: absolute; right: 12px; transform: translateY(-50%); width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; opacity: .85; z-index: 1;
}
.field.field--has-toggle > .eye-toggle:hover,
.field.field--has-toggle > .eye-toggle:focus-visible { opacity: 1; }
.field.field--has-toggle > .eye-toggle svg { width: 20px; height: 20px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  padding: 12px 16px; border-radius: 12px; background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.2); color: #fff; opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease; z-index: 9999;
}
.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--error { background: rgba(120, 20, 20, .80); }

/* Dialog */
dialog.dialog { border: 0; border-radius: 16px; padding: 0; background: transparent; }
.dialog::backdrop { background: rgba(0,0,30,.6); }
.dialog__card {
  margin: 0; border-radius: 16px; border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--card), var(--card-2));
  padding: 22px; min-width: min(90vw, 420px); color: var(--white);
}

/* Tilt + shake */
.login-card.tilt { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0); }
.shake { animation: shakeX 450ms cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shakeX {
  10%,90%{ transform: translateX(-1px); }
  20%,80%{ transform: translateX(2px); }
  30%,50%,70%{ transform: translateX(-4px); }
  40%,60%{ transform: translateX(4px); }
}

/* =========
   Hero (legacy decorative background) – kept for compatibility
   ========= */
.login-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #010018 !important;
  isolation: isolate;
}
.login-hero__blobs { position: absolute; inset: -20vmax; pointer-events: none; z-index: 0; filter: blur(40px); }
.login-hero__blob { position: absolute; width: 40vmax; height: 40vmax; opacity: .35; border-radius: 50%;
  background: conic-gradient(from 180deg at 50% 50%, #04FFFB33, #a0e8ff33, #04FFFB33);
  animation: blobMove 18s ease-in-out infinite alternate;
}
.login-hero__blob--1 { top: 5%;  left: 0%;   animation-delay: 0s;  }
.login-hero__blob--2 { top: 40%; right: -10%; animation-delay: -4s; }
.login-hero__blob--3 { bottom: -5%; left: 30%; animation-delay: -8s; }
@keyframes blobMove {
  0%   { transform: translate3d(-5%, -5%, 0) scale(1)    rotate(0deg); }
  50%  { transform: translate3d(5%, 2%, 0)   scale(1.08) rotate(30deg); }
  100% { transform: translate3d(-3%, 4%, 0)  scale(1.02) rotate(60deg); }
}
.login-hero__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .18;
  background-image: linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(1200px 600px at 50% 40%, #000 40%, transparent 80%);
}
.login-hero__sparkles { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(2px 2px at 20% 20%, rgba(255,255,255,.35) 60%, transparent 61%),
                    radial-gradient(2px 2px at 70% 40%, rgba(255,255,255,.25) 60%, transparent 61%),
                    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,.30) 60%, transparent 61%);
  animation: rise 22s linear infinite; opacity: .5;
}
@keyframes rise { from { transform: translateY(20px); } to { transform: translateY(-40px); } }

/* Optional hero watermark */
.login-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-position: center; background-repeat: no-repeat; background-size: cover;
  opacity: 0.08; pointer-events: none; z-index: 0;
  /* To enable: uncomment next line */
  /* background-image: url("/images/New color-05.png"); */
}

/* =========
   Plain login background (like reset-password)
   ========= */
.login-plain {
  background: #010018;
  display: grid;
  align-items: center;
  padding-top: 100px;       /* fixed header offset */
  padding-bottom: 72px;     /* fixed footer room (>=56px) */
  min-height: calc(100dvh - 100px - 72px);
}
.login-plain.has-watermark { position: relative; }
.login-plain.has-watermark::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("/images/New color-05.png");
  background-position: center; background-repeat: no-repeat; background-size: cover;
  opacity: 0.08; pointer-events: none; z-index: 0;
}
.login-plain > .center { position: relative; z-index: 1; }
.login-plain > .center { min-height: auto; }  /* avoid double 100vh */

/* =========
   Fixed Header / Footer + Right-side Actions
   ========= */
.shell-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 80px;
  z-index: 1000;
  background: transparent;
}
.shell-header__inner{
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 0 15px;
  justify-content: space-between; /* brand left, actions right */
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.brand img{ height: 44px; width: auto; display: block; }
.brand span{ font-weight: 600; letter-spacing: .5px; opacity: .9; }

.header-actions{ display: flex; align-items: center; gap: 10px; }

.support-btn,
.logout-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.support-btn:hover,
.logout-btn:hover {
  background: #04FFFB;
  color: #010018;
  border-color: rgba(4,255,251,.8);
  box-shadow: 0 8px 28px rgba(4,255,251,.25);
  transform: translateY(-1px);
}

.shell-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--muted);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(4px);
}
.shell-footer__inner{ padding: 0 16px; }

/* =========
   Success page scope
   ========= */
.success-page {
  background: #010018;
  color: #04FFFB;
  font-family:
    system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  overflow: hidden; /* no scrollbars on this page */
}
.success-page .box{
  position: fixed;
  inset: 80px 0 56px 0;  /* between fixed header and footer */
  display: grid;
  place-items: center;
  text-align: center;
}
.success-page .stack{
  display: grid;
  gap: 14px;
  justify-items: center;
}
.success-page h1{ font-size: 56px; margin: 0; }
.success-page .ok{ font-size: 18px; opacity: .9; }

/* Success page buttons */
.success-page button{
  height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: #fff; cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.success-page button:hover{
  background: #04FFFB;
  color: #010018;
  border-color: rgba(4,255,251,.8);
  box-shadow: 0 8px 28px rgba(4,255,251,.25);
  transform: translateY(-1px);
}

/* =========
   Support page (textarea version)
   ========= */
.support-frame{
  position: fixed;
  inset: 80px 0 56px 0;     /* top / right / bottom / left */
  display: grid;
  place-items: start center;
  overflow: auto;
  background: #010018;
  padding: 24px 20px;
}

.support-card{
  width: min(900px, 92vw);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  padding: 20px 20px 22px;
  display: grid;
  gap: 16px;
}
.support-card h1{ margin: 0; font-size: 24px; }

.support-card .row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.support-card .field{ display: grid; gap: 6px; }
.support-card .field > label{ font-size: 14px; color: rgba(255,255,255,.72); }
.support-card .field > input,
.support-card .field > select,
.support-card .field > textarea{
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #fff;
  padding: 8px 10px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Select dropdown panel + placeholder tint */
.support-card .field > select option{ background-color: #010018; color: #fff; }
.support-card .field > select option[disabled][selected]{ color: rgba(255,255,255,.6); }
.support-card .field > select:focus{
  box-shadow: 0 0 0 3px rgba(4,255,251,.25), 0 10px 30px rgba(4,217,255,.10);
  border-color: #04FFFB;
}

/* Description textarea sizing */
.support-card .field > textarea {
  min-height: 180px;        /* similar height to previous editor */
  resize: vertical;
  line-height: 1.5;
}

/* Actions row */
.support-card .actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Alert banner */
.support-card .alert{
  display: none;
  border: 1px solid rgba(4,255,251,.4);
  background: rgba(4,255,251,.06);
  color: #aefcff;
  padding: 12px 14px;
  border-radius: 10px;
}
.support-card .alert.show{ display: block; }
.support-card .ticket-id{ font-weight: 700; color: #04FFFB; }

/* Light theme tokens */
html[data-theme="light"] {
  --bg: #f7fafc;
  --text: #0b1f2a;
  --white: #000; /* not used directly */
  --muted: rgba(0,0,0,.55);
  --card: rgba(0,0,0,.04);
  --card-2: rgba(0,0,0,.02);
  --border: rgba(0,0,0,.12);
  --border-strong: rgba(0,0,0,.2);
  --shadow: rgba(0,0,0,.15);
  --shadow-2: rgba(0,0,0,.25);
  --focus: rgba(2,108,118,.2);
}
/* Support: span a field across both columns (CSP-safe) */
.support-card .field.field--full { grid-column: 1 / -1; }
/* ==== Embed page: structure (moved from inline) ==== */
.embed-wrap { min-height: 100dvh; background: var(--bg); color: var(--text); }
.embed-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 64px; padding: 0 12px;
}
.embed-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.embed-brand img { height: 36px; width: auto; display: block; }
.embed-spacer { width: 32px; }

.embed-login {
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.embed-login span {
  font-weight: 600;
  text-decoration: underline;
}


.embed-body { display: grid; place-items: start center; padding: 12px; }
.embed-footer { display: flex; align-items: center; justify-content: center; height: 44px; color: var(--muted); }

/* Responsive tweak: hide brand text on very narrow screens */
@media (max-width: 480px) {
  .embed-header { height: 56px; }
  .embed-brand span { display: none; }
}

/* Layout helpers formerly inline */
.support-card { width: min(720px, 94vw); } /* keep your embed card width */
.support-card .field.field--full { grid-column: 1 / -1; }
.support-card .row.row--singlecol { grid-template-columns: 1fr; }
/* === Light theme tokens (applies when <html data-theme="light">) === */
html[data-theme="light"] {
  --bg: #f7fafc;                 /* page background */
  --text: #0b1f2a;               /* primary text */
  --muted: rgba(0,0,0,.62);      /* secondary text */
  --card: rgba(0,0,0,.04);       /* card gradient top */
  --card-2: rgba(0,0,0,.02);     /* card gradient bottom */
  --border: rgba(0,0,0,.14);     /* normal border */
  --border-strong: rgba(0,0,0,.20);
  --shadow: rgba(0,0,0,.15);
  --shadow-2: rgba(0,0,0,.25);
  --focus: rgba(2,108,118,.25);  /* cyan-ish focus ring on light */
}

/* Inputs/selects/textarea: high-contrast on light */
html[data-theme="light"] .support-card .field > input,
html[data-theme="light"] .support-card .field > select,
html[data-theme="light"] .support-card .field > textarea {
  background: #ffffff;
  color: #0b1f2a;
  border: 1px solid rgba(0,0,0,.20);
}

/* Select dropdown panel + placeholder tint on light */
html[data-theme="light"] .support-card .field > select option{
  background-color: #ffffff;
  color: #0b1f2a;
}
html[data-theme="light"] ::placeholder{
  color: rgba(0,0,0,.55);
}

/* Buttons on light: readable by default, cyan on hover still OK */
html[data-theme="light"] .btn,
html[data-theme="light"] .support-btn,
html[data-theme="light"] .logout-btn {
  background: rgba(0,0,0,.04);
  color: #0b1f2a;
  border: 1px solid rgba(0,0,0,.12);
}

/* Card look in light mode (keep subtle glass effect but readable) */
html[data-theme="light"] .support-card,
html[data-theme="light"] .card,
html[data-theme="light"] .dialog__card {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border-color: var(--border);
  color: var(--text);
}
/* --- Embed: two-column block with logo to the right --- */
.support-card .row.row--with-logo {
  display: grid;
  grid-template-columns: 2fr 1fr;   /* Left: Product+hCaptcha, Right: logo */
  align-items: start;
  gap: 14px;
}

/* Left column stacks Product above hCaptcha */
.support-card .row.row--with-logo .stack {
  display: grid;
  gap: 14px;
}

/* Right column logo styling */
.embed-logo {
  display: grid;
  place-items: center;
}
.embed-logo img {
  max-width: 100%;
  height: auto;
  max-height: 160px;                /* tune as you like */
  opacity: 0.9;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.25));
}

/* Small screens: stack under the form fields */
@media (max-width: 640px) {
  .support-card .row.row--with-logo {
    grid-template-columns: 1fr;     /* logo drops below */
  }
  .embed-logo { margin-top: 8px; }
}
/* === Support embed: light-mode readability fixes === */
html[data-theme="light"] .support-card h1 {
  color: var(--text);       /* dark heading */
}

html[data-theme="light"] .support-card .field > label {
  color: var(--muted);      /* dark-muted label text */
}

/* ===== Success page: Support tickets ===== */

.success-page .tickets-section {
  margin-top: 24px;
}

.success-page .tickets-section h2 {
  font-size: 20px;
  margin-bottom: 12px;
}

.tickets-table-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.tickets-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tickets-table th,
.tickets-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.12));
  text-align: left;
  font-size: 14px;
}

.tickets-table tbody tr {
  cursor: pointer;
}

.tickets-table tbody tr:hover {
  background-color: rgba(255,255,255,0.04);
}

.tickets-col-subject,
.tickets-col-description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tickets-empty {
  margin-top: 12px;
  font-size: 14px;
  opacity: 0.8;
}

.tickets-help {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.7;
}

/* ===== Ticket modal ===== */

.ticket-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 900;
}

.ticket-modal.is-open {
  display: flex;
}

.ticket-modal__backdrop {
  position: absolute;
  inset: 0;
  background: #010018;
}

.ticket-modal__dialog {
  position: relative;
  max-width: 520px;
  width: 90%;
  background: var(--card, #010018);
  color: var(--text, #ffffff);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.7);
  z-index: 1;
}

.ticket-modal__dialog h2 {
  margin: 0 0 12px 0;
  font-size: 18px;
}

.ticket-modal__details {
  margin: 0 0 16px 0;
}

.ticket-modal__row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.ticket-modal__row dt {
  flex: 0 0 110px;
  font-weight: 600;
}

.ticket-modal__row dd {
  margin: 0;
  flex: 1;
}