/* ==========================================================================
   DugóReklám – Creative Studio (foglalási űrlap 2. lépés)
   A theme CSS-változóira épül (style.css :root).
   ========================================================================== */

.cs-root { color: var(--color-text-inverse); }

/* ----- Útválasztó ----- */
.cs-router {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
@media (max-width: 600px) { .cs-router { grid-template-columns: 1fr; } }

.cs-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    font-family: var(--font-body);
}
.cs-choice:hover { border-color: var(--color-secondary); }
.cs-choice.active {
    border-color: var(--color-secondary);
    background: rgba(230, 155, 30, 0.08);
    box-shadow: var(--shadow-glow);
}
.cs-choice-ic { font-size: 1.6rem; }
.cs-choice-title { font-weight: 700; font-size: 1.05rem; }
.cs-choice-desc { color: var(--color-text-muted); font-size: 0.85rem; }

/* ----- Panel váltás ----- */
.cs-panel { display: none; }
.cs-panel.active { display: block; }

/* ----- Generáló elrendezés ----- */
.cs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-lg);
}
@media (max-width: 860px) { .cs-grid { grid-template-columns: 1fr; } }

.cs-block { margin-bottom: var(--space-lg); }
.cs-block-h {
    display: flex; align-items: center; gap: var(--space-sm);
    font-weight: 700; font-size: 0.95rem; margin-bottom: var(--space-sm);
}
.cs-step-n {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--color-secondary); color: var(--color-primary);
    font-size: 0.8rem; font-weight: 700;
    display: grid; place-items: center; flex: none;
}

/* sablon kártyák */
.cs-templates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.cs-tpl {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: var(--space-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    color: var(--color-text-inverse);
    cursor: pointer; transition: border-color var(--transition-fast);
    font-family: var(--font-body);
}
.cs-tpl:hover { border-color: var(--color-secondary); }
.cs-tpl.active { border-color: var(--color-secondary); }
.cs-tpl-mini { width: 100%; height: 42px; border-radius: var(--radius-sm); }
.cs-tpl-name { font-weight: 700; font-size: 0.85rem; }
.cs-tpl-ratio { font-size: 0.72rem; color: var(--color-text-muted); }

/* slotok + chipek */
.cs-slot { margin-bottom: var(--space-md); }
.cs-slot-label { font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; }
.cs-req { color: var(--color-error); font-size: 0.72rem; font-weight: 600; }
.cs-opt { color: var(--color-text-muted); font-size: 0.7rem; font-weight: 500; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chip {
    cursor: pointer; font-size: 0.8rem; padding: 5px 10px;
    white-space: nowrap;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-dark);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-inverse);
    transition: border-color var(--transition-fast), background var(--transition-fast);
    font-family: var(--font-body);
}
.cs-chip:hover { border-color: var(--color-secondary); }
.cs-chip.sel { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-primary); font-weight: 700; }
.cs-more {
    margin-top: 7px; background: none; border: 1px dashed var(--color-border-dark);
    color: var(--color-text-muted); border-radius: var(--radius-sm);
    padding: 4px 10px; font-size: 0.75rem; cursor: pointer; font-family: var(--font-body);
}
.cs-more:hover { color: var(--color-text-inverse); border-color: var(--color-secondary); }
.cs-addrow { display: flex; gap: 6px; margin-top: 8px; }
.cs-add-btn {
    background: var(--color-accent); border: none; color: #06281a; font-weight: 700;
    border-radius: var(--radius-sm); padding: 0 12px; font-size: 0.78rem; cursor: pointer; font-family: var(--font-body);
}
.cs-hint { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 5px; }

/* mezők */
.cs-field {
    width: 100%; background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border-dark); color: var(--color-text-inverse);
    border-radius: var(--radius-sm); padding: 8px 10px; font-size: 0.85rem; font-family: var(--font-body);
}
.cs-field:focus { outline: none; border-color: var(--color-secondary); }
.cs-mini-label { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 5px; }
.cs-row { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.cs-col { flex: 1; min-width: 120px; }
.cs-select {
    width: 100%; background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border-dark); color: var(--color-text-inverse);
    border-radius: var(--radius-sm); padding: 8px 10px; font-size: 0.85rem;
    font-family: var(--font-body); cursor: pointer;
}
.cs-swatches { display: flex; gap: 8px; }
.cs-sw {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    cursor: pointer; border: 2px solid transparent; padding: 0;
}
.cs-sw.active { border-color: #fff; box-shadow: 0 0 0 2px var(--color-secondary); border-radius: var(--radius-sm); }

/* kijelölt-elem panel */
.cs-selbox {
    border: 1px solid var(--color-border-dark); border-radius: var(--radius-md);
    padding: var(--space-md); background: rgba(255, 255, 255, 0.03);
}
.cs-selbox-empty { color: var(--color-text-muted); font-size: 0.8rem; text-align: center; }
.cs-sel-title { font-size: 0.8rem; font-weight: 700; margin-bottom: var(--space-sm); }
.cs-tag { font-size: 0.7rem; background: var(--color-secondary); color: var(--color-primary); padding: 2px 8px; border-radius: var(--radius-full); }
.cs-sel-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.cs-sel-row label { font-size: 0.75rem; color: var(--color-text-muted); width: 64px; flex: none; }
.cs-sel-row input[type="range"] { flex: 1; accent-color: var(--color-secondary); }
.cs-sel-row select { flex: 1; }
.cs-sel-note { font-size: 0.72rem; color: var(--color-text-muted); }

/* előnézet */
.cs-preview-h {
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 700; font-size: 0.95rem; margin-bottom: var(--space-sm);
}
.cs-fmt { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 500; }
.cs-stage {
    position: relative; background: #000; border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md); padding: var(--space-md);
    display: grid; place-items: center;
}
#cs-canvas {
    max-width: 100%; max-height: 460px; width: auto; height: auto;
    border-radius: var(--radius-sm); touch-action: none; cursor: move;
    box-shadow: var(--shadow-lg);
}
.cs-overlay {
    position: absolute; display: none; pointer-events: none;
    border: 2px dashed rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-sm);
}
.cs-alerts { margin-top: var(--space-md); display: flex; flex-direction: column; gap: 6px; }
.cs-alert {
    font-size: 0.8rem; padding: 8px 11px; border-radius: var(--radius-sm);
    display: flex; gap: 8px; align-items: flex-start;
}
.cs-alert-e { background: rgba(255, 23, 68, 0.12); border: 1px solid rgba(255, 23, 68, 0.4); color: #ff9aab; }
.cs-alert-w { background: rgba(255, 193, 7, 0.12); border: 1px solid rgba(255, 193, 7, 0.4); color: #ffd97a; }
.cs-alert-k { background: rgba(0, 200, 83, 0.12); border: 1px solid rgba(0, 200, 83, 0.4); color: #7ee9b0; }
.cs-use { margin-top: var(--space-md); width: 100%; justify-content: center; }
.cs-use:disabled { opacity: 0.5; cursor: not-allowed; }
.cs-note { font-size: 0.72rem; color: var(--color-text-muted); margin-top: var(--space-sm); }

/* ==========================================================================
   v1.2.0 – elrendezés finomítás: szélesebb kreatív terület +
   a szövegmanipuláló doboz az élő előnézet alá került
   ========================================================================== */

/* A foglalási kártya szélesebb, hogy a 2. lépés kihasználja az asztali helyet. */
.booking-form-wrapper { max-width: 1140px; }

/* Az egyszerű lépések és a navigációs gombsor olvasható szélességen maradnak. */
.booking-form .form-step[data-step="1"],
.booking-form .form-step[data-step="3"],
.booking-form .form-actions {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* A generátor két oszlopának desktop aránya + tágabb gap a v2.0.1-ben
   egyetlen szabályba került (lásd lentebb a min-width:860px blokkot). */

/* Szövegmanipuláló eszközdoboz az élő előnézet alatt. */
.cs-seltools { margin-top: var(--space-md); }
.cs-seltools-h { font-weight: 700; font-size: 0.9rem; margin-bottom: var(--space-sm); }

/* ==========================================================================
   v1.2.0 – dark mode: natív legördülők (select) listája sötét legyen,
   ne fehér-fehéren (olvashatatlanul) jelenjen meg lenyitáskor.
   ========================================================================== */
.booking-form select,
.booking-form select option,
.booking-form select optgroup,
.cs-select,
.cs-select option {
    background-color: #1d1e26;
    color: var(--color-text-inverse);
}

/* ==========================================================================
   v1.3.0 – Creative Studio: fekvő-only + Szöveg/Stílus/Animáció-méret minitabok
   ========================================================================== */
.cs-tabs {
    display: flex; gap: 4px; margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-dark);
}
.cs-tab {
    flex: 1; padding: 9px 8px; background: transparent; border: none;
    color: var(--color-text-muted); font-weight: 700; font-size: 0.85rem;
    cursor: pointer; border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.cs-tab:hover { color: var(--color-text-inverse); }
.cs-tab.active {
    color: var(--color-text-inverse);
    border-bottom-color: var(--color-secondary);
    background: rgba(255, 255, 255, 0.05);
}
.cs-tabpanel { display: none; }
.cs-tabpanel.active { display: block; }

/* Desktop arány: a jobb oldali élő előnézet kap több helyet.
   v2.1.4: a v2.1.3-as csomagban ez a fájl csonkán érkezett (a vége hiányzott);
   az alábbi blokk az újraépített, mérvadó desktop .cs-grid szabály. */
@media (min-width: 861px) {
    .cs-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--space-xl);
        align-items: start;
    }
    .cs-preview { position: sticky; top: calc(var(--space-xl) + 64px); }
}

/* ==========================================================================
   v2.1.4 – Képek, elrendezések, változatok, eszközsor, utcai nézet
   ========================================================================== */

/* foglalt állapot: export és feltöltés alatt nem szerkeszthető */
.cs-busy .cs-controls,
.cs-busy .cs-stage,
.cs-busy .cs-toolbar,
.cs-busy .cs-router { pointer-events: none; opacity: 0.55; }

.cs-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cs-tab { white-space: nowrap; min-width: 0; }
@media (max-width: 420px) { .cs-tab { font-size: 0.78rem; padding: 9px 4px; } }

.cs-linkbtn {
    background: none; border: none; padding: 0 2px; margin-left: 6px;
    color: var(--color-secondary); font: inherit; font-weight: 700;
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.cs-linkbtn:hover { color: var(--color-text-inverse); }

/* képfeltöltés */
.cs-imgblock {
    padding: var(--space-md); margin-bottom: var(--space-md);
    border: 1px solid var(--color-border-dark); background: rgba(255, 255, 255, 0.03);
}
.cs-imgrow { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.cs-upbtn {
    position: relative; display: inline-flex; align-items: center;
    padding: 8px 14px; cursor: pointer; font-weight: 700; font-size: 0.82rem;
    background: var(--color-secondary); color: var(--color-primary);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}
.cs-upbtn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45); }
.cs-upbtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.cs-upbtn:focus-within { outline: 2px solid var(--color-text-inverse); outline-offset: 2px; }
.cs-imgthumb { line-height: 0; border: 1px solid var(--color-border-dark); }
.cs-imgthumb canvas { display: block; max-width: 160px; max-height: 90px; }
.cs-imgthumb-logo {
    background-color: #2a2824;
    background-image: linear-gradient(45deg, #3a3832 25%, transparent 25%, transparent 75%, #3a3832 75%),
                      linear-gradient(45deg, #3a3832 25%, transparent 25%, transparent 75%, #3a3832 75%);
    background-size: 12px 12px; background-position: 0 0, 6px 6px;
}
.cs-check { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; margin-top: var(--space-sm); cursor: pointer; }
.cs-check input { accent-color: var(--color-secondary); width: 16px; height: 16px; }
.cs-check:has(input:disabled) { opacity: 0.5; cursor: default; }

/* elrendezés-presetek */
.cs-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-sm); }
.cs-preset {
    display: flex; flex-direction: column; gap: 4px; align-items: stretch;
    padding: 6px; background: rgba(255, 255, 255, 0.03);
    border: 2px solid var(--color-border-dark); color: var(--color-text-inverse);
    cursor: pointer; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
    transition: border-color var(--transition-fast);
}
.cs-preset canvas { width: 100%; height: auto; display: block; }
.cs-preset:hover { border-color: var(--color-secondary); }
.cs-preset.active { border-color: var(--color-secondary); background: rgba(247, 205, 102, 0.08); }
.cs-variants-btn { margin: 0 0 var(--space-md); width: 100%; padding: 8px 10px; font-size: 0.8rem; }
.cs-swatches { flex-wrap: wrap; }
.cs-sw-logo { outline: 1px dashed rgba(255, 255, 255, 0.6); outline-offset: 2px; }

/* eszközsor az előnézet fölött */
.cs-toolbar { display: flex; gap: 6px; margin-bottom: var(--space-sm); flex-wrap: wrap; }
.cs-toolbtn {
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--color-border-dark);
    color: var(--color-text-inverse); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
    padding: 6px 10px; cursor: pointer;
}
.cs-toolbtn:hover:not(:disabled) { border-color: var(--color-secondary); }
.cs-toolbtn:disabled { opacity: 0.4; cursor: default; }
.cs-toolbtn[aria-expanded="true"] { border-color: var(--color-secondary); background: rgba(247, 205, 102, 0.1); }
.cs-toolbtn-r { margin-left: auto; }
.cs-stage:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }

/* változatok */
.cs-variants { margin-top: var(--space-md); border: 1px solid var(--color-border-dark); padding: var(--space-sm); background: rgba(255, 255, 255, 0.03); }
.cs-variants[hidden], .cs-street[hidden] { display: none; }
.cs-variants-h { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 700; margin-bottom: var(--space-sm); flex-wrap: wrap; }
.cs-variants-h span { margin-right: auto; }
.cs-variants-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.cs-variant { padding: 0; border: 2px solid transparent; background: #000; cursor: pointer; line-height: 0; }
.cs-variant canvas { width: 100%; height: auto; display: block; }
.cs-variant:hover, .cs-variant:focus-visible { border-color: var(--color-secondary); }

/* utcai nézet */
.cs-street { margin-top: var(--space-md); }
.cs-street canvas { width: 100%; height: auto; display: block; border: 1px solid var(--color-border-dark); }

/* mobil: az előnézet a vezérlők elé kerül, hogy szerkesztés közben látszódjon */
@media (max-width: 860px) {
    .cs-grid { grid-template-columns: minmax(0, 1fr); }
    .cs-preview { order: -1; }
    #cs-canvas { max-height: 52vh; }
    .cs-stage { padding: var(--space-sm); }
}

/* keskeny kijelző: a foglalási kártya belső margója kisebb, hogy a generátor
   kiférjen; a hosszú gombfelirat tördelődik */
@media (max-width: 600px) {
    .booking-form-wrapper { padding-left: var(--space-md); padding-right: var(--space-md); }
    .cs-preview-h { flex-wrap: wrap; gap: 2px 10px; }
    .cs-use { white-space: normal; line-height: 1.3; font-size: 0.9rem; padding-left: var(--space-md); padding-right: var(--space-md); }
    .cs-toolbtn-r { margin-left: 0; }
}