/* «باقات جاهزة» (1.74.0): the section under the home page's banner — the designer's home-ready-packs-v1 and its numbers
   (brand/generated/mockups/home-ready-packs-v1-NOTES_AR.md). A phone: a column of five short cards, all in sight with no
   sideways pull; a wide screen: one row of five. Every card is one size, so the section's height never changes. */
.sec.rdp{padding:14px 0 16px;background:#F1F2F2}
.rdp-head{display:flex;align-items:center;justify-content:space-between;height:32px}
.rdp-head h2{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h2);line-height:30px;color:var(--navy)}
.rdp-head h2 b{display:inline-flex;align-items:center}
.rdp-head h2 b::before{content:"";width:20px;height:2px;background:var(--navy)}
.rdp-head h2 b::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
.rdp-all{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--mint-soft);color:var(--mint-ink);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-small);text-decoration:none;white-space:nowrap}
.rdp-all .ico,.rdp-btn .ico{width:12px;height:12px;stroke-width:2.8}
.rdp-grid{display:grid;gap:8px;margin-top:10px}
.rdp-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;height:104px;box-sizing:border-box;padding:8px;border-radius:20px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.rdp-pic{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:14px;background:#E3E6EA;overflow:hidden}
.rdp-pic img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.rdp-pic svg{display:block;width:44px;height:44px}
.rdp-text{display:flex;flex-direction:column;min-width:0}
.rdp-text h3{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-body);line-height:22px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdp-text p{margin:0;font-size:var(--fs-small);line-height:20px;color:#4F5A73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;margin-top:auto}
.rdp-price{display:inline-flex;align-items:baseline;gap:5px;flex:1;min-width:0;overflow:hidden;white-space:nowrap}      /* never under the button */
.rdp-word{font-size:var(--fs-small);color:#4F5A73}
.rdp-price s{font-size:var(--fs-small);color:#7A8499}
.rdp-num{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small);color:var(--navy)}
.rdp-num b{font-size:var(--fs-h2);font-weight:700}
.rdp-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:14px;background:var(--mint-ink);color:#fff;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui);text-decoration:none;white-space:nowrap}
.rdp-btn.rdp-link{background:var(--mint-soft);color:var(--mint-ink)}
.rdp-btn:focus-visible,.rdp-all:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
[dir=ltr] .rdp-all .ico,[dir=ltr] .rdp-btn .ico{transform:scaleX(-1)}

/* the system the banner is showing goes last, so the section completes the banner and does not repeat it: the cameras by
   default (and for a house being built), the Wi-Fi while the banner is on the Wi-Fi. The banner's radios say which; a
   browser that cannot ask them keeps the first order. */
.rdp-cctv{order:5}
main:has(#need-wifi:checked) .rdp-wifi{order:6}

@media (min-width:900px){
  .sec.rdp{padding:24px 0 28px}
  .rdp-head{height:40px}
  .rdp-head h2{line-height:40px}
  .rdp-head h2 b::before{width:28px}
  .rdp-all{height:38px;padding:0 16px;font-size:var(--fs-body)}
  .rdp-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:16px}
  .rdp-card{display:flex;flex-direction:column;gap:0;height:308px;padding:10px;border-radius:24px}
  .rdp-pic{flex:none;height:130px;padding:16px;border-radius:16px}
  .rdp-pic svg{width:60px;height:60px}
  .rdp-text{flex:1;padding:10px 4px 0}
  .rdp-text h3{font-size:var(--fs-item);line-height:26px}
  .rdp-text p{height:40px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .rdp-foot{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:8px;height:auto}
  .rdp-price{height:28px;align-items:center}
  .rdp-btn{width:100%;height:44px;box-sizing:border-box}
}

/* 1.82.4, the owner: the whole card is a press — its name's link is stretched over it (no link inside a link) — and «اطلب»
   stands over that, going straight to the order */
.rdp-card{position:relative}
.rdp-go{color:inherit;text-decoration:none}
.rdp-go::after{content:"";position:absolute;inset:0;z-index:0;border-radius:20px}
.rdp-go:focus-visible{outline:none}.rdp-go:focus-visible::after{outline:2px solid var(--navy);outline-offset:2px}
.rdp-btn{position:relative;z-index:1}

/* 1.82.4, the manager: on a phone this title rests where the bar's hump stands, and the floating button covered the end of
   «باقات جاهزة». Nothing of the row may enter the hump's raised middle (76) and 8 on each side: the title drops its line
   and dot there (36 less), so at 375 and 390 its words end clear of it; the size of the words and the spaces stay */
@media (max-width:899px){.rdp-head h2 b{display:none}}

/* 1.82.6, a wide screen narrower than 1366: the banner now leaves this row in sight over the bar, and «كل العروض» stood under the
   floating button (24 to 88 from the side). The row keeps 12 clear of it: what the page's own margin does not give, it adds */
@media (min-width:900px){.rdp-head{padding-inline-end:clamp(0px,calc(84px - (100vw - 1200px) / 2),76px)}}