/*
 * Shared responsive polish for every home-page vehicle search widget.
 * Theme styles still own colors and typography; this file standardizes
 * composition, spacing, touch targets, and mobile date-picker behavior.
 */

/* Prevent native date/time controls from forcing a grid column wider. */
.pr-booking-form input,
.md-booking-form input,
.el-booking-form input,
.lx-booking input,
.wg-booking input,
.lp-search-wrap input,
.cy-search-bar input,
.sk-search-bar input,
.iz-search-bar input,
.skg-search-bar input,
.gns-search-bar input,
.eg-search-card input,
.tr-search-card input,
.ob-search-section input,
.nc-terminal input,
.cs-search-wrap input {
  min-width: 0;
}

/* ── Tablet: turn long desktop bars into calm two-column panels. ── */
@media (min-width: 601px) and (max-width: 1180px) {
  /* Sunset uses its denser desktop widget throughout tablet widths. */
  .lp-search-bar {
    display: grid !important;
    grid-template-columns: minmax(220px, .9fr) minmax(340px, 1.4fr) !important;
    gap: .75rem !important;
    align-items: stretch !important;
  }

  .lp-search-mob {
    display: none !important;
  }

  .lp-search-bar > .lp-search-col {
    padding: .65rem .85rem !important;
    border: 0 !important;
  }

  .lp-search-bar > .lp-search-col::after {
    display: none !important;
  }

  .lp-search-bar > .lp-search-col.location-col {
    max-width: none !important;
    flex: auto !important;
  }

  .lp-search-bar > #hp-dtp-bar {
    padding: .7rem .9rem !important;
  }

  .lp-search-bar > .lp-search-col:nth-of-type(3) {
    grid-column: 1;
  }

  .lp-search-bar > .lp-search-col:nth-of-type(4) {
    grid-column: 2;
  }

  .lp-search-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .lp-search-btn {
    width: 100%;
    min-height: 50px;
  }

  .pr-booking-section,
  .md-booking-section,
  .el-booking-section,
  .lx-booking-section,
  .wg-booking-section {
    margin-top: -2rem;
    padding-inline: 1rem;
  }

  .pr-booking-form,
  .md-booking-form,
  .el-booking-form,
  .lx-booking,
  .wg-booking {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    border-radius: 22px !important;
  }

  .pr-same-loc-field,
  .md-same-loc-field,
  .el-same-loc-field,
  .lx-same-loc-field,
  .wg-same-loc-field {
    grid-column: 1 / -1 !important;
  }

  .pr-booking-submit,
  .md-booking-submit,
  .el-booking-submit,
  .lx-booking-submit,
  .wg-booking-submit {
    width: 100%;
    min-height: 50px;
  }

  /* Sakura-family horizontal bars. */
  :is(.cy-search-bar, .sk-search-bar, .iz-search-bar, .skg-search-bar, .gns-search-bar) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
    padding: 1rem !important;
    border-radius: 20px !important;
    align-items: stretch !important;
  }

  :is(.cy-bar-cell, .sk-bar-cell, .iz-bar-cell, .skg-bar-cell, .gns-bar-cell) {
    width: auto !important;
    min-height: 70px;
    padding: .75rem .9rem !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 14px !important;
  }

  :is(.cy-bar-sep, .sk-bar-sep, .iz-bar-sep, .skg-bar-sep, .gns-bar-sep) {
    display: none !important;
  }

  :is(.cy-bar-type, .sk-bar-type, .iz-bar-type, .skg-bar-type, .gns-bar-type) {
    align-self: stretch !important;
  }

  :is(.cy-bar-tabs, .sk-bar-tabs, .iz-bar-tabs, .skg-bar-tabs, .gns-bar-tabs),
  :is(.cy-bar-search, .sk-bar-search, .iz-bar-search, .skg-bar-search, .gns-bar-search) {
    width: 100% !important;
  }

  :is(.cy-bar-search-btn, .cy-search-btn, .sk-search-btn, .iz-search-btn, .skg-search-btn, .gns-search-btn) {
    width: 100% !important;
    min-height: 50px;
    justify-content: center !important;
    border-radius: 13px !important;
  }

  /* Sport / neon bars use one wide date row under two location cells. */
  :is(.cs-bar, .nc-bar.nc-search-desktop) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
    padding: .9rem !important;
    border-radius: 18px !important;
  }

  :is(.cs-bar, .nc-bar.nc-search-desktop) > :is(.cs-bar-col, .nc-bar-col) {
    width: auto !important;
    min-height: 64px;
    padding: .7rem .85rem !important;
    border-radius: 12px;
  }

  :is(.cs-bar, .nc-bar.nc-search-desktop) > :is(.cs-bar-dates, .nc-bar-dates) {
    grid-column: 1 / -1;
  }

  :is(.cs-bar, .nc-bar.nc-search-desktop) > :is(.cs-bar-col, .nc-bar-col)::after {
    display: none !important;
  }

  :is(.cs-search-btn, .nc-submit) {
    width: 100% !important;
    min-height: 48px;
  }

  /* Ocean and Neon also keep the richer desktop composition on tablets. */
  .ob-bar {
    display: grid !important;
    grid-template-columns: minmax(210px, .85fr) minmax(340px, 1.35fr) !important;
    gap: .75rem !important;
  }

  .ob-mob {
    display: none !important;
  }

  .ob-bar > .ob-bar-col:nth-last-child(2) {
    grid-column: 1;
  }

  .ob-bar > .ob-bar-col:last-child {
    grid-column: 2;
  }

  .nc-search-desktop {
    display: grid !important;
  }

  .nc-search-mobile {
    display: none !important;
  }

  /* Hero-card themes get more room when their hero collapses. */
  :is(.eg-search-card, .tr-search-card) {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding: 1.25rem !important;
    border-radius: 22px !important;
  }

  :is(.eg-loc-card, .tr-loc-card) {
    min-height: 64px;
    border-radius: 14px !important;
  }

  :is(.eg-search-btn, .tr-search-btn) {
    min-height: 50px;
  }
}

/* ── Phones and small tablets: compact, card-based, thumb-friendly. ── */
@media (max-width: 600px) {
  /* Sunset/default theme */
  .lp-search-wrap {
    padding: .85rem 0 1rem !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
  }

  .lp-search-wrap > .lt-container {
    width: auto !important;
    max-width: 640px !important;
    margin-inline: auto !important;
    padding-inline: 14px !important;
  }

  .lp-search-mob {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
    padding: .65rem !important;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .10);
  }

  .lp-search-mob::before {
    content: 'ค้นหารถว่าง';
    display: block;
    margin: .1rem .2rem .7rem;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -.01em;
  }

  .lp-search-mob-card {
    min-height: 62px !important;
    margin-bottom: .55rem !important;
    padding: .65rem .75rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 15px !important;
    box-shadow: none !important;
  }

  .lp-search-mob-card:focus-within {
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .10) !important;
  }

  .lp-search-mob-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  .lp-search-mob-label {
    font-size: .68rem !important;
    letter-spacing: .035em !important;
  }

  .lp-search-mob-input,
  .lp-search-mob-value {
    font-size: .95rem !important;
    line-height: 1.35;
  }

  .lp-search-mob-same-loc {
    min-height: 34px;
    margin: -.1rem .25rem .55rem !important;
  }

  .lp-search-mob-same-loc input {
    width: 17px !important;
    height: 17px !important;
  }

  .lp-search-mob-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem !important;
  }

  .lp-search-mob-tabs .lp-search-tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding-inline: .35rem !important;
    border-radius: 13px !important;
    font-size: .75rem !important;
    overflow: hidden;
  }

  .lp-search-mob-btn {
    max-width: 100%;
    box-sizing: border-box;
    min-height: 52px !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
  }

  /* Premium / Modern / Elegant / Luxe / Black Pro / White Gold */
  .pr-booking-section,
  .md-booking-section,
  .el-booking-section,
  .lx-booking-section,
  .wg-booking-section {
    margin-top: 0 !important;
    padding: .85rem .75rem 1.5rem !important;
  }

  .pr-booking-form,
  .md-booking-form,
  .el-booking-form,
  .lx-booking,
  .wg-booking {
    grid-template-columns: 1fr !important;
    gap: .65rem !important;
    padding: .8rem !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .13) !important;
  }

  :is(.pr-booking-form, .md-booking-form, .el-booking-form, .lx-booking, .wg-booking)::before {
    content: 'ค้นหารถว่าง';
    grid-column: 1 / -1;
    display: block;
    margin: .1rem .15rem .25rem;
    color: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
  }

  :is(.pr-booking-field, .md-booking-field, .el-booking-field, .lx-field, .wg-field) {
    min-width: 0;
  }

  :is(.pr-booking-field, .md-booking-field, .el-booking-field, .lx-field, .wg-field) > label:not(.pr-same-loc):not(.md-same-loc):not(.el-same-loc):not(.lx-same-loc):not(.wg-same-loc) {
    margin: 0 0 .35rem .2rem !important;
    font-size: .7rem !important;
    letter-spacing: .035em !important;
  }

  :is(.pr-booking-input, .md-booking-input, .el-booking-input),
  .lx-field > input,
  .wg-field > input {
    min-height: 48px !important;
    padding: .7rem .8rem !important;
    border: 1px solid rgba(148, 163, 184, .28) !important;
    border-radius: 13px !important;
  }

  .lx-field > input {
    background: rgba(255, 255, 255, .055) !important;
  }

  :is(.pr-same-loc-field, .md-same-loc-field, .el-same-loc-field, .lx-same-loc-field, .wg-same-loc-field) {
    grid-column: 1 !important;
    min-height: 34px;
    justify-content: center !important;
    padding-inline: .2rem;
  }

  :is(.pr-same-loc, .md-same-loc, .el-same-loc, .lx-same-loc, .wg-same-loc) input {
    width: 18px !important;
    height: 18px !important;
  }

  :is(.pr-vehicle-switch, .md-vehicle-switch, .el-vehicle-switch, .lx-vehicle-switch, .wg-vehicle-switch) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem !important;
  }

  :is(.pr-veh-tab, .md-veh-tab, .el-veh-tab, .lx-veh-tab, .wg-veh-tab) {
    min-height: 46px;
    padding: .6rem .45rem !important;
    white-space: nowrap;
  }

  :is(.pr-booking-submit, .md-booking-submit, .el-booking-submit, .lx-booking-submit, .wg-booking-submit) {
    width: 100%;
    min-height: 52px;
    margin-top: .1rem;
    border-radius: 13px !important;
  }

  /* Sakura / Canyon / Ivory / Sakura Gold / Gold Night */
  :is(.cy-search-bar-outer, .sk-search-bar-outer, .iz-search-bar-outer, .skg-search-bar-outer, .gns-search-bar-outer) {
    margin-top: 0 !important;
    padding: .85rem .75rem 1.25rem !important;
  }

  :is(.cy-search-bar-outer, .sk-search-bar-outer, .iz-search-bar-outer, .skg-search-bar-outer, .gns-search-bar-outer) > :is(.cy-container, .sk-container, .iz-container, .skg-container) {
    padding-inline: 0 !important;
  }

  :is(.cy-search-bar, .sk-search-bar, .iz-search-bar, .skg-search-bar, .gns-search-bar) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .55rem !important;
    padding: .7rem !important;
    border-radius: 20px !important;
    overflow: visible !important;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .11) !important;
  }

  :is(.cy-bar-cell, .sk-bar-cell, .iz-bar-cell, .skg-bar-cell, .gns-bar-cell) {
    width: 100% !important;
    min-height: 62px;
    padding: .65rem .8rem !important;
    border: 1px solid rgba(148, 163, 184, .24) !important;
    border-radius: 14px !important;
    box-sizing: border-box;
  }

  :is(.cy-bar-loc, .sk-bar-loc, .iz-bar-loc, .skg-bar-loc, .gns-bar-loc),
  :is(#cy-return-box, #sk-return-box, #iz-return-box, #skg-return-box, #gns-return-box),
  :is(.cy-bar-type, .sk-bar-type, .iz-bar-type, .skg-bar-type, .gns-bar-type),
  :is(.cy-bar-search, .sk-bar-search, .iz-bar-search, .skg-bar-search, .gns-bar-search),
  .cy-bar-search-btn {
    grid-column: 1 / -1 !important;
  }

  :is(.cy-bar-sep, .sk-bar-sep, .iz-bar-sep, .skg-bar-sep, .gns-bar-sep) {
    display: none !important;
  }

  :is(.cy-bar-lbl, .sk-bar-lbl, .iz-bar-lbl, .skg-bar-lbl, .gns-bar-lbl) {
    margin-bottom: .2rem;
    font-size: .68rem !important;
    letter-spacing: .035em !important;
  }

  :is(.cy-bar-input, .sk-bar-input, .iz-bar-input, .skg-bar-input, .gns-bar-input) {
    min-height: 24px;
    font-size: .95rem !important;
    line-height: 1.35;
  }

  :is(.cy-bar-time, .sk-bar-time, .iz-bar-time, .skg-bar-time, .gns-bar-time) {
    min-height: 28px;
    font-size: .82rem !important;
  }

  :is(.cy-bar-tabs, .sk-bar-tabs, .iz-bar-tabs, .skg-bar-tabs, .gns-bar-tabs) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem !important;
    width: 100% !important;
  }

  :is(.cy-tab, .sk-tab, .iz-tab, .skg-tab, .gns-tab) {
    min-height: 44px;
    justify-content: center;
  }

  :is(.cy-bar-search, .sk-bar-search, .iz-bar-search, .skg-bar-search, .gns-bar-search) {
    width: 100% !important;
    padding: 0 !important;
  }

  :is(.cy-bar-search-btn, .cy-search-btn, .sk-search-btn, .iz-search-btn, .skg-search-btn, .gns-search-btn) {
    width: 100% !important;
    min-height: 52px;
    padding: .8rem 1rem !important;
    justify-content: center !important;
    border-radius: 13px !important;
  }

  /* Eco Green and Terra already have good semantic cards; tighten hierarchy. */
  :is(.eg-search-card, .tr-search-card) {
    width: 100%;
    padding: .8rem !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .12) !important;
  }

  :is(.eg-sc-head, .tr-sc-head) {
    align-items: flex-start !important;
    gap: .65rem !important;
    margin-bottom: .7rem !important;
  }

  :is(.eg-search-tabs, .tr-search-tabs) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: .4rem !important;
  }

  :is(.eg-tab, .tr-tab) {
    min-height: 42px;
    justify-content: center;
  }

  :is(.eg-loc-card, .tr-loc-card) {
    min-height: 62px;
    padding: .6rem .7rem !important;
    border-radius: 14px !important;
    gap: .6rem !important;
  }

  :is(.eg-same-loc-pill, .tr-same-loc-pill) {
    min-height: 34px;
    white-space: nowrap;
  }

  :is(.eg-dt-pair, .tr-dt-pair) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5rem !important;
  }

  :is(.eg-dt-arrow, .tr-dt-arrow) {
    display: none !important;
  }

  :is(.eg-dt-card, .tr-dt-card) {
    min-width: 0;
    min-height: 98px;
    padding: .65rem !important;
    border-radius: 13px !important;
  }

  :is(.eg-search-btn, .tr-search-btn) {
    min-height: 52px;
    border-radius: 13px !important;
  }

  /* Ocean Blue and Neon City have dedicated mobile markup. */
  .ob-search-section {
    padding: .85rem .75rem 1.25rem !important;
  }

  .ob-mob {
    gap: .55rem !important;
    padding: .7rem !important;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 14px 38px rgba(2, 8, 23, .20);
  }

  .ob-mob::before {
    content: 'ค้นหารถว่าง';
    display: block;
    margin: .05rem .15rem .15rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
  }

  .ob-mob-card {
    min-height: 62px;
    padding: .65rem .75rem !important;
    border-radius: 14px !important;
  }

  .ob-mob-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem !important;
  }

  .ob-mob-tabs .ob-bar-tab,
  .ob-mob-btn {
    min-height: 48px;
  }

  .ob-mob-input,
  .ob-mob-val {
    min-width: 0;
    font-size: .95rem !important;
    line-height: 1.35;
  }

  .ob-mob-same-loc {
    min-height: 34px;
  }

  .nc-terminal-wrap {
    padding-inline: .75rem;
  }

  .nc-terminal {
    border-radius: 16px !important;
    overflow: hidden;
  }

  .nc-search-mobile {
    gap: .55rem;
    padding: .7rem !important;
  }

  .nc-mob-field {
    min-height: 62px;
    margin: 0 !important;
    padding: .65rem .75rem;
    border: 1px solid rgba(0, 212, 255, .22);
    border-radius: 12px;
    background: rgba(0, 212, 255, .045);
    box-sizing: border-box;
  }

  .nc-mob-field .nc-bar-input {
    min-height: 26px;
    border-bottom: 0 !important;
  }

  .nc-mob-field .nc-veh-switch {
    width: 100%;
  }

  .nc-search-mobile > .nc-submit {
    min-height: 50px;
    border-radius: 10px;
  }

  /* Carbon Sport: retain the dark motorsport styling with a calmer layout. */
  .cs-search-wrap {
    padding-inline: .75rem;
  }

  .cs-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
    padding: .7rem !important;
    border-radius: 16px !important;
  }

  .cs-bar-col {
    width: 100% !important;
    min-height: 62px;
    padding: .65rem .75rem !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 11px !important;
    box-sizing: border-box;
  }

  .cs-bar-col::after {
    display: none !important;
  }

  .cs-bar-dates {
    padding: .55rem !important;
  }

  .cs-dt-card {
    min-width: 0;
    min-height: 92px;
    padding: .55rem !important;
  }

  .cs-veh-switch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem !important;
  }

  .cs-veh-tab,
  .cs-search-btn {
    min-height: 46px;
  }

  /* All custom range pickers become a consistent bottom sheet. */
  html body :is(#hp-drp-panel, #cy-drp-panel, #sk-drp-panel, #iz-drp-panel, #skg-drp-panel, #gns-drp-panel, #eg-drp-panel, #tr-drp-panel, #ob-drp-panel, #nc-drp-panel, #cs-drp-panel) {
    position: fixed !important;
    inset: auto .5rem .5rem .5rem !important;
    max-height: 86dvh !important;
    overflow-y: auto !important;
    border-radius: 20px !important;
    z-index: 10000 !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html body :is(#hp-drp-panel, #cy-drp-panel, #sk-drp-panel, #iz-drp-panel, #skg-drp-panel, #gns-drp-panel, #eg-drp-panel, #tr-drp-panel, #ob-drp-panel, #nc-drp-panel, #cs-drp-panel)::before {
    content: '';
    display: block;
    position: sticky;
    top: .55rem;
    z-index: 5;
    width: 38px;
    height: 4px;
    margin: .55rem auto .1rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .55);
  }

  :is(#hp-drp-overlay, #cy-drp-overlay, #sk-drp-overlay, #iz-drp-overlay, #skg-drp-overlay, #gns-drp-overlay, #eg-drp-overlay, #tr-drp-overlay, #ob-drp-overlay, #nc-drp-overlay, #cs-drp-overlay) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    background: rgba(15, 23, 42, .52) !important;
    backdrop-filter: blur(2px);
  }

  html body :is(#hp-drp-panel, #cy-drp-panel, #sk-drp-panel, #iz-drp-panel, #skg-drp-panel, #gns-drp-panel, #eg-drp-panel, #tr-drp-panel, #ob-drp-panel, #nc-drp-panel, #cs-drp-panel) > div:last-child {
    position: sticky;
    bottom: 0;
    z-index: 4;
    flex-wrap: wrap;
  }
}

@media (max-width: 420px) {
  .lp-search-mob,
  :is(.pr-booking-form, .md-booking-form, .el-booking-form, .lx-booking, .wg-booking),
  :is(.cy-search-bar, .sk-search-bar, .iz-search-bar, .skg-search-bar, .gns-search-bar),
  :is(.eg-search-card, .tr-search-card),
  .ob-mob,
  .cs-bar {
    padding: .6rem !important;
    border-radius: 17px !important;
  }

  :is(.eg-dt-pair, .tr-dt-pair, .cs-dt-pair) {
    gap: .35rem !important;
  }

  :is(.eg-dt-card, .tr-dt-card, .cs-dt-card) {
    padding: .5rem !important;
  }

  :is(.eg-same-loc-pill, .tr-same-loc-pill) span {
    font-size: .68rem;
  }
}

/* ── Icon-led search cards (mobile/tablet refinement) ─────────────── */
.ui-search-icon {
  display: none;
}

:is(.pr-booking-input, .md-booking-input, .el-booking-input) > span:first-child svg {
  display: block;
  width: 18px;
  height: 18px;
}

@media (min-width: 601px) and (max-width: 1180px) {
  :is(.pr-booking-form, .md-booking-form, .el-booking-form) {
    --sr-accent: #2563eb;
    --sr-soft: #eff6ff;
  }

  .md-booking-form {
    --sr-accent: #fbbf24;
    --sr-soft: rgba(251, 191, 36, .12);
  }

  .el-booking-form {
    --sr-accent: #f97316;
    --sr-soft: #fff7ed;
  }

  :is(.pr-booking-input, .md-booking-input, .el-booking-input) {
    min-height: 58px;
  }

  :is(.pr-booking-input, .md-booking-input, .el-booking-input) > span:first-child {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--sr-accent) 22%, transparent);
    border-radius: 11px;
    background: var(--sr-soft);
    color: var(--sr-accent);
  }

  /* Give the Sakura-family location and date controls a visual anchor. */
  :is(.cy-search-bar, .sk-search-bar, .iz-search-bar, .skg-search-bar, .gns-search-bar) {
    --sr-accent: #f97316;
    --sr-soft: rgba(249, 115, 22, .10);
    --sr-icon-border: rgba(249, 115, 22, .18);
  }

  .sk-search-bar {
    --sr-accent: var(--sk-rose, #ec4899);
    --sr-soft: rgba(236, 72, 153, .10);
    --sr-icon-border: rgba(236, 72, 153, .20);
  }

  .iz-search-bar {
    --sr-accent: var(--iz-gold, #b45309);
    --sr-soft: rgba(180, 83, 9, .09);
    --sr-icon-border: rgba(180, 83, 9, .18);
  }

  .skg-search-bar {
    --sr-accent: var(--skg-rose, #e0457b);
    --sr-soft: var(--skg-blush, #fff1f5);
    --sr-icon-border: var(--skg-border, #f3c7d7);
  }

  .gns-search-bar {
    --sr-accent: var(--gn-gold, #c9a046);
    --sr-soft: rgba(201, 160, 70, .12);
    --sr-icon-border: rgba(201, 160, 70, .28);
  }

  :is(.cy-bar-loc, .sk-bar-loc, .iz-bar-loc, .skg-bar-loc, .gns-bar-loc),
  :is(#cy-return-box, #sk-return-box, #iz-return-box, #skg-return-box, #gns-return-box) {
    position: relative;
    padding-left: 4.1rem !important;
  }

  :is(.cy-bar-loc, .sk-bar-loc, .iz-bar-loc, .skg-bar-loc, .gns-bar-loc) > :is(.cy-bar-lbl, .sk-bar-lbl, .iz-bar-lbl, .skg-bar-lbl, .gns-bar-lbl) svg,
  :is(#cy-return-box, #sk-return-box, #iz-return-box, #skg-return-box, #gns-return-box) > :is(.cy-bar-lbl, .sk-bar-lbl, .iz-bar-lbl, .skg-bar-lbl, .gns-bar-lbl) svg {
    position: absolute;
    left: .8rem;
    top: 50%;
    width: 40px !important;
    height: 40px !important;
    padding: 9px;
    box-sizing: border-box;
    border: 1px solid var(--sr-icon-border);
    border-radius: 12px;
    background: var(--sr-soft);
    color: var(--sr-accent);
    transform: translateY(-50%);
  }

  :is(.cy-bar-cell, .sk-bar-cell, .iz-bar-cell, .skg-bar-cell, .gns-bar-cell):has(> input[id$="-start-date"], > input[id$="-end-date"]) > :is(.cy-bar-lbl, .sk-bar-lbl, .iz-bar-lbl, .skg-bar-lbl, .gns-bar-lbl) svg {
    width: 28px !important;
    height: 28px !important;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid var(--sr-icon-border);
    border-radius: 9px;
    background: var(--sr-soft);
    color: var(--sr-accent);
  }

  /* Luxe and White Gold have no native field icons; show their SVG helpers on tablet. */
  :is(.lx-field, .wg-field):has(> .ui-search-icon) {
    position: relative;
  }

  :is(.lx-field, .wg-field) > .ui-search-icon {
    position: absolute;
    left: .7rem;
    bottom: .42rem;
    z-index: 1;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    color: var(--lx-gold, var(--wg-gold, #c9a24b));
    background: rgba(201, 162, 75, .11);
    border: 1px solid rgba(201, 162, 75, .24);
  }

  .wg-field > .ui-search-icon {
    color: var(--wg-gold, #d4af37);
    background: rgba(212, 175, 55, .09);
    border-color: rgba(212, 175, 55, .22);
  }

  :is(.lx-field, .wg-field) > .ui-search-icon svg {
    width: 18px;
    height: 18px;
  }

  :is(.lx-field, .wg-field):has(> .ui-search-icon) > input {
    padding-left: 3.35rem !important;
  }

  :is(.eg-loc-icon, .tr-loc-icon) {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
    display: grid !important;
    place-items: center;
    border-radius: 12px !important;
  }

  .eg-loc-icon { background: #ecfdf5; border: 1px solid #bbf7d0; }
  .tr-loc-icon { background: #fff7ed; border: 1px solid #fed7aa; }

  :is(.eg-dt-top, .tr-dt-top) > svg {
    width: 28px !important;
    height: 28px !important;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 9px;
  }

  .eg-dt-top > svg { background: #ecfdf5; border: 1px solid #bbf7d0; }
  .tr-dt-top > svg { background: #fff7ed; border: 1px solid #fed7aa; }
}

@media (max-width: 600px) {
  /* The CTA already states the purpose; duplicate headings only make the form longer. */
  .lp-search-mob::before,
  :is(.pr-booking-form, .md-booking-form, .el-booking-form, .lx-booking, .wg-booking)::before,
  .ob-mob::before {
    content: none !important;
    display: none !important;
  }

  /* Legacy booking forms become compact two-column icon-card forms. */
  :is(.pr-booking-form, .md-booking-form, .el-booking-form, .lx-booking, .wg-booking) {
    --sr-accent: #2563eb;
    --sr-soft: #eff6ff;
    --sr-card: #ffffff;
    --sr-line: #dbe5f3;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .55rem !important;
  }

  .md-booking-form {
    --sr-accent: #fbbf24;
    --sr-soft: rgba(251, 191, 36, .12);
    --sr-card: rgba(15, 23, 42, .64);
    --sr-line: rgba(255, 255, 255, .14);
  }

  .el-booking-form {
    --sr-accent: #f97316;
    --sr-soft: #fff7ed;
    --sr-card: #fffdf9;
    --sr-line: #fed7aa;
  }

  .lx-booking {
    --sr-accent: var(--lx-gold, #c9a24b);
    --sr-soft: rgba(201, 162, 75, .11);
    --sr-card: rgba(255, 255, 255, .035);
    --sr-line: rgba(201, 162, 75, .30);
  }

  .wg-booking {
    --sr-accent: var(--wg-gold, #d4af37);
    --sr-soft: rgba(212, 175, 55, .09);
    --sr-card: var(--wg-white, #fff);
    --sr-line: rgba(212, 175, 55, .28);
  }

  :is(.pr-booking-field, .md-booking-field, .el-booking-field, .lx-field, .wg-field):has(input:is([name="pickup_location"], [name="return_location"], [name="start_date"], [name="end_date"], [name="pickup_time"])) {
    position: relative;
    display: flex !important;
    min-width: 0;
    min-height: 70px;
    padding: .6rem .7rem .6rem 4rem !important;
    justify-content: center;
    border: 1px solid var(--sr-line) !important;
    border-radius: 15px !important;
    background: var(--sr-card) !important;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
  }

  :is(.pr-booking-field, .md-booking-field, .el-booking-field, .lx-field, .wg-field):has(input:is([name="pickup_location"], [name="return_location"], [name="pickup_time"])) {
    grid-column: 1 / -1 !important;
  }

  :is(.pr-booking-field, .md-booking-field, .el-booking-field, .lx-field, .wg-field):has(input:is([name="start_date"], [name="end_date"])) {
    grid-column: auto !important;
    padding-left: 3.3rem !important;
  }

  :is(.pr-same-loc-field, .md-same-loc-field, .el-same-loc-field, .lx-same-loc-field, .wg-same-loc-field),
  :is(.pr-vehicle-tabs, .md-vehicle-tabs, .el-vehicle-tabs, .lx-vehicle-tabs, .wg-vehicle-tabs),
  :is(.pr-booking-submit, .md-booking-submit, .el-booking-submit, .lx-booking-submit, .wg-booking-submit) {
    grid-column: 1 / -1 !important;
  }

  :is(.pr-booking-field, .md-booking-field, .el-booking-field, .lx-field, .wg-field):has(input:is([name="pickup_location"], [name="return_location"], [name="start_date"], [name="end_date"], [name="pickup_time"])):focus-within {
    border-color: var(--sr-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sr-accent) 12%, transparent) !important;
  }

  :is(.pr-booking-field, .md-booking-field, .el-booking-field, .lx-field, .wg-field):has(input:is([name="pickup_location"], [name="return_location"], [name="start_date"], [name="end_date"], [name="pickup_time"])) > label {
    position: static !important;
    margin: 0 0 .15rem !important;
    color: var(--sr-accent) !important;
    font-size: .66rem !important;
    line-height: 1.2;
    letter-spacing: .035em !important;
  }

  :is(.pr-booking-input, .md-booking-input, .el-booking-input) {
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  :is(.pr-booking-input, .md-booking-input, .el-booking-input) > span:first-child,
  :is(.lx-field, .wg-field) > .ui-search-icon {
    position: absolute;
    left: .65rem;
    top: 50%;
    z-index: 1;
    display: grid !important;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--sr-accent) 24%, transparent);
    border-radius: 12px;
    background: var(--sr-soft);
    color: var(--sr-accent);
    font-size: 1rem !important;
    line-height: 1;
    transform: translateY(-50%);
    box-sizing: border-box;
  }

  :is(.pr-booking-field, .md-booking-field, .el-booking-field, .lx-field, .wg-field):has(input:is([name="start_date"], [name="end_date"])) :is(.pr-booking-input, .md-booking-input, .el-booking-input) > span:first-child,
  :is(.lx-field, .wg-field):has(input:is([name="start_date"], [name="end_date"])) > .ui-search-icon {
    left: .55rem;
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  :is(.pr-booking-input, .md-booking-input, .el-booking-input) > span:first-child svg,
  :is(.lx-field, .wg-field) > .ui-search-icon svg {
    width: 19px;
    height: 19px;
  }

  :is(.pr-booking-input, .md-booking-input, .el-booking-input) input,
  .lx-field > input,
  .wg-field > input {
    min-width: 0 !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: .88rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :is(.pr-booking-field, .md-booking-field, .el-booking-field, .lx-field, .wg-field):has(input:is([name="start_date"], [name="end_date"])) input {
    font-size: .76rem !important;
  }

  :is(.pr-same-loc-field, .md-same-loc-field, .el-same-loc-field, .lx-same-loc-field, .wg-same-loc-field) {
    justify-content: flex-start !important;
    padding: 0 .25rem !important;
  }

  /* Sakura, Canyon, Ivory, Sakura Gold and Gold Night retain their theme,
     but their controls now read as icon cards rather than text rows. */
  :is(.cy-search-bar, .sk-search-bar, .iz-search-bar, .skg-search-bar, .gns-search-bar) {
    --sr-accent: var(--cy-red, #c2410c);
    --sr-soft: var(--cy-rose2, #fff7ed);
    --sr-icon-border: var(--cy-rose, #fed7aa);
  }

  .sk-search-bar {
    --sr-accent: var(--sk-rose, #ec4899);
    --sr-soft: rgba(236, 72, 153, .10);
    --sr-icon-border: rgba(236, 72, 153, .22);
  }

  .iz-search-bar {
    --sr-accent: var(--iz-gold, #b45309);
    --sr-soft: rgba(180, 83, 9, .08);
    --sr-icon-border: rgba(180, 83, 9, .20);
  }

  .skg-search-bar {
    --sr-accent: var(--skg-rose, #e0457b);
    --sr-soft: var(--skg-blush, #fff1f5);
    --sr-icon-border: var(--skg-border, #f3c7d7);
  }

  .gns-search-bar {
    --sr-accent: var(--gn-gold, #c9a046);
    --sr-soft: rgba(201, 160, 70, .12);
    --sr-icon-border: rgba(201, 160, 70, .30);
  }

  :is(.cy-bar-loc, .sk-bar-loc, .iz-bar-loc, .skg-bar-loc, .gns-bar-loc),
  :is(#cy-return-box, #sk-return-box, #iz-return-box, #skg-return-box, #gns-return-box) {
    position: relative;
    min-height: 72px !important;
    padding: .7rem .75rem .7rem 4.15rem !important;
  }

  :is(.cy-bar-loc, .sk-bar-loc, .iz-bar-loc, .skg-bar-loc, .gns-bar-loc) > :is(.cy-bar-lbl, .sk-bar-lbl, .iz-bar-lbl, .skg-bar-lbl, .gns-bar-lbl) svg,
  :is(#cy-return-box, #sk-return-box, #iz-return-box, #skg-return-box, #gns-return-box) > :is(.cy-bar-lbl, .sk-bar-lbl, .iz-bar-lbl, .skg-bar-lbl, .gns-bar-lbl) svg {
    position: absolute;
    left: .75rem;
    top: 50%;
    width: 42px !important;
    height: 42px !important;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid var(--sr-icon-border);
    border-radius: 12px;
    background: var(--sr-soft);
    color: var(--sr-accent);
    transform: translateY(-50%);
  }

  :is(.cy-bar-same, .sk-bar-same, .iz-bar-same, .skg-bar-same, .gns-bar-same) {
    display: inline-flex !important;
    width: max-content;
    max-width: 100%;
    min-height: 24px;
    padding: .2rem .48rem;
    border: 1px solid var(--sr-icon-border);
    border-radius: 999px;
    background: var(--sr-soft);
  }

  :is(.cy-bar-cell, .sk-bar-cell, .iz-bar-cell, .skg-bar-cell, .gns-bar-cell):has(> input[id$="-start-date"], > input[id$="-end-date"]) {
    min-height: 98px !important;
    padding: .62rem !important;
  }

  :is(.cy-bar-cell, .sk-bar-cell, .iz-bar-cell, .skg-bar-cell, .gns-bar-cell):has(> input[id$="-start-date"], > input[id$="-end-date"]) > :is(.cy-bar-lbl, .sk-bar-lbl, .iz-bar-lbl, .skg-bar-lbl, .gns-bar-lbl) {
    gap: .42rem !important;
    margin-bottom: .3rem !important;
  }

  :is(.cy-bar-cell, .sk-bar-cell, .iz-bar-cell, .skg-bar-cell, .gns-bar-cell):has(> input[id$="-start-date"], > input[id$="-end-date"]) > :is(.cy-bar-lbl, .sk-bar-lbl, .iz-bar-lbl, .skg-bar-lbl, .gns-bar-lbl) svg {
    width: 28px !important;
    height: 28px !important;
    padding: 6px;
    box-sizing: border-box;
    flex: 0 0 28px;
    border: 1px solid var(--sr-icon-border);
    border-radius: 9px;
    background: var(--sr-soft);
    color: var(--sr-accent);
  }

  :is(.cy-bar-input, .sk-bar-input, .iz-bar-input, .skg-bar-input, .gns-bar-input),
  :is(.cy-bar-time, .sk-bar-time, .iz-bar-time, .skg-bar-time, .gns-bar-time),
  :is(.eg-loc-input, .tr-loc-input, .eg-dt-val, .tr-dt-val, .ob-mob-input, .ob-mob-val, .nc-bar-input) {
    min-width: 0 !important;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Eco / Terra: soft icon tiles; Ocean: blue icon tiles. */
  :is(.eg-loc-icon, .tr-loc-icon) {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
    display: grid !important;
    place-items: center;
    border-radius: 12px !important;
  }

  .eg-loc-icon { background: #ecfdf5; border: 1px solid #bbf7d0; }
  .tr-loc-icon { background: #fff7ed; border: 1px solid #fed7aa; }

  :is(.eg-dt-top, .tr-dt-top) > svg {
    width: 28px !important;
    height: 28px !important;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 9px;
  }

  .eg-dt-top > svg { background: #ecfdf5; border: 1px solid #bbf7d0; }
  .tr-dt-top > svg { background: #fff7ed; border: 1px solid #fed7aa; }

  .ob-mob-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
    display: grid !important;
    place-items: center;
    border-radius: 12px !important;
    border: 1px solid rgba(14, 165, 233, .18);
  }

  /* Neon stays terminal-like, now with compact visual commands. */
  .nc-mob-field > label {
    display: flex;
    align-items: center;
    gap: .45rem;
    letter-spacing: .045em !important;
  }

  .nc-mob-field > label::before {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border: 1px solid rgba(0, 212, 255, .34);
    border-radius: 8px;
    background: rgba(0, 212, 255, .09);
    color: var(--nc-cyan, #00d4ff);
    font: 800 1rem/1 sans-serif;
    text-transform: none;
  }

  .nc-search-mobile > .nc-mob-field:nth-child(1) > label::before { content: '⌖'; }
  .nc-search-mobile > .nc-mob-field:nth-child(2) > label::before { content: '▦'; }
  .nc-search-mobile > .nc-mob-field:nth-child(3) > label::before { content: '◷'; color: var(--nc-pink, #ff2d78); border-color: rgba(255,45,120,.34); background: rgba(255,45,120,.09); }

  /* Carbon Sport uses compact red-on-carbon label badges. */
  .cs-bar-lbl,
  .cs-dt-lbl {
    width: max-content;
    max-width: 100%;
    min-height: 28px;
    padding: .24rem .48rem;
    border: 1px solid rgba(225, 29, 46, .30);
    border-radius: 8px;
    background: rgba(225, 29, 46, .09);
  }

  .cs-dt-lbl > svg {
    width: 16px !important;
    height: 16px !important;
  }
}

@media (max-width: 360px) {
  :is(.pr-booking-field, .md-booking-field, .el-booking-field, .lx-field, .wg-field):has(input:is([name="start_date"], [name="end_date"])) {
    grid-column: 1 / -1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-search-wrap *,
  :is(.pr-booking-form, .md-booking-form, .el-booking-form, .lx-booking, .wg-booking) *,
  :is(.cy-search-bar, .sk-search-bar, .iz-search-bar, .skg-search-bar, .gns-search-bar) * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}