/* ===============================
   Medeja Auth – Figma look
   =============================== */

/* Paleta (po potrebi prilagodi Figma hex-ovima) */
:root{
  --bg: #ffffff;
  --grad-1: #ffecec;
  --grad-2: #fdd8d8;
  --grad-3: #f8e6f6;
  --grad-4: #f4e6ff;

  --ink: #1B1B1F;
  --muted: #5f6570;

  --field-border: #d8c9c9;
  --field-border-focus: #e6a6a6;

  --brand-btn: #d98c8c;     /* "Nastavi" dugme */
  --brand-btn-hover: #c27676;

  --glass-bg: rgba(255,255,255,.60);
  --glass-border: rgba(255,255,255,.30);

  --shadow-card: 0 8px 24px rgba(0,0,0,0.08);
}

/* Figma gradijent */
body.app-bg.auth-page{
  min-height:100vh;
  background: linear-gradient(180deg,
    #ffffff 0%,
    var(--grad-1) 30%,
    var(--grad-2) 50%,
    var(--grad-3) 75%,
    var(--grad-4) 100%);
  background-attachment: fixed;
  color: var(--ink);
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
   background-image: none !important; /* <— gasi bilo koji postojeći background-image */
  background-color: transparent;     /* ostavi gradijent da radi */
}

/* header offset + skidanje starih negativnih margina */
.app-bg.auth-page .contact-area{
  margin-top:0 !important;
  padding-top:2rem;
  padding-bottom:3.5rem;
  background: transparent !important;
}

/* Sakrij stare ukrase */
.app-bg.auth-page .ring-shape{ display:none !important; }

/* Lagana "glass" ploha oko forme (nije teška kartica) */
.medeja-auth-card{
  background: transparent !important;        /* CHANGED: nema belog sloja */
  border: none !important;                   /* CHANGED */
  box-shadow: none !important;               /* CHANGED */
  backdrop-filter: none !important;          /* CHANGED */
  -webkit-backdrop-filter: none !important;  /* CHANGED */
}

/* Brand header tekst iznad naslova */
.app-brand.small{
  font-size: 13px;
  color: var(--muted);
  letter-spacing:.1px;
}
.app-brand .brand-1{ color:#b54d4d; font-weight:700; }
.app-brand .brand-dot{ margin:0 .25rem; color:#b54d4d; }
.app-brand .brand-2{ color:#6f6f6f; font-weight:700; }
.app-brand .brand-suffix{ color:#8a8f99; font-weight:500; margin-left:.35rem; }

/* Naslovi i copy */
.login-title{
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: .25rem;
}
.login-subtitle{
  font-size: 15px;
  color: #444;
  line-height: 1.45;
}

/* Labela */
.auth-page .label-text{
  color:#4d4f55;
  font-weight:600;
  margin-bottom:.25rem;
}

/* Polja – border sivo/roze kao u Figmi, blago belkasto pozadinsko staklo */
.medeja-input.form-control{
  background: rgba(255,255,255,.85);
  border:1px solid var(--field-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size:16px;
  color: var(--ink);
}
.medeja-input.form-control::placeholder{ color:#8e8e95; }
.medeja-input.form-control:focus{
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 2px rgba(230,166,166,.25);
  outline: none;
}

/* Help ispod PIN-a */
.medeja-help{
  color:#7a808a;
  font-size:13px;
}

/* Link "Pošalji ponovo" */
.link-resend{
  color: var(--brand-btn);
  font-weight:600;
  text-decoration:none;
}
.link-resend:hover{ text-decoration:underline; }

/* Dugme "Nastavi" – puno brend */
.medeja-primary{
  background: var(--brand-btn) !important;
  border:none !important;
  color:#fff !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-weight:700 !important;
  font-size:16px !important;
  box-shadow: 0 10px 22px rgba(217,140,140,.25);
}
.medeja-primary:hover{
  background: var(--brand-btn-hover) !important;
}

/* Input ikone (zadržavaš postojeće) – malo slabija boja */
.input-icon{ color:#9aa0a6; }

/* Ako odlučiš da prikažeš header/footer, malo ih utišaj na ovom ekranu */
.app-bg.auth-page .header-menu-area.bg-white{
  background: rgba(255,255,255,.45) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.app-bg.auth-page .footer-area{
  background: rgba(255,255,255,.50) !important;
  border-top: 1px solid rgba(0,0,0,.04);
}

/* === Auth sa pozadinskom slikom umesto gradijenta === */
body.app-bg.auth-page.bg-photo {
  background: url("/images/bg/medeja-auth.webp") center center / cover no-repeat fixed !important;
  min-height: 100vh;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.medeja-card-illu img{
  max-width: 180px;        /* veličina iz Figme */
  border-radius: 16px;     /* kao na PNG-u */
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

.medeja-card-illu{
  display:flex; justify-content:center; align-items:center;
  margin-bottom:1.5rem;
}

/* NOVO: wrap je referenca za absolute pozicioniranje */
.medeja-card-illu .spark-wrap{
  position: relative;
  display: inline-block;
}

/* slika */
.medeja-card-illu .card-base{
  display:block;
  max-width:180px;
  border-radius:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}

/* zvezdice */
.medeja-card-illu .spark {
  position: absolute;
  width: 42px;
  height: 42px;
  color: #FFE066;   /* zameni sa tačnim HEX iz Figme/slike */
   filter:
      drop-shadow(0 0 4px rgba(255, 224, 102, 0.8))
      drop-shadow(0 0 12px rgba(255, 200, 0, 0.6))
      drop-shadow(2px 2px 4px rgba(0,0,0,0.3)); /* blaga tamna senka */
  opacity: .95;
  pointer-events: none;
}

/* Različite varijante */
.medeja-card-illu .spark-1 {
  top: -10px;
  left: 16px;
  transform: scale(1.1) rotate(8deg);
  animation: sparkleTwinkle 2.5s ease-in-out infinite;
}

.medeja-card-illu .spark-2 {
  top: 18px;
  right: -14px;
  transform: scale(0.8) rotate(-15deg);
  animation: sparkleTwinkle 3s ease-in-out infinite .3s;
}

.medeja-card-illu .spark-3 {
  bottom: -14px;
  left: 52px;
  transform: scale(1.3) rotate(25deg);
  animation: sparkleTwinkle 2.2s ease-in-out infinite .6s;
}

/* Animacija ostaje ista */
@keyframes sparkleTwinkle {
  0%,100% { transform: scale(1) rotate(0deg); opacity:.95; }
  50%     { transform: scale(1.15) rotate(10deg); opacity:1; }
}




/* VARIJANTA A – px koordinate (brzo) */
.medeja-card-illu .spark-1{ top:-10px; left:16px; }
.medeja-card-illu .spark-2{ top:18px;  right:-14px; transform:scale(1.1); }
.medeja-card-illu .spark-3{ bottom:-14px; left:52px; transform:scale(.9); }

/* Ako želiš da se prilagođava kada se slika menja, koristi procentualno: */
/* VARIJANTA B – % koordinate (responsivnije)
.medeja-card-illu .spark-1{ top:-7%; left:9%; }
.medeja-card-illu .spark-2{ top:14%; right:-8%; transform:scale(1.1); }
.medeja-card-illu .spark-3{ bottom:-9%; left:30%; transform:scale(.9); }
*/

@keyframes sparkleTwinkle{
  0%,100%{ transform:scale(1) rotate(0deg); opacity:.95; }
  50%     { transform:scale(1.12) rotate(8deg); opacity:1; }
}
.medeja-card-illu .spark-1{ animation:sparkleTwinkle 2.2s ease-in-out infinite; }
.medeja-card-illu .spark-2{ animation:sparkleTwinkle 2.8s ease-in-out infinite .3s; }
.medeja-card-illu .spark-3{ animation:sparkleTwinkle 2.4s ease-in-out infinite .6s; }

/* Nateraj SVG da koristi CSS boju */
.medeja-card-illu .spark path,
.medeja-card-illu .spark polygon,
.medeja-card-illu .spark circle {
  fill: currentColor;     /* koristi .spark { color: ... } */
  stroke: currentColor;   /* ako ikad ima stroke linije */
}


/* === Inputs sa ikonama (fix preklapanja) === */
.input-box .form-group {
  position: relative; /* referenca za .input-icon */
}

/* zajednički stil za ikonu levo u polju */
.input-box .input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  pointer-events: none;
  color: #9aa0a6;
}

/* ostavi mesta za ikonicu u text inputima */
.input-box .form--control.medeja-input {
  padding-left: 40px; /* ~ 12 (leva margina) + 18 (ikonica) + buffer */
}

/* password grupa koristi .input-group; zato ikonica ide kao .input-group-prepend */
.input-group .input-group-text {
  background: rgba(255,255,255,.85);
  border: 1px solid var(--field-border);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  color: #9aa0a6;
}

/* uskladi border radi lepog spoja sa inputom */
.input-group .form--control.medeja-input {
  border-left: 0;
  border-radius: 0 10px 10px 0;
  padding-left: 12px; /* više ne treba 40px jer je ikona u prepend-u */
}

/* notifikacije */

/* Uskladi boje toast notifikacija sa Medeja dugmetom */
.toast-success {
  background-color: var(--brand-btn) !important; /* ista kao dugme */
  color: #fff !important;
}
.toast-info {
  background-color: var(--brand-btn) !important;
  color: #fff !important;
}
.toast-warning {
  background-color: var(--brand-btn) !important;
  color: #fff !important;
}
.toast-error {
  background-color: var(--brand-btn-hover) !important; /* može i ista, ili tamnija */
  color: #fff !important;
}


/* Za moj kvazi header */
.app-brand {
    font-weight: bold;
    font-size: 1.2rem;
}

.app-brand .brand-1 {
    color: #B22222; /* tamnija nijansa crvene */
}

.app-brand .brand-dot {
    color: #d4af37; /* zlatna ✶ */
    margin: 0 4px;
}

.app-brand .brand-2 {
    color: #B22222; /* ista crvena nijansa */
}

.app-brand .brand-suffix {
    font-size: 0.9rem;
    color: #000; /* Loyalty App crna */
    margin-left: 4px;
}

/* .app-brand-divider {
    border-top: 1px solid #ccc;
} */

.app-brand-divider {
    border-top: 1px solid #ccc;
    margin-left: 40px;   /* udalji liniju od leve ivice */
    margin-right: 40px;  /* udalji liniju od desne ivice */
}