/* XGQN-P62 | Home booking Mobile only. Extends P59,P60,P61 without touching PC.
   Safari's intrinsic date widget is wider than its 2-column cell and legacy
   #xgg-mobile-ios-date-grid-fix07 clips the real input at the right edge.
   Show a controlled visual box *inside the existing field* and keep the genuine
   type=date input (and its native calendar, ID, name, min, value, form JS) operable.
*/
.xgg-p62-date-display {display:none;}
@media screen and (max-width:767px) {
  /* Small size reduction: 44 -> 42px for the standard booking inputs only. */
  body.transport-native.xg-home-p06 .trm-home section.qn23c-section #qn23cBookingForm .vinfast-lead-grid>.vinfast-lead-field>input:not([type="date"]),
  body.transport-native.xg-home-p06 .trm-home section.qn23c-section #qn23cBookingForm .vinfast-lead-grid>.vinfast-lead-field>select {
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
  }
  body.transport-native.xg-home-p06 .trm-home section.qn23c-section #qn23cBookingForm .vinfast-lead-grid {
    row-gap:7px!important;
  }
  /* Remove clipping from old Safari grid fix; preserve equal 2-column tracks. */
  body.transport-native.xg-home-p06 .trm-home section.qn23c-section #qn23cBookingForm .vinfast-lead-grid>.vinfast-lead-field.xgg-p62-date-field {
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    grid-column:auto!important;
    overflow:visible!important;
    isolation:isolate;
  }
  /* The native iOS date picker still owns taps/keyboard/validation. Its WebKit
     drawing can be irregular but is invisible; the visual border never clips. */
  body.transport-native.xg-home-p06 .trm-home section.qn23c-section #qn23cBookingForm .xgg-p62-date-field>input#qn23c_departure {
    display:block!important;
    position:relative!important;
    z-index:1!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:7px!important;
    outline:0!important;
    box-shadow:none!important;
    opacity:0!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent;
    -webkit-appearance:none!important;
    appearance:none!important;
  }
  /* This overlay is visual only: pointer events go to the real native input. */
  body.transport-native.xg-home-p06 .trm-home section.qn23c-section #qn23cBookingForm .xgg-p62-date-field>.xgg-p62-date-display {
    display:flex!important;
    position:absolute!important;
    z-index:2!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    padding:0 11px!important;
    align-items:center!important;
    overflow:hidden!important;
    border:1px solid var(--booking-input-border,var(--xgp38-h-BFCBDA,#bfcbda))!important;
    border-radius:7px!important;
    box-shadow:0 2px 7px rgba(var(--xgp38-r-0F172A,15,23,42),.04)!important;
    background:#fff!important;
    color:#98a2b3!important;
    font-size:14px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    pointer-events:none!important;
  }
  body.transport-native.xg-home-p06 .trm-home section.qn23c-section #qn23cBookingForm .xgg-p62-date-field>.xgg-p62-date-display.is-set {
    color:var(--booking-input-text,#263b51)!important;
  }
  /* Checkbox and consent in one aligned horizontal row. Increase checkbox
     from 17px to 21px; type slightly larger but avoid cramped wrapping. */
  body.transport-native.xg-home-p06 .trm-home section.qn23c-section #qn23cBookingForm label.xg-p04-consent {
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    padding:0!important;
    min-height:23px!important;
    margin:6px 0 4px!important;
  }
  body.transport-native.xg-home-p06 .trm-home section.qn23c-section #qn23cBookingForm label.xg-p04-consent>input#qn23c_privacy_consent {
    display:block!important;
    position:static!important;
    flex:0 0 21px!important;
    align-self:center!important;
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    min-height:21px!important;
    max-width:21px!important;
    max-height:21px!important;
    margin:0!important;
    padding:0!important;
    opacity:1!important;
    -webkit-appearance:checkbox!important;
    appearance:auto!important;
    accent-color:var(--xgp38-h-347FBD,#347fbd)!important;
    vertical-align:middle!important;
  }
  body.transport-native.xg-home-p06 .trm-home section.qn23c-section #qn23cBookingForm label.xg-p04-consent>.xgg-p61-consent-mobile {
    display:block!important;
    flex:1 1 0%!important;
    align-self:center!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    font-size:clamp(10.5px,3vw,12px)!important;
    line-height:1.25!important;
    color:var(--xgp38-h-2E5674,#2e5674)!important;
    font-weight:500!important;
    white-space:nowrap!important;
  }
}
@media screen and (max-width:359px) {
  body.transport-native.xg-home-p06 .trm-home section.qn23c-section #qn23cBookingForm label.xg-p04-consent>.xgg-p61-consent-mobile {
    white-space:normal!important;
    font-size:10.5px!important;
  }
}