/* ON AIR TV — SECTION 09 · FAQ / الأسئلة الشائعة */
.ofq{position:relative;font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:#F4D6B0;padding:44px 16px 56px}
.ofq *{box-sizing:border-box}
.ofq h2,.ofq h3,.ofq p{margin:0}
.ofq-h{text-align:center;font-size:26px;line-height:1.3;font-weight:700;color:#F4D6B0}
.ofq .ofq-list{max-width:760px;margin:22px auto 0;border-top:1px solid rgba(244,214,176,.12)}
.ofq-it{position:relative;border-bottom:1px solid rgba(244,214,176,.12);transition:background-color .35s}
.ofq-it::before{content:"";position:absolute;top:-1px;bottom:-1px;inset-inline-start:0;width:2px;border-radius:2px;background:#5BC0DE;box-shadow:0 0 10px rgba(91,192,222,.8);opacity:0;transition:opacity .35s}
.ofq-it.open{background:linear-gradient(90deg,rgba(91,192,222,.0),rgba(91,192,222,.06))}
html[dir=rtl] .ofq-it.open{background:linear-gradient(270deg,rgba(91,192,222,.0),rgba(91,192,222,.06))}
.ofq-it.open::before{opacity:1}

/* صف السؤال كامل قابل للضغط: السؤال يمين و +/− يسار */
.ofq .ofq-q{margin:0}
.ofq-btn{width:100%;display:flex;align-items:center;gap:14px;padding:16px 14px;min-height:56px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:15px;line-height:1.55;font-weight:700;color:#F4D6B0;text-align:start;-webkit-tap-highlight-color:transparent}
.ofq-btn span{flex:1;min-width:0}
.ofq-btn:focus-visible{outline:2px solid #5BC0DE;outline-offset:-2px;border-radius:6px}
.ofq-pm{position:relative;flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid rgba(91,192,222,.4);transition:border-color .3s,background-color .3s}
.ofq-pm::before,.ofq-pm::after{content:"";position:absolute;top:50%;left:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;border-radius:2px;background:#5BC0DE;transition:transform .35s ease}
.ofq-pm::after{transform:rotate(90deg)}
.ofq-it.open .ofq-pm{border-color:#5BC0DE;background:rgba(91,192,222,.1)}
.ofq-it.open .ofq-pm::after{transform:rotate(0deg)}

/* الإجابة: تفتح بنعومة بدون قص (بدون ارتفاع ثابت) */
.ofq-a{display:grid;grid-template-rows:1fr}
.ofq-a > div{overflow:hidden}
.ofq-a p{padding:0 14px 18px;font-size:14px;line-height:1.85;color:rgba(244,214,176,.74)}
.ofq-a a{color:#5BC0DE;text-decoration:none;border-bottom:1px solid rgba(91,192,222,.45);transition:border-color .25s}
.ofq-a a:hover{border-bottom-color:#5BC0DE}
.ofq-a a:focus-visible{outline:2px solid #5BC0DE;outline-offset:2px;border-radius:3px}
/* الطيّ يشتغل بس لما تشتغل الجافاسكربت (بدونها كل الإجابات ظاهرة) */
.ofq.js .ofq-a{grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.ofq.js .ofq-it.open .ofq-a{grid-template-rows:1fr}
.ofq.js .ofq-a > div{visibility:hidden;transition:visibility 0s .4s}
.ofq.js .ofq-it.open .ofq-a > div{visibility:visible;transition:visibility 0s 0s}

/* حركة الظهور (نفس نظام السكاشن السابقة) */
.ofq .rv{opacity:1;transform:none}
.ofq.anim .rv{opacity:0;transform:translateY(14px)}
.ofq.anim.in .rv{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.ofq.anim .rv{opacity:1;transform:none}.ofq.anim.in .rv{transition:none}.ofq.js .ofq-a,.ofq-pm::before,.ofq-pm::after{transition:none}}

@media (max-width:359px){
  .ofq{padding-inline:10px}
  .ofq-btn{padding:14px 10px;font-size:14px;gap:10px}
  .ofq-a p{padding:0 10px 16px;font-size:13.5px}
}
@media (min-width:1024px){
  .ofq{padding:96px 24px 104px}
  .ofq-h{font-size:42px}
  .ofq .ofq-list{margin-top:44px}
  .ofq-btn{padding:22px 24px;font-size:18px;min-height:70px}
  .ofq-pm{width:30px;height:30px}
  .ofq-a p{padding:0 24px 24px;font-size:16px}
}
