:root {
  --iris-primary: #00bcd4;
  --iris-secondary: #0097a7;
  --iris-bg-start: #0f1113;
  --iris-bg-end: #1c1f22;
  --iris-card-bg: #2b3035;
  --iris-text-light: #f1f5f9;
  --iris-text-muted: #cbd5e1;
  --iris-border: rgba(255, 255, 255, 0.1);
  --iris-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  --iris-blur: blur(8px);
}

/* Reset / background */
html, body {
  height: 100%;
  margin: 0;
  background: linear-gradient(135deg, var(--iris-bg-start), var(--iris-bg-end)) fixed;
  color: var(--iris-text-light);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Navbar - Updated to cyan/teal theme */
.navbar-glass {
  background: linear-gradient(90deg, #0891b2, #06b6d4);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* reduced vertical padding for a more compact header */
  padding: 0.25rem 2.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.navbar-glass .nav-item {
  color: #fff !important;
  font-weight: 600;
  margin: 0 1rem;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.navbar-glass .nav-item:hover {
  color: #e0f2fe !important;
  opacity: 0.95;
}

/* Glassy Card */
.glassy-card {
  background: var(--iris-card-bg);
  border: 1px solid var(--iris-border);
  border-radius: 1rem;
  box-shadow: var(--iris-shadow);
  padding: 2rem;
  color: var(--iris-text-light);
  text-align: center;
  backdrop-filter: var(--iris-blur);
}

/* Headings and status */
.glassy-card h2, .glassy-card h3, .glassy-card p {
  color: var(--iris-text-light);
  margin: 0.5rem 0;
}

.status-light {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 15px #4ade80aa;
  display: inline-block;
  margin-right: 0.5rem;
}

/* Polished scanner-ready indicator (used in ScanID.html #scannerStateDot/#scannerStateText) */
#scannerStateDot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* subtle glossy radial to give a soft highlight */
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.36) 0%, rgba(120,245,180,0.20) 6%, #3be07a 18%, #1fc85a 55%, #0f9a42 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.45), inset 0 2px 5px rgba(255,255,255,0.08);
  border: 2px solid rgba(0,0,0,0.18);
  display: inline-block;
  vertical-align: middle;
}

#scannerStateText {
  color: #f3fbfb; /* slightly brighter label */
  font-weight: 800;
  font-size: 1.25rem;
  margin-left: 0.6rem;
  vertical-align: middle;
  display: inline-block;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}

/* Ensure small descriptive lines inside the scanner state are readable */
#scannerState .text-sm,
#scannerState p,
#scannerState div.text-sm {
  color: rgba(230,243,244,0.85) !important;
}

/* Scanner state card: remove the thin border and match IRIS Comp visual */
#scannerState {
  /* Override glassy-card border and lighten visuals */
  border: 1px solid rgba(255,255,255,0.03) !important;
  background: linear-gradient(180deg, rgba(42,46,49,0.92), rgba(50,54,57,0.94));
  box-shadow: 0 10px 28px rgba(0,0,0,0.48), inset 0 1px 4px rgba(255,255,255,0.02);
  padding: 1.25rem !important;
  border-radius: 1rem !important;
}

/* Slightly reduce inner spacing for the text block under the title for tighter composition */
#scannerState .text-sm {
  margin-top: 0.35rem;
}


/* Buttons */
.glassy-btn {
  background: linear-gradient(180deg, var(--iris-primary), var(--iris-secondary));
  color: #fff !important;
  font-weight: 700;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin: 1rem;
}
.glassy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 188, 212, 0.5);
}
.glassy-btn:active {
  transform: translateY(0);
}

/* Card text (under buttons) */
.glassy-card small,
.glassy-card span,
.glassy-card p {
  color: var(--iris-text-muted);
  font-size: 0.9rem;
}

/* Help dropdown */
/* Dropdowns: the HTML places .glassy-dropdown directly inside a .glassy-card container.
   Override the container padding and style the inner links directly so items don't wrap
   and are left-aligned. */
.glassy-card > .glassy-dropdown {
  /* Make inline card dropdowns subtle to avoid a stacked double-card look.
     Use a slight translucent background and remove the heavy outer shadow so
     the dropdown reads as a single layer above the navbar/card. */
  background: rgba(18, 22, 24, 0.6);
  padding: 0.35rem;
  border-radius: 0.6rem;
  box-shadow: none; /* rely on parent's card shadow */
  min-width: 12rem; /* accommodate longer labels */
  backdrop-filter: blur(6px);
}
.glassy-card > .glassy-dropdown a {
  color: var(--iris-text-light);
  padding: 0.6rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  border-radius: 0.5rem;
  margin: 0.125rem 0;
  white-space: nowrap !important;
  text-align: left !important;
}
.glassy-card > .glassy-dropdown a:hover {
  background: rgba(255,255,255,0.03);
  color: var(--iris-text-light);
}

/* Nav-specific dropdown container (used in the top navbar) */
.nav-dropdown {
  background: transparent;
  padding: 0; /* we style the inner links directly */
}
.nav-dropdown .glassy-dropdown {
  /* Navbar-specific dropdown: slightly darker and elevated but with a
     softer, single shadow. Also reduce corner radius so it feels compact. */
  background: rgba(12, 16, 18, 0.95);
  border-radius: 0.5rem;
  padding: 0.25rem 0.4rem;
  min-width: 16rem; /* compact but wide enough for labels */
  box-shadow: 0 10px 30px rgba(2,6,23,0.45);
  transform-origin: top center;
  /* avoid overlapping by nudging dropdown slightly downward */
  margin-top: 0.25rem;
  z-index: 10010; /* above most elements but below modals */
  transition: transform 160ms ease, opacity 160ms ease;
  opacity: 0;
}
.nav-dropdown .glassy-dropdown a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap !important;
  text-align: left !important;
  padding: 0.65rem 1rem !important;
  margin: 0.2rem 0 !important;
  font-size: 1rem;
}
/* Reveal dropdown when not hidden */
.nav-dropdown .glassy-dropdown:not(.hidden) {
  opacity: 1;
  transform: translateY(2px);
}

/* Strong override: ensure nav dropdown items are left-justified regardless of parent card rules */
.nav-dropdown,
.nav-dropdown .glassy-dropdown,
.nav-dropdown .glassy-dropdown a {
  text-align: left !important;
}

/* Align the inner links with a consistent left padding so items line up */
.nav-dropdown .glassy-dropdown a {
  padding-left: 1rem !important;
}

/* Inputs and selects that should match the glassy theme */
.glassy-input,
select.glassy-input,
input.glassy-input,
textarea.glassy-input {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--iris-text-light);
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  outline: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.glassy-input:focus,
select.glassy-input:focus {
  box-shadow: 0 0 0 4px rgba(0,188,212,0.08);
  border-color: rgba(0,188,212,0.45);
}

/* Native option styling — not all browsers respect every rule, but most modern ones will use these */
/* Base option styling (best-effort; some browsers limit styling) */
select.glassy-input option {
  background: var(--iris-card-bg);
  color: var(--iris-text-light);
}

/* Strong hover / focus / selected state to guarantee legibility where supported */
select.glassy-input option:hover,
select.glassy-input option:focus,
select.glassy-input option:checked,
select.glassy-input option:active {
  background: var(--iris-primary);
  color: #ffffff;
}

/* Tweak the expand arrow on Windows/Chrome */
select.glassy-input::-ms-expand { display: none; }

/* Small responsive tweak: full-width select in small containers */
/* Allow selects to size naturally; provide sensible min/max widths for dropdowns */
select.glassy-input {
  width: auto;
  min-width: 220px;
  max-width: 520px;
}

/* Custom dropdown (replacement for native select where consistent styling is required) */
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  min-width: 220px;
  max-width: 520px;
  width: auto;
}
.custom-select-trigger {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--iris-text-light);
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.custom-select-trigger .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-select-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--iris-card-bg);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--iris-shadow);
  z-index: 60;
  max-height: 260px;
  overflow: auto;
  border-radius: 0.5rem;
  display: none;
}
.custom-select-option {
  padding: 0.6rem 0.9rem;
  color: var(--iris-text-light);
  cursor: pointer;
}
.custom-select-option:hover,
.custom-select-option.active {
  background: var(--iris-primary);
  color: #ffffff;
}
.custom-select-wrapper.open .custom-select-options { display: block; }

/* Branding */
.iris-wordmark {
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 1.25rem;
  /* Plain, solid white wordmark with no gradient or decorative effects */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Navbar spacing adjustments: expand the center nav area on md+ screens so items are more spread out */
@media (min-width: 768px) {
  /* Layout: left-aligned logo, centered nav, right-aligned user block */
  .navbar-glass {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  /* Ensure logo stays left and doesn't grow */
  .navbar-glass .navbar-logo {
    flex: 0 0 auto;
    margin-right: 1rem;
  }

    /* Center nav area: take remaining space and center its items */
  .navbar-glass .hidden.md\:flex.space-x-8 {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: 3.25rem; /* increased spacing between items for readability */
  }

  /* Push the user block to the far right */
  .navbar-glass > div.flex.items-center.space-x-4 {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  /* Make individual nav items slightly larger and spaced for readability */
  .navbar-glass .nav-item {
    margin: 0 0.75rem;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    padding: 0.125rem 0.25rem; /* subtle touch target increase */
  }
}

/* Navbar three-column grid for md+ screens: left logo, centered nav, right user block.
   This is more robust than absolute positioning and works with the existing markup.
*/
@media (min-width: 768px) {
  /* More explicit grid: ensure direct children of the inner flex wrapper
     are placed into left/center/right columns regardless of extra nodes. */
    .navbar-glass > .max-w-7xl > .flex {
    display: grid !important;
    grid-template-columns: min-content 1fr min-content;
    align-items: center;
    column-gap: 8rem; /* more horizontal breathing room between columns */
  }

  /* Normalize inner navbar padding to counter per-page Tailwind 'py-4' classes
     Some pages include an inner wrapper with 'py-4' which increases the overall
     navbar height even when the global navbar padding is reduced. This rule
     forces a consistent small vertical padding for the inner flex/grid wrapper. */
  .navbar-glass > .max-w-7xl > .flex {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  /* Place the direct child logo container in column 1 */
  .navbar-glass > .max-w-7xl > .flex > .navbar-logo {
    grid-column: 1 / 2;
    justify-self: start;
    align-self: center;
    margin: 0;
  }

  /* Place the center nav (hidden on small screens) explicitly in column 2 */
  .navbar-glass > .max-w-7xl > .flex > .hidden.md\:flex.space-x-8 {
    grid-column: 2 / 3;
    justify-self: center;
    display: flex;
    gap: 2.5rem;
    align-items: center;
  }

  /* Place the user block into column 3 */
  .navbar-glass > .max-w-7xl > .flex > .flex.items-center.space-x-4 {
    grid-column: 3 / 4;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
}

/* Remove older absolute positioning hacks — grid layout above handles left/center/right.
   If any page structure differs, the grid still lays out columns properly within the
   inner max-width wrapper. */

/* Make the small subtitle next to the wordmark readable on the navbar */
.iris-wordmark + .text-xs {
  color: rgba(255,255,255,0.92) !important;
  font-weight: 600;
}

/* If gradient text still blends with the navbar on some displays, fall back to solid white for maximum contrast */
@media (prefers-contrast: high) {
  .iris-wordmark {
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }
}

/* Centering utility */
.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Scan Results card styling */
.scan-results-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin: 0.75rem auto 0 auto; /* center the card horizontally */
  border: 1px solid rgba(255,255,255,0.04);
  text-align: center; /* center title and inner block */
}
.scan-results-title {
  color: var(--iris-text-light);
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
  display: block;
  width: 100%;
  text-align: center !important;
}
.scan-results-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  color: var(--iris-text-muted);
  display: inline-block; /* keep the list as a centered block while preserving internal left alignment */
  text-align: left;
}
.scan-results-list li {
  padding: 0.35rem 0;
  font-size: 0.95rem;
}
.scan-results-list li strong { color: var(--iris-text-light); width: auto; display: inline-block; margin-right: 0.5rem; }

/* Single-line scan result message (valid/invalid) */
.scan-results-message {
  margin-top: 0.75rem;
  font-weight: 700;
  font-size: 1.125rem; /* slightly larger for better readability */
  line-height: 1.25;
  color: var(--iris-text-light);
  background: rgba(0,0,0,0.04);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}
.scan-results-message.hidden { display: none; }

/* Match message text color to validation glyph for clear affordance */
.scan-results-message.valid {
  color: #16a34a; /* green (tailwind emerald-600) */
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.14);
}
.scan-results-message.invalid {
  color: #ef4444; /* red (tailwind red-500) */
  background: rgba(239,68,68,0.04);
  border: 1px solid rgba(239,68,68,0.12);
}

/* Match the Scan Results title color to the validation state for better affordance */
.scan-results-card.valid .scan-results-title {
  color: #16a34a; /* green for valid */
}
.scan-results-card.invalid .scan-results-title {
  color: #ef4444; /* red for invalid */
}

/* When a single message is visible, hide the verbose list for clarity */
.scan-results-card.show-message .scan-results-list { display: none; }
.scan-results-card.show-message .scan-results-message { display: block; }

/* Validation result visuals (large VALID/INVALID label + framed image) */
.validation-overlay {
  position: absolute;
  /* lowered so the icon/text sit clearly below the card top border and do not touch the image */
  top: -72px; /* nudged up to sit between the border and image */
  left: 50%; /* center horizontally over the image wrapper */
  transform: translate(-50%, -6px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 120;
  pointer-events: none;
  opacity: 0; /* hidden by default; JS removes 'hidden' class to show */
  transition: opacity 220ms ease, transform 220ms ease;
}
.validation-overlay:not(.hidden) { 
  opacity: 1; 
  transform: translate(-50%, 0);
  /* No animation — static placement between border and image */
}

/* Keyframe: subtle slide-in from slightly above */
/* No floating animation — overlay is statically placed */

/* Large label text */
.validation-overlay {
  font-weight: 900;
  font-size: 46px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

/* Responsive: reduce label size and vertical offset on narrow screens */
@media (max-width: 640px) {
  /* on small screens keep the overlay higher so it doesn't overlap the image */
  .validation-overlay { top: -52px; font-size: 32px; gap: 12px; }
  .validation-overlay::before { width: 48px; height: 48px; }
  /* Reduce scan result message size slightly on very narrow screens */
  .scan-results-message { font-size: 0.95rem; }
}

/* Circular status glyph to left of label */
.validation-overlay::before {
  content: '';
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}

/* Valid state: green glyph + text */
.validation-overlay.valid {
  color: #ffffff;
}
.validation-overlay.valid::before {
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.28) 0%, #9ef0b9 6%, #4be07a 22%, #22c55e 55%, #0fa74a 100%);
  border: 6px solid rgba(0,0,0,0.45);
  box-shadow: 0 14px 40px rgba(34,197,94,0.15), 0 6px 18px rgba(0,0,0,0.6);
}

/* Invalid state: red glyph + text */
.validation-overlay.invalid {
  color: #fff5f5;
}
.validation-overlay.invalid::before {
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.18) 0%, #ffb4b4 6%, #ff6b6b 22%, #ff3b3b 55%, #c92a2a 100%);
  border: 6px solid rgba(0,0,0,0.45);
  box-shadow: 0 14px 40px rgba(255,59,59,0.12), 0 6px 18px rgba(0,0,0,0.6);
}

/* Framed image border styles applied to the result image element when JS toggles classes */
.valid-border {
  border-radius: 6px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  /* outer green frame */
  outline: 6px solid #55d37d; /* visible solid frame */
  outline-offset: 8px;
  transition: outline-color 220ms ease, box-shadow 220ms ease, transform 160ms ease;
}
.valid-border:hover { transform: translateY(-2px); }

.invalid-border {
  border-radius: 6px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  outline: 6px solid #ff5b5b;
  outline-offset: 8px;
  transition: outline-color 220ms ease, box-shadow 220ms ease, transform 160ms ease;
}
.invalid-border:hover { transform: translateY(-2px); }

/* Ensure the framed image spacing fits inside the card without overflow */
#idImageWrapper img {
  display: block;
  max-width: 100%;
  border-radius: 6px;
}

/* Hide the small 'scannerUsedDisplay' text inside the results section to avoid overlay collisions */
#resultsSection #scannerUsedDisplay { display: none !important; }

/* Modern processing loader (ring + pulsing dot) */
.loader-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.loader-card {
  /* Dark glassy card to match site theme */
  background: linear-gradient(180deg, rgba(43,48,53,0.96), rgba(38,42,46,0.98));
  color: var(--iris-text-light);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 14px 40px rgba(2,6,23,0.45), 0 6px 18px rgba(2,6,23,0.25);
  backdrop-filter: var(--iris-blur);
}
.loader-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  /* subtle semi-transparent ring for dark background */
  border: 6px solid rgba(255,255,255,0.06);
  border-top-color: var(--iris-primary);
  box-shadow: 0 10px 26px rgba(0,0,0,0.6), inset 0 2px 6px rgba(255,255,255,0.02);
  animation: iris-spin 900ms linear infinite;
  flex: 0 0 auto;
}
.loader-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #18c1d6, #00a6b0);
  box-shadow: 0 8px 20px rgba(24,199,211,0.15), 0 2px 6px rgba(0,0,0,0.45) inset;
  transform: translateY(0);
  animation: iris-pulse 1100ms ease-in-out infinite;
  pointer-events: none;
  /* place the dot aligned with the left quadrant of the ring */
  left: 26px;
  top: 24px;
}
.loader-wrapper .loader-label {
  color: var(--iris-text-muted);
  font-weight: 800;
  font-size: 1.25rem; /* larger label */
  letter-spacing: 0.02em;
}

/* Slightly tighter card to match the reference image */
.loader-card { padding: 1.25rem 1.5rem; border-radius: 0.75rem; }

@keyframes iris-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes iris-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.78); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .loader-ring { animation: none; }
  .loader-dot { animation: none; }
}