/* ═══════════════════════════════════════════════════════════════════════════ APCOA — Date picker w hero (wersja 2: dwie kolumny) Dołącz do ZAMIAST lub PO parking.css: ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Przebuduj hero na dwukolumnowy layout ────────────────────────────── */ .parking-subhero .container { display: flex; align-items: center; gap: 40px; min-height: inherit; } .parking-subhero__content { flex: 1 1 50%; max-width: 55%; } /* ── 2. Picker card — prawa kolumna ─────────────────────────────────────── */ #apcoa-picker { flex: 0 0 auto; width: 42%; max-width: 460px; background: transparent !important; padding: 0 !important; } #apcoa-picker .container { padding: 0 !important; max-width: none !important; display: block !important; } .apcoa-picker__inner { background: rgba(255, 255, 255, 0.97); border-radius: 14px; padding: 24px 28px; border: none; } .apcoa-picker__eyebrow { color: #0057a8; font-size: 0.85rem; font-weight: 700; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; } .apcoa-picker__eyebrow i { font-size: 16px; } /* ── 3. Pola formularza — siatka 2x2 ────────────────────────────────────── */ .apcoa-picker__fields { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; gap: 12px 8px; align-items: end; flex-wrap: unset; } /* Przyjazd — lewa kolumna, wiersz 1 */ .apcoa-picker__group:nth-child(1) { grid-column: 1; grid-row: 1; } /* Godzina przyjazdu — lewa kolumna, wiersz 2 */ .apcoa-picker__group:nth-child(2) { grid-column: 1; grid-row: 2; } /* Strzałka — środek */ .apcoa-picker__arrow { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; padding-bottom: 4px; color: #0057a8; font-size: 1rem; } /* Odjazd — prawa kolumna, wiersz 1 */ .apcoa-picker__group:nth-child(4) { grid-column: 3; grid-row: 1; } /* Godzina odjazdu — prawa kolumna, wiersz 2 */ .apcoa-picker__group:nth-child(5) { grid-column: 3; grid-row: 2; } /* Przycisk — pełna szerokość */ #apcoa-search-btn { grid-column: 1 / -1; grid-row: 3; width: 100%; justify-content: center; padding: 12px; margin-top: 4px; background: #0057a8; color: #fff; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: background 0.2s; } #apcoa-search-btn:hover:not(:disabled) { background: #003f7d; } /* Status */ #apcoa-status { grid-column: 1 / -1; } .apcoa-picker__group label { color: #555; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; } .apcoa-picker__group input[type="date"], .apcoa-picker__group select { background: #f5f7fa; border: 1.5px solid #dde2ea; border-radius: 7px; color: #1a2a3a; font-size: 0.9rem; padding: 9px 12px; width: 100%; transition: border-color 0.15s; } .apcoa-picker__group input[type="date"]:focus, .apcoa-picker__group select:focus { outline: none; border-color: #0057a8; } .apcoa-status--ok { background: #e8f4fe; color: #0c447c; border-radius: 6px; padding: 8px 12px; font-size: 0.8rem; } .apcoa-status--error { background: #fff0f0; color: #c0392b; border-radius: 6px; padding: 8px 12px; font-size: 0.8rem; } /* ── 4. Ukryj stary picker przed #prices (jeśli istnieje) ───────────────── */ section#apcoa-picker + section#prices, section#apcoa-picker { /* picker jest teraz w hero — nie ma osobnej sekcji */ } /* ── 5. Responsive — na mobile wróć do jednej kolumny ───────────────────── */ @media (max-width: 991px) { .parking-subhero .container { flex-direction: column; align-items: stretch; gap: 24px; padding-bottom: 24px; } .parking-subhero__content { max-width: 100%; flex: none; } #apcoa-picker { width: 100%; max-width: 100%; } .apcoa-picker__fields { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; } .apcoa-picker__group:nth-child(1) { grid-column: 1; grid-row: 1; } .apcoa-picker__group:nth-child(2) { grid-column: 2; grid-row: 1; } .apcoa-picker__arrow { display: none; } .apcoa-picker__group:nth-child(4) { grid-column: 1; grid-row: 2; } .apcoa-picker__group:nth-child(5) { grid-column: 2; grid-row: 2; } #apcoa-search-btn { grid-column: 1 / -1; grid-row: 3; } } /* ── 6. Nadpisanie sztywnej wysokości hero z main.scss na mobile ─────────── */ /* main.scss ustawia height: 650px/640px na mobile — to powoduje że picker wychodzi poza hero. Usuwamy sztywną wysokość i pozwalamy treści wyznaczać rozmiar */ @media (max-width: 991px) { .parking-page .parking-subhero { height: auto !important; min-height: 0 !important; padding-bottom: 32px !important; } } @media (max-width: 768px) { .parking-page .parking-subhero { height: auto !important; min-height: 0 !important; padding-bottom: 32px !important; } /* Picker na mobile — trochę mniejszy padding */ .apcoa-picker__inner { padding: 18px 16px; } /* Upewnij się że picker nie wychodzi poza hero */ #apcoa-picker { width: 100%; max-width: 100%; margin-top: 8px; } } /* ── 7. Poprawka ikony kalendarza ────────────────────────────────────────── */ .apcoa-picker__group input[type="date"] { color: #1a2a3a !important; color-scheme: light; } /* Ikona kalendarza — niebieski kolor */ .apcoa-picker__group input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: 1; cursor: pointer; color: #0057a8; background-color: transparent; }