/* ═══════════════════════════════════════════ Carei Reservation — Design Tokens ═══════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&display=swap'); :root { --carei-blue: #2F2482; --carei-red: #FF0000; --carei-red-hover: #D60000; --carei-bg: #EDEDF3; --carei-gray: #505050; --carei-placeholder: #C7C7C7; --carei-border: #D0D0D0; --carei-white: #FFFFFF; --carei-radius: 8px; --carei-radius-lg: 16px; --carei-input-h: 48px; --carei-font: 'Albert Sans', sans-serif; --carei-gap-section: 24px; --carei-gap-inner: 16px; } /* ═══════════════════════════════════════════ Trigger Button ═══════════════════════════════════════════ */ .carei-reservation-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background-color: var(--carei-red); color: var(--carei-white); font-family: var(--carei-font); font-weight: 600; font-size: 14px; border: none; border-radius: var(--carei-radius); cursor: pointer; transition: background-color 0.2s ease; text-decoration: none; line-height: 1; } .carei-reservation-trigger:hover { background-color: var(--carei-red-hover); color: var(--carei-white); } .carei-reservation-trigger svg { width: 16px; height: 16px; fill: currentColor; } /* ═══════════════════════════════════════════ Modal Overlay & Container ═══════════════════════════════════════════ */ .carei-modal-overlay { display: flex; position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .carei-modal-overlay.is-open { opacity: 1; visibility: visible; } .carei-modal { background: var(--carei-bg); border-radius: var(--carei-radius-lg); max-width: 800px; width: 100%; max-height: 90vh; overflow-y: auto; overflow-x: hidden; padding: 40px 48px; position: relative; font-family: var(--carei-font); transform: scale(0.95) translateY(10px); transition: transform 0.3s ease; } .carei-modal-overlay.is-open .carei-modal { transform: scale(1) translateY(0); } .carei-modal-close { position: absolute; top: 16px; left: 16px; background: none; border: none; cursor: pointer; color: #B0B0B0; line-height: 1; padding: 4px; transition: color 0.2s; } .carei-modal-close:hover { color: #808080; } .carei-modal-title { font-family: var(--carei-font); font-weight: 700; font-size: 20px; color: var(--carei-blue); text-align: center; margin: 0 0 var(--carei-gap-section) 0; } .carei-modal-title span { color: var(--carei-red); } /* Scrollbar styling */ .carei-modal::-webkit-scrollbar { width: 6px; } .carei-modal::-webkit-scrollbar-track { background: transparent; } .carei-modal::-webkit-scrollbar-thumb { background: var(--carei-border); border-radius: 3px; } /* ═══════════════════════════════════════════ Form Layout ═══════════════════════════════════════════ */ .carei-form { display: flex; flex-direction: column; gap: var(--carei-gap-section); } .carei-form__section { display: flex; flex-direction: column; gap: var(--carei-gap-inner); } .carei-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--carei-gap-inner); } .carei-form__row--top { grid-template-columns: 1fr 1fr 1fr; } .carei-form__row--pickup { display: flex; align-items: center; gap: var(--carei-gap-inner); } .carei-form__row--pickup > .carei-form__field { flex: 1; min-width: 0; } .carei-form__checkbox-label--inline { white-space: nowrap; flex-shrink: 0; } .carei-form__field { display: flex; flex-direction: column; gap: 4px; } .carei-form__field--full { grid-column: 1 / -1; } /* ═══════════════════════════════════════════ Inputs & Selects ═══════════════════════════════════════════ */ .carei-form__input, .carei-form__textarea, .carei-form__select-wrap select { height: var(--carei-input-h); padding: 0 16px; border: 1px solid transparent; border-radius: var(--carei-radius); background: var(--carei-white); font-family: var(--carei-font); font-weight: 600; font-size: 15px; color: var(--carei-blue); outline: none; transition: border-color 0.2s; width: 100%; box-sizing: border-box; } .carei-form__input::placeholder, .carei-form__textarea::placeholder { color: var(--carei-gray); font-weight: 400; } .carei-form__input:focus, .carei-form__textarea:focus, .carei-form__select-wrap select:focus { border-color: var(--carei-blue); } .carei-form__textarea { height: 143px; padding: 16px; resize: vertical; line-height: 1.5; } .carei-form__label-small { font-family: var(--carei-font); font-weight: 400; font-size: 12px; color: var(--carei-gray); display: flex; align-items: center; gap: 4px; } .carei-form__icon-calendar { color: var(--carei-gray); } /* Floating label for text inputs */ .carei-form__float-wrap { position: relative; height: var(--carei-input-h); background: var(--carei-white); border: 1px solid transparent; border-radius: var(--carei-radius); transition: border-color 0.2s; } .carei-form__float-wrap:focus-within { border-color: var(--carei-blue); } .carei-form__float-label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-family: var(--carei-font); font-weight: 400; font-size: 15px; color: var(--carei-gray); pointer-events: none; transition: top 0.15s, font-size 0.15s, transform 0.15s; z-index: 1; } .carei-form__float-label--static { position: static; transform: none; font-size: 11px; padding: 6px 16px 0; display: block; } .carei-form__input--float { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none !important; background: transparent !important; padding: 0 16px !important; z-index: 2; } .carei-form__input--float:not(:placeholder-shown) ~ .carei-form__float-label, .carei-form__input--float:focus ~ .carei-form__float-label { top: 8px; transform: none; font-size: 10px; } .carei-form__input--float:not(:placeholder-shown), .carei-form__input--float:focus { padding-top: 16px !important; padding-bottom: 0 !important; } /* Date input with floating label */ .carei-form__date-wrap { position: relative; height: var(--carei-input-h); background: var(--carei-white); border: 1px solid transparent; border-radius: var(--carei-radius); transition: border-color 0.2s; cursor: pointer; } .carei-form__date-wrap:focus-within { border-color: var(--carei-blue); } .carei-form__date-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--carei-blue); pointer-events: none; z-index: 3; } .carei-form__date-label { position: absolute; left: 36px; top: 50%; transform: translateY(-50%); font-family: var(--carei-font); font-weight: 400; font-size: 15px; color: var(--carei-gray); pointer-events: none; transition: top 0.15s, font-size 0.15s, transform 0.15s; z-index: 3; } .carei-form__date-wrap.has-value .carei-form__date-label { top: 7px; transform: none; font-size: 10px; } .carei-form__input--date { border: none !important; background: transparent !important; height: 100% !important; width: 100%; padding: 0 12px 0 36px !important; font-size: 14px; position: relative; z-index: 2; } /* Pusty: ukryj natywny tekst i zablokuj interakcję z polami wewnętrznymi */ .carei-form__input--date.is-empty { color: transparent !important; z-index: 1; } .carei-form__input--date.is-empty::-webkit-datetime-edit { color: transparent; -webkit-user-select: none; user-select: none; } /* Wypełniony: przesuń wartość w dół pod label */ .carei-form__date-wrap.has-value .carei-form__input--date { padding-top: 14px !important; padding-bottom: 0 !important; } /* Ukryj natywną ikonę kalendarza przeglądarki */ .carei-form__input--date::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; } /* Select wrapper */ .carei-form__select-wrap { position: relative; display: flex; align-items: center; } .carei-form__select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; } .carei-form__select-wrap--icon select { padding-left: 40px; } .carei-form__select-arrow { position: absolute; right: 16px; pointer-events: none; color: var(--carei-blue); } .carei-form__icon-pin { position: absolute; left: 14px; pointer-events: none; color: var(--carei-gray); z-index: 1; } /* Days count */ .carei-form__days-count { font-family: var(--carei-font); font-size: 13px; color: var(--carei-gray); text-align: right; } .carei-form__days-count strong { color: var(--carei-blue); font-weight: 700; } /* ═══════════════════════════════════════════ Phone Input ═══════════════════════════════════════════ */ .carei-form__phone-wrap { display: flex; flex-direction: column; background: var(--carei-white); border-radius: var(--carei-radius); border: 1px solid transparent; transition: border-color 0.2s; height: var(--carei-input-h); padding: 4px 0 0; } .carei-form__phone-wrap:focus-within { border-color: var(--carei-blue); } .carei-form__phone-label { font-family: var(--carei-font); font-weight: 400; font-size: 10px; color: var(--carei-gray); padding: 0 16px; line-height: 1; } .carei-form__phone-row { display: flex; align-items: center; flex: 1; } .carei-form__phone-prefix { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 12px; border-right: 1px solid var(--carei-border); height: 60%; flex-shrink: 0; font-size: 14px; color: var(--carei-gray); } .carei-form__phone-flag { font-size: 18px; line-height: 1; } .carei-form__phone-code { font-family: var(--carei-font); font-weight: 500; font-size: 14px; color: var(--carei-gray); } .carei-form__input--phone { border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; height: 100%; padding-left: 12px; } .carei-form__input--phone::placeholder { color: var(--carei-placeholder); letter-spacing: 2px; } .carei-form__input--phone:focus { border: none !important; } /* ═══════════════════════════════════════════ Checkboxes (custom) ═══════════════════════════════════════════ */ .carei-form__checkbox-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-family: var(--carei-font); font-size: 14px; color: var(--carei-blue); user-select: none; } .carei-form__checkbox-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .carei-form__checkbox-box { width: 24px; height: 24px; min-width: 24px; border: 2px solid var(--carei-border); border-radius: var(--carei-radius); display: flex; align-items: center; justify-content: center; transition: all 0.2s; background: var(--carei-white); margin-top: 1px; } .carei-form__checkbox-box svg { opacity: 0; transition: opacity 0.15s; } .carei-form__checkbox-label input:checked + .carei-form__checkbox-box { background: var(--carei-blue); border-color: var(--carei-blue); } .carei-form__checkbox-label input:checked + .carei-form__checkbox-box svg { opacity: 1; } .carei-form__checkbox-text { line-height: 1.6; padding-top: 2px; } .carei-form__checkbox-text a { color: var(--carei-blue); text-decoration: underline; font-weight: 600; } .carei-form__checkbox-text a:hover { color: var(--carei-red); } /* ═══════════════════════════════════════════ Dividers ═══════════════════════════════════════════ */ .carei-form__divider { display: flex; align-items: center; gap: 16px; font-family: 'Roboto', var(--carei-font), sans-serif; font-size: 12px; color: var(--carei-gray); text-transform: none; } .carei-form__divider::before, .carei-form__divider::after { content: ''; flex: 1; height: 1px; background: var(--carei-border); } .carei-form__divider span { white-space: nowrap; } /* ═══════════════════════════════════════════ Extra Cards (Ubezpieczenie, Fotelik) ═══════════════════════════════════════════ */ .carei-form__extra-card { border: 1px solid var(--carei-border); border-radius: var(--carei-radius); padding: 16px; background: var(--carei-white); transition: border-color 0.2s; min-width: 0; overflow: hidden; } .carei-form__extra-card:has(input:checked) { border-color: var(--carei-blue); } .carei-form__checkbox-label--card { align-items: center; } .carei-form__extra-content { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; } .carei-form__extra-content strong { font-weight: 600; font-size: 15px; color: var(--carei-blue); word-break: break-word; min-width: 0; } .carei-form__extra-desc { display: none; } .carei-form__extra-price { font-weight: 400; font-size: 14px; color: var(--carei-gray); margin-left: auto; white-space: nowrap; flex-shrink: 0; } .carei-form__checkbox-label--abroad { align-items: center; font-weight: 600; font-size: 15px; } /* ═══════════════════════════════════════════ Abroad Country Search ═══════════════════════════════════════════ */ .carei-abroad { margin-top: 16px; } .carei-abroad__input-wrap { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 1px solid var(--carei-border); border-radius: var(--carei-radius); background: var(--carei-white); transition: border-color 0.2s; } .carei-abroad__input-wrap:focus-within { border-color: var(--carei-blue); } .carei-abroad__plus-icon { flex-shrink: 0; color: var(--carei-blue); } .carei-abroad__input { flex: 1; border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; font-family: 'Albert Sans', sans-serif; font-weight: 600; font-size: 15px; color: var(--carei-blue); line-height: 48px; padding: 0 !important; margin: 0; min-width: 0; } .carei-abroad__input::placeholder { font-weight: 400; color: #C7C7C7; } .carei-abroad__clear { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; cursor: pointer; color: #B0B0B0; border-radius: 50%; transition: color 0.15s; } .carei-abroad__clear:hover { color: var(--carei-gray); } .carei-abroad__input-wrap.has-text .carei-abroad__clear { display: flex; } .carei-abroad__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .carei-abroad__results:empty { display: none; } .carei-abroad__selected { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .carei-abroad__selected:empty { display: none; } .carei-abroad__card { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--carei-radius); background: var(--carei-white); transition: background-color 0.2s, border-color 0.2s; min-width: 0; overflow: hidden; } .carei-abroad__card:hover { background: #2F24820D; } .carei-abroad__card--selected, .carei-abroad__card--selected:hover { background: rgba(47, 36, 130, 0.05); border-color: rgba(47, 36, 130, 0.2); } .carei-abroad__flag { flex-shrink: 0; width: 24px; height: 24px; font-size: 20px; line-height: 24px; text-align: center; } .carei-abroad__name { flex: 1; font-family: 'Albert Sans', sans-serif; font-weight: 600; font-size: 15px; color: var(--carei-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .carei-abroad__price { text-align: right; color: #505050; white-space: nowrap; flex-shrink: 0; } .carei-abroad__price-small { font-size: 10px; } .carei-abroad__price-val { font-size: 14px; } .carei-abroad__action { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none !important; background: transparent !important; background-color: transparent !important; cursor: pointer; font-size: 18px; font-weight: 700; color: var(--carei-blue); padding: 0; line-height: 1; border-radius: 50%; -webkit-appearance: none; appearance: none; box-shadow: none; } @media (max-width: 600px) { .carei-abroad__results, .carei-abroad__selected { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════ Footer (Privacy + Submit) ═══════════════════════════════════════════ */ .carei-form__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--carei-gap-inner); padding-top: 8px; } .carei-form__checkbox-label--privacy { flex: 1; } .carei-form__submit { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; background-color: var(--carei-red); color: var(--carei-white); font-family: var(--carei-font); font-weight: 600; font-size: 14px; border: none; border-radius: var(--carei-radius); cursor: pointer; transition: background-color 0.2s; white-space: nowrap; line-height: 1; flex-shrink: 0; } .carei-form__submit:hover { background-color: var(--carei-red-hover); } .carei-form__submit:disabled { opacity: 0.6; cursor: not-allowed; } .carei-form__submit svg { width: 16px; height: 16px; } /* ═══════════════════════════════════════════ Validation ═══════════════════════════════════════════ */ .carei-form__field--error .carei-form__input, .carei-form__field--error .carei-form__textarea, .carei-form__field--error .carei-form__select-wrap select, .carei-form__field--error .carei-form__phone-wrap { border-color: var(--carei-red) !important; } .carei-form__checkbox-label--error .carei-form__checkbox-box { border-color: var(--carei-red) !important; } .carei-form__error-msg { font-family: var(--carei-font); font-size: 11px; color: var(--carei-red); margin-top: 2px; } .carei-form__error-summary { font-family: var(--carei-font); font-size: 13px; color: var(--carei-red); text-align: center; padding: 8px; background: rgba(255, 0, 0, 0.05); border-radius: var(--carei-radius); } /* Loading state for selects */ .carei-form__select-wrap--loading select { color: var(--carei-placeholder); pointer-events: none; } /* Disabled select */ .carei-form__select-wrap select:disabled { color: var(--carei-placeholder); cursor: not-allowed; opacity: 0.6; } /* Extras wrapper — hidden until segment + pickup selected */ .carei-form__extras-wrapper { display: flex; flex-direction: column; gap: var(--carei-gap-section); } /* Return branch slide */ .carei-form__return-wrap { overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; max-height: 0; opacity: 0; } .carei-form__return-wrap.is-visible { max-height: 80px; opacity: 1; display: block !important; } /* ═══════════════════════════════════════════ Step Transitions (form ↔ summary ↔ success) ═══════════════════════════════════════════ */ .carei-step { transition: opacity 0.25s ease, transform 0.25s ease; } .carei-step--hidden { display: none !important; } .carei-step--exiting { opacity: 0; transform: translateY(-8px); } .carei-step--entering { opacity: 0; transform: translateY(8px); } /* Screen reader only */ .carei-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ═══════════════════════════════════════════ Mobile Responsive (<768px) ═══════════════════════════════════════════ */ @media (max-width: 768px) { .carei-modal-overlay { padding: 0; align-items: flex-end; } .carei-modal { width: 100%; max-width: 100%; max-height: 100vh; height: 100%; border-radius: var(--carei-radius-lg) var(--carei-radius-lg) 0 0; padding: 32px 24px; border-radius: 0; } .carei-form__row { grid-template-columns: 1fr; } .carei-form__row--top { grid-template-columns: 1fr 1fr; } .carei-form__footer { flex-direction: column; align-items: stretch; } .carei-form__submit { width: 100%; justify-content: center; padding: 16px; } .carei-form__row--address { grid-template-columns: 1fr; } .carei-summary__actions { flex-direction: column; } .carei-summary__btn { width: 100%; justify-content: center; } } /* Very small screens */ @media (max-width: 480px) { .carei-form__row--top { grid-template-columns: 1fr; } .carei-modal { padding: 24px 16px; } } /* ═══════════════════════════════════════════ Address Row ═══════════════════════════════════════════ */ .carei-form__row--address { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--carei-gap-inner); } .carei-form__field--zipcode { width: 120px; } /* ═══════════════════════════════════════════ Summary Overlay ═══════════════════════════════════════════ */ .carei-summary { display: flex; flex-direction: column; gap: var(--carei-gap-section); } .carei-summary__title { font-family: var(--carei-font); font-weight: 700; font-size: 20px; color: var(--carei-blue); text-align: center; margin: 0; } .carei-summary__title span { color: var(--carei-red); } .carei-summary__details { font-family: var(--carei-font); font-size: 14px; color: var(--carei-gray); display: flex; flex-direction: column; gap: 6px; background: var(--carei-white); padding: 16px; border-radius: var(--carei-radius); } .carei-summary__details strong { color: var(--carei-blue); } .carei-summary__table table { width: 100%; border-collapse: collapse; font-family: var(--carei-font); font-size: 13px; } .carei-summary__table th { text-align: left; font-weight: 600; color: var(--carei-blue); padding: 8px 12px; border-bottom: 2px solid var(--carei-border); font-size: 12px; text-transform: uppercase; } .carei-summary__table td { padding: 8px 12px; border-bottom: 1px solid var(--carei-border); color: var(--carei-gray); } .carei-summary__table tr:nth-child(even) td { background: rgba(237, 237, 243, 0.5); } .carei-summary__table .carei-summary__auto-item td { font-style: italic; color: var(--carei-placeholder); } .carei-summary__table td:last-child { text-align: right; font-weight: 600; color: var(--carei-blue); } .carei-summary__total { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-family: var(--carei-font); font-size: 14px; color: var(--carei-gray); padding: 0 12px; } .carei-summary__total-row { display: flex; gap: 16px; } .carei-summary__total-row--gross { font-size: 18px; font-weight: 700; color: var(--carei-blue); } .carei-summary__total-label { min-width: 120px; text-align: right; } .carei-summary__total-value { min-width: 100px; text-align: right; } .carei-summary__actions { display: flex; justify-content: space-between; gap: var(--carei-gap-inner); padding-top: 8px; } .carei-summary__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-family: var(--carei-font); font-weight: 600; font-size: 14px; border-radius: var(--carei-radius); cursor: pointer; transition: all 0.2s; line-height: 1; white-space: nowrap; } .carei-summary__btn svg { width: 16px; height: 16px; } .carei-summary__btn--back { background: transparent; border: 1px solid var(--carei-blue); color: var(--carei-blue); } .carei-summary__btn--back:hover { background: rgba(47, 36, 130, 0.05); } .carei-summary__btn--confirm { background: var(--carei-red); border: 1px solid var(--carei-red); color: var(--carei-white); } .carei-summary__btn--confirm:hover { background: var(--carei-red-hover); border-color: var(--carei-red-hover); } .carei-summary__btn:disabled { opacity: 0.6; cursor: not-allowed; } .carei-summary__error { background: rgba(255, 0, 0, 0.05); color: var(--carei-red); padding: 12px 16px; border-radius: var(--carei-radius); font-family: var(--carei-font); font-size: 13px; text-align: center; } /* ═══════════════════════════════════════════ Success View ═══════════════════════════════════════════ */ .carei-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 40px 0; } .carei-success__icon { width: 72px; height: 72px; border-radius: 50%; background: #22c55e; display: flex; align-items: center; justify-content: center; } .carei-success__title { font-family: var(--carei-font); font-weight: 700; font-size: 22px; color: var(--carei-blue); margin: 0; } .carei-success__number { font-family: var(--carei-font); font-weight: 700; font-size: 16px; color: var(--carei-blue); background: var(--carei-white); padding: 12px 24px; border-radius: var(--carei-radius); margin: 0; } .carei-success__message { font-family: var(--carei-font); font-size: 14px; color: var(--carei-gray); margin: 0; } .carei-success__close { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: var(--carei-red); color: var(--carei-white); font-family: var(--carei-font); font-weight: 600; font-size: 14px; border: none; border-radius: var(--carei-radius); cursor: pointer; transition: background-color 0.2s; margin-top: 8px; } .carei-success__close:hover { background: var(--carei-red-hover); }