/* Wyjedzone Zlecenia — formularz (styl 1:1 z projektem; twarde nadpisania motywu) */
.wyj-zl {
    --zl-bg: #f7f4ee;
    --zl-card: #ffffff;
    --zl-field: #f4f2ee;
    --zl-ink: #1c1b1f;
    --zl-muted: #8a8890;
    --zl-pink: #FE9AFC;
    --zl-pink-soft: #ffeafe;
    --zl-pink-border: #f36ef0;
    --zl-lav: #edeafb;
    --zl-lav-soft: #f0edfc;
    --zl-lav-ink: #6b5fd8;
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 16px 48px;
    color: var(--zl-ink);
    font-size: 15px;
    line-height: 1.45;
}
.wyj-zl *, .wyj-zl *::before, .wyj-zl *::after { box-sizing: border-box; }
.wyj-zl [hidden] { display: none !important; }

/* ====== RESET MOTYWU ====== */
.wyj-zl button {
    -webkit-appearance: none !important; appearance: none !important;
    font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important;
    box-shadow: none !important; outline: none !important; margin: 0 !important;
    background-image: none !important; line-height: 1.35 !important;
}
.wyj-zl input, .wyj-zl textarea {
    font-family: inherit !important;
    box-shadow: none !important; outline: none !important;
}
.wyj-zl label { margin: 0; }

/* ====== HERO ====== */
.wyj-zl-hero { text-align: center; margin-bottom: 26px; }
.wyj-zl-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--zl-lav); color: var(--zl-lav-ink);
    font-size: 11px; font-weight: 700; letter-spacing: .12em;
    padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.wyj-zl-badge-icon svg { width: 12px; height: 12px; display: block; }
.wyj-zl-title {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 7vw, 56px); font-weight: 800;
    margin: 0 0 10px; line-height: 1.05; color: var(--zl-ink);
}
.wyj-zl-dot { color: var(--zl-pink); }
.wyj-zl-sub { margin: 0 auto 8px; max-width: 420px; color: #4d4b52; }
.wyj-zl-meta { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--zl-muted); }

/* ====== OSTATNIE ZLECENIA ====== */
.wyj-zl-recent { margin-bottom: 24px; }
.wyj-zl-recent-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--zl-muted);
    margin-bottom: 10px;
}
.wyj-zl-recent-label em { font-style: normal; font-weight: 500; letter-spacing: .02em; }
.wyj-zl-recent-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.wyj-zl button.wyj-zl-chip-recent {
    display: inline-flex !important; align-items: center !important;
    background: #fff !important; color: var(--zl-ink) !important;
    border: 1px solid #ebe7e0 !important; border-radius: 999px !important;
    padding: 11px 18px !important; font-size: 13.5px !important; font-weight: 600 !important;
    cursor: pointer; box-shadow: 0 1px 2px rgba(28, 27, 31, .05) !important;
}
.wyj-zl button.wyj-zl-chip-recent:hover { border-color: var(--zl-pink-border) !important; }

/* ====== TYPY (kafelki: ikona PO LEWEJ, tekst do lewej) ====== */
.wyj-zl-section-label {
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    color: var(--zl-muted); margin: 0 0 10px;
}
.wyj-zl-typegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 26px; }
@media (max-width: 560px) { .wyj-zl-typegrid { grid-template-columns: repeat(2, 1fr); } }

.wyj-zl button.wyj-zl-type {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; justify-content: flex-start !important;
    flex-wrap: nowrap !important; gap: 10px !important;
    width: 100% !important; min-height: 68px !important; height: auto !important;
    background: #fff !important; color: var(--zl-ink) !important;
    border: 1.5px solid #eceae5 !important; border-radius: 14px !important;
    padding: 12px !important; cursor: pointer; text-align: left !important;
}
.wyj-zl button.wyj-zl-type.is-active {
    border-color: var(--zl-pink-border) !important;
    box-shadow: 0 0 0 1px var(--zl-pink-border) !important;
}
.wyj-zl-type-icon {
    flex: 0 0 40px !important; width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--zl-lav-soft); color: var(--zl-lav-ink);
}
.wyj-zl-type-icon svg { width: 20px; height: 20px; display: block; }
.wyj-zl button.wyj-zl-type.is-active .wyj-zl-type-icon { background: var(--zl-pink); color: #fff; }
.wyj-zl-type-text {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; gap: 1px; min-width: 0;
    text-align: left !important;
}
.wyj-zl-type-text strong { font-size: 14px; font-weight: 700; color: var(--zl-ink); }
.wyj-zl-type-text small { color: var(--zl-muted); font-size: 12px; font-weight: 500; }
.wyj-zl button:disabled { opacity: .55; cursor: default; }

/* ====== KARTA ====== */
.wyj-zl-card {
    background: #fff; border-radius: 18px; padding: 24px 22px;
    box-shadow: 0 1px 3px rgba(28, 27, 31, .05); border: 0; margin: 0 0 18px; min-width: 0;
}
fieldset.wyj-zl-card { display: block; }
fieldset.wyj-zl-card:disabled { opacity: .72; }
.wyj-zl-field { margin-bottom: 22px; }
.wyj-zl-field:last-child { margin-bottom: 0; }
.wyj-zl .wyj-zl-label,
.wyj-zl label.wyj-zl-label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
    color: var(--zl-muted); margin: 0 0 8px !important;
}
/* Pas bezpieczeństwa: gdyby motyw zerował margines etykiet (np. selektorem z ID),
   odstęp wymusza też element bezpośrednio PO etykiecie */
.wyj-zl .wyj-zl-field .wyj-zl-label + input.wyj-zl-input,
.wyj-zl .wyj-zl-field .wyj-zl-label + textarea.wyj-zl-input,
.wyj-zl .wyj-zl-field .wyj-zl-label + .wyj-zl-when,
.wyj-zl .wyj-zl-field .wyj-zl-label + .wyj-zl-check,
.wyj-zl .wyj-zl-field .wyj-zl-label + .wyj-zl-budget-row { margin-top: 8px !important; }

/* ====== POLA: szare wypełnienie, BEZ ramki ====== */
.wyj-zl input.wyj-zl-input, .wyj-zl textarea.wyj-zl-input {
    display: block !important; width: 100% !important;
    background: var(--zl-field) !important; color: var(--zl-ink) !important;
    border: 1.5px solid transparent !important; border-radius: 12px !important;
    padding: 14px !important; font-size: 15px !important; line-height: 1.4 !important;
    height: auto !important; min-height: 0 !important;
}
.wyj-zl input.wyj-zl-input:focus, .wyj-zl textarea.wyj-zl-input:focus {
    border-color: var(--zl-pink-border) !important; background: #fff !important;
}
.wyj-zl .wyj-zl-input::placeholder { color: #a4a1a8 !important; opacity: 1 !important; }
.wyj-zl textarea.wyj-zl-textarea { resize: vertical; min-height: 104px !important; }

/* chipy podpowiedzi „skąd" */
.wyj-zl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wyj-zl button.wyj-zl-chip {
    display: inline-flex !important; align-items: center !important;
    background: var(--zl-field) !important; color: var(--zl-ink) !important;
    border: 1px solid #e9e6e0 !important; border-radius: 999px !important;
    padding: 8px 14px !important; font-size: 12.5px !important; font-weight: 600 !important;
    cursor: pointer;
}
.wyj-zl button.wyj-zl-chip:hover { border-color: var(--zl-pink-border) !important; }

/* ====== „GDY CZEGOŚ NIE MA" ====== */
.wyj-zl-check {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--zl-field); border: 1.5px solid transparent; border-radius: 12px;
    padding: 14px; cursor: pointer; margin: 0 0 10px; position: relative;
}
.wyj-zl label.wyj-zl-check { margin: 0 0 12px !important; }
.wyj-zl label.wyj-zl-check:last-child { margin-bottom: 0 !important; }
.wyj-zl-check:has(input:checked) { border-color: var(--zl-pink-border); background: var(--zl-pink-soft); }
.wyj-zl-check input {
    position: absolute !important; opacity: 0 !important;
    width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none;
}
.wyj-zl-check-box {
    flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px;
    background: #fff; border: 1.5px solid #dcd8d0; border-radius: 7px; position: relative;
}
.wyj-zl-check:has(input:checked) .wyj-zl-check-box { background: var(--zl-pink); border-color: var(--zl-pink); }
.wyj-zl-check:has(input:checked) .wyj-zl-check-box::after {
    content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.wyj-zl-check-text strong { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--zl-ink); }
.wyj-zl-check-text small { display: block; color: var(--zl-muted); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }

/* ====== BUDŻET (suwak + pole) ====== */
.wyj-zl-budget-row { display: flex; gap: 16px; align-items: center; }
.wyj-zl input[type="range"]#wyj-zl-budget-slider {
    flex: 1 1 auto; min-width: 0; height: 22px;
    -webkit-appearance: none !important; appearance: none !important;
    background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
    cursor: pointer;
}
.wyj-zl input[type="range"]#wyj-zl-budget-slider::-webkit-slider-runnable-track {
    height: 6px; border-radius: 999px; background: #e9e5de;
}
.wyj-zl input[type="range"]#wyj-zl-budget-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
    background: var(--zl-pink); border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(28, 27, 31, .2);
}
.wyj-zl input[type="range"]#wyj-zl-budget-slider::-moz-range-track {
    height: 6px; border-radius: 999px; background: #e9e5de;
}
.wyj-zl input[type="range"]#wyj-zl-budget-slider::-moz-range-progress {
    height: 6px; border-radius: 999px; background: var(--zl-pink);
}
.wyj-zl input[type="range"]#wyj-zl-budget-slider::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--zl-pink); border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(28, 27, 31, .2);
}
.wyj-zl-budget-input { position: relative; flex: 0 0 130px; }
.wyj-zl-budget-input input.wyj-zl-input { padding-right: 36px !important; }
.wyj-zl-suffix {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--zl-muted); font-size: 14px; pointer-events: none;
}
.wyj-zl-hint {
    margin-top: 12px; background: var(--zl-lav-soft); border-radius: 12px;
    padding: 12px 14px 12px 38px; font-size: 13px; line-height: 1.5; color: #4a4460; position: relative;
}
.wyj-zl-hint-q {
    position: absolute; left: 12px; top: 13px; width: 18px; height: 18px;
    border: 1.5px solid #9c92e6; color: var(--zl-lav-ink); border-radius: 50%;
    font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* Podpowiedź „lista — jedno pod drugim" pod polem CO DOKŁADNIE?
   Ukryta na starcie — pokazuje się TYLKO gdy pole jest aktywne (klik / pisanie). */
.wyj-zl .wyj-zl-what-hint { display: none; }
.wyj-zl .wyj-zl-field:focus-within .wyj-zl-what-hint.is-on {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 8px; padding: 9px 12px;
    background: #ffecfe; border: 1.5px solid #FE9AFC; border-radius: 10px;
    font-size: 13px; line-height: 1.45; color: #241f33; font-weight: 600;
    box-shadow: 0 3px 12px rgba(254, 154, 252, .3);
    animation: wyjZlHintIn .18s ease;
}
.wyj-zl .wyj-zl-what-hint .wyj-zl-what-hint-ic {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 7px; margin-top: -1px;
    background: #FE9AFC; color: #fff;
}
@keyframes wyjZlHintIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ====== KIEDY + TELEFON ====== */
.wyj-zl-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 560px) { .wyj-zl-row { grid-template-columns: 1fr; } }
.wyj-zl-when { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.wyj-zl button.wyj-zl-when-btn {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    background: var(--zl-field) !important; color: var(--zl-ink) !important;
    border: 1.5px solid transparent !important; border-radius: 10px !important;
    padding: 13px 18px !important; font-size: 14px !important; font-weight: 600 !important;
    cursor: pointer;
}
.wyj-zl button.wyj-zl-when-btn.is-active {
    background: var(--zl-pink-soft) !important;
    border-color: var(--zl-pink-border) !important;
}
.wyj-zl input.wyj-zl-input.wyj-zl-time {
    width: 130px !important; flex: 0 0 auto;
    margin: 0; padding: 12px 14px !important;
}

.wyj-zl-ico svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }

/* ====== WYNIK WYCENY ====== */
.wyj-zl-result { border: 1.5px solid var(--zl-pink-border); }
.wyj-zl-result-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 8px 0; font-size: 14.5px;
}
.wyj-zl-result-row small { color: var(--zl-muted); font-size: 12px; }
.wyj-zl-result-total { border-top: 1px dashed #e6e1d9; margin-top: 6px; padding-top: 14px; font-size: 16px; }
.wyj-zl-result-total strong { font-size: 20px; }

/* ====== BŁĄD ====== */
.wyj-zl-error {
    background: #fdecec; color: #a12626; border-radius: 12px;
    padding: 12px 16px; font-size: 14px; margin-bottom: 16px;
}

/* ====== STOPKA ====== */
.wyj-zl-footer {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    margin-top: 6px; flex-wrap: wrap;
}
.wyj-zl-from-price { font-size: 14px; color: #4d4b52; }
.wyj-zl-from-price strong { color: var(--zl-ink); }
.wyj-zl-actions { display: flex; gap: 10px; margin-left: auto; }
.wyj-zl button.wyj-zl-btn {
    display: inline-flex !important; align-items: center !important;
    background: #fff !important; color: var(--zl-ink) !important;
    border: 1.5px solid #e3ded5 !important; border-radius: 999px !important;
    padding: 11px 22px !important; font-size: 15px !important; font-weight: 700 !important;
    cursor: pointer;
}
.wyj-zl button.wyj-zl-btn-primary,
.wyj-zl a.wyj-zl-btn-primary {
    background: var(--zl-pink) !important; color: var(--zl-ink) !important;
    border-color: var(--zl-pink) !important;
}
.wyj-zl button.wyj-zl-btn-primary:hover,
.wyj-zl a.wyj-zl-btn-primary:hover {
    background: var(--zl-pink-border) !important; border-color: var(--zl-pink-border) !important;
}
.wyj-zl .wyj-zl-btn.is-loading { opacity: .6; pointer-events: none; }
.wyj-zl-arrow { margin-left: 4px; }

/* logowanie */
.wyj-zl-login { text-align: center; }
.wyj-zl-login a.wyj-zl-btn {
    display: inline-block; margin-top: 10px; text-decoration: none !important;
    border: 1.5px solid var(--zl-pink) !important; border-radius: 999px !important;
    padding: 11px 22px !important; font-weight: 700 !important;
}

/* Pola wymagane + walidacja */
.wyj-zl .wyj-zl-req { color: #e0457b; font-weight: 700; letter-spacing: 0; }
.wyj-zl input.wyj-zl-input.wyj-zl-invalid,
.wyj-zl textarea.wyj-zl-input.wyj-zl-invalid {
    border-color: #e04545 !important; background: #fdf3f3 !important;
}
.wyj-zl label.wyj-zl-check.wyj-zl-invalid { border-color: #e04545 !important; background: #fdf3f3 !important; }

/* Google Places dropdown nad elementami motywu */
.pac-container { z-index: 100000 !important; }

/* [hidden] musi wygrywać także z naszymi display:* !important (wyższa specyficzność, na końcu pliku) */
.wyj-zl input.wyj-zl-input[hidden],
.wyj-zl button.wyj-zl-btn[hidden],
.wyj-zl button.wyj-zl-when-btn[hidden],
.wyj-zl .wyj-zl-check[hidden],
.wyj-zl [hidden] { display: none !important; }

/* Ukrywanie sterowane JS — podwójna klasa bije każde display:* !important w tym pliku */
.wyj-zl .wyj-zl-gone.wyj-zl-gone,
.wyj-zl button.wyj-zl-gone.wyj-zl-gone,
.wyj-zl input.wyj-zl-gone.wyj-zl-gone { display: none !important; }