/**
 * @file    stworz-v3.css
 * @module  Pages / Stworz wizard V3
 * @desc    Page-specific CSS. Większość z design system; tutaj tylko tile
 *          selector, dropzone, custom consent checkboxes.
 */

.sz-v3__hero {
    padding-top: var(--ds-space-6);
    padding-bottom: var(--ds-space-5);
}
.sz-v3__rainbow {
    display: flex;
    width: 100%;
    max-width: 200px;
    height: 4px;
    margin: 0 auto var(--ds-space-4);
    border-radius: var(--ds-radius-pill);
    overflow: hidden;
}
.sz-v3__rainbow > span { flex: 1; }

/* TILE GRID — segment cards */
.sz-v3__tiles {
    margin-bottom: var(--ds-space-5);
}
.sz-v3__tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-2);
    padding: var(--ds-space-5) var(--ds-space-4);
    background: var(--ds-bg-card);
    border: 2px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: transform var(--ds-t-fast) var(--ds-ease),
                border-color var(--ds-t-fast) ease-out,
                box-shadow var(--ds-t-fast) ease-out;
}
.sz-v3__tile:hover:not(.is-active) {
    border-color: var(--ds-accent-medium);
    transform: translate3d(0, -2px, 0);
}
.sz-v3__tile.is-active {
    border-color: var(--ds-accent);
    background: var(--ds-accent-soft);
    box-shadow: var(--ds-shadow-md);
}
.sz-v3__tile-icon {
    font-size: 36px;
    line-height: 1;
}
.sz-v3__tile-title {
    font-size: var(--ds-fs-md);
    font-weight: var(--ds-fw-bold);
    margin: 0;
}
.sz-v3__tile-desc {
    font-size: var(--ds-fs-sm);
    color: var(--ds-text-soft);
    line-height: var(--ds-lh-snug);
    margin: 0;
    flex: 1;
}

/* DROPZONE */
.sz-v3__dropzone {
    position: relative;
    border: 2px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-6) var(--ds-space-4);
    text-align: center;
    background: var(--ds-bg-soft);
    cursor: pointer;
    transition: border-color var(--ds-t-fast) ease-out, background-color var(--ds-t-fast) ease-out;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sz-v3__dropzone:hover,
.sz-v3__dropzone.is-dragover {
    border-color: var(--ds-accent);
    background: var(--ds-accent-soft);
}
.sz-v3__dropzone-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.sz-v3__dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-2);
}
.sz-v3__dropzone-content p {
    margin: 0;
    color: var(--ds-text-soft);
}
.sz-v3__dropzone-limit {
    font-size: var(--ds-fs-sm);
    color: var(--ds-text-muted);
}
.sz-v3__dropzone-preview {
    position: relative;
}
.sz-v3__dropzone-preview img {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--ds-radius-sm);
    background: white;
}
.sz-v3__dropzone-remove {
    position: absolute;
    top: -10px; right: -10px;
    width: 28px; height: 28px;
    background: var(--ds-danger);
    color: white;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* TIPS — details/summary */
.sz-v3__tips {
    margin-top: var(--ds-space-3);
    font-size: var(--ds-fs-sm);
    color: var(--ds-text-soft);
}
.sz-v3__tips summary {
    cursor: pointer;
    font-weight: var(--ds-fw-bold);
    list-style: none;
}
.sz-v3__tips summary::-webkit-details-marker { display: none; }
.sz-v3__tips summary::before {
    content: "ⓘ ";
    color: var(--ds-info);
}
.sz-v3__tips[open] summary::before { content: "▼ "; }
.sz-v3__tips div {
    margin-top: var(--ds-space-2);
    padding: var(--ds-space-3);
    background: var(--ds-bg-soft);
    border-radius: var(--ds-radius-sm);
    line-height: var(--ds-lh-relaxed);
}

/* CONSENT checkboxes */
.sz-v3__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-3);
    cursor: pointer;
    font-size: var(--ds-fs-sm);
    line-height: var(--ds-lh-snug);
}
.sz-v3__consent input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sz-v3__consent-check {
    flex-shrink: 0;
    width: 20px; height: 20px;
    margin-top: 2px;
    border: 2px solid var(--ds-border-strong);
    border-radius: 4px;
    background: white;
    position: relative;
    transition: background-color var(--ds-t-fast) ease-out, border-color var(--ds-t-fast) ease-out;
}
.sz-v3__consent input:checked + .sz-v3__consent-check {
    background: var(--ds-accent);
    border-color: var(--ds-accent);
}
.sz-v3__consent input:checked + .sz-v3__consent-check::after {
    content: "";
    position: absolute;
    top: 2px; left: 5px;
    width: 5px; height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sz-v3__verify-card {
    text-align: center;
}