/* =====================================================================
   RENO STYLE PICKER — wspólny komponent dla step1 (upload-card) oraz
   step3 (mobile reno picker w awaiting_style / empty_slot).

   Single source of truth — ten sam picker wizualnie i mechanicznie:
   ikona przez mask-image z background-color (NIE <img> + filter chain),
   bo daje czyste odwracanie figura/tło na .active (ciemnozielony kafel
   ikony + kremowy glyph) jednym tokenem koloru. Spójne z mask-image
   pattern referral/cart banner.

   Klasy:
     .reno-style-options       — kontener listy (flex column)
     .reno-style-option        — pojedynczy kafelek stylu
       .active                 — wybrany styl (inset bar + dark icon)
     .reno-style-icon          — okrąg z glyphem
     .reno-style-glyph         — glyph przez mask-image, kolor = background
     .reno-style-content       — wrapper na nazwę + opis
     .reno-style-name          — nazwa stylu
     .reno-style-desc          — opis stylu
     .reno-style-radio         — wskaźnik wyboru (okrąg → ptaszek na active)

   Kontekst:
     - step1.html: wewnątrz .upload-card (sekcja .reno-style-section
       owijająca .reno-style-options, z border-top jako separator od
       podglądu zdjęcia).
     - step3.html mobile: wewnątrz .dp-card (samodzielnie, bez tinted
       background — tytuł "Wybierz styl renowacji" jest w .dp-header).

   Zależności (CSS variables zdefiniowane w tokens.css lub lokalnie
   w obu HTML head):
     --variant-bg              — bg niezaznaczonego kafelka (białe)
     --variant-border          — border / glyph color niezaznaczonego
     --variant-selected-bg     — bg zaznaczonego kafelka (zielonkawy)
     --color-main-green        — bg ikony i radio na active (ciemny)
     --kadr-bg                 — kolor glyphu i ptaszka na active (krem)
     --kadr-row-hover          — bg na hover (opcjonalnie, fallback OK)
     --kadr-pick-icon          — kolor glyphu w spoczynku
     --font-family             — opcjonalnie, fallback do system
     --text-heading, --text-body — kolory tekstu
   ===================================================================== */

.reno-style-options {
    display: flex;
    flex-direction: column;
}

/* Kafelek stylu: rozciągnięty edge-to-edge (NO horizontal margin),
   border-top jako separator między kafelkami. Border-bottom na ostatnim
   dla zamknięcia rounded corner card'u (dziedziczy border-radius dolny). */
.reno-style-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--variant-border);
    background: var(--variant-bg);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family, inherit);
    transition: background 0.18s ease;
}

.reno-style-option:first-child {
    border-top: none;
}

.reno-style-option:last-child {
    border-radius: 0 0 14px 14px;
}

.reno-style-option:hover {
    background: var(--kadr-row-hover, rgba(255, 255, 255, 0.55));
}

/* Aktywny kafelek: jasne tło + zielona ramka po lewej (akcent marki).
   UWAGA: akcent jest BOX-INSIDE (box-shadow inset, nie border) — NIE
   zmienia padding'u ani szerokości, więc kafelek się NIE przesuwa
   podczas zmiany aktywnego. 4px brand green = wyraźny, jednostronny
   akcent. */
.reno-style-option.active {
    background: var(--variant-selected-bg);
    box-shadow: inset 4px 0 0 0 var(--color-main-green);
}

/* Ikona stylu: okrągły kafelek (border-radius: 50%).
   Sygnał wyboru: kafelek ikony zamienia się w ciemny (odwrócenie
   figura/tło) — wyraźnie czytelny z dystansu dla grupy 50+. */
.reno-style-icon {
    width: 36px;
    height: 36px;
    background: var(--variant-bg);
    border: 1px solid var(--variant-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reno-style-option.active .reno-style-icon {
    background: var(--color-main-green);
    border-color: var(--color-main-green);
}

/* Glif ikony stylu — SVG przez mask-image (URL wstrzykiwany inline
   przez renderer JS, bo różny per styl). Kolor glifu = `background-color`,
   więc jednym tokenem przełączamy stan: przytłumiona zieleń w spoczynku,
   krem na ciemnym kaflu zaznaczenia. Bez filter-chain solvera. */
.reno-style-glyph {
    width: 22px;
    height: 22px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--kadr-pick-icon, #5A7A5E);
}

.reno-style-option.active .reno-style-glyph {
    background-color: var(--kadr-bg);
}

.reno-style-content {
    flex: 1;
    min-width: 0;
}

.reno-style-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading);
    line-height: 1.3;
    display: block;
}

.reno-style-desc {
    font-size: 12px;
    color: var(--text-body);
    opacity: 0.75;
    line-height: 1.35;
    margin-top: 2px;
    display: block;
}

/* Wskaźnik wyboru po prawej stronie kafelka. Niezaznaczony: pusty
   okrąg w kolorze obrysu niezaznaczonego wiersza (--variant-border) —
   cichy. Zaznaczony: wypełnione zielone kółko z kremowym ptaszkiem —
   większy, jednoznaczny sygnał "wybrane" (istotny dla grupy 50+).
   Razem z ciemnym kaflem ikony + inset-bar daje trzy niezależne
   sygnały selekcji. */
.reno-style-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--variant-border);
    background: transparent;
    flex-shrink: 0;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.reno-style-option.active .reno-style-radio {
    background: var(--color-main-green);
    border-color: var(--color-main-green);
}

/* Ptaszek — check.svg jako maska, kolor kremu z background-color. */
.reno-style-option.active .reno-style-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 13px;
    -webkit-mask-image: url('../assets/icons/check.svg');
    mask-image: url('../assets/icons/check.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--kadr-bg);
}