/* ======================================================================
   Royal Challenge — Bottle Verification Campaign
   style.css — Design tokens, base styles, layout, and components.
   ====================================================================== */

/* ---------- Design tokens ------------------------------------------- */
:root {
  /* Royal Red palette — deep crimson on near-black */
  --rc-bg:      #06000a;
  --red-950:    #0d0005;
  --red-900:    #1a0009;
  --red-800:    #2d000f;
  --red-700:    #480017;
  --red-600:    #6b0022;
  --red-500:    #8b1a2e;
  --red-400:    #b22234;
  --red-300:    #dc143c;
  --red-200:    #e8474c;

  /* Gold accents — luxury finish */
  --gold-300: #f3da8f;
  --gold-500: #d4af37;
  --gold-600: #b8923a;
  --gold-700: #8a6a1c;

  --amber-500: #c97a2b;

  --rust-500: #9b4b3b;
  --rust-300: #c98269;

  --white-95: #f7f4ee;
  --white-70: rgba(247, 244, 238, 0.72);
  --white-45: rgba(247, 244, 238, 0.45);
  --white-15: rgba(247, 244, 238, 0.12);

  /* Gradients */
  --gradient-gold: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 45%, var(--gold-700) 100%);
  --gradient-gold-sheen: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.55) 45%, transparent 60%);
  --gradient-royal: linear-gradient(135deg, var(--red-400) 0%, var(--red-600) 55%, var(--red-900) 100%);
  --gradient-vignette:
    radial-gradient(ellipse 120% 70% at 50% -5%, rgba(176, 34, 52, 0.45), transparent 60%),
    radial-gradient(ellipse 80% 60% at 85% 100%, rgba(139, 26, 46, 0.25), transparent 55%);

  /* Typography */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --step-xs:  clamp(0.7rem,  0.67rem + 0.15vw, 0.78rem);
  --step-sm:  clamp(0.875rem,0.83rem + 0.2vw,  0.95rem);
  --step-base:clamp(1rem,    0.95rem + 0.25vw, 1.08rem);
  --step-lg:  clamp(1.2rem,  1.1rem  + 0.5vw,  1.45rem);
  --step-xl:  clamp(1.7rem,  1.4rem  + 1.2vw,  2.3rem);
  --step-2xl: clamp(2.2rem,  1.7rem  + 2.4vw,  3.6rem);
  --step-3xl: clamp(2.8rem,  2rem    + 3.6vw,  4.8rem);

  /* Layout */
  --radius-sm:  10px;
  --radius-md:  18px;
  --radius-lg:  28px;
  --radius-pill:999px;
  --max-content:480px;
  --edge-pad:   clamp(18px, 5vw, 40px);

  /* Motion */
  --ease-lux:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 700ms;

  --shadow-card:     0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 2px 0 0 rgba(255,255,255,0.03) inset;
  --shadow-gold-glow:0 0 0 1px rgba(212,175,55,0.3), 0 12px 40px -10px rgba(212,175,55,0.35);
  --shadow-red-glow: 0 0 0 1px rgba(176, 34, 52, 0.4), 0 12px 40px -10px rgba(176,34,52,0.3);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}

/* ---------- Reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--rc-bg);
  color: var(--white-95);
  font-family: var(--font-body);
  font-size: var(--step-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: 4px;
}
.rc-hidden { display: none !important; }
.rc-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Atmospheric background — two images crossfade ------------- */
.rc-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.rc-bg__img {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
}
/* image2 is the premium dark-room bottle shot — always-visible base layer */
.rc-bg__img--2 {
  background-image: url('../assets/images/image02.png');
  z-index: 1;
}
/* image1 crossfades on top of image2 */
.rc-bg__img--1 {
  background-image: url('../assets/images/image01.png');
  z-index: 2;
  animation: rc-bg-crossfade 10s ease-in-out infinite;
}
/* Gradient overlay — transparent at top so bottle is visible, darker toward form */
.rc-bg__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(6, 0, 10, 0.04) 0%,
    rgba(6, 0, 10, 0.10) 30%,
    rgba(6, 0, 10, 0.40) 58%,
    rgba(6, 0, 10, 0.72) 100%
  );
}

/* ---------- App shell / screen manager --------------------------------- */
#app {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: transparent;
  z-index: 1;
}

.rc-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  background: transparent;
}
.rc-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-vignette);
  pointer-events: none;
  z-index: 0;
}
.rc-screen--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.is-entering-forward { animation: rc-enter-forward var(--dur-base) var(--ease-lux) both; z-index: 2; }
.is-leaving-forward  { animation: rc-leave-forward  var(--dur-base) var(--ease-lux) both; z-index: 1; }
.is-entering-back    { animation: rc-enter-back      var(--dur-base) var(--ease-lux) both; z-index: 2; }
.is-leaving-back     { animation: rc-leave-back      var(--dur-base) var(--ease-lux) both; z-index: 1; }

/* ---------- Typography helpers ----------------------------------------- */
.rc-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.rc-eyebrow::before {
  content: none;
}
.rc-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.rc-subtext { color: var(--white-70); font-weight: 400; }
.rc-mono-tag {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.08em;
  color: var(--white-45);
}

/* ---------- Buttons ------------------------------------------------------ */
.rc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1rem 1.9rem;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-sm);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-fast) var(--ease-out-soft),
              opacity var(--dur-fast);
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.rc-btn--primary {
  background: var(--gradient-gold);
  color: #000;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.5), 0 12px 40px -8px rgba(212,175,55,0.55), 0 4px 16px -4px rgba(212,175,55,0.4);
}
.rc-btn--primary::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--gradient-gold-sheen);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-out-soft);
}
.rc-btn--primary:hover::after,
.rc-btn--primary:focus-visible::after { transform: translateX(120%); }
.rc-btn--primary:hover { transform: translateY(-2px); }
.rc-btn--primary:active { transform: translateY(0) scale(0.98); }

.rc-btn--ghost {
  background: transparent;
  color: var(--white-95);
  border: 1px solid var(--white-15);
}
.rc-btn--ghost:hover { border-color: var(--gold-500); color: var(--gold-300); }

.rc-btn--icon {
  width: 3rem; height: 3rem; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--white-15);
  color: var(--white-95);
  backdrop-filter: blur(6px);
}
.rc-btn--icon:hover { border-color: var(--gold-500); }

.rc-btn--disabled,
.rc-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none !important; }

.rc-btn--block { width: 100%; }

.rc-link-btn {
  background: none; border: none; color: var(--gold-300);
  font-weight: 600; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; padding: 0.4rem;
}

/* ---------- Cards --------------------------------------------------------- */
.rc-card {
  /* Fully transparent shell — gold border + blur define the window, image shows through */
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-top: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: var(--radius-lg);
  box-shadow:
    0 16px 48px -16px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 0 rgba(212, 175, 55, 0.18) inset;
  backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#register-form.rc-card {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- Crest --------------------------------------------------------- */
.rc-crest {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 1px solid var(--gold-500);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: radial-gradient(circle at 50% 35%, rgba(178, 34, 52, 0.3), transparent 70%);
  animation: rc-crest-glow 4s ease-in-out infinite;
}
.rc-crest::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.22);
}
.rc-crest__mark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Register screen ------------------------------------------- */
.rc-register-screen {
  /* flex-end + overflow-y:auto clips content at the top — unusable on small phones */
  justify-content: flex-start;
  align-items: center;
  padding: 0 var(--edge-pad) max(1.5rem, env(safe-area-inset-bottom));
  padding-top: max(32vh, 180px); /* space above shows the bottle; collapses when keyboard opens */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 6rem; /* keeps focused fields above virtual keyboard */
}
.rc-register-screen__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 2.5vw, 1.4rem);
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
.rc-register-screen__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
.rc-register-screen__title {
  font-size: var(--step-2xl);
  margin-top: 0.2rem;
}
.rc-register-screen__title .rc-gold-text {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rc-register-screen__subtitle {
  font-size: var(--step-base);
  max-width: 32ch;
}
.rc-register-screen__legal {
  text-align: center;
  margin-top: -0.5rem;
}

/* ---------- Form field ---------------------------------------------------- */
.rc-screen-header { padding: clamp(20px, 5vw, 32px) var(--edge-pad) 0; display: flex; align-items: center; gap: 12px; }
.rc-back-btn { background: none; border: none; color: var(--white-70); font-size: 1.4rem; cursor: pointer; padding: 6px 10px; border-radius: 50%; }
.rc-back-btn:hover { color: var(--gold-300); background: rgba(255,255,255,0.05); }

.rc-field { position: relative; }
.rc-field__control {
  position: relative;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.52); /* opaque enough to read clearly over the card */
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.rc-field__control input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--white-95);
  font-size: var(--step-lg);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  padding: 1.55rem 1.1rem 0.7rem;
  outline: none;
}
.rc-field__label {
  position: absolute;
  left: 1.1rem; top: 1.1rem;
  color: var(--white-45);
  font-size: var(--step-base);
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-out-soft), font-size var(--dur-fast), color var(--dur-fast);
  transform-origin: left top;
}
.rc-field__control input:focus + .rc-field__label,
.rc-field__control input:not(:placeholder-shown) + .rc-field__label {
  transform: translateY(-0.65rem) scale(0.72);
  color: var(--gold-300);
}
.rc-field__control:focus-within {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12);
}
.rc-field--valid   .rc-field__control { border-color: rgba(212, 175, 55, 0.5); }
.rc-field--invalid .rc-field__control { border-color: var(--rust-500); }
.rc-field__hint {
  min-height: 1.2em;
  font-size: var(--step-xs);
  color: #ff3b30;
  margin-top: 0.4rem;
  padding-left: 0.2rem;
}
/* ---- Phone prefix layout ----
   Replaces the hacked inline padding with a proper flex row so +91 and
   the digit input column are always pixel-perfectly aligned regardless of
   font size, viewport, or browser zoom.

   DOM structure (see index.html):
     .rc-field__control
       .rc-field__phone-row          ← flex row
         .rc-field__prefix           ← fixed "+91" column + hairline divider
         .rc-field__phone-input-wrap ← flex:1 column with input + label
   -------------------------------------------------------------------- */
.rc-field__phone-row {
  display: flex;
  align-items: stretch;
  min-height: 3.8rem;    /* matches the default single-input control height */
}
.rc-field__prefix {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 1rem 0.72rem 1.1rem;
  color: var(--white-95);
  font-family: var(--font-mono);
  font-size: var(--step-lg);
  letter-spacing: 0.04em;
  font-weight: 500;
  pointer-events: none;
  user-select: none;
  /* Hairline separator — picks up gold tint on focus/valid */
  border-right: 1px solid rgba(212, 175, 55, 0.2);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.rc-field__control:focus-within .rc-field__prefix,
.rc-field--valid .rc-field__prefix {
  border-right-color: rgba(212, 175, 55, 0.5);
}

.rc-field__phone-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;   /* allow text-overflow truncation inside flex child */
}
/* Override default input padding for the phone field */
.rc-field__phone-input-wrap input {
  padding-left: 0.9rem;
  padding-right: 1.1rem;
  width: 100%;
}
/* Float label inside the phone column, anchored to its left edge */
.rc-field__phone-input-wrap .rc-field__label {
  left: 0.9rem;
}

/* ---------- Camera screen ------------------------------------------------- */
.rc-camera-screen { background: #000; }

/* Top navigation bar */
.rc-camera-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) var(--edge-pad) 12px;
  background: linear-gradient(180deg, rgba(6,0,10,0.92) 0%, transparent 100%);
  position: relative;
  z-index: 10;
}
.rc-camera-topbar__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  min-width: 0;
}
.rc-camera-topbar__hint {
  font-size: var(--step-xs);
  color: var(--white-45);
  margin: 0;
  font-family: var(--font-body);
}

/* Camera viewport fills remaining space */
.rc-camera-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #000;
}
.rc-camera-viewport video,
.rc-camera-viewport .rc-preview-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.rc-preview-img { opacity: 0; pointer-events: none; transition: opacity var(--dur-base); }
.rc-camera-screen--preview #camera-video { opacity: 0; }
.rc-camera-screen--preview .rc-preview-img { opacity: 1; }

/* Preview captured checkmark stamp */
.rc-preview-stamp {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(212,175,55,0.6));
  transition: transform 380ms var(--ease-lux);
}
.rc-camera-screen--preview .rc-preview-stamp { transform: translate(-50%, -50%) scale(1); }

/* Camera frame overlay */
.rc-camera-frame {
  position: absolute;
  inset: clamp(16px, 5vw, 36px) clamp(18px, 7vw, 44px);
  pointer-events: none;
  z-index: 2;
}
.rc-camera-frame__corner { position: absolute; width: 32px; height: 32px; border: 2.5px solid var(--gold-500); opacity: 0.9; }
.rc-camera-frame__corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 10px; }
.rc-camera-frame__corner--tr { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 10px; }
.rc-camera-frame__corner--bl { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 10px; }
.rc-camera-frame__corner--br { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 10px; }
.rc-camera-frame__scanline {
  position: absolute; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
  filter: drop-shadow(0 0 6px var(--gold-500));
  animation: rc-scan-sweep 2.6s ease-in-out infinite;
}
.rc-camera-screen--preview .rc-camera-frame { opacity: 0; }

.rc-camera-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 5; pointer-events: none; }
.rc-flash--active { animation: rc-flash 380ms ease-out; }

/* Bottom controls bar (outside viewport, always at bottom) */
.rc-camera-controls {
  flex-shrink: 0;
  z-index: 10;
  padding: 18px var(--edge-pad) calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(6,0,10,0.96) 0%, rgba(6,0,10,0.75) 70%, transparent 100%);
  position: relative;
}
/* Live capture controls */
.rc-camera-live-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
}
.rc-camera-controls__spacer { width: 3rem; flex-shrink: 0; }

/* Shutter button */
.rc-shutter-btn {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.rc-shutter-btn__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.88);
  transition: border-color var(--dur-fast);
}
.rc-shutter-btn:hover .rc-shutter-btn__ring { border-color: var(--gold-300); }
.rc-shutter-btn__inner {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--gradient-gold);
  box-shadow: 0 0 18px rgba(212,175,55,0.4);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.rc-shutter-btn:active .rc-shutter-btn__inner { transform: scale(0.84); box-shadow: none; }

/* Preview controls */
.rc-preview-controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.rc-camera-screen--preview .rc-camera-live-controls { display: none; }
.rc-camera-screen--preview .rc-preview-controls { display: flex; }
.rc-camera-screen--preview [data-action="switch-camera"] { opacity: 0; pointer-events: none; }

/* Keep the center title visually balanced between the side controls */
.rc-camera-topbar > .rc-btn--icon {
  flex: 0 0 3rem;
}

/* ---------- T&C Checkbox -------------------------------------------------- */
.rc-tnc-row { padding-top: 0.15rem; }

.rc-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
  user-select: none;
}
.rc-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.rc-checkbox-custom {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 5px;
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: all var(--dur-fast);
}
.rc-checkbox-input:checked ~ .rc-checkbox-custom {
  background: var(--gold-500);
  border-color: var(--gold-500);
}
.rc-checkbox-input:checked ~ .rc-checkbox-custom::after {
  content: '';
  display: block;
  width: 11px; height: 7px;
  border-left: 2.5px solid var(--red-950);
  border-bottom: 2.5px solid var(--red-950);
  transform: rotate(-45deg) translate(1px, -1px);
}
.rc-checkbox-text {
  font-size: var(--step-xs);
  color: var(--white-70);
  line-height: 1.55;
}
.rc-link-btn--inline {
  font-size: inherit;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--gold-300);
}

/* ---------- Loading / scanning screen -------------------------------------- */
.rc-loading-screen { justify-content: center; align-items: center; text-align: center; padding: var(--edge-pad); overflow: hidden; }
.rc-loading__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(1.2rem, 3vw, 1.75rem); max-width: 360px; width: 100%; }

/* Scanning stage: contains captured image OR SVG bottle */
.rc-scanning-stage {
  position: relative;
  width: clamp(140px, 40vw, 175px);
  height: clamp(190px, 55vw, 240px);
  flex-shrink: 0;
}

/* Captured image shown when available */
.rc-scanning-stage__img {
  display: none;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid rgba(212,175,55,0.22);
  box-shadow: 0 0 0 1px rgba(178,34,52,0.12) inset, 0 8px 32px rgba(0,0,0,0.5);
}
.rc-scanning-stage__img--loaded { display: block; }
/* Hide SVG fallback when real image is shown */
.rc-scanning-stage__img--loaded ~ .rc-loading__bottle-wrap { display: none; }

.rc-loading__bottle-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.rc-loading__liquid {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(var(--fill, 0));
  transition: transform 900ms var(--ease-lux);
  animation: rc-liquid-shimmer 2.4s ease-in-out infinite;
}
.rc-loading__scan-beam {
  transform-box: fill-box;
  fill: var(--gold-300);
  opacity: 0;
  filter: drop-shadow(0 0 6px var(--gold-500));
}
[data-loader-bottle].is-scanning .rc-loading__scan-beam { animation: rc-loader-scan 1.8s ease-in-out infinite; }

/* Magnifying glass */
/* Magnifying glass */
.rc-magnify {
  position: absolute;
  top: 50%; left: 50%;
  width: 72px; height: 72px;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  animation: rc-magnify-scan 4.2s ease-in-out infinite;
}
.rc-magnify__lens {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 2.5px solid var(--gold-500);
  background: rgba(212,175,55,0.05);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.2), 0 0 20px rgba(212,175,55,0.35), inset 0 0 14px rgba(212,175,55,0.07);
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.rc-magnify__lens::before {
  content: '';
  position: absolute;
  top: 8%; left: 12%;
  width: 38%; height: 28%;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: rotate(-30deg);
}
.rc-magnify__lens::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(212,175,55,0.08) 100%);
}
.rc-magnify__handle {
  position: absolute;
  top: 49px; left: 49px;
  width: 10px; height: 30px;
  background: var(--gradient-gold);
  border-radius: 5px;
  transform: rotate(-42deg);
  transform-origin: top center;
  z-index: 1;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}
 
/* Scan analysis ping markers */
.rc-scan-marker {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-300);
  z-index: 8;
  animation: rc-scan-blink 2.2s ease-in-out infinite;
}
.rc-scan-marker::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-500);
  animation: rc-scan-ping 2.2s ease-out infinite;
}
.rc-scan-marker--1 { top: 26%; left: 32%; animation-delay: 0s; }
.rc-scan-marker--2 { top: 54%; left: 64%; animation-delay: 0.72s; }
.rc-scan-marker--3 { top: 74%; left: 26%; animation-delay: 1.44s; }
 
.rc-loader__message { font-family: var(--font-mono); font-size: var(--step-sm); color: var(--gold-300); letter-spacing: 0.04em; min-height: 1.4em; transition: opacity 180ms; }
.rc-loader__message--swap { opacity: 0; }
.rc-progress { width: min(240px, 80%); height: 3px; background: var(--white-15); border-radius: var(--radius-pill); overflow: hidden; }
.rc-progress__bar { height: 100%; width: 0%; background: var(--gradient-gold); transition: width 650ms var(--ease-out-soft); }
/* ==========================================================================
   SUCCESS SCREEN — premium centered glass-card layout
   ========================================================================== */
/* NOTE: must NOT set position here — rc-screen sets position:absolute;inset:0 to fill viewport */
.rc-success-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 40px) var(--edge-pad);
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
  isolation: isolate; /* establishes stacking context so z-index on children works */
}

/* Full-screen confetti stays at z:1, behind the card */
.rc-confetti-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.rc-confetti {
  position: absolute;
  top: -8%;
  left: var(--x);
  width: var(--size, 8px);
  height: calc(var(--size, 8px) * 1.6);
  background: var(--color);
  border-radius: 2px;
  opacity: 0.92;
  transform: rotate(var(--rotate));
  animation: rc-confetti-fall var(--fall-duration) var(--ease-out-soft) var(--delay) forwards;
}

/* Ambient gold radial glow that sits behind the card */
.rc-success-glow {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  background: radial-gradient(circle, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0.06) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: rc-success-glow-pulse 3.6s ease-in-out infinite;
}

/* Glass card — the single centred container */
.rc-success-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 2.2vw, 1.4rem);
  padding: clamp(2rem, 6vw, 3rem) clamp(1.5rem, 5vw, 2.5rem);
  background: transparent;
  border: none;
  border-radius: 28px;
  backdrop-filter: none;
  box-shadow: none;
}

/* Badge — 156 px, deep glow, three pulsing rings */
.rc-success-badge {
  width: 156px; height: 156px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%,
    rgba(212,175,55,0.28) 0%,
    rgba(212,175,55,0.08) 50%,
    transparent 72%);
  position: relative;
  flex-shrink: 0;
  animation: rc-badge-pop 640ms var(--ease-lux) both;
  filter: drop-shadow(0 0 24px rgba(212,175,55,0.35));
}
.rc-success-badge__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--gold-500);
  animation: rc-badge-pulse 2.8s ease-in-out infinite;
}
.rc-success-badge__ring--inner  { inset: 0;     border-color: rgba(212,175,55,0.7);  animation-delay: 0s; }
.rc-success-badge__ring--mid    { inset: -13px; border-color: rgba(212,175,55,0.35); animation-delay: 0.5s; }
.rc-success-badge__ring--outer  { inset: -26px; border-color: rgba(212,175,55,0.15); animation-delay: 1.0s; }

.rc-success-badge__check {
  width: 76px; height: 76px;
  color: var(--gold-300);
  overflow: visible;
}

/* Checkmark draw-on animation */
.rc-check-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: rc-check-draw 700ms var(--ease-out-soft) 380ms both;
}

/* Eyebrow text */
.rc-success-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
  animation: rc-slide-up 500ms var(--ease-out-soft) 200ms both;
}

/* Title */
.rc-success-title {
  font-size: clamp(1.85rem, 1.4rem + 2.2vw, 2.85rem);
  line-height: 1.06;
  animation: rc-slide-up 540ms var(--ease-out-soft) 260ms both;
}
.rc-success-enjoy {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.9rem + 1.3vw, 1.65rem);
  font-weight: 600;
  color: var(--gold-300);
  text-align: center;
  letter-spacing: 0.01em;
  animation: rc-slide-up 540ms var(--ease-out-soft) 320ms both;
}

/* Gold divider — ── ✦ ── */
.rc-success-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 80%;
  animation: rc-slide-up 560ms var(--ease-out-soft) 310ms both;
}
.rc-success-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.45), transparent);
}
.rc-success-divider svg { flex-shrink: 0; opacity: 0.75; }

/* Body message */
.rc-success-message {
  color: var(--white-70);
  font-size: var(--step-sm);
  line-height: 1.65;
  max-width: 30ch;
  animation: rc-slide-up 560ms var(--ease-out-soft) 360ms both;
}
.rc-success-message strong { color: var(--gold-300); font-weight: 700; }

/* Confidence chip (inherits .rc-verify-chip base, gets extra anim delay) */
.rc-success-chip {
  animation: rc-slide-up 560ms var(--ease-out-soft) 420ms both;
}

/* CTA button */
.rc-success-cta {
  margin-top: 0.4rem;
  animation: rc-slide-up 560ms var(--ease-out-soft) 480ms both;
}

/* ==========================================================================
   FAILURE result screen (kept from original, uses .rc-result-screen)
   ========================================================================== */
/* NOTE: must NOT set position here — rc-screen sets position:absolute;inset:0 to fill viewport */
.rc-result-screen {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 5vw, 48px) var(--edge-pad);
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
}
.rc-result__inner {
  margin: auto;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.2rem, 4vw, 2rem);
  background: linear-gradient(
    155deg,
    rgba(155, 75, 59, 0.12) 0%,
    rgba(72, 0, 23, 0.1) 40%,
    rgba(6, 0, 10, 0.08) 100%
  );
  border: 1px solid rgba(155, 75, 59, 0.25);
  border-radius: 28px;
  backdrop-filter: blur(28px);
  box-shadow:
    0 32px 80px -24px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 1px 0 0 rgba(155, 75, 59, 0.2) inset,
    0 0 60px -10px rgba(155, 75, 59, 0.1);
}

/* Badge (used only by failure screen now) */
.rc-badge {
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(212,175,55,0.35), transparent 65%);
  position: relative;
  flex-shrink: 0;
}
.rc-badge__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold-500); animation: rc-badge-pulse 2.4s ease-in-out infinite; }
.rc-badge__ring--outer { inset: -10px; border-color: rgba(212, 175, 55, 0.3); animation-delay: 0.4s; }
.rc-badge__check { width: 50px; height: 50px; color: var(--gold-300); }

.rc-badge--sm { width: 88px; height: 88px; }
.rc-badge--sm .rc-badge__ring--outer { inset: -10px; }
.rc-badge--sm .rc-badge__mark { width: 38px; height: 38px; }

/* Result text */
.rc-result__eyebrow {
  font-family: var(--font-mono); font-size: var(--step-xs);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-300);
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
}
.rc-result__eyebrow::before, .rc-result__eyebrow::after {
  content: ''; width: 20px; height: 1px; background: var(--gold-500); display: inline-block;
}
.rc-result__text { display: flex; flex-direction: column; gap: 0.45rem; }
.rc-result__title { font-size: clamp(1.8rem, 1.4rem + 2.2vw, 2.8rem); line-height: 1.05; }
.rc-result__message {
  color: var(--white-95); max-width: 34ch; width: 100%; font-size: clamp(1.2rem, 1rem + 1.2vw, 1.8rem); font-family: var(--font-display); font-weight: 600; line-height: 1.15;
}
.rc-result__message strong { color: var(--gold-300); font-weight: 700; }
.rc-result__text, .rc-result__title, .rc-result__message { text-align: center; }
.rc-result-screen--failure .rc-result__inner {
  max-width: 400px;
  margin: clamp(7rem, 24vh, 11rem) auto 2rem;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Verified / status chip */
.rc-verify-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(212,175,55,0.25); border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem; font-family: var(--font-mono); font-size: var(--step-xs);
  color: var(--white-70); background: rgba(212,175,55,0.05);
  letter-spacing: 0.04em;
}
.rc-verify-chip strong { color: var(--gold-300); font-weight: 700; }
.rc-verify-chip__divider { width: 1px; height: 11px; background: var(--white-15); }
.rc-verify-chip--failure { border-color: rgba(155,75,59,0.35); background: rgba(155,75,59,0.06); }
.rc-verify-chip--failure strong { color: var(--rust-300); }

/* ---------- Failure screen --------------------------------------------------- */
.rc-badge--failure {
  background: rgba(6, 0, 10, 0.78);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
.rc-badge--failure .rc-badge__ring {
  border-color: var(--rust-300);
  box-shadow: 0 0 12px rgba(201, 130, 105, 0.45);
}
.rc-badge--failure .rc-badge__ring--outer { border-color: rgba(201, 130, 105, 0.65); }
.rc-badge__mark { width: 46px; height: 46px; color: var(--rust-300); }
.rc-badge--failure .rc-badge__mark {
  color: #ffd3c5;
  filter: drop-shadow(0 0 6px rgba(255, 211, 197, 0.45));
}
/* Failure actions — full width, stacked */
.rc-failure-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 320px;
}
.rc-failure-actions .rc-btn {
  padding: 0.85rem 1.5rem; /* slightly smaller than default for compact fit */
}

/* ---------- Toast --------------------------------------------------------- */
.rc-toast-container { position: fixed; top: max(20px, env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; z-index: 100; pointer-events: none; padding: 0 20px; }
.rc-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--red-800); border: 1px solid var(--white-15);
  border-radius: var(--radius-pill);
  padding: 0.7rem 0.6rem 0.7rem 1rem;
  box-shadow: var(--shadow-card);
  transform: translateY(-140%);
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast);
  max-width: 92vw;
}
.rc-toast--visible { transform: translateY(0); opacity: 1; }
.rc-toast--error { border-color: rgba(155, 75, 59, 0.5); }
.rc-toast--success { border-color: rgba(212, 175, 55, 0.5); }
.rc-toast__icon { font-size: 1rem; color: var(--gold-300); }
.rc-toast__message { font-size: var(--step-sm); }
.rc-toast__close { background: none; border: none; color: var(--white-45); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; }

/* ---------- Modal --------------------------------------------------------- */
.rc-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 0, 10, 0.75);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--dur-fast);
  padding: 20px;
}
.rc-modal--visible { opacity: 1; }
.rc-modal__dialog {
  background: var(--red-900); border: 1px solid rgba(212,175,55,0.15);
  border-radius: var(--radius-md); padding: 1.75rem;
  max-width: 380px; width: 100%;
  box-shadow: var(--shadow-card);
  transform: scale(0.94) translateY(10px);
  transition: transform var(--dur-fast) var(--ease-out-soft);
}
.rc-modal--visible .rc-modal__dialog { transform: scale(1) translateY(0); }
.rc-modal__title { font-family: var(--font-display); font-size: var(--step-lg); margin-bottom: 0.6rem; }
.rc-modal__body { color: var(--white-70); font-size: var(--step-sm); margin-bottom: 1.4rem; }
.rc-modal__actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Camera state overlay ------------------------------------------- */
[data-camera-state].is-loading::after {
  content: 'Opening camera\2026';
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: var(--red-950);
  color: var(--white-70); font-family: var(--font-mono); font-size: var(--step-sm);
}

/* ---------- Gold text utility --------------------------------------------- */
.rc-gold-text {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}