/* ===============================
   VEXIO – Discount Code UI (Light only, A11y-first)
   =============================== */

:root{
    color-scheme: light;

    --bg:#f6f7fb;
    --surface:#ffffff;
    --text:#171717;
    --muted:#4b5563;

    --blue-500:#2563eb;
    --blue-600:#1d4ed8;
    --blue-700:#1e40af;

    --green-500:#16a34a;
    --green-600:#15803d;
    --green-700:#166534;

    --red-500:#dc2626;
    --red-600:#b91c1c;
    --red-700:#991b1b;

    --gray-100:#f3f4f6;
    --gray-200:#e5e7eb;
    --gray-300:#d1d5db;
    --gray-400:#9ca3af;

    --shadow:0 10px 30px rgba(0,0,0,.12);
    --radius-20:20px;
    --radius-24:24px;

    --focus-ring: 0 0 0 3px rgba(37,99,235,.18);

    --max-card: 680px;
    --max-wrap: 1200px;
}

/* Reset / Defaults */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
a{ color: var(--blue-600); text-decoration: none }
a:hover{ text-decoration: underline }

/* NAVBAR */
.navbar{
    position:fixed; inset:0 0 auto 0; height:64px; z-index:10;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.82);
    border-bottom:1px solid rgba(0,0,0,0.06);
}
.nav-inner{ width:100%; max-width:var(--max-wrap); padding:0 20px; display:flex; align-items:center; justify-content:center; }
.nav-logo-img{ height:40px; width:auto; object-fit:contain; }
@media (min-width:768px){ .nav-logo-img{ height:46px } }

/* LAYOUT */
.wrap{
    min-height:100vh;
    display:grid; place-items:center;
    padding:120px 16px 40px; /* kvůli navbaru */
    position:relative;
}
.bg-glow{
    position:absolute; inset:0; pointer-events:none; filter:blur(50px);
    background:
            radial-gradient(60% 40% at 50% 12%, rgba(37,99,235,.10), transparent 60%),
            radial-gradient(50% 35% at 78% 70%, rgba(29,78,216,.10), transparent 60%);
}

/* CARD */
.card{
    width:100%; max-width:var(--max-card);
    background:var(--surface);
    border-radius:var(--radius-20);
    box-shadow:var(--shadow);
    padding:28px;
}
@media (min-width:768px){ .card{ padding:40px; border-radius:var(--radius-24) } }

/* HEAD */
.card-head{ text-align:center; margin-bottom:22px }
.badge{
    margin:0 auto 12px;
    width:60px; height:60px;
    display:grid; place-items:center;
    border-radius:999px;
    background:linear-gradient(135deg, var(--blue-600), var(--blue-700));
    box-shadow:0 12px 28px rgba(29,78,216,.35);
}
.badge .icon{ color:#fff; width:28px; height:28px }
.title{ margin:0; font-weight:800; font-size:24px; letter-spacing:.2px; color:var(--text) }
.subtitle{ margin:6px 0 0; color:var(--muted); font-size:15px }

/* FORM */
.form{ display:flex; flex-direction:column; gap:14px }
.input-wrap{ position:relative }

input#code{
    width:100%; height:56px;
    border:2px solid var(--gray-200);
    border-radius:14px;
    padding:0 56px 0 16px;
    text-transform:uppercase; letter-spacing:.08em; text-align:center;
    font-size:17px; font-weight:700;
    color:var(--text); background:#fff; outline:none;
    transition:border-color .2s, box-shadow .2s, background-color .2s, color .2s;
}
input#code::placeholder{ color:#6b7280; opacity:.85 }
input#code:focus-visible{ border-color:var(--blue-600); box-shadow:var(--focus-ring) }

/* Valid / Invalid / Loading */
input#code.ok{ border-color:var(--green-600); background:#f4fbf6; color:#0b3d26 }
input#code.err{ border-color:var(--red-600);   background:#fdf3f3; color:#4a0e0e }
input#code.loading{
    color:#4b5563;
    background:linear-gradient(90deg,#ffffff 0%,#f2f5f9 50%,#ffffff 100%);
    background-size:200% 100%;
    animation:shimmer 1.2s linear infinite;
}
@keyframes shimmer{ 0%{background-position:0% 0} 100%{background-position:200% 0} }

/* Status icons */
.status-icons{ position:absolute; right:12px; top:50%; transform:translateY(-50%); display:flex; gap:6px }
.icon{ width:22px; height:22px }
.ok{ color:#fff; background:var(--green-600); border-radius:999px; padding:4px }
.err{ color:#fff; background:var(--red-600);   border-radius:999px; padding:4px }
.hidden{ display:none !important }

/* Status text (hlášky) */
.status-text{
    min-height:28px;
    font-size:15px; line-height:1.6; font-weight:600;
    text-align:center; margin-top:6px; padding:8px 12px;
    border-radius:12px;
    background:#f7f7f8; color:var(--muted);
    border:1px solid var(--gray-200);
}
.status-text.ok{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0 }
.status-text.err{ background:#fef2f2; color:#b91c1c; border-color:#fecaca }

/* BUTTONS */
.btn{
    height:56px; border-radius:14px; border:2px solid transparent;
    font-weight:800; font-size:16px; letter-spacing:.2px;
    cursor:pointer; transition: transform .05s ease, box-shadow .2s, background .2s, border-color .2s, opacity .2s;
    display:inline-flex; align-items:center; justify-content:center; gap:10px; color:#fff;
}
.btn:disabled{ opacity:.65; cursor:not-allowed }
.btn:active{ transform: translateY(1px) }

.btn-primary{
    width:100%;
    background:linear-gradient(90deg, var(--blue-600), var(--blue-700));
    box-shadow:0 8px 22px rgba(29,78,216,.25);
}
.btn-primary:hover{ box-shadow:0 10px 26px rgba(29,78,216,.32) }
.btn-primary:focus-visible{ outline:none; box-shadow:var(--focus-ring) }

.btn-success{
    width:100%;
    background:linear-gradient(90deg, var(--green-600), var(--green-700));
    box-shadow:0 8px 22px rgba(22,163,74,.25);
}
.btn-success:hover{ box-shadow:0 10px 26px rgba(22,163,74,.32) }
.btn-success:focus-visible{ outline:none; box-shadow:var(--focus-ring) }

.btn-outline{
    width:100%;
    background:#fff; color:var(--text); border-color:var(--gray-300);
}
.btn-outline:hover{ border-color:var(--gray-400); background:#fff }
.btn-outline:focus-visible{ outline:none; box-shadow:var(--focus-ring) }

.stack{ display:flex; flex-direction:column; gap:12px }
.btn-icon{ width:20px; height:20px; color:#fff }

/* RESPONSIVE */
@media (min-width:640px){
    .badge{ width:66px; height:66px }
    .badge .icon{ width:30px; height:30px }
    .title{ font-size:26px }
    .btn{ height:60px; font-size:17px }
    input#code{ height:60px; font-size:18px }
}
@media (min-width:768px){
    .title{ font-size:30px }
    .btn{ height:64px; font-size:18px }
    input#code{ height:64px; font-size:19px }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation:none !important; transition:none !important }
}


/* když držíme úspěšnou hlášku a input je prázdný, dej mu decentní zelený okraj */
input#code.ok:placeholder-shown {
    border-color: var(--green-600);
    background: #f4fbf6;
}