/* ==========================================================================
   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; }

/* Fekvő preview: több hely a jobb oldali élő előnézetnek.
   v2.0.1: ez az egyetlen, mérvadó desktop .cs-grid szabály. A korábbi v1.2.0-s
   (1.1fr / 1fr) blokk holt kód volt — ugyanaz