/* ANDALUS_24_WIDE_FLOW_V1 + ANDALUS_24_PAIRS_V1 (owner, 23 Oct 2026)
   «مسافات كبيرة فارغة… كل خطوة تخلي العميل ينزل» → then: calculator inside the hero; income proofs beside
   «اعرف لو ينفع تقسط»; papers video beside the steps; the customer video beside all the reviews; «بنتعامل مع»
   as one thin strip; «ليه الأندلس» with the questions.
   One reading order on every screen (CSS order, the HTML stays as it is). From 1280px the page is a 2-column grid:
   paired sections share a row, the others take the full width. */

#main-content{display:flex;flex-direction:column}
#main-content>*{order:50}
#main-content>#top{order:1}
#main-content>#offers{order:3}
#main-content>#afs-qualify{order:4}
#main-content>#income{order:5}
#main-content>#steps{order:6}
#main-content>#installment-video{order:7}
#main-content>#catalog{order:8}
#main-content>#customer-installment-video{order:9}
#main-content>#reviews{order:10}
#main-content>#afs-partners{order:11}
#main-content>#why-us{order:12}
#main-content>#faq{order:13}
#main-content>script,#main-content>style{order:0}

/* calculator inside the hero: a card, not a page band */
#top #afs-installment-calculator{padding:0;background:none}
html body #top .heroGrid>.an-calc{padding:0;max-width:none;width:100%;margin:0} /* ANDALUS_CALC_V1 */
#top #afs-installment-calculator .afs-upgrade-wrap{width:auto;margin:0}

@media (max-width:1279px){
  #top .heroGrid{display:flex!important;flex-direction:column}
  #top .heroGrid>#afs-installment-calculator,#top .heroGrid>.an-calc{order:2}
  #top .heroGrid>.heroCard{order:3}
}

@media (min-width:1280px){
  html body #main-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0;align-items:stretch}
  html body #main-content>*{grid-column:1/-1;min-width:0}
  /* pairs */
  html body #main-content>#afs-qualify{grid-column:1}
  html body #main-content>#income{grid-column:2}
  html body #main-content>#steps{grid-column:1}
  html body #main-content>#installment-video{grid-column:2}
  html body #main-content>#customer-installment-video{grid-column:1}
  html body #main-content>#reviews{grid-column:2}

  html body #main-content .wrap,
  html body #main-content #installment-video>div,
  html body #main-content #customer-installment-video>div{width:calc(100% - 48px)!important;max-width:2400px!important;margin-inline:auto!important}
  html body #main-content .section{padding-block:36px}
  /* a pair reads as one band: each half keeps its own background, a thin line between them */
  html body #main-content>#income,html body #main-content>#installment-video,html body #main-content>#reviews{border-inline-start:1px solid rgba(125,29,43,.08)}

  /* hero: headline | calculator, the summary card under the headline */
  html body #top .heroGrid{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;grid-template-areas:"copy calc" "card card";gap:20px 36px!important;align-items:start!important;width:calc(100% - 48px)!important;max-width:2400px!important}
  html body #top .heroGrid>:first-child{grid-area:copy}
  html body #top .heroGrid>#afs-installment-calculator,html body #top .heroGrid>.an-calc{grid-area:calc}
  html body #top .heroGrid>.heroCard{grid-area:card;width:auto!important;max-width:none!important;margin:0!important;align-self:start}
  /* the 3 facts of the hero card as one row under headline + calculator */
  html body #top .heroGrid>.heroCard .statGrid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  html body #top .heroGrid>:first-child{align-self:center}
  html body #top #afs-installment-calculator .afs-calc-heading{width:auto!important;margin:0 0 12px!important}
  html body #top #afs-installment-calculator .afs-calc-card{width:auto!important;max-width:none!important;margin:0!important}

  /* qualify (left half): text above the form */
  html body #afs-qualify .afsQualify{width:auto!important;max-width:none!important;margin:0!important}
  /* income (right half): 2 per row, all shown */
  html body #income .sectionHead{width:auto!important;max-width:none!important}
  /* 3 per row: the same height as the form beside it (measured 1366–1920) */
  html body #income .incomeGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body #income .afs-collapse-panel{max-height:none!important}
  html body #income .afs-collapse-panel:after,
  html body #income .afs-collapse-toggle{display:none!important}

  /* steps (left) + papers video (right) */
  html body #steps .sectionHead{width:auto!important;max-width:none!important}
  /* the 3 steps one under the other: about the height of the video beside them */
  html body #steps .grid.steps{grid-template-columns:1fr!important;gap:8px!important}
  html body #steps .grid.steps>*{padding:10px 16px!important;min-height:0!important}
  html body #installment-video .sectionHead,
  html body #customer-installment-video .sectionHead{width:auto!important;max-width:none!important;margin:0 0 14px!important;text-align:right}
  html body #installment-video .an-yt,
  html body #customer-installment-video .an-yt{margin:0!important;max-width:none!important}

  /* customer video (right) + both ratings as two clear cards (left); the video kept at a size that matches them */
  html body #customer-installment-video .an-yt{max-width:600px!important;margin-inline:auto!important}
  html body #reviews .wrap{display:grid!important;gap:14px}
  html body #reviews .reviewStrip{display:grid!important;grid-template-columns:1fr;justify-items:start;gap:10px;margin:0!important;padding:26px 28px!important}
  html body #reviews .reviewStrip .stars{font-size:1.6rem!important}

  /* «بنتعامل مع»: one thin strip */
  html body #afs-partners{padding-block:10px!important;border-block:1px solid rgba(125,29,43,.08)}
  html body #afs-partners .wrap{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}
  html body #afs-partners .an-fp-block{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;width:auto!important;max-width:none!important;margin:0!important;padding:6px 0!important;background:none!important;border:0!important;box-shadow:none!important}
  html body #afs-partners .an-fp-block__title{margin:0!important;white-space:nowrap;font-size:14px!important}
  html body #afs-partners .an-fp-block__row{display:flex!important;flex-wrap:nowrap;gap:6px!important;margin:0!important;overflow-x:auto;scrollbar-width:none}
  html body #afs-partners .an-fp-block__row::-webkit-scrollbar{display:none}
  html body #afs-partners .an-fp-block__row>*{flex:0 0 auto;height:34px!important;min-height:0!important;padding:4px 8px!important}
  html body #afs-partners .an-fp-block__row img{max-height:24px!important;width:auto!important}
  html body #afs-partners .an-fp-block__sub,
  html body #afs-partners .an-fp-block__note{display:none!important}
  html body #afs-partners .an-pm{flex:0 0 auto;width:auto!important;margin:0!important;padding:6px 10px!important;background:none!important;border:0!important;box-shadow:none!important}
  html body #afs-partners .an-pm__title,html body #afs-partners .an-pm__note,html body #afs-partners .an-pm__lbl{display:none!important}
  html body #afs-partners .an-pm__groups{display:flex!important;flex-wrap:nowrap;gap:6px!important}
  html body #afs-partners .an-pm__grp{flex-direction:row!important;gap:4px!important}

  /* why us + questions: one band across the width (the questions are 3× longer than the reasons) */
  html body #why-us{padding-bottom:8px!important}
  html body #why-us .sectionHead{width:auto!important;max-width:none!important}
  html body #why-us .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  html body #faq{padding-top:12px!important}
  html body #faq .faqLayout{width:auto!important;max-width:none!important;grid-template-columns:300px minmax(0,1fr)!important;gap:28px!important}
  html body #faq .faqGroups{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;align-items:start}

  html body .an2-guide{width:calc(100% - 48px)!important;max-width:2400px!important}
}
@media (min-width:1500px){
  html body #income .incomeGrid{gap:10px!important}
}
@media (min-width:1800px){
  html body #steps .grid.steps{gap:14px!important}
  html body #steps .grid.steps>*{padding:22px 22px!important}
}