/* Frameehr landing: forma za prijavu (tamna, u stilu landinga). Koristi varijable iz style.css. */
[hidden] { display: none !important; }
.lp-form { max-width: 640px; margin: 0 auto; display: grid; gap: 12px; text-align: left; }
.lp-form fieldset { margin: 0; min-width: 0; }
.lp-q { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-media); padding: 20px 18px; }
.lp-label { display: block; float: left; width: 100%; padding: 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: var(--text); margin-bottom: 4px; }
.lp-label .req { color: var(--gold); margin-left: 2px; }
.lp-opt-note { font-weight: 400; color: var(--text-3); font-size: .9375rem; }
.lp-help { display: block; clear: both; font-size: .875rem; color: var(--text-3); margin-bottom: 6px; }
.lp-q input[type=text], .lp-q input[type=tel], .lp-q textarea {
  width: 100%; clear: both; font: 400 1.0625rem/1.4 var(--font-body); color: var(--text); background: transparent;
  border: 0; border-bottom: 1.5px solid var(--line-strong); border-radius: 0; padding: 10px 2px; margin-top: 6px; }
.lp-q textarea { min-height: 96px; resize: vertical; border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 12px; }
.lp-q input:focus, .lp-q textarea:focus { outline: none; border-color: var(--gold); }
.lp-options { clear: both; display: grid; gap: 8px; padding-top: 8px; }
.lp-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-strong);
  border-radius: 10px; cursor: pointer; color: var(--text); transition: border-color .2s, background-color .2s; }
.lp-opt:hover { border-color: rgba(201,168,76,.45); }
.lp-opt input { width: 20px; height: 20px; accent-color: var(--gold); margin: 0; flex: none; }
.lp-opt:has(input:checked) { border-color: var(--gold); background: rgba(201,168,76,.10); }
.lp-err { display: none; clear: both; color: #F2A39B; font-size: .875rem; margin-top: 8px; font-weight: 500; }
.lp-q.invalid { border-color: rgba(242,163,155,.55); }
.lp-q.invalid .lp-err { display: block; }
.lp-privacy { font-size: .9375rem; color: var(--text-2); margin: 0 0 14px; }
.lp-privacy a { color: var(--gold); }
.lp-submit { width: 100%; }
.lp-submit[disabled] { opacity: .65; cursor: progress; }
.lp-alert { border-radius: var(--r-media); padding: 16px 18px; border: 1.5px solid rgba(242,163,155,.55); background: rgba(242,163,155,.08); color: var(--text); }
.lp-alert p { margin: 0 0 12px; }
.lp-alert a { color: var(--gold); }
.lp-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.lp-hvala { max-width: 640px; margin: 0 auto; text-align: left; background: var(--surface-2); border: 1px solid var(--line-gold, rgba(201,168,76,.32));
  border-radius: var(--r-media); padding: 28px 22px; }
.lp-hvala:focus { outline: none; }
.lp-hvala h3 { font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem)/1.15 var(--font-display); margin: 0 0 14px; color: var(--text); }
.lp-hvala p { color: var(--text-2); margin: 0 0 12px; }
.lp-hvala strong { color: var(--text); }
.lp-hvala a { color: var(--gold); font-weight: 600; text-decoration: none; }
.lp-check { width: 48px; height: 48px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; margin-bottom: 16px; }
.lp-check::before { content: ""; width: 18px; height: 10px; border-left: 3px solid #14110A; border-bottom: 3px solid #14110A; transform: rotate(-45deg) translate(2px,-2px); }
.todo { padding: 2px 8px; border: 2px dashed #E0A800; border-radius: 8px; background: rgba(224,168,0,.08); color: #F5D27A; font-size: .875rem; }

/* Banner za privolu (prikazuje se tek kad je upisan pixelId) */
.consent { position: fixed; z-index: 200; left: 12px; right: 12px; bottom: 12px; max-width: 560px; margin: 0 auto; padding: 16px;
  border-radius: 16px; background: #1F1D18; color: var(--text); border: 1px solid var(--line-strong); box-shadow: 0 20px 60px rgba(0,0,0,.5);
  font-size: .9375rem; line-height: 1.5; }
.consent p { margin: 0 0 12px; }
.consent a { color: var(--gold); }
.consent-actions { display: flex; gap: 10px; }
.consent-actions button { flex: 1; min-height: 46px; border-radius: 999px; font: 600 .9375rem var(--font-body); cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text); }
.consent-actions button[data-c="granted"] { background: var(--text); color: var(--bg); border-color: var(--text); }