/*
 * VikRentCar overrides.
 *
 * Every selector here targets markup VikRentCar actually outputs - the class
 * names were read from live shortcode output, not guessed. Rules stay scoped
 * to the theme's wrappers (.ars-search / .ars-vik) so Vik's admin and any
 * future Vik view keep working untouched.
 */

/* ---------- Search widget ---------- */

.ars-search .wrap,
.ars-search .plugin-container{max-width:none;padding:0;margin:0;width:auto}
.ars-search .vrc-main-title,
.ars-search h1,
.ars-search h2{display:none}

.ars-search .vrcdivsearch,
.ars-search .vrcdivsearch-inner{
  display:block;background:none;border:0;padding:0;margin:0;box-shadow:none;width:auto;
}

.ars-search .vrc-searchf-section-locations,
.ars-search .vrc-searchf-section-datetimes,
.ars-search .vrc-searchf-section-sbmt{display:block;width:100%}

.ars-search .vrcsfentrycont{display:block;margin:0 0 .7rem;width:100%}

.ars-search .vrcsfentrylabsel,
.ars-search label{
  display:block;font-size:.76rem;font-weight:600;letter-spacing:.02em;
  color:#dfe6f2;margin:0 0 .3rem;text-transform:uppercase;
}

.ars-search select,
.ars-search input[type="text"],
.ars-search input[type="date"],
.ars-search input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]){
  width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);font:inherit;font-size:.95rem;line-height:1.3;
  appearance:none;-webkit-appearance:none;
}
.ars-search select{
  background-image:linear-gradient(45deg,transparent 50%,#6b7280 50%),linear-gradient(135deg,#6b7280 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem;
}
.ars-search input:focus,.ars-search select:focus{outline:2px solid var(--accent);outline-offset:1px}

.ars-search .vrcsfentrydate{position:relative}
.ars-search .vrc-caltrigger{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--accent);cursor:pointer;
}

.ars-search .vrc-sf-time-container,
.ars-search .vrcsfentrytime{display:flex;align-items:center;gap:.35rem;margin-top:.4rem}
.ars-search .vrctimesep{color:#dfe6f2;font-weight:700}

.ars-search .vrcsfentrysubmit{margin-top:1rem;width:100%}
.ars-search .vrc-search-btn,
.ars-search input[type="submit"],
.ars-search button[type="submit"],
.ars-search .btn{
  width:100%;display:block;background:var(--btn-bg);color:#fff;border:0;
  border-radius:var(--r-sm);padding:.85rem 1.2rem;font:inherit;font-weight:800;
  font-size:1rem;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;
  transition:background .15s;
}
.ars-search .vrc-search-btn:hover,
.ars-search input[type="submit"]:hover,
.ars-search .btn:hover{background:var(--btn-bg-hover)}

/* Vik colours its buttons from plugin settings; force the brand token. */
.ars-search .vrc-pref-color-btn,
.ars-vik .vrc-pref-color-btn{background:var(--btn-bg)!important;border-color:var(--btn-bg)!important;color:#fff!important}
.ars-vik .vrc-pref-color-text{color:var(--accent)!important}
.ars-vik .vrc-pref-bordercolor{border-color:var(--accent)!important}

/* ---------- Vik pages (results / details / order) ---------- */

.ars-vik .wrap.plugin-container{max-width:none;padding:0;width:auto}

.ars-vik .vrc-search-results-block{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.ars-vik .vrc-search-results-block-list{display:grid}

.ars-vik .car_result{
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));
  border:0;border-radius:var(--r);box-shadow:var(--shadow);
  color:#fff;padding:18px;margin:0;overflow:hidden;
}
.ars-vik .vrc-car-result-inner{display:flex;flex-direction:column;gap:.5rem;height:100%}
.ars-vik .vrc-car-result-left,
.ars-vik .vrc-car-result-right,
.ars-vik .vrc-car-result-rightinner,
.ars-vik .vrc-car-result-rightinner-deep{width:auto;float:none;display:block}

.ars-vik .vrc-car-name,
.ars-vik .vrc-car-name a{
  color:#fff;font-size:1.05rem;font-weight:800;text-transform:uppercase;text-decoration:none;
}
.ars-vik .vrc-car-result-description,
.ars-vik .vrc-cdetails-cardesc{color:var(--muted-d);font-size:.82rem}

.ars-vik .imgresult,
.ars-vik .vrc-cdetails-cmainimg img{
  margin:.5rem auto;max-height:150px;width:auto;object-fit:contain;border-radius:8px;
}

.ars-vik .vrc-car-characteristics,
.ars-vik .vrccaratsdiv,
.ars-vik .vrc-car-carats{display:flex;flex-wrap:wrap;gap:6px;margin:.4rem 0}

/* Pills on light surfaces (car details, options step). */
.ars-vik .vrccarcarat{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;font-size:.75rem;color:#33405c;
}
.ars-vik .vrccarcarat .ars-i,
.ars-vik .vrccarcarat i{color:var(--accent)}

/* Pills inside the dark result cards. */
.ars-vik .car_result .vrccarcarat{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#e7edf7;
}
.ars-vik .car_result .vrccarcarat img{width:14px;height:14px;filter:brightness(0) invert(1);opacity:.85}

.ars-vik .vrc-car-price,
.ars-vik .vrcsrowpricediv,
.ars-vik .car_cost{color:#fff}
.ars-vik .vrcstartfrom,
.ars-vik .vrc-expl{color:var(--muted-d);font-size:.72rem;display:block}
.ars-vik .vrc_price{font-size:1.4rem;font-weight:800}
.ars-vik .vrc_currency{font-size:1rem;font-weight:700}

.ars-vik .vrc-car-lastblock,
.ars-vik .vrc-car-bookingbtn{margin-top:auto;padding-top:.6rem}
.ars-vik .vrc-car-bookingbtn .btn,
.ars-vik .vrclistgoon .btn,
.ars-vik .vrcdetbooksubmit{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--btn-bg);color:#fff;border:0;border-radius:var(--r-sm);
  padding:.7rem 1.2rem;font-weight:700;text-decoration:none;cursor:pointer;
}

/* Order / checkout forms */
.ars-vik table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden}
.ars-vik table td,.ars-vik table th{padding:.7rem .9rem;border-bottom:1px solid var(--line);text-align:left}
.ars-vik input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.ars-vik select,
.ars-vik textarea{
  padding:.65rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:.95rem;background:#fff;max-width:100%;
}
.ars-vik input[type="submit"],
.ars-vik button{
  background:var(--btn-bg);color:#fff;border:0;border-radius:var(--r-sm);
  padding:.75rem 1.3rem;font:inherit;font-weight:700;cursor:pointer;
}
.ars-vik input[type="submit"]:hover,.ars-vik button:hover{background:var(--btn-bg-hover)}

/* Vik ships FontAwesome classes; hide the glyph boxes when the font is absent
   so no broken squares are shown. Theme icons are inline SVG. */
.ars-search .fas:empty,.ars-search .far:empty{min-width:1em}

@media (max-width:1040px){
  .ars-vik .vrc-search-results-block{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .ars-vik .vrc-search-results-block{grid-template-columns:1fr}

  /* Stacking table cells makes long checkout tables readable on a phone, but
     it would flatten the availability calendar into a single column, so the
     calendar and the car spec tables are excluded. */
  .ars-vik table:not(.vrccal):not(.vrc-spec-table),
  .ars-vik table:not(.vrccal):not(.vrc-spec-table) thead,
  .ars-vik table:not(.vrccal):not(.vrc-spec-table) tbody,
  .ars-vik table:not(.vrccal):not(.vrc-spec-table) tr,
  /* Spec tables an owner pastes into a car description carry inline cell
     widths (width:40% and the like). Stacked, those leave a label squeezed
     into a third of the screen while its value sits on the next line, so the
     inline value has to be overridden outright. */
  .ars-vik table:not(.vrccal):not(.vrc-spec-table) td{display:block;width:100%!important}
  .ars-vik table:not(.vrccal):not(.vrc-spec-table) td{border-bottom:1px solid var(--line)}

  /* Keep the calendar a real table. */
  .ars-vik table.vrccal,
  .ars-vik table.vrccal tbody,
  .ars-vik table.vrccal tr,
  .ars-vik table.vrccal td{display:revert}
  .ars-vik table.vrccal{display:table;width:100%;table-layout:fixed}
  .ars-vik table.vrccal tr{display:table-row}
  .ars-vik table.vrccal td{display:table-cell;width:auto;border-bottom:0}
  .ars-vik .vrccaldivcont{padding:10px}
  .ars-vik table.vrccal td.vrctdfree,
  .ars-vik table.vrccal td.vrctdwarning,
  .ars-vik table.vrccal td.vrctdbusy{height:30px;font-size:.76rem;border-radius:7px}
  .ars-vik table.vrccal tr.vrccaldays td{font-size:.6rem;padding-bottom:6px}
  .ars-vik table.vrccal td.vrc-pref-bordercolor{font-size:.95rem;padding-bottom:8px}

  /* One field per row; two cramped columns are unusable on a phone.
     Vik lays these out with flex, so the direction is overridden too. */
  .ars-vik .vrc-cardetails-book-wrap .vrc-searchf-section-locations,
  .ars-vik .vrc-cardetails-book-wrap .vrc-searchf-section-datetimes,
  .ars-search .vrc-searchf-section-locations,
  .ars-search .vrc-searchf-section-datetimes{
    display:flex;flex-direction:column;grid-template-columns:1fr;gap:0;
  }
  .ars-vik .vrc-cardetails-book-wrap .vrcsfentrycont,
  .ars-search .vrcsfentrycont{width:100%}
  .ars-vik .vrc-cardetails-book-wrap .vrcsfentrytime{flex-wrap:nowrap}
  .ars-vik .vrc-cardetails-book-wrap .vrcsfentrytime select{flex:1 1 auto;min-width:0}
}

/* ---------- Search results (Vik "carslist" search view) ---------- */

/* Vik prints the result count in a light grey that all but disappears on the
   page background. */
.ars-vik .vrcarsfound{
  color:var(--ink);font-size:.95rem;font-weight:600;margin:0 0 1rem;
}
.ars-vik .vrcarsfound span{font-weight:800;color:var(--ink)}

/* Vik renders its own step bar; the theme styles it rather than adding a second one. */
.ars-vik .vrcstepsbarcont{margin-bottom:1.6rem}
.ars-vik .vrc-stepbar{
  display:flex;background:#fff;border-radius:var(--r-sm);overflow:hidden;
  box-shadow:var(--shadow);list-style:none;margin:0;padding:0;
}
.ars-vik .vrc-step{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:15px 18px;position:relative;color:#8a93a6;font-weight:700;font-size:.92rem;white-space:nowrap;
}
.ars-vik .vrc-step:not(:last-child)::after{
  content:"";position:absolute;right:-11px;top:50%;transform:translateY(-50%);
  border:11px solid transparent;border-left-color:#fff;z-index:2;
}
.ars-vik .vrc-step-complete{color:var(--ink)}
.ars-vik .vrc-step-current{color:var(--ink)}
.ars-vik .vrc-step span,
.ars-vik .vrc-step i{flex:0 0 auto}

/* Pickup / drop-off summary bar */
.ars-vik .vrc-search-summary,
.ars-vik .vrcsearchsummary{
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:18px 22px;margin-bottom:1.2rem;
}

/* Result card: image on top, details below - same shape as the theme cards.
   Vik sets flex-wrap:wrap on .car_result. With a column direction and the
   equal-height rows of a grid, that wraps the text into a second column
   outside the card, where overflow:hidden clips it - the card then looks
   empty below the photo. nowrap is what keeps the card readable. */
.ars-vik .car_result{display:flex;flex-direction:column;flex-wrap:nowrap;gap:.4rem}
/* Vik's flex values assume a row layout: the image column carries
   flex-basis:100% and the text column flex-basis:0. Read down a column those
   become heights, so the photo claims the whole card and the text collapses
   to zero. Both are reset for the column layout. */
.ars-vik .car_result > .vrc-car-result-left{flex:0 0 auto}
.ars-vik .car_result > .vrc-car-result-right{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ars-vik .vrc-car-result-left{order:-1;width:100%;text-align:center}
.ars-vik .vrc-car-result-rightinner{flex:1 1 auto;display:flex;flex-direction:column}
.ars-vik .vrc-car-result-rightinner-deep{flex:1 1 auto;display:flex;flex-direction:column}
.ars-vik .imgresult{
  width:100%;max-width:230px;height:auto;max-height:130px;
  margin:.2rem auto .6rem;object-fit:contain;border-radius:8px;
}
.ars-vik .vrc-car-result-right,
.ars-vik .vrc-car-result-rightinner,
.ars-vik .vrc-car-result-rightinner-deep,
.ars-vik .vrc-car-result-inner{display:block;width:auto;min-height:0!important}
.ars-vik .vrc-car-name{display:block;margin:0 0 .25rem}
.ars-vik .vrc-car-result-description{margin-bottom:.5rem;line-height:1.45}

/* Feature pills */
.ars-vik .vrc-car-result-characteristics{margin:.2rem 0 .6rem}
.ars-vik .vrccarcarat{margin:0}
.ars-vik .vrc-expl{display:inline-flex;align-items:center}

/* Prices: total on the left, the per-day rate on the right, on one line. */
.ars-vik .vrc-car-lastblock{margin-top:auto;display:flex;flex-direction:column;gap:.7rem}
/* Two columns, two rows: the "starting from" label sits above the daily rate
   on the left, and the trip total lines up on the right. Vik nests the label
   with the total, so display:contents lifts both out of that wrapper and lets
   them be placed independently - no markup change needed. */
.ars-vik .vrc-car-price{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;column-gap:.8rem;row-gap:.1rem;
  padding-top:.7rem;border-top:1px solid rgba(255,255,255,.12);text-align:left;
}
.ars-vik .vrc-car-price .vrcsrowpricediv{display:contents}
/* Daily rate on the left, trip total on the right, both the same size so
   neither reads as an afterthought; the label now names the searched stay. */
.ars-vik .vrc-car-price .vrc-car-result-dailycost{grid-column:1;grid-row:2;justify-self:start}
.ars-vik .vrc-car-price .vrcstartfrom{grid-column:2;grid-row:1;justify-self:end;text-align:right}
.ars-vik .vrc-car-price .car_cost{grid-column:2;grid-row:2;justify-self:end}
/* The per-day rate is what customers compare, so it leads on the left and
   the trip total sits on the right as supporting detail. */
.ars-vik .vrc-car-result-dailycost{
  text-align:left;white-space:nowrap;
  display:flex;align-items:baseline;gap:.25rem;
}
.ars-vik .vrc-car-result-dailycost .vrc_price,
.ars-vik .vrc-car-result-dailycost .vrc_currency{font-size:1.5rem!important;font-weight:800}
.ars-vik .vrc-car-result-dailycost .vrc-perday-txt{font-size:.78rem;font-weight:600}
.ars-vik .vrcsrowpricediv{
  display:flex;flex-direction:column;align-items:flex-end;min-width:0;text-align:right;
}
.ars-vik .vrcsrowpricediv .car_cost{font-size:1.5rem;font-weight:800;color:#fff}
.ars-vik .vrcsrowpricediv .vrc_price{font-size:1.5rem;font-weight:800;color:#fff}
.ars-vik .vrcsrowpricediv .vrc_currency{font-size:1rem;font-weight:700;color:#fff}
.ars-vik .vrcstartfrom{display:block;color:var(--muted-d);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;line-height:1.4}
.ars-vik .car_cost{font-size:1.5rem;font-weight:800;color:#fff}
.ars-vik .vrc-car-result-dailycost{color:var(--accent)!important;font-weight:700;font-size:1rem}
.ars-vik .vrc-car-result-dailycost .vrc_price,
.ars-vik .vrc-car-result-dailycost .vrc_currency{color:var(--accent)!important;font-size:1rem}
.ars-vik .vrc-perday-txt{color:var(--muted-d);font-weight:500;font-size:.78rem}

/* Book / continue button */
.ars-vik .vrc-car-bookingbtn form{margin:0}
.ars-vik .vrc-car-bookingbtn .btn,
.ars-vik input.booknow{
  width:100%;display:block;background:var(--btn-bg);color:#fff;border:0;
  border-radius:var(--r-sm);padding:.8rem 1.2rem;font:inherit;font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;cursor:pointer;
}
.ars-vik .vrc-car-bookingbtn .btn:hover,
.ars-vik input.booknow:hover{background:var(--btn-bg-hover)}

@media (max-width:640px){
  /* Vik's own mobile rules give each step full width, which turns the bar
     into a four-row block with a scrollbar. Keep it as one compact row. */
  .ars-vik .vrcstepsbarcont{margin-bottom:1.1rem}
  .ars-vik .vrc-stepbar{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    overflow:hidden;border-radius:9px;
  }
  .ars-vik .vrc-step{
    flex:1 1 0!important;width:auto!important;min-width:0!important;
    padding:9px 3px!important;font-size:.66rem;gap:.22rem;
    justify-content:center;white-space:nowrap;
  }
  /* Vik draws a grey chevron with ::before and the theme a white one with
     ::after; at this width they overlap the labels. Both are dropped for a
     hairline rule, which is all the separation four chips need.
     The desktop rule is :not(:last-child)::after, so this has to match its
     specificity - a media query adds none. */
  .ars-vik .vrc-step:not(:last-child)::after,
  .ars-vik .vrc-step::before{display:none!important}
  .ars-vik .vrc-step + .vrc-step{box-shadow:inset 1px 0 0 var(--line)}
  .ars-vik .vrc-step a,
  .ars-vik .vrc-step span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .ars-vik .vrc-step .num,
  .ars-vik .vrc-step::before{flex:0 0 auto}
}

/* ---------- Options / price step (Vik "showprc") ---------- */

.ars-vik .vrc-showprc-right.car_img_box{max-width:420px}
.ars-vik .vrc-showprc-right.car_img_box img{
  width:100%;height:auto;max-height:260px;object-fit:contain;border-radius:var(--r);
}
.ars-vik .vrc-showprc-prices-wrap{
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:6px 6px;margin-bottom:1rem;
}
.ars-vik .vrc-showprc-prices-wrap label,
.ars-vik .vrc-showprc-prices-wrap > div{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:14px 18px;border-radius:var(--r-sm);
}

/* Vik's secondary buttons (BACK) should read as a link, not a second CTA. */
.ars-vik .vrc-pref-color-btn-secondary,
.ars-vik .btn.vrc-pref-color-btn-secondary{
  background:transparent!important;color:var(--muted)!important;
  border:1px solid var(--line)!important;font-weight:600;box-shadow:none;
}
.ars-vik .vrc-pref-color-btn-secondary:hover{background:var(--surface)!important;color:var(--ink)!important}

@media (max-width:1040px){
  /* The offset accent shadow only reads well beside the hero copy; on narrow
     screens it just shows as a stray orange band behind the widget. */
  .ars-search::before{display:none}
}

@media (max-width:520px){
  .ars-search .vrc-sf-time-container{flex-wrap:nowrap}
}

/* ---------- Date picker (jQuery UI, used by Vik) ----------
   The widget is appended to <body>, so these rules are global rather than
   scoped to .ars-search. Vik ships no jQuery UI stylesheet, so this is the
   only thing standing between the user and an unstyled table. */

#ui-datepicker-div.ui-datepicker{
  display:none;
  width:auto;min-width:280px;padding:14px;
  background:#fff;border:0;border-radius:14px;
  box-shadow:0 14px 40px rgba(12,23,48,.18);
  font-family:var(--font);font-size:.9rem;color:var(--ink);
  z-index:9999!important;
}

/* Header: month + year centred, accent chevrons either side. */
#ui-datepicker-div .ui-datepicker-header{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:2px 0 12px;
}
#ui-datepicker-div .ui-datepicker-title{
  font-weight:800;font-size:1rem;letter-spacing:-.01em;text-align:center;line-height:1;
}
#ui-datepicker-div .ui-datepicker-title select{
  font:inherit;font-weight:700;margin:0 .2rem;padding:.2rem .3rem;
  border:1px solid var(--line);border-radius:8px;background:#fff;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:28px;height:28px;cursor:pointer;border:0;background:none;
  display:flex;align-items:center;justify-content:center;
}
#ui-datepicker-div .ui-datepicker-prev{left:0}
#ui-datepicker-div .ui-datepicker-next{right:0}
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span{
  display:block;width:9px;height:9px;text-indent:-9999px;overflow:hidden;
  border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  border-radius:1px;background:none;margin:0;position:static;
}
#ui-datepicker-div .ui-datepicker-prev span{transform:rotate(135deg)}
#ui-datepicker-div .ui-datepicker-next span{transform:rotate(-45deg)}
#ui-datepicker-div .ui-datepicker-prev:hover span,
#ui-datepicker-div .ui-datepicker-next:hover span{border-color:var(--accent-2)}
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled{opacity:.35;cursor:default}

/* Grid */
#ui-datepicker-div .ui-datepicker-calendar{width:100%;border-collapse:separate;border-spacing:3px;margin:0}
#ui-datepicker-div .ui-datepicker-calendar th{
  padding:4px 0 8px;font-size:.72rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;
}
#ui-datepicker-div .ui-datepicker-calendar td{padding:0;border:0}

#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:34px;margin:0 auto;padding:0;
  border:0;border-radius:9px;background:var(--surface);
  color:var(--ink);font-weight:600;text-align:center;text-decoration:none;
  transition:background .12s ease,color .12s ease;
}

/* Days outside the selectable range read as plain text. */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable span,
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span{
  background:none;color:#c3cad8;font-weight:500;
}

/* Hover reads the same as the selected day, so the target is unmistakable. */
#ui-datepicker-div .ui-datepicker-calendar td a:hover,
#ui-datepicker-div .ui-datepicker-calendar td a:focus-visible{
  background:var(--accent);color:#fff;
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today a{
  box-shadow:inset 0 0 0 2px rgba(242,106,27,.45);
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day a,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight{
  background:var(--accent);color:#fff;font-weight:800;box-shadow:none;
}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day a:hover,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active:hover{background:var(--accent-2);color:#fff}

/* Footer button pane, when Vik enables it. */
#ui-datepicker-div .ui-datepicker-buttonpane{
  border-top:1px solid var(--line);margin-top:10px;padding-top:10px;background:none;
}
#ui-datepicker-div .ui-datepicker-buttonpane button{
  background:var(--btn-bg);color:#fff;border:0;border-radius:8px;
  padding:.45rem .9rem;font:inherit;font-weight:700;cursor:pointer;
}

@media (max-width:400px){
  #ui-datepicker-div.ui-datepicker{min-width:250px;padding:12px}
  #ui-datepicker-div .ui-datepicker-calendar td a,
  #ui-datepicker-div .ui-datepicker-calendar td span{width:31px;height:31px;font-size:.85rem}
}

/* ---------- Result card feature pills ----------
   Vik renders icon-only features as a FontAwesome glyph with the label kept
   in data-vrc-expl (it shows as a tooltip). Surfacing that label gives the
   same "icon + word" pill the theme's own cards use, with no markup change. */

.ars-vik .car_result .vrccaratsdiv,
.ars-vik .car_result .vrc-car-characteristics{
  display:flex;flex-wrap:wrap;gap:6px;width:auto;
  border:0;padding:0;margin:.4rem 0 .2rem;text-align:left;
}
.ars-vik .car_result .vrccarcarat{
  height:auto;min-height:0;width:auto;min-width:0;
  padding:5px 11px;font-size:.72rem;line-height:1.35;border-radius:999px;
}
.ars-vik .car_result .vrc-carat-cont{
  display:inline-flex;align-items:center;gap:5px;
  width:auto;height:auto;background:none;border:0;padding:0;margin:0;
}
.ars-vik .car_result .vrc-expl{
  display:inline-flex;align-items:center;gap:5px;
  width:auto;height:auto;background:none;border:0;padding:0;margin:0;
}
/* Vik styles this pseudo-element as a hover tooltip (absolute + hidden), so
   every tooltip property has to be undone for the label to sit in the pill. */
.ars-vik .car_result .vrc-expl::after{
  content:attr(data-vrc-expl);
  position:static;display:inline;opacity:1;visibility:visible;
  transform:none;transition:none;pointer-events:auto;
  background:none;border:0;box-shadow:none;padding:0;margin:0;
  font-size:inherit;line-height:inherit;color:inherit;white-space:nowrap;
  width:auto;height:auto;top:auto;left:auto;right:auto;bottom:auto;
}
.ars-vik .car_result .vrc-expl::before{display:none}
.ars-vik .car_result .vrc-expl i,
.ars-vik .car_result .vrccarcarat i{font-size:12px;line-height:1;opacity:.9}
.ars-vik .car_result .vrccarcarat img{width:13px;height:13px}

/* ---------- Car details page ----------
   Vik outputs one flat column: car info, feature pills, month legend,
   availability calendars, then the booking box. The reference design is two
   columns - the car presented as a dark card on the left, everything to do
   with dates on the right - so the children are placed with grid rather than
   rearranged in PHP. */

.ars-vik .vrc-cdetails-cinfo,
.ars-vik .vrc-car-carats,
.ars-vik .vrc-cardetails-book-wrap,
.ars-vik .vrc-cardetails-legend,
.ars-vik .vrc-avcals-container{min-width:0}

/* Two real columns: the car card on the left, everything date-related on
   the right. The wrappers come from ars_wrap_car_details_columns(). */
.ars-cardetails{display:flex;flex-direction:column;gap:20px;align-items:stretch}
.ars-book-col{display:flex;flex-direction:column;gap:18px;min-width:0}
/* Vik prints the booking box last; the design leads with it. */
.ars-book-col .vrc-cardetails-book-wrap{order:-1}
.ars-car-card{min-width:0;align-self:start;width:100%}

@media (min-width:900px){
  .ars-cardetails{flex-direction:row;gap:26px;align-items:flex-start}
  .ars-car-card{flex:1 1 0;max-width:48%}
  .ars-book-col{flex:1 1 0}
}

/* Left: the car as one dark card. cinfo carries the gradient and the pill
   block continues it in the gradient's end colour, so the two read as one. */
.ars-vik .vrc-cdetails-cinfo{
  display:flex;flex-direction:column;gap:.2rem;
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));
  color:#fff;border:0;border-radius:var(--r) var(--r) 0 0;
  padding:22px 22px 6px;box-shadow:var(--shadow);margin:0;
}
.ars-vik .vrc-cdetails-img{order:-1;width:100%;text-align:center;margin-bottom:.6rem}
.ars-vik .vrc-cdetails-cmainimg{display:block}
.ars-vik .vrc-cdetails-cmainimg img,
.ars-vik .vrc-cdetails-img img{
  width:100%;max-width:100%;height:auto;max-height:230px;
  object-fit:contain;margin:0 auto;border-radius:10px;
}
.ars-car-card .vrc-cdetails-infocar{background:none;box-shadow:none;padding:0;border-radius:0;margin:0;color:#fff}
.ars-car-card .vrc-cdetails-cgroup{background:none;box-shadow:none;padding:0;margin:0;border-radius:0}
.ars-car-card .vrc-cdetails-cgroup .vrc-car-name{
  color:#fff;font-size:1.3rem;font-weight:800;text-transform:uppercase;margin:0;
}
.ars-car-card .vrclistcarcat{display:block;color:var(--muted-d);font-size:.8rem;margin-top:.15rem}
.ars-car-card .vrc-cdetails-cardesc{color:#c8d3e4;font-size:.9rem;line-height:1.55;margin:.7rem 0 .2rem}
.ars-car-card .vrc-cdetails-cost{
  display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;
  margin:.6rem 0 .2rem;font-size:1.5rem;font-weight:800;color:#fff!important;
}
.ars-vik .vrc-cdetails-cost .vrcliststartfrom{font-size:.72rem;font-weight:600;color:var(--muted-d);text-transform:uppercase;letter-spacing:.04em}
.ars-vik .vrc-cdetails-cost .car_cost{font-size:1.5rem;font-weight:800;color:#fff}
.ars-vik .vrc-cdetails-cost .vrc-perday-txt{font-size:.8rem;font-weight:500;color:var(--muted-d)}

/* Pill block continues the card. */
.ars-vik .vrc-car-carats{
  background:var(--card-bot);border-radius:0 0 var(--r) var(--r);
  padding:4px 22px 20px;box-shadow:var(--shadow);margin:0;
}
.ars-vik .vrc-car-carats .vrccaratsdiv{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.ars-vik .vrc-car-carats .vrccarcarat{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:#e7edf7;border-radius:999px;padding:6px 12px;font-size:.75rem;height:auto;min-height:0;
}
.ars-vik .vrc-car-carats .vrc-carat-cont,
.ars-vik .vrc-car-carats .vrc-expl{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;width:auto;height:auto}
.ars-vik .vrc-car-carats .vrc-expl::after{
  content:attr(data-vrc-expl);position:static;display:inline;opacity:1;visibility:visible;
  transform:none;background:none;border:0;box-shadow:none;padding:0;margin:0;
  font-size:inherit;color:inherit;white-space:nowrap;width:auto;height:auto;
}
.ars-vik .vrc-car-carats .vrc-expl::before{display:none}

/* Right: the booking box. */
.ars-vik .vrc-cardetails-book-wrap{background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--shadow);margin:0}
.ars-vik .vrc-cardetails-book-wrap h4{margin:0 0 1rem;font-size:1.05rem;font-weight:800}
.ars-vik .vrc-cardetails-book-wrap .vrcdivsearch,
.ars-vik .vrc-cardetails-book-wrap .vrcdivsearch-inner{background:none;border:0;padding:0;margin:0;box-shadow:none;width:auto}
.ars-vik .vrc-cardetails-book-wrap .vrc-searchf-section-locations,
.ars-vik .vrc-cardetails-book-wrap .vrc-searchf-section-datetimes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.ars-vik .vrc-cardetails-book-wrap .vrcsfentrycont{display:block;margin:0 0 .8rem;width:100%}
.ars-vik .vrc-cardetails-book-wrap .vrcsfentrylabsel{
  display:block;font-size:.74rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;margin:0 0 .3rem;
}
.ars-vik .vrc-cardetails-book-wrap select,
.ars-vik .vrc-cardetails-book-wrap input:not([type="submit"]){
  width:100%;padding:.65rem .75rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font:inherit;font-size:.92rem;
}
.ars-vik .vrc-cardetails-book-wrap .vrcsfentrydate{position:relative}
.ars-vik .vrc-cardetails-book-wrap .vrc-sf-time-container,
.ars-vik .vrc-cardetails-book-wrap .vrcsfentrytime{display:flex;align-items:center;gap:.3rem;margin-top:.4rem}
.ars-vik .vrc-cardetails-book-wrap .vrcsfentrysubmit{margin-top:.4rem}
.ars-vik .vrc-cardetails-book-wrap .vrcsfentrysubmit input,
.ars-vik .vrc-cardetails-book-wrap .vrc-search-btn{
  width:100%;background:var(--btn-bg);color:#fff;border:0;border-radius:var(--r-sm);
  padding:.85rem 1.2rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;
}

/* Month picker + availability legend. */
.ars-vik .vrc-cardetails-legend{
  background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.7rem;
}
.ars-vik .vrc-cardetails-legend form{margin:0}
.ars-vik .vrcselectm{
  width:100%;padding:.6rem .75rem;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-weight:700;background:#fff;
}
.ars-vik .vrclegendediv{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;font-size:.8rem;color:var(--muted)}
.ars-vik .vrclegenda{display:inline-flex;align-items:center;gap:.4rem}
.ars-vik .vrclegfree,
.ars-vik .vrclegwarning,
.ars-vik .vrclegbusy{
  width:11px;height:11px;border-radius:50%;display:inline-block;font-size:0;line-height:0;flex:0 0 auto;
}
.ars-vik .vrclegfree{background:#dfe4ee;border:1px solid #c7cfdd}
.ars-vik .vrclegwarning{background:var(--accent)}
.ars-vik .vrclegbusy{background:var(--danger)}

/* Availability calendars. */
.ars-vik .vrc-avcals-container{display:flex;flex-direction:column;gap:16px}
.ars-vik .vrccaldivcont{background:#fff;border-radius:var(--r);padding:14px;box-shadow:var(--shadow);overflow:hidden}
.ars-vik table.vrccal{width:100%;border-collapse:separate;border-spacing:3px;background:none;border-radius:0;margin:0}
.ars-vik table.vrccal td{padding:0;border:0;text-align:center;vertical-align:middle}
.ars-vik table.vrccal td.vrc-pref-bordercolor{
  border:0!important;padding:2px 0 10px;font-size:1rem;font-weight:800;color:var(--ink);
}
.ars-vik table.vrccal tr.vrccaldays td{
  padding:2px 0 8px;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;
}
.ars-vik table.vrccal td.vrctdfree,
.ars-vik table.vrccal td.vrctdwarning,
.ars-vik table.vrccal td.vrctdbusy{
  height:32px;border-radius:8px;font-size:.82rem;font-weight:600;color:var(--ink);background:var(--surface);
}
.ars-vik table.vrccal td.vrctdwarning{background:var(--accent);color:#fff}
.ars-vik table.vrccal td.vrctdbusy{background:var(--danger);color:#fff}
.ars-vik table.vrccal td.vrctdpast{background:none;color:#c3cad8;font-weight:500}

@media (max-width:899px){
  .ars-vik .vrc-car-carats{margin-bottom:20px}
  .ars-vik .vrc-cardetails-book-wrap,
  .ars-vik .vrc-cardetails-legend{margin-bottom:20px}
  .ars-vik .vrc-cdetails-cmainimg img,
  .ars-vik .vrc-cdetails-img img{max-height:190px}
}

/* Calendar day cells.
   Every selectable day carries .vrc-cdetails-cal-pickday - it is the click
   target for choosing a pickup date, not a marker for the chosen one. The
   availability colour belongs to the <td>, so the span stays transparent. */
.ars-vik .vrc-cdetails-cal-pickday{
  display:block;width:100%;height:100%;
  background:none;color:inherit;border-radius:8px;padding:7px 0;cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.ars-vik td.vrctdfree .vrc-cdetails-cal-pickday:hover{background:var(--accent);color:#fff}
.ars-vik td.vrctdpast .vrc-cdetails-cal-pickday{cursor:default}
.ars-vik td.vrctdpast .vrc-cdetails-cal-pickday:hover{background:none;color:inherit}

/* Vik gives the price row a grey band and border; the dark card wants neither. */
.ars-vik .vrc-cdetails-cost{background:none!important;border-top:0!important;padding:0!important}

/* Vik constrains the calendar box; let it fill the column. */
.ars-vik .vrc-avcals-container .vrccaldivcont{width:100%;max-width:none;float:none;margin:0}
.ars-vik .vrc-avcals-container table.vrccal{width:100%;table-layout:fixed}

/* Vik gives its date inputs a fixed 32px height while the padding and
   line-height need ~45px, so the typed date is clipped. Every control in the
   booking forms is normalised to one shape instead. */
.ars-vik select,
.ars-vik input[type="text"],
.ars-vik input[type="date"],
.ars-vik input[type="tel"],
.ars-vik input[type="email"],
.ars-search select,
.ars-search input[type="text"],
.ars-search input[type="date"]{
  height:auto;min-height:44px;line-height:1.35;
  border-radius:var(--r-sm);border:1px solid var(--line);
  padding:.6rem .8rem;box-sizing:border-box;
}
.ars-vik .vrcsfentrytime select,
.ars-search .vrcsfentrytime select{min-height:44px}

/* Vik labels the time fields inline while the date fields get a block label;
   match them so the booking box reads as one form. */
.ars-vik .vrc-cardetails-book-wrap .vrc-sf-time-container,
.ars-vik .vrc-cardetails-book-wrap .vrcsfentrytime{
  display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
}
.ars-vik .vrc-cardetails-book-wrap .vrcsfentrytime > label,
.ars-vik .vrc-cardetails-book-wrap .vrc-sf-time-container > label{
  flex:1 0 100%;font-size:.74rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;margin:0 0 .25rem;
}
.ars-vik .vrc-cardetails-book-wrap .vrcsfentrytime select{width:auto;min-width:72px;flex:0 1 auto}


/* Vik result cards: make the photo and name lead to the car page too. */
.ars-vik .car_result{position:relative;transition:transform .18s ease,box-shadow .18s ease}
.ars-vik .car_result:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(12,23,48,.22)}
.ars-vik .vrc-car-name a{color:#fff;text-decoration:none}
.ars-vik .vrc-car-name a:hover{text-decoration:underline;text-underline-offset:3px}
.ars-vik .car_result .imgresult{cursor:pointer}

/* ---------- Standalone search form (Book Now page) ----------
   Page 311 renders the search view on its own, outside the hero wrapper and
   outside the car-details booking box, so it needs the same card treatment. */

.ars-vik .entry--vik > .wrap.plugin-container > .vrcdivsearch,
.ars-vik .vrcdivsearch:not(.ars-search .vrcdivsearch){
  background:#fff;border:0;border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px;margin:0;
}
.ars-vik .vrcdivsearch .vrcdivsearch-inner{background:none;border:0;padding:0;margin:0}
.ars-vik .vrcdivsearch .vrc-main-title{
  font-size:1.1rem;font-weight:800;margin:0 0 1rem;color:var(--ink);
}
.ars-vik .vrcdivsearch .vrc-searchf-section-locations,
.ars-vik .vrcdivsearch .vrc-searchf-section-datetimes{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;
}
.ars-vik .vrcdivsearch .vrcsfentrycont{margin:0 0 .9rem;width:100%}
.ars-vik .vrcdivsearch .vrcsfentrylabsel{
  display:block;font-size:.74rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;margin:0 0 .3rem;
}
.ars-vik .vrcdivsearch .vrcsfentrydate{position:relative}

.ars-vik .vrcdivsearch .vrcsfentrysubmit{margin-top:.3rem}
.ars-vik .vrcdivsearch .vrc-search-btn,
.ars-vik .vrcdivsearch input[type="submit"]{
  width:100%;background:var(--btn-bg);color:#fff;border:0;border-radius:var(--r-sm);
  padding:.9rem 1.2rem;font-weight:800;font-size:1rem;text-transform:uppercase;
  letter-spacing:.02em;cursor:pointer;
}
.ars-vik .vrcdivsearch .vrc-search-btn:hover,
.ars-vik .vrcdivsearch input[type="submit"]:hover{background:var(--btn-bg-hover)}

@media (max-width:640px){
  .ars-vik .vrcdivsearch .vrc-searchf-section-locations,
  .ars-vik .vrcdivsearch .vrc-searchf-section-datetimes{
    display:flex;flex-direction:column;gap:0;
  }
  .ars-vik .vrcdivsearch{padding:18px}
}

/* Vik uses three different label elements across its search markup; give
   them one voice wherever the theme presents a booking form. */
.ars-vik .vrcdivsearch label,
.ars-vik .vrcdivsearch .vrcsfentrylabsel,
.ars-vik .vrc-cardetails-book-wrap label,
.ars-vik .vrc-cardetails-book-wrap .vrcsfentrylabsel,
.ars-search label,
.ars-search .vrcsfentrylabsel{
  display:block;font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;margin:0 0 .3rem;
}
.ars-vik .vrcdivsearch label,
.ars-vik .vrc-cardetails-book-wrap label{color:var(--muted)}
.ars-search label{color:#dfe6f2}

/* ---------- Specificity guard for the hero widget ----------
   The homepage is the one page where the theme stylesheet is enqueued before
   VikRentCar's, so equal-specificity rules lost and the hero dropdowns fell
   back to Vik's 2px radius and 0 5px padding while the date inputs beside
   them kept the theme shape. These selectors match Vik's own nesting so the
   theme wins regardless of load order. */

.ars-search .vrcsfentryselect select,
.ars-search .vrcsfentrycont select,
.ars-search .vrcsfentrycont input[type="text"],
.ars-search .vrcsfentrydate input,
.ars-search .vrcsfentrytime select,
.ars-vik .vrcsfentryselect select,
.ars-vik .vrcsfentrycont select,
.ars-vik .vrcsfentrycont input[type="text"],
.ars-vik .vrcsfentrydate input{
  min-height:44px;height:auto;line-height:1.35;
  padding:.6rem .8rem;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font:inherit;font-size:.95rem;box-sizing:border-box;
}

/* ---------- Phone field with the country-flag dropdown ----------
   Vik ships intlTelInput, which reserves 52px on the left of the input for
   the flag. The theme's blanket input padding was overriding that, so the
   flag sat on top of the number. Keep the theme's shape, give the flag its
   space back. */
.ars-vik .iti,
.ars-vik .intl-tel-input{display:block;width:100%}
/* The theme's input normalisation uses a :not():not():not() chain, whose
   attribute selectors give it specificity 0,4,1 - higher than a plain
   .ars-vik .iti input[type="tel"]. Matching that chain is what makes the
   flag's 52px actually stick. */
.ars-vik .iti input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.ars-vik .intl-tel-input input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]){
  width:100%;padding-left:52px;
}
.ars-vik .iti--separate-dial-code input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]){
  padding-left:76px;
}
.ars-vik .iti__flag-container{z-index:2}
.ars-vik .iti__selected-flag{border-radius:var(--r-sm) 0 0 var(--r-sm);padding:0 6px 0 10px}

/* ---------- Date + time on one row ----------
   Vik already groups each date with its own time inside a .vrcsfentrycont;
   they were just stacking. Laying that pair out as one row gives the
   reference layout: location, location, then date + time twice.

   The date sits in a bordered box with the calendar icon inside it, and the
   two time selects share a second box, so a row reads as two controls rather
   than four. Both scopes are covered: .ars-search is the dark hero widget,
   .ars-vik the light booking pages. */

.ars-search .vrc-searchf-section-datetimes .vrcsfentrycont,
.ars-vik .vrc-searchf-section-datetimes .vrcsfentrycont{
  display:flex;align-items:flex-end;gap:.5rem;width:100%;margin:0 0 .8rem;
}
.ars-search .vrc-searchf-section-datetimes .vrcsfentrylabsel,
.ars-vik .vrc-searchf-section-datetimes .vrcsfentrylabsel{
  flex:1 1 auto;min-width:0;display:block;margin:0;
}
.ars-search .vrc-searchf-section-datetimes .vrcsfentrytime,
.ars-vik .vrc-searchf-section-datetimes .vrcsfentrytime{
  flex:0 0 auto;margin:0;
}

/* The separate "Pickup Time" label is redundant once the time sits beside
   its own date, and it pushed the two boxes out of alignment. It is hidden
   visually rather than with display:none: a display:none label is dropped
   from the accessibility tree, which left the hour and minute selects with
   no accessible name at all. */
.ars-search .vrc-searchf-section-datetimes .vrcsfentrytime > label,
.ars-vik .vrc-searchf-section-datetimes .vrcsfentrytime > label{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;margin:-1px;padding:0;border:0;
}

/* Date: one rounded box, icon inside on the left. */
.ars-search .vrcsfentrydate,
.ars-vik .vrcsfentrydate{
  position:relative;display:flex;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  min-height:44px;overflow:hidden;
}
.ars-search .vrcsfentrydate input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.ars-vik .vrcsfentrydate input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]){
  width:100%;min-width:0;border:0;border-radius:0;background:transparent;
  min-height:42px;padding:.5rem .7rem .5rem 40px;box-shadow:none;
  font-size:.95rem;color:var(--ink);cursor:pointer;
}
.ars-search .vrcsfentrydate input:focus,
.ars-vik .vrcsfentrydate input:focus{outline:0}
.ars-search .vrcsfentrydate:focus-within,
.ars-vik .vrcsfentrydate:focus-within{border-color:var(--accent)}
.ars-search .vrc-caltrigger,
.ars-vik .vrc-caltrigger{
  position:absolute;left:13px;right:auto;top:50%;transform:translateY(-50%);
  color:var(--accent);pointer-events:none;font-size:15px;
}

/* Time: the two selects and the colon share one box. */
.ars-search .vrc-sf-time-container,
.ars-vik .vrc-sf-time-container{
  display:flex;align-items:center;gap:.15rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  min-height:44px;padding:0 .5rem;
}
/* Same specificity trap as the phone field: the theme's own input rule uses
   a :not() chain, so a plain descendant selector cannot clear these borders. */
.ars-search .vrc-sf-time-container select:not([multiple]):not([size]),
.ars-vik .vrc-sf-time-container select:not([multiple]):not([size]),
.ars-search .vrcsfentrytime select:not([multiple]):not([size]),
.ars-vik .vrcsfentrytime select:not([multiple]):not([size]){
  border:0;background:transparent;min-height:42px;height:42px;
  padding:0 .1rem;min-width:0;width:auto;border-radius:0;
  font-size:.95rem;color:var(--ink);text-align:center;
  appearance:none;-webkit-appearance:none;background-image:none;
}
.ars-search .vrc-sf-time-container select:focus,
.ars-vik .vrc-sf-time-container select:focus{outline:0}
.ars-search .vrc-sf-time-container:focus-within,
.ars-vik .vrc-sf-time-container:focus-within{border-color:var(--accent)}
.ars-search .vrctimesep,
.ars-vik .vrctimesep{color:var(--muted);font-weight:600}

/* Locations keep the full width above them. */
.ars-search .vrc-searchf-section-locations .vrcsfentrycont,
.ars-vik .vrcdivsearch .vrc-searchf-section-locations .vrcsfentrycont{width:100%}

@media (max-width:420px){
  .ars-search .vrcsfentrydate input:not([type="submit"]),
  .ars-vik .vrcsfentrydate input:not([type="submit"]){font-size:.9rem;padding-left:36px}
  .ars-search .vrc-sf-time-container,
  .ars-vik .vrc-sf-time-container{padding:0 .3rem}
}

/* Vik styles the time selects through an ID (.vrcsfentrycont #vrccomselph
   select), which outranks any class-based rule. These use the same ids with
   one extra class so the borders and fixed 34px height can actually be
   cleared and the pair reads as a single control. */
.ars-search .vrc-sf-time-container #vrccomselph select,
.ars-search .vrc-sf-time-container #vrccomselpm select,
.ars-search .vrc-sf-time-container #vrccomseldh select,
.ars-search .vrc-sf-time-container #vrccomseldm select,
.ars-vik .vrc-sf-time-container #vrccomselph select,
.ars-vik .vrc-sf-time-container #vrccomselpm select,
.ars-vik .vrc-sf-time-container #vrccomseldh select,
.ars-vik .vrc-sf-time-container #vrccomseldm select{
  border:0;border-radius:0;background:transparent;box-shadow:none;
  height:42px;min-height:42px;line-height:1;
  padding:0 .15rem;margin:0;width:auto;min-width:0;
  font-size:.95rem;color:var(--ink);text-align:center;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:none;
  /* 40px box minus 12px + 28px of inherited padding left zero room for the
     digits, so the field looked empty. Padding is zeroed here and the width
     is set from what "00" actually needs. */
  width:34px;min-width:34px;max-width:34px;
  padding:0;text-indent:0;
}
.ars-search .vrc-sf-time-container span,
.ars-vik .vrc-sf-time-container span{display:inline-flex;align-items:center}

/* ---------- Hero widget: the narrow case ----------
   The hero column is far narrower than the booking card, so a date and its
   time on one row have to be sized deliberately or the date gets clipped
   mid-year ("18/08/202"). Each pair gets its own full-width row, the date
   takes the remaining space, and the time keeps a fixed compact width. */

.ars-search .vrcdivsearch{width:100%}
.ars-search .vrc-searchf-section-datetimes{display:block;width:100%}
.ars-search .vrc-searchf-section-datetimes .vrcsfentrycont{
  display:flex;align-items:flex-end;gap:.4rem;width:100%;margin:0 0 .7rem;
}
.ars-search .vrc-searchf-section-datetimes .vrcsfentrylabsel{flex:1 1 auto;min-width:0}
.ars-search .vrc-searchf-section-datetimes .vrcsfentrytime{flex:0 0 auto;width:auto}

.ars-search .vrcsfentrydate{min-width:0}
.ars-search .vrcsfentrydate input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]){
  padding:.5rem .4rem .5rem 34px;font-size:.92rem;min-width:0;
  text-align:left;letter-spacing:-.1px;
}
.ars-search .vrc-caltrigger{left:11px;font-size:14px}

.ars-search .vrc-sf-time-container{padding:0 .3rem;gap:0}
.ars-search .vrctimesep{padding:0 1px}

/* Vik uses ".vrcdivsearch .vrc-searchf-section-datetimes{display:flex}",
   which ties on specificity - and the homepage is the one page where the
   theme stylesheet loads first, so Vik won and both date/time pairs sat side
   by side in a 177px column, clipping the date. Including the wrapper wins
   regardless of load order. */
.ars-search .vrcdivsearch .vrc-searchf-section-datetimes,
.ars-search .vrcdivsearch .vrc-searchf-section-locations{
  display:block;width:100%;
}
.ars-search .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrycont{
  display:flex;align-items:flex-end;gap:.4rem;width:100%;margin:0 0 .7rem;
}
.ars-search .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrylabsel{flex:1 1 auto;min-width:0}
.ars-search .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrytime{flex:0 0 auto}

/* Same guard for the booking pages, where Vik's rule also applies. */
.ars-vik .vrcdivsearch .vrc-searchf-section-datetimes{display:block;width:100%}
.ars-vik .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrycont{
  display:flex;align-items:flex-end;gap:.5rem;width:100%;margin:0 0 .8rem;
}
.ars-vik .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrylabsel{flex:1 1 auto;min-width:0}
.ars-vik .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrytime{flex:0 0 auto}

@media (min-width:900px){
  /* On the wide booking card the two pairs can share a row again. */
  .ars-vik .vrcdivsearch .vrc-searchf-section-datetimes{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem;
  }
}

/* ---------- Time selects: overriding an !important plugin rule ----------
   VikRentCar's vrc-appearance-auto.css sets the select background and its
   SVG arrow with !important, and the arrow's reserved padding (12px + 28px)
   left a 40px-wide time select with zero room for its digits, so the field
   rendered blank. !important cannot be beaten by specificity, so it is
   answered in kind - deliberately, and only for these four selects. */
.ars-search .vrc-sf-time-container #vrccomselph select,
.ars-search .vrc-sf-time-container #vrccomselpm select,
.ars-search .vrc-sf-time-container #vrccomseldh select,
.ars-search .vrc-sf-time-container #vrccomseldm select,
.ars-vik .vrc-sf-time-container #vrccomselph select,
.ars-vik .vrc-sf-time-container #vrccomselpm select,
.ars-vik .vrc-sf-time-container #vrccomseldh select,
.ars-vik .vrc-sf-time-container #vrccomseldm select{
  background:transparent none !important;
  background-image:none !important;
  padding:0 !important;
  width:30px !important;min-width:30px !important;max-width:34px !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  height:40px !important;min-height:40px !important;line-height:1 !important;
  text-align:center;text-align-last:center;
  font-size:.95rem;color:var(--ink);
  appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;
}

/* Calendar icon centred on the field rather than sitting low: stretching it
   the full height and centring inside beats guessing at a top offset. */
.ars-search .vrc-caltrigger,
.ars-vik .vrc-caltrigger{
  position:absolute;
  /* An earlier rule also set `right`, so with both edges pinned the icon
     stretched the full width and centred itself under the date. */
  left:13px;right:auto;top:0;bottom:0;transform:none;
  display:flex;align-items:center;justify-content:flex-start;
  width:auto;height:auto;line-height:1;pointer-events:none;
}

/* ---------- Narrow screens: keep the date and its time on one row ----------
   The pair was wrapping, putting the time on a full-width row of its own.
   Nothing here changes the order, only the sizes, so the row fits. */
@media (max-width:640px){
  .ars-search .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrycont,
  .ars-vik .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrycont,
  .ars-vik .vrc-cardetails-book-wrap .vrc-searchf-section-datetimes .vrcsfentrycont{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    align-items:flex-end;gap:.4rem;width:100%;
  }
  .ars-search .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrylabsel,
  .ars-vik .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrylabsel,
  .ars-vik .vrc-cardetails-book-wrap .vrc-searchf-section-datetimes .vrcsfentrylabsel{
    flex:1 1 auto;min-width:0;
  }
  /* Vik stacks the time on narrow screens with flex:0 0 100%, which took the
     whole row and squeezed the date down to its icon. */
  .ars-search .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrytime,
  .ars-vik .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrytime,
  .ars-vik .vrc-cardetails-book-wrap .vrc-searchf-section-datetimes .vrcsfentrytime{
    flex:0 0 auto!important;width:auto!important;max-width:120px;
  }
  .ars-search .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrylabsel,
  .ars-vik .vrcdivsearch .vrc-searchf-section-datetimes .vrcsfentrylabsel,
  .ars-vik .vrc-cardetails-book-wrap .vrc-searchf-section-datetimes .vrcsfentrylabsel{
    flex:1 1 auto!important;min-width:0!important;width:auto!important;
  }
  .ars-search .vrc-sf-time-container,
  .ars-vik .vrc-sf-time-container{width:auto;flex:0 0 auto}

  .ars-search .vrcsfentrydate input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
  .ars-vik .vrcsfentrydate input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]){
    font-size:.88rem;padding:.5rem .3rem .5rem 32px;
  }
  .ars-search .vrc-caltrigger,
  .ars-vik .vrc-caltrigger{left:9px;font-size:13px}

  .ars-search .vrc-sf-time-container,
  .ars-vik .vrc-sf-time-container{padding:0 .25rem}
  .ars-search .vrc-sf-time-container #vrccomselph select,
  .ars-search .vrc-sf-time-container #vrccomselpm select,
  .ars-search .vrc-sf-time-container #vrccomseldh select,
  .ars-search .vrc-sf-time-container #vrccomseldm select,
  .ars-vik .vrc-sf-time-container #vrccomselph select,
  .ars-vik .vrc-sf-time-container #vrccomselpm select,
  .ars-vik .vrc-sf-time-container #vrccomseldh select,
  .ars-vik .vrc-sf-time-container #vrccomseldm select{
    width:26px!important;min-width:26px!important;font-size:.85rem;
  }
}

/* ---------- Options / price step ----------
   This step sits on a light background but reuses classes the theme styles
   for the dark car card, so the description was white on white and the
   feature pills lost their labels. */

.ars-vik .vrc-showprc-right,
.ars-vik .vrc-showprc-right p,
.ars-vik .vrc-showprc-desc{color:var(--muted)!important}
.ars-vik .vrc-showprc-right h1,
.ars-vik .vrc-showprc-right h2,
.ars-vik .vrc-showprc-right h3,
.ars-vik .vrc-showprc-right h4{color:var(--ink)!important}

/* Feature pills on this step: same "icon + word" as everywhere else. */
.ars-vik .vrccaratsdiv{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ars-vik .vrccarcarat .vrc-expl::after{
  content:attr(data-vrc-expl);
  position:static;display:inline;opacity:1;visibility:visible;transform:none;
  background:none;border:0;box-shadow:none;padding:0;margin:0;
  font-size:inherit;line-height:inherit;color:inherit;white-space:nowrap;
  width:auto;height:auto;top:auto;left:auto;right:auto;bottom:auto;
}
.ars-vik .vrccarcarat .vrc-expl::before{display:none}
.ars-vik .vrccarcarat .vrc-expl,
.ars-vik .vrccarcarat .vrc-carat-cont{
  display:inline-flex;align-items:center;gap:6px;
  width:auto;height:auto;background:none;border:0;padding:0;margin:0;
}

/* Price rows: name on the left, amount and its radio on the right. */
.ars-vik .vrc-showprc-prices-wrap{padding:20px}
.ars-vik .vrc-showprc-title{margin:0 0 .8rem;font-size:1rem;font-weight:800}
.ars-vik .vrc-showprc-prices-inner{display:flex;flex-direction:column;gap:.6rem}
.ars-vik .vrc-showprc-price-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:nowrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 18px;margin:0;width:100%;
}
/* Vik wraps the row so its radio drops onto a second line and centres, which
   turns one price into a tall card. The row stays on one line here. */
.ars-vik .vrc-showprc-price-row-cell-last{flex:0 0 auto;width:auto;text-align:right}
.ars-vik .vrc-showprc-price-row input[type="radio"]{
  width:18px;height:18px;margin:0;accent-color:var(--accent);
}
.ars-vik .vrc-showprc-price-row.vrc-showprc-price-selected{
  border-color:var(--accent);box-shadow:0 0 0 2px rgba(242,106,27,.14);
}
.ars-vik .vrc-showprc-price-row-cell-first{flex:1 1 auto;min-width:0}
/* Vik pads the label as well as the row, which doubled the row height and
   squeezed the name onto two lines. The row owns the padding. */
.ars-vik .vrc-showprc-price-row label{
  display:flex;align-items:center;gap:1rem;width:100%;margin:0;padding:0;cursor:pointer;
}
.ars-vik .vrc-showprc-pricecost{
  flex:0 0 auto;margin:0;white-space:nowrap;
  display:flex;align-items:baseline;gap:.15rem;
}
.ars-vik .vrc-showprc-priceinfo{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;width:100%;flex-wrap:nowrap;text-align:left;
}
/* Vik gives both halves flex-basis:100% so they stack. In a single-line row
   that hands the whole width to the price and collapses the name to zero,
   so the basis is reset here - it is one of Vik's !important rules. */
.ars-vik .vrc-showprc-priceinfo .vrc-showprc-pricename{
  font-weight:700;color:var(--ink);flex:1 1 auto!important;min-width:0;
}
.ars-vik .vrc-showprc-priceinfo .vrc-showprc-pricecost{flex:0 0 auto!important}
.ars-vik .vrc-showprc-priceinfo .vrc_price,
.ars-vik .vrc-showprc-priceinfo .car_cost{
  font-size:1.25rem;font-weight:800;color:var(--ink);white-space:nowrap;
}
.ars-vik .vrc-showprc-priceinfo .vrc_currency{font-size:1rem;font-weight:700;margin-right:.15rem}

@media (max-width:640px){
  .ars-vik .vrc-showprc-price-row{padding:12px 14px;gap:.7rem}
  .ars-vik .vrc-showprc-priceinfo{gap:.6rem}
  .ars-vik .vrc-showprc-pricename{font-size:.95rem}
  .ars-vik .vrc-showprc-priceinfo .vrc_price,
  .ars-vik .vrc-showprc-priceinfo .car_cost{font-size:1.1rem}
  .ars-vik .vrc-showprc-prices-wrap{padding:16px}
}


/* The options step reuses the car-detail classes on a light background, so
   the text colour is set for that context rather than inherited from the
   dark card. */
.ars-vik .vrc-showprc-left .vrc-cdetails-infocar,
.ars-vik .vrc-showprc-left .car_description_box,
.ars-vik .vrc-showprc-left .car_description_box p,
.ars-vik .vrc-showprc-left .vrc-cdetails-cardesc{color:var(--muted)}
.ars-vik .vrc-showprc-left .vrc-car-name,
.ars-vik .vrc-showprc-left h4{color:var(--ink)}
.ars-vik .vrccarcarat{color:#33405c}


/* ---------- Calendar icon: one rule, one place ----------
   Several earlier rules each re-pinned `top`, and the most specific of them
   (top:50%) kept winning, so the icon sat low in the field. This is the only
   rule that positions it now. */
.ars-search .vrcsfentrydate .vrc-caltrigger,
.ars-vik .vrcsfentrydate .vrc-caltrigger,
.ars-vik .vrcdivsearch .vrcsfentrydate .vrc-caltrigger,
.ars-vik .vrc-cardetails-book-wrap .vrcsfentrydate .vrc-caltrigger{
  position:absolute;
  left:13px;right:auto;top:0;bottom:0;transform:none;
  display:flex;align-items:center;justify-content:flex-start;
  width:auto;height:auto;margin:0;padding:0;
  line-height:1;font-size:15px;color:var(--accent);pointer-events:none;
}

/* Vik nudges the icon down with `.vrcdivsearch .vrcsfentrylabsel
   .vrcsfentrydate i { margin-top: 8px }`. That selector counts an element, so
   the rule above - all classes - lost the margin even while winning
   everything else. Vik's stylesheet is also enqueued after the theme's, so
   matching its specificity is not enough to win on order either. */
.ars-search .vrcsfentrydate i.vrc-caltrigger,
.ars-vik .vrcsfentrydate i.vrc-caltrigger{margin:0!important}

@media (max-width:640px){
  .ars-search .vrcsfentrydate .vrc-caltrigger,
  .ars-vik .vrcsfentrydate .vrc-caltrigger,
  .ars-vik .vrcdivsearch .vrcsfentrydate .vrc-caltrigger{left:10px;font-size:13px}
}


/* ============================================================
   Checkout - "Confirm order" step (view=orderscar)

   Vik prints the order summary before the form, so the two columns are
   assigned explicitly instead of relying on source order: the form sits
   left, the summary right. Below 900px everything falls back to one
   column and the summary reads first, which is the usual mobile order.
   ============================================================ */

.ars-vik .plugin-container.ars-oconfirm{max-width:none;padding:0}

@media (min-width:900px){
  .ars-vik .plugin-container.ars-oconfirm{
    display:grid;
    grid-template-columns:minmax(0,1fr) 366px;
    align-items:start;
    column-gap:28px;
  }
  .ars-vik .plugin-container.ars-oconfirm .vrcstepsbarcont{grid-column:1/-1}
  .ars-vik .plugin-container.ars-oconfirm > form{grid-column:1;grid-row:2/span 20}
  .ars-vik .plugin-container.ars-oconfirm .vrc-rental-summary-title,
  .ars-vik .plugin-container.ars-oconfirm .vrcinfocarcontainer,
  .ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-container,
  .ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-middlep{grid-column:2}
}

/* ---------- Summary column ---------- */

.ars-vik .plugin-container.ars-oconfirm .vrc-rental-summary-title{
  margin:0 0 12px;padding:0;border:0;
  font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:left;
}

.ars-vik .plugin-container.ars-oconfirm .vrcinfocarcontainer{
  display:flex;flex-direction:column-reverse;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;
  margin:0 0 16px;padding:0;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-summary-car-img{
  margin:0;padding:0;background:var(--surface);text-align:center;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-summary-car-img img{
  display:block;width:100%;height:auto;max-height:180px;object-fit:contain;
  margin:0;padding:14px;box-sizing:border-box;border-radius:0;
}
.ars-vik .plugin-container.ars-oconfirm .vrcrentforlocs{display:block;padding:16px 18px 18px;margin:0}
.ars-vik .plugin-container.ars-oconfirm .vrcrentalfor{margin:0 0 14px;padding:0}
.ars-vik .plugin-container.ars-oconfirm .vrcrentalforone{
  margin:0;font-size:18px;line-height:1.3;font-weight:800;color:var(--ink);
}

.ars-vik .plugin-container.ars-oconfirm .vrc-itinerary-confirmation{display:grid;gap:13px;margin:0}
.ars-vik .plugin-container.ars-oconfirm .vrc-itinerary-confirmation h4{
  margin:0 0 5px;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
}
.ars-vik .plugin-container.ars-oconfirm [class*="vrc-itinerary-"][class*="-location"]{
  display:flex;align-items:flex-start;gap:9px;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-itinerary-confirmation i{
  color:var(--accent);font-size:13px;line-height:1;margin-top:4px;flex:0 0 auto;
}
.ars-vik .plugin-container.ars-oconfirm [class*="-locdet"]{min-width:0}
.ars-vik .plugin-container.ars-oconfirm [class*="-locdet"] span{
  display:block;font-size:13px;line-height:1.5;color:var(--muted);
}
.ars-vik .plugin-container.ars-oconfirm [class*="-locdet"] [class*="-locname"]{
  font-size:14px;font-weight:700;color:var(--ink);
}

/* Price breakdown. The head row is a three-column table header that reads as
   noise inside a 366px card, so it is dropped rather than restyled. */
/* The horizontal padding sits on the rows, not on the card, so the rule above
   the total spans the full width without a negative margin - which pushed the
   total row out past the card's rounded edge. */
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-container{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:16px 0;margin:0 0 16px;overflow:hidden;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-container::before{
  content:attr(data-ars-title);display:block;
  margin:0 0 4px;padding:0 18px;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-head{display:none}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-wrapper,
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-total-wrapper{
  display:block;margin:0;padding:0;border:0;background:none;box-shadow:none;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 18px;margin:0;border-bottom:1px solid var(--line);
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-wrapper .vrc-oconfirm-summary-car-row:last-child{border-bottom:0}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-cell-descr{flex:1 1 auto;min-width:0;text-align:left}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-carname,
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-carname.vrc-pref-color-text{
  font-size:14px;font-weight:700;color:var(--ink)!important;line-height:1.35;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-priceinfo{
  font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4;
}
/* The rental length is already spelled out in the card above ("Rental X for
   N Days"), so the bare number between the name and the price only looked
   unplaced. */
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-cell-days{display:none}
/* Vik prints five cells per row (description, days, net, tax, total) plus a
   per-cell label for its own mobile stacking. A 366px card has room for a
   description and one figure, so only the gross total is kept. */
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-cell-net,
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-cell-tax,
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-row .vrc-oconfirm-summary-car-head-cell{display:none}

/* Below 980px Vik restyles each cell as a stacked block with its own grey
   fill, padding and rule. The card supplies all of that, so the cells are
   reset back to plain boxes. */
/* Vik also gives each cell a percentage width, sized for its own five-column
   table. Against the row's padding those add up to more than the space left,
   which clipped the figures; the flex sizing below does the job instead. */
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-row > div{
  background:none;border:0;padding:0;margin:0;width:auto;max-width:none;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-cell-tot{
  flex:0 0 auto;font-size:15px;font-weight:700;color:var(--ink);
  white-space:nowrap;text-align:right;
}

/* Full-bleed rule: inset on both sides it read as a stray broken line. */
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-total-wrapper{
  margin:6px 0 0;padding:0;border-top:1px solid var(--line);
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-total-row{
  border-bottom:0;padding:14px 18px 4px;align-items:center;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-total-block{
  font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-total-row .vrc-oconfirm-summary-car-cell-tot{
  font-size:24px;font-weight:800;color:var(--btn-bg);
}

/* Deposit / policy note Vik prints between the summary and the form. */
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-middlep{
  background:#fff8f2;border:1px solid #f6d9c1;border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:12px 14px;margin:0 0 16px;
  font-size:13px;line-height:1.55;color:#7a4a22;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-middlep:empty{display:none;padding:0;border:0;margin:0}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-middlep p{margin:0 0 6px;color:inherit;font-size:inherit}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-middlep p:last-child{margin:0}

/* ---------- Form column ---------- */

.ars-vik .plugin-container.ars-oconfirm > form{margin:0;padding:0}

.ars-vik .plugin-container.ars-oconfirm .vrccustomfields{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 16px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:20px;margin:0 0 18px;
}
.ars-vik .plugin-container.ars-oconfirm .vrcdivcustomfield{display:block;margin:0;padding:0;min-width:0}
.ars-vik .plugin-container.ars-oconfirm .vrccustomfldinfo,
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-cfield-entry-checkbox,
.ars-vik .plugin-container.ars-oconfirm .vrcdivcustomfield:has(textarea){grid-column:1/-1}

.ars-vik .plugin-container.ars-oconfirm .vrcseparatorcf{
  margin:0;padding:0 0 12px;background:none;border:0;border-bottom:1px solid var(--line);
  font-size:16px;font-weight:800;color:var(--ink);text-align:left;text-transform:none;letter-spacing:0;
}

.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-label{
  display:block;margin:0 0 6px;font-size:12.5px;font-weight:600;color:var(--muted);
}
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-label label,
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-label span{
  font-size:inherit;font-weight:inherit;color:inherit;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input{display:block;width:100%;min-width:0}

.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input input[type="text"],
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input input[type="email"],
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input input[type="tel"],
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input input[type="number"],
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input input[type="date"],
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input select,
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input textarea{
  width:100%!important;max-width:100%;box-sizing:border-box;
  height:46px;padding:0 13px;margin:0;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);
  font:inherit;font-size:15px;color:var(--ink);
}
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input textarea{
  height:auto;min-height:94px;padding:11px 13px;line-height:1.5;resize:vertical;
}
/* The rule above sets a symmetric padding, which would sit the number under
   intlTelInput's flag. The flag's 52px gutter is restored here, at a
   specificity that beats it. */
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input .iti input[type="tel"],
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input .intl-tel-input input[type="tel"]{padding-left:52px}
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input .iti--separate-dial-code input[type="tel"]{padding-left:76px}
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input input:focus,
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input select:focus,
.ars-vik .plugin-container.ars-oconfirm .vrc-customfield-input textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,106,27,.16);
}

/* Terms checkbox: the input is printed after its label, so it is re-ordered
   rather than moved in the markup. */
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-cfield-entry-checkbox{
  display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 14px;cursor:pointer;
  box-shadow:0 1px 2px rgba(12,23,48,.06);
  transition:border-color .12s ease,background .12s ease,box-shadow .12s ease;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-cfield-entry-checkbox:hover{
  border-color:#cfd6e4;box-shadow:0 2px 6px rgba(12,23,48,.09);
}
/* Ticked state, so the row reads as accepted at a glance. */
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-cfield-entry-checkbox.is-checked{
  background:#fff6f0;border-color:var(--accent);
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-cfield-entry-checkbox:focus-within{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,106,27,.16);
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-cfield-entry-checkbox .vrc-customfield-input{
  order:-1;flex:0 0 auto;width:auto;margin:0;
  display:flex;align-items:center;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-cfield-entry-checkbox .vrc-customfield-label{
  margin:0;flex:1 1 auto;font-size:13.5px;font-weight:500;line-height:1.4;color:var(--ink);
  display:flex;align-items:center;gap:4px;
}
/* The required asterisk is a <sup>, which lifted the whole line off centre. */
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-cfield-entry-checkbox .vrcrequired,
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-cfield-entry-checkbox .vrcrequired sup{
  position:static;top:0;vertical-align:middle;font-size:12px;line-height:1;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-cfield-entry-checkbox input[type="checkbox"]{
  width:18px;height:18px;margin:0;accent-color:var(--accent);
}

/* Payment methods, when a gateway is published. */
/* ---------- Payment methods ---------- */

.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-paym-block{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:20px;margin:0 0 18px;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-paym-block .vrc-medium-header{
  margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--line);
  font-size:16px;font-weight:800;color:var(--ink);text-transform:none;letter-spacing:0;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-paym-block ul{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;margin:0;padding:0;list-style:none;
}
/* Vik marks the chosen method with a green tick badge and a green outline,
   which is the one colour on the page that belongs to nothing else. */
.ars-vik .plugin-container.ars-oconfirm .vrc-gpay-licont{
  position:relative;display:flex;align-items:center;gap:11px;margin:0;
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 14px;background:var(--bg);cursor:pointer;
  box-shadow:0 1px 2px rgba(12,23,48,.06);
  transition:border-color .12s ease,background .12s ease,box-shadow .12s ease;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-gpay-licont:hover{border-color:#cfd6e4;box-shadow:0 2px 6px rgba(12,23,48,.09)}
.ars-vik .plugin-container.ars-oconfirm .vrc-gpay-licont.vrc-gpay-licont-active{
  border-color:var(--accent)!important;background:#fff6f0;
  box-shadow:0 0 0 2px rgba(242,106,27,.14);
}
.ars-vik .plugin-container.ars-oconfirm .vrc-gpay-licont::before,
.ars-vik .plugin-container.ars-oconfirm .vrc-gpay-licont::after{content:none!important}
.ars-vik .plugin-container.ars-oconfirm .vrc-gpay-licont label{
  display:flex;align-items:center;gap:10px;margin:0;flex:1 1 auto;
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-gpay-licont .vrc-paymeth-info{font-size:14px;font-weight:600;color:var(--ink)}
.ars-vik .plugin-container.ars-oconfirm input[name="gpayid"]{
  width:18px;height:18px;margin:0;accent-color:var(--accent);flex:0 0 auto;
  position:static;opacity:1;
}

/* ---------- Footer actions ---------- */

.ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-footer{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0;padding:0;background:none;border:0;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-goback-block a.btn{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0!important;box-shadow:none;padding:8px 2px;
  font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;
}
.ars-vik .plugin-container.ars-oconfirm .vrc-goback-block a.btn:hover{color:var(--ink);background:none}
.ars-vik .plugin-container.ars-oconfirm .vrc-save-order-block .btn.booknow{
  -webkit-appearance:none;appearance:none;border:0;cursor:pointer;
  height:50px;padding:0 32px;border-radius:999px;
  background:var(--btn-bg);color:#fff;font:inherit;font-size:15px;font-weight:700;
  box-shadow:var(--shadow-sm);
}
.ars-vik .plugin-container.ars-oconfirm .vrc-save-order-block .btn.booknow:hover{background:var(--btn-bg-hover)}

@media (max-width:899px){
  /* Vik's own responsive rules turn every summary cell into a full-width
     block so the table stacks. This card already reads as rows, so the row
     is kept horizontal and the cells are sized by their content. */
  .ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-row{flex-wrap:nowrap}
  .ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-cell-descr{flex:1 1 auto;width:auto}
  .ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-summary-car-cell-tot{flex:0 0 auto;width:auto}
  .ars-vik .plugin-container.ars-oconfirm .vrccustomfields{
    grid-template-columns:minmax(0,1fr);gap:13px;padding:16px;
  }
  .ars-vik .plugin-container.ars-oconfirm .vrc-summary-car-img img{max-height:150px}
  .ars-vik .plugin-container.ars-oconfirm .vrcrentalforone{font-size:17px}
  .ars-vik .plugin-container.ars-oconfirm .vrc-oconfirm-footer{
    flex-direction:column-reverse;align-items:stretch;
  }
  .ars-vik .plugin-container.ars-oconfirm .vrc-goback-block,
  .ars-vik .plugin-container.ars-oconfirm .vrc-save-order-block{width:100%}
  .ars-vik .plugin-container.ars-oconfirm .vrc-goback-block a.btn{justify-content:center}
  .ars-vik .plugin-container.ars-oconfirm .vrc-save-order-block .btn.booknow{width:100%;padding:0}
}


/* ============================================================
   Terms modal (fancybox, shipped by VikRentCar)

   The container is appended to <body>, outside the theme's wrappers, so
   these rules hang off the theme's own body class instead.
   ============================================================ */

.ars .fancybox-bg{background:#0b1730}
.ars .fancybox-is-open .fancybox-bg{opacity:.72}

/* "1 / 1" over a single document is noise. */
.ars .fancybox-infobar,
.ars .fancybox-button--zoom,
.ars .fancybox-button--play,
.ars .fancybox-button--thumbs,
.ars .fancybox-navigation{display:none}

.ars .fancybox-slide{padding:40px 20px}
/* Vik asks fancybox for a fixed 750x600 box, which it writes as inline
   styles - hence the !important here rather than a plain override. */
.ars .fancybox-slide > .fancybox-content{
  width:min(760px,100%)!important;max-width:100%;height:min(80vh,720px)!important;
  padding:0;margin:0;border-radius:var(--r);overflow:hidden;
  background:var(--bg);box-shadow:0 30px 80px rgba(6,14,32,.45);
}
.ars .fancybox-iframe{border-radius:var(--r)}

/* fancybox fades its toolbar in through a class the iframe skin never gets,
   so the close button stayed invisible. */
.ars .fancybox-toolbar{
  visibility:visible!important;opacity:1!important;
  top:14px;right:16px;
}
.ars .fancybox-button{
  width:44px;height:44px;padding:11px;border-radius:50%;
  background:rgba(10,20,42,.72);color:#fff;
  box-shadow:0 4px 14px rgba(6,14,32,.35);
  transition:background .12s ease,transform .12s ease;
}
.ars .fancybox-button:hover{background:#0b1730;transform:scale(1.06)}
.ars .fancybox-button svg{color:#fff}

@media (max-width:640px){
  .ars .fancybox-slide{padding:14px 10px}
  .ars .fancybox-slide > .fancybox-content{height:90vh!important}
  .ars .fancybox-toolbar{top:8px;right:8px}
  .ars .fancybox-button{width:40px;height:40px;padding:10px}
}

/* ---------- The embedded page itself ---------- */

body.ars-embed{background:var(--bg)}
.ars-embed .embed{
  max-width:none;margin:0;padding:26px 26px 34px;
  font-size:15px;line-height:1.65;color:var(--ink);
}
.ars-embed .embed__title{
  margin:0 0 6px;font-size:1.5rem;line-height:1.2;font-weight:800;color:var(--ink);
}
.ars-embed .embed__title::after{
  content:"";display:block;width:52px;height:3px;border-radius:2px;
  background:var(--accent);margin:12px 0 20px;
}
.ars-embed .embed__body h2{
  margin:22px 0 8px;font-size:1.05rem;font-weight:800;color:var(--ink);
}
.ars-embed .embed__body h2:first-child{margin-top:0}
.ars-embed .embed__body h3{margin:18px 0 6px;font-size:.98rem;font-weight:700}
.ars-embed .embed__body p{margin:0 0 12px;color:#39415a}
.ars-embed .embed__body ul,
.ars-embed .embed__body ol{margin:0 0 14px;padding-left:20px;color:#39415a}
.ars-embed .embed__body li{margin:0 0 7px}
.ars-embed .embed__body a{color:var(--btn-bg);text-decoration:underline}
.ars-embed .embed__body .prose{max-width:none;padding:0;background:none;border:0;box-shadow:none}

@media (max-width:640px){
  .ars-embed .embed{padding:20px 18px 28px;font-size:14.5px}
  .ars-embed .embed__title{font-size:1.3rem}
}


/* ---------- Options / extras grid (Vik "showprc" optionals) ----------

   Vik prints one full-width row per optional, which reads as a long list on
   a fleet with eight extras. The rows become tiles instead: what it is, what
   it costs, and how to add it, in the same card shape as the price box. */

/* No card around the tiles: each one already carries its own frame, and a
   second one around the group just boxed them in. */
.ars-vik .vrc-showprc-options-wrap{
  background:none;border:0;border-radius:0;box-shadow:none;
  padding:0;margin:1.4rem 0 0;
}
.ars-vik .vrc-showprc-options-wrap .vrc-showprc-title{
  margin:0 0 12px;padding:0;border:0;
  font-size:1rem;font-weight:800;color:var(--ink);
}
/* Vik frames the group with its own 1px #eee/#ddd border and a 6px radius.
   With every tile already framed, that outer line just boxed them in. */
.ars-vik .vrc-showprc-options-inner{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin:0;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;
}
/* Side by side, the name and the price each got half a tile and both wrapped.
   Stacked, the description gets the full width and the price sits on its own
   footer line with the control it belongs to. */
.ars-vik .vrc-showprc-option-row{
  display:flex;flex-direction:column;align-items:stretch;gap:10px;
  /* Vik sets flex-wrap:wrap on this row. In a column direction that wraps
     into a second *column*, which threw the price outside the tile on
     narrow screens - the same trap as its result cards. */
  flex-wrap:nowrap;
  margin:0;padding:14px;width:auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 1px 2px rgba(12,23,48,.06);
  transition:border-color .12s ease,box-shadow .12s ease;
}
.ars-vik .vrc-showprc-option-row:hover{border-color:#cfd6e4;box-shadow:0 2px 6px rgba(12,23,48,.09)}

.ars-vik .vrc-showprc-option-cell-info{
  display:flex;align-items:flex-start;gap:10px;flex:1 1 auto;min-width:0;
  flex-wrap:nowrap;text-align:left;
}
.ars-vik .vrc-showprc-option-img{flex:0 0 auto;margin:0}
.ars-vik .vrc-showprc-option-img img{
  display:block;width:40px;height:40px;object-fit:cover;
  border-radius:8px;background:var(--surface);margin:0;
}
.ars-vik .vrc-showprc-option-name-descr{min-width:0}
.ars-vik .vrc-showprc-option-name{
  font-size:14px;font-weight:700;color:var(--ink);line-height:1.35;margin:0;
  text-align:left;
}
.ars-vik .vrc-showprc-option-cell-descr{margin:3px 0 0}
.ars-vik .vrcoptionaldescr{
  font-size:12.5px;line-height:1.45;color:var(--muted);margin:0;text-align:left;
}

/* Vik sizes this cell for its own two-column row - a part width and a large
   auto left margin - which left the footer rule floating mid-tile. */
.ars-vik .vrc-showprc-option-cell-price{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:10px;width:100%;margin:auto 0 0;padding-top:10px;
  border-top:1px solid var(--line);
}
.ars-vik .vrc-showprc-option-cell-info{width:100%;margin:0}
.ars-vik .vrc-showprc-option-cell-price-descr{
  display:flex;align-items:baseline;gap:.15rem;white-space:nowrap;
  font-weight:800;color:var(--ink);
}
.ars-vik .vrc-showprc-option-cell-price-descr .vrc_price{font-size:1rem}
.ars-vik .vrc-showprc-option-cell-price-descr .vrc_currency{font-size:.82rem;font-weight:700}
.ars-vik .vrc-showprc-option-cell-price-sel{margin:0}
/* Quantity stepper: minus, the number, plus - one control, so the number
   input keeps its own border only when the script has not run. */
.ars-vik .ars-stepper{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;
}
.ars-vik .ars-step-btn{
  -webkit-appearance:none;appearance:none;border:0;cursor:pointer;
  width:34px;padding:0;background:var(--surface);color:var(--ink);
  font:inherit;font-size:17px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s ease,color .12s ease;
}
.ars-vik .ars-step-btn:hover:not(:disabled){background:var(--accent);color:#fff}
.ars-vik .ars-step-btn:disabled{opacity:.4;cursor:default}
.ars-vik .ars-step-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.ars-vik .vrc-showprc-option-cell-price-sel input[type="number"]{
  width:44px;height:36px;padding:0 4px;margin:0;box-sizing:border-box;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  font:inherit;font-size:14px;font-weight:700;text-align:center;color:var(--ink);
  /* The spin buttons duplicate the stepper and crowd a 44px field. */
  -moz-appearance:textfield;
}
.ars-vik .vrc-showprc-option-cell-price-sel input[type="number"]::-webkit-outer-spin-button,
.ars-vik .vrc-showprc-option-cell-price-sel input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.ars-vik .ars-stepper input[type="number"]{
  border:0!important;border-radius:0!important;width:40px;
}
.ars-vik .vrc-showprc-option-cell-price-sel input[type="checkbox"]{
  width:20px;height:20px;margin:0;accent-color:var(--accent);
}
.ars-vik .vrc-showprc-option-cell-price-sel input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,106,27,.16);
}

/* A tile the visitor has actually added reads as chosen. */
.ars-vik .vrc-showprc-option-row:has(input[type="checkbox"]:checked){
  border-color:var(--accent);background:#fff6f0;
}

@media (max-width:640px){
  .ars-vik .vrc-showprc-options-inner{grid-template-columns:minmax(0,1fr);gap:10px}
  .ars-vik .vrc-showprc-option-row{padding:12px}
  .ars-vik .vrc-showprc-option-name{font-size:14.5px}
}


/* ============================================================
   Order details (Vik "order" view) - the page a customer lands on
   after booking, and reaches again from Your Orders.

   Vik gives these blocks a bare border on the page background, so the page
   read as unfinished next to the rest of the site. Same card shape as the
   checkout summary.
   ============================================================ */

.ars-vik .vrcprintdiv{text-align:right;margin:0 0 .6rem}
.ars-vik .vrcprintdiv:empty{display:none}

/* Vik always prints these payment slots and re-inserts them from its own
   JavaScript after load, so stripping them server-side does nothing. When
   there is nothing to pay the slot holds an empty wrapper - :empty cannot
   match it because whitespace counts as content - so what is tested instead
   is whether anything to click ever landed inside. */
.ars-vik .vrc-paycontainer-pos:not(:has(a, button, input, form, iframe)){display:none!important}

.ars-vik .plugin-container .warn,
.ars-vik .warn{
  display:flex;align-items:center;gap:10px;
  background:#fff8f2!important;
  border:1px solid #f6d9c1!important;border-left:3px solid var(--accent)!important;
  border-radius:var(--r-sm);padding:14px 16px;margin:0 0 18px;
  color:#7a4a22;font-weight:600;box-shadow:none;
}

.ars-vik .vrc-order-details-top-wrap,
.ars-vik .vrc-order-details-costs-wrap{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:22px;margin:0 0 18px;
}

.ars-vik .vrc-order-details-top-order{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;
}
.ars-vik .vrc-order-details-top-element{border:0;padding:0;margin:0;background:none}
.ars-vik .vrc-order-details-top-element h4,
.ars-vik .vrc-order-details-top-wrap h3{
  margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
.ars-vik .vrc-order-details-text-wrap{font-size:14px;line-height:1.7;color:var(--ink)}

/* Car block: image beside the itinerary rather than adrift above it. */
.ars-vik .vrc-order-details-top-car{
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  align-items:center;gap:22px;
  margin-top:22px;padding-top:22px;border-top:1px solid var(--line);
}
.ars-vik .vrc-order-details-car-info{margin:0;text-align:center}
.ars-vik .vrc-order-details-car-photo img{
  display:block;width:100%;height:auto;max-height:150px;object-fit:contain;margin:0 auto;
}
.ars-vik .vrc-order-details-car-info h4{
  margin:10px 0 0;font-size:16px;font-weight:800;color:var(--ink);
}
.ars-vik .vrc-order-details-summary{display:grid;gap:12px;margin:0}
.ars-vik .vrc-order-details-summary-entry{
  margin:0;padding:0;border:0;font-size:14px;line-height:1.5;color:var(--ink);
}
.ars-vik .vrc-order-details-summary-entry strong,
.ars-vik .vrc-order-details-summary-entry b{
  display:block;margin:0 0 2px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}

/* Costs, matching the checkout's price card. */
.ars-vik .vrc-order-details-costs-inner{display:block}
.ars-vik .vrc-order-details-costs-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 0;margin:0;border-bottom:1px solid var(--line);
  font-size:14px;color:var(--ink);
}
.ars-vik .vrc-order-details-costs-row:last-child{border-bottom:0}
.ars-vik .vrc-order-details-costs-row-total{
  border-bottom:0;border-top:1px solid var(--line);
  margin-top:4px;padding:16px 0 2px;
  font-size:15px;font-weight:800;
}
.ars-vik .vrc-order-details-costs-row-total .vrc_price,
.ars-vik .vrc-order-details-costs-row-total span:last-child{
  font-size:22px;font-weight:800;color:var(--btn-bg);
}

@media (max-width:780px){
  .ars-vik .vrc-order-details-top-wrap,
  .ars-vik .vrc-order-details-costs-wrap{padding:16px}
  .ars-vik .vrc-order-details-top-car{
    grid-template-columns:minmax(0,1fr);gap:16px;margin-top:18px;padding-top:18px;
  }
  .ars-vik .vrc-order-details-car-photo img{max-height:130px}
}


/* Vik prints a pagination bar on the orders list even with a single page. */
.ars-vik .vrc-pagination-footer:not(:has(a, button, select, span)){display:none}
.ars-vik .vrcconfnumbsubm:empty{display:none}


/* ---------- Car gallery ----------
   Vik lays the main photo and its extras out at whatever size each image
   happens to be. One frame, one row of equal thumbnails, all centred. */

.ars-vik .vrc-cdetails-img{display:block;margin:0 0 1.2rem}

.ars-vik .vrc-cdetails-cmainimg{
  display:flex;align-items:center;justify-content:center;
  /* Without an explicit width the frame shrinks to the photo's own ratio, so
     a portrait shot left it narrower than the thumbnails below it. */
  width:100%;
  background:var(--surface);border-radius:var(--r);overflow:hidden;
  margin:0 0 12px;padding:0;aspect-ratio:16/10;
}
.ars-vik .vrc-cdetails-cmainimg img{
  display:block;width:100%;height:100%;object-fit:contain;margin:0;border-radius:0;
}

.ars-vik .cardetails_moreimages{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:10px;margin:0;padding:0;
}
.ars-vik .cardetails_moreimages a{
  display:block;margin:0;padding:0;border:2px solid transparent;border-radius:10px;
  overflow:hidden;background:var(--surface);cursor:pointer;
  aspect-ratio:4/3;transition:border-color .12s ease,transform .12s ease;
}
.ars-vik .cardetails_moreimages a:hover{transform:translateY(-1px)}
.ars-vik .cardetails_moreimages a img{
  display:block;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;
}
.ars-vik .cardetails_moreimages a.is-active{border-color:var(--accent)}
.ars-vik .cardetails_moreimages a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

@media (max-width:640px){
  .ars-vik .cardetails_moreimages{grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}
}