/* Arabians Studio v1.39 mobile fix — applies ONLY on screens up to 900px.
 * Desktop/laptop (901px+) is not touched. Roll back: delete this file.
 *
 * 1. Private / Evening / Overnight: the desktop package card body was also shown on
 *    phones, so every package appeared twice. Hide the desktop copy on mobile.
 * 2. The mobile design is a 444px Figma frame. Phones narrower than 444px (390, 375, 360…)
 *    got the same fixed sizes and looked cramped/overflowing. The whole page is scaled
 *    down proportionally (like Figma) in 4px steps, so every section keeps its layout.
 */
@media (max-width:900px){
  .source-has-mobile>.package-photo,
  .source-has-mobile>.package-body,
  .source-has-mobile>.package-image{display:none!important}
}

/* 3. Package cards (mobile layout): badge spacing, Figma photo ratio, gold sub-headings,
 *    full-width buttons, self-drive lists in the same style as the first card. */
@media (max-width:900px){
  body .packages-section .source-package-card.source-has-mobile .package-mobile-layout .package-photo>.original-image.package-image{aspect-ratio:var(--mobile-photo-ratio)!important;height:auto!important}
  html body .package-mobile-layout .feature-list li.feature-section-heading{color:#c88a3d!important;font-size:16px!important;font-weight:600!important;line-height:1.3!important;padding-left:0!important;margin-top:6px!important}
  html body main .source-has-mobile .package-mobile-layout .card-actions{width:100%!important;align-self:stretch!important}
  html body main .source-has-mobile .package-mobile-layout .card-actions>.button{flex:1 1 0!important;min-width:0!important;white-space:nowrap!important}
  html body main .packages-section .selfdrive-figma-feature-set{display:flex!important;flex-direction:column!important;gap:10px!important}
  html body main .packages-section .selfdrive-figma-feature-set>.feature-list{display:flex!important;flex-direction:column!important;gap:10px!important;margin:0!important}
  html body main .packages-section .selfdrive-figma-feature-set>.feature-list>li{font-size:12px!important;line-height:1.4!important;font-weight:500!important}
  html body main .packages-section .selfdrive-figma-feature-set>.selfdrive-figma-feature-label{font-size:16px!important;line-height:1.3!important;font-weight:600!important;color:#c88a3d!important;margin:4px 0 0!important}
  html body.page-bus-pick-and-drop-desert-safari-dubai .package-mobile-layout .package-metrics{margin-bottom:12px!important}
  /* Private: "View All Packages" box is not in the mobile design (it pointed to the list above it). */
  main section.bounded-source:has(>.container>.content-row>a.button[href="#packages"]){display:none!important}
}

/* 4. Tables */
@media (max-width:900px){
  html body main table.source-comparison-table:not(:has(.design-mask)) td:last-child{font-size:inherit!important}
  html body main table.source-comparison-table:not(:has(.design-mask)):not(:has(th:nth-child(3))) tr>:first-child{width:64%!important}
  html body main table.comparison-table:not(.source-comparison-table) tr>:first-child{width:22%!important}
  /* Private "Compare the Six Safari Packages": rounded rows like Figma, small icons. */
  html body main .table-scroll:has(>table.source-comparison-table .design-mask){border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
  html body main table.source-comparison-table:has(.design-mask){border-collapse:separate!important;border-spacing:0 8px!important;background:transparent!important;border:0!important;box-shadow:none!important;table-layout:fixed!important;width:100%!important;margin-top:-8px}
  html body main table.source-comparison-table:has(.design-mask) tr{background:transparent!important}
  html body main table.source-comparison-table:has(.design-mask) :is(th,td){background:#fff!important;border:1px solid #ecd3ad!important;border-left:0!important;border-right:0!important;padding:8px 6px!important;vertical-align:middle!important;font-size:11px!important;line-height:1.3!important;color:#211c17!important}
  html body main table.source-comparison-table:has(.design-mask) thead th{background:#fdf3e3!important;color:#c88a3d!important;font-weight:600!important;font-size:12px!important}
  html body main table.source-comparison-table:has(.design-mask) tr>:first-child{border-left:1px solid #ecd3ad!important;border-radius:6px 0 0 6px!important;width:34%!important}
  html body main table.source-comparison-table:has(.design-mask) tr>:nth-child(2){width:29%!important}
  html body main table.source-comparison-table:has(.design-mask) tr>:last-child{border-right:1px solid #ecd3ad!important;border-radius:0 6px 6px 0!important;width:37%!important}
  html body main table.source-comparison-table:has(.design-mask) .source-table-cell{gap:6px!important;align-items:center!important}
  html body main table.source-comparison-table:has(.design-mask) .source-table-cell>.design-mask{width:14px!important;height:14px!important;flex:0 0 14px!important}
}

/* 5. Forms: one column on phones (Morning, Self Drive), as in Figma. */
@media (max-width:600px){
  html body:is(.page-morning-desert-safari-dubai,.page-self-drive-desert-safari-dubai) main .booking-section .form-grid{grid-template-columns:minmax(0,1fr)!important}
  html body:is(.page-morning-desert-safari-dubai,.page-self-drive-desert-safari-dubai) main .booking-section .form-grid>*{grid-column:auto!important}
}

/* 6. Booking-support / call-to-action blocks */
@media (max-width:900px){
  html body main .support-section .source-support-layout{grid-template-columns:minmax(0,1fr)!important}
  html body main .support-section .source-support-copy>p:not(.eyebrow){font-size:13px!important;line-height:1.55!important}
  html body main .support-section .source-support-copy .actions{flex-wrap:nowrap!important;gap:10px!important}
  html body main .support-section .source-support-copy .actions>.button{flex:1 1 0!important;min-width:0!important;width:auto!important;font-size:12px!important;min-height:40px!important;height:auto!important;padding:8px!important;white-space:nowrap!important}
  /* Overnight "Plan your overnight desert safari": text was desktop size and the checklist was hidden under the wave. */
  html body.page-overnight-desert-safari-dubai main>section.bounded-source:has(.v25-overnight-support-panel){padding-bottom:110px!important}
  html body main section:has(.v25-overnight-support-panel) .container,
  html body main .v25-overnight-support-panel,
  html body main .v25-overnight-support-panel .content-row,
  html body main .v25-overnight-support-panel .content-stack{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important}
  html body main .v25-overnight-support-panel{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
  html body main .v25-overnight-support-panel .design-text{font-size:13px!important;line-height:1.5!important}
  html body main .v25-overnight-support-panel h2.design-text{font-size:21px!important;line-height:1.3!important}
  html body main .v25-overnight-support-panel h3.design-text{font-size:17px!important;line-height:1.3!important}
  html body main .v25-overnight-support-panel>.content-row>.content-stack>.content-stack>.content-stack:first-child>.content-stack:first-child>p.design-text:first-child{font-size:12px!important;color:#c88a3d!important;font-weight:500!important}
  /* Dune Buggy guide / booking details: gold left line, Figma text sizes. */
  html body main :is(.dune-guide-blocks,.dune-detail-blocks){display:flex!important;flex-direction:column!important;gap:16px!important}
  html body main :is(.dune-guide-block,.dune-detail-block){border-left:2px solid #c88a3d!important;padding-left:12px!important}
  html body main :is(.dune-guide-block,.dune-detail-block)>h3{font-size:16px!important;line-height:1.3!important;margin:0 0 4px!important}
  html body main :is(.dune-guide-block,.dune-detail-block)>p{font-size:12px!important;line-height:1.5!important}
}

/* 7. Blog cards: fixed height cut off the "Read More" link. */
@media (max-width:900px){
  html body main article.source-blog-card{height:auto!important;min-height:0!important}
  html body main article.source-blog-card .blog-card-body{height:auto!important;padding-bottom:18px!important}
}

/* 8. Privacy / Terms / Refund: body text was 6–7px (unreadable on a phone). */
@media (max-width:900px){
  html body:is(.page-cancellation-refund-policy,.page-privacy-policy,.page-terms-and-conditions) main .policy-copy :is(p,li,.design-text:not(h1,h2,h3)),
  html body.page-terms-and-conditions main .policy-copy .terms-sharing-list{font-size:12px!important;line-height:1.55!important}
  html body:is(.page-cancellation-refund-policy,.page-privacy-policy,.page-terms-and-conditions) main .policy-copy :is(h2,h3){font-size:16px!important;line-height:1.3!important;margin-top:14px!important;font-weight:600!important}
}

/* 2. Proportional scaling below the 444px frame (see top). */
@media (min-width:320px) and (max-width:323.98px){html{zoom:0.7207}}
@media (min-width:324px) and (max-width:327.98px){html{zoom:0.7297}}
@media (min-width:328px) and (max-width:331.98px){html{zoom:0.7387}}
@media (min-width:332px) and (max-width:335.98px){html{zoom:0.7477}}
@media (min-width:336px) and (max-width:339.98px){html{zoom:0.7568}}
@media (min-width:340px) and (max-width:343.98px){html{zoom:0.7658}}
@media (min-width:344px) and (max-width:347.98px){html{zoom:0.7748}}
@media (min-width:348px) and (max-width:351.98px){html{zoom:0.7838}}
@media (min-width:352px) and (max-width:355.98px){html{zoom:0.7928}}
@media (min-width:356px) and (max-width:359.98px){html{zoom:0.8018}}
@media (min-width:360px) and (max-width:363.98px){html{zoom:0.8108}}
@media (min-width:364px) and (max-width:367.98px){html{zoom:0.8198}}
@media (min-width:368px) and (max-width:371.98px){html{zoom:0.8288}}
@media (min-width:372px) and (max-width:375.98px){html{zoom:0.8378}}
@media (min-width:376px) and (max-width:379.98px){html{zoom:0.8468}}
@media (min-width:380px) and (max-width:383.98px){html{zoom:0.8559}}
@media (min-width:384px) and (max-width:387.98px){html{zoom:0.8649}}
@media (min-width:388px) and (max-width:391.98px){html{zoom:0.8739}}
@media (min-width:392px) and (max-width:395.98px){html{zoom:0.8829}}
@media (min-width:396px) and (max-width:399.98px){html{zoom:0.8919}}
@media (min-width:400px) and (max-width:403.98px){html{zoom:0.9009}}
@media (min-width:404px) and (max-width:407.98px){html{zoom:0.9099}}
@media (min-width:408px) and (max-width:411.98px){html{zoom:0.9189}}
@media (min-width:412px) and (max-width:415.98px){html{zoom:0.9279}}
@media (min-width:416px) and (max-width:419.98px){html{zoom:0.9369}}
@media (min-width:420px) and (max-width:423.98px){html{zoom:0.9459}}
@media (min-width:424px) and (max-width:427.98px){html{zoom:0.9550}}
@media (min-width:428px) and (max-width:431.98px){html{zoom:0.9640}}
@media (min-width:432px) and (max-width:435.98px){html{zoom:0.9730}}
@media (min-width:436px) and (max-width:439.98px){html{zoom:0.9820}}
@media (min-width:440px) and (max-width:443.98px){html{zoom:0.9910}}
@media (max-width:319.98px){html{zoom:0.7207}}