/* ── Auth (login / register) — peb.rs-style card ──────────────── */
.auth-page{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 240px);
    padding: 2.5rem 1.5rem;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(57,152,253,0.10), transparent 60%),
        #ffffff;
}

.auth-bg-overlay{
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
}
.auth-bg-overlay img{
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(30%) brightness(1.2);
}

.auth-card{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(41,41,43,0.10);
    padding: 2.4rem 2rem 2rem;
    animation: auth-card-in 0.5s ease-out;
}
@keyframes auth-card-in{
    from{ opacity:0; transform: translateY(16px) scale(0.98); }
    to  { opacity:1; transform: translateY(0) scale(1); }
}

.auth-card .auth-header{ text-align:center; margin-bottom: 1.75rem; }
.auth-card .auth-logo{
    height: 44px;
    width: auto;
    margin-bottom: 0.75rem;
}
.auth-card .auth-header h1{
    font-size: 1.5rem;
    font-weight: 800;
    color: #29292b;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}
.auth-card .auth-header p{
    font-size: 0.9rem;
    color: #666;
}

.auth-form{ display:flex; flex-direction:column; gap:1.1rem; }
.auth-form .form-group{ display:flex; flex-direction:column; gap:0.35rem; }
.auth-form .form-group label{
    font-size:0.75rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.05em; color:#666;
}
.auth-form .form-group input{
    padding:0.75rem 1rem;
    background:#f7f9fb;
    border:1px solid #d0d4da;
    border-radius:8px;
    color:#29292b;
    font-size:0.95rem;
    transition:all 0.2s ease;
}
.auth-form .form-group input:focus{
    border-color:#3998fd;
    box-shadow:0 0 0 3px rgba(57,152,253,0.18);
    background:#fff;
}
.auth-form .form-group input.error{
    border-color:#e74c3c;
    box-shadow:0 0 0 3px rgba(231,76,60,0.15);
}
.auth-field-error{ font-size:0.75rem; color:#e74c3c; min-height:1.2em; }

.auth-message{
    text-align:center; font-size:0.85rem; font-weight:500;
    min-height:1.2em; padding:0.5rem; border-radius:8px;
}
.auth-message.error{ color:#e74c3c; background:rgba(231,76,60,0.08); }
.auth-message.success{ color:#0a7a2f; background:rgba(10,122,47,0.08); }

.auth-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.85rem 1.75rem; border-radius:10px;
    font-size:0.95rem; font-weight:700;
    border:none; cursor:pointer; transition:all 0.2s ease;
    background:#3998fd; color:#fff; width:100%;
}
.auth-btn:hover{
    background:#1664c0;
    box-shadow:0 8px 24px rgba(57,152,253,0.30);
    transform:translateY(-1px);
}
.auth-btn:disabled{ opacity:0.6; cursor:not-allowed; transform:none !important; }
.auth-btn .auth-spinner{ display:none; animation:auth-spin 0.8s linear infinite; }
.auth-btn.is-loading .auth-spinner{ display:inline-block; }
@keyframes auth-spin{ to{ transform:rotate(360deg); } }

.auth-switch{
    margin-top:1.25rem;
    text-align:center;
    font-size:0.85rem;
    color:#666;
}
.auth-switch a{
    color:#3998fd; font-weight:600; text-decoration:none;
}
.auth-switch a:hover{ text-decoration:underline; color:#1664c0; }

@media (max-width:480px){
    .auth-page{ padding:1.5rem 1rem; }
    .auth-card{ padding:1.75rem 1.25rem 1.5rem; }
}

/* ── Registration: the two mandatory consents, and the honeypot ─────────────
   The checkbox and its label sit in a two-column grid so a validation message
   can land under the label rather than under the box. */
.auth-form .auth-check{
    display:grid; grid-template-columns:auto 1fr; gap:0.2rem 0.6rem; align-items:start;
}
.auth-form .auth-check input[type="checkbox"]{
    width:1.05rem; height:1.05rem; margin:0.15rem 0 0 0;
    accent-color:#3998fd; cursor:pointer;
}
.auth-form .auth-check label{
    font-size:0.82rem; font-weight:500; line-height:1.45; color:#4a4a4d;
    text-transform:none; letter-spacing:normal; cursor:pointer;
}
.auth-form .auth-check label a{ color:#3998fd; font-weight:600; text-decoration:none; }
.auth-form .auth-check label a:hover{ text-decoration:underline; color:#1664c0; }
.auth-form .auth-check input.error{ outline:2px solid rgba(231,76,60,0.35); border-radius:4px; }
.auth-form .auth-check .auth-field-error{ grid-column:2; }

.auth-field-hint{ font-size:0.72rem; color:#8a8f98; }

/* Off-screen rather than display:none: a bot that skips hidden fields still trips it. */
.auth-honeypot{
    position:absolute; left:-9999px; top:auto;
    width:1px; height:1px; overflow:hidden;
}

/* ── Registration page — two panels ───────────────────────────────────────────
   The shop's own language: light page, the brand blue (#3998fd) on the right half
   as a full-height panel. The login card above is untouched — it keeps .auth-page /
   .auth-card, and nothing here targets those.

   The form keeps every id and field name the endpoint reads (name / email /
   password / eula_pp / komunikacija / website) and .auth-form's input styling. This
   layer only adds the frame around it. */
.register-page{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 240px);
    padding: 2.5rem 1.5rem;
    background:
        radial-gradient(1100px 460px at 50% -10%, rgba(57,152,253,0.10), transparent 60%),
        #ffffff;
}
.register-bg-overlay{
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
    opacity: 0.035;
}
.register-bg-overlay img{
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(30%) brightness(1.2);
}

.register-shell{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 100%;
    max-width: 1000px;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(41,41,43,0.10);
    overflow: hidden;
    animation: auth-card-in 0.5s ease-out;
}

/* ── Left: the brand panel ─────────────────────────────────────────────────── */
.register-aside{
    display: flex;
    flex-direction: column;
    padding: 2.75rem 2.5rem;
    color: #ffffff;
    background: linear-gradient(160deg, #3998fd 0%, #1664c0 100%);
}
.register-aside-logo{ display: inline-block; margin-bottom: 2rem; }
.register-aside-logo img{
    height: 42px; width: auto;
    filter: brightness(0) invert(1);
}
.register-aside-title{
    font-size: 1.6rem; font-weight: 800; line-height: 1.2;
    letter-spacing: -0.02em; margin-bottom: 0.6rem;
}
.register-aside-lead{
    font-size: 0.92rem; line-height: 1.55;
    color: rgba(255,255,255,0.82); margin-bottom: 2rem;
}
.register-perks{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; }
.register-perks li{ display: flex; gap: 0.85rem; align-items: flex-start; }
.register-perks li i{
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    font-size: 0.85rem;
    color: #ffffff; background: rgba(255,255,255,0.18);
}
.register-perks li div{ display: flex; flex-direction: column; gap: 0.15rem; }
.register-perks li strong{ font-size: 0.88rem; font-weight: 700; }
.register-perks li span{ font-size: 0.8rem; line-height: 1.45; color: rgba(255,255,255,0.78); }
.register-aside-note{
    display: flex; gap: 0.5rem; align-items: flex-start;
    margin-top: auto; padding-top: 2rem;
    font-size: 0.75rem; line-height: 1.5; color: rgba(255,255,255,0.72);
}
.register-aside-note i{ margin-top: 0.15rem; }

/* ── Right: the form ───────────────────────────────────────────────────────── */
.register-panel{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.75rem 2.5rem;
}
.register-panel-head{ margin-bottom: 1.6rem; }
.register-panel-head h1{
    font-size: 1.45rem; font-weight: 800;
    color: #29292b; letter-spacing: -0.02em; margin-bottom: 0.2rem;
}
.register-panel-head p{ font-size: 0.88rem; color: #666; }
/* The logo appears here only where the brand panel is hidden (see the media query). */
.register-panel-logo{ display: none; height: 38px; width: auto; margin-bottom: 0.85rem; }

/* Input + its leading icon + the reveal button, styled as one control.
   The selector has to out-specify `.auth-form .form-group input` (0,2,1) — a bare
   `.register-control input` (0,1,1) loses, and the shorthand `padding` in the base
   rule then puts the placeholder back on top of the icon. */
.register-control{ position: relative; display: flex; align-items: center; }
.register-control-icon{
    position: absolute; left: 0.95rem;
    font-size: 0.85rem; color: #9aa4b2; pointer-events: none;
}
.auth-form .form-group .register-control input{ width: 100%; padding-left: 2.55rem; }
.auth-form .form-group .register-control:has(.register-reveal) input{ padding-right: 2.9rem; }
.register-reveal{
    position: absolute; right: 0.45rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem;
    border: none; background: transparent; cursor: pointer;
    color: #6b7280; font-size: 0.85rem;
    border-radius: 7px; transition: color 0.2s ease, background 0.2s ease;
}
.register-reveal:hover{ color: #3998fd; background: rgba(57,152,253,0.10); }
.register-reveal.is-on{ color: #3998fd; }

/* A cosmetic progress hint. Three bars, filled by the level the page computes. */
.register-strength{ display: flex; gap: 4px; margin-top: 0.45rem; max-width: 170px; }
.register-strength span{
    flex: 1 1 0; height: 4px; border-radius: 2px;
    background: #e4e7ec; transition: background 0.25s ease;
}
.register-strength[data-level="1"] span:nth-child(1){ background: #e74c3c; }
.register-strength[data-level="2"] span:nth-child(-n+2){ background: #f0a202; }
.register-strength[data-level="3"] span{ background: #0a7a2f; }

.register-legal{
    font-size: 0.73rem; line-height: 1.5; color: #8a8f98; text-align: center;
}
.register-legal a{ color: #3998fd; text-decoration: none; }
.register-legal a:hover{ text-decoration: underline; }

/* ── The success state ─────────────────────────────────────────────────────── */
.register-success{ text-align: center; padding: 1rem 0 0.5rem; }
.register-success-icon{
    display: inline-flex; align-items: center; justify-content: center;
    width: 62px; height: 62px; border-radius: 50%;
    margin-bottom: 1.1rem;
    font-size: 1.5rem; color: #3998fd;
    background: rgba(57,152,253,0.12);
}
.register-success h2{
    font-size: 1.3rem; font-weight: 800; color: #29292b;
    letter-spacing: -0.02em; margin-bottom: 0.6rem;
}
.register-success p{
    font-size: 0.9rem; line-height: 1.6; color: #4a4a4d;
    max-width: 34ch; margin: 0 auto 0.75rem;
}
.register-success p strong{ color: #29292b; word-break: break-all; }
/* The order number in the confirmation heading, and the optional-discount slot that
   sits under the message when the route passes one (it passes none today). */
.register-success-number{
    display: inline-block; margin-left: 0.15rem;
    font-family: "JetBrains Mono", monospace;
    font-size: 1.15rem; letter-spacing: 0;
    color: #3998fd;
}
.register-discount{
    border: 1px solid rgba(57,152,253,0.35);
    background: rgba(57,152,253,0.08);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin: 0 auto 0.9rem;
    max-width: 34ch;
}
.register-discount-label{ font-size: 0.9rem !important; font-weight: 700; color: #29292b !important; margin-bottom: 0.3rem !important; }
.register-discount-code{
    font-family: "JetBrains Mono", monospace;
    font-size: 0.9rem !important; font-weight: 700; color: #3998fd !important;
    letter-spacing: 0.06em;
}
.register-discount-note{ font-size: 0.78rem !important; color: #8a8f98 !important; }
.register-success-note{ font-size: 0.78rem !important; color: #8a8f98 !important; }
.register-success-link{
    display: inline-block; margin-top: 0.5rem;
    font-size: 0.87rem; font-weight: 600; color: #3998fd; text-decoration: none;
}
.register-success-link:hover{ text-decoration: underline; color: #1664c0; }

/* Once the account exists the form steps aside for the panel above it. It stays in
   the DOM — hidden, with its message set and its button disabled. The panel's own
   heading goes too: "napravite nalog" is no longer the story. */
.auth-form.is-done{ display: none; }
.register-panel.is-done .register-panel-head{ display: none; }

/* Order confirmation (/order_confirmation): the register card, single column.
   The shell is a 2-column grid (brand aside + panel); with no aside, one column
   is all there is, and the card is centred instead of spanning 1000px. */
.register-shell-single{ grid-template-columns: 1fr; max-width: 480px; }

/* ── the confirmation page (/potvrda) ───────────────────────────────────────────
   One centred card, because the whole page is one answer: confirmed, already used,
   expired, unknown, or something went wrong. The icon carries the tone so the state
   reads before the sentence does. */
.confirm-page{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.2rem;
    min-height: calc(100vh - 320px);
    background: #f6f8fb;
}
.confirm-card{
    width: 100%;
    max-width: 520px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 18px;
    padding: 2.6rem 2.2rem 2.4rem;
    text-align: center;
    box-shadow: 0 18px 44px rgba(16,24,40,0.07);
}
.confirm-icon{
    width: 62px; height: 62px;
    margin: 0 auto 1.3rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}
.confirm-icon-ok{ background: #e6f7ee; color: #0f9d58; }
.confirm-icon-info{ background: #e8f2fe; color: #3998fd; }
.confirm-icon-warn{ background: #fdf1e3; color: #d9822b; }
.confirm-card h1{
    font-size: 1.45rem;
    line-height: 1.3;
    margin: 0 0 0.9rem;
    color: #1c2430;
}
.confirm-lead{
    font-size: 0.98rem;
    line-height: 1.65;
    color: #4a5462;
    margin: 0 0 0.7rem;
}
.confirm-note{
    font-size: 0.88rem;
    line-height: 1.6;
    color: #7c8797;
    margin: 0 0 1.6rem;
}
.confirm-note a{ color: #3998fd; text-decoration: none; }
.confirm-note a:hover{ text-decoration: underline; }
.confirm-action{
    display: inline-block;
    background: #3998fd;
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
}
.confirm-action:hover{ background: #1f7fe0; color: #fff; }

@media (max-width: 575px){
    .confirm-page{ padding: 2rem 1rem; }
    .confirm-card{ padding: 2rem 1.3rem 1.9rem; }
    .confirm-card h1{ font-size: 1.25rem; }
}

@media (max-width: 900px){
    /* One card: the brand panel goes, and its logo moves into the form's header. */
    .register-shell{ grid-template-columns: 1fr; max-width: 480px; }
    .register-aside{ display: none; }
    .register-panel-logo{ display: block; }
    .register-panel{ padding: 2.25rem 1.75rem; }
}

@media (max-width: 480px){
    .register-page{ padding: 1.5rem 1rem; }
    .register-panel{ padding: 1.9rem 1.25rem; }
    .register-panel-head h1{ font-size: 1.3rem; }
}