/* =========================================================
   ZÁKLAD
   ========================================================= */
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0;
    background: #f4f6f8;
}

.page-title {
    text-align: center;
    /* padding: 24px; */
}

.container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    justify-items: center;
}

/* =========================================================
   PANEL
   ========================================================= */
.panel {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    max-width: 800px;
    width: 100%;
}

.container,
.panel {
    position: relative;
    z-index: 2;
}

/* =========================================================
   FORM PRVKY
   ========================================================= */
.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-weight: 600;
    white-space: nowrap;
}

label {
    display: block;
    margin-top: 5px;
    font-weight: 600;
    font-size: 13px;
}

input,
select {
    width: 100%;
    padding: 6px 8px;
    margin-top: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

input[type="color"] {
    height: 32px;
    padding: 2px;
}

select {
    accent-color: #2b1450;
}

.form-note {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}

/* =========================================================
   GRIDY
   ========================================================= */
.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    gap: 12px;
}

@media (max-width: 900px) {
    .form-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* inline grid: částka / měna / VS / příjemce / zpráva */
.form-grid-inline {
    display: grid;
    grid-template-columns:
        90px
        70px
        140px
        1.2fr
        1.5fr;
    gap: 12px;
    /* margin-top: 12px; */
}

@media (max-width: 1100px) {
    .form-grid-inline {
        grid-template-columns:
            90px
            70px
            140px
            1fr
            1fr;
    }
}

@media (max-width: 800px) {
    .form-grid-inline {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SEKCE
   ========================================================= */
.section {
    margin-top: 20px;
    border-top: 1px solid #e5e5e5;
    padding-top: 14px;
}

/* =========================================================
   CHECKBOXY
   ========================================================= */
.checkbox-inline input[type="checkbox"] {
    accent-color: #2b1450;
}

/* =========================================================
   RADIO GRID (SPRITY)
   ========================================================= */
.radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 68px);
    gap: 8px;
}

.radio-tile {
    cursor: pointer;
}

.radio-tile input {
    display: none;
}

.radio-tile .tile {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    box-sizing: border-box;

    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.radio-tile input:checked + .tile {
    background-color: #f5faff;
    border-color: #554373;
    border-width: 2px;
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px #554373
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0; /* důležité pro grid/flex layout */
}

.qr-radio-group {
    border: 0;
    padding: 0;
    margin: 0;
    margin-top: 20px;
    min-inline-size: 0;
}

.qr-radio-group legend.section-label {
    font-weight: 600;
    margin-bottom: 5px;
}

.qr-colors-section {
    margin-top: 20px; /* stejné jako .qr-radio-group */
}

.qr-final-section {
    margin-top: 20px;
}

fieldset legend {
    display: block;
    padding: 0;
    margin: 0 0 6px 0;   /* jen malá mezera pod */
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;   /* KLÍČOVÉ */
}

/* =========================================================
   PRIMARY CTA – Generate QR
   ========================================================= */

.submitbutton {
    width: 150px;
    padding: 8px 14px;
    margin-top: 3px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;

    color: #ffffff;
    background: linear-gradient(135deg, #3E1E68, #2b1450);
    border: 1px solid #2b1450;
    border-radius: 6px;

    cursor: pointer;

    box-shadow:
        0 2px 6px rgba(43, 20, 80, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.12);

    transition:
        background 0.15s ease,
        transform 0.12s ease,
        box-shadow 0.15s ease;
}

/* Hover – jemné „zvednutí“ */
.submitbutton:hover {
    background: linear-gradient(135deg, #4a257a, #341a5c);
    transform: translateY(-3px);

    box-shadow:
        0 4px 12px rgba(43, 20, 80, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Active – pocit stisku */
.submitbutton:active {
    transform: translateY(0);
    box-shadow:
        0 2px 5px rgba(43, 20, 80, 0.28),
        inset 0 2px 4px rgba(0,0,0,0.25);
}

/* Focus – klávesnice */
.submitbutton:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(123, 63, 228, 0.45),
        0 2px 6px rgba(43, 20, 80, 0.3);
}

.accordion-header {
    cursor: pointer;
    user-select: none;
    margin-top: 24px;
}

.accordion-title {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* mezera mezi textem a šipkou */
}

.accordion-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.accordion-header.open .accordion-arrow {
    transform: rotate(-135deg);
}

.accordion-content {
    display: none;
    margin-top: 12px;
}

.accordion-content.open {
    display: block;
}

.gradient-grid.gradient-swap { 
    grid-template-columns: 120px 40px 120px 160px auto; 
}

.swap-button-wrapper { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.swap-colors { 
    width: 32px; 
    height: 32px; 
    border-radius: 8px; 
    padding: 0px; 
    border: 1px solid #cfcfcf; 
    background-color:#2b1450;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer; 
    font-weight: 700; 
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
    color: #fff; 
}

.swap-colors:hover { 
    box-shadow: 0 2px 10px rgba(0,0,0,.12); 
}

/* =========================================================
   QR SPRITE
   ========================================================= */
.qr-sprite {
    width: 60px;
    height: 60px;
    display: block;

    background-image: url("/static/qr/spritesheet.png");
    background-repeat: no-repeat;
    background-position: var(--x) var(--y);
}

/* =========================================================
   BARVY
   ========================================================= */
.color-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr)) auto;
    gap: 12px;
}

.color-grid input[type="color"] {
    width: 100%;
    height: 32px;
    padding: 2px;
    max-width: 120px;
}

.color-grid-toggle {
    display: flex;
    align-items: center;
    padding-bottom: 0;
    margin-bottom: auto;
    margin-top: 19px;
}

/* =========================================================
   GRADIENT – skryté dokud nerozhodne JS
   ========================================================= */
#gradient-options {
    display: none;
    margin-top: 5px;
}

.gradient-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
}

/* =========================================================
   VELIKOST QR
   ========================================================= */
.qr-size-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.qr-size-row input {
    width: 90px;
}

/* =========================================================
   BUTTON
   ========================================================= */
button {
    margin-top: 24px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    width: 100%;
}

/* =========================================================
   PREVIEW
   ========================================================= */
.panel.qr-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.panel.qr-preview img {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.gradient-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 160px;
    gap: 12px;
    align-items: end;
}

.gradient-grid input[type="color"],
.gradient-grid select {
    width: 100%;
    height: 32px;
}

/* Share icons link */
a.share-icon {
    display: inline-flex;
    border-radius: 4px;
    line-height: 0;
    text-decoration: none;          /* ← DŮLEŽITÉ */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Ikona samotná */
a.share-icon img {
    border-radius: 4px;
    background-color: #2b1450;
    transition: filter 0.15s ease;
}

/* Hover myší + focus z klávesnice */
a.share-icon:hover,
a.share-icon:focus-visible {
    text-decoration: none;          /* ← pojistka */
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(43, 20, 80, 0.35);
}

a.share-icon:hover img,
a.share-icon:focus-visible img {
    filter: brightness(1.15);
}

/* =========================================================
   DYNAMICKÉ POZADÍ – CLEAN & UNIFIED
   ========================================================= */

/* ---------- KONTEJNER POZADÍ ---------- */
.background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;

    /* světelné kapsy */
    background:
        radial-gradient(circle at 20% 10%, #4a257a, #1b0f2f 60%),
        radial-gradient(circle at 80% 90%, #2b1450, #12081f 70%);

    /* barevná paleta */
    --c1: #3E1E68;
    --c2: #5C2D91;
    --c3: #7B3FE4;
    --c4: #E45A84;
    --c5: #FFACAC;
}

.background,
.background * {
    pointer-events: none !important;
}

/* ---------- ZÁKLAD BLOBU ---------- */
.background .blob {
    position: absolute;
    top: 0;
    left: 0;

    width: 22vmin;
    height: 22vmin;

    color: #7B3FE4; /* fallback */
}

/* ---------- VNITŘNÍ KRUH ---------- */
.background .blob i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;

    opacity: 0.35;
    mix-blend-mode: screen;
    animation-duration: calc(4s + var(--r, 0s));
}

.background .blob:nth-child(1)  { --phase: -2s; }
.background .blob:nth-child(2)  { --phase: -7s; }
.background .blob:nth-child(3)  { --phase: -11s; }
.background .blob:nth-child(4)  { --phase: -4s; }
.background .blob:nth-child(5)  { --phase: -9s; }
.background .blob:nth-child(6)  { --phase: -14s; }
.background .blob:nth-child(7)  { --phase: -6s; }
.background .blob:nth-child(8)  { --phase: -12s; }
.background .blob:nth-child(9)  { --phase: -3s; }
.background .blob:nth-child(10) { --phase: -10s; }
.background .blob:nth-child(11) { --phase: -5s; }
.background .blob:nth-child(12) { --phase: -13s; }
.background .blob:nth-child(13) { --phase: -8s; }
.background .blob:nth-child(14) { --phase: -15s; }
.background .blob:nth-child(15) { --phase: -1s; }

/* ---------- HLOUBKA (PARALLAX FEEL) ---------- */

/* zadní plán */
.background .blob:nth-child(3n) {
    transform: scale(0.75);
    opacity: 0.18;
}
.background .blob:nth-child(3n) i {
    filter: blur(28px);
}

/* střed */
.background .blob:nth-child(3n+1) {
    transform: scale(1);
    opacity: 0.28;
}
.background .blob:nth-child(3n+1) i {
    filter: blur(18px);
}

/* popředí */
.background .blob:nth-child(3n+2) {
    transform: scale(1.35);
    opacity: 0.38;
}
.background .blob:nth-child(3n+2) i {
    filter: blur(10px);
}

/* ---------- BARVY ---------- */
.background .blob:nth-child(5n+1) { color: var(--c1); }
.background .blob:nth-child(5n+2) { color: var(--c2); }
.background .blob:nth-child(5n+3) { color: var(--c3); }
.background .blob:nth-child(5n+4) { color: var(--c4); }
.background .blob:nth-child(5n)   { color: var(--c5); }


/* ---------- ANIMACE ---------- */

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

.background .blob i {
    animation:
        spin linear infinite,
        breathe ease-in-out infinite;
    animation-duration:
        calc(6s + var(--r, 0s)),
        4s;
}

@keyframes lava-orbit {
    from {
        transform:
            rotate(0deg)
            translate(var(--rx), var(--ry))
            rotate(0deg);
    }
    to {
        transform:
            rotate(360deg)
            translate(var(--rx), var(--ry))
            rotate(-360deg);
    }
}

@keyframes lava-pulse {
    0%, 100% {
        transform: scale(1);
        filter: blur(18px);
    }
    50% {
        transform: scale(1.12);
        filter: blur(24px);
    }
}