/* RoadGo step booking flow — BEM, no build step. */
.rg-flow,.rg-summary,.rg-modal,.rg-step{font-family:inherit;color:var(--rg-ink);box-sizing:border-box}
.rg-flow *,.rg-summary *,.rg-step *{box-sizing:border-box}
:root{
  --rg-red:#e2231a;--rg-red-d:#b91c14;--rg-ink:#1a1a1a;--rg-mut:#6b7280;
  --rg-line:#e5e7eb;--rg-bg:#f7f7f8;--rg-ok:#16a34a;--rg-card:#fff;
  --rg-radius:14px;--rg-shadow:0 6px 24px rgba(0,0,0,.08);
}

/* layout wrapper */
.rg-step{max-width:1180px;margin:0 auto;padding:16px 22px 120px}
.rg-h2{font-size:22px;margin:26px 0 14px}

/* ---- Stepper ---- */
.rg-stepper{padding:14px 0 20px;display:flex;justify-content:center;margin-top:8px}
.rg-stepper__list{display:flex;align-items:flex-start;list-style:none;margin:0;padding:18px 26px;background:#fff;border-radius:var(--rg-radius);box-shadow:var(--rg-shadow);max-width:880px;width:100%}
.rg-stepper__item{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;color:#9ca3af;font-size:13px}
.rg-stepper__item:not(:last-child)::after{content:"";position:absolute;top:14px;left:50%;width:100%;height:2px;background:var(--rg-line);z-index:0}
.rg-stepper__dot{width:30px;height:30px;border-radius:50%;background:#e5e7eb;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;margin-bottom:8px;transition:.2s}
.rg-stepper__label{font-weight:600;letter-spacing:.02em;text-align:center}
.rg-stepper__item.is-done{color:var(--rg-ink)}
.rg-stepper__item.is-done::after{background:var(--rg-red)}
.rg-stepper__item.is-done .rg-stepper__dot{background:var(--rg-red)}
.rg-stepper__item.is-done .rg-stepper__dot::after{content:"";width:16px;height:16px;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.rg-stepper__item.is-active{color:var(--rg-ink)}
.rg-stepper__item.is-active .rg-stepper__dot{background:#fff;border:2px solid var(--rg-red)}
.rg-stepper__item.is-active .rg-stepper__dot::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--rg-red)}

/* ---- Params bar ---- */
.rg-params{display:flex;flex-wrap:wrap;align-items:center;gap:22px;padding:14px 22px;background:#fff;border-bottom:1px solid var(--rg-line);max-width:1180px;margin:0 auto}
.rg-params__group{display:flex;flex-direction:column;line-height:1.2}
.rg-params__lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--rg-mut)}
.rg-params__val{font-size:14px;font-weight:600}
.rg-params__group--dur .rg-params__val{color:var(--rg-red)}
.rg-params__group{gap:5px}
.rg-params__input{font-size:14px;font-weight:600;border:1px solid var(--rg-line);border-radius:8px;padding:7px 10px;background:#fff;color:var(--rg-ink);max-width:170px}
.rg-params__modify{margin-left:auto;align-self:flex-end;background:none;border:1px solid var(--rg-red);color:var(--rg-red);padding:9px 16px;border-radius:8px;font-weight:600;cursor:pointer}
.rg-params__modify:hover{background:var(--rg-red);color:#fff}
.rg-params__row{display:flex;gap:10px;align-items:flex-end}
.rg-params__row .rg-params__group:first-child{flex:1 1 auto}
.rg-params__row .rg-params__group:last-child{flex:0 0 116px}
@media(max-width:680px){.rg-params{gap:12px}.rg-params__input{max-width:none;width:100%}.rg-params__group{flex:1 1 45%}.rg-params__row{flex:1 1 100%}.rg-params__modify{margin-left:0;width:100%}}
/* Vehicle+Insurance render the params bar twice (top + bottom) — desktop keeps the top copy
 * under the header, mobile swaps to the bottom copy near the footer. Other flow pages render
 * only one unvaried copy (no --top/--bottom class) and are unaffected by these two rules. */
@media(min-width:681px){.rg-flow--bottom{display:none}}
@media(max-width:680px){.rg-flow--top{display:none}}

/* ---- Hero search form ([rg_search_form]) ---- */
.rg-search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;background:#fff;border-radius:14px;box-shadow:var(--rg-shadow);padding:18px 22px;max-width:1180px;margin:0 auto;position:relative;box-sizing:border-box}
@media(min-width:1390px){.rg-search{margin-left:0;margin-right:0}}
.rg-search *,.rg-search *::before,.rg-search *::after{box-sizing:border-box}
.rg-search__field{display:flex;flex-direction:column;gap:6px;flex:1 1 150px;min-width:0;position:relative}
.rg-search__field--time{flex:0 0 96px}
.rg-search__lbl{font-size:12px;font-weight:700;color:var(--rg-ink)}
.rg-search__input{border:1px solid var(--rg-line);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--rg-ink);background:#fff;width:100%}
.rg-search__same{font-size:13px;color:var(--rg-mut)}
.rg-search__difftog{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.rg-search__difflink{font-size:12px;font-weight:600;color:var(--rg-red);cursor:pointer;text-decoration:underline;width:max-content}
.rg-search__return-loc{display:none}
.rg-search__difftog:checked ~ .rg-search__same{display:none}
.rg-search__difftog:checked ~ .rg-search__return-loc{display:block}
.rg-search__submit{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.rg-search__duration{font-size:12px;font-weight:700;color:var(--rg-red);text-align:right;min-height:14px}
.rg-search__btn{flex:0 0 auto;background:var(--rg-red);color:#fff;border:none;border-radius:8px;padding:0 28px;min-width:160px;font-weight:700;font-size:15px;cursor:pointer;min-height:44px}
.rg-search__btn:hover{background:var(--rg-red-d)}
.rg-search__row{display:flex;gap:14px;flex:1 1 240px;align-items:flex-end}
.rg-search__input[type=date]::-webkit-datetime-edit{white-space:nowrap}
/* Homepage FAQ widget wraps in .faq-info (not theme's .faq-section) → color rule misses → text blends on white. Force dark. */
.faq-info .faq-title>a,.faq-info .card-collapse,.faq-info .card-collapse p{color:#201F1D}
@media(max-width:880px){
.rg-search{flex-direction:column;align-items:stretch;gap:12px;padding:14px}
.rg-search>.rg-search__field,.rg-search>.rg-search__row{flex:0 0 auto}/* column ctx: basis=height, reset so 150/240px basis no inflate row gap */
.rg-search__field--time{flex:1 1 auto}
.rg-search__row{gap:8px;min-height:0}/* iOS Safari: .rg-search__row is itself a flex item AND a flex container — after the parent's row->column switch it can keep flex items' default min-height:auto floor, showing as empty space above the row. Chromium doesn't reproduce this, WebKit does. */
.rg-search__field{min-height:0}
.rg-search__row .rg-search__field--time{flex:0 0 92px}
.rg-search__row .rg-search__field--time .rg-search__input{padding-right:28px;background-position:right 8px center}
.rg-search__submit{width:100%}
.rg-search__btn{width:100%;padding:13px;min-width:0}
.section-search .search-box-banner{padding:16px}}

/* ---- Vehicle card booking widget ([rg_book_button] inside single rental) ---- */
.rg-vbook{background:#fff;border:1px solid var(--rg-line);border-radius:14px;box-shadow:var(--rg-shadow);padding:20px;box-sizing:border-box}
.rg-vbook *,.rg-vbook *::before,.rg-vbook *::after{box-sizing:border-box}
.rg-vbook__rate{display:flex;align-items:baseline;gap:6px;margin-bottom:16px}
.rg-vbook__rate strong{font-size:26px;color:var(--rg-ink)}
.rg-vbook__rate span{font-size:14px;color:var(--rg-mut)}
.rg-vbook__params{display:flex;flex-direction:column;gap:12px}
.rg-vbook__row{display:flex;gap:10px}
.rg-vbook__field{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-width:0;font-size:12px;font-weight:700;color:var(--rg-ink)}
.rg-vbook__field--t{flex:0 0 96px}
.rg-vbook__input{border:1px solid var(--rg-line);border-radius:8px;padding:10px 12px;font-size:14px;font-weight:400;color:var(--rg-ink);background:#fff;width:100%}
.rg-vbook__update{align-self:flex-start;background:transparent;border:none;color:var(--rg-red);font-weight:600;font-size:13px;text-decoration:underline;cursor:pointer;padding:0}
.rg-vbook__est{display:flex;justify-content:space-between;align-items:center;margin:16px 0;padding-top:14px;border-top:1px solid var(--rg-line);font-size:14px;color:var(--rg-mut)}
.rg-vbook__est strong{font-size:20px;color:var(--rg-ink)}
.rg-vbook .rg-book{display:block;text-align:center;background:var(--rg-red);color:#fff;border-radius:8px;padding:14px;font-weight:700;font-size:16px;text-decoration:none}
.rg-vbook .rg-book:hover{background:var(--rg-red-d);color:#fff}
.rg-book--unavailable,.rg-book--unavailable:hover{background:#e5e7eb!important;border-color:#e5e7eb!important;color:#6b7280!important;cursor:not-allowed!important;opacity:1!important}

/* iOS Safari fix: native date/time inputs ignore width:100% without appearance reset → overflow + h-scroll. Restore calendar/clock glyph via bg-icon. font 16px stops focus-zoom. */
.rg-search__input,.rg-vbook__input,.rg-params__input{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;position:relative}
.rg-search__input[type=date],.rg-search__input[type=time],.rg-vbook__input[type=date],.rg-vbook__input[type=time],.rg-params__input[type=date],.rg-params__input[type=time]{min-height:42px;background-repeat:no-repeat;background-position:right 3px center;background-size:14px;padding-right:20px}
.rg-search__input[type=date],.rg-vbook__input[type=date],.rg-params__input[type=date]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>")}
.rg-search__input[type=time],.rg-vbook__input[type=time],.rg-params__input[type=time]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15 14'/></svg>")}
.rg-search__input::-webkit-date-and-time-value,.rg-params__input::-webkit-date-and-time-value{text-align:left}
/* picker glyph: transparent clickzone over right icon area only (not full field) — sub-fields stay clickable for inline edit, value not overlapped, no double icon */
.rg-search__input::-webkit-calendar-picker-indicator,.rg-vbook__input::-webkit-calendar-picker-indicator,.rg-params__input::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:22px;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
@media(max-width:880px){
.rg-search__input,.rg-vbook__input,.rg-params__input{font-size:16px}
/* iOS Safari: native type=date control's intrinsic box can render taller than our min-height
 * asks for (min-height is a floor, not a cap) — shows as blank space above the row. Force a
 * hard height + clip so iOS can't inflate it, instead of only setting a minimum. */
.rg-search__input[type=date],.rg-search__input[type=time]{height:44px;min-height:0;overflow:hidden}
/* same AM/PM-vs-icon clash the hero search already fixed (.rg-search__row .rg-search__field--time)
 * — vehicle-widget and params-bar time inputs never got the wider clearance. */
.rg-vbook__field--t .rg-vbook__input,.rg-params__row .rg-params__group:last-child .rg-params__input{padding-right:28px;background-position:right 8px center}
}

/* ---- /fleet filters: collapse behind a toggle on mobile (CSS-only) ---- */
.rg-filtoggle{display:none}
@media(max-width:991px){
.rg-filtoggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:#fff;border:1px solid var(--rg-line);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-weight:700;font-size:15px;color:var(--rg-ink);cursor:pointer}
.rg-filtoggle::after{content:"\25BE";font-size:13px;transition:transform .2s}
.rg-filtoggle-cb:checked ~ .rg-filtoggle::after{transform:rotate(180deg)}
#filterForm{display:none}
.rg-filtoggle-cb:checked ~ #filterForm{display:block}
}

/* ---- Sticky summary ---- */
.rg-summary{position:sticky;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--rg-line);box-shadow:0 -4px 18px rgba(0,0,0,.06)}
.rg-summary__inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:14px 22px}
.rg-summary__total{font-size:18px}
.rg-summary__total strong{font-size:20px}
.rg-summary__details{background:none;border:none;color:var(--rg-red);text-decoration:underline;cursor:pointer;font-size:13px}
.rg-summary__cta{margin-left:auto;background:var(--rg-red);color:#fff;border:none;padding:13px 40px;border-radius:8px;font-weight:700;cursor:pointer}
.rg-summary__cta:hover{background:var(--rg-red-d)}
.rg-summary__cta:disabled{opacity:.5;cursor:not-allowed}
.rg-form__actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.rg-form__btn-pay{margin-left:0;width:100%}
.rg-btn--outline{background:#fff;color:var(--rg-red);border:2px solid var(--rg-red);padding:11px 40px;border-radius:8px;font-weight:700;cursor:pointer;text-align:center}
.rg-btn--outline:hover{background:var(--rg-red);color:#fff}
.rg-btn--outline:disabled{opacity:.5;cursor:not-allowed}
#place_order:disabled{opacity:.5;cursor:not-allowed}
/* consent checkbox now lives on the real WC checkout (native Terms & Conditions field) — only
 * the document links inside our admin-editable copy need the site's accent colour. */
.woocommerce-terms-and-conditions-checkbox-text a{color:var(--rg-red);text-decoration:underline}

/* ---- Modal / price details ---- */
.rg-modal{border:none;border-radius:var(--rg-radius);padding:24px 26px;max-width:420px;width:92%;box-shadow:var(--rg-shadow)}
.rg-modal::backdrop{background:rgba(0,0,0,.45)}
.rg-modal__close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:24px;cursor:pointer;color:var(--rg-mut)}
.rg-modal__title{margin:0 0 14px}
.rg-pricelist{list-style:none;margin:0;padding:0}
.rg-pricelist li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--rg-line);font-size:14px}
.rg-pricelist li span:first-child{min-width:0}
.rg-pricelist li span:last-child{font-weight:600;white-space:nowrap;flex:0 0 auto}
.rg-modal__foot{display:flex;justify-content:space-between;margin-top:14px;font-size:17px}
.rg-modal__note{margin-top:10px;font-size:12px;color:var(--rg-mut)}

/* ---- Booking overview box (shared right rail) ---- */
.rg-overview{background:var(--rg-bg);border:1px solid var(--rg-line);border-radius:12px;padding:18px}
.rg-overview h4{margin:0 0 12px;font-size:15px}
.rg-overview ul{list-style:none;margin:0;padding:0}
.rg-overview li{position:relative;padding:6px 0 6px 22px;font-size:13px;color:#374151}
.rg-overview li::before{content:"\2713";color:var(--rg-ok);position:absolute;left:0}

/* ---- Protection cards ---- */
.rg-prepay{display:inline-flex;gap:8px;align-items:center;margin-bottom:18px;font-weight:600;cursor:pointer}
.rg-prot{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rg-prot__card{position:relative;display:block;cursor:pointer}
.rg-prot__card input{position:absolute;opacity:0;pointer-events:none}
.rg-prot__body{border:2px solid var(--rg-line);border-radius:var(--rg-radius);padding:18px;height:100%;transition:.15s;background:#fff}
.rg-prot__card.is-sel .rg-prot__body{border-color:var(--rg-red);box-shadow:0 0 0 3px rgba(226,35,26,.1)}
.rg-prot__head{display:flex;justify-content:space-between;align-items:center}
.rg-prot__head h3{margin:0;font-size:17px}
.rg-prot__radio{width:20px;height:20px;border:2px solid #cbd5e1;border-radius:50%;flex:0 0 auto}
.rg-prot__card.is-sel .rg-prot__radio{border-color:var(--rg-red);background:radial-gradient(circle,#e2231a 0 6px,#fff 7px)}
.rg-prot__stars{color:var(--rg-red);margin:6px 0;letter-spacing:2px}
.rg-prot__badge{display:inline-block;color:var(--rg-red);border:1px solid var(--rg-red);border-radius:20px;font-size:12px;font-weight:700;padding:2px 10px;margin-bottom:6px}
.rg-prot__excess{font-weight:700;font-size:14px;margin:6px 0 12px}
.rg-prot__feat{list-style:none;margin:0 0 14px;padding:0;font-size:13px}
.rg-prot__feat li{padding:4px 0 4px 22px;position:relative}
.rg-prot__feat li.is-on::before{content:"\2713";color:var(--rg-ok);position:absolute;left:0}
.rg-prot__feat li.is-off{color:#9ca3af}
.rg-prot__feat li.is-off::before{content:"\2715";color:#cbd5e1;position:absolute;left:0}
.rg-prot__price strong{font-size:20px}
.rg-prot__was{text-decoration:line-through;color:#9ca3af;margin-right:8px;font-size:14px}
.rg-prot__price em{color:var(--rg-mut);font-style:normal;font-size:13px}

/* ---- FAQ accordion (native details) ---- */
.rg-faq details{border:1px solid var(--rg-line);border-radius:10px;margin-bottom:10px;padding:14px 16px}
.rg-faq summary{cursor:pointer;font-weight:600;color:var(--rg-red);list-style:none;display:flex;justify-content:space-between}
.rg-faq summary::-webkit-details-marker{display:none}
.rg-faq summary::after{content:"+";font-size:20px}
.rg-faq details[open] summary::after{content:"\2013"}
.rg-faq p{margin:10px 0 0;color:var(--rg-mut);font-size:14px}

/* ---- Add-ons ---- */
.rg-addons{list-style:none;margin:0;padding:0}
.rg-addon{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--rg-line);border-radius:12px;padding:16px 18px;margin-bottom:12px}
.rg-addon.is-on{border-color:var(--rg-red);box-shadow:0 0 0 2px rgba(226,35,26,.08)}
.rg-addon__main{flex:1;min-width:200px}
.rg-addon__name{margin:0;font-size:15px}
.rg-addon__price{margin:2px 0 0;color:var(--rg-mut);font-size:13px}
.rg-addon__detbtn{background:none;border:none;color:var(--rg-red);text-decoration:underline;cursor:pointer;font-size:13px}
.rg-addon__qty{display:flex;align-items:center;gap:10px;border:1px solid var(--rg-line);border-radius:8px;padding:4px 10px}
.rg-addon__qty button{background:none;border:none;font-size:18px;cursor:pointer;color:var(--rg-ink);line-height:1}
.rg-addon__add{border:1px solid var(--rg-red);background:#fff;color:var(--rg-red);padding:9px 18px;border-radius:8px;font-weight:600;cursor:pointer;min-width:96px}
.rg-addon__add.is-active{background:var(--rg-red);color:#fff}
.rg-addon__det{flex-basis:100%;margin:6px 0 0;color:var(--rg-mut);font-size:13px}

/* ---- Details / final ---- */
.rg-details{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:start}
.rg-order,.rg-form{background:#fff;border:1px solid var(--rg-line);border-radius:var(--rg-radius);padding:22px}
.rg-order__total{display:flex;justify-content:space-between;font-size:18px;margin-top:12px}
.rg-order__bond{margin-top:10px;font-size:13px;color:var(--rg-mut);border-top:1px dashed var(--rg-line);padding-top:10px}
.rg-form label{display:block;margin-bottom:14px;font-weight:600;font-size:14px}
.rg-form input{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--rg-line);border-radius:8px;font-size:15px;font-weight:400}
.rg-form input:invalid:not(:placeholder-shown){border-color:var(--rg-red)}
.rg-form__err{background:#fde8e7;color:var(--rg-red-d);border:1px solid var(--rg-red);border-radius:8px;padding:10px 12px;font-size:14px;font-weight:600;margin-bottom:14px}

/* ---- Manage Booking ([rg_manage_booking]) ---- */
.rg-mb{max-width:480px;margin:40px auto;padding:0 16px}

/* two-column grids for step body */
.rg-cols{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}

@media(max-width:880px){
  .rg-prot{grid-template-columns:1fr}
  .rg-details,.rg-cols{grid-template-columns:1fr}
}
@media(max-width:680px){
  .rg-stepper__label{font-size:11px}
  .rg-stepper{padding:6px 0 10px;margin-top:0}
  .rg-step{padding-top:8px}
  .rg-params{gap:14px;padding:12px 14px}
  .rg-summary__inner{flex-wrap:wrap}
  .rg-summary__cta{width:100%;margin-left:0;order:5}
}
/* flow pages share the theme's generic .breadcrumb-bar (60px/50px padding) — too much air
 * above the stepper on mobile; :has() scopes the cut to bars that actually wrap our stepper. */
@media(max-width:991px){
  .breadcrumb-bar:has(.rg-stepper){padding:14px 0}
}