/* ========================================================================== Zaimi Fleet Rental — front-end · "Ionian Modern" (v3.0) A clean 2026 aesthetic. Solid, confident surfaces with layered soft depth, tight modern typography and purposeful motion. No glass, no blur, no aurora. Palette: ink #0B1B33 · azure #0A6CFF · sea #12B7B0 · slate neutrals ========================================================================== */ :root{ /* Brand */ --zfr-azure:#0A6CFF; --zfr-azure-600:#0A56D6; --zfr-teal:#12B7B0; --zfr-ink:#0B1B33; /* headings */ --zfr-text:#24344D; /* body */ --zfr-muted:#66788F; /* secondary */ --zfr-line:#E4EAF2; /* hairline border */ --zfr-surface:#FFFFFF; /* card surface */ --zfr-field:#F4F7FB; /* subtle fill */ --zfr-success:#0E9F7E; --zfr-danger:#E5484D; /* Legacy aliases still referenced by PHP inline styles */ --zfr-navy:#0B1B33; --zfr-navy-dark:#06101F; --zfr-gold:#FF9F6B; --zfr-sand:rgba(255,255,255,.6); --zfr-border:#E4EAF2; /* Depth — layered, soft, zero blur */ --zfr-shadow-sm:0 1px 2px rgba(16,24,40,.06); --zfr-shadow:0 1px 2px rgba(16,24,40,.05),0 12px 28px -12px rgba(16,32,64,.16); --zfr-shadow-lg:0 2px 4px rgba(16,24,40,.05),0 30px 60px -26px rgba(16,32,64,.26); --zfr-ring:0 0 0 4px rgba(10,108,255,.15); --zfr-ease:cubic-bezier(.22,.61,.36,1); --zfr-spring:cubic-bezier(.34,1.4,.64,1); --zfr-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif; --zfr-radius:20px; --zfr-grad:linear-gradient(135deg,#0A6CFF 0%,#1AA0D8 55%,#12B7B0 100%); } /* Always light — phones in dark mode must look identical to desktop */ :root{color-scheme:light only} /* ---------- Stage: containers sit clean on the page (no aurora) ---------- */ .zfr-availability,.zfr-vehicle-detail,.zfr-checkout,.zfr-portal,.zfr-agreement{ position:relative; padding:clamp(16px,3vw,30px); font-family:var(--zfr-font);color:var(--zfr-text); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } /* ---------- Surface ---------- */ .zfr-card{ position:relative; background:var(--zfr-surface); border:1px solid var(--zfr-line);border-radius:var(--zfr-radius); padding:clamp(18px,2.4vw,26px);margin-bottom:18px; box-shadow:var(--zfr-shadow); font-family:var(--zfr-font);color:var(--zfr-text); transition:box-shadow .35s var(--zfr-ease),transform .35s var(--zfr-ease),border-color .35s var(--zfr-ease); } .zfr-notice{color:var(--zfr-muted);text-align:center;font-size:14px;} /* ---------- Buttons ---------- */ .zfr-btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 24px;border-radius:14px;border:1px solid transparent; font:600 14.5px/1 var(--zfr-font);letter-spacing:-.01em;text-decoration:none;cursor:pointer; transition:transform .25s var(--zfr-spring),box-shadow .25s var(--zfr-ease),background .2s,border-color .2s,color .2s; } .zfr-btn:active{transform:translateY(0) scale(.98)} .zfr-btn:focus-visible{outline:none;box-shadow:var(--zfr-ring)} .zfr-btn-primary{color:#fff;background:var(--zfr-grad);box-shadow:0 8px 20px -8px rgba(10,108,255,.55)} .zfr-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(10,108,255,.6)} .zfr-btn-ghost{color:var(--zfr-ink);background:var(--zfr-surface);border-color:var(--zfr-line);box-shadow:var(--zfr-shadow-sm)} .zfr-btn-ghost:hover{transform:translateY(-2px);border-color:#c9d4e4;box-shadow:var(--zfr-shadow)} .zfr-btn-danger{color:#fff;background:linear-gradient(135deg,#F2555A,#E5484D);box-shadow:0 8px 18px -8px rgba(229,72,77,.5)} .zfr-btn-danger:hover{transform:translateY(-2px);box-shadow:0 13px 24px -10px rgba(229,72,77,.55)} .zfr-btn-full{width:100%} /* ---------- Search widget ---------- */ .zfr-widget{ /* No overflow:hidden here — it clipped the calendar popup so only its top sliver showed. Children never touch the edges, so the radius alone is enough to keep the card tidy. */ max-width:440px; background:var(--zfr-surface);border:1px solid var(--zfr-line);border-radius:24px; box-shadow:var(--zfr-shadow-lg); padding:clamp(20px,2.4vw,26px); } .zfr-widget-title{ margin:0 0 20px;text-align:left; font:700 27px/1.1 var(--zfr-font);letter-spacing:-.03em;color:var(--zfr-ink); } .zfr-type-tabs{ position:relative;display:flex;gap:0;margin-bottom:20px;padding:4px;border-radius:14px; background:var(--zfr-field); } .zfr-tab{ position:relative;z-index:1;flex:1;text-align:center;border:0;border-radius:11px;padding:10px 0; font:600 13.5px/1 var(--zfr-font);color:var(--zfr-muted);cursor:pointer; transition:color .25s var(--zfr-ease); } .zfr-tab input{position:absolute;opacity:0;pointer-events:none} .zfr-tab.is-active{color:var(--zfr-ink)} .zfr-tab-pill{ position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:11px; background:var(--zfr-surface);box-shadow:var(--zfr-shadow-sm); transition:transform .4s var(--zfr-spring),width .4s var(--zfr-spring); } .zfr-type-tabs:not(.has-pill) .zfr-tab.is-active{background:var(--zfr-surface);box-shadow:var(--zfr-shadow-sm)} /* ---------- Form fields ---------- */ .zfr-form-row{margin-bottom:16px} .zfr-form-row label,.zfr-form-row-split label{display:block;font:600 13px/1.3 var(--zfr-font);color:var(--zfr-muted);margin:0 0 7px 2px} .zfr-form-row-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px} .zfr-form-row input,.zfr-form-row select,.zfr-form-row-split input,textarea.zfr-input, .zfr-checkout input[type=text],.zfr-checkout input[type=email],.zfr-checkout textarea, .zfr-portal input[type=email],.zfr-portal input[type=text],.zfr-agreement input[type=text],.zfr-agreement input[type=email]{ width:100%;box-sizing:border-box;padding:13px 15px; font:500 15px/1.3 var(--zfr-font);color:var(--zfr-ink); background:var(--zfr-field);border:1px solid var(--zfr-line);border-radius:13px; transition:border-color .2s,box-shadow .2s var(--zfr-ease),background .2s; } .zfr-form-row select{ -webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%2366788F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center; } .zfr-form-row input:focus,.zfr-form-row select:focus,.zfr-form-row-split input:focus, .zfr-checkout input:focus,.zfr-checkout textarea:focus,.zfr-portal input:focus,.zfr-agreement input:focus{ outline:none;background:var(--zfr-surface);border-color:var(--zfr-azure);box-shadow:var(--zfr-ring); } .zfr-note{font-size:12.5px;color:var(--zfr-muted);margin:8px 2px 16px;line-height:1.5} /* ---------- Availability list ---------- */ .zfr-section-title{font:700 clamp(26px,3.4vw,38px)/1.05 var(--zfr-font);letter-spacing:-.035em;color:var(--zfr-ink);margin:0 0 22px 2px} .zfr-avail-row{ display:grid;grid-template-columns:200px 1fr 210px;gap:26px;align-items:center; background:var(--zfr-surface);border:1px solid var(--zfr-line);border-radius:var(--zfr-radius); padding:18px;box-shadow:var(--zfr-shadow-sm); transition:transform .35s var(--zfr-ease),box-shadow .35s var(--zfr-ease),border-color .35s var(--zfr-ease); } .zfr-avail-row:hover{transform:translateY(-3px);box-shadow:var(--zfr-shadow);border-color:#d6dfeb} .zfr-avail-img{position:relative;border-radius:14px;overflow:hidden;background:var(--zfr-field)} .zfr-avail-img img{display:block;width:100%;height:auto;border-radius:14px;transition:transform .6s var(--zfr-ease)} .zfr-avail-row:hover .zfr-avail-img img{transform:scale(1.05)} .zfr-badge{ position:absolute;top:10px;left:10px;background:var(--zfr-ink);color:#fff; font:700 11px/1 var(--zfr-font);padding:6px 11px;border-radius:999px; box-shadow:0 4px 10px -3px rgba(11,27,51,.5); } .zfr-portal .zfr-badge,.zfr-agreement .zfr-badge,.zfr-card .zfr-badge[class*="zfr-badge-"]{position:static;display:inline-flex;align-items:center;gap:6px;text-transform:capitalize;box-shadow:none} .zfr-badge[class*="zfr-badge-"]::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .zfr-badge-active,.zfr-badge-confirmed,.zfr-badge-paid,.zfr-badge-verified{background:rgba(14,159,126,.14);color:#0A7A5E} .zfr-badge-pending,.zfr-badge-partial,.zfr-badge-unpaid{background:rgba(255,159,107,.18);color:#B4521A} .zfr-badge-cancelled,.zfr-badge-inactive,.zfr-badge-rejected{background:rgba(229,72,77,.14);color:#B4232A} .zfr-badge-completed,.zfr-badge-refunded{background:rgba(10,108,255,.13);color:#0A56C9} .zfr-avail-info h3{margin:0 0 3px;font:700 21px/1.2 var(--zfr-font);letter-spacing:-.02em;color:var(--zfr-ink)} .zfr-avail-year{color:var(--zfr-muted);font-size:13px;margin-bottom:10px} .zfr-avail-specs{display:flex;flex-wrap:wrap;gap:6px} .zfr-avail-specs span{margin:0;padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--zfr-text);background:var(--zfr-field);border:1px solid var(--zfr-line);border-radius:8px} .zfr-avail-perks{list-style:none;padding:0;margin:12px 0 0;font-size:13px;font-weight:500;color:var(--zfr-success)} .zfr-avail-perks li{margin:3px 0} .zfr-avail-perks li::before{content:"✓";display:inline-grid;place-items:center;width:17px;height:17px;margin-right:8px;border-radius:50%;background:rgba(14,159,126,.15);font-size:10px;font-weight:800} .zfr-avail-price{text-align:right} .zfr-price-total{font:700 32px/1 var(--zfr-font);letter-spacing:-.04em;color:var(--zfr-ink)} .zfr-price-perday{font-size:13px;color:var(--zfr-muted);margin-top:4px} .zfr-price-note{font-size:12px;color:var(--zfr-muted);margin:2px 0 14px} /* ---------- Vehicle detail ---------- */ .zfr-vehicle-detail{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start} .zfr-vehicle-detail .zfr-card{margin-bottom:0} .zfr-vd-header{display:flex;gap:24px;margin-bottom:22px;flex-wrap:wrap} .zfr-vd-image{width:280px;max-width:100%;border-radius:16px;box-shadow:var(--zfr-shadow)} .zfr-vd-year{color:var(--zfr-muted);margin-bottom:12px} .zfr-vd-quickspecs span{display:block;font-size:14px;margin-bottom:6px;font-weight:500} .zfr-vd-overview{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 22px} .zfr-vd-overview>*{padding:12px 14px;background:var(--zfr-field);border:1px solid var(--zfr-line);border-radius:13px} .zfr-vd-overview label{display:block;font-size:12px;font-weight:600;color:var(--zfr-muted);margin-bottom:2px} .zfr-vd-desc{color:var(--zfr-text);line-height:1.7;font-size:15px} .zfr-vd-sidebar{position:sticky;top:24px} .zfr-vd-priceband{ position:relative;overflow:hidden;color:#fff;text-align:center; font:600 16px/1.3 var(--zfr-font);padding:20px 16px;border-radius:16px;margin-bottom:18px; background:var(--zfr-grad);box-shadow:0 14px 28px -12px rgba(10,108,255,.5); } .zfr-vd-priceband span{font:700 36px/1 var(--zfr-font);letter-spacing:-.04em} .zfr-checkbox-row,.zfr-radio-row{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;margin-bottom:12px;cursor:pointer} .zfr-checkbox-row input,.zfr-radio-row input{accent-color:var(--zfr-azure);width:18px;height:18px} .zfr-vd-total{font:700 20px/1.2 var(--zfr-font);letter-spacing:-.02em;color:var(--zfr-ink);margin:18px 0;text-align:center} .zfr-vd-total.zfr-tick,#zfr-total-amount.zfr-tick{animation:zfr-tick .5s var(--zfr-spring)} @keyframes zfr-tick{0%{transform:scale(.94);opacity:.4}100%{transform:none;opacity:1}} /* ---------- Checkout ---------- */ .zfr-checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start} .zfr-checkout-grid .zfr-card{margin-bottom:0} .zfr-order-table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:14.5px} .zfr-order-table td{padding:11px 0;border-bottom:1px dashed #D7E0EC;vertical-align:top} .zfr-order-table td:first-child span{display:block;font:600 14.5px/1.4 var(--zfr-font);color:var(--zfr-ink)} .zfr-order-table td:first-child em{display:block;font:500 12.5px/1.45 var(--zfr-font);font-style:normal;color:var(--zfr-muted);font-variant-numeric:tabular-nums;margin-top:2px} .zfr-order-table td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums} .zfr-order-table tr.zfr-order-total td{border-bottom:0;border-top:2px solid var(--zfr-ink);padding-top:13px;font:800 16.5px/1.2 var(--zfr-font);color:var(--zfr-ink)} .zfr-order-table tr.zfr-order-total td:last-child{font-size:19px} .zfr-order-discount td:last-child{color:var(--zfr-success)} .zfr-order-discount td{font-weight:600} .zfr-order-discount td:first-child{color:var(--zfr-text)} .zfr-order-total td{font:700 17px/1.2 var(--zfr-font);letter-spacing:-.02em;color:var(--zfr-ink);border-bottom:none;padding-top:15px} .zfr-order-total td:last-child{font-size:21px} .zfr-payment-methods{margin:18px 0;padding:6px 16px;background:var(--zfr-field);border:1px solid var(--zfr-line);border-radius:16px} .zfr-payment-methods .zfr-radio-row{padding:10px 0;margin:0;border-bottom:1px solid var(--zfr-line)} .zfr-payment-methods .zfr-radio-row:last-child{border-bottom:none} .zfr-terms-row{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:14px 16px;background:var(--zfr-field);border:1px solid var(--zfr-line);border-radius:14px;font-size:13px;line-height:1.55;color:var(--zfr-text);cursor:pointer} .zfr-terms-row input{margin:2px 0 0;width:17px;height:17px;accent-color:var(--zfr-azure);flex:none} .zfr-terms-row a{color:var(--zfr-azure);text-decoration:underline;font-weight:600} .zfr-deposit-note{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:-4px 0 4px;padding:12px 14px;background:rgba(18,183,176,.08);border:1px solid rgba(18,183,176,.3);border-radius:12px;font-size:13px;color:var(--zfr-text)} .zfr-deposit-note strong{font:700 15px/1 var(--zfr-font);color:var(--zfr-ink);font-variant-numeric:tabular-nums;white-space:nowrap} .zfr-secure-note{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--zfr-muted)} .zfr-pay-banner{margin:0 0 18px;padding:14px 18px;border-radius:14px;font:600 14px/1.4 var(--zfr-font)} .zfr-pay-banner.is-paid{background:rgba(14,159,126,.12);color:#0A6B52;border:1px solid rgba(14,159,126,.35)} .zfr-pay-banner.is-pending{background:rgba(245,158,11,.15);color:#8A5A05;border:1px solid rgba(245,158,11,.35)} .zfr-pay-result{text-align:center;padding:34px 26px} .zfr-pay-ic{font-size:38px;line-height:1;display:block} .zfr-pay-result h2{font:700 24px/1.2 var(--zfr-font);letter-spacing:-.02em;color:var(--zfr-ink);margin:12px 0 10px} .zfr-pay-result p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--zfr-text)} .zfr-pay-note{color:var(--zfr-muted);font-size:13.5px} .zfr-pay-result .zfr-btn{margin-top:10px} .zfr-card.zfr-pay-result.is-cancelled{border-color:rgba(229,72,77,.35);background:rgba(229,72,77,.05)} .zfr-confirmation h2{font:700 28px/1.15 var(--zfr-font);letter-spacing:-.03em;color:var(--zfr-ink)} .zfr-verify-box{background:rgba(255,159,107,.12);border:1px dashed rgba(255,159,107,.6);border-radius:16px;padding:18px;margin-top:18px} .zfr-verify-box h4{margin:0 0 6px;color:var(--zfr-ink);font:700 15px/1.3 var(--zfr-font)} .zfr-verify-note{font-size:13px;color:var(--zfr-muted);margin:0 0 12px;line-height:1.5} .zfr-verify-box small{color:var(--zfr-muted);display:block;margin-top:6px} .zfr-agreement h4{color:var(--zfr-ink);font:700 14px/1.3 var(--zfr-font);margin:20px 0 6px;border-top:1px solid var(--zfr-line);padding-top:16px} .zfr-agreement h4:first-of-type{border-top:none;padding-top:0;margin-top:0} #zfr-sig-pad{background:var(--zfr-field);border:1px solid var(--zfr-line)!important;border-radius:14px!important;box-shadow:inset 0 2px 6px rgba(11,27,51,.05)} .zfr-signed-notice{display:flex;gap:10px;align-items:center;background:rgba(14,159,126,.12);border:1px solid rgba(14,159,126,.3);color:#0A7A5E;padding:14px 18px;border-radius:14px;margin:16px 0;font-weight:600} /* ---------- Portal ---------- */ .zfr-portal-login{max-width:460px;margin-inline:auto} .zfr-portal-rental{margin-bottom:16px} .zfr-portal-rental-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px} .zfr-portal-rental-head h3{margin:0;font:700 19px/1.2 var(--zfr-font);letter-spacing:-.02em;color:var(--zfr-ink)} .zfr-portal-dates{color:var(--zfr-muted);font-size:14px;margin:0 0 16px} .zfr-portal-actions{display:flex;gap:10px;flex-wrap:wrap} .zfr-portal-actions form{margin:0} .zfr-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px} .zfr-toolbar h2{font:700 28px/1.1 var(--zfr-font);letter-spacing:-.03em;color:var(--zfr-ink)} /* ========================================================================== Instant search — sticky bar, inline dual-month calendar, AJAX state ========================================================================== */ .zfr-searchbar{position:sticky;top:0;z-index:30;margin:0 0 24px} .zfr-sb-inner{ position:relative;display:grid; grid-template-columns:auto minmax(140px,1fr) minmax(190px,1.25fr) auto; gap:6px;align-items:stretch;padding:7px;border-radius:18px; background:var(--zfr-surface);border:1px solid var(--zfr-line); box-shadow:var(--zfr-shadow); } .zfr-sb-field{display:flex;flex-direction:column;gap:2px;justify-content:center;padding:9px 15px;border-radius:12px;min-width:0} .zfr-sb-label{font:600 11px/1.2 var(--zfr-font);color:var(--zfr-muted);letter-spacing:.01em} .zfr-sb-value{font:600 15px/1.35 var(--zfr-font);color:var(--zfr-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zfr-sb-type{gap:5px} .zfr-sb-tabs{display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--zfr-field)} .zfr-sb-tab{ border:0;border-radius:999px;padding:6px 13px;cursor:pointer;background:transparent; font:600 13px/1 var(--zfr-font);color:var(--zfr-muted); transition:color .2s var(--zfr-ease),background .25s var(--zfr-ease),box-shadow .25s var(--zfr-ease); } .zfr-sb-tab.is-active{color:var(--zfr-ink);background:var(--zfr-surface);box-shadow:var(--zfr-shadow-sm)} button.zfr-sb-btn{cursor:pointer;text-align:left;border:0;background:transparent;transition:background .2s var(--zfr-ease),box-shadow .2s var(--zfr-ease)} button.zfr-sb-btn:hover{background:var(--zfr-field)} button.zfr-sb-btn.is-open{background:var(--zfr-field);box-shadow:inset 0 0 0 1.5px var(--zfr-azure)} .zfr-sb-cta{ align-self:stretch;padding:0 24px;border:0;border-radius:13px;cursor:pointer;color:#fff; font:700 15px/1 var(--zfr-font);letter-spacing:-.01em;white-space:nowrap; background:var(--zfr-grad);box-shadow:0 8px 18px -8px rgba(10,108,255,.5); transition:transform .25s var(--zfr-spring),box-shadow .25s var(--zfr-ease); } .zfr-sb-cta:hover{transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(10,108,255,.6)} .zfr-sb-cta:active{transform:scale(.98)} .zfr-sb-panel{ position:absolute;left:0;right:0;top:calc(100% + 8px); padding:18px;border-radius:18px;background:var(--zfr-surface); border:1px solid var(--zfr-line);box-shadow:var(--zfr-shadow-lg); animation:zfr-panel-in .26s var(--zfr-ease) both; } @keyframes zfr-panel-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .zfr-sb-panel-grid{display:flex;flex-direction:column;gap:14px;max-width:420px} .zfr-sb-loc-field>span{display:block;font:600 13px/1.3 var(--zfr-font);color:var(--zfr-muted);margin:0 0 6px 2px} .zfr-sb-loc-field select{ width:100%;box-sizing:border-box;padding:12px 42px 12px 15px; font:500 15px/1.3 var(--zfr-font);color:var(--zfr-ink); background:var(--zfr-field);border:1px solid var(--zfr-line);border-radius:13px; -webkit-appearance:none;appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%2366788F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center; } .zfr-sb-loc-field select:focus{outline:none;border-color:var(--zfr-azure);box-shadow:var(--zfr-ring)} .zfr-sb-diff{margin:0} /* ---------- Inline dual-month calendar ---------- */ .zfr-cal{min-width:0} .zfr-cal-head{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center} .zfr-cal-months{display:grid;grid-template-columns:1fr 1fr;gap:22px} .zfr-cal-nav{ width:38px;height:38px;border-radius:12px;border:1px solid var(--zfr-line);cursor:pointer; background:var(--zfr-field);color:var(--zfr-ink);font:600 20px/1 var(--zfr-font); display:grid;place-items:center;transition:background .2s,opacity .2s,transform .2s var(--zfr-spring); } .zfr-cal-nav:hover:not(:disabled){background:var(--zfr-surface);transform:scale(1.05);box-shadow:var(--zfr-shadow-sm)} .zfr-cal-nav:disabled{opacity:.3;cursor:not-allowed} .zfr-cal-monthname{font:700 15px/1.2 var(--zfr-font);color:var(--zfr-ink);text-align:center;margin-bottom:12px;letter-spacing:-.01em} .zfr-cal-dow,.zfr-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .zfr-cal-dow{margin-bottom:5px} .zfr-cal-dow span{text-align:center;font:600 11px/1 var(--zfr-font);color:var(--zfr-muted);padding:4px 0} .zfr-cal-cell{ aspect-ratio:1/1;display:grid;place-items:center;border:0;background:transparent;cursor:pointer; font:600 14px/1 var(--zfr-font);color:var(--zfr-text);border-radius:10px; transition:background .16s var(--zfr-ease),color .16s var(--zfr-ease),transform .16s var(--zfr-spring); } .zfr-cal-cell.is-blank{pointer-events:none} .zfr-cal-cell.is-min{opacity:.28;pointer-events:none} .zfr-cal-cell:not(.is-min):not(.is-blank):hover{background:var(--zfr-field);transform:scale(1.06)} .zfr-cal-cell.is-start,.zfr-cal-cell.is-end{ color:#fff;border-radius:11px;background:var(--zfr-grad); box-shadow:0 6px 14px -6px rgba(10,108,255,.55); } .zfr-cal-cell.is-in{background:rgba(10,108,255,.1);border-radius:0;color:var(--zfr-ink)} /* Already-booked dates for this vehicle: struck through, non-interactive. */ .zfr-cal-cell.is-blocked{ color:#B4232A;background:rgba(229,72,77,.08);text-decoration:line-through;opacity:.65; cursor:not-allowed;pointer-events:none; } /* Brief flash when a chosen range would straddle an existing booking. */ .zfr-cal-blocked-hint .zfr-cal-cell.is-blocked{background:rgba(229,72,77,.24);opacity:1} /* Free/Booked legend — shown only when the vehicle has some booked dates. */ .zfr-cal-legend{display:flex;gap:16px;justify-content:flex-end;margin-bottom:12px;font:600 11px/1 var(--zfr-font);color:var(--zfr-muted)} .zfr-cal-legend span{display:inline-flex;align-items:center;gap:6px} .zfr-cal-leg{width:11px;height:11px;border-radius:3px;display:inline-block;position:relative} .zfr-cal-leg.free{background:var(--zfr-field);border:1px solid var(--zfr-line)} .zfr-cal-leg.booked{background:rgba(229,72,77,.14);border:1px solid rgba(229,72,77,.35)} .zfr-cal-leg.booked:after{content:"";position:absolute;inset:-1px;background:linear-gradient(45deg,transparent 44%,#B4232A 44%,#B4232A 56%,transparent 56%)} .zfr-cal-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--zfr-line)} .zfr-cal-time{display:flex;flex-direction:column;gap:4px} .zfr-cal-time span{font:600 11px/1 var(--zfr-font);color:var(--zfr-muted)} .zfr-cal-time select{ padding:9px 34px 9px 12px;border-radius:11px;border:1px solid var(--zfr-line); background:var(--zfr-field);color:var(--zfr-ink);font:500 14px/1 var(--zfr-font); -webkit-appearance:none;appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%2366788F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center; } .zfr-cal-total{margin-left:auto;display:flex;flex-direction:column;gap:2px;text-align:right} .zfr-cal-total span{font:600 11px/1 var(--zfr-font);color:var(--zfr-muted)} .zfr-cal-total strong{font:700 17px/1.2 var(--zfr-font);color:var(--zfr-ink);letter-spacing:-.02em} .zfr-cal-apply:disabled{opacity:.45;cursor:not-allowed;transform:none} /* ---------- AJAX results loading state ---------- */ .zfr-avail-results{transition:opacity .22s var(--zfr-ease)} .zfr-avail-results.is-loading{opacity:.45;pointer-events:none} .zfr-avail-results.is-loading::after{ content:"";display:block;width:26px;height:26px;margin:20px auto;border-radius:50%; border:3px solid rgba(10,108,255,.2);border-top-color:var(--zfr-azure); animation:zfr-spin .7s linear infinite; } @keyframes zfr-spin{to{transform:rotate(360deg)}} /* ---------- Widget: single date-range trigger (progressive enhancement) ---------- */ .zfr-cal-anchor{position:relative} /* No-JS fallback: both native date inputs sit side by side. */ .zfr-date-fallback{display:grid;grid-template-columns:1fr 1fr;gap:10px} .zfr-datebtn{ display:none;width:100%;box-sizing:border-box;align-items:center;gap:11px;text-align:left;cursor:pointer; padding:11px 14px;border-radius:13px;border:1px solid var(--zfr-line); background:var(--zfr-field);color:var(--zfr-ink);font:500 15px/1.3 var(--zfr-font); transition:border-color .2s,box-shadow .2s var(--zfr-ease),background .2s; } .zfr-datebtn:hover{border-color:var(--zfr-azure);box-shadow:var(--zfr-ring)} .zfr-datebtn-ic{flex:0 0 auto;color:var(--zfr-azure)} .zfr-datebtn-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .zfr-datebtn-txt em{ font-style:normal;font:600 10.5px/1 var(--zfr-font);color:var(--zfr-muted); letter-spacing:.05em;text-transform:uppercase; } .zfr-datebtn-txt b{ font:600 15px/1.25 var(--zfr-font);color:var(--zfr-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .zfr-datebtn.has-value .zfr-datebtn-txt b{color:var(--zfr-ink)} .zfr-datebtn-chev{flex:0 0 auto;color:var(--zfr-muted);transition:transform .2s var(--zfr-spring)} .zfr-cal-anchor.zfr-has-cal .zfr-native-date{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;border:0;padding:0} .zfr-cal-anchor.zfr-has-cal .zfr-datebtn{display:flex} .zfr-datebtn.is-open{border-color:var(--zfr-azure);box-shadow:var(--zfr-ring);background:var(--zfr-surface)} .zfr-datebtn.is-open .zfr-datebtn-chev{transform:rotate(180deg)} .zfr-cal-pop{ position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40; padding:16px;border-radius:16px;background:var(--zfr-surface); border:1px solid var(--zfr-line);box-shadow:var(--zfr-shadow-lg); animation:zfr-panel-in .24s var(--zfr-ease) both; container-type:inline-size; /* month grid reflows to the popup's width */ } .zfr-cal-pop.is-up{top:auto;bottom:calc(100% + 10px)} /* A 2-month grid needs ~540px. Inside narrow hosts — the 440px widget, the date-edit panels — drop to a single month so day cells stay big and readable (previously they squeezed to ~17px). With no sized ancestor the query falls back to the viewport, which keeps mobile on one month too. */ @container (max-width:539px){ .zfr-cal-months{grid-template-columns:1fr;gap:16px} .zfr-cal-month:last-child{display:none} } /* ========================================================================== [zfr_fleet] browse grid — modern card ========================================================================== */ .zfr-fleet{position:relative;font-family:var(--zfr-font)} .zfr-fleet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(298px,1fr));gap:22px} .zfr-vcard{ display:flex;flex-direction:column;overflow:hidden; background:var(--zfr-surface);border:1px solid var(--zfr-line);border-radius:22px;padding:20px; box-shadow:var(--zfr-shadow-sm); transition:transform .35s var(--zfr-ease),box-shadow .35s var(--zfr-ease),border-color .35s var(--zfr-ease); } .zfr-vcard:hover{transform:translateY(-5px);box-shadow:var(--zfr-shadow-lg);border-color:#d6dfeb} .zfr-vcard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px} .zfr-vcard-title h3{margin:0;font:700 20px/1.15 var(--zfr-font);letter-spacing:-.025em;color:var(--zfr-ink)} .zfr-vcard-sub{font-size:13px;color:var(--zfr-muted);margin-top:2px} .zfr-vcard-badge{ flex:none;align-self:flex-start;background:var(--zfr-field);color:var(--zfr-text); border:1px solid var(--zfr-line); font:700 10.5px/1 var(--zfr-font);letter-spacing:.02em;padding:6px 10px;border-radius:999px;white-space:nowrap; } .zfr-vcard-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px} .zfr-chip{display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1 var(--zfr-font);padding:6px 10px;border-radius:8px} .zfr-chip-blue{background:rgba(10,108,255,.12);color:#0A56C9} .zfr-chip-teal{background:rgba(18,183,176,.14);color:#0B7A75} .zfr-chip-plain{background:var(--zfr-field);color:var(--zfr-text);border:1px solid var(--zfr-line)} .zfr-vcard-img{ aspect-ratio:16/10;display:grid;place-items:center;margin-bottom:16px;border-radius:14px;overflow:hidden; background:var(--zfr-field); } .zfr-vcard-img img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .5s var(--zfr-ease)} .zfr-vcard:hover .zfr-vcard-img img{transform:scale(1.05)} .zfr-vcard-noimg{color:var(--zfr-muted);font:600 14px/1.4 var(--zfr-font);text-align:center} .zfr-vcard-noimg small{font-weight:500;font-size:12px} .zfr-vcard-specs{ display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;margin-bottom:16px; background:var(--zfr-line);border:1px solid var(--zfr-line);border-radius:12px;overflow:hidden; } .zfr-vcard-specs>div{background:var(--zfr-surface);padding:11px 6px;text-align:center} .zfr-vcard-specs span{display:block;font:600 10.5px/1.2 var(--zfr-font);color:var(--zfr-muted);margin-bottom:3px} .zfr-vcard-specs strong{font:700 13px/1.2 var(--zfr-font);color:var(--zfr-ink)} .zfr-vcard-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto} .zfr-vcard-price{font:700 28px/1 var(--zfr-font);letter-spacing:-.04em;color:var(--zfr-ink)} .zfr-vcard-total{font-size:12.5px;color:var(--zfr-muted);margin-top:5px} .zfr-vcard-view{ flex:none;display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border-radius:12px; font:700 14px/1 var(--zfr-font);color:#fff;text-decoration:none; background:var(--zfr-ink); transition:transform .25s var(--zfr-spring),background .25s var(--zfr-ease),box-shadow .25s var(--zfr-ease); } .zfr-vcard-view:hover{background:var(--zfr-azure);transform:translateY(-2px);box-shadow:0 12px 22px -10px rgba(10,108,255,.6)} .zfr-vcard-view:active{transform:scale(.97)} /* ========================================================================== Scroll-reveal (progressive: only active when JS marks the document) ========================================================================== */ .js-reveal .zfr-card,.js-reveal .zfr-vcard,.js-reveal .zfr-avail-row{ opacity:0;transform:translateY(20px); } .js-reveal .zfr-card.is-in,.js-reveal .zfr-vcard.is-in,.js-reveal .zfr-avail-row.is-in{ opacity:1;transform:none; transition:opacity .6s var(--zfr-ease),transform .6s var(--zfr-ease); transition-delay:calc(var(--zfr-i,0) * 60ms); } /* ---------- Responsive ---------- */ @media (max-width:960px){ .zfr-vehicle-detail{grid-template-columns:1fr} .zfr-vd-sidebar{position:static} } @media (max-width:820px){ .zfr-sb-inner{grid-template-columns:1fr 1fr;grid-auto-rows:auto} .zfr-sb-type{grid-column:1/-1} .zfr-sb-cta{grid-column:1/-1;padding:14px 24px} .zfr-cal-months{grid-template-columns:1fr;gap:16px} .zfr-cal-month:last-child{display:none} } @media (max-width:780px){ .zfr-avail-row{grid-template-columns:1fr;gap:16px} .zfr-avail-price{text-align:left} .zfr-checkout-grid{grid-template-columns:1fr} } @media (max-width:640px){.zfr-fleet-grid{grid-template-columns:1fr}} @media (max-width:520px){ .zfr-sb-inner{grid-template-columns:1fr} .zfr-cal-foot{flex-direction:column;align-items:stretch} .zfr-cal-total{margin-left:0;text-align:left} .zfr-cal-apply{width:100%} } @media (max-width:480px){ .zfr-form-row-split{grid-template-columns:1fr} .zfr-vd-overview{grid-template-columns:1fr} } /* ========================================================================== Booking popup + client-side stepper ========================================================================== */ html.zfr-ovl-open{overflow:hidden} .zfr-ovl{position:fixed;inset:0;z-index:100000;display:none} .zfr-ovl.is-open{display:block} .zfr-ovl-backdrop{ position:absolute;inset:0;background:rgba(9,17,29,.45); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); /* requested: blurred page behind the popup */ animation:zfr-fade .2s ease both; } .zfr-ovl-dialog{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(1248px,95vw);max-height:90vh;display:flex;flex-direction:column; /* +20% wider (was 1040px) */ background:var(--zfr-surface);border:1px solid var(--zfr-line);border-radius:22px; box-shadow:var(--zfr-shadow-lg);overflow:hidden; animation:zfr-modal-in .3s var(--zfr-spring) both; } @keyframes zfr-fade{from{opacity:0}to{opacity:1}} @keyframes zfr-modal-in{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} .zfr-ovl-x{position:absolute;top:16px;right:16px;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--zfr-line);background:var(--zfr-surface);color:var(--zfr-muted);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,transform .25s var(--zfr-spring)} .zfr-ovl-x:hover{background:var(--zfr-field);color:var(--zfr-ink);transform:rotate(90deg)} /* element+class specificity so theme/Elementor button rules can't restyle it */ button.zfr-ovl-x{box-shadow:var(--zfr-shadow-sm)} .zfr-ovl-head{padding:22px 26px 16px;border-bottom:1px solid var(--zfr-line)} .zfr-ovl-title{font:700 20px/1.2 var(--zfr-font);letter-spacing:-.02em;color:var(--zfr-ink);margin-bottom:14px;padding-right:44px} .zfr-steps{list-style:none;display:flex;gap:8px;margin:0;padding:0;flex-wrap:wrap} .zfr-steps li{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--zfr-font);color:var(--zfr-muted);padding:6px 13px 6px 6px;border-radius:999px;background:var(--zfr-field);transition:background .25s,color .25s} .zfr-steps li span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--zfr-surface);border:1px solid var(--zfr-line);font:700 12px/1 var(--zfr-font);color:var(--zfr-muted)} .zfr-steps li.is-active{background:rgba(10,108,255,.1);color:var(--zfr-azure)} .zfr-steps li.is-active span{background:var(--zfr-azure);border-color:var(--zfr-azure);color:#fff} .zfr-steps li.is-done{color:var(--zfr-success)} .zfr-steps li.is-done span{background:var(--zfr-success);border-color:var(--zfr-success);color:#fff} .zfr-ovl-body{padding:22px 26px;overflow-y:auto;overflow-x:hidden;flex:1} /* never a horizontal scrollbar */ .zfr-ovl-body .zfr-card{box-shadow:none;margin-bottom:0} .zfr-ovl-foot{display:flex;justify-content:space-between;gap:12px;padding:16px 26px;border-top:1px solid var(--zfr-line);background:var(--zfr-field)} .zfr-ovl-foot .zfr-btn{min-width:120px} .zfr-ovl-error{background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.35);color:#B4232A;padding:11px 14px;border-radius:12px;font:600 13px/1.4 var(--zfr-font);margin-bottom:16px} .zfr-ovl-load{width:30px;height:30px;margin:34px auto;border-radius:50%;border:3px solid rgba(10,108,255,.2);border-top-color:var(--zfr-azure);animation:zfr-spin .7s linear infinite} .zfr-ovl-vbanner{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:14px;border:1px solid var(--zfr-line);border-radius:16px;background:var(--zfr-field)} .zfr-ovl-vbanner img{width:78px;height:58px;object-fit:cover;border-radius:11px;background:var(--zfr-surface);flex:none} .zfr-ovl-vbanner strong{display:block;font:700 16px/1.2 var(--zfr-font);color:var(--zfr-ink);letter-spacing:-.01em} .zfr-ovl-vbanner span{font-size:13px;color:var(--zfr-muted)} /* stepper: only the active step shows; each spans the full grid width */ .zfr-checkout-grid .zfr-step{grid-column:1/-1;display:none} .zfr-checkout-grid .zfr-step.is-active{display:block;animation:zfr-step-in .28s var(--zfr-ease) both} @keyframes zfr-step-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}} .zfr-stepped .zfr-btn-full{display:none} @media (max-width:560px){ .zfr-ovl-dialog{width:100vw;max-height:100vh;height:100vh;border-radius:0;top:0;left:0;transform:none;animation:zfr-fade .2s ease both} .zfr-steps li{font-size:12px} } /* ========================================================================== Module M1 — CAR view (popup step 1): read the car, then pick dates ========================================================================== */ .zfr-ovl-foot:empty{display:none} /* no footer on the Car step */ .zfr-ovl .zfr-checkout-grid .zfr-step{max-width:680px;margin-inline:auto} .zfr-car{display:grid;grid-template-columns:1.4fr .95fr;gap:26px;align-items:start} .zfr-car-left,.zfr-car-right{min-width:0} /* One calendar look sitewide: inside the popup and the full vehicle page the calendar shows a SINGLE month (like the homepage widget) at a capped width. Two months can't fit the left column — their grid min-content overflowed into the sidebar and produced the horizontal scrollbar. */ .zfr-ovl .zfr-cal-months,.zfr-car-page .zfr-cal-months{grid-template-columns:1fr;gap:16px} .zfr-ovl .zfr-cal-month:last-child,.zfr-car-page .zfr-cal-month:last-child{display:none} .zfr-cv-dateedit .zfr-cal{max-width:430px;margin-inline:auto} .zfr-car-page{max-width:1120px;margin:0 auto;padding:28px 20px 60px} @media (max-width:900px){ .zfr-car-page{padding:16px 16px 44px} } /* header */ .zfr-cv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px} .zfr-cv-name{font:700 27px/1.1 var(--zfr-font);letter-spacing:-.03em;color:var(--zfr-ink);margin:0} .zfr-cv-or{font-size:13px;color:var(--zfr-muted);margin-top:5px;display:flex;align-items:center;gap:6px} .zfr-cv-q{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--zfr-field);border:1px solid var(--zfr-line);font:700 11px/1 var(--zfr-font);color:var(--zfr-muted);cursor:help} .zfr-cv-chips{display:flex;gap:8px;flex-wrap:wrap} .zfr-cv-chip{font:600 12px/1 var(--zfr-font);padding:8px 12px;border-radius:999px;background:var(--zfr-field);color:var(--zfr-text);border:1px solid var(--zfr-line);white-space:nowrap} .zfr-cv-chip.is-accent{background:rgba(10,108,255,.1);color:var(--zfr-azure-600);border-color:rgba(10,108,255,.25)} /* photo */ .zfr-cv-photo{position:relative;border-radius:18px;overflow:hidden;background:var(--zfr-field);border:1px solid var(--zfr-line);aspect-ratio:16/9;display:grid;place-items:center;margin-bottom:16px} .zfr-cv-photo img{width:100%;height:100%;object-fit:cover;display:block} .zfr-cv-photo-empty{font:700 64px/1 var(--zfr-font);color:var(--zfr-muted);opacity:.45} .zfr-cv-ribbon{position:absolute;left:0;bottom:14px;background:var(--zfr-grad);color:#fff;font:700 12px/1 var(--zfr-font);letter-spacing:.02em;padding:9px 16px 9px 14px;border-radius:0 999px 999px 0;box-shadow:var(--zfr-shadow)} /* ── Photo gallery: thumbnail strip, zoom button, lightbox ── */ .zfr-cv-photo-wrap{margin-bottom:16px} .zfr-cv-photo-wrap .zfr-cv-photo{margin-bottom:0;cursor:zoom-in} .zfr-cv-photo-zoom{position:absolute;right:12px;top:12px;width:38px;height:38px;border:0;border-radius:12px;background:rgba(11,27,51,.55);color:#fff;font:700 20px/1 var(--zfr-font);display:grid;place-items:center;cursor:pointer;transition:background .16s var(--zfr-ease),transform .16s var(--zfr-spring)} .zfr-cv-photo-zoom:hover{background:rgba(11,27,51,.82);transform:scale(1.05)} .zfr-cv-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch} .zfr-cv-thumb{flex:0 0 auto;width:66px;height:50px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--zfr-field);cursor:pointer;transition:border-color .16s var(--zfr-ease),transform .16s var(--zfr-spring)} .zfr-cv-thumb img{width:100%;height:100%;object-fit:cover;display:block} .zfr-cv-thumb:hover{transform:translateY(-2px)} .zfr-cv-thumb.is-active{border-color:var(--zfr-azure)} .zfr-lightbox{position:fixed;inset:0;z-index:100000;background:rgba(6,16,31,.92);display:grid;place-items:center;padding:24px;cursor:zoom-out} .zfr-lightbox img{max-width:90vw;max-height:82vh;border-radius:14px;box-shadow:var(--zfr-shadow-lg);cursor:default} .zfr-lb-close,.zfr-lb-nav{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;border-radius:999px;display:grid;place-items:center;transition:background .16s var(--zfr-ease)} .zfr-lb-close:hover,.zfr-lb-nav:hover{background:rgba(255,255,255,.28)} .zfr-lb-close{top:18px;right:18px;width:42px;height:42px;font-size:26px;line-height:1} .zfr-lb-nav{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:30px;line-height:1} .zfr-lb-nav.prev{left:18px} .zfr-lb-nav.next{right:18px} .zfr-lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);font:600 13px/1 var(--zfr-font)} /* spec tiles */ .zfr-cv-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px} .zfr-cv-tile{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--zfr-line);border-radius:14px;background:var(--zfr-surface)} .zfr-cv-tile-ic{width:34px;height:34px;border-radius:10px;background:rgba(10,108,255,.1);flex:none;display:grid;place-items:center;font-size:16px;line-height:1} .zfr-cv-tile-ic[data-ic="gear"]::before{content:"\2699"} .zfr-cv-tile-ic[data-ic="cal"]::before{content:"\1F4C5"} .zfr-cv-tile-ic[data-ic="users"]::before{content:"\1F465"} .zfr-cv-tile-ic[data-ic="fuel"]::before{content:"\26FD"} .zfr-cv-tile-tx{display:flex;flex-direction:column;min-width:0} .zfr-cv-tile-tx strong{font:600 13px/1.25 var(--zfr-font);color:var(--zfr-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zfr-cv-tile-tx em{font:500 11px/1 var(--zfr-font);color:var(--zfr-muted);font-style:normal;margin-top:4px} /* all specifications */ .zfr-cv-specs{border:1px solid var(--zfr-line);border-radius:16px;background:var(--zfr-surface);margin-bottom:16px;overflow:hidden} .zfr-cv-specs summary{list-style:none;cursor:pointer;padding:15px 18px;font:600 15px/1 var(--zfr-font);color:var(--zfr-ink);display:flex;align-items:center;gap:10px} .zfr-cv-specs summary::-webkit-details-marker{display:none} .zfr-cv-caret{width:9px;height:9px;border-right:2px solid var(--zfr-muted);border-bottom:2px solid var(--zfr-muted);transform:rotate(45deg);transition:transform .25s var(--zfr-ease);margin-left:auto;margin-right:3px} .zfr-cv-specs[open] .zfr-cv-caret{transform:rotate(225deg)} .zfr-cv-specs-less{display:none} .zfr-cv-specs[open] .zfr-cv-specs-more{display:none} .zfr-cv-specs[open] .zfr-cv-specs-less{display:inline} .zfr-cv-specgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;padding:2px 18px 16px} .zfr-cv-spec{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--zfr-line);font-size:13.5px} .zfr-cv-spec span{color:var(--zfr-muted)} .zfr-cv-spec strong{color:var(--zfr-ink);font-weight:600;text-align:right} .zfr-cv-desc{font-size:14px;line-height:1.65;color:var(--zfr-text);margin:0 0 16px} /* sections */ .zfr-cv-sec{margin-bottom:16px} .zfr-cv-sec h3{font:700 17px/1.2 var(--zfr-font);letter-spacing:-.02em;color:var(--zfr-ink);margin:0 0 10px} .zfr-cv-sechead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .zfr-cv-sechead h3{margin:0} .zfr-cv-sechelp{font-size:13px;color:var(--zfr-muted);margin:0 0 12px} /* element+class specificity so theme button rules can't repaint it red */ button.zfr-cv-edit{width:36px;height:36px;border-radius:10px;border:1px solid var(--zfr-line);background:var(--zfr-surface);color:var(--zfr-azure);cursor:pointer;font-size:16px;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s,transform .2s var(--zfr-spring)} button.zfr-cv-edit:hover{background:rgba(10,108,255,.1);color:var(--zfr-azure);border-color:rgba(10,108,255,.3);transform:translateY(-1px)} /* place & time of rental */ .zfr-cv-when{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--zfr-field);border:1px solid var(--zfr-line);border-radius:16px;padding:15px 17px;cursor:pointer;transition:border-color .15s,background-color .15s} .zfr-cv-when:hover{border-color:#B9C6DA;background:#EEF3F9} .zfr-cv-when-col{display:flex;flex-direction:column;gap:4px;min-width:0} .zfr-cv-when-col + .zfr-cv-when-col{border-left:1px solid var(--zfr-line);padding-left:17px} .zfr-cv-when-label{font:600 11px/1 var(--zfr-font);letter-spacing:.07em;text-transform:uppercase;color:var(--zfr-muted)} .zfr-cv-when-loc{font:600 14.5px/1.35 var(--zfr-font);color:var(--zfr-ink)} .zfr-cv-when-when{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .zfr-cv-when-day{font:700 15px/1 var(--zfr-font);color:var(--zfr-ink)} .zfr-cv-when-dow{font-size:12px;color:var(--zfr-muted)} .zfr-cv-when-time{font:700 15px/1 var(--zfr-font);color:var(--zfr-azure);margin-left:auto} .zfr-cv-when-when[data-empty] .zfr-cv-when-day{color:var(--zfr-muted);font-weight:600} .zfr-cv-when-hint{font-size:12.5px;color:var(--zfr-muted)} /* inline date editor */ .zfr-cv-dateedit{margin-top:12px;border:1px solid rgba(10,108,255,.3);border-radius:16px;padding:14px;background:rgba(10,108,255,.04);animation:zfr-step-in .25s var(--zfr-ease) both} .zfr-cv-dateedit[hidden]{display:none} .zfr-cv-dateedit-note{margin-top:10px;font:600 13px/1.45 var(--zfr-font);padding:11px 13px;border-radius:11px;background:rgba(245,158,11,.15);color:#8A5A05} /* Place selectors sit above the calendar inside the editor — same field styling as the search/location selects everywhere else. */ .zfr-cv-locs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px} .zfr-cv-locfield{display:flex;flex-direction:column;gap:6px;min-width:0} .zfr-cv-locfield>span{font:700 11px/1 var(--zfr-font);color:var(--zfr-muted);text-transform:uppercase;letter-spacing:.06em} .zfr-cv-locfield select{width:100%;box-sizing:border-box;padding:11px 38px 11px 13px;border:1px solid var(--zfr-line);border-radius:12px;background-color:var(--zfr-field);color:var(--zfr-ink);font:600 14px/1.35 var(--zfr-font);appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%2366788F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;transition:border-color .15s,box-shadow .15s} .zfr-cv-locfield select:hover{border-color:#B9C6DA} .zfr-cv-locfield select:focus{outline:none;border-color:var(--zfr-azure);box-shadow:var(--zfr-ring)} /* insurance */ .zfr-cv-insurance{display:flex;gap:14px;align-items:flex-start;background:rgba(18,183,176,.08);border:1px solid rgba(18,183,176,.3);border-radius:16px;padding:16px} .zfr-cv-ins-ic{font-size:22px;line-height:1.4} .zfr-cv-insurance strong{font:700 14px/1 var(--zfr-font);color:var(--zfr-ink);display:block;margin-bottom:6px} .zfr-cv-insurance p{margin:0;font-size:13.5px;line-height:1.6;color:var(--zfr-text)} /* insurance plan cards (v2.28.0) — renter picks exactly ONE */ .zfr-cv-insplans{display:flex;flex-direction:column;gap:10px} .zfr-cv-ins{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;border:1px solid var(--zfr-line);border-radius:14px;background:var(--zfr-surface);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s} .zfr-cv-ins:hover{border-color:#c9d4e4} .zfr-cv-ins input{width:18px;height:18px;accent-color:var(--zfr-azure);flex:none;cursor:pointer;margin:1px 0 0} .zfr-cv-ins.is-on{border-color:var(--zfr-azure);background:rgba(10,108,255,.06);box-shadow:0 0 0 3px rgba(10,108,255,.12)} .zfr-cv-ins.is-free.is-on{border-color:var(--zfr-teal);background:rgba(18,183,176,.07);box-shadow:0 0 0 3px rgba(18,183,176,.14)} .zfr-cv-ins-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px} .zfr-cv-ins-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline} .zfr-cv-ins-top strong{font:600 14px/1.3 var(--zfr-font);color:var(--zfr-ink)} .zfr-cv-ins-price{font:600 13.5px/1.3 var(--zfr-font);color:var(--zfr-text);font-style:normal;white-space:nowrap} .zfr-cv-ins-price.is-free{color:var(--zfr-teal);font-weight:700} .zfr-cv-ins-cov{font:400 12.5px/1.55 var(--zfr-font);color:var(--zfr-muted)} /* extras */ .zfr-cv-extras{display:flex;flex-direction:column;gap:10px} .zfr-cv-extra{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--zfr-line);border-radius:14px;background:var(--zfr-surface);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s} .zfr-cv-extra:hover{border-color:#c9d4e4} .zfr-cv-extra input{width:18px;height:18px;accent-color:var(--zfr-azure);flex:none;cursor:pointer;margin:0} .zfr-cv-extra:has(input:checked){border-color:var(--zfr-azure);background:rgba(10,108,255,.06);box-shadow:0 0 0 3px rgba(10,108,255,.12)} .zfr-cv-extra-body{display:flex;justify-content:space-between;gap:12px;flex:1;min-width:0;align-items:center} .zfr-cv-extra-body strong{font:600 14px/1.3 var(--zfr-font);color:var(--zfr-ink)} .zfr-cv-extra-body em{font:600 13.5px/1.3 var(--zfr-font);color:var(--zfr-muted);font-style:normal;white-space:nowrap} /* ── money rail ── */ .zfr-car-rail{position:sticky;top:4px;display:flex;flex-direction:column;gap:14px;min-width:0} .zfr-cv-total{background:var(--zfr-field);border:1px solid var(--zfr-line);border-radius:18px;padding:18px} .zfr-cv-total-label{font:600 12px/1 var(--zfr-font);letter-spacing:.05em;text-transform:uppercase;color:var(--zfr-muted)} .zfr-cv-total-num{display:block;font:700 34px/1.1 var(--zfr-font);letter-spacing:-.03em;color:var(--zfr-ink);margin-top:9px;font-variant-numeric:tabular-nums} .zfr-cv-total-sub{display:block;font-size:13px;color:var(--zfr-muted);margin-top:6px} .zfr-cv-total-num.zfr-tick{animation:zfr-tick .5s var(--zfr-spring)} .zfr-cv-edit:focus-visible,.zfr-cv-continue:focus-visible,.zfr-cv-extra input:focus-visible, .zfr-cv-specs summary:focus-visible,.zfr-ovl-x:focus-visible,.zfr-btn:focus-visible{outline:2px solid var(--zfr-azure);outline-offset:2px;border-radius:8px} .zfr-cv-break{border:1px solid var(--zfr-line);border-radius:18px;padding:5px 18px 16px;background:var(--zfr-surface)} .zfr-cv-brow{display:flex;justify-content:space-between;gap:14px;padding:12px 0;font-size:14px;border-bottom:1px solid var(--zfr-line)} .zfr-cv-brow span{color:var(--zfr-text)} .zfr-cv-brow strong{color:var(--zfr-ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} .zfr-cv-brow.is-discount span,.zfr-cv-brow.is-discount strong{color:var(--zfr-success)} .zfr-cv-break-total{display:flex;justify-content:space-between;gap:14px;padding-top:14px;font:700 16px/1 var(--zfr-font);color:var(--zfr-ink)} .zfr-cv-break-total strong{font-variant-numeric:tabular-nums} .zfr-cv-break-empty{font-size:13.5px;line-height:1.6;color:var(--zfr-muted);padding:15px 0} .zfr-cv-continue{height:52px;font-size:15px} .zfr-cv-continue:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none} .zfr-cv-avail{font:600 13px/1.5 var(--zfr-font);padding:11px 14px;border-radius:12px;background:rgba(245,158,11,.15);color:#8A5A05;border:1px solid rgba(245,158,11,.35)} .zfr-cv-avail[hidden]{display:none} .zfr-cv-pay{border:1px solid var(--zfr-line);border-radius:18px;padding:16px 18px;background:var(--zfr-field)} .zfr-cv-pay-row{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:14px;color:var(--zfr-text)} .zfr-cv-pay-row em{font-style:normal;color:var(--zfr-muted);font-size:12.5px} .zfr-cv-pay-row strong{font:700 17px/1 var(--zfr-font);color:var(--zfr-ink);font-variant-numeric:tabular-nums;white-space:nowrap} .zfr-cv-pay-note{font-size:12.5px;line-height:1.55;color:var(--zfr-muted);margin:9px 0 0} /* ── Mobile sticky action bar (≤560px) ── */ .zfr-cv-mbar{display:none} @media (max-width:560px){ .zfr-cv-mbar{display:flex;align-items:center;justify-content:space-between;gap:14px;position:fixed;left:0;right:0;bottom:0;z-index:4;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--zfr-surface);border-top:1px solid var(--zfr-line);box-shadow:0 -8px 24px rgba(11,27,51,.10)} .zfr-cv-mbar-l{display:flex;flex-direction:column;gap:3px;min-width:0} .zfr-cv-mbar-label{font:600 11px/1 var(--zfr-font);letter-spacing:.05em;text-transform:uppercase;color:var(--zfr-muted)} .zfr-cv-mbar-total{font:700 22px/1 var(--zfr-font);color:var(--zfr-ink);font-variant-numeric:tabular-nums} .zfr-cv-mbar .zfr-cv-continue{height:46px;padding:0 28px;width:auto;flex:none} .zfr-car-rail .zfr-cv-continue{display:none} /* the sticky bar replaces it */ .zfr-ovl-body,.zfr-car-page{padding-bottom:96px} /* clearance so content clears the bar */ } @media (max-width:900px){ .zfr-car{grid-template-columns:1fr;gap:18px} .zfr-car-rail{position:static} .zfr-cv-tiles{grid-template-columns:repeat(2,1fr)} .zfr-cv-when{grid-template-columns:1fr} .zfr-cv-locs{grid-template-columns:1fr} .zfr-cv-when-col + .zfr-cv-when-col{border-left:none;border-top:1px solid var(--zfr-line);padding-left:0;padding-top:13px} .zfr-cv-when-time{margin-left:0} .zfr-cv-specgrid{grid-template-columns:1fr} .zfr-cv-name{font-size:23px} } /* ---------- Motion preferences ---------- */ @media (prefers-reduced-motion:reduce){ .js-reveal .zfr-card,.js-reveal .zfr-vcard,.js-reveal .zfr-avail-row{opacity:1!important;transform:none!important} .zfr-btn,.zfr-avail-row,.zfr-avail-img img,.zfr-tab-pill,.zfr-form-row input,.zfr-vcard,.zfr-cal-cell,.zfr-cv-thumb,.zfr-cv-photo-zoom,.zfr-datebtn,.zfr-datebtn-chev{transition:none!important} .zfr-sb-panel,.zfr-cal-pop,.zfr-vd-total.zfr-tick,.zfr-cv-total-num.zfr-tick,.zfr-ovl-dialog,.zfr-ovl-backdrop,.zfr-ovl-x,.zfr-step.is-active,.zfr-cv-dateedit{animation:none!important} .zfr-avail-results.is-loading::after{animation-duration:1.4s} } /* ========================================================================== LANDING-PAGE BUILDING BLOCKS (v3.2) � carousel, search page, widgets ========================================================================== */ /* ---------- [zfr_fleet layout="slider"] � scroll-snap carousel ---------- */ .zfr-slider{position:relative} .zfr-slider-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 16px;scrollbar-width:thin;scrollbar-color:var(--zfr-line) transparent} .zfr-slider-track>*{flex:0 0 clamp(258px,31%,336px);scroll-snap-align:start;min-width:0} .zfr-slider-nav{position:absolute;top:calc(50% - 24px);translate:0 -50%;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--zfr-line);background:var(--zfr-surface);color:var(--zfr-ink);font-size:26px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:var(--zfr-shadow);transition:background .2s,color .2s,opacity .2s} .zfr-slider-nav:hover{background:var(--zfr-azure);color:#fff;border-color:var(--zfr-azure)} .zfr-slider-nav.is-prev{left:-14px} .zfr-slider-nav.is-next{right:-14px} .zfr-slider-nav:disabled{opacity:0;pointer-events:none} @media (max-width:640px){ .zfr-slider-track>*{flex-basis:82%} .zfr-slider-nav{display:none} } /* ---------- [zfr_search] � filter card + results ---------- */ .zfr-sform{display:flex;flex-direction:column;gap:16px} .zfr-sf-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end} .zfr-sf-field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 160px} .zfr-sf-type{flex:0 1 auto} /* The segmented control collapses to its min-content inside an auto-width flex item (flex:1 basis:0 tabs) — give it real room to breathe. */ .zfr-sf-type .zfr-type-tabs{min-width:292px} .zfr-sf-dates{flex:2 1 300px} .zfr-sf-field>label{font:600 12px/1 var(--zfr-font);letter-spacing:.04em;text-transform:uppercase;color:var(--zfr-muted)} .zfr-sf-field>label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;font-size:11.5px;opacity:.85} .zfr-sf-field select{height:46px;border:1px solid var(--zfr-line);border-radius:12px;background-color:var(--zfr-surface);color:var(--zfr-ink);font:600 14px/1 var(--zfr-font);padding:0 36px 0 13px;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 13px center} .zfr-sf-field select:focus{outline:none;border-color:var(--zfr-azure);box-shadow:var(--zfr-ring)} .zfr-sf-go{flex:0 0 auto;height:46px;padding:0 30px} .zfr-sf-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:28px 0 16px} .zfr-sf-head .zfr-section-title{margin:0} .zfr-sf-clear{font:600 13.5px/1 var(--zfr-font);color:var(--zfr-azure)} .zfr-sf-clear:hover{text-decoration:underline} @media (max-width:640px){ .zfr-sf-field,.zfr-sf-type,.zfr-sf-dates{flex:1 1 100%} .zfr-sf-go{width:100%} } /* ---------- [zfr_stats] ---------- */ .zfr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .zfr-stat-tile{background:var(--zfr-surface);border:1px solid var(--zfr-line);border-radius:18px;padding:22px 18px;box-shadow:var(--zfr-shadow);text-align:center} .zfr-stat-tile strong{display:block;font:700 30px/1 var(--zfr-font);letter-spacing:-.02em;color:var(--zfr-ink);font-variant-numeric:tabular-nums} .zfr-stat-tile span{display:block;margin-top:7px;font-size:13.5px;line-height:1.4;color:var(--zfr-muted)} @media (max-width:760px){.zfr-stats{grid-template-columns:repeat(2,1fr)}} /* ---------- [zfr_locations] ---------- */ .zfr-loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px} .zfr-loc-card{display:flex;flex-direction:column;gap:4px;background:var(--zfr-surface);border:1px solid var(--zfr-line);border-radius:16px;padding:16px;box-shadow:var(--zfr-shadow-sm);text-decoration:none;transition:border-color .2s,transform .25s var(--zfr-spring),box-shadow .25s} .zfr-loc-card:hover{border-color:rgba(10,108,255,.4);transform:translateY(-2px);box-shadow:var(--zfr-shadow)} .zfr-loc-ic{font-size:20px;line-height:1} .zfr-loc-card strong{font:700 15px/1.25 var(--zfr-font);color:var(--zfr-ink)} .zfr-loc-card em{font-style:normal;font-size:12.5px;color:var(--zfr-muted)} /* ---------- [zfr_how_it_works] ---------- */ .zfr-steps4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .zfr-step-card{background:var(--zfr-surface);border:1px solid var(--zfr-line);border-radius:18px;padding:22px 20px;box-shadow:var(--zfr-shadow-sm)} .zfr-step-num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--zfr-grad);color:#fff;font:700 15px/1 var(--zfr-font);margin-bottom:12px} .zfr-step-card strong{font:700 16px/1.3 var(--zfr-font);color:var(--zfr-ink)} .zfr-step-card p{margin:7px 0 0;font-size:13.5px;line-height:1.6;color:var(--zfr-muted)} @media (max-width:900px){.zfr-steps4{grid-template-columns:repeat(2,1fr)}} @media (max-width:540px){.zfr-steps4{grid-template-columns:1fr}} /* ---------- [zfr_cta] ---------- */ .zfr-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;background:var(--zfr-grad);border-radius:24px;padding:34px 36px;box-shadow:var(--zfr-shadow)} .zfr-cta-txt h3{margin:0;font:700 24px/1.2 var(--zfr-font);letter-spacing:-.02em;color:#fff} .zfr-cta-txt p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.9);max-width:56ch} .zfr-cta-btn{flex:none;display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 28px;border-radius:14px;background:#fff;color:var(--zfr-azure);font:700 15px/1 var(--zfr-font);text-decoration:none;box-shadow:0 10px 24px -10px rgba(6,16,31,.45);transition:transform .25s var(--zfr-spring),box-shadow .25s} .zfr-cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(6,16,31,.5)} @media (max-width:560px){.zfr-cta{padding:26px 22px}.zfr-cta-txt h3{font-size:20px}.zfr-cta-btn{width:100%;justify-content:center}} /* ---------- [zfr_contact] ---------- */ .zfr-contact h3{margin:0 0 12px;font:700 17px/1.25 var(--zfr-font);color:var(--zfr-ink)} .zfr-contact-rows{display:flex;flex-direction:column;gap:9px} .zfr-contact-rows a{display:inline-flex;align-items:center;gap:9px;font:600 14.5px/1.4 var(--zfr-font);color:var(--zfr-text);text-decoration:none} .zfr-contact-rows a:hover{color:var(--zfr-azure)} .zfr-contact-rows a span{font-size:15px;line-height:1} .zfr-contact-addr{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--zfr-line);font-size:13px;color:var(--zfr-muted)} /* ---------- Motion preferences (new blocks) ---------- */ @media (prefers-reduced-motion:reduce){ .zfr-slider-track{scroll-behavior:auto} .zfr-loc-card,.zfr-cta-btn,.zfr-slider-nav{transition:none!important} } /* ========================================================================== RECEIPT — the order screen after Place order (popup, full page and gateway return all render the same [data-zfr-receipt] markup). Paper-like surface, dashed rules, tabular numbers. No glass. ========================================================================== */ .zfr-receipt{ background:var(--zfr-surface);border:1px solid var(--zfr-line);border-radius:20px; box-shadow:var(--zfr-shadow);padding:26px 28px 24px;max-width:760px;margin:0 auto; color:var(--zfr-text);font-size:14.5px; } .zfr-receipt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:18px;border-bottom:2px solid var(--zfr-ink)} .zfr-receipt-brand{display:flex;align-items:center;gap:12px;min-width:0} .zfr-receipt-mark{width:44px;height:44px;border-radius:13px;background:var(--zfr-azure);color:#FFF;display:grid;place-items:center;font:800 15px/1 var(--zfr-font);letter-spacing:.03em;flex:none} /* Site wordmark (background-image set inline; a failed load silently falls back to the white tile — no broken-image icon, prints with the receipt). */ .zfr-receipt-mark.is-logo{width:64px;background-color:#fff;background-size:contain;background-repeat:no-repeat;background-position:center;color:transparent;letter-spacing:0} .zfr-receipt-brand-t{display:flex;flex-direction:column;gap:2px;min-width:0} .zfr-receipt-brand-t strong{font:700 17px/1.2 var(--zfr-font);color:var(--zfr-ink);letter-spacing:-.02em} .zfr-receipt-brand-t em{font:500 12.5px/1.3 var(--zfr-font);color:var(--zfr-muted);font-style:normal} .zfr-receipt-kind{display:flex;align-items:center;gap:8px;flex:none} .zfr-receipt-tag{font:800 11px/1 var(--zfr-font);letter-spacing:.14em;color:var(--zfr-azure);background:rgba(10,108,255,.1);border:1px solid rgba(10,108,255,.3);padding:7px 10px;border-radius:8px} .zfr-receipt-pill{font:700 12px/1 var(--zfr-font);padding:7px 11px;border-radius:999px;color:var(--zfr-ink)} .zfr-receipt-pill.is-confirmed{background:rgba(18,183,176,.14);border:1px solid rgba(18,183,176,.5)} .zfr-receipt-pill.is-pending{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.5)} .zfr-receipt-pill.is-active{background:rgba(10,108,255,.1);border:1px solid rgba(10,108,255,.4)} .zfr-receipt-pill.is-completed{background:var(--zfr-field);border:1px solid var(--zfr-line);color:var(--zfr-muted)} .zfr-receipt-pill.is-cancelled{background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.45)} .zfr-receipt-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px 0;border-bottom:1px dashed var(--zfr-line)} .zfr-receipt-meta>div{display:flex;flex-direction:column;gap:3px;min-width:0} .zfr-receipt-meta span{font:700 10.5px/1 var(--zfr-font);letter-spacing:.1em;text-transform:uppercase;color:var(--zfr-muted)} .zfr-receipt-meta strong{font:700 15px/1.3 var(--zfr-font);color:var(--zfr-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .zfr-receipt-meta em{font:500 12.5px/1.3 var(--zfr-font);font-style:normal;color:var(--zfr-muted)} .zfr-receipt-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px 0;border-bottom:1px dashed var(--zfr-line)} .zfr-receipt-cols>div{display:flex;flex-direction:column;gap:3px;min-width:0} .zfr-receipt-lbl{font:700 10.5px/1 var(--zfr-font);letter-spacing:.1em;text-transform:uppercase;color:var(--zfr-muted);margin-bottom:3px} .zfr-receipt-cols strong{font:700 15px/1.35 var(--zfr-font);color:var(--zfr-ink)} .zfr-receipt-cols span:not(.zfr-receipt-lbl){font:500 13.5px/1.45 var(--zfr-font);color:var(--zfr-text);overflow-wrap:anywhere} .zfr-receipt-route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:16px 0;border-bottom:1px dashed var(--zfr-line)} .zfr-receipt-stop{display:flex;flex-direction:column;gap:3px;min-width:0} .zfr-receipt-stop strong{font:700 15px/1.35 var(--zfr-font);color:var(--zfr-ink)} .zfr-receipt-stop>span:not(.zfr-receipt-lbl){font:500 13.5px/1.45 var(--zfr-font);color:var(--zfr-text);font-variant-numeric:tabular-nums} .zfr-receipt-arrow{width:34px;height:34px;border-radius:50%;background:var(--zfr-field);border:1px solid var(--zfr-line);display:grid;place-items:center;color:var(--zfr-azure);font-size:15px;flex:none} .zfr-receipt-lines{width:100%;border-collapse:collapse;margin-top:4px} .zfr-receipt-lines td{padding:11px 0;border-bottom:1px dashed var(--zfr-line);vertical-align:top} .zfr-receipt-lines td:first-child span{display:block;font:600 14.5px/1.4 var(--zfr-font);color:var(--zfr-ink)} .zfr-receipt-lines td:first-child em{display:block;font:500 12.5px/1.45 var(--zfr-font);font-style:normal;color:var(--zfr-muted);font-variant-numeric:tabular-nums;margin-top:2px} .zfr-receipt-lines td:last-child{text-align:right;font:600 14.5px/1.4 var(--zfr-font);color:var(--zfr-ink);font-variant-numeric:tabular-nums;white-space:nowrap} .zfr-receipt-lines tr:last-child td{border-bottom:0} .zfr-receipt-lines tr.is-discount td:last-child{color:var(--zfr-success)} .zfr-receipt-lines tr.zfr-receipt-total td{border-top:2px solid var(--zfr-ink);border-bottom:0;padding-top:14px;font:800 17px/1.2 var(--zfr-font)!important;color:var(--zfr-ink)!important} .zfr-receipt-lines tr.zfr-receipt-total td:last-child{font-size:21px!important} .zfr-receipt-lines tr.is-paid td,.zfr-receipt-lines tr.is-paid td:last-child{color:var(--zfr-success)} .zfr-receipt-lines tr.zfr-receipt-balance td:last-child{font-weight:800;color:var(--zfr-ink)!important} .zfr-receipt-deposit{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:13px 15px;background:rgba(18,183,176,.08);border:1px solid rgba(18,183,176,.35);border-radius:13px;font:600 13px/1.45 var(--zfr-font);color:var(--zfr-text)} .zfr-receipt-deposit strong{font:800 16px/1 var(--zfr-font);color:var(--zfr-ink);font-variant-numeric:tabular-nums;white-space:nowrap} .zfr-receipt-note{margin-top:12px;padding:12px 14px;border-radius:13px;font:600 13px/1.5 var(--zfr-font);background:var(--zfr-field);border:1px solid var(--zfr-line);color:var(--zfr-text)} .zfr-receipt-note.is-verify{background:rgba(10,108,255,.06);border-color:rgba(10,108,255,.3)} .zfr-receipt-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:18px;border-top:1px dashed var(--zfr-line)} .zfr-receipt-thanks{display:flex;flex-direction:column;gap:3px;min-width:220px;flex:1 1 260px} .zfr-receipt-thanks strong{font:700 15px/1.35 var(--zfr-font);color:var(--zfr-ink)} .zfr-receipt-thanks span{font:500 12.5px/1.55 var(--zfr-font);color:var(--zfr-muted)} .zfr-receipt-thanks a{color:var(--zfr-azure);text-decoration:underline;text-underline-offset:2px} .zfr-receipt-actions{display:flex;flex-wrap:wrap;gap:10px} @media (max-width:640px){ .zfr-receipt{padding:20px 16px 18px;border-radius:16px} .zfr-receipt-meta,.zfr-receipt-cols{grid-template-columns:1fr} .zfr-receipt-route{grid-template-columns:1fr} .zfr-receipt-arrow{transform:rotate(90deg)} .zfr-receipt-top{flex-direction:column} .zfr-receipt-foot{flex-direction:column;align-items:stretch} .zfr-receipt-actions .zfr-btn{flex:1 1 auto;justify-content:center} } /* The downloaded file wraps the receipt in body.zfr-receipt-standalone — self-styled, buttons stripped (they'd be dead without the page's JS). */ body.zfr-receipt-standalone{background:var(--zfr-field);color:var(--zfr-text);font-family:var(--zfr-font);padding:28px 14px;margin:0;-webkit-font-smoothing:antialiased} body.zfr-receipt-standalone .zfr-receipt{margin:0 auto;box-shadow:var(--zfr-shadow-lg)} body.zfr-receipt-standalone .zfr-receipt-actions,body.zfr-receipt-standalone .zfr-receipt-act{display:none!important} /* Print fallback for window.print() (the primary path prints a clean standalone window instead). Everything that doesn't hold the receipt steps aside; without :has() support the whole page prints. */ @media print{ html,body{background:#fff!important;overflow:visible!important;height:auto!important} body :where(*):not(:has(.zfr-receipt)):not(.zfr-receipt):not(.zfr-receipt *){display:none!important} .zfr-ovl,.zfr-ovl-dialog,.zfr-ovl-body{position:static!important;overflow:visible!important;max-height:none!important;height:auto!important;transform:none!important;box-shadow:none!important;backdrop-filter:none!important;background:#fff!important} .zfr-receipt{position:static!important;width:100%!important;max-width:860px!important;margin:0 auto!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important} .zfr-receipt-actions,.zfr-receipt-act{display:none!important} *{-webkit-print-color-adjust:exact;print-color-adjust:exact} } /* ========================================================================== THEME / ELEMENTOR SHIELD (keep LAST in this file) -------------------------------------------------------------------------- Elementor Site Settings and themes paint EVERY