/* ==========================================================================
   CVDS v5.0 — Authentication styles
   General Department of Customs and Excise of Cambodia
   Revised 2026-07-15 — built around the existing CVDMSLogo brand artwork.

   Self-contained: does NOT depend on Bootstrap. The auth pages are
   standalone, and dropping Bootstrap removes cascade conflicts that were
   fighting the floating labels. Only FontAwesome is still required.
   Everything is scoped under .cvds so it cannot leak into other pages.
   ========================================================================== */

.cvds {
  /* --- Palette: the existing GDCE teal system, extended --------------- */
  --teal:     #00B5B8;
  --teal-600: #009093;
  --teal-700: #077C7E;
  --teal-050: #E8F7F8;
  --wash-a:   #F0FAFA;   /* brand panel wash — keeps the artwork sitting on light */
  --wash-b:   #FAFDFD;
  --ink:      #123239;   /* headings */
  --text:     #1B3A41;
  --muted:    #64797E;
  --paper:    #FFFFFF;
  --page:     #F6FAFA;
  --line:     #DCE7E9;
  --line-2:   #C7D8DB;
  --danger:   #B3352B;
  --warn:     #8A6100;

  /* --- Type ----------------------------------------------------------- */
  --f-khmer: 'Khmer OS Siemreap', 'Noto Sans Khmer', sans-serif;
  --f-ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Cascadia Mono', Consolas, 'SF Mono', ui-monospace, monospace;

  --r: 4px;
}

.cvds *, .cvds *::before, .cvds *::after { box-sizing: border-box; }
.cvds { margin: 0; font-family: var(--f-ui); color: var(--text); background: var(--page); }
.cvds img { max-width: 100%; display: block; }

/* ==========================================================================
   Shell — brand artwork left, form right, teal band across the bottom
   ========================================================================== */
.auth-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.auth-shell { flex: 1; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; }

/* ---------- brand panel: the artwork is the hero ---------- */
.brand {
  position: relative;
  padding: clamp(24px, 3.5vw, 56px);
  background: linear-gradient(160deg, var(--wash-a) 0%, var(--wash-b) 100%);
  display: flex; align-items: center; justify-content: center;
  min-height: 100%;
}
.brand-art { width: 100%; max-width: 720px; height: auto; }

/* a single hairline separating brand from form — no decoration */
.brand::after {
  content: ""; position: absolute; top: 8%; bottom: 8%; right: 0;
  width: 1px; background: linear-gradient(180deg, transparent, var(--line-2), transparent);
}

/* ==========================================================================
   Form panel
   ========================================================================== */
.pane { padding: clamp(28px, 4vw, 56px); display: flex; }
.pane-inner { width: 100%; max-width: 380px; margin: auto; }

.form-head { margin-bottom: 26px; }
.form-head h1 {
  font-size: 22px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 7px; color: var(--ink);
}
.form-head .rule { width: 44px; height: 3px; background: var(--teal); border-radius: 2px; margin: 0 0 12px; }
.form-head p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.form-head .kh { font-family: var(--f-khmer); font-size: 12.5px; margin-top: 4px; }

/* ---------- floating-label fields ---------- */
.field { position: relative; margin-bottom: 14px; }
.field input[type="text"],
.field input[type="password"] {
  width: 100%; height: 52px;
  padding: 22px 14px 6px;
  font: 15px/1.2 var(--f-ui); color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field label {
  position: absolute; left: 15px; top: 16px;
  font-size: 14px; color: var(--muted);
  pointer-events: none;
  transition: transform .14s ease, font-size .14s ease, color .14s ease;
  transform-origin: 0 0;
}
.field input:hover { border-color: var(--line-2); }
.field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,181,184,.16); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  transform: translateY(-9px) scale(.78);
  color: var(--teal-600); font-weight: 600; letter-spacing: .02em;
}
.field.has-btn input { padding-right: 46px; }

.reveal {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  width: 38px; height: 38px; border: 0; background: none; cursor: pointer;
  color: var(--muted); border-radius: var(--r);
  display: grid; place-items: center;
}
.reveal:hover { color: var(--teal-600); background: var(--teal-050); }

.caps { display: none; align-items: center; gap: 6px; margin: -6px 0 12px; font-size: 12px; color: var(--warn); }
.caps.on { display: flex; }

/* ---------- checkboxes ---------- */
.checks { margin: 16px 0 22px; display: grid; gap: 11px; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--teal); cursor: pointer; flex: none; }
.check span { font-size: 13px; color: var(--text); line-height: 1.45; }
.check small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }

/* ---------- button ---------- */
.btn {
  width: 100%; height: 48px;
  font: 600 14.5px/1 var(--f-ui); letter-spacing: .04em;
  color: #fff; background: var(--teal);
  border: 0; border-radius: var(--r); cursor: pointer;
  transition: background .15s, transform .05s;
}
.btn:hover { background: var(--teal-600); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }

/* ---------- message ---------- */
.msg { margin-top: 18px; }
.msg:empty, .msg > span:empty { display: none; }

/* ---------- panel footer links ---------- */
.pane-foot {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--muted);
}
.pane-foot a { color: var(--teal-600); text-decoration: none; font-weight: 600; }
.pane-foot a:hover { text-decoration: underline; }

/* ==========================================================================
   SIGNATURE — declaration-form character cells (2FA code field)

   One real <input>; the cells are a background. Paste, autofill and
   txtCode.Text all keep working - no six-input JS gymnastics.

   THE MATH (this is why v1 drifted):
   In a monospace font, 1ch = the advance width of one digit. Setting
       letter-spacing = --cell - 1ch
   makes each character advance EXACTLY one cell, so nothing drifts no
   matter how many digits. Padding of (--cell - 1ch)/2 centres the first
   digit in cell 1; every later digit inherits that centring.

   --cell is a FIXED px value, never a percentage. v1 set a fixed
   letter-spacing against a percentage-width cell: the two never agreed and
   the error accumulated across the field.
   ========================================================================== */
.cells {
  --cell: 52px;
  --fs: 25px;
  position: relative;
  width: calc(var(--cell) * 6 + 2px);   /* 6 cells + 1px border each side */
  max-width: 100%;
  margin: 4px 0 6px;

  border: 1px solid var(--line);
  border-radius: var(--r);

  /* FIVE internal dividers, not six. background-size caps the repeat at
     five periods, so no phantom seventh cell appears at the right edge. */
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 calc(var(--cell) - 1px),
    var(--line)  calc(var(--cell) - 1px) var(--cell)
  );
  background-size: calc(var(--cell) * 5) 100%;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-clip: padding-box;

  transition: border-color .15s, box-shadow .15s;
}
.cells:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,181,184,.16); }

.cells input {
  width: 100%;
  height: 62px;
  font: 600 var(--fs)/62px var(--f-mono);
  letter-spacing: calc(var(--cell) - 1ch);
  padding: 0 0 0 calc((var(--cell) - 1ch) / 2);
  text-indent: 0;
  color: var(--ink);
  background: transparent;
  border: 0; outline: none;
  caret-color: var(--teal);
}
.cells input::placeholder { color: #DCE7E9; }

/* ---------- countdown ---------- */
.timer { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; font-size: 12.5px; color: var(--muted); }
.timer-ring { width: 18px; height: 18px; flex: none; transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke-width: 2.5; }
.timer-ring .bg { stroke: var(--line); }
.timer-ring .fg { stroke: var(--teal); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.timer.low .timer-ring .fg { stroke: var(--danger); }
.timer.low #expireTime { color: var(--danger); font-weight: 600; }

.resend-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.resend-link {
  font: 600 12.5px var(--f-ui); color: var(--teal-600);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.resend-link:hover { text-decoration: underline; }
.resend-link[disabled], .resend-link.is-off {
  color: var(--muted); cursor: default; text-decoration: none; pointer-events: none;
}

/* ---------- delivery chip ---------- */
.via {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; margin-bottom: 20px;
  background: var(--teal-050); border: 1px solid #CDEBEC; border-radius: 100px;
  font-size: 12px; color: var(--teal-600); font-weight: 600;
}

/* ==========================================================================
   Site footer — the existing teal band
   ========================================================================== */
.site-foot {
  background: var(--teal); color: #fff;
  padding: 18px clamp(20px, 4vw, 56px);
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center;
  font-size: 13px;
}
.site-foot a { color: #fff; opacity: .9; text-decoration: none; margin-left: 18px; font-size: 16px; }
.site-foot a:hover { opacity: 1; }
.site-foot .links { display: flex; align-items: center; }

/* ==========================================================================
   Accessibility floor
   ========================================================================== */
.cvds :focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .cvds *, .cvds *::before, .cvds *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .auth-shell { grid-template-columns: 1fr; }
  .brand { padding: 20px 20px 4px; min-height: auto; }
  .brand::after { display: none; }
  .brand-art { max-width: 460px; }
  .pane { padding: 8px 20px 36px; }
  .pane-inner { max-width: 440px; }
}
@media (max-width: 400px) {
  /* Only --cell and --fs change; the ch math re-centres automatically. */
  .cells { --cell: 44px; --fs: 21px; }
  .site-foot { flex-direction: column; text-align: center; font-size: 12px; }
  .site-foot a { margin: 0 9px; }
}

/* ==========================================================================
   SetEmail — enrolment steps, hints, alerts
   The steps are numbered because they ARE a sequence: the Chat ID does not
   exist until step 3 is done. Numbering encodes something true here.
   ========================================================================== */
.steps { display: grid; gap: 10px; margin: 0 0 22px; }
.step { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text); }
.step .n {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  background: var(--teal-050); color: var(--teal-600);
  border: 1px solid #CDEBEC;
  font: 600 11px/19px var(--f-ui); text-align: center;
}
.step b { color: var(--ink); }

.hint { margin: -6px 0 20px; font-size: 11.5px; color: var(--muted); }
.hint code, .howto code {
  font: 500 11.5px var(--f-mono);
  background: var(--teal-050); border: 1px solid #DCEEEF;
  padding: 1px 5px; border-radius: 3px; color: var(--teal-600);
}

.howto {
  background: var(--teal-050); border: 1px solid #CDEBEC; border-left: 4px solid var(--teal);
  border-radius: 0; padding: 14px 16px; font-family: var(--f-khmer); font-size: 12.5px; line-height: 1.75; color: var(--text);
}
.howto h2 { font-size: 13px; margin: 0 0 8px; color: var(--teal-600); font-weight: 600; }
.howto ol { margin: 0 0 8px; padding-left: 18px; }
.howto .note { margin: 0; font-size: 11.5px; color: var(--muted); }

.alert { padding: 13px 16px; border-radius: 0; font-size: 13px; line-height: 1.55; }
.alert strong { display: block; margin-bottom: 3px; font-size: 13.5px; }
.alert p { margin: 0; }
.alert-bad { background: var(--danger-bg, #FDF2F1); border-left: 4px solid var(--danger); color: var(--text); }
.alert-bad strong { color: var(--danger); }