/* ==========================================
 * DATETIME.CSS - MODERN DATETIME PICKER
 * FILE: /css/discover/components/datetime.css
 * VERSION: v=20251001
 * PURPOSE: DateTime picker container and dropdown styling
 * IMPORTED BY: discover.html
 * ========================================== */

/* ==========================================
 * iOS 13 COMPATIBILITY - Transform adjustment
 * When Google Maps is unavailable, shift datetime to the right
 * ========================================== */
html.ios13-no-maps .datetime-display-container {
  transform: translateX(0.5rem);
}

html.ios13-no-maps .datetime-display-container:hover {
  transform: translateX(0.5rem) translateY(-2px);
}

html.ios13-no-maps .datetime-display-container:active {
  transform: translateX(0.5rem) translateY(-1px);
}
/* DATETIME.CSS: Base container styles */
.datetime-display-container {
  /* datetime.css - Modern Layout */
  position: relative;
  display: block;
  width: 100%;
  min-height: 3.5rem;
  padding: 0;
  box-sizing: border-box;

  /* datetime.css - Modern Styling */
  cursor: pointer;
  user-select: none;
  z-index: var(--z-overlay); /* datetime.css - overlay z-index */

  /* Enhanced Interactions */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.datetime-display-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px #0000001a;
}

.datetime-display-container:active {
  transform: translateY(-1px);
  transition: all 0.1s ease-out;
}

/*
 * Single scroll body under the dropdown header. Height comes from the flex parent
 * (#datetime-picker-dropdown max-height from CSS/JS), not a fixed vh cap — avoids
 * the form being cut off with no effective scroll on short viewports.
 */
.datetime-picker-scroll-area {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Keep footer content reachable when scrolled to end */
  scroll-padding-bottom: 0.5rem;
}

/* Short-term sub-tabs (Same day / Date range) — match main booking tabs */
#datetime-picker-dropdown .dtp-short-term-subtabs {
  flex-shrink: 0;
}

#datetime-picker-dropdown .dtp-short-term-subtabs button:focus-visible {
  outline: 2px solid rgba(120, 113, 108, 0.45);
  outline-offset: 2px;
}

.dark #datetime-picker-dropdown .dtp-short-term-subtabs button:focus-visible {
  outline-color: rgba(163, 163, 163, 0.6);
}

#short-term-sub-hint {
  line-height: 1.45;
}

/* Past / invalid times: native selects only grey disabled options in some browsers */
#datetime-picker-dropdown select option:disabled {
  color: #a8a29e;
}
.dark #datetime-picker-dropdown select option:disabled,
html.dark #datetime-picker-dropdown select option:disabled {
  color: #78716c;
}

/* Compact density for the custom datetime form. Keep controls usable, but remove excess vertical air. */
#datetime-picker-dropdown .datetime-picker-scroll-area {
  max-height: none !important;
  padding: 0.85rem 1rem 1rem !important;
  scroll-padding-bottom: 0.5rem !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 113, 108, 0.45) rgba(0, 0, 0, 0.04);
}

#datetime-picker-dropdown .datetime-picker-scroll-area::-webkit-scrollbar {
  width: 8px;
}

#datetime-picker-dropdown .datetime-picker-scroll-area::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

#datetime-picker-dropdown .datetime-picker-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(120, 113, 108, 0.35);
  border-radius: 4px;
}

#datetime-picker-dropdown .datetime-picker-scroll-area::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 113, 108, 0.5);
}

.dark #datetime-picker-dropdown .datetime-picker-scroll-area {
  scrollbar-color: rgba(163, 163, 163, 0.45) rgba(0, 0, 0, 0.15);
}

.dark #datetime-picker-dropdown .datetime-picker-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(163, 163, 163, 0.35);
}

.dark #datetime-picker-dropdown .datetime-picker-scroll-area::-webkit-scrollbar-thumb:hover {
  background: rgba(163, 163, 163, 0.5);
}

#datetime-picker-dropdown #datetime-section-heading {
  margin-bottom: 0.5rem !important;
  letter-spacing: 0.08em !important;
}

#datetime-picker-dropdown .booking-section .mb-3,
#datetime-picker-dropdown #weekly-section .mb-3,
#datetime-picker-dropdown #storage-datetime-section .mb-3 {
  margin-bottom: 0.6rem !important;
}

#datetime-picker-dropdown .booking-section label,
#datetime-picker-dropdown #weekly-section label,
#datetime-picker-dropdown #storage-datetime-section label {
  margin-bottom: 0.35rem !important;
}

#datetime-picker-dropdown .dtp-short-term-subtabs {
  margin-bottom: 0.5rem !important;
  padding: 0.2rem !important;
  border-radius: 0.75rem !important;
}

#datetime-picker-dropdown .dtp-short-term-subtabs button {
  padding: 0.4rem 0.6rem !important;
  border-radius: 0.55rem !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
}

#datetime-picker-dropdown #short-term-sub-hint {
  margin-bottom: 0.55rem !important;
  line-height: 1.35 !important;
}

#datetime-picker-dropdown .dtp-time-range-panel {
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#datetime-picker-dropdown .dtp-time-range-panel.space-y-6 > * + * {
  margin-top: 0 !important;
}

#datetime-picker-dropdown .dtp-time-range-panel .pt-2 {
  padding-top: 0 !important;
}

#datetime-picker-dropdown .dtp-time-range-panel label {
  margin-bottom: 0.45rem !important;
  letter-spacing: 0.045em !important;
}

#datetime-picker-dropdown .dtp-time-row {
  gap: 0 !important;
}

#datetime-picker-dropdown input[type="date"],
#datetime-picker-dropdown #weekly-duration,
#datetime-picker-dropdown #storage-duration {
  min-height: 2.15rem !important;
  height: 2.15rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  border-radius: 0.65rem !important;
  font-size: 0.8125rem !important;
  line-height: 1.1 !important;
}

#datetime-picker-dropdown .dtp-time-row select[id$="-ampm"] {
  width: 2.85rem !important;
  min-width: 2.85rem !important;
  font-size: 0.72rem !important;
}

#datetime-picker-dropdown #estimated-cost {
  margin-top: 0.25rem !important;
}

#datetime-picker-dropdown #datetime-apply-btn,
#datetime-picker-dropdown #datetime-cancel-btn {
  min-height: 2.15rem !important;
  padding: 0.55rem 0.8rem !important;
  border-radius: 0.7rem !important;
  font-size: 0.8125rem !important;
  line-height: 1.1 !important;
}

/* Date inputs: light edge so they separate from panel background */
#datetime-picker-dropdown input[type="date"] {
  border: 1px solid rgba(120, 113, 108, 0.18) !important;
}

.dark #datetime-picker-dropdown input[type="date"] {
  border-color: rgba(115, 115, 115, 0.45) !important;
}

/* Modern Datetime Picker Dropdown */
#datetime-picker-dropdown {
  --dtp-dropdown-width: var(--discover-popover-max-width, 480px);
  --dtp-dropdown-max-height: var(--discover-popover-max-height, 560px);
  --dtp-dropdown-radius: var(--discover-popover-radius, 1rem);
  --dtp-dropdown-bg: var(--discover-popover-bg, #fafaf8);
  --dtp-dropdown-bg-dark: var(--discover-popover-bg-dark, #262626);
  --dtp-dropdown-border: var(--discover-popover-border, rgba(214, 211, 208, 0.68));
  --dtp-dropdown-border-dark: var(--discover-popover-border-dark, rgba(82, 82, 82, 0.72));
  --dtp-dropdown-shadow: var(--discover-popover-shadow, 0 20px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06));
  --dtp-dropdown-shadow-dark: var(--discover-popover-shadow-dark, 0 20px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.25));

  /* Open state uses display: flex in .show; flex child is .datetime-picker-scroll-area */
  min-width: 0;
  max-width: var(--dtp-dropdown-width);
  width: auto;
  max-height: var(--dtp-dropdown-max-height) !important;
  min-height: 0;

  z-index: var(--z-discover-datetime-dropdown) !important;

  /* opacity/transition/pointer-events owned by discover-popover.css shell */

  /* Use flex in show state; hidden uses display from utilities */
  visibility: visible;

  /* CRITICAL: Ensure dropdown can escape any container constraints */
  position: fixed !important;

  /* CRITICAL: Force new stacking context above everything */
  isolation: isolate !important;

  /* One scroll region inside; outer clips so flex + max-height can shrink the body */
  overflow: hidden;

  background: var(--dtp-dropdown-bg) !important;
  border: 1px solid var(--dtp-dropdown-border) !important;
  border-radius: var(--dtp-dropdown-radius) !important;
  box-shadow: var(--dtp-dropdown-shadow) !important;
}

.dark #datetime-picker-dropdown {
  background: var(--dtp-dropdown-bg-dark) !important;
  border-color: var(--dtp-dropdown-border-dark) !important;
  box-shadow: var(--dtp-dropdown-shadow-dark) !important;
}

/* Tailwind .hidden must win over #id { display: flex } */
#datetime-picker-dropdown.hidden {
  display: none !important;
}

/* Narrow viewports (all phones): avoid fixed 480×360 "desktop card" feel; JS also uses MOBILE_WIDE for inset layout */
@media (max-width: 567px) {
  #datetime-picker-dropdown {
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: var(--discover-mobile-panel-radius, 0.875rem) !important;
  }

  #datetime-picker-dropdown > .dtp-picker-header.shrink-0,
  #datetime-picker-dropdown > .dtp-picker-header {
    padding: 0.75rem 0.85rem 0.65rem !important;
  }

  #datetime-picker-dropdown #booking-type-hint,
  #datetime-picker-dropdown #storage-top-section p {
    margin-bottom: 0.45rem !important;
    font-size: 0.69rem !important;
    line-height: 1.25 !important;
  }

  #datetime-picker-dropdown #parking-booking-tabs h3,
  #datetime-picker-dropdown #datetime-section-heading {
    margin-bottom: 0.4rem !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.065em !important;
  }

  #datetime-picker-dropdown #quick-presets {
    gap: 0.4rem !important;
  }

  #datetime-picker-dropdown .datetime-preset-btn {
    min-height: 1.9rem !important;
    padding: 0.4rem 0.55rem !important;
    border-radius: 0.65rem !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
  }

  #datetime-picker-dropdown .datetime-picker-scroll-area {
    /* Height from flex + max-height; footer owns safe-area inset */
    padding: 0.65rem 0.85rem 0.65rem !important;
    scroll-padding-bottom: 0.65rem !important;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }

  #datetime-picker-dropdown .booking-section .mb-3,
  #datetime-picker-dropdown #weekly-section .mb-3,
  #datetime-picker-dropdown #storage-datetime-section .mb-3 {
    margin-bottom: 0.45rem !important;
  }

  #datetime-picker-dropdown .booking-section label,
  #datetime-picker-dropdown #weekly-section label,
  #datetime-picker-dropdown #storage-datetime-section label,
  #datetime-picker-dropdown .dtp-time-range-panel label {
    margin-bottom: 0.3rem !important;
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.035em !important;
  }

  #datetime-picker-dropdown .dtp-short-term-subtabs {
    margin-bottom: 0.4rem !important;
    padding: 0.16rem !important;
    border-radius: 0.65rem !important;
  }

  #datetime-picker-dropdown .dtp-short-term-subtabs button {
    min-height: 1.8rem !important;
    padding: 0.35rem 0.45rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.7rem !important;
  }

  #datetime-picker-dropdown #short-term-sub-hint {
    margin-bottom: 0.45rem !important;
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  #datetime-picker-dropdown .dtp-time-range-panel {
    padding: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #datetime-picker-dropdown .dtp-time-range-panel.space-y-6 > * + * {
    margin-top: 0 !important;
  }

  #datetime-picker-dropdown .dtp-time-range-panel .pt-2 {
    padding-top: 0 !important;
  }

  #datetime-picker-dropdown .dtp-time-row {
    gap: 0 !important;
  }

  #datetime-picker-dropdown input[type="date"],
  #datetime-picker-dropdown #weekly-duration,
  #datetime-picker-dropdown #storage-duration {
    min-height: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0.4rem 0.65rem !important;
    border-radius: 0.58rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
  }

  #datetime-picker-dropdown .dtp-time-row select {
    min-height: 100% !important;
    height: 100% !important;
    padding: 0 0.5rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
  }

  #datetime-picker-dropdown .dtp-time-row select[id$="-hour"],
  #datetime-picker-dropdown .dtp-time-row select[id$="-minute"] {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }

  #datetime-picker-dropdown .dtp-time-row select[id$="-ampm"] {
    width: 3.25rem !important;
    min-width: 3.25rem !important;
    max-width: 3.25rem !important;
    flex: 0 0 3.25rem !important;
    font-size: 0.8125rem !important;
  }

  #datetime-picker-dropdown .dtp-time-row > span {
    padding: 0 0.025rem !important;
    font-size: 0.9rem !important;
  }

  #datetime-picker-dropdown #duration-text {
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
  }

  #datetime-picker-dropdown #estimated-cost {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  #datetime-picker-dropdown #datetime-picker-inline-validation {
    margin-bottom: 0.5rem !important;
    padding: 0.5rem 0.6rem !important;
    border-radius: 0.65rem !important;
    font-size: 0.75rem !important;
  }

  #datetime-picker-dropdown .datetime-picker-scroll-area > .flex.gap-2 {
    gap: 0.45rem !important;
  }
}

/* ==========================================
 * DATETIME REMODEL PASS
 * Compact picker density and attached top-bar treatment.
 * ========================================== */
.datetime-display-container.dtp-trigger-attached {
  border-color: rgba(120, 113, 108, 0.36) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08) !important;
}

.datetime-display-container.dtp-trigger-attached-below {
  border-bottom-color: rgba(120, 113, 108, 0.18) !important;
  border-bottom-left-radius: 0.45rem !important;
  border-bottom-right-radius: 0.45rem !important;
}

.dark .datetime-display-container.dtp-trigger-attached {
  border-color: rgba(115, 115, 115, 0.7) !important;
}

.dark .datetime-display-container.dtp-trigger-attached-below {
  border-bottom-color: rgba(82, 82, 82, 0.45) !important;
}

#datetime-picker-dropdown {
  --dtp-dropdown-width: 360px;
  --dtp-dropdown-radius: 14px;
  --dtp-dropdown-shadow: 0 16px 36px rgba(0, 0, 0, 0.13), 0 3px 10px rgba(0, 0, 0, 0.07);
  --dtp-trigger-width: 100%;

  border-radius: var(--dtp-dropdown-radius) !important;
  box-shadow: var(--dtp-dropdown-shadow) !important;
}

#datetime-picker-dropdown.dtp-attached-below {
  border-top-left-radius: 0.45rem !important;
  border-top-right-radius: 0.75rem !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.06) !important;
}

#datetime-picker-dropdown.dtp-attached-above {
  border-bottom-left-radius: 0.45rem !important;
}

#datetime-picker-dropdown.dtp-attached-below::before,
#datetime-picker-dropdown.dtp-attached-above::before {
  content: "";
  position: absolute;
  left: -1px;
  width: min(var(--dtp-trigger-width), calc(100% + 2px));
  height: 1px;
  background: var(--dtp-dropdown-bg, #fafaf8);
  pointer-events: none;
  z-index: 1;
}

#datetime-picker-dropdown.dtp-attached-below::before {
  top: -1px;
}

#datetime-picker-dropdown.dtp-attached-above::before {
  bottom: -1px;
}

.dark #datetime-picker-dropdown.dtp-attached-below::before,
.dark #datetime-picker-dropdown.dtp-attached-above::before {
  background: var(--dtp-dropdown-bg-dark, #262626);
}

#datetime-picker-dropdown > .dtp-picker-header {
  padding: 0.72rem 0.95rem 0.65rem !important;
}

#datetime-picker-dropdown #booking-type-hint {
  margin-bottom: 0.5rem !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
}

#datetime-picker-dropdown #parking-booking-tabs h3 {
  margin-bottom: 0.4rem !important;
  font-size: 0.64rem !important;
  letter-spacing: 0.07em !important;
}

#datetime-picker-dropdown #quick-presets {
  gap: 0.38rem !important;
}

#datetime-picker-dropdown .datetime-preset-btn {
  min-height: 1.75rem !important;
  padding: 0.35rem 0.58rem !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  border-radius: 0.75rem !important;
  border: 1px solid var(--discover-popover-border, rgba(214, 211, 208, 0.68)) !important;
  background: var(--discover-popover-bg-elevated, #ffffff) !important;
  color: var(--discover-popover-text, #292524) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#datetime-picker-dropdown .datetime-preset-btn:hover {
  background: var(--discover-popover-hover, rgba(245, 245, 244, 0.92)) !important;
}

#datetime-picker-dropdown .datetime-preset-btn.dtp-preset--selected {
  background: var(--discover-brand-accent, #0f5a56) !important;
  border-color: transparent !important;
  color: var(--discover-brand-accent-text, #ffffff) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(15, 90, 86, 0.22) !important;
}

#datetime-picker-dropdown .datetime-preset-btn.dtp-preset--selected:hover {
  background: var(--discover-brand-accent-hover, #0c4a47) !important;
}

.dark #datetime-picker-dropdown .datetime-preset-btn,
html.dark #datetime-picker-dropdown .datetime-preset-btn {
  background: var(--discover-popover-bg-dark-elevated, #2f2f2f) !important;
  border-color: var(--discover-popover-border-dark, rgba(82, 82, 82, 0.72)) !important;
  color: var(--discover-popover-text-dark, #f5f5f4) !important;
}

.dark #datetime-picker-dropdown .datetime-preset-btn:hover,
html.dark #datetime-picker-dropdown .datetime-preset-btn:hover {
  background: var(--discover-popover-hover-dark, rgba(64, 64, 64, 0.78)) !important;
}

.dark #datetime-picker-dropdown .datetime-preset-btn.dtp-preset--selected,
html.dark #datetime-picker-dropdown .datetime-preset-btn.dtp-preset--selected {
  background: #f5f5f4 !important;
  border-color: transparent !important;
  color: #0a0a0a !important;
  box-shadow: none !important;
}

.dark #datetime-picker-dropdown .datetime-preset-btn.dtp-preset--selected:hover,
html.dark #datetime-picker-dropdown .datetime-preset-btn.dtp-preset--selected:hover {
  background: #e7e5e4 !important;
}

#datetime-picker-dropdown .datetime-picker-scroll-area {
  padding: 0.65rem 0.95rem 0.85rem !important;
}

#datetime-picker-dropdown .dtp-picker-row-heading {
  margin-bottom: 0.55rem !important;
}

#datetime-picker-dropdown #datetime-section-heading {
  margin-bottom: 0.55rem !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.075em !important;
}

#datetime-picker-dropdown .dtp-duration-slot {
  display: grid;
  grid-template-rows: 0fr;
  min-width: 0;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 1px solid transparent !important;
  opacity: 0;
  pointer-events: none;
  transition:
    grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease,
    margin-top 280ms cubic-bezier(0.22, 1, 0.36, 1),
    padding-top 280ms cubic-bezier(0.22, 1, 0.36, 1),
    border-top-color 200ms ease;
}

#datetime-picker-dropdown .dtp-duration-slot.is-expanded {
  grid-template-rows: 1fr;
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
  border-top-color: var(--dtp-panel-border) !important;
  opacity: 1;
  pointer-events: auto;
}

#datetime-picker-dropdown .dtp-duration-slot > .dtp-duration-bar,
#datetime-picker-dropdown .dtp-duration-slot > .dtp-duration-inline {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #datetime-picker-dropdown .dtp-duration-slot {
    transition: none;
  }
}

#datetime-picker-dropdown .dtp-time-range-panel .dtp-duration-slot {
  grid-column: 1 / -1 !important;
}

#datetime-picker-dropdown .dtp-duration-inline {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.75rem !important;
  max-width: 100%;
  white-space: nowrap;
}

#datetime-picker-dropdown .dtp-duration-label {
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
}

#datetime-picker-dropdown #duration-text {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

#datetime-picker-dropdown #estimated-cost {
  display: none !important;
}

#datetime-picker-dropdown[data-space-type="storage"] #duration-summary {
  display: none !important;
}

#datetime-picker-dropdown .booking-section .mb-3,
#datetime-picker-dropdown #weekly-section .mb-3,
#datetime-picker-dropdown #storage-datetime-section .mb-3 {
  margin-bottom: 0.48rem !important;
}

#datetime-picker-dropdown .booking-section label,
#datetime-picker-dropdown #weekly-section label,
#datetime-picker-dropdown #storage-datetime-section label {
  margin-bottom: 0.28rem !important;
  font-size: 0.68rem !important;
  line-height: 1.1 !important;
}

#datetime-picker-dropdown .dtp-short-term-subtabs {
  margin-bottom: 0.45rem !important;
}

#datetime-picker-dropdown #short-term-sub-hint {
  margin-bottom: 0.5rem !important;
  font-size: 0.7rem !important;
  line-height: 1.25 !important;
}

#datetime-picker-dropdown input[type="date"],
#datetime-picker-dropdown #weekly-duration,
#datetime-picker-dropdown #storage-duration,
#datetime-picker-dropdown .dtp-time-row select {
  min-height: 2rem !important;
  height: 2rem !important;
  border-radius: 0.58rem !important;
  font-size: 0.78rem !important;
}

#datetime-picker-dropdown .dtp-date-field {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--dtp-field-height, 2.5rem);
  border: 1px solid var(--dtp-panel-border, rgba(120, 113, 108, 0.18));
  border-radius: var(--dtp-field-radius, 0.75rem);
  background: var(--dtp-control-bg, #ffffff);
  box-sizing: border-box;
  overflow: hidden;
}

.dark #datetime-picker-dropdown .dtp-date-field {
  border-color: rgba(115, 115, 115, 0.45);
  background: var(--dtp-control-bg, #2f2f2f);
}

#datetime-picker-dropdown .dtp-date-field .dtp-input,
#datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
  position: relative;
  z-index: 1;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#datetime-picker-dropdown .dtp-date-readable {
  display: flex !important;
  align-items: center;
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0 0.875rem;
  pointer-events: none;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--dtp-control-text, #292524);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#datetime-picker-dropdown .dtp-date-readable.dtp-date-readable--empty {
  color: var(--dtp-muted, #78716c);
}

.dark #datetime-picker-dropdown .dtp-date-readable {
  color: var(--dtp-control-text, #f5f5f4);
}

.dark #datetime-picker-dropdown .dtp-date-readable.dtp-date-readable--empty {
  color: var(--dtp-muted, #a8a29e);
}

#datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-date-input-has-readable::-webkit-datetime-edit,
#datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-date-input-has-readable::-webkit-datetime-edit-fields-wrapper,
#datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-date-input-has-readable::-webkit-datetime-edit-text,
#datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-date-input-has-readable::-webkit-datetime-edit-month-field,
#datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-date-input-has-readable::-webkit-datetime-edit-day-field,
#datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-date-input-has-readable::-webkit-datetime-edit-year-field {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

#datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-date-input-has-readable {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: auto;
}

#datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-date-input-has-readable::-webkit-date-and-time-value {
  opacity: 0 !important;
}

#datetime-picker-dropdown .dtp-time-range-panel {
  gap: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#datetime-picker-dropdown .dtp-time-range-panel > div {
  grid-template-columns: none !important;
  gap: 0 !important;
}

#datetime-picker-dropdown .dtp-time-range-panel label {
  font-size: 0.75rem !important;
  letter-spacing: normal !important;
}

#datetime-picker-dropdown .dtp-time-row {
  justify-content: stretch !important;
  gap: 0 !important;
}

#datetime-picker-dropdown .dtp-time-row select[id$="-hour"],
#datetime-picker-dropdown .dtp-time-row select[id$="-minute"] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 1 1 0 !important;
}

#datetime-picker-dropdown .dtp-time-row select[id$="-ampm"] {
  width: 3.25rem !important;
  min-width: 3.25rem !important;
  max-width: 3.25rem !important;
  flex: 0 0 3.25rem !important;
  font-size: 0.8125rem !important;
}

@media (min-width: 1101px) {
  #datetime-picker-dropdown {
    --dtp-dropdown-width: 360px;

    width: var(--dtp-dropdown-width) !important;
    max-width: var(--dtp-dropdown-width) !important;
  }
}

@media (max-width: 567px) {
  #datetime-picker-dropdown .dtp-duration-inline {
    padding: 0.22rem 0.42rem !important;
  }

  #datetime-picker-dropdown .dtp-duration-label {
    display: none;
  }

  #datetime-picker-dropdown #duration-text {
    font-size: 0.72rem !important;
  }

  #datetime-picker-dropdown .dtp-time-row {
    justify-content: flex-start !important;
  }
}

@media (max-width: 400px) {
  #datetime-picker-dropdown {
    max-height: var(--discover-mobile-overlay-max-height, calc(100dvh - 2rem)) !important;
  }

  #datetime-picker-dropdown > .dtp-picker-header.shrink-0,
  #datetime-picker-dropdown > .dtp-picker-header {
    padding: 0.65rem 0.75rem 0.55rem !important;
  }

  #datetime-picker-dropdown .datetime-picker-scroll-area {
    padding: 0.55rem 0.75rem 0.55rem !important;
  }

  #datetime-picker-dropdown .datetime-preset-btn {
    min-height: 1.75rem !important;
    padding-inline: 0.45rem !important;
  }

  #datetime-picker-dropdown input[type="date"],
  #datetime-picker-dropdown #weekly-duration,
  #datetime-picker-dropdown #storage-duration {
    min-height: 2.25rem !important;
    height: 2.25rem !important;
    font-size: 0.8125rem !important;
  }

  #datetime-picker-dropdown .dtp-time-row select {
    min-height: 2.375rem !important;
    height: 2.375rem !important;
    font-size: 0.875rem !important;
  }

  #datetime-picker-dropdown select[id$="-hour"],
  #datetime-picker-dropdown select[id$="-minute"] {
    width: auto !important;
    min-width: 2.75rem !important;
  }

  #datetime-picker-dropdown select[id$="-ampm"],
  #datetime-picker-dropdown .dtp-time-row select[id$="-ampm"] {
    width: 2.875rem !important;
    min-width: 2.875rem !important;
  }
}

#datetime-picker-dropdown.show {
  opacity: 1;
  pointer-events: auto;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  isolation: isolate !important;
}

/* ==========================================
 * BOOKING TYPE TABS - Hourly/Daily/Weekly
 * Simplified, clean tab buttons
 * ========================================== */

/* Tab container - simplified without background */
#datetime-picker-dropdown .flex.bg-gray-100,
#datetime-picker-dropdown .flex.dark\:bg-neutral-700 {
  gap: 0.5rem !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Individual tabs - simplified styling */
#datetime-picker-dropdown #hourly-tab,
#datetime-picker-dropdown #daily-tab,
#datetime-picker-dropdown #weekly-tab {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0.625rem 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border-radius: 0.5rem !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  background: transparent !important;
  border: 1px solid var(--discover-popover-border, rgba(214, 211, 208, 0.68)) !important;
  color: var(--discover-popover-text-muted, #78716c) !important;
}

.dark #datetime-picker-dropdown #hourly-tab,
.dark #datetime-picker-dropdown #daily-tab,
.dark #datetime-picker-dropdown #weekly-tab {
  border-color: var(--discover-popover-border-dark, rgba(82, 82, 82, 0.72)) !important;
  color: var(--discover-popover-text-muted-dark, #a8a29e) !important;
}

#datetime-picker-dropdown #hourly-tab:hover,
#datetime-picker-dropdown #daily-tab:hover,
#datetime-picker-dropdown #weekly-tab:hover {
  background: var(--discover-popover-hover, rgba(245, 245, 244, 0.92)) !important;
  border-color: rgba(168, 162, 158, 0.55) !important;
  color: var(--discover-popover-text, #292524) !important;
}

.dark #datetime-picker-dropdown #hourly-tab:hover,
.dark #datetime-picker-dropdown #daily-tab:hover,
.dark #datetime-picker-dropdown #weekly-tab:hover {
  background: var(--discover-popover-hover-dark, rgba(64, 64, 64, 0.78)) !important;
  border-color: rgba(115, 115, 115, 0.68) !important;
  color: var(--discover-popover-text-dark, #f5f5f4) !important;
}

/* Active tab styling */
#datetime-picker-dropdown #hourly-tab[class*="bg-white"],
#datetime-picker-dropdown #daily-tab[class*="bg-white"],
#datetime-picker-dropdown #weekly-tab[class*="bg-white"],
#datetime-picker-dropdown #hourly-tab.bg-white,
#datetime-picker-dropdown #daily-tab.bg-white,
#datetime-picker-dropdown #weekly-tab.bg-white {
  background: var(--discover-premium-ink) !important;
  color: var(--discover-premium-surface-solid) !important;
  border-color: var(--discover-premium-ink) !important;
  box-shadow: none !important;
}

.dark #datetime-picker-dropdown #hourly-tab.bg-white,
.dark #datetime-picker-dropdown #daily-tab.bg-white,
.dark #datetime-picker-dropdown #weekly-tab.bg-white {
  background: #f5f5f4 !important;
  border-color: #f5f5f4 !important;
  color: #1c1917 !important;
}

/* ==========================================
 * TIME INPUT SECTIONS - Hour/Minute/AM-PM
 * Compact, well-proportioned time selects
 * ========================================== */

/* Time rows: markup uses gap-1.5 (not gap-1); center cluster inside beige panels */
#datetime-picker-dropdown .dtp-time-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem 0.5rem !important;
}

#datetime-picker-dropdown .flex.items-center.gap-1 {
  gap: 0.375rem !important;
}

/* Hour and Minute selects - fixed width (do not stretch with flex-1 from markup) */
#datetime-picker-dropdown select[id$="-hour"],
#datetime-picker-dropdown select[id$="-minute"] {
  flex: 0 0 auto !important;
  width: 3.25rem !important;
  min-width: 3.25rem !important;
  max-width: 3.25rem !important;
  padding: 0.5rem 0.25rem !important;
  font-size: 0.875rem !important;
  text-align: center !important;
  text-align-last: center !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(120, 113, 108, 0.22) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset !important;
}

.dark #datetime-picker-dropdown select[id$="-hour"],
.dark #datetime-picker-dropdown select[id$="-minute"] {
  border-color: rgba(115, 115, 115, 0.45) !important;
  box-shadow: none !important;
}

/* AM/PM select */
#datetime-picker-dropdown select[id$="-ampm"] {
  flex: 0 0 auto !important;
  width: 3rem !important;
  min-width: 3rem !important;
  max-width: 3rem !important;
  padding: 0.5rem 0.25rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  text-align-last: center !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(120, 113, 108, 0.28) !important;
}

.dark #datetime-picker-dropdown select[id$="-ampm"] {
  border-color: rgba(115, 115, 115, 0.5) !important;
}

/* Colon separator */
#datetime-picker-dropdown .dtp-time-row > span,
#datetime-picker-dropdown .flex.items-center.gap-1 > span.text-gray-400,
#datetime-picker-dropdown .flex.items-center.gap-1 > span.text-gray-500,
#datetime-picker-dropdown .flex.items-center.gap-1 > span {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 0.125rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

.dark #datetime-picker-dropdown .dtp-time-row > span,
.dark #datetime-picker-dropdown .flex.items-center.gap-1 > span {
  color: #94a3b8 !important;
}

/* SECTION SPACING - More breathing room */

/* Section padding */
#datetime-picker-dropdown > div.p-4 {
  padding: 1rem !important;
}

/* Section headers with cleaner borders */
#datetime-picker-dropdown .border-b {
  padding-bottom: 1rem !important;
  margin-bottom: 0 !important;
  border-bottom-color: rgba(214, 211, 208, 0.6) !important;
}

.dark #datetime-picker-dropdown .border-b {
  border-bottom-color: rgba(64, 64, 64, 0.6) !important;
}

/* Section titles and labels */
#datetime-picker-dropdown h3.text-xs,
#datetime-picker-dropdown label.text-xs {
  color: #78716C !important;
  font-weight: 600 !important;
}

.dark #datetime-picker-dropdown h3.text-xs,
.dark #datetime-picker-dropdown label.text-xs {
  color: #A8A29E !important;
}

/* Label text inside time sections */
#datetime-picker-dropdown label.block {
  color: #78716C !important;
  font-weight: 500 !important;
}

.dark #datetime-picker-dropdown label.block {
  color: #A8A29E !important;
}

/* Quick select section headings */
#datetime-picker-dropdown .uppercase {
  font-size: 0.6875rem !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  color: #78716C !important;
}

.dark #datetime-picker-dropdown .uppercase {
  color: #A8A29E !important;
}

/* Space between major sections */
#datetime-picker-dropdown .space-y-3 > * + * {
  margin-top: 0.625rem !important;
}

#datetime-picker-dropdown .space-y-4 > * + * {
  margin-top: 0.75rem !important;
}

/* Gap between Start Time and End Time in Custom Range (hourly, daily, weekly) */
#datetime-picker-dropdown .booking-section .space-y-3 > * + *,
#datetime-picker-dropdown .booking-section .space-y-2\.5 > * + * {
  margin-top: 1rem !important;
}

/* PRESET BUTTONS - Quick Select Grid */

/* Preset button grid */
#datetime-picker-dropdown .grid.grid-cols-2 {
  gap: 0.5rem !important;
  margin-bottom: 0 !important;
}

/* Quick presets container — header border provides separation; avoid eating scroll area */
#datetime-picker-dropdown #quick-presets {
  margin-bottom: 0 !important;
}

/* Date field: fit parent container (no overflow). ResponsiveManager no longer sets inline styles on these inputs. */
#datetime-picker-dropdown #hourly-date-input,
#datetime-picker-dropdown input[type="date"],
#datetime-picker-dropdown #custom-date-input,
#datetime-picker-dropdown #daily-start-date,
#datetime-picker-dropdown #daily-end-date,
#datetime-picker-dropdown #weekly-start-date {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
#datetime-picker-dropdown .booking-section .mb-3:has(#hourly-date-input),
#datetime-picker-dropdown .booking-section .mb-3:has(input[type="date"]) {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Action Buttons */
#datetime-picker-dropdown #datetime-apply-btn {
  background: #292524 !important;
  color: white !important;
  font-weight: 600 !important;
  border-radius: 0.75rem !important;
  transition: all 0.15s ease !important;
  border: none !important;
}

#datetime-picker-dropdown #datetime-apply-btn:hover {
  background: #1C1917 !important;
}

.dark #datetime-picker-dropdown #datetime-apply-btn {
  background: #0a0a0a !important;
  color: #ffffff !important;
}

.dark #datetime-picker-dropdown #datetime-apply-btn:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

#datetime-picker-dropdown #datetime-cancel-btn {
  background: var(--discover-popover-bg-elevated, #ffffff) !important;
  border: 1px solid var(--discover-popover-border, rgba(214, 211, 208, 0.68)) !important;
  color: var(--discover-popover-text, #292524) !important;
  border-radius: 0.75rem !important;
  transition: all 0.15s ease !important;
}

.dark #datetime-picker-dropdown #datetime-cancel-btn {
  background: var(--discover-popover-bg-dark-elevated, #2f2f2f) !important;
  border-color: var(--discover-popover-border-dark, rgba(82, 82, 82, 0.72)) !important;
  color: var(--discover-popover-text-dark, #f5f5f4) !important;
}

#datetime-picker-dropdown #datetime-cancel-btn:hover {
  background: var(--discover-popover-hover, rgba(245, 245, 244, 0.92)) !important;
}

.dark #datetime-picker-dropdown #datetime-cancel-btn:hover {
  background: var(--discover-popover-hover-dark, rgba(64, 64, 64, 0.78)) !important;
}

#datetime-apply-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#datetime-cancel-btn:hover {
  transform: translateY(-1px);
}

.dark #custom-date-input:focus,
.dark #custom-start-time:focus,
.dark #custom-end-time:focus {
  box-shadow: var(--discover-premium-focus);
}

.dark #datetime-apply-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark #datetime-cancel-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Ensure proper text alignment and spacing in datetime field */
.datetime-display-container .flex.items-center {
  align-items: center !important;
}
.datetime-display-container .flex-1.min-w-0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  /* CENTERED: Horizontally center datetime text */
  align-items: center;
  text-align: center;
}
/* Ensure text doesn't overflow and is centered */
.datetime-display-container .text-xs,
.datetime-display-container .text-sm,
.datetime-display-container .datetime-label-text,
.datetime-display-container #datetime-display-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center !important;
  width: 100%;
}
/* Completely hide the datetime input - it should be invisible but functional */
#start-time {
  /* CRITICAL: Hide the native datetime input completely */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;

  /* Make it completely invisible */
  opacity: 0 !important;
  visibility: hidden !important;

  /* Remove all visual styling */
  background: transparent !important;
  border: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;

  /* Hide text content */
  color: transparent !important;
  text-shadow: none !important;
  font-size: 16px !important; /* Prevent mobile zoom */

  /* Remove browser styling */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  -webkit-text-fill-color: transparent !important;

  /* Ensure it's still clickable but invisible */
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: var(--z-search-focus) !important;

  /* Move any text completely off-screen */
  text-indent: -9999px !important;
  overflow: hidden !important;
}
/* Make sure the input covers the entire container */
.datetime-display-container:has(#start-time) {
  position: relative;
}
/* Remove conflicting pointer-events rules - let datetime input handle clicks */

/* Datetime container text sizing - Base mobile styles */
.datetime-display-container .text-xs {
  font-size: 0.75rem; /* Readable label */
  line-height: 1rem; /* Tight line height */
}

.datetime-display-container .text-sm {
  font-size: 0.875rem; /* Readable value text */
  line-height: 1.125rem; /* Tight line height */
}

/* Note: Desktop overrides for these are in the @media (min-width: 1101px) block below */

/* Ensure text content doesn't expand container */
.datetime-display-container .pl-6 {
  padding-left: 1.5rem;
  padding-right: 2rem; /* Space for dropdown arrow */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%; /* Fill container height */
}
/* Ensure icons stay properly positioned */
.datetime-display-container .absolute {
  z-index: var(--z-search); /* Above text content */
}
/* Remove any margin that might expand container */
.datetime-display-container .mt-0\.5,
.datetime-display-container .mt-1 {
  margin-top: 0;
}

/* NOTE: Dark mode contrast styles consolidated in dark-mode.css */

/* ========================================
 * RESPONSIVE DATETIME DROPDOWN SIZING
 * Note: max-height: 580px is set in base #datetime-picker-dropdown rule (line 63)
 * Desktop does NOT override this to preserve consistent picker height
 * ======================================== */

/* TOUCH DEVICE SPECIFIC: Force horizontal centering */

/* Touch devices (phones/tablets) - Comprehensive responsive styling */
@media (hover: none) and (pointer: coarse) and (max-width: 1100px) {
  /* Width/position owned by DateTimePicker.js + discover-popover.css */
  #datetime-picker-dropdown {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  /* INNER CONTAINER PADDING — skip shell regions with their own padding rules */
  #datetime-picker-dropdown > div:not(.dtp-picker-header):not(.datetime-picker-scroll-area):not(.dtp-picker-body):not(.dtp-picker-footer),
  #datetime-picker-dropdown .p-4,
  #datetime-picker-dropdown .p-5,
  #datetime-picker-dropdown .p-6 {
    padding: 0.75rem !important;
  }

  #datetime-picker-dropdown .px-4,
  #datetime-picker-dropdown .px-5,
  #datetime-picker-dropdown .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  #datetime-picker-dropdown .py-3,
  #datetime-picker-dropdown .py-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* SPACING */
  #datetime-picker-dropdown .space-y-3 > * + *,
  #datetime-picker-dropdown .space-y-4 > * + * {
    margin-top: 0.5rem !important;
  }

  #datetime-picker-dropdown .gap-2 {
    gap: 0.375rem !important;
  }

  #datetime-picker-dropdown .gap-3,
  #datetime-picker-dropdown .gap-4 {
    gap: 0.5rem !important;
  }

  /* TABS: Properly spaced with gap */
  #datetime-picker-dropdown .flex.bg-gray-100,
  #datetime-picker-dropdown .flex.dark\:bg-neutral-700 {
    gap: 0.25rem !important;
    padding: 0.1875rem !important;
  }

  #datetime-picker-dropdown #hourly-tab,
  #datetime-picker-dropdown #daily-tab,
  #datetime-picker-dropdown #weekly-tab {
    padding: 0.4375rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 30px !important;
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0.3125rem !important;
  }

  /* TIME SELECTS: Compact sizing */
  #datetime-picker-dropdown select[id$="-hour"],
  #datetime-picker-dropdown select[id$="-minute"] {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    max-width: 2.75rem !important;
    padding: 0.4375rem 0.125rem !important;
    font-size: 0.8125rem !important;
  }

  #datetime-picker-dropdown select[id$="-ampm"] {
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    max-width: 2.5rem !important;
    padding: 0.4375rem 0.125rem !important;
    font-size: 0.75rem !important;
  }

  /* Time row container */
  #datetime-picker-dropdown .flex.items-center.gap-1 {
    gap: 0.25rem !important;
    flex-wrap: nowrap !important;
  }

  /* PRESET BUTTONS: Compact grid */
  #datetime-picker-dropdown .datetime-preset-btn {
    padding: 0.4375rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 30px !important;
    border-radius: 0.375rem !important;
  }

  /* ACTION BUTTONS — footer actions stay side-by-side; full-width only in legacy scroll-body layouts */
  #datetime-picker-dropdown .datetime-picker-scroll-area #datetime-apply-btn,
  #datetime-picker-dropdown .datetime-picker-scroll-area #datetime-cancel-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
    min-height: 34px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #datetime-picker-dropdown .dtp-picker-footer #datetime-apply-btn,
  #datetime-picker-dropdown .dtp-picker-footer #datetime-cancel-btn {
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* DATE INPUT FIELDS */
  #datetime-picker-dropdown input[type="date"],
  #datetime-picker-dropdown #custom-date-input,
  #datetime-picker-dropdown #hourly-date-input,
  #datetime-picker-dropdown #daily-start-date,
  #datetime-picker-dropdown #daily-end-date,
  #datetime-picker-dropdown #weekly-start-date {
    padding: 0.5rem 0.625rem !important;
    font-size: 0.8125rem !important;
    min-height: 34px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }
  /* Custom Range section: keep date field within dropdown width (no stretch) */
  #datetime-picker-dropdown .booking-section,
  #datetime-picker-dropdown .p-4 .mb-3 {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #datetime-picker-dropdown .booking-section input[type="date"],
  #datetime-picker-dropdown .booking-section #custom-date-input,
  #datetime-picker-dropdown .booking-section #hourly-date-input,
  #datetime-picker-dropdown .booking-section #daily-start-date,
  #datetime-picker-dropdown .booking-section #daily-end-date,
  #datetime-picker-dropdown .booking-section #weekly-start-date {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #datetime-picker-dropdown > div {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* GRID CONTAINERS */
  #datetime-picker-dropdown .grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 0.375rem !important;
  }

  #datetime-picker-dropdown .grid > * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* LABELS */
  #datetime-picker-dropdown label,
  #datetime-picker-dropdown .text-xs {
    font-size: 0.6875rem !important;
    margin-bottom: 0.375rem !important;
  }

  #datetime-picker-dropdown .text-sm {
    font-size: 0.75rem !important;
  }

  #datetime-picker-dropdown .text-base {
    font-size: 0.8125rem !important;
  }

  #datetime-picker-dropdown .text-lg {
    font-size: 0.875rem !important;
  }

  /* HEADER */
  #datetime-picker-dropdown h3,
  #datetime-picker-dropdown .font-semibold {
    font-size: 0.8125rem !important;
  }

  /* ICONS */
  #datetime-picker-dropdown svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  #datetime-picker-dropdown .w-5.h-5 {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  #datetime-picker-dropdown .w-6.h-6 {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* FLEX LAYOUTS - Don't force wrap on time rows */
  #datetime-picker-dropdown .flex:not(.items-center.gap-1) {
    flex-wrap: wrap !important;
  }

  /* BORDERS — skip picker shell header/footer; they have dedicated padding rules */
  #datetime-picker-dropdown .border-t:not(.dtp-picker-footer),
  #datetime-picker-dropdown .border-b:not(.dtp-picker-header) {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* Touch phones (MOBILE_WIDE and below): denser sheet — less padding, smaller radii, tighter time stack.
   Placed after the general coarse-touch block so these overrides win. */
@media (hover: none) and (pointer: coarse) and (max-width: 567px) {
  #datetime-picker-dropdown {
    border-radius: var(--discover-mobile-panel-radius, 0.875rem) !important;
    max-height: var(--discover-mobile-overlay-max-height, calc(100dvh - 2rem)) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1), 0 3px 7px rgba(0, 0, 0, 0.05) !important;
  }

  .dark #datetime-picker-dropdown {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  }

  #datetime-picker-dropdown > .border-b {
    padding: 0.625rem 0.75rem !important;
  }

  #datetime-picker-dropdown .datetime-picker-scroll-area {
    max-height: none !important;
    padding: 0.5rem 0.625rem 0.625rem !important;
    scroll-padding-bottom: 0.625rem !important;
  }

  #datetime-picker-dropdown #datetime-section-heading {
    margin-bottom: 0.5rem !important;
  }

  #datetime-picker-dropdown #booking-type-hint {
    margin-bottom: 0.375rem !important;
    line-height: 1.25 !important;
  }

  #datetime-picker-dropdown > .border-b h3 {
    margin-bottom: 0.35rem !important;
  }

  #datetime-picker-dropdown #quick-presets {
    gap: 0.375rem !important;
  }

  #datetime-picker-dropdown .datetime-preset-btn {
    min-height: 1.75rem !important;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.6875rem !important;
    line-height: 1.15 !important;
  }

  #datetime-picker-dropdown .dtp-short-term-subtabs {
    margin-bottom: 0.5rem !important;
    padding: 0.2rem !important;
  }

  #datetime-picker-dropdown .dtp-short-term-subtabs button {
    padding: 0.35rem 0.5rem !important;
  }

  #short-term-sub-hint {
    margin-bottom: 0.5rem !important;
    line-height: 1.35 !important;
  }

  #datetime-picker-dropdown .dtp-time-range-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #datetime-picker-dropdown .dtp-time-range-panel.space-y-6 > * + * {
    margin-top: 0 !important;
  }

  #datetime-picker-dropdown .dtp-time-range-panel .pt-2 {
    padding-top: 0 !important;
  }

  #datetime-picker-dropdown .booking-section .mb-3 {
    margin-bottom: 0.425rem !important;
  }
}

@media (max-width: 567px) {
  #datetime-picker-dropdown input[type="date"],
  #datetime-picker-dropdown select {
    min-height: var(--discover-mobile-control-height, 2.25rem) !important;
    height: auto !important;
  }

  #datetime-picker-dropdown #datetime-apply-btn,
  #datetime-picker-dropdown #datetime-cancel-btn {
    min-height: var(--discover-mobile-control-height, 2.25rem) !important;
    height: auto !important;
  }
}

/* iPhone: datetime popup width/position owned by DateTimePicker.js + discover-popover.css */
@media (max-width: 640px) {
  #datetime-picker-dropdown {
    box-sizing: border-box !important;
  }
  #datetime-picker-dropdown .p-4,
  #datetime-picker-dropdown > div.p-4,
  #datetime-picker-dropdown .booking-section {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  #datetime-picker-dropdown .booking-section .mb-3 {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #datetime-picker-dropdown .booking-section .mb-3 label[for],
  #datetime-picker-dropdown .booking-section .mb-3 + .mb-3,
  #datetime-picker-dropdown .p-4 > .mb-3 {
    max-width: 100% !important;
  }
  #datetime-picker-dropdown input[type="date"],
  #datetime-picker-dropdown .booking-section input[type="date"],
  #datetime-picker-dropdown .booking-section #custom-date-input,
  #datetime-picker-dropdown #hourly-date-input,
  #datetime-picker-dropdown #daily-start-date,
  #datetime-picker-dropdown #daily-end-date,
  #datetime-picker-dropdown #weekly-start-date {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  #datetime-picker-dropdown .p-4,
  #datetime-picker-dropdown > div.p-4 {
    overflow-x: hidden !important;
  }
  /* Start Date / End Date grid: use panel width (avoid fixed 200px when sheet is wider) */
  #datetime-picker-dropdown .grid.grid-cols-2.gap-3 {
    max-width: 100% !important;
    gap: 0.5rem !important;
  }
  #datetime-picker-dropdown .grid.grid-cols-2.gap-3 > * {
    min-width: 0 !important;
    max-width: calc(50% - 0.25rem) !important;
  }
  #datetime-picker-dropdown #daily-start-date,
  #datetime-picker-dropdown #daily-end-date {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* iPhone: Weekly Start Date - not too wide for parent */
  #datetime-picker-dropdown #weekly-section .mb-3,
  #datetime-picker-dropdown #weekly-section .mb-3:has(#weekly-start-date) {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #datetime-picker-dropdown #weekly-start-date {
    width: 100% !important;
    max-width: min(100%, 180px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* SMALL PHONES: Extra compact; width from inset positioning (discover-popover.css) */
@media (hover: none) and (pointer: coarse) and (max-width: 375px) {
  #datetime-picker-dropdown,
  #datetime-picker-dropdown[style] {
    min-width: 0 !important;
  }

  #datetime-picker-dropdown > div,
  #datetime-picker-dropdown .p-4,
  #datetime-picker-dropdown .p-5,
  #datetime-picker-dropdown .p-6 {
    padding: 0.5rem 0.625rem !important;
  }

  /* Tabs */
  #datetime-picker-dropdown .flex.bg-gray-100,
  #datetime-picker-dropdown .flex.dark\:bg-neutral-700 {
    gap: 0.1875rem !important;
    padding: 0.125rem !important;
  }

  #datetime-picker-dropdown #hourly-tab,
  #datetime-picker-dropdown #daily-tab,
  #datetime-picker-dropdown #weekly-tab {
    padding: 0.375rem 0.375rem !important;
    font-size: 0.6875rem !important;
    min-height: 28px !important;
    border-radius: 0.25rem !important;
  }

  /* Time selects */
  #datetime-picker-dropdown select[id$="-hour"],
  #datetime-picker-dropdown select[id$="-minute"] {
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    max-width: 2.5rem !important;
    padding: 0.375rem 0.0625rem !important;
    font-size: 0.75rem !important;
  }

  #datetime-picker-dropdown select[id$="-ampm"] {
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    max-width: 2.25rem !important;
    padding: 0.375rem 0.0625rem !important;
    font-size: 0.6875rem !important;
  }

  #datetime-picker-dropdown .flex.items-center.gap-1 {
    gap: 0.1875rem !important;
  }

  /* Preset buttons */
  #datetime-picker-dropdown .datetime-preset-btn {
    padding: 0.375rem 0.375rem !important;
    font-size: 0.6875rem !important;
    min-height: 28px !important;
    border-radius: 0.3125rem !important;
  }

  /* Action buttons */
  #datetime-picker-dropdown #datetime-apply-btn,
  #datetime-picker-dropdown #datetime-cancel-btn {
    padding: 0.4375rem 0.625rem !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Date inputs */
  #datetime-picker-dropdown input[type="date"],
  #datetime-picker-dropdown #custom-date-input,
  #datetime-picker-dropdown #hourly-date-input,
  #datetime-picker-dropdown #daily-start-date,
  #datetime-picker-dropdown #daily-end-date,
  #datetime-picker-dropdown #weekly-start-date {
    padding: 0.4375rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  /* Grid containers */
  #datetime-picker-dropdown .grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 0.3125rem !important;
  }

  #datetime-picker-dropdown .grid > * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Labels */
  #datetime-picker-dropdown label,
  #datetime-picker-dropdown .text-xs {
    font-size: 0.625rem !important;
    margin-bottom: 0.3125rem !important;
  }

  #datetime-picker-dropdown .text-sm {
    font-size: 0.6875rem !important;
  }

  #datetime-picker-dropdown h3,
  #datetime-picker-dropdown .font-semibold {
    font-size: 0.75rem !important;
  }

  /* Duration summary section */
  #datetime-picker-dropdown .bg-blue-50,
  #datetime-picker-dropdown .dark\:bg-blue-900\/20 {
    padding: 0.5rem !important;
    border-radius: 0.375rem !important;
  }
}

/* DESKTOP: Polished styling for larger screens */
@media (min-width: 1101px) {
  #datetime-picker-dropdown {
    width: 320px !important;
    max-width: 340px !important;
    min-width: 300px !important;
    max-height: 680px !important; /* Taller on desktop */
  }

  /* Section padding */
  #datetime-picker-dropdown > div.p-4 {
    padding: 1rem !important;
  }

  /* Tabs - refined spacing */
  #datetime-picker-dropdown .flex.bg-gray-100,
  #datetime-picker-dropdown .flex.dark\:bg-neutral-700 {
    gap: 0.375rem !important;
    padding: 0.25rem !important;
    border-radius: 0.5rem !important;
  }

  #datetime-picker-dropdown #hourly-tab,
  #datetime-picker-dropdown #daily-tab,
  #datetime-picker-dropdown #weekly-tab {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.8125rem !important;
    border-radius: 0.375rem !important;
  }

  /* Time selects - proper desktop sizing */
  #datetime-picker-dropdown select[id$="-hour"],
  #datetime-picker-dropdown select[id$="-minute"] {
    width: 3.5rem !important;
    min-width: 3.5rem !important;
    max-width: 3.5rem !important;
    padding: 0.5rem 0.25rem !important;
    font-size: 0.875rem !important;
  }

  #datetime-picker-dropdown select[id$="-ampm"] {
    width: 3.25rem !important;
    min-width: 3.25rem !important;
    max-width: 3.25rem !important;
    padding: 0.5rem 0.25rem !important;
    font-size: 0.8125rem !important;
  }

  #datetime-picker-dropdown .flex.items-center.gap-1 {
    gap: 0.375rem !important;
  }

  /* Preset buttons */
  #datetime-picker-dropdown .datetime-preset-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
  }

  /* Labels */
  #datetime-picker-dropdown label {
    font-size: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Make custom range section more compact on desktop */
  #datetime-picker-dropdown .booking-section .mb-4 {
    margin-bottom: 0.75rem !important; /* Reduce from 1rem to 0.75rem */
  }

  #datetime-picker-dropdown .booking-section .mb-3 {
    margin-bottom: 0.5rem !important; /* Reduce from 0.75rem to 0.5rem */
  }

  #datetime-picker-dropdown .booking-section .mb-2 {
    margin-bottom: 0.375rem !important; /* Reduce from 0.5rem to 0.375rem */
  }

  #datetime-picker-dropdown .booking-section .mb-1\.5 {
    margin-bottom: 0.375rem !important; /* 6px */
  }

  #datetime-picker-dropdown .booking-section .space-y-3 > * + *,
  #datetime-picker-dropdown .booking-section .space-y-2\.5 > * + * {
    margin-top: 1rem !important; /* Gap between Start Time and End Time */
  }

  /* Reduce padding in custom range section */
  #datetime-picker-dropdown > div.p-4:last-child {
    padding-top: 0.875rem !important; /* Reduce top padding */
    padding-bottom: 0.875rem !important; /* Reduce bottom padding */
  }

}

/* =============================================================================
 * Canonical Discover phone datetime density.
 * Moved from the former page-level responsive refresh layer; dropdown internals
 * are owned by datetime.css while DateTimePicker.js owns runtime placement.
 * ============================================================================= */
@media (max-width: 567px) {
  body.discover-page #datetime-picker-dropdown {
    border-radius: 0.875rem !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
  }

  body.discover-page #datetime-picker-dropdown > .dtp-picker-header.shrink-0,
  body.discover-page #datetime-picker-dropdown > .dtp-picker-header {
    padding: 0.58rem 0.72rem 0.55rem !important;
  }

  body.discover-page #datetime-picker-dropdown #booking-type-hint,
  body.discover-page #datetime-picker-dropdown #storage-top-section p,
  body.discover-page #datetime-picker-dropdown #short-term-sub-hint {
    margin-bottom: 0.45rem !important;
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  body.discover-page #datetime-picker-dropdown #parking-booking-tabs h3,
  body.discover-page #datetime-picker-dropdown #datetime-section-heading {
    margin-bottom: 0.4rem !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.065em !important;
  }

  body.discover-page #datetime-picker-dropdown #quick-presets {
    gap: 0.4rem !important;
  }

  body.discover-page #datetime-picker-dropdown .datetime-preset-btn {
    min-height: 1.9rem !important;
    padding: 0.4rem 0.55rem !important;
    border-radius: 0.65rem !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
  }

  body.discover-page #datetime-picker-dropdown .datetime-picker-scroll-area {
    padding: 0.55rem 0.72rem 0.625rem !important;
    scroll-padding-bottom: 0.625rem !important;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }

  body.discover-page #datetime-picker-dropdown .booking-section .mb-3,
  body.discover-page #datetime-picker-dropdown #weekly-section .mb-3,
  body.discover-page #datetime-picker-dropdown #storage-datetime-section .mb-3 {
    margin-bottom: 0.45rem !important;
  }

  body.discover-page #datetime-picker-dropdown .booking-section label,
  body.discover-page #datetime-picker-dropdown #weekly-section label,
  body.discover-page #datetime-picker-dropdown #storage-datetime-section label,
  body.discover-page #datetime-picker-dropdown .dtp-time-range-panel label {
    margin-bottom: 0.3rem !important;
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.035em !important;
  }

  body.discover-page #datetime-picker-dropdown #datetime-section-heading {
    margin-bottom: 0.5rem !important;
    font-size: 0.66rem !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-short-term-subtabs {
    margin-bottom: 0.4rem !important;
    padding: 0.16rem !important;
    border-radius: 0.65rem !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.2rem !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  body.discover-page #datetime-picker-dropdown .dtp-short-term-subtabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-short-term-subtabs button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    min-height: 1.8rem !important;
    padding: 0.35rem 0.45rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-duration-inline {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.75rem !important;
    max-width: 100%;
    padding: 0 !important;
    border-radius: 0 !important;
    white-space: nowrap;
  }

  body.discover-page #datetime-picker-dropdown .dtp-duration-label {
    display: inline !important;
    font-size: 0.75rem !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-range-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    gap: 0 !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-range-panel .dtp-duration-slot {
    display: grid !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-range-panel .dtp-duration-slot.is-expanded {
    margin-top: 0.875rem !important;
    padding-top: 0.875rem !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-range-panel.space-y-6 > * + * {
    margin-top: 0 !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-range-panel .pt-2 {
    padding-top: 0 !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-stack {
    gap: 0.875rem !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-divider {
    display: none !important;
    margin: 0 !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-field {
    gap: 0.4375rem !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-row {
    justify-content: stretch !important;
    gap: 0 !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-row select,
  body.discover-page #datetime-picker-dropdown .dtp-time-row .dtp-select {
    min-height: 100% !important;
    height: 100% !important;
    padding: 0 0.5rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-row select[id$="-hour"],
  body.discover-page #datetime-picker-dropdown .dtp-time-row select[id$="-minute"] {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-row select[id$="-ampm"],
  body.discover-page #datetime-picker-dropdown .dtp-time-row .dtp-select--ampm {
    width: 3.25rem !important;
    min-width: 3.25rem !important;
    max-width: 3.25rem !important;
    flex: 0 0 3.25rem !important;
    font-size: 0.8125rem !important;
    border-left: 1px solid var(--dtp-panel-border) !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-row-sep,
  body.discover-page #datetime-picker-dropdown .dtp-time-row > span.dtp-time-row-sep {
    padding: 0 !important;
    font-size: 0.9375rem !important;
  }

  body.discover-page #datetime-picker-dropdown #duration-text {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }

  body.discover-page #datetime-picker-dropdown #estimated-cost {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  body.discover-page #datetime-picker-dropdown #datetime-picker-inline-validation {
    margin-bottom: 0.5rem !important;
    padding: 0.5rem 0.6rem !important;
    border-radius: 0.65rem !important;
    font-size: 0.75rem !important;
  }

  body.discover-page #datetime-picker-dropdown .datetime-picker-scroll-area > .flex.gap-2 {
    gap: 0.45rem !important;
  }

}

@media (max-width: 400px) {
  body.discover-page #datetime-picker-dropdown > .dtp-picker-header.shrink-0 {
    padding: 0.65rem 0.75rem 0.55rem !important;
  }

  body.discover-page #datetime-picker-dropdown .datetime-picker-scroll-area {
    padding: 0.55rem 0.75rem 0.55rem !important;
  }

  body.discover-page #datetime-picker-dropdown .datetime-preset-btn {
    min-height: 1.75rem !important;
    padding-inline: 0.45rem !important;
  }

  body.discover-page #datetime-picker-dropdown input[type="date"],
  body.discover-page #datetime-picker-dropdown #weekly-duration,
  body.discover-page #datetime-picker-dropdown #storage-duration {
    min-height: 2.25rem !important;
    height: 2.25rem !important;
    font-size: 0.8125rem !important;
  }

  body.discover-page #datetime-picker-dropdown .dtp-time-row select {
    min-height: 2.375rem !important;
    height: 2.375rem !important;
    font-size: 0.875rem !important;
  }

  body.discover-page #datetime-picker-dropdown select[id$="-hour"],
  body.discover-page #datetime-picker-dropdown select[id$="-minute"] {
    width: auto !important;
    min-width: 2.75rem !important;
  }

  body.discover-page #datetime-picker-dropdown select[id$="-ampm"],
  body.discover-page #datetime-picker-dropdown .dtp-time-row select[id$="-ampm"] {
    width: 2.875rem !important;
    min-width: 2.875rem !important;
  }
}

/* Final datetime/autocomplete visual alignment. Keep last so legacy beige overrides do not win. */
body.discover-page #datetime-picker-dropdown {
  --dtp-dropdown-radius: var(--discover-popover-radius, 1rem);
  --dtp-attached-seam-radius: 0.45rem;
  --dtp-dropdown-bg: var(--discover-popover-bg, #fafaf8);
  --dtp-dropdown-bg-dark: var(--discover-popover-bg-dark, #262626);
  --dtp-dropdown-border: var(--discover-popover-border, rgba(214, 211, 208, 0.68));
  --dtp-dropdown-border-dark: var(--discover-popover-border-dark, rgba(82, 82, 82, 0.72));
  --dtp-dropdown-shadow: var(--discover-popover-shadow, 0 20px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06));

  background: var(--dtp-dropdown-bg) !important;
  border-color: var(--dtp-dropdown-border) !important;
  border-radius: var(--dtp-dropdown-radius) !important;
  box-shadow: var(--dtp-dropdown-shadow) !important;
  color: var(--discover-popover-text, #292524) !important;
}

.dark body.discover-page #datetime-picker-dropdown,
body.dark.discover-page #datetime-picker-dropdown {
  background: var(--dtp-dropdown-bg-dark) !important;
  border-color: var(--dtp-dropdown-border-dark) !important;
  box-shadow: var(--discover-popover-shadow-dark, 0 20px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.25)) !important;
  color: var(--discover-popover-text-dark, #f5f5f4) !important;
}

body.discover-page #datetime-picker-dropdown.dtp-attached-below {
  border-top-left-radius: var(--dtp-attached-seam-radius) !important;
  border-top-right-radius: var(--dtp-attached-seam-radius) !important;
}

body.discover-page #datetime-picker-dropdown.dtp-attached-above {
  border-bottom-left-radius: var(--dtp-attached-seam-radius) !important;
  border-bottom-right-radius: var(--dtp-attached-seam-radius) !important;
}

body.discover-page .datetime-display-container.dtp-trigger-attached {
  border-color: var(--discover-popover-border, rgba(214, 211, 208, 0.68)) !important;
  box-shadow: var(--discover-popover-shadow, 0 20px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06)) !important;
}

body.discover-page .datetime-display-container.dtp-trigger-attached-below {
  border-bottom-left-radius: var(--dtp-attached-seam-radius, 0.45rem) !important;
  border-bottom-right-radius: var(--dtp-attached-seam-radius, 0.45rem) !important;
}

body.discover-page .datetime-display-container.dtp-trigger-attached-above {
  border-top-left-radius: var(--dtp-attached-seam-radius, 0.45rem) !important;
  border-top-right-radius: var(--dtp-attached-seam-radius, 0.45rem) !important;
}

body.discover-page #datetime-picker-dropdown > .dtp-picker-header {
  background: transparent !important;
  border-bottom-color: var(--discover-popover-border, rgba(214, 211, 208, 0.68)) !important;
}

.dark body.discover-page #datetime-picker-dropdown > .dtp-picker-header,
body.dark.discover-page #datetime-picker-dropdown > .dtp-picker-header {
  border-bottom-color: var(--discover-popover-border-dark, rgba(82, 82, 82, 0.72)) !important;
}

body.discover-page #datetime-picker-dropdown input[type="date"],
body.discover-page #datetime-picker-dropdown #weekly-duration,
body.discover-page #datetime-picker-dropdown #storage-duration {
  background: var(--discover-popover-bg-elevated, #ffffff) !important;
  border: 1px solid rgba(120, 113, 108, 0.14) !important;
  color: var(--discover-popover-text, #292524) !important;
  box-shadow: none !important;
}

body.discover-page #datetime-picker-dropdown .dtp-time-row select {
  background: rgba(250, 250, 249, 0.95) !important;
  border: 1px solid rgba(120, 113, 108, 0.16) !important;
  color: var(--discover-popover-text, #292524) !important;
  box-shadow: none !important;
}

.dark body.discover-page #datetime-picker-dropdown input[type="date"],
.dark body.discover-page #datetime-picker-dropdown #weekly-duration,
.dark body.discover-page #datetime-picker-dropdown #storage-duration,
body.dark.discover-page #datetime-picker-dropdown input[type="date"],
body.dark.discover-page #datetime-picker-dropdown #weekly-duration,
body.dark.discover-page #datetime-picker-dropdown #storage-duration {
  background: var(--discover-popover-bg-dark-elevated, #2f2f2f) !important;
  border-color: rgba(115, 115, 115, 0.22) !important;
  color: var(--discover-popover-text-dark, #f5f5f4) !important;
}

.dark body.discover-page #datetime-picker-dropdown .dtp-time-row select,
body.dark.discover-page #datetime-picker-dropdown .dtp-time-row select {
  background: rgba(38, 38, 38, 0.95) !important;
  border-color: rgba(115, 115, 115, 0.28) !important;
  color: var(--discover-popover-text-dark, #f5f5f4) !important;
}

body.discover-page #datetime-picker-dropdown .dtp-duration-inline,
body.discover-page #datetime-picker-dropdown .dtp-short-term-subtabs {
  background: var(--discover-popover-bg-elevated, #ffffff) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dark body.discover-page #datetime-picker-dropdown .dtp-duration-inline,
.dark body.discover-page #datetime-picker-dropdown .dtp-short-term-subtabs,
body.dark.discover-page #datetime-picker-dropdown .dtp-duration-inline,
body.dark.discover-page #datetime-picker-dropdown .dtp-short-term-subtabs {
  background: var(--discover-popover-bg-dark-elevated, #2f2f2f) !important;
  border-color: transparent !important;
}

/* Preset chip chrome: see .datetime-preset-btn / .dtp-preset--selected above */

body.discover-page #datetime-picker-dropdown #booking-type-hint,
body.discover-page #datetime-picker-dropdown #short-term-sub-hint,
body.discover-page #datetime-picker-dropdown #storage-top-section p,
body.discover-page #datetime-picker-dropdown label,
body.discover-page #datetime-picker-dropdown .dtp-duration-label {
  color: var(--discover-popover-text-muted, #78716c) !important;
}

.dark body.discover-page #datetime-picker-dropdown #booking-type-hint,
.dark body.discover-page #datetime-picker-dropdown #short-term-sub-hint,
.dark body.discover-page #datetime-picker-dropdown #storage-top-section p,
.dark body.discover-page #datetime-picker-dropdown label,
.dark body.discover-page #datetime-picker-dropdown .dtp-duration-label,
body.dark.discover-page #datetime-picker-dropdown #booking-type-hint,
body.dark.discover-page #datetime-picker-dropdown #short-term-sub-hint,
body.dark.discover-page #datetime-picker-dropdown #storage-top-section p,
body.dark.discover-page #datetime-picker-dropdown label,
body.dark.discover-page #datetime-picker-dropdown .dtp-duration-label {
  color: var(--discover-popover-text-muted-dark, #a8a29e) !important;
}

/* Keep the datetime popover from accumulating nested outlines. The dropdown owns
   the outer edge; inner groups separate by surface contrast and spacing. */
body.discover-page #datetime-picker-dropdown .dtp-picker-header {
  border-bottom-color: rgba(120, 113, 108, 0.18) !important;
}

.dark body.discover-page #datetime-picker-dropdown .dtp-picker-header,
body.dark.discover-page #datetime-picker-dropdown .dtp-picker-header {
  border-bottom-color: rgba(115, 115, 115, 0.24) !important;
}

body.discover-page #datetime-picker-dropdown .dtp-duration-inline {
  background: transparent !important;
  padding-inline: 0 !important;
  border: 0 !important;
}

body.discover-page #datetime-picker-dropdown .dtp-short-term-subtabs {
  background: rgba(231, 229, 228, 0.72) !important;
}

.dark body.discover-page #datetime-picker-dropdown .dtp-short-term-subtabs,
body.dark.discover-page #datetime-picker-dropdown .dtp-short-term-subtabs {
  background: rgba(64, 64, 64, 0.76) !important;
}

/* ==========================================
 * FORM POLISH — custom date/time scroll body
 * Wins over earlier compact-density overrides.
 * ========================================== */

#datetime-picker-dropdown {
  --dtp-field-radius: 0.625rem;
  --dtp-field-height: 2.25rem;
  --dtp-panel-bg: rgba(250, 250, 249, 0.92);
  --dtp-panel-border: rgba(120, 113, 108, 0.16);
  --dtp-control-bg: #ffffff;
  --dtp-control-text: #292524;
  --dtp-muted: #78716c;
}

.dark #datetime-picker-dropdown,
html.dark #datetime-picker-dropdown {
  --dtp-panel-bg: rgba(38, 38, 38, 0.92);
  --dtp-panel-border: rgba(115, 115, 115, 0.28);
  --dtp-control-bg: #2f2f2f;
  --dtp-control-text: #f5f5f4;
  --dtp-muted: #a8a29e;
}

#datetime-picker-dropdown .datetime-picker-scroll-area {
  padding: 1rem 1.125rem 1.125rem !important;
}

#datetime-picker-dropdown .dtp-section-heading,
#datetime-picker-dropdown #datetime-section-heading {
  margin: 0 0 0.875rem !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--dtp-control-text) !important;
}

#datetime-picker-dropdown .dtp-short-term-subtabs {
  display: flex !important;
  gap: 0.25rem !important;
  padding: 0.25rem !important;
  margin-bottom: 0.875rem !important;
  border-radius: 0.75rem !important;
  background: rgba(231, 229, 228, 0.95) !important;
  border: 0 !important;
}

.dark #datetime-picker-dropdown .dtp-short-term-subtabs,
html.dark #datetime-picker-dropdown .dtp-short-term-subtabs {
  background: rgba(64, 64, 64, 0.85) !important;
}

#datetime-picker-dropdown .dtp-subtab {
  flex: 1 1 0;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--dtp-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#datetime-picker-dropdown .dtp-subtab:hover {
  color: var(--dtp-control-text);
}

#datetime-picker-dropdown .dtp-subtab--active {
  background: var(--dtp-control-bg) !important;
  color: var(--dtp-control-text) !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
}

#datetime-picker-dropdown .dtp-field {
  min-width: 0;
}

#datetime-picker-dropdown .dtp-date-field .dtp-input,
#datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-input {
  min-width: 0;
}

body.discover-page #datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-input,
body.discover-page #datetime-picker-dropdown .dtp-date-field input[type="date"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#datetime-picker-dropdown .dtp-field--time-range {
  width: 100%;
  max-width: 100%;
}

#datetime-picker-dropdown .dtp-field-label {
  display: block;
  margin-bottom: 0.375rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--dtp-muted) !important;
}

#datetime-picker-dropdown .dtp-field-hint {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--dtp-muted);
}

#datetime-picker-dropdown .dtp-date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

#datetime-picker-dropdown .dtp-input,
#datetime-picker-dropdown input[type="date"].dtp-input,
#datetime-picker-dropdown select.dtp-input {
  width: 100%;
  min-height: var(--dtp-field-height) !important;
  height: var(--dtp-field-height) !important;
  padding: 0 0.875rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.2 !important;
  border-radius: var(--dtp-field-radius) !important;
  border: 1px solid var(--dtp-panel-border) !important;
  background: var(--dtp-control-bg) !important;
  color: var(--dtp-control-text) !important;
  box-shadow: none !important;
}

#datetime-picker-dropdown .dtp-input:focus,
#datetime-picker-dropdown input[type="date"].dtp-input:focus,
#datetime-picker-dropdown select.dtp-input:focus,
#datetime-picker-dropdown .dtp-select:focus {
  outline: none;
  border-color: rgba(87, 83, 78, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(120, 113, 108, 0.18) !important;
}

/*
 * Time range: no outer card chrome. Each .dtp-time-row is one segmented control
 * (hour : minute AM/PM share a border). Start/End separate by spacing only.
 */
#datetime-picker-dropdown .dtp-time-range-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#datetime-picker-dropdown .dtp-field--time-range > .dtp-field-label {
  margin-bottom: 0.5rem !important;
}

#datetime-picker-dropdown .dtp-time-range-panel > div {
  grid-template-columns: none !important;
}

#datetime-picker-dropdown .dtp-time-range-panel.space-y-6 > * + * {
  margin-top: 0 !important;
}

#datetime-picker-dropdown .dtp-time-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

#datetime-picker-dropdown .dtp-time-divider {
  display: none;
  height: 0;
  margin: 0;
  border: 0;
}

#datetime-picker-dropdown .dtp-time-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

#datetime-picker-dropdown .dtp-time-field-label {
  display: block;
  margin: 0 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  line-height: 1.25 !important;
  color: var(--dtp-muted) !important;
}

/* Single segmented control: shared border + fill */
#datetime-picker-dropdown .dtp-time-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 0 !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--dtp-field-height);
  height: var(--dtp-field-height);
  overflow: hidden;
  border-radius: var(--dtp-field-radius) !important;
  border: 1px solid var(--dtp-panel-border) !important;
  background: var(--dtp-control-bg) !important;
  box-sizing: border-box !important;
}

#datetime-picker-dropdown .dtp-time-row:focus-within {
  border-color: rgba(87, 83, 78, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(120, 113, 108, 0.18) !important;
}

#datetime-picker-dropdown .dtp-time-row-sep {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 0.75rem;
  padding: 0;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  color: var(--dtp-muted);
  user-select: none;
  pointer-events: none;
}

/* Generic .dtp-select (non-time rows / legacy); time-row selects override below */
#datetime-picker-dropdown .dtp-select {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  min-height: var(--dtp-field-height) !important;
  height: var(--dtp-field-height) !important;
  padding: 0 1.1rem 0 0.4rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid var(--dtp-panel-border) !important;
  background-color: var(--dtp-control-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2378716c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.35rem center;
  background-size: 0.65rem;
  color: var(--dtp-control-text) !important;
  font-size: 0.875rem !important;
  font-weight: 500;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

#datetime-picker-dropdown .dtp-time-dropdown {
  position: relative;
  width: 100%;
}

#datetime-picker-dropdown .dtp-time-dropdown-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--dtp-field-height);
  height: var(--dtp-field-height);
  padding: 0 1.75rem 0 0.75rem;
  border-radius: var(--dtp-field-radius);
  border: 1px solid var(--dtp-panel-border);
  background-color: var(--dtp-control-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2378716c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 0.65rem;
  color: var(--dtp-control-text);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

#datetime-picker-dropdown .dtp-time-dropdown-trigger:focus-visible {
  outline: none;
  border-color: rgba(87, 83, 78, 0.45);
  box-shadow: 0 0 0 3px rgba(120, 113, 108, 0.18);
}

#datetime-picker-dropdown .dtp-time-dropdown-panel {
  position: absolute;
  z-index: 4;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  padding: 0.35rem;
  border-radius: var(--dtp-field-radius);
  border: 1px solid var(--dtp-panel-border);
  background: var(--dtp-control-bg);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

#datetime-picker-dropdown .dtp-time-dropdown-panel .dtp-time-row {
  min-height: var(--dtp-field-height);
  height: var(--dtp-field-height);
}

#datetime-picker-dropdown .dtp-native-time-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Touch phones: one Start/End control opens the OS native time wheel.
 * Desktop (even in the compact sheet) keeps the custom hour/minute dropdown —
 * scoped to .dtp-time-dropdown--native only, not all .dtp-mobile-layout. */
#datetime-picker-dropdown .dtp-time-dropdown--native {
  position: relative;
}

#datetime-picker-dropdown .dtp-time-dropdown--native .dtp-time-dropdown-trigger {
  pointer-events: none;
}

#datetime-picker-dropdown .dtp-time-dropdown--native .dtp-time-dropdown-panel {
  display: none !important;
}

#datetime-picker-dropdown .dtp-time-dropdown--native .dtp-native-time-input {
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  opacity: 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
  pointer-events: auto;
  z-index: 3;
  cursor: pointer;
  font-size: 16px;
  color: transparent;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* Custom dropdown mode: keep the invisible native input from stealing clicks. */
#datetime-picker-dropdown .dtp-time-dropdown:not(.dtp-time-dropdown--native) .dtp-native-time-input {
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  inset: auto !important;
}

#datetime-picker-dropdown .dtp-time-row .dtp-select,
#datetime-picker-dropdown .dtp-time-row select {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 0.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--dtp-control-text) !important;
  font-size: 0.875rem !important;
  font-weight: 500;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

#datetime-picker-dropdown .dtp-time-row .dtp-select:focus,
#datetime-picker-dropdown .dtp-time-row select:focus {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background-color: rgba(120, 113, 108, 0.08) !important;
}

#datetime-picker-dropdown .dtp-time-row .dtp-select--time:not(.dtp-select--ampm),
#datetime-picker-dropdown .dtp-time-row select[id$="-hour"],
#datetime-picker-dropdown .dtp-time-row select[id$="-minute"] {
  flex: 1 1 0 !important;
}

#datetime-picker-dropdown .dtp-time-row .dtp-select--ampm,
#datetime-picker-dropdown .dtp-time-row select[id$="-ampm"],
#datetime-picker-dropdown .dtp-select--ampm {
  flex: 0 0 3.25rem !important;
  min-width: 3.25rem !important;
  max-width: 3.25rem !important;
  width: 3.25rem !important;
  padding: 0 0.35rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600;
  background-image: none !important;
  border-left: 1px solid var(--dtp-panel-border) !important;
}

#datetime-picker-dropdown .dtp-duration-slot {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 1px solid transparent !important;
}

#datetime-picker-dropdown .dtp-duration-slot.is-expanded {
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
  border-top-color: var(--dtp-panel-border) !important;
}

#datetime-picker-dropdown .dtp-duration-bar,
#datetime-picker-dropdown .dtp-duration-inline {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  white-space: nowrap;
}

#datetime-picker-dropdown .dtp-duration-label {
  flex: 0 0 auto;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.3 !important;
  color: var(--dtp-muted) !important;
}

#datetime-picker-dropdown .dtp-duration-value,
#datetime-picker-dropdown #duration-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--dtp-control-text) !important;
}

#datetime-picker-dropdown #duration-text.dtp-duration-value--invalid {
  color: #b91c1c !important;
}

.dark #datetime-picker-dropdown #duration-text.dtp-duration-value--invalid,
html.dark #datetime-picker-dropdown #duration-text.dtp-duration-value--invalid {
  color: #fca5a5 !important;
}

#datetime-picker-dropdown .dtp-form-actions {
  display: flex;
  gap: 0.625rem;
  margin-top: 0;
}

#datetime-picker-dropdown .dtp-picker-body {
  flex: 1 1 auto;
  min-height: 0;
}

#datetime-picker-dropdown .dtp-form-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Tailwind .hidden must win over .dtp-form-stack { display: flex } (parking vs storage panels). */
#datetime-picker-dropdown .dtp-form-stack.hidden {
  display: none !important;
}

#datetime-picker-dropdown[data-space-type="parking"] #storage-datetime-section,
#datetime-picker-dropdown[data-space-type="parking"] #storage-top-section {
  display: none !important;
}

#datetime-picker-dropdown[data-space-type="storage"] #parking-datetime-sections,
#datetime-picker-dropdown[data-space-type="storage"] #parking-booking-tabs {
  display: none !important;
}

#datetime-picker-dropdown .dtp-short-term-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#datetime-picker-dropdown .dtp-tabpanel {
  min-width: 0;
}

#datetime-picker-dropdown .dtp-tabpanel + .dtp-tabpanel {
  margin-top: 0;
}

#datetime-picker-dropdown .dtp-picker-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--dtp-panel-border, rgba(214, 211, 208, 0.68));
  background: var(--dtp-dropdown-bg, #fafaf8);
  padding: 0.875rem 1.25rem max(0.875rem, env(safe-area-inset-bottom, 0px)) !important;
}

.dark #datetime-picker-dropdown .dtp-picker-footer,
html.dark #datetime-picker-dropdown .dtp-picker-footer {
  background: var(--dtp-dropdown-bg-dark, #262626);
  border-top-color: var(--dtp-panel-border, rgba(82, 82, 82, 0.72));
}

#datetime-picker-dropdown .dtp-inline-validation,
#datetime-picker-dropdown #datetime-picker-inline-validation {
  margin-bottom: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  border: 1px solid rgba(220, 38, 38, 0.28);
  background: rgba(254, 242, 242, 0.95);
  color: #991b1b;
}

.dark #datetime-picker-dropdown .dtp-inline-validation,
.dark #datetime-picker-dropdown #datetime-picker-inline-validation,
html.dark #datetime-picker-dropdown .dtp-inline-validation,
html.dark #datetime-picker-dropdown #datetime-picker-inline-validation {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(69, 10, 10, 0.45);
  color: #fecaca;
}

#datetime-picker-dropdown .dtp-picker-footer #datetime-picker-inline-validation:not(.hidden),
#datetime-picker-dropdown .dtp-picker-footer .dtp-inline-validation:not(.hidden) {
  margin-bottom: 0.75rem !important;
}

#datetime-picker-dropdown .dtp-picker-footer .dtp-form-actions {
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0.625rem !important;
}

#datetime-picker-dropdown .dtp-picker-footer #datetime-apply-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
}

#datetime-picker-dropdown .dtp-picker-footer #datetime-cancel-btn {
  flex: 0 0 auto !important;
  width: auto !important;
}

#datetime-picker-dropdown .dtp-picker-body {
  padding-bottom: 0.75rem !important;
}

#datetime-picker-dropdown .dtp-btn-primary,
#datetime-picker-dropdown #datetime-apply-btn {
  min-height: var(--dtp-field-height) !important;
  padding: 0 1rem !important;
  border: 0;
  border-radius: var(--dtp-field-radius) !important;
  background: #292524 !important;
  color: #ffffff !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

#datetime-picker-dropdown .dtp-btn-primary:hover,
#datetime-picker-dropdown #datetime-apply-btn:hover {
  background: #1c1917 !important;
}

#datetime-picker-dropdown .dtp-btn-secondary,
#datetime-picker-dropdown #datetime-cancel-btn {
  min-height: var(--dtp-field-height) !important;
  padding: 0 1rem !important;
  border: 1px solid var(--dtp-panel-border) !important;
  border-radius: var(--dtp-field-radius) !important;
  background: var(--dtp-control-bg) !important;
  color: var(--dtp-control-text) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background 0.15s ease;
}

#datetime-picker-dropdown .dtp-btn-secondary:hover,
#datetime-picker-dropdown #datetime-cancel-btn:hover {
  background: rgba(245, 245, 244, 0.95) !important;
}

.dark #datetime-picker-dropdown .dtp-btn-primary,
.dark #datetime-picker-dropdown #datetime-apply-btn,
html.dark #datetime-picker-dropdown .dtp-btn-primary,
html.dark #datetime-picker-dropdown #datetime-apply-btn {
  background: #0a0a0a !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dark #datetime-picker-dropdown .dtp-btn-primary:hover,
.dark #datetime-picker-dropdown #datetime-apply-btn:hover,
html.dark #datetime-picker-dropdown .dtp-btn-primary:hover,
html.dark #datetime-picker-dropdown #datetime-apply-btn:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

@media (hover: none) and (pointer: coarse) and (min-width: 568px) {
  #datetime-picker-dropdown .dtp-subtab,
  #datetime-picker-dropdown .dtp-select,
  #datetime-picker-dropdown .dtp-input,
  #datetime-picker-dropdown .dtp-btn-primary,
  #datetime-picker-dropdown .dtp-btn-secondary,
  #datetime-picker-dropdown #datetime-apply-btn,
  #datetime-picker-dropdown #datetime-cancel-btn {
    min-height: var(--discover-mobile-touch-target, 2.75rem) !important;
  }
}

@media (max-width: 567px) {
  #datetime-picker-dropdown {
    --dtp-field-height: 2.5rem;
  }

  #datetime-picker-dropdown .dtp-time-range-panel {
    padding: 0 !important;
  }

  #datetime-picker-dropdown .dtp-time-stack {
    gap: 0.875rem !important;
  }

  #datetime-picker-dropdown .dtp-time-divider {
    display: none !important;
    margin: 0 !important;
  }

  #datetime-picker-dropdown .dtp-time-field {
    gap: 0.4375rem !important;
  }

  #datetime-picker-dropdown .dtp-time-row {
    min-height: var(--dtp-field-height) !important;
    height: var(--dtp-field-height) !important;
  }

  #datetime-picker-dropdown .dtp-duration-slot {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #datetime-picker-dropdown .dtp-duration-slot.is-expanded {
    margin-top: 0.875rem !important;
    padding-top: 0.875rem !important;
  }

  #datetime-picker-dropdown .dtp-picker-footer {
    padding: 0.625rem var(--popover-pad-x, 0.75rem) max(0.625rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  #datetime-picker-dropdown .dtp-btn-primary,
  #datetime-picker-dropdown .dtp-btn-secondary,
  #datetime-picker-dropdown #datetime-apply-btn,
  #datetime-picker-dropdown #datetime-cancel-btn {
    min-height: var(--discover-mobile-control-height, 2.25rem) !important;
    height: auto !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
  }

  #datetime-picker-dropdown .dtp-subtab {
    min-height: 1.8rem !important;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.75rem !important;
  }

  #datetime-picker-dropdown .datetime-picker-scroll-area {
    padding: 0.55rem 0.72rem 0.625rem !important;
  }

  #datetime-picker-dropdown .dtp-date-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Readable-overlay date fields: one visible label only (native placeholder/text hidden). */
body.discover-page #datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-date-input-has-readable,
body.discover-page #datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-date-input-has-readable.dtp-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

body.discover-page #datetime-picker-dropdown .dtp-date-field input[type="date"].dtp-date-input-has-readable:focus {
  border: none !important;
  box-shadow: none !important;
}

/* =============================================================================
 * Mobile visual system (.dtp-mobile-layout / .dtp-mobile-sheet) — bottom sheet.
 * Geometry (full bleed, docked bottom, slide-up) lives in discover-popover.css.
 * This block owns phone hierarchy, surfaces, chips, tabs, fields, footer.
 * ============================================================================= */
@media (max-width: 567px) {
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout {
    --dtp-field-height: var(--discover-mobile-control-height, 2.25rem);
    --dtp-preset-min-height: var(--discover-mobile-control-height, 2.25rem);
    --dtp-time-row-height: var(--discover-mobile-touch-target, 2.5rem);
    --dtp-action-min-height: var(--discover-mobile-control-height, 2.25rem);
    --dtp-field-radius: 0.75rem;
    --dtp-panel-bg: var(--discover-premium-wash, #f5f3ef);
    --dtp-panel-border: var(--discover-premium-line, rgba(120, 113, 108, 0.2));
    --dtp-control-bg: var(--discover-premium-surface-solid, #ffffff);
    --dtp-control-text: var(--discover-premium-ink, #171412);
    --dtp-muted: var(--discover-premium-muted, #78716c);
    border-radius: var(--discover-mobile-sheet-radius, 1rem) !important;
    border: 1px solid var(--discover-popover-border, rgba(214, 211, 208, 0.68)) !important;
    border-bottom: 1px solid var(--discover-popover-border, rgba(214, 211, 208, 0.68)) !important;
    background: var(--discover-popover-bg, #fafaf8) !important;
    box-shadow:
      0 -16px 48px rgba(28, 25, 23, 0.18),
      0 -4px 14px rgba(28, 25, 23, 0.08) !important;
    overflow: hidden !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout {
    --dtp-panel-bg: rgba(38, 38, 38, 0.92);
    --dtp-panel-border: rgba(115, 115, 115, 0.28);
    --dtp-control-bg: #2f2f2f;
    --dtp-control-text: #f5f5f4;
    --dtp-muted: #a8a29e;
    background: var(--discover-popover-bg-dark, #262626) !important;
    border-color: var(--discover-popover-border-dark, rgba(82, 82, 82, 0.72)) !important;
    box-shadow:
      0 -16px 48px rgba(0, 0, 0, 0.45),
      0 -4px 14px rgba(0, 0, 0, 0.28) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout > .dtp-picker-header {
    padding: 0.5rem 1rem 0.75rem !important;
    border-bottom: 1px solid var(--discover-premium-line, rgba(120, 113, 108, 0.18)) !important;
    background: transparent !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .discover-popover-section-heading,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #parking-booking-tabs h3 {
    margin: 0 0 0.5rem !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--dtp-muted) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #storage-top-section:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #storage-top-section p:first-child {
    margin: 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--dtp-control-text) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #storage-top-section p:last-child {
    margin: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--dtp-muted) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #quick-presets {
    gap: 0.5rem !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn {
    min-height: var(--dtp-preset-min-height) !important;
    height: auto !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    border-radius: 0.625rem !important;
    background: var(--dtp-control-bg) !important;
    border: 1px solid var(--dtp-panel-border) !important;
    color: var(--dtp-control-text) !important;
    box-shadow: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn:hover {
    background: var(--discover-premium-hover, rgba(250, 247, 242, 0.96)) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn.dtp-preset--selected {
    background: #292524 !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn.dtp-preset--selected:hover {
    background: #1c1917 !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn.dtp-preset--selected,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn.dtp-preset--selected,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn.dtp-preset--selected {
    background: #f5f5f4 !important;
    border-color: transparent !important;
    color: #0a0a0a !important;
    box-shadow: none !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn.dtp-preset--selected:hover,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn.dtp-preset--selected:hover,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn.dtp-preset--selected:hover {
    background: #e7e5e4 !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout > .datetime-picker-scroll-area,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout > .dtp-picker-body {
    padding: 0.75rem 0.875rem 0.875rem !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-section-heading,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-section-heading {
    margin: 0 0 0.75rem !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--dtp-control-text) !important;
    line-height: 1.25 !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-short-term-subtabs {
    margin-bottom: 0.875rem !important;
    padding: 0.25rem !important;
    gap: 0.25rem !important;
    border-radius: 0.75rem !important;
    background: rgba(231, 229, 228, 0.85) !important;
    border: 0 !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-short-term-subtabs,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-short-term-subtabs {
    background: rgba(64, 64, 64, 0.85) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-subtab {
    min-height: var(--discover-mobile-control-height, 2.25rem) !important;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border-radius: 0.625rem !important;
    color: var(--dtp-muted) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-subtab--active {
    background: var(--dtp-control-bg) !important;
    color: var(--dtp-control-text) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06), 0 1px 3px rgba(28, 25, 23, 0.08) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-field-label {
    margin-bottom: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: var(--dtp-muted) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-date-field {
    min-height: var(--dtp-field-height) !important;
    border-radius: var(--dtp-field-radius) !important;
    border: 1px solid var(--dtp-panel-border) !important;
    background: var(--dtp-control-bg) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-date-readable {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding-inline: 0.65rem !important;
    color: var(--dtp-control-text) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-date-readable.dtp-date-readable--empty {
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: var(--dtp-muted) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-date-field .dtp-input,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-date-field input[type="date"],
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-input,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout select.dtp-input,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout select:not(.dtp-select--time) {
    min-height: var(--dtp-field-height) !important;
    height: var(--dtp-field-height) !important;
    font-size: 0.875rem !important;
    border-radius: var(--dtp-field-radius) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .booking-section .mb-3,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-field.mb-3 {
    margin-bottom: 0.875rem !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-range-panel {
    padding: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-field-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: var(--dtp-muted) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-divider {
    display: none !important;
    margin: 0 !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-row {
    min-height: var(--dtp-time-row-height) !important;
    height: var(--dtp-time-row-height) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-dropdown-trigger {
    display: flex !important;
    width: 100% !important;
    min-height: var(--dtp-time-row-height, var(--discover-mobile-touch-target, 2.5rem)) !important;
    height: var(--dtp-time-row-height, var(--discover-mobile-touch-target, 2.5rem)) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-dropdown--native .dtp-time-dropdown-trigger {
    pointer-events: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-dropdown--native .dtp-time-dropdown-panel,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-dropdown--native .dtp-time-dropdown-panel.hidden {
    display: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-dropdown--native .dtp-native-time-input {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    clip: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
    z-index: 3 !important;
    font-size: 16px !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-dropdown:not(.dtp-time-dropdown--native) .dtp-time-dropdown-trigger {
    pointer-events: auto !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-dropdown:not(.dtp-time-dropdown--native) .dtp-native-time-input {
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-row .dtp-select,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-row select {
    min-height: 100% !important;
    height: 100% !important;
    font-size: 0.875rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-row .dtp-select--ampm,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-row select[id$="-ampm"] {
    border-left: 1px solid var(--dtp-panel-border) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-duration-slot {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 1px solid transparent !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-duration-slot.is-expanded {
    margin-top: 0.875rem !important;
    padding-top: 0.875rem !important;
    border-top-color: var(--dtp-panel-border) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-duration-label {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-duration-value,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #duration-text {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--dtp-control-text) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #duration-text.dtp-duration-value--invalid {
    color: #b91c1c !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #duration-text.dtp-duration-value--invalid,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout #duration-text.dtp-duration-value--invalid {
    color: #fca5a5 !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout > .dtp-picker-footer {
    padding: 0.75rem 1rem max(1rem, env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--discover-premium-line, rgba(120, 113, 108, 0.18)) !important;
    background: var(--discover-popover-bg, #fafaf8) !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout > .dtp-picker-footer,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout > .dtp-picker-footer {
    background: var(--discover-popover-bg-dark, #262626) !important;
    border-top-color: rgba(115, 115, 115, 0.24) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-inline-validation,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-picker-inline-validation {
    margin-bottom: 0.625rem !important;
    padding: 0.55rem 0.7rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.625rem !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-form-actions {
    gap: 0.5rem !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn {
    min-height: var(--dtp-action-min-height) !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 0.625rem !important;
    border: none !important;
    background: #292524 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary:hover,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn:hover {
    background: #1c1917 !important;
    color: #ffffff !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary,
  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn {
    background: #0a0a0a !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary:hover,
  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn:hover,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary:hover,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn:hover,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary:hover,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn:hover {
    background: #000000 !important;
    color: #ffffff !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-secondary,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-cancel-btn {
    min-height: var(--dtp-action-min-height) !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 0.625rem !important;
    border: 1px solid var(--dtp-panel-border) !important;
    background: var(--dtp-control-bg) !important;
    color: var(--dtp-control-text) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-secondary:hover,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-cancel-btn:hover {
    background: rgba(231, 229, 228, 0.55) !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-secondary,
  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-cancel-btn,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-secondary,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-cancel-btn,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-secondary,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-cancel-btn {
    background: #3f3f46 !important;
    border-color: rgba(168, 162, 158, 0.45) !important;
    color: #fafaf9 !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-secondary:hover,
  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-cancel-btn:hover,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-secondary:hover,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-cancel-btn:hover {
    background: #52525b !important;
  }
}

/* =============================================================================
 * Mobile sheet v2 — native-style When picker (phones ≤567px, .dtp-mobile-layout)
 * ============================================================================= */

/* Always hidden unless mobile sheet or centered modal chrome is active. */
#datetime-picker-dropdown .dtp-mobile-sheet-header {
  display: none;
}

/* =============================================================================
 * Centered When modal (desktop / non-compact) — middle-of-screen dialog chrome
 * ============================================================================= */
body.discover-page #datetime-picker-dropdown.dtp-centered-modal {
  --dtp-modal-pad-x: 1.05rem;
  border-radius: 1rem !important;
}

body.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 0.85rem var(--dtp-modal-pad-x) 0.35rem;
  border-bottom: 1px solid var(--discover-premium-line, rgba(120, 113, 108, 0.16));
}

body.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header[aria-hidden="true"] {
  display: none;
}

body.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header__grab {
  display: none;
}

body.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2rem;
}

body.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--discover-premium-ink, #171412);
}

.dark body.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header__title,
body.dark.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header__title {
  color: #f5f5f4;
}

body.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin: 0 -0.25rem 0 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--discover-premium-muted, #78716c);
  cursor: pointer;
}

body.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header__close:hover,
body.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header__close:focus-visible {
  background: var(--discover-premium-wash, #f5f3ef);
  color: var(--discover-premium-ink, #171412);
  outline: none;
}

.dark body.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header__close:hover,
.dark body.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header__close:focus-visible,
body.dark.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header__close:hover,
body.dark.discover-page #datetime-picker-dropdown.dtp-centered-modal .dtp-mobile-sheet-header__close:focus-visible {
  background: rgba(64, 64, 64, 0.85);
  color: #f5f5f4;
}

body.discover-page #datetime-picker-dropdown.dtp-centered-modal > .dtp-picker-header {
  padding-top: 0.75rem !important;
}

@media (max-width: 567px) {
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout {
    --dtp-field-height: var(--discover-mobile-control-height, 2.25rem);
    --dtp-preset-min-height: var(--discover-mobile-control-height, 2.25rem);
    --dtp-time-row-height: var(--discover-mobile-touch-target, 2.5rem);
    --dtp-action-min-height: var(--discover-mobile-control-height, 2.25rem);
    --dtp-mobile-pad-x: 1rem;
    --dtp-mobile-surface: var(--discover-premium-surface-solid, #ffffff);
    --dtp-mobile-wash: var(--discover-premium-wash, #f5f3ef);
    --dtp-mobile-line: var(--discover-premium-line, rgba(120, 113, 108, 0.18));
    --dtp-mobile-ink: var(--discover-premium-ink, #171412);
    --dtp-mobile-muted: var(--discover-premium-muted, #78716c);
    background: var(--dtp-mobile-surface) !important;
    border: none !important;
    box-shadow:
      0 -20px 56px rgba(28, 25, 23, 0.16),
      0 -2px 10px rgba(28, 25, 23, 0.06) !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout {
    --dtp-mobile-surface: #262626;
    --dtp-mobile-wash: rgba(38, 38, 38, 0.96);
    --dtp-mobile-line: rgba(115, 115, 115, 0.32);
    --dtp-mobile-ink: #f5f5f4;
    --dtp-mobile-muted: #a8a29e;
    background: var(--dtp-mobile-surface) !important;
    box-shadow:
      0 -20px 56px rgba(0, 0, 0, 0.42),
      0 -2px 10px rgba(0, 0, 0, 0.22) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-mobile-sheet-header {
    display: none;
    flex-direction: column;
    flex-shrink: 0;
    padding: 0 var(--dtp-mobile-pad-x);
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-mobile-sheet-header[aria-hidden="false"] {
    display: flex;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-mobile-sheet-header__grab {
    width: 2.25rem;
    height: 0.25rem;
    border-radius: 999px;
    background: rgba(120, 113, 108, 0.38);
    margin: 0.5rem auto 0.75rem;
    flex-shrink: 0;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-mobile-sheet-header__grab,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-mobile-sheet-header__grab,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-mobile-sheet-header__grab {
    background: rgba(168, 162, 158, 0.35);
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-mobile-sheet-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.25rem;
    margin-bottom: 0.25rem;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-mobile-sheet-header__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--dtp-mobile-ink, #171412);
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-mobile-sheet-header__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0 -0.375rem 0 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--dtp-mobile-muted, #78716c);
    cursor: pointer;
    touch-action: manipulation;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-mobile-sheet-header__close:hover,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-mobile-sheet-header__close:focus-visible {
    background: var(--dtp-mobile-wash);
    color: var(--dtp-mobile-ink);
    outline: none;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout > .dtp-picker-header {
    padding: 0 var(--dtp-mobile-pad-x) 0.75rem !important;
    border-bottom: none !important;
    background: transparent !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .discover-popover-section-heading,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #parking-booking-tabs h3 {
    display: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #quick-presets {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    padding-bottom: 0.125rem !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #quick-presets::-webkit-scrollbar {
    display: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn {
    flex: 0 0 auto !important;
    min-height: var(--dtp-preset-min-height) !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    border: 1px solid var(--dtp-mobile-line) !important;
    background: var(--dtp-mobile-wash) !important;
    color: var(--dtp-mobile-ink) !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn.dtp-preset--selected {
    background: #292524 !important;
    border-color: transparent !important;
    color: #ffffff !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn.dtp-preset--selected,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn.dtp-preset--selected,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .datetime-preset-btn.dtp-preset--selected {
    background: #f5f5f4 !important;
    border-color: transparent !important;
    color: #0a0a0a !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout > .datetime-picker-scroll-area,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout > .dtp-picker-body {
    padding: 0.25rem var(--dtp-mobile-pad-x) 0.75rem !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-section-heading,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-section-heading {
    display: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #short-term-sub-hint {
    display: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-short-term-subtabs {
    margin: 0 0 1rem !important;
    padding: 0.1875rem !important;
    border-radius: 0.625rem !important;
    background: var(--dtp-mobile-wash) !important;
    border: 1px solid var(--dtp-mobile-line) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-subtab {
    min-height: var(--discover-mobile-control-height, 2.25rem) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    color: var(--dtp-mobile-muted) !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-subtab--active {
    background: var(--dtp-mobile-surface) !important;
    color: var(--dtp-mobile-ink) !important;
    box-shadow: 0 1px 2px rgba(28, 25, 23, 0.08) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-field {
    margin-bottom: 0.875rem !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-field-label {
    margin-bottom: 0.375rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--dtp-mobile-ink) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-date-field {
    min-height: var(--dtp-field-height) !important;
    border-radius: 0.625rem !important;
    border: 1px solid var(--dtp-mobile-line) !important;
    background: var(--dtp-mobile-wash) !important;
    box-shadow: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-date-readable {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--dtp-mobile-ink) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-date-readable.dtp-date-readable--empty {
    font-weight: 500 !important;
    color: var(--dtp-mobile-muted) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-range-panel {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-stack {
    gap: 0.625rem !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-field {
    display: grid !important;
    grid-template-columns: 3.25rem minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.625rem !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-field-label {
    margin: 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--dtp-mobile-muted) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-row {
    display: flex !important;
    align-items: stretch !important;
    min-height: var(--dtp-time-row-height) !important;
    height: var(--dtp-time-row-height) !important;
    padding: 0.125rem !important;
    border-radius: 0.625rem !important;
    background: var(--dtp-mobile-wash) !important;
    border: 1px solid var(--dtp-mobile-line) !important;
    overflow: hidden !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-row .dtp-select,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-row select {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 100% !important;
    height: 100% !important;
    padding: 0 0.25rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: var(--dtp-mobile-ink) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-row .dtp-select--ampm,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-row select[id$="-ampm"] {
    flex: 0 0 3.25rem !important;
    max-width: 3.25rem !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    background: var(--dtp-mobile-surface) !important;
    border-left: 1px solid var(--dtp-mobile-line) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-time-row-sep {
    display: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-duration-slot {
    margin-top: 0.5rem !important;
    padding: 0 !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-duration-bar,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-duration-inline {
    min-height: 2.25rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.625rem !important;
    background: var(--dtp-mobile-wash) !important;
    border: 1px solid var(--dtp-mobile-line) !important;
    font-size: 0.8125rem !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-duration-label {
    font-weight: 600 !important;
    color: var(--dtp-mobile-muted) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-duration-value,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #duration-text {
    font-weight: 650 !important;
    color: var(--dtp-mobile-ink) !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout select.dtp-input,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #storage-duration,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #weekly-duration {
    min-height: var(--dtp-field-height) !important;
    padding-inline: 0.65rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border-radius: 0.625rem !important;
    border: 1px solid var(--dtp-mobile-line) !important;
    background: var(--dtp-mobile-wash) !important;
    color: var(--dtp-mobile-ink) !important;
    box-shadow: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #storage-top-section p:last-child {
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout > .dtp-picker-footer {
    padding: 0.75rem var(--dtp-mobile-pad-x) max(0.875rem, env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--dtp-mobile-line) !important;
    background: var(--dtp-mobile-surface) !important;
    box-shadow: 0 -8px 24px rgba(28, 25, 23, 0.06);
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout > .dtp-picker-footer,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout > .dtp-picker-footer {
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-form-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-cancel-btn {
    display: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary {
    width: 100% !important;
    flex: none !important;
    min-height: var(--dtp-action-min-height) !important;
    padding: 0.5rem 0.875rem !important;
    font-size: 0.875rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
    border-radius: 0.625rem !important;
    border: none !important;
    background: #292524 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn:hover,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary:hover {
    background: #1c1917 !important;
    color: #ffffff !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn,
  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary {
    background: #0a0a0a !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn:hover,
  .dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary:hover,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn:hover,
  body.dark.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary:hover,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-apply-btn:hover,
  html.dark body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-btn-primary:hover {
    background: #000000 !important;
    color: #ffffff !important;
  }

  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout .dtp-inline-validation,
  body.discover-page #datetime-picker-dropdown.dtp-mobile-layout #datetime-picker-inline-validation {
    margin-bottom: 0.625rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
  }
}