/* ======================================================================
   responsive.css — breakpoints for tablet/desktop and orientation.
   Mobile-first: base rules in style.css already target small screens.
   ====================================================================== */

/* Small phones ----------------------------------------------------------- */
@media (max-width: 360px) {
  :root { --edge-pad: 14px; }
  .rc-register-screen { padding-top: max(22vh, 120px); } /* less top space on tiny screens */
  .rc-register-screen__inner { gap: 0.9rem; }
  .rc-shutter-btn { width: 62px; height: 62px; }
  .rc-card { padding: 1.2rem; }
  .rc-scanning-stage { width: 140px; height: 195px; }
  .rc-magnify { width: 56px; height: 56px; }
  .rc-magnify__lens { width: 50px; height: 50px; }

  /* Success screen: compact badge + tighter card for 320-360px viewports */
  .rc-success-screen { padding: 16px var(--edge-pad); }
  .rc-success-badge { width: 100px; height: 100px; }
  .rc-success-badge__ring--mid  { inset: -8px; }
  .rc-success-badge__ring--outer { inset: -16px; }
  .rc-success-badge__check { width: 50px; height: 50px; }
  .rc-success-card { padding: 1.4rem 1rem; gap: 0.75rem; }
  .rc-success-title { font-size: 1.55rem; }
  .rc-result__inner { padding: 1.2rem 1rem; }
}

/* iPhone SE 2nd/3rd gen (375×667) and similar compact portrait phones */
@media (max-width: 390px) and (max-height: 700px) {
  .rc-register-screen { padding-top: max(24vh, 140px); }
}

/* Landscape phones --------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .rc-register-screen { justify-content: center; padding-top: 12px; padding-bottom: 12px; }
  .rc-register-screen__inner { gap: 0.6rem; }
  .rc-register-screen__brand { display: none; }
  /* Camera landscape */
  .rc-camera-topbar { padding-top: 8px; padding-bottom: 6px; }
  .rc-camera-topbar__hint { display: none; }
  .rc-shutter-btn { width: 58px; height: 58px; }
  .rc-camera-controls { padding: 10px var(--edge-pad); }
  .rc-scanning-stage { width: 100px; height: 140px; }
  .rc-badge { width: 84px; height: 84px; }
  .rc-badge__check, .rc-badge__mark { width: 38px; height: 38px; }
  /* Success landscape */
  .rc-success-screen { padding: 12px var(--edge-pad); }
  .rc-success-badge { width: 80px; height: 80px; }
  .rc-success-badge__ring--mid  { inset: -7px; }
  .rc-success-badge__ring--outer { inset: -14px; }
  .rc-success-badge__check { width: 40px; height: 40px; }
  .rc-success-card { gap: 0.55rem; padding: 1rem; }
  .rc-success-title { font-size: var(--step-xl); }
  .rc-success-divider { display: none; }
  .rc-result__inner { padding: 1rem; gap: 0.6rem; }
}

/* Tablet ------------------------------------------------------------------- */
@media (min-width: 640px) {
  .rc-register-screen__inner { max-width: 460px; }
  .rc-result__inner { max-width: 440px; }
  .rc-success-card { max-width: 440px; }
  .rc-scanning-stage { width: 200px; height: 280px; }
  /* On wider screens keep bottle centred in the portrait image */
  .rc-bg__img { background-position: center center; }
}

/* Desktop / laptop ----------------------------------------------------------- */
@media (min-width: 900px) {
  body { overflow: hidden; }
  #app { max-width: 1440px; margin: 0 auto; }
  .rc-register-screen { justify-content: center; }
  .rc-register-screen__inner,
  .rc-loading__inner,
  .rc-result__inner { max-width: 440px; }
  /* Camera: centred device frame */
  .rc-camera-screen { flex-direction: column; align-items: center; padding: 28px 0; }
  .rc-camera-topbar {
    width: min(92vw, 460px);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: rgba(6,0,10,0.96);
    border: 1px solid rgba(212,175,55,0.12);
    border-bottom: none;
  }
  .rc-camera-viewport {
    width: min(92vw, 460px);
    height: min(68vh, 650px);
    flex: none;
    border-left: 1px solid rgba(212,175,55,0.12);
    border-right: 1px solid rgba(212,175,55,0.12);
  }
  .rc-camera-controls {
    width: min(92vw, 460px);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: rgba(6,0,10,0.96);
    border: 1px solid rgba(212,175,55,0.12);
    border-top: none;
  }
}

@media (min-width: 1200px) {
  .rc-register-screen__inner { max-width: 500px; }
}