/* ============================================================
   Kreator CV — skórka theme'u noraline (Editorial Clarity).

   Markup kreatora jest wspólny dla wszystkich projektów
   (cv-generator-block.html.twig), więc NIE forkujemy go pod theme.
   Zamiast tego nadpisujemy tu kolory z Tailwinda, opierając się
   na wyższej specyficzności: `.cv-skin-noraline .cv-generator-wrapper X`
   bije pojedynczą klasę utility.

   Wrapper `.cv-skin-noraline` zakłada szablon theme'u noraline.
   Bez niego kreator wygląda jak wcześniej — rcponline i flowtica
   nie widzą tego pliku.
   ============================================================ */

.cv-skin-noraline {
    --cv-ink: var(--nl-ink, #1c1233);
    --cv-amber: var(--nl-amber, #f5a623);
    --cv-muted: var(--nl-muted, #5b5375);
    --cv-paper: #f7f4ef;
    --cv-line: rgba(28, 18, 51, 0.14);
    --cv-line-strong: rgba(28, 18, 51, 0.28);
}

/* ─── Linie i płaszczyzny ────────────────────────────────── */
.cv-skin-noraline .cv-generator-wrapper .border-slate-200 { border-color: var(--cv-line); }
.cv-skin-noraline .cv-generator-wrapper .border-slate-300 { border-color: var(--cv-line-strong); }
.cv-skin-noraline .cv-generator-wrapper .bg-slate-50 { background-color: var(--cv-paper); }
.cv-skin-noraline .cv-generator-wrapper .bg-slate-200 { background-color: var(--cv-line); }
.cv-skin-noraline .cv-generator-wrapper .bg-slate-300 { background-color: var(--cv-line-strong); }

/* ─── Typografia ─────────────────────────────────────────── */
.cv-skin-noraline .cv-generator-wrapper .text-slate-500 { color: var(--cv-muted); }
.cv-skin-noraline .cv-generator-wrapper .text-slate-700,
.cv-skin-noraline .cv-generator-wrapper .text-slate-900 { color: var(--cv-ink); }

/* Nagłówki sekcji dziedziczą Fraunces z theme'u; tu tylko rytm liter. */
.cv-skin-noraline .cv-generator-wrapper .section-title {
    letter-spacing: 0.09em;
    color: var(--cv-ink);
}
.cv-skin-noraline .cv-generator-wrapper .section-title::after { color: var(--cv-amber); }

/* ─── Akcent: niebieski Tailwinda → atrament i bursztyn ──── */
.cv-skin-noraline .cv-generator-wrapper .border-blue-500 { border-color: var(--cv-ink); }
.cv-skin-noraline .cv-generator-wrapper .text-blue-500 { color: var(--cv-ink); }
.cv-skin-noraline .cv-generator-wrapper .hover\:border-blue-500:hover { border-color: var(--cv-ink); }

.cv-skin-noraline .cv-generator-wrapper .input-group input:focus,
.cv-skin-noraline .cv-generator-wrapper .input-group textarea:focus,
.cv-skin-noraline .cv-generator-wrapper input:focus,
.cv-skin-noraline .cv-generator-wrapper textarea:focus,
.cv-skin-noraline .cv-generator-wrapper select:focus {
    outline: none;
    border-color: var(--cv-ink);
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.35);
}

/* Wybór szablonu to przyciski, nie <input type="radio"> — natywnej kontrolki
   nie da się dopasować do tego theme'u, bo rysuje ją system. Stan niesie
   cała pigułka, więc nie ma tu żadnej kropki do stylowania. */
.cv-skin-noraline .cv-generator-wrapper .template-option {
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--cv-ink);
    border-color: var(--cv-line-strong);
    border-radius: 10px;
}
.cv-skin-noraline .cv-generator-wrapper .template-option:hover {
    border-color: var(--cv-ink);
    background-color: var(--cv-paper);
}
.cv-skin-noraline .cv-generator-wrapper .template-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.5);
}

/* Checkbox zgody zostaje kontrolką natywną, ale rysowaną od zera:
   płaska ramka 2 px i ptaszek zamiast systemowego kwadratu z cieniem. */
.cv-skin-noraline #newsletterModal input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    border: 2px solid var(--cv-ink);
    border-radius: 4px;
    background: #fff;
    display: grid;
    place-content: center;
    cursor: pointer;
}
.cv-skin-noraline #newsletterModal input[type="checkbox"]::before {
    content: "";
    width: 9px;
    height: 5px;
    margin-top: -2px;
    border-left: 2px solid var(--cv-ink);
    border-bottom: 2px solid var(--cv-ink);
    transform: rotate(-45deg) scale(0);
    transition: transform 0.12s ease-out;
}
.cv-skin-noraline #newsletterModal input[type="checkbox"]:checked::before {
    transform: rotate(-45deg) scale(1);
}
.cv-skin-noraline #newsletterModal input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.5);
}

/* cv.css ustawia stan aktywny z !important — inaczej się nie przebijemy. */
.cv-skin-noraline .cv-generator-wrapper .template-option.active {
    border-color: var(--cv-ink) !important;
    background-color: var(--cv-amber) !important;
    color: var(--cv-ink) !important;
}

/* ─── Przyciski: komiksowy cień zamiast płaskiego tła ────── */
.cv-skin-noraline .cv-generator-wrapper #btnDownloadPDF {
    background-color: var(--cv-ink);
    border: 2px solid var(--cv-ink);
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--cv-amber);
    transition: transform 0.15s, box-shadow 0.15s;
}
.cv-skin-noraline .cv-generator-wrapper #btnDownloadPDF:hover {
    background-color: var(--cv-ink);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--cv-amber);
}

/* Bursztyn w tym interfejsie znaczy „wybrane”. Zapisz jako drugi bursztyn
   konkurował z zaznaczonym szablonem, więc dostaje atrament. */
.cv-skin-noraline .cv-generator-wrapper #btnSaveCV {
    background-color: var(--cv-ink);
    color: #fff;
    border: 1.5px solid var(--cv-ink);
}
.cv-skin-noraline .cv-generator-wrapper #btnSaveCV:hover {
    background-color: var(--cv-ink);
    filter: brightness(1.25);
}

.cv-skin-noraline .cv-generator-wrapper #btnLoadCV,
.cv-skin-noraline .cv-generator-wrapper #btnLoadSample,
.cv-skin-noraline .cv-generator-wrapper #btnResetCV {
    border-color: var(--cv-line-strong);
    color: var(--cv-ink);
}

/* ─── Pozycje dodawane przez JS ──────────────────────────── */
.cv-skin-noraline .cv-generator-wrapper .dynamic-item {
    background: var(--cv-paper);
    border: 1.5px solid var(--cv-line-strong);
    border-radius: 12px;
}
.cv-skin-noraline .cv-generator-wrapper .input-group input,
.cv-skin-noraline .cv-generator-wrapper .input-group textarea,
.cv-skin-noraline .cv-generator-wrapper .input-group select {
    border-color: var(--cv-line-strong);
    border-radius: 8px;
}
.cv-skin-noraline .cv-generator-wrapper .input-group label { color: var(--cv-muted); }

/* ─── Scena podglądu ─────────────────────────────────────── */
/* Tło sceny i pasek narzędzi mają kolor w atrybucie style, stąd !important. */
.cv-skin-noraline .cv-generator-wrapper .preview-stage {
    background-color: #241b3d !important;
}
.cv-skin-noraline .cv-generator-wrapper .preview-toolbar {
    background: rgba(36, 27, 61, 0.92) !important;
    border: 2px solid rgba(255, 255, 255, 0.14);
}

/* Kartki: bursztynowy cień z przesunięciem zamiast miękkiej poświaty. */
.cv-skin-noraline .cv-generator-wrapper .cv-page-canvas {
    box-shadow: 10px 10px 0 rgba(245, 166, 35, 0.9);
}

/* ─── Modal newslettera ──────────────────────────────────── */
.cv-skin-noraline #newsletterModal .bg-white {
    border: 2px solid var(--cv-ink);
    box-shadow: -10px 10px 0 var(--cv-amber);
}
.cv-skin-noraline #newsletterModal .bg-blue-500,
.cv-skin-noraline #newsletterModal #newsletterSubmitBtn {
    background-color: var(--cv-ink);
    border: 2px solid var(--cv-ink);
    border-radius: 999px;
}