/* Central responsive layer for booking Steps 2-4. Migrated from the former mobile-restore stylesheet in 2.15.546. */ /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:1100px){.rentalo-ui-step2-pickers-layout{grid-template-columns:repeat(6,minmax(0,1fr));}.rentalo-ui-step2-opening-hours-bar{grid-template-columns:repeat(6,minmax(0,1fr));}.rentalo-ui-step2-opening-hours-link{grid-column:1 / 4;}.rentalo-ui-step2-rental-duration{grid-column:5 / 7;}.rentalo-ui-step2-row--pickup-location{grid-column:1 / 3;grid-row:1;}.rentalo-ui-step2-row--return-location{grid-column:3 / 5;grid-row:1;}.rentalo-ui-step2-row--start-date{grid-column:1 / 2;grid-row:2;}.rentalo-ui-step2-row--start-time{grid-column:2 / 3;grid-row:2;}.rentalo-ui-step2-row--end-date{grid-column:3 / 4;grid-row:2;}.rentalo-ui-step2-row--end-time{grid-column:4 / 5;grid-row:2;}.rentalo-ui-step2-row--category{grid-column:5 / 6;grid-row:2;}.rentalo-ui-step2-row--planned-km{grid-column:6 / 7;grid-row:2;}.rentalo-ui-step2-actions{grid-column:6 / 7;grid-row:3;}.rentalo-ui-step2-row--opening-hours-link{grid-column:1 / -1;grid-row:3;}} /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){.rentalo-ui-step2 .rentalo-frontend-shell{padding:0 18px;}.rentalo-ui-step2-topbar{max-width:360px;margin:0 auto 18px;padding:12px;border-radius:16px;}.rentalo-ui-step2-pickers-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end;}.rentalo-ui-step2-row--pickup-location{grid-column:1 / -1;grid-row:1;}.rentalo-ui-step2-row--return-location{grid-column:1 / -1;grid-row:2;}.rentalo-ui-step2-row--start-date{grid-column:1;grid-row:3;}.rentalo-ui-step2-row--start-time{grid-column:2;grid-row:3;}.rentalo-ui-step2-row--end-date{grid-column:1;grid-row:4;}.rentalo-ui-step2-row--end-time{grid-column:2;grid-row:4;}.rentalo-ui-step2-row--category{grid-column:1;grid-row:5;}.rentalo-ui-step2-row--planned-km{grid-column:2;grid-row:5;}.rentalo-ui-step2-actions{grid-column:1 / -1;grid-row:8;}.rentalo-ui-step2-row--opening-hours-link{grid-column:1 / -1;grid-row:7;}.rentalo-ui-step2-notices{grid-column:1 / -1;grid-row:6;}.rentalo-ui-step2-pickers-layout--no-km .rentalo-ui-step2-row--category{grid-column:1 / -1;}.rentalo-ui-step2-pickers-layout--no-km .rentalo-ui-step2-actions{grid-column:1 / -1;}.rentalo-ui-step2-opening-hours-bar{display:grid;grid-template-columns:1fr;gap:10px;}.rentalo-ui-step2-rental-duration{grid-column:1;grid-row:1;margin-left:0;}.rentalo-ui-step2-opening-hours-link{grid-column:1;width:100%;height:36px;text-align:center;display:flex;align-items:center;justify-content:center;}.rentalo-ui-step2-btn{width:100%;font-size:16px;}.rentalo-ui-step2-btn-text{display:inline;}.rentalo-ui-step2-btn-icon{display:none;}.rentalo-ui-step2-item-card{grid-template-columns:1fr;gap:12px;padding:14px;}.rentalo-ui-step2-media{justify-content:flex-start;}.rentalo-ui-step2-side{align-items:flex-start;}.rentalo-ui-step2-price{align-items:flex-start;}.rentalo-ui-step2-item-card .rentalo-submit-button{width:100%;}} /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2-pickers-layout, .rentalo-ui-step2-opening-hours-bar, .rentalo-ui-step2-item-card{ gap:var(--rentalo-field-gap,10px); } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-step2-mobile-summary{ display:block; width:100%; max-width:360px; margin:0 auto 18px; } .rentalo-booking-details-summary-button{ width:100%; min-height:64px; padding:12px 14px; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-radius,16px); background:var(--rentalo-card-bg,#fff); color:var(--rentalo-text,#1a2932); box-shadow:var(--rentalo-shadow,0 10px 26px rgba(20,45,73,.06)); display:grid; grid-template-columns:minmax(0,1fr) 36px; gap:10px; align-items:center; text-align:left; cursor:pointer; } .rentalo-step2-mobile-summary-text{ min-width:0; display:flex; flex-direction:column; gap:4px; } .rentalo-step2-mobile-summary-text strong{ color:var(--rentalo-title,#1a2932); font-size:15px; font-weight:700; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rentalo-step2-mobile-summary-text span{ color:var(--rentalo-text,#1a2932); font-size:13px; font-weight:500; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rentalo-step2-mobile-summary-icon{ width:36px; height:36px; border-radius:12px; background:#fff; color:var(--rentalo-title,#1a2932); display:flex; align-items:center; justify-content:center; } .rentalo-step2-mobile-summary-icon svg{ width:20px; height:20px; display:block; fill:currentColor; } .rentalo-booking-details-sheet{ position:fixed; inset:0; z-index:var(--rentalo-layer-booking-modal); display:block; visibility:hidden; pointer-events:none; } .rentalo-booking-details-sheet__backdrop{ display:block; position:absolute; inset:0; background:rgba(7,17,29,.42); opacity:0; transition:opacity .2s ease; } .rentalo-booking-details-sheet__dialog{ position:absolute; top:0; left:0; right:0; max-height:92vh; overflow:auto; padding:16px 18px 18px; border-bottom-left-radius:20px; border-bottom-right-radius:20px; background:var(--rentalo-card-bg,#fff); box-shadow:0 18px 42px rgba(20,45,73,.18); transform:translateY(-105%); transition:transform .24s ease; box-sizing:border-box; } .rentalo-booking-details-sheet.is-open{ visibility:visible; pointer-events:auto; } .rentalo-booking-details-sheet.is-open .rentalo-booking-details-sheet__backdrop{ opacity:1; } .rentalo-booking-details-sheet.is-open .rentalo-booking-details-sheet__dialog{ transform:translateY(0); } .rentalo-booking-details-sheet__header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; } .rentalo-booking-details-sheet__header h3{ margin:0; color:var(--rentalo-title,#1a2932); font-size:18px; line-height:1.2; font-weight:700; } .rentalo-booking-details-sheet__close{ width:36px; height:36px; min-width:36px; padding:0; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:12px; background:var(--rentalo-input-bg,#fff); color:var(--rentalo-title,#1a2932); font-size:var(--rentalo-heading-size,24px); line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; } .rentalo-booking-details-sheet .rentalo-ui-step2-topbar{ max-width:360px; margin:0 auto; padding:12px; } .rentalo-booking-details-sheet .rentalo-ui-step2-btn{ font-size:16px; } .rentalo-booking-details-sheet .rentalo-ui-step2-btn-text{ display:inline; } .rentalo-booking-details-sheet .rentalo-ui-step2-btn-icon{ display:none; } .rentalo-booking-details-open{ overflow:hidden; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media{min-width:0;} .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button{ width:100%; aspect-ratio:var(--rentalo-step2-mobile-image-ratio,4 / 3); overflow:hidden; border-radius:var(--rentalo-choice-radius,14px); } .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-content h4{ margin-top:0; font-size:var(--rentalo-heading-size,24px); line-height:1.15; } .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-side form{ display:flex; justify-content:center; width:100%; margin:4px 0 0; } .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-item-card .rentalo-submit-button{ width:auto; min-width:150px; padding-left:22px; padding-right:22px; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-virtual-booking-flow{ margin-top:0; padding-top:0; } /* Astra setzt hier mobil standardmäßig großen Innenabstand. Nur oben gezielt auf 1em reduzieren, unten unverändert lassen. */ .ast-separate-container #primary.rentalo-virtual-booking-flow{ padding-top:1em; } .rentalo-virtual-booking-flow > .rentalo-ui-step2, .rentalo-ui-step2{ width:100vw; max-width:none; margin-top:0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-top:0; } .rentalo-ui-step2 .rentalo-frontend-shell{padding-top:0; gap:10px;} .rentalo-ui-step2 .rentalo-step2-mobile-summary{width:100%; max-width:none; margin:0 0 8px; padding:0;} .rentalo-ui-step2 .rentalo-ui-step2-list{ width:100%; max-width:none; margin-top:0; padding-left:0; padding-right:0; } .rentalo-ui-step2 .rentalo-ui-step2-item-card{ width:100%; margin-left:0; margin-right:0; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-booking-details-sheet .rentalo-ui-step2-pickers-layout, .rentalo-ui-step2-topbar .rentalo-ui-step2-pickers-layout{ grid-template-columns:minmax(0,calc((100% - var(--rentalo-field-gap,10px))/2 + 20px)) minmax(0,calc((100% - var(--rentalo-field-gap,10px))/2 - 20px)); } .rentalo-ui-step2-rental-duration{justify-self:end; text-align:right; width:100%;} .rentalo-ui-step2-opening-hours-link{min-height:36px; padding:0 12px; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:10px; background:#f8fbff; color:var(--rentalo-primary,#006699); text-decoration:none; box-shadow:0 1px 0 rgba(20,45,73,.03);} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2 .rentalo-ui-step2-pickers-layout, .rentalo-ui-step2 .rentalo-booking-details-sheet .rentalo-ui-step2-pickers-layout, .rentalo-ui-step2 .rentalo-ui-step2-topbar .rentalo-ui-step2-pickers-layout{ grid-template-columns:minmax(0,calc((100% - var(--rentalo-field-gap,10px))/2 + 20px)) minmax(0,calc((100% - var(--rentalo-field-gap,10px))/2 - 20px)); } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2 .rentalo-booking-details-summary-button{min-height:0; align-items:start;} .rentalo-ui-step2 .rentalo-step2-mobile-summary-text{ gap:3px; } .rentalo-ui-step2 .rentalo-step2-mobile-summary-row{ display:block; white-space:normal; overflow:visible; text-overflow:clip; } .rentalo-ui-step2 .rentalo-step2-mobile-summary-row[hidden]{ display:none; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width: 767px){ .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-side{ align-items:center; gap:12px; padding-top:10px; } .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-price{ line-height:1.15; } .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-item-card .rentalo-submit-button{ min-width:112px; padding-left:16px; padding-right:16px; } .rentalo-ui-step2-content .rentalo-group-meta p{ line-height:1.35; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2 .rentalo-ui-step2-item-card, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-item-card{display:grid; align-items:start;} .rentalo-ui-step2 .rentalo-ui-step2-media, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media{grid-column:1; grid-row:1; min-width:0;} .rentalo-ui-step2 .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-ui-step2 .rentalo-ui-step2-media img, .rentalo-ui-step2 .rentalo-group-image-placeholder, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media img, .rentalo-ui-step2--mobile-list-image-top .rentalo-group-image-placeholder{aspect-ratio:auto; max-width:100%; overflow:hidden;} .rentalo-ui-step2 .rentalo-ui-step2-content, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-content{ grid-column:2; grid-row:1; min-width:0; } .rentalo-ui-step2 .rentalo-ui-step2-code, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-code{ display:none; } .rentalo-ui-step2 .rentalo-ui-step2-side, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-side{grid-column:1 / -1; grid-row:2; display:grid; align-items:center; width:100%;} .rentalo-ui-step2 .rentalo-ui-step2-price, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-price{display:flex; flex-direction:column; line-height:1.12;} .rentalo-ui-step2 .rentalo-ui-step2-price-prefix, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-price-prefix{color:var(--rentalo-muted,#66778a); line-height:1;} .rentalo-ui-step2 .rentalo-ui-step2-price small, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-price small{font-weight:700;} .rentalo-ui-step2 .rentalo-ui-step2-side form, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-side form{ margin:0; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2 .rentalo-ui-step2-item-card, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-item-card{grid-template-columns:96px minmax(0,1fr); gap:10px 12px; padding:10px; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-radius,16px); background:var(--rentalo-card-bg,#fff); box-shadow:none;} .rentalo-ui-step2 .rentalo-ui-step2-media, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media{width:96px;} .rentalo-ui-step2 .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-ui-step2 .rentalo-ui-step2-media img, .rentalo-ui-step2 .rentalo-group-image-placeholder, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media img, .rentalo-ui-step2--mobile-list-image-top .rentalo-group-image-placeholder{width:96px; height:74px; min-height:0; object-fit:cover; border-radius:12px;} .rentalo-ui-step2 .rentalo-ui-step2-group, .rentalo-ui-step2 .rentalo-ui-step2-content .rentalo-group-meta p, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-group, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-content .rentalo-group-meta p{margin:0 0 4px; font-size:12px; font-weight:500; line-height:1.28;} .rentalo-ui-step2 .rentalo-ui-step2-side, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-side{grid-template-columns:minmax(0,1fr) auto; gap:10px; padding-top:10px; border-top:1px solid var(--rentalo-border,#d6e0ec);} .rentalo-ui-step2 .rentalo-ui-step2-price strong, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-price strong{letter-spacing:-.01em;} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button{ width:100%; height:auto; max-width:none; aspect-ratio:var(--rentalo-step2-mobile-image-ratio,4 / 3); border-radius:var(--rentalo-choice-radius,14px); overflow:hidden; } .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-price{align-items:flex-start; text-align:left;} .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-price small{ text-align:left; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-item-card{border:var(--rentalo-card-border-width,1px) solid var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-radius,16px); background:var(--rentalo-card-bg,#fff); box-shadow:none;} .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media img, .rentalo-ui-step2--mobile-list-image-top .rentalo-group-image-placeholder{ width:100%; max-width:none; height:142px; max-height:142px; aspect-ratio:auto; border-radius:var(--rentalo-choice-radius,14px); overflow:hidden; object-fit:cover; } .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-content{min-width:0;} .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-side{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; padding-top:10px; border-top:1px solid var(--rentalo-border,#d6e0ec); border-left:0;} .rentalo-ui-step2 .rentalo-ui-step2-content h4, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-content h4{margin:0 0 4px; font-size:18px; font-weight:800; line-height:1.18; color:var(--rentalo-title,#10233f);} .rentalo-ui-step2 .rentalo-ui-step2-group, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-group{ margin:0 0 5px; font-size:12px; font-weight:700; line-height:1.3; color:var(--rentalo-title,#10233f); } .rentalo-ui-step2 .rentalo-ui-step2-meta p, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-meta p{ margin:0 0 7px; color:var(--rentalo-muted,#66778a); font-size:12px; line-height:1.35; -webkit-line-clamp:2; } .rentalo-ui-step2 .rentalo-ui-step2-tariff-hint, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-tariff-hint{ display:block; color:var(--rentalo-title,#10233f); font-size:12px; font-weight:800; line-height:1.3; } .rentalo-ui-step2 .rentalo-ui-step2-price, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-price{align-items:flex-start; text-align:left; gap:2px; min-width:0;} .rentalo-ui-step2 .rentalo-ui-step2-price strong, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-price strong{color:var(--rentalo-price,#c20000); font-size:18px; font-weight:800; line-height:1.05; white-space:nowrap;} .rentalo-ui-step2 .rentalo-ui-step2-price-prefix, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-price-prefix{font-size:12px; font-weight:500;} .rentalo-ui-step2 .rentalo-ui-step2-price small, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-price small{color:var(--rentalo-muted,#66778a); font-size:12px; text-align:left; white-space:nowrap;} .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-submit-button, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-item-card .rentalo-submit-button{width:auto; min-width:118px; max-width:132px; min-height:40px; padding-left:12px; padding-right:12px; white-space:nowrap;} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-group-image-placeholder{ display:block; width:100%; max-width:none; margin:0; padding:0; line-height:0; border:0; background:transparent; aspect-ratio:16 / 10; border-radius:var(--rentalo-choice-radius,14px); overflow:hidden; } .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media img{display:block; width:100%; height:100%; max-height:none; margin:0; border-radius:var(--rentalo-choice-radius,14px); object-fit:cover; object-position:center center;} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-item-card{display:grid; grid-template-columns:1fr; gap:10px; padding:10px; align-items:start;} .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media{grid-column:1; grid-row:1; width:100%; max-width:none; margin:0; padding:0; line-height:0;} .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-image-button, .rentalo-ui-step2--mobile-list-image-top .rentalo-vehicle-image-button.rentalo-ui-step2-image-button{ display:block; width:100%; max-width:none; height:auto; min-height:0; max-height:none; aspect-ratio:auto; margin:0; padding:0; border:0; background:transparent; line-height:0; border-radius:var(--rentalo-choice-radius,14px); overflow:hidden; } .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-image-button img, .rentalo-ui-step2--mobile-list-image-top .rentalo-vehicle-image-button.rentalo-ui-step2-image-button img{ display:block; width:100%; height:auto; max-height:220px; margin:0; border:0; border-radius:inherit; object-fit:contain; object-position:center center; } .rentalo-ui-step2--mobile-list-image-top .rentalo-group-image-placeholder{width:100%; min-height:170px; max-height:220px; border-radius:var(--rentalo-choice-radius,14px); overflow:hidden;} .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-content{grid-column:1; grid-row:2;} .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-side{grid-column:1; grid-row:3;} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-item-card{ padding:10px; overflow:hidden; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-ui-step2-image-button, .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-group-image-placeholder{ width:100%; max-width:none; height:190px; max-height:190px; margin:0; padding:0; aspect-ratio:auto; border-radius:12px 12px 0 0; overflow:hidden; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media img{width:100%; height:190px; max-height:190px; margin:0; border-radius:12px 12px 0 0;} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media{display:block; width:calc(100% + 20px); max-width:none; height:190px; max-height:190px; aspect-ratio:auto; margin:-10px -10px 0; padding:0; line-height:0; font-size:0; border:0; border-radius:12px 12px 0 0; overflow:hidden;} .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-ui-step2-image-button, .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-group-image-placeholder, .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media img{ display:block; width:100%; height:190px; max-height:190px; aspect-ratio:auto; margin:0; padding:0; line-height:0; border:0; border-radius:12px 12px 0 0; overflow:hidden; box-sizing:border-box; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media img{object-fit:cover; object-position:center center;} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2-feature-list{margin:7px 0; font-size:12px;} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2-feature-list{gap:9px 12px;} .rentalo-ui-step2-feature{ padding-right:10px; } .rentalo-ui-step2-feature svg{width:18px; height:18px; flex-basis:18px;} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2 .rentalo-ui-step2-feature{column-gap:7px; padding-right:0;} .rentalo-ui-step2 .rentalo-ui-step2-feature svg{flex-basis:23px;} .rentalo-ui-step2 .rentalo-ui-step2-feature-copy strong{ font-size:12px; line-height:1.1; } .rentalo-ui-step2 .rentalo-ui-step2-feature-copy small{ font-size:11px; line-height:1.1; } .rentalo-ui-step2 .rentalo-ui-step2-content h4{ font-weight:700; } .rentalo-ui-step2 .rentalo-ui-step2-price strong{ font-weight:700; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2 .rentalo-ui-step2-feature-list{grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; width:100%;} .rentalo-ui-step2 .rentalo-ui-step2-feature{display:grid; grid-template-columns:1fr; justify-items:center; align-items:start; row-gap:3px; min-width:0; padding:0 6px; border-right:1px solid var(--rentalo-border,#d6e0ec); text-align:center;} .rentalo-ui-step2 .rentalo-ui-step2-feature:nth-child(3n), .rentalo-ui-step2 .rentalo-ui-step2-feature:last-child{ border-right:0; } .rentalo-ui-step2 .rentalo-ui-step2-feature svg{width:calc(var(--rentalo-feature-icon-size,30px) * .78); height:calc(var(--rentalo-feature-icon-size,30px) * .78); justify-self:center;} .rentalo-ui-step2 .rentalo-ui-step2-feature-copy{display:flex; flex-direction:column; align-items:center; gap:1px; max-width:100%;} .rentalo-ui-step2 .rentalo-ui-step2-feature-copy strong, .rentalo-ui-step2 .rentalo-ui-step2-feature-copy small{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; } .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-feature-list{grid-column:1; grid-row:auto;} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2 .rentalo-ui-step2-feature-list{border-top:1px solid var(--rentalo-border,#d6e0ec); border-bottom:0; padding:10px 0 0; margin:9px 0 0;} .rentalo-ui-step2 .rentalo-ui-step2-side{ border-top:1px solid var(--rentalo-border,#d6e0ec); } .rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-feature-list{border-top:1px solid var(--rentalo-border,#d6e0ec); border-bottom:0;} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2 .rentalo-ui-step2-feature-list{grid-auto-rows:auto; align-items:start;} .rentalo-ui-step2 .rentalo-ui-step2-feature:nth-child(n/**/+4){margin-top:0;} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2 .rentalo-ui-step2-feature:nth-child(n/**/+4){padding-top:10px;} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:1180px){ .rentalo-ui-step2--layout-grid .rentalo-ui-step2-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:900px){ .rentalo-ui-step2--layout-grid .rentalo-ui-step2-list{ grid-template-columns:1fr; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2--layout-grid .rentalo-ui-step2-list{ display:flex; flex-direction:column; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:1180px){ .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media{ height:170px; max-height:170px; } .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media .rentalo-ui-step2-image-button, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media .rentalo-group-image-placeholder, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media img{ height:170px; max-height:170px; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:900px){ .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media{ height:140px; max-height:140px; } .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media .rentalo-ui-step2-image-button, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media .rentalo-group-image-placeholder, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media img{ height:140px; max-height:140px; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2-result-toolbar{flex-direction:column;} .rentalo-ui-step2-result-layout, .rentalo-ui-step2-result-toolbar-left{ width:100%; } .rentalo-ui-step2-filter-button, .rentalo-ui-step2-layout-button{ flex:1 1 auto; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){.rentalo-ui-step2-filter-form{grid-template-columns:1fr;}.rentalo-ui-step2-filter-actions{flex-direction:column;align-items:stretch;}.rentalo-ui-step2-filter-submit,.rentalo-ui-step2-filter-reset{width:100%;}} /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:1180px){ .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media .rentalo-ui-step2-image-button, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media .rentalo-group-image-placeholder, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media img{ height:auto; max-height:none; min-height:var(--rentalo-step2-grid-image-min-height,180px); } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:900px){ .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media .rentalo-ui-step2-image-button, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media .rentalo-group-image-placeholder, .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-media img{ height:auto; max-height:none; min-height:var(--rentalo-step2-grid-image-min-height,180px); } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:1024px){ .rentalo-ui-step2 .rentalo-frontend-shell{ padding-left:var(--rentalo-frontend-padding-tablet,20px); padding-right:var(--rentalo-frontend-padding-tablet,20px); } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2 .rentalo-frontend-shell{padding-left:var(--rentalo-frontend-padding-mobile,16px); padding-right:var(--rentalo-frontend-padding-mobile,16px);} } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2-result-toolbar{justify-items:stretch;} .rentalo-ui-step2-result-toolbar-left, .rentalo-ui-step2-result-layout{ justify-content:center; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media, .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-ui-step2-image-button, .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-group-image-placeholder, .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-image-top .rentalo-ui-step2-media img{ height:var(--rentalo-step2-grid-image-min-height,180px); min-height:var(--rentalo-step2-grid-image-min-height,180px); max-height:var(--rentalo-step2-grid-image-min-height,180px); } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2-result-toolbar-left, .rentalo-ui-step2-result-toolbar-right, .rentalo-ui-step2-pagination-bottom-right{ justify-content:center; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2-pagination-bottom-center, .rentalo-ui-step2-pagination-bottom-right{ grid-column:1; justify-self:stretch; } .rentalo-ui-step2-pagination-bottom-right, .rentalo-ui-step2-per-page-form{ justify-content:flex-end; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,54px); height:128px; max-height:128px; flex-basis:128px; } .rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature{ min-height:54px; max-height:54px; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,64px); height:154px; max-height:154px; flex-basis:154px; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature{ min-height:64px; max-height:64px; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2 .rentalo-ui-step2-meta, .rentalo-ui-step2 .rentalo-ui-step2-info, .rentalo-ui-step2 .rentalo-ui-step2-description, .rentalo-ui-step2 .rentalo-ui-step2-meta p, .rentalo-ui-step2 .rentalo-ui-step2-info p, .rentalo-ui-step2 .rentalo-ui-step2-description p{ font-size:14px; line-height:1.35; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-step1-hero.rentalo-module-design-scope, .rentalo-step1-inline-shell.rentalo-module-design-scope, .rentalo-step1-compact-shell.rentalo-module-design-scope, .rentalo-module-design-scope.rentalo-ui-step2, .rentalo-module-design-scope.rentalo-ui-step3-shell, .rentalo-module-design-scope.rentalo-ui-step4-shell{ width:100%; max-width:100%; box-sizing:border-box; padding-left:0; padding-right:0; margin-left:0; margin-right:0; } .rentalo-step1-hero.rentalo-module-design-scope .rentalo-ui-step1-module, .rentalo-step1-inline-shell.rentalo-module-design-scope .rentalo-ui-step1-module, .rentalo-step1-compact-shell.rentalo-module-design-scope .rentalo-ui-step1-module, .rentalo-step1-hero.rentalo-module-design-scope .rentalo-layout-real, .rentalo-step1-inline-shell.rentalo-module-design-scope .rentalo-layout-real, .rentalo-step1-compact-shell.rentalo-module-design-scope .rentalo-layout-real{ width:100%; max-width:100%; box-sizing:border-box; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-ui-step2-result-toolbar{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:10px; row-gap:0;} .rentalo-ui-step2-result-toolbar-left{ grid-column:1; display:flex; align-items:center; justify-content:flex-start; gap:0; min-width:0; } .rentalo-ui-step2-filter-button{ flex:0 0 auto; margin-right:10px; } .rentalo-ui-step2-result-layout{ display:flex; align-items:center; gap:6px; flex:0 0 auto; } .rentalo-ui-step2-result-toolbar-center{ display:none; } .rentalo-ui-step2-result-toolbar-right{ grid-column:2; justify-self:end; display:flex; align-items:center; justify-content:flex-end; min-width:0; } .rentalo-ui-step2-layout-button{ width:34px; min-width:34px; max-width:34px; height:34px; min-height:34px; max-height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; } .rentalo-ui-step2-layout-button svg{ width:18px; height:18px; } .rentalo-ui-step2-layout-text{ display:none; } .rentalo-ui-step2-per-page-label-full{ display:none; } .rentalo-ui-step2-per-page-label-short{ display:inline; } .rentalo-ui-step2-per-page-form{ display:flex; align-items:center; justify-content:flex-end; gap:8px; white-space:nowrap; } .rentalo-ui-step2-per-page-form label{ margin:0; white-space:nowrap; } .rentalo-ui-step2-per-page-form select, .rentalo-ui-step2-per-page-form .rentalo-custom-select, .rentalo-ui-step2-per-page-form .rentalo-custom-select__button{ width:42px; min-width:42px; max-width:42px; } .rentalo-ui-step2-pagination-bottom{display:grid; grid-template-columns:1fr; row-gap:8px;} .rentalo-ui-step2-pagination-bottom-center{ grid-column:1; justify-self:center; } .rentalo-ui-step2-pagination-bottom-right{ grid-column:1; justify-self:end; display:flex; justify-content:flex-end; width:100%; } .rentalo-ui-step2-pagination-bottom-right .rentalo-ui-step2-per-page-form{ justify-content:flex-end; margin-left:auto; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width:767px){ .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-result-toolbar, .rentalo-ui-step2.rentalo-ui-step2--layout-grid .rentalo-ui-step2-result-toolbar, .rentalo-ui-step2 .rentalo-ui-step2-result-toolbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"left right"; align-items:center; column-gap:10px; row-gap:0; padding:10px 12px; min-height:54px; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-result-toolbar-left, .rentalo-ui-step2 .rentalo-ui-step2-result-toolbar-left{ grid-area:left; grid-column:auto; display:flex; align-items:center; justify-content:flex-start; gap:0; min-width:0; width:auto; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-result-toolbar-center, .rentalo-ui-step2 .rentalo-ui-step2-result-toolbar-center{ display:none; width:0; min-width:0; height:0; overflow:hidden; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-result-toolbar-right, .rentalo-ui-step2 .rentalo-ui-step2-result-toolbar-right{ grid-area:right; grid-column:auto; display:flex; align-items:center; justify-content:flex-end; justify-self:end; min-width:0; width:auto; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-filter-button, .rentalo-ui-step2 .rentalo-ui-step2-filter-button{ flex:0 0 auto; margin:0 10px 0 0; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-result-layout, .rentalo-ui-step2 .rentalo-ui-step2-result-layout{ display:flex; align-items:center; justify-content:flex-start; gap:6px; flex:0 0 auto; width:auto; min-width:0; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-layout-button, .rentalo-ui-step2 .rentalo-ui-step2-layout-button{ width:34px; min-width:34px; max-width:34px; height:34px; min-height:34px; max-height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; flex:0 0 34px; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-layout-text, .rentalo-ui-step2 .rentalo-ui-step2-layout-text{ display:none; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-form, .rentalo-ui-step2 .rentalo-ui-step2-per-page-form{ display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:8px; width:auto; min-width:0; white-space:nowrap; margin:0; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-form label, .rentalo-ui-step2 .rentalo-ui-step2-per-page-form label{ margin:0; font-size:14px; line-height:1.2; white-space:nowrap; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-label-full, .rentalo-ui-step2 .rentalo-ui-step2-per-page-label-full{ display:none; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-label-short, .rentalo-ui-step2 .rentalo-ui-step2-per-page-label-short{ display:inline; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-form select, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-form .rentalo-custom-select, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-form .rentalo-custom-select__button, .rentalo-ui-step2 .rentalo-ui-step2-per-page-form select, .rentalo-ui-step2 .rentalo-ui-step2-per-page-form .rentalo-custom-select, .rentalo-ui-step2 .rentalo-ui-step2-per-page-form .rentalo-custom-select__button{ width:42px; min-width:42px; max-width:42px; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-pagination-bottom, .rentalo-ui-step2 .rentalo-ui-step2-pagination-bottom{ display:grid; grid-template-columns:1fr; row-gap:8px; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-pagination-bottom-right, .rentalo-ui-step2 .rentalo-ui-step2-pagination-bottom-right{ grid-column:1; justify-self:end; display:flex; justify-content:flex-end; width:100%; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-meta, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-info, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-description, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-meta p, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-info p, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-description p, .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-meta, .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-info, .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-description, .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-meta p, .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-info p, .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-description p{ font-size:14px; line-height:1.35; } } /* Source 2.15.306: rentalo-ui-step2.css */ @media (max-width: 767px){ .rentalo-image-modal-nav{ width:22%; min-width:48px; } .rentalo-image-modal-nav span{ width:20px; height:20px; border-width:3px; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width: 900px){ .rentalo-ui-step3-choice-row{ grid-template-columns:28px minmax(0,1fr); } .rentalo-ui-step3-choice-price{ grid-column:2; justify-items:start; text-align:left; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width: 640px){ .rentalo-ui-step3-card-head, .rentalo-ui-step3-card-body, .rentalo-ui-step3-sidecard-head, .rentalo-ui-step3-sidecard-body{ padding-left:16px; padding-right:16px; } .rentalo-ui-step3-choice-row{ padding:12px 14px; gap:12px; } .rentalo-ui-step3-actions{ flex-direction:column; } .rentalo-ui-step3-actions .rentalo-submit-button, .rentalo-ui-step3-actions .rentalo-back-button{ width:100%; justify-content:center; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width: 640px){ .rentalo-ui-step3-sidecard-head, .rentalo-ui-step3-card-head{ padding:16px; } .rentalo-ui-step3-sidecard-body, .rentalo-ui-step3-card-body{ padding:16px 16px 18px; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:760px){ .rentalo-option-switch-control{justify-content:flex-start;} } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:760px){ .rentalo-option-switch-price{justify-items:start; text-align:left;} .rentalo-option-switch-control{grid-column:1; grid-row:1;} } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:760px){ .rentalo-option-switch-control{max-width:112px;} .rentalo-option-switch-content{ grid-column:2; grid-row:1; } .rentalo-option-switch-price{grid-column:2; grid-row:2;} } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width: 900px){ .rentalo-step3-period-body{ align-items:flex-start; flex-direction:column; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width: 640px){ .rentalo-booking-details-form__dialog{ margin:26px auto 0; padding:20px; } .rentalo-booking-details-form__grid{ grid-template-columns:1fr; } .rentalo-booking-details-form__actions{ flex-direction:column-reverse; } .rentalo-booking-details-form__actions .rentalo-back-button, .rentalo-booking-details-form__actions .rentalo-submit-button{ width:100%; justify-content:center; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width: 900px){ .rentalo-step3-period-grid{ grid-template-columns:1fr; } .rentalo-step3-period-column-action{ justify-content:stretch; } .rentalo-step3-change-button{ width:100%; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width: 640px){ .rentalo-step3-period-row{ grid-template-columns:1fr; gap:2px; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:760px){ .rentalo-option-switch-card{grid-template-columns:22px minmax(0,1fr) auto; gap:8px 10px; padding:12px 0;} .rentalo-option-switch-control{width:22px; min-width:22px;} .rentalo-option-switch-content p{ font-size:12px ; line-height:1.4 ; } .rentalo-option-quantity-select{ width:64px; min-width:64px; height:28px; min-height:28px; font-size:12px ; } .rentalo-option-switch-price{min-width:74px;} .rentalo-option-switch-price strong{ font-size:14px ; } .rentalo-option-switch-price small{ font-size:11px ; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:420px){ .rentalo-option-switch-card{ grid-template-columns:22px minmax(0,1fr); } .rentalo-option-switch-price{ grid-column:2; grid-row:2; justify-self:end; margin-top:2px; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:760px){ .rentalo-ui-step3-choice-row, .rentalo-option-switch-card{ grid-template-columns:22px minmax(0,1fr) auto; gap:8px 10px; padding:12px 0; } .rentalo-ui-step3-choice-radio{ width:22px; min-width:22px; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:420px){ .rentalo-ui-step3-choice-row{ grid-template-columns:22px minmax(0,1fr); } .rentalo-ui-step3-choice-price{ grid-column:2; grid-row:2; justify-self:end; margin-top:2px; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width: 760px){ .rentalo-booking-details-form .rentalo-ui-row.is-picker-open{ width:100%; max-width:100%; } .rentalo-booking-details-form .rentalo-ui-picker{ width:100%; max-width:100%; } .rentalo-booking-details-form .rentalo-ui-picker.is-open .rentalo-ui-calendar-panel{ left:0; right:0; width:100%; max-width:100%; min-width:0; box-sizing:border-box; overflow:hidden; } .rentalo-booking-details-form .rentalo-ui-calendar-head, .rentalo-booking-details-form .rentalo-ui-calendar-weekdays, .rentalo-booking-details-form .rentalo-ui-calendar-grid{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; } .rentalo-booking-details-form .rentalo-ui-calendar-weekdays, .rentalo-booking-details-form .rentalo-ui-calendar-grid{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); } .rentalo-booking-details-form .rentalo-ui-calendar-day, .rentalo-booking-details-form .rentalo-ui-calendar-weekday{ width:auto; min-width:0; max-width:100%; padding-left:0; padding-right:0; box-sizing:border-box; } .rentalo-booking-details-form .rentalo-ui-calendar-title{ min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:767px){ .rentalo-ui-step3-shell .rentalo-frontend-shell{ padding-bottom:96px; } .rentalo-step3-mobile-total-bar{ position:fixed; left:0; right:0; bottom:0; z-index:9990; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--rentalo-border,#d6e0ec); background:var(--rentalo-card-bg,#fff); box-shadow:0 -10px 28px rgba(20,45,73,.14); box-sizing:border-box; } .rentalo-step3-mobile-total-text{ display:flex; flex-direction:column; gap:2px; min-width:0; line-height:1.15; } .rentalo-step3-mobile-total-text span{ color:var(--rentalo-muted,#66778a); font-size:12px; font-weight:700; } .rentalo-step3-mobile-total-text strong{ color:var(--rentalo-price,var(--rentalo-accent,#c20000)); font-size:20px; font-weight:800; white-space:nowrap; } .rentalo-step3-mobile-total-submit{ flex:0 0 auto; min-width:132px; height:44px; min-height:44px; max-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--rentalo-button-radius,12px); font-size:15px; font-weight:var(--rentalo-button-weight,700); } .rentalo-booking-details-open .rentalo-step3-mobile-total-bar{ display:none; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width: 767px){ .rentalo-ui-step3-shell, .rentalo-ui-step3-shell .rentalo-section-body, .rentalo-ui-step3-shell .rentalo-side-card-body{ font-size:max(var(--rentalo-font-size, 15px), 13px); } .rentalo-ui-step3-shell p, .rentalo-ui-step3-shell span, .rentalo-ui-step3-shell small, .rentalo-ui-step3-shell li, .rentalo-ui-step3-shell .rentalo-option-switch-content p, .rentalo-ui-step3-shell .rentalo-choice-content span, .rentalo-ui-step3-shell .rentalo-ui-step3-choice-content span, .rentalo-ui-step3-shell .rentalo-option-switch-price small, .rentalo-ui-step3-shell .rentalo-choice-price small, .rentalo-ui-step3-shell .rentalo-ui-step3-choice-price small{ font-size:max(var(--rentalo-small-font-size, 13px), 12px); line-height:1.4; } .rentalo-ui-step3-shell .rentalo-section-head, .rentalo-ui-step3-shell .rentalo-ui-step3-card-head, .rentalo-ui-step3-shell .rentalo-side-card-head, .rentalo-ui-step3-shell .rentalo-ui-step3-sidecard-head{ padding:10px 14px; } .rentalo-ui-step3-shell .rentalo-step3-vehicle-media{ margin-bottom:10px; } .rentalo-ui-step3-shell .rentalo-step3-vehicle-description{ line-height:1.4; } .rentalo-ui-step3-shell .rentalo-summary-list{ gap:0; } .rentalo-ui-step3-shell .rentalo-summary-row{ padding:9px 0; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width: 767px){ .rentalo-ui-step3-shell .rentalo-step3-sidebar-card-modern .rentalo-step3-vehicle-body, .rentalo-ui-step3-shell .rentalo-step3-summary-card-modern .rentalo-ui-step3-sidecard-body{ padding:12px 14px 14px; } .rentalo-ui-step3-shell .rentalo-step3-sidebar-detail-row{ grid-template-columns:22px minmax(72px, .8fr) minmax(0, 1.2fr); gap:8px; padding:9px 0; } .rentalo-ui-step3-shell .rentalo-step3-sidebar-detail-value strong{ font-size:max(var(--rentalo-font-size,15px),13px); } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width: 767px){ .rentalo-ui-step3-shell .rentalo-step3-sidebar-card-modern .rentalo-ui-step3-sidecard-head, .rentalo-ui-step3-shell .rentalo-step3-summary-card-modern .rentalo-ui-step3-sidecard-head{padding:10px 14px;} .rentalo-ui-step3-shell .rentalo-step3-sidebar-card-modern .rentalo-step3-vehicle-media{padding:14px 14px 0;} } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:1024px){ .rentalo-frontend-wrap .rentalo-frontend-shell{ padding-left:var(--rentalo-frontend-padding-tablet,20px); padding-right:var(--rentalo-frontend-padding-tablet,20px); } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:767px){ .rentalo-frontend-wrap .rentalo-frontend-shell{ padding-left:var(--rentalo-frontend-padding-mobile,16px); padding-right:var(--rentalo-frontend-padding-mobile,16px); } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:520px){ .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-row, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-insurance-row, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-row{ grid-template-columns:22px minmax(0,1fr); } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:900px){} /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:767px){ /* Gesamtmodul mobil nicht doppelt einrücken. */ .rentalo-step1-hero.rentalo-module-design-scope, .rentalo-module-design-scope.rentalo-ui-step2, .rentalo-module-design-scope.rentalo-ui-step3-shell, .rentalo-module-design-scope.rentalo-ui-step4-shell{ width:100%; max-width:100%; box-sizing:border-box; padding-left:0; padding-right:0; } .rentalo-module-design-scope .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-ui-step3-shell .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-frontend-shell{ width:100%; max-width:100%; padding-left:10px; padding-right:10px; box-sizing:border-box; } .rentalo-ui-step3-shell.rentalo-module-design-scope{ margin-left:0; margin-right:0; } /* Tarifbeschreibung mobil wie Versicherung: unter Radio/Icon/Titel volle Breite. */ .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content{ display:contents; } .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content > strong, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content > strong{ grid-column:3; grid-row:1; } .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content > span, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content > span, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content > small, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content > small, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content > p, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content > p{ grid-column:1 / -1; grid-row:auto; width:100%; max-width:100%; margin:0; padding:0; text-align:left; } .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content > span:first-of-type, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content > span:first-of-type, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content > p:first-of-type, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content > p:first-of-type{ grid-row:2; } /* Wenn Step3-Icons deaktiviert sind, Titel in Spalte 2 statt nicht vorhandener Icon-Spalte. */ .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-row .rentalo-step3-tariff-content > strong, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-row .rentalo-step3-content > strong{ grid-column:2; } } /* Source 2.15.306: rentalo-ui-step3.css */ /* Source 2.15.306: rentalo-ui-step3.css */ /* Source 2.15.306: rentalo-ui-step3.css */ /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:640px){ .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-ui-opening-hours-bar{grid-template-columns:minmax(0,1fr);} .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-ui-rental-duration{justify-self:end;text-align:right;} } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:640px){ .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-ui-locations-row{grid-row:1;} .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-ui-row--start-date{grid-column:1;grid-row:2;} .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-ui-row--start-time{grid-column:2;grid-row:2;} .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-ui-row--end-date{grid-column:1;grid-row:3;} .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-ui-row--end-time{grid-column:2;grid-row:3;} .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-ui-row--planned-km{grid-column:1 / -1;grid-row:4;} .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-ui-row--opening-hours-link{grid-column:1 / -1;grid-row:5;} .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-booking-details-form__actions{grid-column:1 / -1;grid-row:6;grid-template-columns:minmax(0,1fr) minmax(0,1fr);} } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:640px){ .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-layout-real, .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-ui-locations-row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:640px){ .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-booking-details-form__dialog{width:calc(100vw - 28px); max-width:360px; margin:24px auto 0; padding:12px;} .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-layout-real{ grid-template-columns:minmax(0,calc((100% - var(--rentalo-field-gap,10px))/2 + 20px)) minmax(0,calc((100% - var(--rentalo-field-gap,10px))/2 - 20px)); } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:640px){ .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-booking-details-form__dialog{ width:calc(100vw - 28px); max-width:360px; margin:24px auto 0; padding:12px; } } /* Source 2.15.306: rentalo-ui-step3.css */ @media (max-width:420px){ .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-form .rentalo-ui-row--date .rentalo-ui-calendar-panel{ max-width:calc(100vw - 52px); } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width: 640px){ .rentalo-ui-step4-sidecard-head, .rentalo-ui-step4-card-head{ padding:16px; } .rentalo-ui-step4-sidecard-body, .rentalo-ui-step4-card-body{ padding:16px 16px 18px; } .rentalo-ui-step4-actions{ flex-direction:column; } .rentalo-ui-step4-actions .rentalo-submit-button, .rentalo-ui-step4-actions .rentalo-back-button{ width:100%; justify-content:center; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width:760px){ .rentalo-step4-option-summary-row{ grid-template-columns:1fr; } .rentalo-step4-option-summary-price{ text-align:left; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width: 760px){ .rentalo-step4-price-table{ min-width: 620px; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width: 900px){ .rentalo-step4-contact-grid{ grid-template-columns: 1fr 1fr; } .rentalo-step4-contact-grid .rentalo-frontend-field, .rentalo-step4-field-street, .rentalo-step4-field-zip, .rentalo-step4-field-city{ grid-column: span 1; } .rentalo-step4-contact-grid .rentalo-frontend-full{ grid-column: 1 / -1; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width: 640px){ .rentalo-step4-contact-grid{ grid-template-columns: 1fr; } .rentalo-step4-contact-grid .rentalo-frontend-field{ grid-column: 1 / -1; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width:760px){ .rentalo-step4-price-table{min-width: 0; width:100%; table-layout: fixed; font-size:10px ;} .rentalo-step4-price-table th, .rentalo-step4-price-table td{ padding: 8px 3px; white-space:normal; word-break: normal; } .rentalo-step4-price-table th:first-child, .rentalo-step4-price-table td:first-child{ width: 31%; } .rentalo-step4-price-table th:not(:first-child), .rentalo-step4-price-table td:not(:first-child){ width:auto; } .rentalo-step4-price-table tfoot td:first-child{ font-size:12px ; } .rentalo-step4-price-table tfoot td:last-child{ font-size:14px ; } .rentalo-step4-payment-grid, .rentalo-step4-contact-grid{ width:100%; max-width:100%; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width:760px){ .rentalo-step4-price-table{display:none;} .rentalo-step4-price-table-wrap{ padding: 14px 16px 18px; overflow-x: hidden; } .rentalo-step4-costs-mobile-list{ display:grid; gap: 0; width:100%; } .rentalo-step4-costs-mobile-row{ display: block; padding:0; border-bottom: 1px solid rgba(172,172,172,.35); } .rentalo-step4-costs-mobile-row summary{ list-style: none; display:grid; gap: 8px; padding: 14px 0; cursor:pointer ; outline: none; } .rentalo-step4-costs-mobile-row summary::-webkit-details-marker{ display:none; } .rentalo-step4-costs-mobile-title{color:var(--rentalo-title) ; font-size:15px ; line-height:1.35 ; font-weight:700 ;} .rentalo-step4-costs-mobile-details{ display:grid; gap: 8px; padding: 0 0 8px; } .rentalo-step4-costs-mobile-details span{ display:flex; align-items:center; justify-content: space-between; gap: 14px; min-width: 0; } .rentalo-step4-costs-mobile-details em, .rentalo-step4-costs-mobile-gross span, .rentalo-step4-costs-mobile-hint, .rentalo-step4-costs-mobile-total em{ font-style: normal; color:var(--rentalo-muted) ; font-size:13px ; line-height:1.35 ; font-weight:400 ; } .rentalo-step4-costs-mobile-details strong{ color:var(--rentalo-title) ; font-size:14px ; line-height:1.35 ; font-weight:500 ; text-align:right; white-space:nowrap; } .rentalo-step4-costs-mobile-footer{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding-top: 4px; } .rentalo-step4-costs-mobile-hint{ display: inline-flex; align-items:center; gap: 8px; white-space:nowrap; } .rentalo-step4-costs-mobile-plus{ position: relative; width: 14px; height: 14px; flex: 0 0 14px; display: inline-block; } .rentalo-step4-costs-mobile-plus::before, .rentalo-step4-costs-mobile-plus::after{ content: ""; position: absolute; left: 50%; top: 50%; background:var(--rentalo-muted) ; transform: translate(-50%, -50%); } .rentalo-step4-costs-mobile-plus::before{ width: 14px; height: 2px; } .rentalo-step4-costs-mobile-plus::after{ width: 2px; height: 14px; } .rentalo-step4-costs-mobile-row[open] .rentalo-step4-costs-mobile-plus::after{ display:none; } .rentalo-step4-costs-mobile-gross{ display:grid; justify-items: end; gap: 2px; text-align:right; white-space:nowrap; } .rentalo-step4-costs-mobile-gross strong{ color:var(--rentalo-title) ; font-size:16px ; line-height:1.2 ; font-weight:700 ; } .rentalo-step4-costs-mobile-total{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 14px; padding: 18px 0 8px; align-items:center; } .rentalo-step4-costs-mobile-total strong{ grid-column: 1 / -1; color:var(--rentalo-title) ; font-size:16px ; line-height:1.35 ; font-weight:700 ; } .rentalo-step4-costs-mobile-total span{ grid-column: 1 / -1; display:flex; justify-content: space-between; align-items:center; gap: 14px; } .rentalo-step4-costs-mobile-total b{ color:var(--rentalo-price) ; font-size:18px ; line-height:1.2 ; font-weight:700 ; white-space:nowrap; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width:760px){ .rentalo-step4-discount-row{ grid-template-columns: minmax(0,1fr) auto; } .rentalo-step4-payment-grid{ grid-template-columns: 1fr; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width: 900px){ .rentalo-step4-contact-grid, .rentalo-step4-billing-grid, .rentalo-step4-driver-body .rentalo-ui-step4-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width: 640px){ .rentalo-step4-contact-grid, .rentalo-step4-billing-grid, .rentalo-step4-driver-body .rentalo-ui-step4-grid{ grid-template-columns: 1fr; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width: 900px){ .rentalo-step4-contact-grid .rentalo-frontend-field, .rentalo-step4-billing-grid .rentalo-frontend-field, .rentalo-step4-driver-body .rentalo-frontend-field{ grid-column: span 6; } .rentalo-step4-field-street, .rentalo-step4-contact-grid .rentalo-frontend-full, .rentalo-step4-billing-grid .rentalo-frontend-full, .rentalo-step4-driver-body .rentalo-frontend-full{ grid-column: 1 / -1; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width: 640px){ .rentalo-step4-contact-grid .rentalo-frontend-field, .rentalo-step4-billing-grid .rentalo-frontend-field, .rentalo-step4-driver-body .rentalo-frontend-field, .rentalo-step4-field-street, .rentalo-step4-field-zip, .rentalo-step4-field-city{ grid-column: 1 / -1; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width:1024px){ .rentalo-step4-contact-grid, .rentalo-step4-billing-grid, .rentalo-step4-driver-body .rentalo-ui-step4-grid{ grid-template-columns:1fr; } .rentalo-step4-contact-grid > .rentalo-frontend-field, .rentalo-step4-billing-grid > .rentalo-frontend-field, .rentalo-step4-driver-body .rentalo-ui-step4-grid > .rentalo-frontend-field, .rentalo-step4-contact-grid > .rentalo-frontend-full, .rentalo-step4-billing-grid > .rentalo-frontend-full, .rentalo-step4-driver-body .rentalo-ui-step4-grid > .rentalo-frontend-full{ grid-column:1 / -1; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width:640px){ .rentalo-step4-payment-grid{ grid-template-columns:1fr; } .rentalo-ui-step4-shell .rentalo-frontend-shell{ padding-bottom:92px; } .rentalo-step4-price-overview-card{order:1;} .rentalo-step4-payment-card{order:2;} .rentalo-step4-mobile-bottom-bar{ position:fixed; left:0; right:0; bottom:0; z-index:9990; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--rentalo-border,#d6e0ec); background:#fff; box-shadow:0 -10px 28px rgba(20,43,74,.14); } .rentalo-step4-mobile-bottom-total{ display:flex; flex-direction:column; gap:2px; min-width:0; } .rentalo-step4-mobile-bottom-total span{ color:var(--rentalo-muted,#66778a); font-size:12px; font-weight:700; line-height:1.1; } .rentalo-step4-mobile-bottom-total strong{ color:var(--rentalo-price,var(--rentalo-accent,#c20000)); font-size:20px; font-weight:800; line-height:1.1; white-space:nowrap; } .rentalo-step4-mobile-bottom-link{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 16px; border-radius:var(--rentalo-button-radius,12px); background:var(--rentalo-button-bg,#c20000); color:var(--rentalo-button-text,#fff); font-size:14px; font-weight:800; line-height:1; text-decoration:none; box-shadow:none; } .rentalo-step4-mobile-bottom-link:hover, .rentalo-step4-mobile-bottom-link:focus{ background:var(--rentalo-button-hover,#9e0000); color:var(--rentalo-button-hover-text,#fff); text-decoration:none; } .rentalo-step4-submit-actions{ scroll-margin-top:24px; padding:12px; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-radius,18px); background:#fff; } } /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width: 767px){ .rentalo-ui-step4-shell, .rentalo-ui-step4-shell .rentalo-section-body, .rentalo-ui-step4-shell .rentalo-side-card-body{ font-size:max(var(--rentalo-font-size, 15px), 13px); } .rentalo-ui-step4-shell p, .rentalo-ui-step4-shell span, .rentalo-ui-step4-shell small, .rentalo-ui-step4-shell li, .rentalo-ui-step4-shell .rentalo-step4-section-description, .rentalo-ui-step4-shell .rentalo-step4-help, .rentalo-ui-step4-shell .rentalo-step4-payment-description-box{ font-size:max(var(--rentalo-small-font-size, 13px), 12px); line-height:1.4; } .rentalo-ui-step4-shell .rentalo-section-head, .rentalo-ui-step4-shell .rentalo-ui-step3-card-head, .rentalo-ui-step4-shell .rentalo-side-card-head, .rentalo-ui-step4-shell .rentalo-ui-step4-sidecard-head{ padding:10px 14px; } .rentalo-ui-step4-shell .rentalo-step4-vehicle-media{ margin-bottom:10px; } .rentalo-ui-step4-shell .rentalo-step4-vehicle-description, .rentalo-ui-step4-shell .rentalo-step4-vehicle-summary{ line-height:1.4; } .rentalo-step4-price-table{ display:none; } .rentalo-step4-costs-mobile-list{ display:grid; gap:0; } .rentalo-step4-costs-mobile-row summary{ grid-template-columns:minmax(0, 1fr) auto; align-items:center; padding:11px 0; } .rentalo-step4-costs-mobile-title{ min-width:0; overflow-wrap:anywhere; font-size:max(var(--rentalo-font-size, 15px), 13px); } .rentalo-step4-costs-mobile-hint{ display:none; } .rentalo-step4-costs-mobile-footer{ justify-content:flex-end; padding-top:0; } .rentalo-step4-costs-mobile-gross strong{ color:var(--rentalo-price, #c20000); font-size:var(--rentalo-price-font-size, 18px); } .rentalo-step4-costs-mobile-details{ padding-bottom:10px; } .rentalo-step4-costs-mobile-details span{ padding:2px 0; } .rentalo-step4-discount-box{ margin:12px 0 14px; padding-top:12px; } .rentalo-step4-discount-row{ gap:8px; } .rentalo-step4-discount-apply{ min-width:48px; padding-left:12px; padding-right:12px; } .rentalo-step4-driver-summary{ padding:12px 14px; } .rentalo-step4-driver-summary span{ gap:2px; } } /* Source 2.15.306: rentalo-ui-step4.css */ /* Source 2.15.306: rentalo-ui-step4.css */ /* Source 2.15.306: rentalo-ui-step4.css */ @media (max-width:760px){ .rentalo-step4-costs-mobile-title{display:grid; gap:2px;} .rentalo-step4-costs-mobile-toggle{ display:block; color:var(--rentalo-muted); font-size:12px; line-height:1.3; font-weight:400; } .rentalo-step4-costs-mobile-toggle-less{ display:none; } .rentalo-step4-costs-mobile-row[open] .rentalo-step4-costs-mobile-toggle-more{ display:none; } .rentalo-step4-costs-mobile-row[open] .rentalo-step4-costs-mobile-toggle-less{ display:inline; } } /* WP Rentalo Lite 2.15.434 - Mobile Step 2 always uses the image-top list design. */ @media (max-width: 767px) { .rentalo-ui-step2 .rentalo-ui-step2-result-layout, .rentalo-ui-step2 [data-rentalo-step2-layout] { display: none; } .rentalo-ui-step2 .rentalo-ui-step2-list, .rentalo-ui-step2 .rentalo-ui-step2-list--list, .rentalo-ui-step2 .rentalo-ui-step2-list--grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; } /* The mobile card design no longer depends on the saved compact/image-top setting. */ .rentalo-frontend-wrap.rentalo-ui-step2 .rentalo-ui-step2-item-card { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; gap: 14px; padding: 14px; } .rentalo-frontend-wrap.rentalo-ui-step2 .rentalo-ui-step2-media { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; margin: 0; } .rentalo-frontend-wrap.rentalo-ui-step2 .rentalo-ui-step2-media .rentalo-ui-step2-image-button, .rentalo-frontend-wrap.rentalo-ui-step2 .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-frontend-wrap.rentalo-ui-step2 .rentalo-ui-step2-media .rentalo-group-image-placeholder { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: var(--rentalo-step2-mobile-image-ratio, 16 / 9); margin: 0; overflow: hidden; } .rentalo-frontend-wrap.rentalo-ui-step2 .rentalo-ui-step2-media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .rentalo-frontend-wrap.rentalo-ui-step2 .rentalo-ui-step2-content { grid-column: 1; grid-row: 2; width: 100%; min-width: 0; } .rentalo-frontend-wrap.rentalo-ui-step2 .rentalo-ui-step2-side { grid-column: 1; grid-row: 3; width: 100%; min-width: 0; align-items: stretch; } .rentalo-frontend-wrap.rentalo-ui-step2 .rentalo-ui-step2-price, .rentalo-frontend-wrap.rentalo-ui-step2 .rentalo-ui-step2-side form, .rentalo-frontend-wrap.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-submit-button { width: 100%; } } /* 2.15.436 - Mobile-only alignment and overlay fixes. */ @media (max-width:767px){ /* Keep the Step 4 help icon directly after the confirmation text. */ .rentalo-frontend-wrap .rentalo-step4-checkbox-hint{ display:block; } .rentalo-frontend-wrap .rentalo-step4-checkbox-hint label{ display:inline-flex; width:auto; max-width:calc(100% - 30px); vertical-align:top; } .rentalo-frontend-wrap .rentalo-step4-checkbox-hint .rentalo-step4-checkbox-help-button{ display:inline-flex; vertical-align:top; margin:1px 0 0 6px; } /* Match the total gross label/value stack used by the regular summary rows. */ .rentalo-ui-step4-shell .rentalo-step4-costs-mobile-total{ grid-template-columns:minmax(0,1fr) auto; align-items:end; } .rentalo-ui-step4-shell .rentalo-step4-costs-mobile-total > strong{ grid-column:1; grid-row:1 / span 2; align-self:center; } .rentalo-ui-step4-shell .rentalo-step4-costs-mobile-total > span{ grid-column:2; grid-row:1 / span 2; display:grid; justify-items:end; gap:2px; text-align:right; } .rentalo-ui-step4-shell .rentalo-step4-costs-mobile-total > span em, .rentalo-ui-step4-shell .rentalo-step4-costs-mobile-total > span b{ display:block; } /* Align selection control, icon and title on one shared top line. */ .rentalo-ui-step3-shell .rentalo-step3-row .rentalo-step3-control, .rentalo-ui-step3-shell .rentalo-step3-row .rentalo-step3-option-check, .rentalo-ui-step3-shell .rentalo-step3-row .rentalo-step3-tariff-icon, .rentalo-ui-step3-shell .rentalo-step3-row .rentalo-step3-insurance-icon, .rentalo-ui-step3-shell .rentalo-step3-row .rentalo-step3-option-icon, .rentalo-ui-step3-shell .rentalo-step3-row .rentalo-step3-content{ align-self:start; padding-top:0; margin-top:0; } .rentalo-ui-step3-shell .rentalo-step3-row .rentalo-step3-control, .rentalo-ui-step3-shell .rentalo-step3-row .rentalo-step3-option-check{ min-height:22px; display:flex; align-items:flex-start; } .rentalo-ui-step3-shell .rentalo-step3-row .rentalo-step3-control input, .rentalo-ui-step3-shell .rentalo-step3-row .rentalo-step3-option-check .rentalo-option-checkbox{ margin-top:0; } .rentalo-ui-step3-shell .rentalo-step3-row .rentalo-step3-content strong, .rentalo-ui-step3-shell .rentalo-step3-row .rentalo-step3-option-title{ line-height:22px; } /* Picker portals must sit above the Step 2 mobile sheet. */ body > .rentalo-ui-picker-panel--portal, body > .rentalo-ui-step2-picker-panel--portal, body > .rentalo-ui-time-panel--portal, body > .rentalo-ui-step2-time-panel--portal, body > .rentalo-ui-modal--portal, body > .rentalo-ui-step2-modal--portal{ z-index:var(--rentalo-layer-picker-portal); } } /* WP Rentalo Lite 2.15.440 - Mobile Step 2 summary image and Step 3 content order. */ @media (max-width: 767px) { .rentalo-ui-step2 .rentalo-step2-mobile-summary { max-width: none; } .rentalo-ui-step2 .rentalo-step2-mobile-summary-media {align-self: stretch; min-width: 0; min-height: 82px; overflow: hidden; border-radius: calc(var(--rentalo-radius, 16px) - 5px); background: #fff; align-items: center; justify-content: center;} .rentalo-ui-step2 .rentalo-step2-mobile-summary-media img { display: block; width: 100%; height: 100%; min-height: 82px; object-fit: cover; } .rentalo-ui-step2 .rentalo-step2-mobile-summary-placeholder { color: var(--rentalo-muted, #667684); font-size: 18px; font-weight: 700; } .rentalo-ui-step2 .rentalo-step2-mobile-summary-text { justify-content: center; } /* Details are intentionally omitted from the mobile Step 3 flow. */ .rentalo-ui-step3-shell .rentalo-step3-vehicle-card { display: none; } .rentalo-ui-step3-shell .rentalo-step3-summary-card-modern { width: 100%; margin: var(--rentalo-card-gap, 16px) 0 0; } .rentalo-ui-step3-shell .rentalo-step3-vehicle-sidebar.is-mobile-summary-moved { display: none; } } /* WP Rentalo Lite 2.15.441 - Mobile Step 2 single-column summary and Step 3 image/data summary. */ .rentalo-step3-mobile-booking-summary{ display:none; } @media (max-width: 767px){ .rentalo-ui-step2 .rentalo-booking-details-summary-button{grid-template-columns:minmax(0,1fr) 36px; gap:10px; min-height:64px; padding:12px 14px;} .rentalo-ui-step2 .rentalo-step2-mobile-summary-media{display:none;} .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary{ display:block; width:100%; margin:0 0 18px; } .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-button{width:100%; min-height:104px; padding:10px; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-radius,16px); background:var(--rentalo-card-bg,#fff); color:var(--rentalo-text,#1a2932); box-shadow:var(--rentalo-shadow,0 10px 26px rgba(20,45,73,.06)); display:grid; gap:12px; align-items:center; text-align:left; cursor:pointer;} .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-media{ align-self:stretch; min-width:0; min-height:82px; overflow:hidden; border-radius:calc(var(--rentalo-radius,16px) - 5px); background:#fff; display:flex; align-items:center; justify-content:center; } .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-media img{ display:block; width:100%; height:100%; min-height:82px; object-fit:cover; } .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-placeholder{ color:var(--rentalo-muted,#667684); font-size:18px; font-weight:700; } .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-text{ min-width:0; display:flex; flex-direction:column; justify-content:center; gap:4px; } .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-text strong{ color:var(--rentalo-title,#1a2932); font-size:15px; font-weight:700; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-text span{ color:var(--rentalo-text,#1a2932); font-size:13px; font-weight:500; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-icon{ width:36px; height:36px; border-radius:12px; background:#fff; color:var(--rentalo-title,#1a2932); display:flex; align-items:center; justify-content:center; } .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-icon svg{ width:18px; height:18px; fill:currentColor; } } /* WP Rentalo Lite 2.15.445 - Real mobile Step 2 vertical spacing. * The Step 2 module is itself both .rentalo-frontend-wrap and .rentalo-frontend-width. * Padding is used instead of first/last-child margins so the space cannot collapse. */ @media (max-width:767px){ #primary.rentalo-virtual-booking-flow--step2{ padding-top:0; padding-bottom:0; } #primary.rentalo-virtual-booking-flow--step2 > .rentalo-frontend-wrap.rentalo-ui-step2, #primary.rentalo-virtual-booking-flow--step2 > .rentalo-ui-step2.rentalo-frontend-width{ margin-top:0; margin-bottom:0; padding-top:40px; padding-bottom:40px; } } /* WP Rentalo Lite 2.15.451 - One shared mobile geometry for the booking-details modal. * Step 2 now uses the same centered size and top position as Step 3. * The close glyph is rendered by the button text itself so it cannot escape to the dialog center. */ @media (max-width:767px){ .rentalo-booking-details-sheet, .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-sheet--form{ position:fixed; inset:0; width:auto; max-width:none; margin:0; padding:0; z-index:var(--rentalo-layer-booking-modal); } .rentalo-booking-details-sheet .rentalo-booking-details-sheet__dialog, .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-sheet--form .rentalo-booking-details-sheet__dialog{ position:absolute; top:28px; left:12px; right:12px; width:auto; max-width:360px; max-height:calc(100dvh - 56px); margin:0 auto; padding:16px 12px 12px; border-radius:20px; overflow:auto; box-sizing:border-box; transform:translateY(calc(-100% - 40px)); } .rentalo-booking-details-sheet.is-open .rentalo-booking-details-sheet__dialog, .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-sheet--form.is-open .rentalo-booking-details-sheet__dialog{ transform:translateY(0); } .rentalo-booking-details-sheet .rentalo-booking-details-sheet__header, .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-sheet--form .rentalo-booking-details-sheet__header{ width:100%; max-width:none; margin:0 0 14px; } .rentalo-booking-details-sheet .rentalo-booking-details-sheet__close, .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-sheet--form .rentalo-booking-details-sheet__close, .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-sheet--form .rentalo-booking-details-form__close{ position:relative; top:auto; right:auto; flex:0 0 36px; width:36px; height:36px; min-width:36px; min-height:36px; max-width:36px; max-height:36px; padding:0; margin:0; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:12px; background:var(--rentalo-input-bg,#fff); color:var(--rentalo-title,#1a2932); font-size:24px; line-height:1; text-indent:0; overflow:visible; display:inline-flex; align-items:center; justify-content:center; transform:none; box-shadow:none; } .rentalo-booking-details-sheet .rentalo-booking-details-sheet__close::before, .rentalo-booking-details-sheet .rentalo-booking-details-sheet__close::after, .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-sheet--form .rentalo-booking-details-sheet__close::before, .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-sheet--form .rentalo-booking-details-sheet__close::after, .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-sheet--form .rentalo-booking-details-form__close::before, .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-sheet--form .rentalo-booking-details-form__close::after{ content:none; display:none; } .rentalo-booking-details-sheet .rentalo-ui-step2-topbar, .rentalo-frontend-wrap.rentalo-ui-step3-shell .rentalo-booking-details-sheet--form .rentalo-booking-details-form__grid.rentalo-ui-step1-module{ width:100%; max-width:none; margin:0; } } /* WP Rentalo Lite 2.15.452 - Mobile booking edit summaries follow the admin frame style. */ @media (max-width: 767px) { .rentalo-ui-step2.rentalo-module-design-scope .rentalo-booking-details-summary-button, .rentalo-ui-step3-shell.rentalo-module-design-scope .rentalo-step3-mobile-booking-summary-button { background: var(--rentalo-card-bg, #fff); border-style: solid; border-color: var(--rentalo-border, #d6e0ec); border-radius: var(--rentalo-radius, 16px); } .rentalo-ui-step2.rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-booking-details-summary-button, .rentalo-ui-step3-shell.rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-step3-mobile-booking-summary-button { border-width: 0; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); } .rentalo-ui-step2.rentalo-module-design-scope.rentalo-frame-style-border .rentalo-booking-details-summary-button, .rentalo-ui-step3-shell.rentalo-module-design-scope.rentalo-frame-style-border .rentalo-step3-mobile-booking-summary-button { border-width: var(--rentalo-card-border-width, 1px); box-shadow: none; } } /* WP Rentalo Lite 2.15.455 - Mobile Step 1/3 refinements. */ @media (max-width:767px){ /* Keep exactly one grid gap around the duration/opening-hours row. */ .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--opening-hours-link, .rentalo-step1-inline-shell .rentalo-ui-row--opening-hours-link{ grid-row:5; } .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-notices, .rentalo-step1-inline-shell .rentalo-ui-notices{ grid-row:6; } .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-actions, .rentalo-step1-inline-shell .rentalo-ui-actions{ grid-row:7; } /* Match the Step 2 edit icon alignment at the top of the summary card. */ .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-icon{ align-self:start; } /* Two-digit quantities need only a compact selector. */ .rentalo-ui-step3-shell .rentalo-step3-option-quantity .rentalo-option-quantity-select, .rentalo-ui-step3-shell .rentalo-option-quantity-select{ width:70px; min-width:70px; max-width:70px; } } /* WP Rentalo Lite 2.15.467 - Mobile booking summaries, shared modal columns and Step3 change-button design. */ @media (max-width: 767px) { .rentalo-ui-step2 .rentalo-booking-details-summary-button, .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-button { grid-template-columns: minmax(0, 1fr); align-items: start; } .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-button {grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);} .rentalo-booking-details-summary-edit { grid-column: 1 / -1; width: 100%; min-height: var(--rentalo-button-height, 40px); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 0; border-radius: var(--rentalo-button-radius, 10px); background: var(--rentalo-step3-change-button-bg, var(--rentalo-button-bg, #c20000)); color: var(--rentalo-step3-change-button-text, var(--rentalo-button-text, #ffffff)); border: 1px solid var(--rentalo-step3-change-button-bg, var(--rentalo-button-bg, #c20000)); font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; } .rentalo-ui-step2 .rentalo-booking-details-summary-button:hover .rentalo-booking-details-summary-edit, .rentalo-ui-step2 .rentalo-booking-details-summary-button:focus .rentalo-booking-details-summary-edit, .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-button:hover .rentalo-booking-details-summary-edit, .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-button:focus .rentalo-booking-details-summary-edit { background: var(--rentalo-step3-change-button-hover, var(--rentalo-button-hover, #9e0000)); border-color: var(--rentalo-step3-change-button-hover, var(--rentalo-button-hover, #9e0000)); color: var(--rentalo-step3-change-button-hover-text, var(--rentalo-button-hover-text, #ffffff)); } .rentalo-ui-step2 .rentalo-step2-mobile-summary-icon, .rentalo-ui-step3-shell .rentalo-step3-mobile-booking-summary-icon { display: none; } .rentalo-ui-step2 .rentalo-booking-details-sheet .rentalo-ui-step2-pickers-layout, .rentalo-ui-step2 .rentalo-booking-details-sheet .rentalo-ui-locations-row, .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-layout-real, .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-ui-locations-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-booking-details-form__actions { grid-template-columns: minmax(0, 1fr); } .rentalo-booking-details-form.rentalo-ui-step1-shell .rentalo-booking-details-form__actions .rentalo-submit-button { width: 100%; grid-column: 1 / -1; } } /* 2.15.509 - Mobile Design 1: tatsächliche 30/70-Aufteilung nach allen Restore-Regeln. */ /* 2.15.513 - Step 3 mobile quantity label beside dropdown. */ @media (max-width:900px){ .rentalo-ui-step3-shell .rentalo-step3-option-quantity:has(.rentalo-option-quantity-select){ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; } .rentalo-ui-step3-shell .rentalo-step3-option-quantity-label{ display:block; color:var(--rentalo-muted, var(--rentalo-secondary-text, #52677a)); font-size:var(--rentalo-small-font-size, 13px); font-weight:400; line-height:1.2; white-space:nowrap; } } /* WP Rentalo Lite 2.15.517 - Canonical mobile Design 1 rules consolidated from legacy restore blocks. */ @media (max-width:767px){ .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-item-card{display:grid;padding:10px;border:var(--rentalo-card-border-width,1px) solid var(--rentalo-border,#d6e0ec);border-radius:var(--rentalo-radius,16px);background:var(--rentalo-card-bg,#fff);box-shadow:none;align-items:start;grid-template-columns:118px minmax(0,1fr);gap:10px 12px;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media{min-width:0;height:86px;max-height:86px;border-radius:var(--rentalo-choice-radius,12px);overflow:hidden;width:112px;grid-column:1;grid-row:1;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media .rentalo-vehicle-image-button{aspect-ratio:auto;max-width:100%;min-height:0;width:112px;height:84px;max-height:84px;border-radius:var(--rentalo-choice-radius,12px);overflow:hidden;object-fit:cover;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media img{aspect-ratio:auto;max-width:100%;min-height:0;width:112px;height:84px;max-height:84px;border-radius:var(--rentalo-choice-radius,12px);overflow:hidden;object-fit:cover;} .rentalo-ui-step2--mobile-list-compact .rentalo-group-image-placeholder{aspect-ratio:auto;max-width:100%;min-height:0;width:112px;height:84px;max-height:84px;border-radius:var(--rentalo-choice-radius,12px);overflow:hidden;object-fit:cover;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-content h4{margin:0 0 4px;font-size:18px;font-weight:800;line-height:1.18;color:var(--rentalo-title,#10233f);grid-column:2;grid-row:1;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-code{display:none;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-group{margin:0 0 5px;font-size:12px;font-weight:700;line-height:1.3;color:var(--rentalo-title,#10233f);grid-column:2;grid-row:1;margin-top:28px;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-content .rentalo-group-meta p{margin:0 0 4px;font-size:12px;font-weight:500;line-height:1.28;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-side{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding-top:10px;border-top:1px solid var(--rentalo-border,#d6e0ec);border-left:0;margin-top:0;grid-column:1 / -1;grid-row:4;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-price{display:flex;flex-direction:column;line-height:1.12;align-items:flex-start;text-align:left;gap:2px;min-width:0;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-price strong{letter-spacing:-.01em;color:var(--rentalo-price,#c20000);font-size:18px;font-weight:800;line-height:1.05;white-space:nowrap;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-price small{font-weight:700;color:var(--rentalo-muted,#66778a);font-size:12px;text-align:left;white-space:nowrap;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-side form{margin:0;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-item-card .rentalo-submit-button{width:auto;min-width:118px;max-width:132px;min-height:40px;padding-left:12px;padding-right:12px;white-space:nowrap;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-content{min-width:0;grid-column:2;grid-row:1;display:contents;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-price-prefix{color:var(--rentalo-muted,#66778a);line-height:1;font-size:12px;font-weight:500;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-meta p{color:var(--rentalo-muted,#66778a);font-size:12px;line-height:1.35;-webkit-line-clamp:2;margin:0;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-tariff-hint{display:block;color:var(--rentalo-title,#10233f);font-size:12px;font-weight:800;line-height:1.3;grid-column:2;grid-row:1;align-self:end;margin-bottom:0;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-feature-list{grid-column:1 / -1;grid-row:3;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-meta{grid-column:1 / -1;grid-row:2;margin:0;} .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-item-card{grid-template-columns:minmax(var(--rentalo-step2-image-width,124px),var(--rentalo-step2-image-width,124px)) minmax(0,1fr);} .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media{width:var(--rentalo-step2-image-width,124px);} .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media .rentalo-ui-step2-image-button{width:var(--rentalo-step2-image-width,124px);height:var(--rentalo-step2-image-height,93px);min-height:var(--rentalo-step2-image-height,93px);max-height:var(--rentalo-step2-image-height,93px);} .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media .rentalo-vehicle-image-button{width:var(--rentalo-step2-image-width,124px);height:var(--rentalo-step2-image-height,93px);min-height:var(--rentalo-step2-image-height,93px);max-height:var(--rentalo-step2-image-height,93px);} .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-group-image-placeholder{width:var(--rentalo-step2-image-width,124px);height:var(--rentalo-step2-image-height,93px);min-height:var(--rentalo-step2-image-height,93px);max-height:var(--rentalo-step2-image-height,93px);} .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media img{width:var(--rentalo-step2-image-width,124px);height:var(--rentalo-step2-image-height,93px);min-height:var(--rentalo-step2-image-height,93px);max-height:var(--rentalo-step2-image-height,93px);} .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-item-card{grid-template-columns:minmax(0,7fr) minmax(0,13fr);column-gap:12px;} .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media{width:100%;min-width:0;} .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media .rentalo-ui-step2-image-button{width:100%;height:auto;min-height:0;aspect-ratio:4 / 3;object-fit:cover;} .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media .rentalo-vehicle-image-button{width:100%;height:auto;min-height:0;aspect-ratio:4 / 3;object-fit:cover;} .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media .rentalo-group-image-placeholder{width:100%;height:auto;min-height:0;aspect-ratio:4 / 3;object-fit:cover;} .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media img{width:100%;height:auto;min-height:0;aspect-ratio:4 / 3;object-fit:cover;} } @media (max-width: 767px){ .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-side{align-items:center;gap:12px;padding-top:10px;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-price{line-height:1.15;} .rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-item-card .rentalo-submit-button{min-width:112px;padding-left:16px;padding-right:16px;} } /* 2.15.560 - Step 3: stable tablet and mobile grids without intermediate 900px layout. */ @media (min-width:768px) and (max-width:1100px){ .rentalo-ui-step3-shell .rentalo-step3-tariff-row, .rentalo-ui-step3-shell .rentalo-step3-insurance-row{ grid-template-columns:30px 40px minmax(0,1fr) 124px; } .rentalo-ui-step3-shell .rentalo-step3-option-row{ grid-template-columns:30px 40px minmax(0,1fr) 54px 124px; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-row, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-insurance-row{ grid-template-columns:30px minmax(0,1fr) 124px; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-row{ grid-template-columns:30px minmax(0,1fr) 54px 124px; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-content{ grid-column:2; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-row .rentalo-step3-price, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-insurance-row .rentalo-step3-price{ grid-column:3; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-row .rentalo-step3-option-quantity{ grid-column:3; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-row .rentalo-step3-price{ grid-column:4; } } @media (max-width:767px){ .rentalo-ui-step3-shell .rentalo-step3-row, .rentalo-ui-step3-shell .rentalo-step3-row:hover, .rentalo-ui-step3-shell .rentalo-step3-row:focus, .rentalo-ui-step3-shell .rentalo-step3-row:focus-visible, .rentalo-ui-step3-shell .rentalo-step3-row:focus-within, .rentalo-ui-step3-shell .rentalo-step3-row.is-selected, .rentalo-ui-step3-shell .rentalo-step3-row.is-selected:hover, .rentalo-ui-step3-shell .rentalo-step3-row.is-selected:focus-within, .rentalo-ui-step3-shell .rentalo-step3-row.is-required, .rentalo-ui-step3-shell .rentalo-step3-row.is-required:hover{ position:relative; display:grid; grid-template-columns:22px 28px minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:8px; row-gap:7px; min-height:auto; padding:13px 12px; align-items:start; background:var(--rentalo-card-bg,#fff); border:var(--rentalo-border-width,1px) solid var(--rentalo-border,#d8e0ea); box-shadow:none; outline:0; } .rentalo-ui-step3-shell .rentalo-step3-row::before{ content:none; display:none; } .rentalo-ui-step3-shell .rentalo-step3-row::after{ content:""; display:block; grid-column:3; grid-row:3; align-self:start; border-top:var(--rentalo-border-width,1px) solid var(--rentalo-border,#d8e0ea); pointer-events:none; } .rentalo-ui-step3-shell .rentalo-step3-control, .rentalo-ui-step3-shell .rentalo-step3-option-check{ grid-column:1; grid-row:1; width:22px; min-width:22px; padding:2px 0 0; align-self:start; justify-content:flex-start; } .rentalo-ui-step3-shell .rentalo-step3-tariff-icon, .rentalo-ui-step3-shell .rentalo-step3-insurance-icon, .rentalo-ui-step3-shell .rentalo-step3-option-icon{ grid-column:2; grid-row:1; width:28px; min-width:28px; padding:0; align-self:start; justify-content:flex-start; } .rentalo-ui-step3-shell .rentalo-step3-tariff-icon svg, .rentalo-ui-step3-shell .rentalo-step3-insurance-icon svg, .rentalo-ui-step3-shell .rentalo-step3-option-icon svg{ width:20px; height:20px; } .rentalo-ui-step3-shell .rentalo-step3-content, .rentalo-ui-step3-shell .rentalo-step3-tariff-content, .rentalo-ui-step3-shell .rentalo-step3-option-content{ display:contents; } .rentalo-ui-step3-shell .rentalo-step3-content > strong, .rentalo-ui-step3-shell .rentalo-step3-option-title{ grid-column:3; grid-row:1; min-width:0; margin:0; padding:0; align-self:start; text-align:left; } .rentalo-ui-step3-shell .rentalo-step3-content > span, .rentalo-ui-step3-shell .rentalo-step3-content > small, .rentalo-ui-step3-shell .rentalo-step3-content > p, .rentalo-ui-step3-shell .rentalo-step3-tariff-special-line{ grid-column:3; grid-row:2; width:100%; max-width:100%; margin:0; padding:0; text-align:left; } .rentalo-ui-step3-shell .rentalo-step3-option-quantity{ grid-column:3; grid-row:3; min-height:auto; padding:11px 0 0; border-left:0; align-self:center; justify-self:start; justify-content:flex-start; z-index:1; } .rentalo-ui-step3-shell .rentalo-step3-option-quantity:empty::before, .rentalo-ui-step3-shell .rentalo-step3-option-quantity-placeholder{ content:none; display:none; } .rentalo-ui-step3-shell .rentalo-step3-price, .rentalo-ui-step3-shell .rentalo-step3-tariff-total, .rentalo-ui-step3-shell .rentalo-step3-insurance-total, .rentalo-ui-step3-shell .rentalo-step3-option-total{ grid-column:3; grid-row:3; width:auto; min-width:0; min-height:auto; padding:11px 0 0; border-left:0; align-self:center; justify-self:end; align-items:flex-end; text-align:right; z-index:1; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-row{ grid-template-columns:22px minmax(0,1fr); } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-content > strong, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-title, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-content > span, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-content > small, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-content > p, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-special-line{ grid-column:2; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-row::after{ grid-column:2; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-quantity{ grid-column:2; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-price, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-total, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-insurance-total, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-total{ grid-column:2; } } @media (max-width:480px){ .rentalo-ui-step3-shell .rentalo-step3-row{ padding:12px 10px; column-gap:7px; } }