/* =======================
   Auth Modals – full CSS
   ======================= */

:root{
  --oo-primary:#2f4364; --oo-primary-ink:#fff;
  --oo-border:#e6ebf1; --oo-ink:#1b2430; --oo-ink-2:#5f6b7a;
  --oo-overlay:rgba(12,20,33,.55); --oo-bg:#fff;
  --oo-radius:18px; --oo-shadow:0 20px 60px rgba(18,28,45,.18);
  --oo-speed:360ms; --oo-ease:cubic-bezier(.22,.61,.36,1);
}

body.oo-auth-noscroll{ overflow:hidden; }

/* Overlay + anim state (flex + padding radi mobilnog scrolla) */
.oo-auth-overlay{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:var(--oo-overlay); z-index:9999;
  opacity:0; transition:opacity var(--oo-speed) var(--oo-ease);
}
.oo-auth-overlay[hidden]{ display:none; }
.oo-auth-overlay.is-open{ opacity:1; }
.oo-auth-overlay.is-closing{ opacity:0; }

/* Card */
.oo-auth-card{
  background:var(--oo-bg); border-radius:var(--oo-radius); box-shadow:var(--oo-shadow);
  padding:36px 32px; position:relative; overflow:hidden;
  transform:scale(.96); opacity:0;

  /* mobilni: ne prelazi ekran, scroll unutar kartice */
  max-height:calc(100vh - 48px);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.oo-auth-overlay.is-open .oo-auth-card{
  transform:scale(1); opacity:1;
  transition:transform var(--oo-speed) var(--oo-ease), opacity var(--oo-speed) var(--oo-ease);
}
.oo-auth-overlay.is-closing .oo-auth-card{
  transform:scale(.96); opacity:0;
  transition:transform 220ms var(--oo-ease), opacity 220ms var(--oo-ease);
}

/* Različite veličine */
.oo-auth-card--login{    width:min(560px, 92vw); }
.oo-auth-card--register{ width:min(720px, 94vw); }

@media (max-width:560px){
  .oo-auth-overlay{ padding:16px; }
  .oo-auth-card{ padding:26px 18px; border-radius:16px; }
  .oo-auth-card--login{    width:min(96vw, 420px); }
  .oo-auth-card--register{ width:min(98vw, 560px); }
}

/* Moderni mobiteli: koristimo 100dvh i safe-area insete */
@supports (height:100dvh){
  .oo-auth-card{ max-height:calc(100dvh - 48px); }
  .oo-auth-overlay{
    padding:
      max(16px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }
}

/* Header / tipografija */
.oo-auth-head h1{
  margin:0 0 6px; font-weight:800; font-size:30px;
  color:var(--oo-ink); text-align:center; line-height:1.15;
}
.oo-auth-sub{
  margin:0 0 22px; text-align:center; color:var(--oo-ink-2); font-size:14px;
}

/* Close */
.oo-auth-close{
  position:absolute; top:10px; right:12px; width:36px; height:36px; border-radius:50%;
  border:0; background:#f0f3f7; cursor:pointer; font-size:22px; line-height:36px;
}
.oo-auth-close:hover{ filter:brightness(.95); }

/* Divider + social */
.oo-auth-sep{
  display:flex; align-items:center; gap:12px;
  margin:26px 0 16px; color:#98a2b3; font-size:12px;
}
.oo-auth-sep::before,.oo-auth-sep::after{ content:""; height:1px; background:var(--oo-border); flex:1 1 auto; }

.oo-auth-social{ display:grid; gap:12px; }
.oo-auth-btn-social{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--oo-border); border-radius:12px;
  padding:12px 14px; text-decoration:none; color:var(--oo-ink); background:#fff; font-weight:600;
}
.oo-auth-btn-social:hover{ border-color:#cfd7e3; }
.oo-auth-btn-social img,
.oo-auth-btn-social svg{ width:20px; height:20px; }

/* Google ikona za fallback dugme (bez ugrađenog img/svg) */
.oo-auth-btn-social.oo-g.oo-noicon{ position:relative; display:inline-flex; align-items:center; }
.oo-auth-btn-social.oo-g.oo-noicon::before{
  content:""; width:20px; height:20px; margin-right:10px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.9 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.9 6.1 29.7 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 19-8.9 19-20c0-1.2-.1-2.3-.4-3.5z'/><path fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 16 19 14 24 14c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.9 6.1 29.7 4 24 4 15.6 4 8.6 8.7 6.3 14.7z'/><path fill='%234CAF50' d='M24 44c5.2 0 9.9-1.9 13.5-5.1l-6.2-5.1C29.4 35.9 26.9 37 24 37c-5.3 0-9.7-3.4-11.3-8.1l-6.6 5.1C8.4 40.5 15.6 44 24 44z'/><path fill='%232196F3' d='M43.6 20.5H42V20H24v8h11.3c-1 2.8-3.1 5-5.9 6.2l6.2 5.1C38.9 36.6 41 31.7 41 26c0-1.2-.1-2.3-.4-3.5z'/></svg>");
}

/* Bottom switch */
.oo-auth-switch{ margin:20px 0 2px; text-align:center; color:var(--oo-ink-2); font-size:14px; }
.oo-auth-switch a{ color:var(--oo-primary); font-weight:700; text-decoration:none; }

/* Brand na dnu modala */
.oo-auth-brand{ display:flex; justify-content:center; align-items:center; margin-top:32px; opacity:.85; }
.oo-auth-brand img{ height:26px; }

/* ===== Form utilities ===== */
.oo-auth__form{ display:grid; gap:18px; }
.oo-auth__group{ margin:0; }

.oo-auth__form label{
  display:block; margin-bottom:8px; color:var(--oo-ink); font-weight:600; font-size:14px;
}

.oo-auth__form input[type="text"],
.oo-auth__form input[type="email"],
.oo-auth__form input[type="password"]{
  width:100%; padding:14px 16px; border-radius:12px;
  border:1px solid var(--oo-border); outline:none; transition:border-color 160ms, box-shadow 160ms;
  background:#fff;
}
.oo-auth__form input:focus{
  border-color:#8bb7ff; box-shadow:0 0 0 3px rgba(66,133,244,.15);
}

/* Zapamti me */
.oo-auth__remember{ margin-top:0; }
.oo-auth__checkbox{
  display:inline-flex; align-items:center; gap:14px;
  font-size:16px; font-weight:600; line-height:1.2; cursor:pointer;
}
.oo-auth__checkbox input[type="checkbox"]{
  inline-size:20px; block-size:20px;
  accent-color:var(--oo-primary); margin:0; transform:translateY(-1px);
}

/* Submit */
.oo-auth__btn{
  width:100%; border:0; border-radius:12px; padding:14px 16px; font-weight:800;
  background:var(--oo-primary); color:var(--oo-primary-ink); cursor:pointer;
}
.oo-auth__btn:disabled{ opacity:.7; cursor:wait; }

/* Forgot password — ispod dugmeta */
.oo-auth__forgot{
  display:inline-block; margin-top:10px; font-size:14px;
  color:var(--oo-primary); text-decoration:none;
}
.oo-auth__forgot:hover{ text-decoration:underline; }

/* Messages */
.oo-auth__error, .oo-auth__success{
  margin-top:8px; font-size:14px; border-radius:10px; padding:10px 12px;
}
.oo-auth__error{ background:#fff1f0; color:#8a1f1f; border:1px solid #f0c2bf; }
.oo-auth__success{ background:#edfdf3; color:#1c6a39; border:1px solid #c8efd7; }

/* Small screens */
@media (max-width:380px){
  .oo-auth__form{ gap:16px; }
  .oo-auth__forgot{ font-size:13px; }
  .oo-auth-head h1{ font-size:26px; }
  .oo-auth__checkbox{ font-size:15px; }
  .oo-auth__checkbox input[type="checkbox"]{ inline-size:18px; block-size:18px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .oo-auth-overlay, .oo-auth-card{ transition:none !important; }
}