/* AF ShopBook V31 — sitewide light-mode contrast and security-widget fixes */
html[data-theme="light"] body{color:#171d29}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .login-heading h2,
html[data-theme="light"] .login-copy h1,
html[data-theme="light"] .auth-card h1,
html[data-theme="light"] .auth-card h2,
html[data-theme="light"] .content-hero h1,
html[data-theme="light"] .section-heading h2,
html[data-theme="light"] .dashboard-header h1,
html[data-theme="light"] .customer-dialog h2{color:#171d29!important}
html[data-theme="light"] p,
html[data-theme="light"] .login-card>p,
html[data-theme="light"] .login-copy>p,
html[data-theme="light"] .auth-subtitle,
html[data-theme="light"] .hero-copy>p{color:#667386}
html[data-theme="light"] .brand img,
html[data-theme="light"] .sidebar-brand img,
html[data-theme="light"] .login-heading img{content:url("assets/af-mark-light.png")}
html[data-theme="light"] .admin-login-mark,
html[data-theme="light"] .af-mark-light-theme{content:url("assets/af-mark-light.png")}
html[data-theme="light"] .primary-btn,
html[data-theme="light"] .login-btn,
html[data-theme="light"] .payment-approve-btn,
html[data-theme="light"] .cta-primary{color:#fff!important}
.turnstile-shell{min-height:86px!important;overflow:visible!important;padding:9px 4px!important}
.turnstile-shell>div{width:100%!important;min-height:66px!important;display:flex!important;align-items:center!important;justify-content:center!important}
.turnstile-shell iframe{display:block!important;max-width:100%!important;min-height:65px!important;border:0!important}
@media(max-width:360px){.turnstile-shell{padding-inline:0!important}.turnstile-shell iframe{transform:scale(.94);transform-origin:center}}


/* AF ShopBook V31.19 — Light Mode production polish */

/* Real Egypt flag in language selectors. */
.v22-language-picker button img,
.lang[data-lang="ar"] img{
  width:18px;
  height:12px;
  display:block;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(17,24,32,.16);
}

/* Keep the assistant visible without covering footer controls/content. */
html .af-assistant-root{
  inset-inline-start:14px;
  bottom:14px;
}
html .af-assistant-root .af-assistant-launcher{
  width:46px!important;
  height:46px!important;
  padding:4px!important;
  border-radius:14px!important;
}
html .af-assistant-root .af-assistant-launcher .af-assistant-logo{
  width:38px!important;
  max-height:31px!important;
}
.v22-footer-tools{
  min-height:46px;
  padding-inline-start:62px;
}

/* Stronger separation and readability in Light Mode. */
html[data-theme="light"] body{
  background:#edf2f6;
}
html[data-theme="light"] .v22-feature,
html[data-theme="light"] .v22-method,
html[data-theme="light"] .v22-plan,
html[data-theme="light"] .v22-faq details{
  border-color:rgba(78,100,122,.26)!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(255,255,255,.94),transparent 42%),
    linear-gradient(145deg,#f8fafc,#e8eff4)!important;
  box-shadow:
    0 13px 30px rgba(48,66,86,.07),
    inset 0 1px rgba(255,255,255,.92)!important;
}

/* Stop tiny production text. */
.v22-method b{font-size:12px}
.v22-private-note{font-size:10.5px;line-height:1.65}
.v22-plan h3{font-size:15px}
.v22-plan>small{font-size:10.5px}
.v22-price strong{font-size:27px}
.v22-price span{font-size:10.5px}
.v22-plan .v22-usd-price{font-size:10px}
.v22-plan ul{font-size:11px;line-height:1.65}
.v22-faq summary{font-size:11.5px;line-height:1.55}
.v22-faq details p{font-size:11px;line-height:1.7}
.v22-footer-brand p{max-width:220px;font-size:11px;line-height:1.65}
.v22-footer h3{font-size:12px}
.v22-footer nav{font-size:10.5px;line-height:1.6}
.v22-copyright{font-size:10px}

/* Proper social SVG rendering. */
.v22-social a svg{
  width:15px;
  height:15px;
  fill:currentColor;
  stroke:none;
}
.v22-social a svg rect,
.v22-social a svg circle{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.v22-social a svg .v22-social-play{
  fill:var(--bg);
}
html[data-theme="light"] .v22-social a svg .v22-social-play{
  fill:#f5f8fb;
}

/* Keep pricing order predictable: Basic → Plus → Pro in LTR;
   DOM direction naturally mirrors this in Arabic RTL. */
.v22-plans{direction:inherit}

@media (max-width:760px){
  html .af-assistant-root .af-assistant-launcher{
    width:44px!important;
    height:44px!important;
    border-radius:13px!important;
  }
  html .af-assistant-root .af-assistant-launcher .af-assistant-logo{
    width:36px!important;
    max-height:29px!important;
  }
  .v22-footer-tools{padding-inline-start:58px}
  .v22-plan ul{font-size:9.5px}
  .v22-footer nav,.v22-footer-brand p{font-size:9px}
}


/* AF ShopBook V31.20 — Mobile readability and sticky-header fix */

@media (max-width: 760px) {
  /* Keep the header at the top of the document on mobile.
     This prevents it from covering product cards while scrolling
     and prevents full-page screenshots from stitching it mid-page. */
  .v22-header {
    position: relative !important;
    top: auto !important;
  }

  .v22-main {
    overflow: visible;
  }

  .v22-section-title {
    font-size: 20px;
    line-height: 1.3;
  }

  /* Features: 2 × 2 instead of four compressed columns. */
  .v22-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .v22-feature {
    min-height: 154px;
    padding: 14px 10px;
  }

  .v22-feature-icon {
    width: 42px;
    height: 42px;
  }

  .v22-feature b {
    font-size: 12px;
    line-height: 1.45;
  }

  .v22-feature p {
    font-size: 9.5px;
    line-height: 1.6;
  }

  /* Payment methods: readable 2 × 2 cards. */
  .v22-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .v22-method {
    min-height: 94px;
    padding: 11px 8px;
  }

  .v22-method img {
    max-width: 78px;
    max-height: 38px;
  }

  .v22-method-logo {
    width: 84px;
    height: 42px;
  }

  .v22-method:nth-child(3) img,
  .v22-method:nth-child(4) img {
    width: 36px;
    height: 36px;
  }

  .v22-method b {
    font-size: 10.5px;
  }

  .v22-private-note {
    font-size: 10px;
    line-height: 1.65;
    padding-inline: 8px;
  }

  /* Plans: one full-width card per row. */
  .v22-plans {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: min(100%, 390px);
    margin-inline: auto;
    padding-top: 16px;
    contain: layout;
  }

  .v22-plan {
    min-height: 0;
    padding: 20px 18px 16px;
    border-radius: 14px;
  }

  .v22-plan h3 {
    font-size: 19px;
  }

  .v22-plan > small {
    font-size: 11px;
  }

  .v22-price strong {
    font-size: 32px;
  }

  .v22-price span {
    font-size: 11px;
  }

  .v22-plan .v22-usd-price {
    font-size: 10.5px;
  }

  .v22-plan ul {
    font-size: 11.5px;
    line-height: 1.7;
    margin-block: 12px 16px;
  }

  .v22-plan .v22-btn {
    min-height: 46px;
    padding-inline: 14px;
    font-size: 12px;
  }

  /* FAQs and CTA should not use tiny desktop text on phones. */
  .v22-faq summary {
    min-height: 44px;
    padding: 11px 12px;
    font-size: 12px;
  }

  .v22-faq details p {
    font-size: 11.5px;
  }

  .v22-cta-copy h2 {
    font-size: 22px;
    line-height: 1.35;
  }

  .v22-cta-copy p {
    font-size: 11px;
  }

  /* Footer: two clean columns with the brand taking full width. */
  .v22-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }

  .v22-footer-brand {
    grid-column: 1 / -1;
  }

  .v22-footer-brand p {
    max-width: 280px;
    font-size: 10.5px;
  }

  .v22-footer h3 {
    font-size: 11px;
  }

  .v22-footer nav {
    font-size: 10px;
    line-height: 1.65;
  }

  .v22-social a {
    width: 32px;
    height: 32px;
  }

  /* Keep the assistant clear of content. */
  html .af-assistant-root {
    inset-inline-start: 10px;
    bottom: 10px;
  }
}

@media (max-width: 430px) {
  .v22-shell {
    width: min(100% - 20px, 420px);
  }

  .v22-features {
    gap: 8px;
  }

  .v22-feature {
    min-height: 148px;
    padding-inline: 8px;
  }

  .v22-feature b {
    font-size: 11.5px;
  }

  .v22-feature p {
    font-size: 9px;
  }

  .v22-methods {
    gap: 8px;
  }

  .v22-plan {
    padding-inline: 16px;
  }

  .v22-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .v22-footer-brand {
    grid-column: auto;
  }

  .v22-footer-brand p {
    max-width: none;
  }
}