/* ==========================================================================
   TripGuidely — car-rental.css
   - Dedicated styles for /car-rental/ hub + city pages
   - Works with global /assets/css/styles.css
   - Premium editorial hero + custom car-rental search
   - Optimized for guide pages like /car-rental/new-york/
   ========================================================================== */

/* ==========================================================================
   1) Scope tokens
   ========================================================================== */
body[data-page="guide"],
body[data-page="hub"]{
  --car-hero-shadow: 0 24px 70px rgba(0,0,0,.28);
  --car-hero-border: rgba(255,255,255,.16);
  --car-hero-glass: rgba(15,23,42,.34);
  --car-hero-glass-2: rgba(15,23,42,.22);

  --car-hero-text: rgba(255,255,255,.97);
  --car-hero-sub: rgba(226,232,240,.88);
  --car-hero-muted: rgba(226,232,240,.78);

  --car-panel: rgba(255,255,255,.96);
  --car-panel-border: rgba(15,23,42,.10);

  --car-accent: #12cfd0;
  --car-accent-2: #f4a261;

  --car-ok-bg: linear-gradient(135deg, rgba(18,207,208,.12), rgba(244,162,97,.10));
  --car-ok-border: rgba(18,207,208,.20);

  --car-bad-bg: linear-gradient(135deg, rgba(244,162,97,.14), rgba(15,23,42,.04));
  --car-bad-border: rgba(244,162,97,.22);

  --car-table-line: rgba(15,23,42,.10);
  --car-table-head: rgba(248,250,252,.96);
}

/* ==========================================================================
   2) Hero (car-rental specific)
   ========================================================================== */
.hero.hero-full[aria-label*="Car rental"],
.hero.hero-full[aria-label*="car rental"]{
  min-height: 760px;
}

@media (max-width: 760px){
  .hero.hero-full[aria-label*="Car rental"],
  .hero.hero-full[aria-label*="car rental"]{
    min-height: 660px;
  }
}

.hero.hero-full[aria-label*="Car rental"] .hero-overlay,
.hero.hero-full[aria-label*="car rental"] .hero-overlay{
  background:
    radial-gradient(960px 520px at 12% 0%, rgba(18,207,208,.16), transparent 60%),
    radial-gradient(980px 560px at 88% 8%, rgba(244,162,97,.14), transparent 62%),
    linear-gradient(180deg, rgba(2,6,23,.44), rgba(2,6,23,.18) 38%, rgba(2,6,23,.16) 62%, rgba(2,6,23,.50));
}

.hero-microcopy{
  margin: 10px 2px 0;
  color: rgba(71,85,105,.96);
  font-size: .93rem;
  line-height: 1.55;
}

@media (max-width: 760px){
  .hero-microcopy{
    font-size: .92rem;
  }
}

/* Legacy hero-panel support for other car-rental pages if reused */
.hero-panel{
  width: min(100%, 760px);
  max-width: 760px;
  padding: 28px;
  border-radius: 28px;
  color: var(--car-hero-text);
  background:
    linear-gradient(180deg, var(--car-hero-glass), var(--car-hero-glass-2));
  border: 1px solid var(--car-hero-border);
  box-shadow: var(--car-hero-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.hero-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 180px at 10% 0%, rgba(18,207,208,.14), transparent 60%),
    radial-gradient(520px 180px at 92% 10%, rgba(244,162,97,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 50%);
}

.hero-panel > *{
  position: relative;
  z-index: 1;
}

.hero.hero-full .hero-panel h1{
  color: var(--car-hero-text);
  margin: 0 0 10px;
  text-wrap: balance;
}

.hero.hero-full .hero-panel .kicker{
  color: var(--car-hero-sub);
  margin-bottom: 10px;
}

.hero.hero-full .hero-panel .lede{
  color: var(--car-hero-sub);
  max-width: 62ch;
  font-size: 1.08rem;
}

.hero.hero-full .hero-panel .meta{
  color: var(--car-hero-muted);
  margin-top: 14px;
}

/* ==========================================================================
   3) Hero buttons
   ========================================================================== */
.hero-panel .actions{
  margin-top: 18px;
  gap: 12px;
}

.hero-panel .btn{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.96);
  box-shadow: 0 16px 38px rgba(0,0,0,.20);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-panel .btn:hover{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 20px 48px rgba(0,0,0,.24);
}

.hero-panel .btn.primary{
  background: linear-gradient(135deg, var(--cta1), var(--cta2));
  color: #ffffff;
  border-color: rgba(18,207,208,.64);
  box-shadow: 0 16px 40px rgba(18,207,208,.32);
}

.hero-panel .btn.primary:hover{
  box-shadow: 0 20px 48px rgba(18,207,208,.40);
}

.hero-panel .btn .pill{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.16);
  color: #ffffff;
}

.hero-panel .btn.primary .pill{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.20);
}

@media (max-width: 760px){
  .hero-panel{
    padding: 20px;
    border-radius: 22px;
  }

  .hero-panel .actions{
    margin-top: 16px;
  }

  .hero-panel .actions .btn{
    width: 100%;
  }
}

/* ==========================================================================
   4) Trust row in hero
   ========================================================================== */
.hero-panel .trust{
  margin-top: 16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.hero-panel .trust-item{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-panel .trust-item b{
  color: rgba(255,255,255,.96);
}

.hero-panel .trust-item span{
  color: rgba(226,232,240,.82);
}

@media (max-width: 860px){
  .hero-panel .trust{
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   5) Breadcrumbs + content spacing
   ========================================================================== */
.breadcrumbs{
  margin-top: 18px;
}

.content > .pad > section:first-child{
  margin-top: 0;
}

.content > .pad > section + section{
  margin-top: 22px;
}

/* ==========================================================================
   6) Intro / jump links polish
   ========================================================================== */
.jump-links .section-title{
  margin-bottom: 12px;
}

.jump-links .links{
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

@media (max-width: 900px){
  .jump-links .links{
    grid-template-columns: 1fr;
  }
}

.content .callout ul.checklist{
  margin-top: 10px;
}

.content .callout ul.checklist li a{
  border-bottom-color: rgba(15,23,42,.14);
}

.content .callout ul.checklist li a:hover{
  border-bottom-color: rgba(18,207,208,.58);
}

/* ==========================================================================
   7) Search block / affiliate slot
   ========================================================================== */
#search .card{
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(560px 180px at 10% 0%, rgba(18,207,208,.08), transparent 58%),
    radial-gradient(560px 180px at 88% 10%, rgba(244,162,97,.08), transparent 60%),
    #ffffff;
}

/* FIX: allow external widget dropdowns to breathe and avoid clipping */
.tp-widget,
.car-rental-widget{
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  border-radius: 18px;
  contain: none;
  z-index: 20;
}

/* FIX: give the Klook / embedded widget enough vertical room for the calendar */
#search .tp-widget,
#search .car-rental-widget,
.hero .tp-widget,
.hero .car-rental-widget{
  min-height: 620px;
}

.tp-widget iframe,
.car-rental-widget iframe{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 620px !important;
  border: 0 !important;
  border-radius: 18px;
  overflow: visible !important;
}

.widget-placeholder{
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(15,23,42,.16);
  background: rgba(248,250,252,.9);
  color: var(--muted2);
}

/* ==========================================================================
   8) Quick answer / rule callouts
   ========================================================================== */
#quick .callout,
#cta .callout{
  border-color: rgba(18,207,208,.24);
  background: linear-gradient(135deg, rgba(18,207,208,.12), rgba(244,162,97,.10));
}

#pickup .callout,
#tolls .callout,
#day-trips .callout{
  border-color: rgba(15,23,42,.10);
  background: linear-gradient(135deg, rgba(248,250,252,.96), rgba(255,255,255,.96));
}

/* ==========================================================================
   9) Best / avoid cards
   ========================================================================== */
.car-decision-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 900px){
  .car-decision-grid{
    grid-template-columns: 1fr;
  }
}

.car-decision{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--car-panel-border);
  background: #ffffff;
  box-shadow: var(--shadow3);
}

.car-decision.good{
  background: var(--car-ok-bg);
  border-color: var(--car-ok-border);
}

.car-decision.bad{
  background: var(--car-bad-bg);
  border-color: var(--car-bad-border);
}

.car-decision h3{
  margin: 0 0 8px;
  font-size: 1.02rem;
  line-height: 1.25;
}

.car-decision p{
  margin: 0;
}

.car-decision ul{
  margin-top: 10px;
}

/* ==========================================================================
   10) Comparison table
   ========================================================================== */
.table-wrap{
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--car-table-line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: var(--shadow3);
  -webkit-overflow-scrolling: touch;
}

.table{
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  border-spacing: 0;
}

.table th,
.table td{
  text-align: left;
  vertical-align: top;
  padding: 14px 14px;
  border-bottom: 1px solid var(--car-table-line);
  color: var(--muted);
}

.table th{
  background: var(--car-table-head);
  color: var(--text);
  font-weight: 900;
  font-size: .95rem;
}

.table tr:last-child td{
  border-bottom: 0;
}

.table td strong{
  color: var(--text);
}

/* ==========================================================================
   11) Day-trip cards
   ========================================================================== */
.trip-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 900px){
  .trip-grid{
    grid-template-columns: 1fr;
  }
}

.trip-card{
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow3);
}

.trip-card h3{
  margin: 0 0 6px;
  font-size: 1.02rem;
}

.trip-card p{
  margin: 0 0 8px;
}

.trip-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.trip-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(135deg, rgba(18,207,208,.08), rgba(244,162,97,.08));
  font-size: .88rem;
  font-weight: 800;
  color: var(--text);
}

/* ==========================================================================
   12) Sidebar
   ========================================================================== */
aside.card[aria-label="Quick actions"]{
  overflow: hidden;
}

aside.card[aria-label="Quick actions"] .section-title{
  margin-bottom: 12px;
}

aside.card[aria-label="Quick actions"] .link-card{
  padding: 13px 12px;
}

aside.card[aria-label="Quick actions"] .link-card strong{
  font-size: .98rem;
}

aside.card[aria-label="Quick actions"] .link-card span{
  line-height: 1.45;
}

/* ==========================================================================
   13) CTA block
   ========================================================================== */
#cta .callout{
  padding: 18px;
  border-radius: 20px;
}

#cta .btn{
  margin-top: 2px;
}

#cta p[style]{
  color: var(--muted2) !important;
}

/* ==========================================================================
   14) FAQ polish
   ========================================================================== */
#faq details{
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#faq details:hover{
  border-color: rgba(18,207,208,.24);
  box-shadow: 0 14px 36px rgba(2,6,23,.06);
}

#faq details[open]{
  border-color: rgba(18,207,208,.24);
  background: linear-gradient(135deg, rgba(18,207,208,.05), rgba(244,162,97,.05));
}

#faq summary{
  padding-right: 28px;
  position: relative;
}

#faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  color: var(--text);
  background: linear-gradient(135deg, rgba(18,207,208,.12), rgba(244,162,97,.10));
  border: 1px solid rgba(15,23,42,.10);
}

#faq details[open] summary::after{
  content:"–";
}

/* ==========================================================================
   15) Disclosure
   ========================================================================== */
.disclosure{
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,23,42,.10);
}

.disclosure p{
  font-size: .95rem;
  color: var(--muted2);
}

/* ==========================================================================
   16) Hub page helpers
   ========================================================================== */
body[data-page="hub"] .hero-panel{
  max-width: 820px;
}

body[data-page="hub"] .hero-panel .lede{
  max-width: 68ch;
}

.city-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

@media (max-width: 980px){
  .city-grid{
    grid-template-columns: 1fr;
  }
}

.city-card{
  display: block;
  text-decoration: none;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(420px 160px at 12% 0%, rgba(18,207,208,.10), transparent 60%),
    radial-gradient(420px 160px at 90% 10%, rgba(244,162,97,.10), transparent 60%),
    #ffffff;
  box-shadow: var(--shadow3);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.city-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(2,6,23,.12);
  border-color: rgba(18,207,208,.26);
}

.city-card h3{
  margin: 0 0 6px;
  font-size: 1.04rem;
}

.city-card p{
  margin: 0 0 10px;
}

.city-card .tag{
  margin-top: 0;
}

/* ==========================================================================
   17) Car-type pills / recommendation chips
   ========================================================================== */
.reco-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.reco-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
  color: var(--text);
  font-size: .92rem;
  font-weight: 800;
  box-shadow: var(--shadow3);
}

/* ==========================================================================
   18) Hero custom car-rental search widget + premium datepicker
   ========================================================================== */
.car-hero-search{
  margin: 0 0 16px;
}

.car-search-form{
  display: block;
  position: relative;
  z-index: 30;
}

.car-search-grid{
  display: grid;
  grid-template-columns: minmax(240px, 2.2fr) minmax(150px, 1fr) minmax(115px, .72fr) minmax(150px, 1fr) minmax(115px, .72fr) auto;
  gap: 10px;
  align-items: end;
}

.car-search-grid--display{
  grid-template-columns: minmax(260px, 2.2fr) minmax(360px, 2fr) auto;
  gap: 10px;
  align-items: stretch;
}

.car-search-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.car-search-field label{
  font-size: .84rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--muted2);
}

.car-search-field input,
.car-search-field select{
  width: 100%;
  min-height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
  color: var(--text);
  padding: 0 14px;
  box-shadow: var(--shadow3);
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease, transform .12s ease, background .14s ease;
}

.car-search-field input::placeholder{
  color: rgba(100,116,139,.78);
}

.car-search-field input:focus,
.car-search-field select:focus{
  border-color: rgba(18,207,208,.42);
  box-shadow:
    0 0 0 4px rgba(18,207,208,.12),
    0 10px 22px rgba(2,6,23,.08);
  background: #ffffff;
}

.car-search-display-wrap{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
}

.car-date-display{
  min-height: 58px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: #f8fafc;
  color: var(--text);
  padding: 10px 14px;
  text-align: left;
  box-shadow: var(--shadow3);
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.car-date-display:hover{
  border-color: rgba(18,207,208,.28);
}

.car-date-display:focus{
  outline: none;
  border-color: rgba(18,207,208,.42);
  box-shadow:
    0 0 0 4px rgba(18,207,208,.12),
    0 10px 22px rgba(2,6,23,.08);
  background: #ffffff;
}

.car-date-display__label{
  display: block;
  font-size: .82rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--muted2);
  margin-bottom: 4px;
}

.car-date-display__value{
  display: block;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 900;
  color: var(--text);
}

.car-duration-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 82px;
  padding: 0 12px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #3b82f6;
  background: #ffffff;
  color: #2563eb;
  font-size: .92rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--shadow3);
}

.car-search-hidden-inputs{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.car-search-submit{
  min-width: 148px;
  min-height: 58px;
  border: 1px solid rgba(18,207,208,.55);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--cta1), var(--cta2));
  color: #ffffff;
  font-weight: 900;
  font-size: 1rem;
  box-shadow: 0 16px 38px rgba(18,207,208,.24);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.car-search-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 46px rgba(18,207,208,.30);
}

.car-search-submit:active{
  transform: translateY(0);
}

.car-search-note{
  margin: 10px 2px 0;
  font-size: .92rem;
  color: var(--muted2);
}

.car-search-error{
  margin: 8px 2px 0;
  min-height: 1.4em;
  font-size: .92rem;
  color: #b91c1c;
}

/* premium date popover */
.car-date-popover{
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 760px);
  z-index: 35;
}

.car-date-popover[hidden]{
  display: none !important;
}

.car-date-popover__inner{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(2,6,23,.18);
  overflow: hidden;
}

.car-date-popover__header{
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 10px;
}

.car-date-popover__months{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.car-cal-title{
  text-align: center;
  font-size: 1.08rem;
  font-weight: 900;
  color: var(--text);
}

.car-cal-nav{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow3);
  cursor: pointer;
}

.car-cal-nav:hover{
  border-color: rgba(18,207,208,.28);
}

.car-date-popover__calendars{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0 18px 0;
}

.car-cal{
  min-width: 0;
  padding: 8px 12px 16px;
}

.car-cal + .car-cal{
  border-left: 1px solid rgba(15,23,42,.08);
}

.car-cal__weekdays,
.car-cal__grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 6px;
}

.car-cal__weekdays{
  margin-bottom: 10px;
}

.car-cal__weekday{
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted2);
}

.car-cal__day{
  position: relative;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font-size: .96rem;
  font-weight: 800;
  cursor: pointer;
}

.car-cal__day:hover{
  background: rgba(18,207,208,.08);
}

.car-cal__day.is-muted{
  color: rgba(100,116,139,.42);
  cursor: default;
}

.car-cal__day.is-disabled{
  color: rgba(100,116,139,.30);
  cursor: not-allowed;
}

.car-cal__day.is-start,
.car-cal__day.is-end{
  background: linear-gradient(135deg, var(--cta1), var(--cta2));
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(18,207,208,.24);
}

.car-cal__day.is-in-range{
  background: linear-gradient(135deg, rgba(18,207,208,.10), rgba(244,162,97,.10));
  border-radius: 0;
}

.car-cal__day.is-range-left{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

.car-cal__day.is-range-right{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

.car-date-popover__times{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(248,250,252,.82), rgba(255,255,255,.98));
  border-top: 1px solid rgba(15,23,42,.08);
}

.car-time-box{
  min-width: 0;
}

.car-time-box__title{
  margin: 0 0 8px;
  font-size: .95rem;
  font-weight: 900;
  color: var(--text);
}

.car-time-row{
  display: flex;
  align-items: center;
  gap: 8px;
}

.car-time-row select{
  min-width: 74px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
  color: var(--text);
  padding: 0 10px;
  font-weight: 800;
  box-shadow: var(--shadow3);
}

.car-time-sep{
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text);
}

.car-date-popover__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(15,23,42,.08);
}

.car-date-popover__hint{
  margin: 0;
  font-size: .9rem;
  color: var(--muted2);
}

.car-date-popover__actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

.car-date-display.is-active{
  border-color: rgba(18,207,208,.42);
  box-shadow:
    0 0 0 4px rgba(18,207,208,.12),
    0 10px 22px rgba(2,6,23,.08);
  background: #ffffff;
}

@media (max-width: 1080px){
  .car-search-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .car-search-grid--display{
    grid-template-columns: 1fr;
  }

  .car-search-field-location{
    grid-column: 1 / -1;
  }

  .car-search-display-wrap{
    grid-template-columns: 1fr;
  }

  .car-duration-badge{
    justify-self: start;
  }

  .car-search-submit{
    width: 100%;
  }

  .car-date-popover{
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
  }

  /* Keep embedded widget tall enough on tablet too */
  #search .tp-widget,
  #search .car-rental-widget,
  .hero .tp-widget,
  .hero .car-rental-widget,
  .tp-widget iframe,
  .car-rental-widget iframe{
    min-height: 700px !important;
  }
}

@media (max-width: 760px){
  .car-hero-search{
    margin-bottom: 14px;
  }

  .car-search-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .car-search-field input,
  .car-search-field select{
    min-height: 56px;
    border-radius: 16px;
  }

  .car-date-display{
    min-height: 56px;
    border-radius: 16px;
  }

  .car-search-submit{
    width: 100%;
    min-height: 56px;
    border-radius: 16px;
  }

  .car-date-popover{
    position: fixed;
    left: 12px;
    right: 12px;
    top: 50%;
    width: auto;
    transform: translateY(-50%);
    max-height: calc(100vh - 24px);
    overflow: auto;
  }

  .car-date-popover__header{
    grid-template-columns: 44px 1fr 44px;
    padding: 14px 14px 10px;
  }

  .car-date-popover__months,
  .car-date-popover__calendars,
  .car-date-popover__times,
  .car-date-popover__footer{
    grid-template-columns: 1fr;
  }

  .car-date-popover__calendars{
    padding: 0 14px 0;
  }

  .car-cal{
    padding: 8px 4px 14px;
  }

  .car-cal + .car-cal{
    border-left: 0;
    border-top: 1px solid rgba(15,23,42,.08);
  }

  .car-date-popover__times{
    gap: 14px;
    padding: 14px;
  }

  .car-date-popover__footer{
    padding: 14px;
  }

  .car-date-popover__actions{
    width: 100%;
  }

  .car-date-popover__actions .btn{
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Mobile: a bit more room for the embedded datepicker */
  #search .tp-widget,
  #search .car-rental-widget,
  .hero .tp-widget,
  .hero .car-rental-widget,
  .tp-widget iframe,
  .car-rental-widget iframe{
    min-height: 760px !important;
  }
}

/* ==========================================================================
   19) Mobile polish
   ========================================================================== */
@media (max-width: 760px){
  .table-wrap{
    border-radius: 16px;
  }

  .table th,
  .table td{
    padding: 12px 12px;
  }

  .trip-card,
  .city-card,
  .car-decision{
    border-radius: 16px;
  }

  #cta .callout{
    padding: 16px;
    border-radius: 18px;
  }

  .hero.hero-full[aria-label*="Car rental"] .hero-inner,
  .hero.hero-full[aria-label*="car rental"] .hero-inner{
    padding-top: 40px;
    padding-bottom: 32px;
    align-items: flex-end;
  }
}

/* ==========================================================================
   20) Print
   ========================================================================== */
@media print{
  .header,
  .footer,
  .consent-banner,
  #site-header,
  #site-footer,
  aside.card,
  .actions,
  .car-date-popover{
    display: none !important;
  }

  .main{
    padding: 0;
  }

  .hero.hero-full{
    min-height: auto !important;
    border-bottom: 0;
  }

  .hero-bg,
  .hero-overlay{
    display: none !important;
  }

  .hero-panel{
    color: #000 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    max-width: 100% !important;
  }

  .grid{
    grid-template-columns: 1fr !important;
  }

  .card,
  .table-wrap,
  details{
    box-shadow: none !important;
  }
}