/* v579U — Order content layout clean fix.
   Scope: order.html only.
   Purpose:
   1) keep the v578U review rail fixes,
   2) repair the Customer Information and Add-on Services desktop layout,
   3) stop the add-on card from visually shifting wider than the main form,
   4) avoid stacking another throwaway patch by consolidating the active order-page fixes.

   This stylesheet intentionally replaces the active v578U link on order.html.
*/

@media (min-width:1281px){
  body:has(#orderForm) .order-shell{
    max-width:1580px !important;
  }

  body:has(#orderForm) .order-layout{
    display:grid !important;
    grid-template-columns:minmax(860px, 1.72fr) minmax(400px, 480px) !important;
    gap:34px !important;
    align-items:start !important;
  }

  body:has(#orderForm) .order-main,
  body:has(#orderForm) .order-main.card,
  body:has(#orderForm) .order-main.apply-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    justify-self:stretch !important;
  }

  body:has(#orderForm) .order-summary{
    width:100% !important;
    max-width:480px !important;
    min-width:0 !important;
    justify-self:stretch !important;
    padding:20px 22px !important;
  }
}

@media (min-width:1101px) and (max-width:1280px){
  body:has(#orderForm) .order-shell{
    max-width:1320px !important;
  }

  body:has(#orderForm) .order-layout{
    display:grid !important;
    grid-template-columns:minmax(0, 1.56fr) minmax(390px, 450px) !important;
    gap:28px !important;
    align-items:start !important;
  }

  body:has(#orderForm) .order-main,
  body:has(#orderForm) .order-main.card,
  body:has(#orderForm) .order-main.apply-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  body:has(#orderForm) .order-summary{
    width:100% !important;
    max-width:450px !important;
    min-width:0 !important;
    padding:20px !important;
  }
}

@media (min-width:981px) and (max-width:1100px){
  body:has(#orderForm) .order-layout{
    display:grid !important;
    grid-template-columns:minmax(0, 1.42fr) minmax(360px, 420px) !important;
    gap:24px !important;
    align-items:start !important;
  }

  body:has(#orderForm) .order-summary{
    width:100% !important;
    max-width:420px !important;
    min-width:0 !important;
    padding:18px !important;
  }
}

@media (min-width:981px){
  body:has(#orderForm) .order-summary{
    position:sticky !important;
    top:88px !important;
    display:flex !important;
    flex-direction:column !important;
    height:calc(100vh - 118px) !important;
    max-height:780px !important;
    min-height:560px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  body:has(#orderForm) .order-summary h3{
    flex:0 0 auto !important;
    margin-bottom:16px !important;
  }

  body:has(#orderForm) .order-review-scroll-v561U{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:0 12px 18px 0 !important;
    margin:0 -4px 0 0 !important;
  }

  body:has(#orderForm) .order-review-total-v561U{
    flex:0 0 auto !important;
    margin-top:12px !important;
    padding-top:14px !important;
    border-top:1px solid #e2e8f0 !important;
    background:#fff !important;
    position:relative !important;
    z-index:2 !important;
  }

  body:has(#orderForm) .order-review-note-v561U{
    flex:0 0 auto !important;
    margin-top:10px !important;
    max-height:86px !important;
    overflow:hidden !important;
  }

  body:has(#orderForm) .order-summary .summary-row{
    display:grid !important;
    grid-template-columns:minmax(150px, 0.92fr) minmax(180px, 1.08fr) !important;
    gap:16px !important;
    align-items:start !important;
    width:100% !important;
    padding:11px 0 !important;
  }

  body:has(#orderForm) .order-summary .summary-row span{
    min-width:0 !important;
    max-width:none !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    line-height:1.32 !important;
  }

  body:has(#orderForm) .order-summary .summary-row strong{
    min-width:0 !important;
    max-width:none !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    text-align:right !important;
    line-height:1.32 !important;
  }

  body:has(#orderForm) .order-summary .summary-row strong small{
    display:block !important;
    margin-top:5px !important;
    line-height:1.25 !important;
  }

  body:has(#orderForm) .order-review-total-v561U .summary-row,
  body:has(#orderForm) .order-review-total-v561U .total-line{
    grid-template-columns:minmax(96px, 0.58fr) minmax(150px, 1.42fr) !important;
    gap:16px !important;
    padding:14px 16px !important;
  }

  body:has(#orderForm) .order-review-total-v561U .total-line strong{
    white-space:nowrap !important;
    font-size:24px !important;
  }

  /* Contact information: keep the top row balanced and let email span full width
     instead of leaving an awkward empty half-row. */
  body:has(#orderForm) .contact-subsection{
    margin-top:18px !important;
    padding-top:16px !important;
  }

  body:has(#orderForm) .compact-contact-grid{
    display:grid !important;
    grid-template-columns:minmax(0, .96fr) minmax(0, 1.04fr) !important;
    gap:18px 26px !important;
    align-items:start !important;
  }

  body:has(#orderForm) .compact-contact-grid > label{
    min-width:0 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-self:start !important;
  }

  body:has(#orderForm) .compact-contact-grid > label:nth-child(3){
    grid-column:1 / -1 !important;
  }

  body:has(#orderForm) .compact-contact-grid input{
    width:100% !important;
    max-width:none !important;
  }

  /* Add-on services: stop the Arrival Fast Track inner panel from expanding wider
     than the main column and keep the date/type row aligned with the parent card. */
  body:has(#orderForm) .addon-area,
  body:has(#orderForm) .addon-fields,
  body:has(#orderForm) #fastTrackFields{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  body:has(#orderForm) .addon-fields{
    margin-top:14px !important;
    padding:18px 20px !important;
  }

  body:has(#orderForm) #fastTrackFields .fast-track-grid-v499G{
    display:grid !important;
    grid-template-columns:minmax(0, .94fr) minmax(0, 1.06fr) !important;
    gap:18px 22px !important;
    align-items:start !important;
    width:100% !important;
  }

  body:has(#orderForm) #fastTrackFields .fast-track-grid-v499G > label{
    min-width:0 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-self:start !important;
  }

  body:has(#orderForm) #fastTrackFields .fast-track-flight-number-v499G{
    grid-column:1 / -1 !important;
  }

  body:has(#orderForm) #fastTrackFields .date-combo{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 58px !important;
    gap:10px !important;
    align-items:center !important;
    width:100% !important;
    position:relative !important;
  }

  body:has(#orderForm) #fastTrackFields .date-combo input[data-date-input]{
    min-width:0 !important;
    width:100% !important;
  }

  body:has(#orderForm) #fastTrackFields select[name="fastTrackType"],
  body:has(#orderForm) #fastTrackFields input[name="fastTrackFlightNumber"]{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

@media (min-width:981px) and (max-width:1180px){
  body:has(#orderForm) .order-summary .summary-row{
    grid-template-columns:minmax(138px, 0.9fr) minmax(168px, 1.1fr) !important;
    gap:14px !important;
  }

  body:has(#orderForm) .compact-contact-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    gap:16px 18px !important;
  }

  body:has(#orderForm) #fastTrackFields .fast-track-grid-v499G{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    gap:16px 18px !important;
  }
}

@media (min-width:981px) and (max-height:720px){
  body:has(#orderForm) .order-summary{
    height:calc(100vh - 92px) !important;
    min-height:500px !important;
    max-height:none !important;
  }

  body:has(#orderForm) .order-review-note-v561U{
    max-height:64px !important;
  }
}

@media (max-width:980px){
  body:has(#orderForm) .order-layout{
    display:block !important;
  }

  body:has(#orderForm) .order-summary{
    display:none !important;
  }

  body:has(#orderForm) .order-review-scroll-v561U{
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
    margin-right:0 !important;
  }
}

/* v580U — Confirm block polish and submit feedback visibility.
   Keep this in the same active order-page stylesheet so order UI fixes stay consolidated. */
body:has(#orderForm) .payment-top-block{
  padding:22px 24px !important;
}

body:has(#orderForm) .confirmation-box.single-confirm-v562U{
  max-width:860px !important;
  margin:16px auto 20px !important;
  padding:20px 22px !important;
  border-radius:22px !important;
  background:#f8fafc !important;
  border:1px solid #dbe5ef !important;
  box-shadow:none !important;
}

body:has(#orderForm) .confirmation-box.single-confirm-v562U .confirm-check{
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:start !important;
  padding:0 !important;
  font-size:17px !important;
  line-height:1.55 !important;
  font-weight:650 !important;
  letter-spacing:-.015em !important;
  color:#10213f !important;
}

body:has(#orderForm) .confirmation-box.single-confirm-v562U .confirm-check input{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  margin:4px 0 0 !important;
  accent-color:#1d4ed8 !important;
}

body:has(#orderForm) .confirmation-box.single-confirm-v562U .confirm-check span{
  display:block !important;
  max-width:720px !important;
}

body:has(#orderForm) .confirmation-box.single-confirm-v562U .confirm-check a{
  color:#1d4ed8 !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}

body:has(#orderForm) .confirmation-box.single-confirm-v562U .field-error{
  margin:12px 0 0 38px !important;
  font-size:14px !important;
  line-height:1.35 !important;
}

body:has(#orderForm) .form-submit-message{
  margin:0 0 16px !important;
  border-radius:16px !important;
  padding:14px 16px !important;
  font-size:15px !important;
  line-height:1.5 !important;
}

@media (max-width:980px){
  body:has(#orderForm) .confirmation-box.single-confirm-v562U{
    max-width:none !important;
    margin:14px 0 18px !important;
    padding:16px !important;
  }

  body:has(#orderForm) .confirmation-box.single-confirm-v562U .confirm-check{
    grid-template-columns:22px minmax(0,1fr) !important;
    gap:12px !important;
    font-size:15px !important;
    line-height:1.5 !important;
  }

  body:has(#orderForm) .confirmation-box.single-confirm-v562U .confirm-check input{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
  }

  body:has(#orderForm) .confirmation-box.single-confirm-v562U .field-error{
    margin-left:34px !important;
    font-size:13px !important;
  }
}


/* v584U — paired-field baseline cleanup for Contact and Arrival Fast Track.
   Replaces the v583U min-height label balancing approach with a cleaner
   one-line label + equal control-height system for the affected fields. */
@media (min-width: 981px){
  body:has(#orderForm) .field-label-title{
    display:block !important;
    margin:0 0 10px 0 !important;
    line-height:1.22 !important;
    font-weight:700 !important;
    letter-spacing:-0.015em !important;
    min-height:0 !important;
  }

  body:has(#orderForm) .compact-contact-grid,
  body:has(#orderForm) #fastTrackFields .fast-track-grid-v499G{
    align-items:start !important;
  }

  body:has(#orderForm) .compact-contact-grid > label,
  body:has(#orderForm) #fastTrackFields .fast-track-grid-v499G > label{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-self:start !important;
    min-width:0 !important;
  }

  /* Contact row: keep the long phone label on one line so the two inputs start
     at the same vertical position. */
  body:has(#orderForm) .compact-contact-grid > label .field-label-title{
    white-space:nowrap !important;
    font-size:clamp(16px, 1.12vw, 18px) !important;
  }

  body:has(#orderForm) .compact-contact-grid input{
    margin-top:0 !important;
    min-height:58px !important;
    height:58px !important;
  }

  /* Arrival Fast Track row: date input, calendar button, and type select must
     share the same row height and baseline. */
  body:has(#orderForm) #fastTrackFields .fast-track-grid-v499G{
    grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr) !important;
    gap:18px 24px !important;
  }

  body:has(#orderForm) #fastTrackFields .fast-track-grid-v499G > label .field-label-title{
    white-space:nowrap !important;
    font-size:clamp(16px, 1.12vw, 18px) !important;
  }

  body:has(#orderForm) #fastTrackFields .date-combo{
    margin-top:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 64px !important;
    gap:10px !important;
    align-items:stretch !important;
    width:100% !important;
    position:relative !important;
  }

  body:has(#orderForm) #fastTrackFields .date-combo input[data-date-input],
  body:has(#orderForm) #fastTrackFields select[name="fastTrackType"]{
    margin-top:0 !important;
    min-height:64px !important;
    height:64px !important;
    width:100% !important;
  }

  body:has(#orderForm) #fastTrackFields .date-combo .date-button,
  body:has(#orderForm) #fastTrackFields .date-combo .native-date-picker{
    width:64px !important;
    height:64px !important;
    min-height:64px !important;
    margin-top:0 !important;
  }

  body:has(#orderForm) #fastTrackFields .date-combo .date-button{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    align-self:stretch !important;
    justify-self:stretch !important;
    padding:0 !important;
    border-radius:18px !important;
    font-size:30px !important;
    line-height:1 !important;
  }

  body:has(#orderForm) #fastTrackFields .date-combo .native-date-picker{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    left:auto !important;
    width:64px !important;
    height:64px !important;
    min-height:64px !important;
  }

  body:has(#orderForm) .compact-contact-grid > label .field-error,
  body:has(#orderForm) #fastTrackFields .fast-track-grid-v499G > label .field-error{
    margin-top:6px !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px){
  body:has(#orderForm) .compact-contact-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    gap:16px 20px !important;
  }

  body:has(#orderForm) .compact-contact-grid > label .field-label-title,
  body:has(#orderForm) #fastTrackFields .fast-track-grid-v499G > label .field-label-title{
    font-size:16px !important;
  }
}

@media (max-width: 980px){
  body:has(#orderForm) #fastTrackFields .date-combo .date-button{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    font-size:26px !important;
    line-height:1 !important;
  }

  body:has(#orderForm) #fastTrackFields .date-combo .native-date-picker{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    left:auto !important;
  }

  body:has(#orderForm) .field-label-title{
    display:block !important;
    margin:0 0 8px 0 !important;
    min-height:auto !important;
    white-space:normal !important;
  }
}

/* v585U — mobile upload-guide 4-up experiment.
   Keep all 4 guide images on one row for each guide block on mobile,
   so the 8 examples appear as 2 rows total (4 passport + 4 portrait). */
@media (max-width: 980px){
  body:has(#orderForm) .passport-guide-grid-v489G,
  body:has(#orderForm) .portrait-guide-grid-v496G{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:6px !important;
  }

  body:has(#orderForm) .passport-upload-guide-v489G,
  body:has(#orderForm) .portrait-upload-guide-v496G{
    padding:12px !important;
  }

  body:has(#orderForm) .passport-guide-item-v489G,
  body:has(#orderForm) .portrait-guide-item-v496G{
    padding:4px !important;
    border-radius:12px !important;
    min-width:0 !important;
  }

  body:has(#orderForm) .passport-guide-item-v489G img,
  body:has(#orderForm) .portrait-guide-item-v496G img{
    width:100% !important;
    max-width:none !important;
    height:72px !important;
    object-fit:cover !important;
    margin:0 auto 4px !important;
    border-radius:7px !important;
  }

  body:has(#orderForm) .passport-guide-status-v489G{
    width:14px !important;
    height:14px !important;
    font-size:10px !important;
    margin-bottom:3px !important;
  }

  body:has(#orderForm) .passport-guide-item-v489G b,
  body:has(#orderForm) .portrait-guide-item-v496G b{
    font-size:9.5px !important;
    line-height:1.15 !important;
    min-height:22px !important;
    padding:0 2px 2px !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }
}

@media (max-width: 560px){
  body:has(#orderForm) .passport-guide-grid-v489G,
  body:has(#orderForm) .portrait-guide-grid-v496G{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:5px !important;
  }

  body:has(#orderForm) .passport-upload-guide-head-v489G strong,
  body:has(#orderForm) .portrait-upload-guide-head-v496G strong{
    font-size:15px !important;
  }

  body:has(#orderForm) .passport-upload-guide-head-v489G small,
  body:has(#orderForm) .portrait-upload-guide-head-v496G small{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  body:has(#orderForm) .passport-guide-item-v489G img,
  body:has(#orderForm) .portrait-guide-item-v496G img{
    height:60px !important;
  }

  body:has(#orderForm) .passport-guide-item-v489G b,
  body:has(#orderForm) .portrait-guide-item-v496G b{
    font-size:8.5px !important;
    min-height:20px !important;
  }
}

@media (max-width: 420px){
  body:has(#orderForm) .passport-upload-guide-v489G,
  body:has(#orderForm) .portrait-upload-guide-v496G{
    padding:10px !important;
  }

  body:has(#orderForm) .passport-guide-grid-v489G,
  body:has(#orderForm) .portrait-guide-grid-v496G{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:4px !important;
  }

  body:has(#orderForm) .passport-guide-item-v489G img,
  body:has(#orderForm) .portrait-guide-item-v496G img{
    height:52px !important;
  }

  body:has(#orderForm) .passport-guide-item-v489G b,
  body:has(#orderForm) .portrait-guide-item-v496G b{
    font-size:8px !important;
    line-height:1.12 !important;
    min-height:18px !important;
  }
}

/* v628U — Step 2/3 review rail vertical expansion.
   Root cause fixed: older attempts changed only the inner scroll area, but the
   active consolidated v585U layer capped the whole sticky summary to the
   viewport with height:calc(100vh - 118px) and max-height:780px. That parent
   cap prevented the visible review area from becoming taller. On the main registration/review steps, intentionally let the review rail extend farther
   down the page so the details window is about 50% taller while Total stays
   outside the internal scroll area. */
@media (min-width:981px){
  body:has(#orderForm.step-1-active) .order-summary,
  body:has(#orderForm.step-2-active) .order-summary,
  body:has(#orderForm .form-step[data-step="1"].active) .order-summary,
  body:has(#orderForm .form-step[data-step="2"].active) .order-summary{
    height:auto !important;
    min-height:840px !important;
    max-height:none !important;
    overflow:visible !important;
  }

  body:has(#orderForm.step-1-active) .order-review-scroll-v561U,
  body:has(#orderForm.step-2-active) .order-review-scroll-v561U,
  body:has(#orderForm .form-step[data-step="1"].active) .order-review-scroll-v561U,
  body:has(#orderForm .form-step[data-step="2"].active) .order-review-scroll-v561U{
    flex:0 0 auto !important;
    min-height:690px !important;
    max-height:690px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
}

@media (min-width:981px) and (max-width:1180px){
  body:has(#orderForm.step-1-active) .order-summary,
  body:has(#orderForm.step-2-active) .order-summary,
  body:has(#orderForm .form-step[data-step="1"].active) .order-summary,
  body:has(#orderForm .form-step[data-step="2"].active) .order-summary{
    min-height:780px !important;
  }

  body:has(#orderForm.step-1-active) .order-review-scroll-v561U,
  body:has(#orderForm.step-2-active) .order-review-scroll-v561U,
  body:has(#orderForm .form-step[data-step="1"].active) .order-review-scroll-v561U,
  body:has(#orderForm .form-step[data-step="2"].active) .order-review-scroll-v561U{
    min-height:620px !important;
    max-height:620px !important;
  }
}

@media (min-width:981px) and (max-height:720px){
  body:has(#orderForm.step-1-active) .order-summary,
  body:has(#orderForm.step-2-active) .order-summary,
  body:has(#orderForm .form-step[data-step="1"].active) .order-summary,
  body:has(#orderForm .form-step[data-step="2"].active) .order-summary{
    min-height:760px !important;
  }

  body:has(#orderForm.step-1-active) .order-review-scroll-v561U,
  body:has(#orderForm.step-2-active) .order-review-scroll-v561U,
  body:has(#orderForm .form-step[data-step="1"].active) .order-review-scroll-v561U,
  body:has(#orderForm .form-step[data-step="2"].active) .order-review-scroll-v561U{
    min-height:600px !important;
    max-height:600px !important;
  }
}