@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

/* === Brand paleta ========================================================
   "-deep" tonovi postoje jer originalni #9CCB3B/#66B7E6 s bijelim tekstom
   ne prolaze WCAG kontrast (~1.9:1 / ~2.2:1) - deep tonovi su za tekst i
   pune pozadine gumba, svijetli originali ostaju za akcente/fokus/badge. */
:root{
  --brand-red:       #E04B5A;
  --brand-red-deep:  #A32E3B;

  --brand-green:      #9CCB3B;
  --brand-green-deep: #4C7A1B;

  --brand-blue:      #66B7E6;
  --brand-blue-deep: #2A6E9E;

  --ring: rgba(42,110,158,.30);

  --ink:        #1F2421;
  --ink-muted:  #5B655C;
  --paper:      #FFFFFF;
  --paper-soft: #F7F5F0;
  --line:       #E7E2D8;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --shadow-card: 0 1px 2px rgba(31,36,33,.04), 0 12px 28px -12px rgba(31,36,33,.16);
  --shadow-pop:  0 4px 10px rgba(31,36,33,.10), 0 20px 40px -16px rgba(31,36,33,.24);

  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{ font-size:16px }

body{
  margin:0;
  font-family:'Work Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  line-height:1.6;
  background:var(--paper-soft);
}

h1,h2,h3,.btn,button,.file-btn{
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

h1{ margin:0 0 6px; font-weight:700; letter-spacing:.01em }
h2{ margin:0 0 16px; font-weight:600; font-size:1.3rem }

.mt{margin-top:14px}
.muted{color:var(--ink-muted)}

a{ color:var(--brand-blue-deep); text-decoration:none }
a:hover{ text-decoration:underline }

/* --- Naslovna marka (SVG umjesto emoji fotoaparata) --- */
.brand-heading{
  display:flex; align-items:center; justify-content:center; gap:10px;
  text-align:center; text-transform:uppercase; margin-bottom:36px;
  font-size:clamp(22px,4vw,30px);
}
.brand-mark{ color:var(--brand-red-deep); flex:none }

/* --- Fokus stanja (tipkovnica) --- */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring);
  border-color:var(--brand-blue-deep);
}
input:focus, textarea:focus{
  outline:none;
  border-color:var(--brand-blue-deep);
  box-shadow:0 0 0 3px var(--ring);
}

/* --- Kartica (glavni wrap) --- */
.wrap{
  max-width:560px; margin:48px auto; padding:32px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.wrap.wrap-wide{max-width:980px}

/* --- Poruke --- */
.msg{padding:12px 14px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:.95rem}
.msg.ok{ background:#EAF4DF; color:#2C4A12; border:1px solid #D3E7BC; }
.msg.err{ background:#FBE9EA; color:var(--brand-red-deep); border:1px solid #F3C9CC; }

/* --- Forme --- */
.field{margin-bottom:16px}
label{display:block;font-weight:500;margin-bottom:6px;font-size:.92rem;color:var(--ink)}
input,textarea{
  width:100%; padding:11px 13px; border-radius:var(--radius-sm);
  border:1px solid #CBD3C9; font-size:16px; font-family:inherit; color:var(--ink);
  background:var(--paper);
  transition:border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{color:var(--ink-muted);font-size:.85rem;margin-top:4px}
.terms{display:flex;gap:10px;align-items:flex-start}
.terms input{width:auto;margin-top:3px}

/* --- Gumbi --- */
button,.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 18px; min-height:46px;
  border:0; border-radius:var(--radius-sm);
  background:var(--brand-green-deep); color:#fff;
  font-weight:600; font-size:.98rem; cursor:pointer;
  transition:background-color 160ms var(--ease), transform 120ms var(--ease), box-shadow 160ms var(--ease);
}
button:hover,.btn:hover{ background:#3D6415 }
button:active,.btn:active{ transform:translateY(1px) }
button[disabled]{ opacity:.5; cursor:not-allowed; transform:none }

button.btn-danger{ background:var(--brand-red-deep) }
button.btn-danger:hover{ background:#872530 }

/* --- Upload dropzone / file gumb --- */
.file-btn{
  display:inline-flex; align-items:center; gap:8px;
  width:auto; padding:11px 18px;
  background:var(--paper); color:var(--ink);
  border:1.5px dashed #B9C2B4; border-radius:var(--radius-sm);
  font-weight:600; cursor:pointer;
  transition:border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.file-btn:hover{ border-color:var(--brand-green-deep); background:var(--paper-soft) }
.file-input-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

/* --- Odabir prije slanja --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:14px}
.card{border:1px solid var(--line);border-radius:var(--radius-md);padding:10px;background:var(--paper)}
.card img{width:100%;height:120px;object-fit:cover;border-radius:var(--radius-sm)}
.card textarea{margin-top:8px;min-height:60px;font-size:.9rem}

/* --- Galerija poslanih fotki --- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:16px}
.pcard{border:1px solid var(--line);border-radius:var(--radius-md);padding:12px;background:var(--paper);box-shadow:var(--shadow-card)}
.pcard .thumbwrap{
  width:100%;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;
  margin-bottom:10px;background:var(--paper-soft);
}
.pcard img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform 220ms var(--ease)}
.pcard .thumbwrap:hover img{transform:scale(1.04)}
.pdesc{width:100%;min-height:66px;font-size:.92rem}
.actions{display:flex;gap:8px;margin-top:10px}
.actions button{width:auto;flex:1;min-height:40px;padding:9px 12px;font-size:.9rem}
.actions .save{background:var(--brand-green-deep)}
.actions .save:hover{background:#3D6415}
.actions .del{
  flex:none;width:40px;padding:0;
  background:var(--paper);color:var(--brand-red-deep);border:1.5px solid #EAC7CA;
}
.actions .del:hover{background:#FBE9EA;border-color:var(--brand-red-deep)}
.actions .del svg{display:block;margin:auto}

/* --- Modal (lightbox) --- */
.modal{position:fixed;inset:0;display:block;z-index:50}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(20,22,18,.72);backdrop-filter:blur(2px)}
.modal-body{position:absolute;inset:6%;background:#0B0C0A;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-pop)}
.modal-body img{max-width:100%;max-height:100%;border-radius:6px}
.modal-close,.modal-prev,.modal-next{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;
  transition:background-color 160ms var(--ease);
}
.modal-close:hover,.modal-prev:hover,.modal-next:hover{background:#fff}
.modal-close{top:14px;right:14px}
.modal-prev{left:14px;top:50%;transform:translateY(-50%)}
.modal-next{right:14px;top:50%;transform:translateY(-50%)}

/* --- Toast --- */
.toast{
  position:fixed;right:20px;bottom:20px;max-width:380px;
  background:var(--ink);color:#fff;padding:14px 16px;
  border-radius:var(--radius-md);box-shadow:var(--shadow-pop);font-size:.92rem;
  z-index:60;
}
.toast[hidden]{display:none}

@media (max-width:480px){
  .row{grid-template-columns:1fr}
  .wrap{margin:0;border-radius:0;min-height:100vh;border-left:0;border-right:0}
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important }
}