/* ==== OptiTrader Academy · course page (product 2078945699) · v2 ====
   Where: Salla › تصميم المتجر › تخصيص الثيم › تخصيص متقدم › تخصيص باستخدام CSS (theme version «صفحة الدورة v1 — 4 نوفمبر»).
   Scope: every theme override starts with an id that exists only on this product's page
   (#details-slider-2078945699 / #product-2078945699), so other products and pages are untouched. Description
   components use the ot- prefix, which only this product's description contains.
   Order of the page is set here with CSS only (display: contents + order): nothing is moved by script, so the
   page does not jump while it loads. Roll back: delete this block (or publish the previous theme version). */

:root {
  --ot-navy: #0A1F35;
  --ot-navy-2: #102B47;
  --ot-teal: #0EC1DE;
  --ot-teal-text: #007C91;
  --ot-teal-soft: rgba(14, 193, 222, 0.10);
  --ot-line: #DCE6EE;
  --ot-muted: #4A5B6E;
  --ot-bg: #F4F8FB;
}

/* 1 · Gallery before the slider script runs: only the first image, at its final square size, plus room for the
   thumbnail strip, so nothing jumps when the slider starts. */
#details-slider-2078945699:not(.hydrated) { display: block; padding-bottom: 84px; }
#details-slider-2078945699:not(.hydrated) [slot="items"] > a:not(:first-child),
#details-slider-2078945699:not(.hydrated) [slot="thumbs"] { display: none; }
#details-slider-2078945699:not(.hydrated) [slot="items"] > a:first-child img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
}
/* The «كتاب مجاني» badge moves to the top-left corner so it never covers the logo on the cover. */
#details-slider-2078945699 .promotion-title { right: auto !important; left: 10px !important; border-radius: 6px !important; }

/* 2 · Fewer distractions on this page: breadcrumbs, SKU row, repeated product suggestions, the «اقرأ المزيد» fold. */
body:has(#details-slider-2078945699) .container--breadcrumbs,
body:has(#details-slider-2078945699) .product-sku-wrapper,
body:has(#details-slider-2078945699) .s-blocks-wrapper.s-before-related,
body:has(#details-slider-2078945699) #main-content > .container:has(> salla-products-slider),
body:has(#details-slider-2078945699) #btn-show-more { display: none !important; }
body:has(#details-slider-2078945699) #main-content > .container--product-details { margin-top: 12px !important; }
body:has(#details-slider-2078945699) #product-2078945699 h1 { margin-bottom: 4px !important; }

/* 3 · The description's own blocks join the info column (no wrapper boxes), so each block can be placed. */
#product-2078945699 .product__description,
#product-2078945699 #more-content,
#product-2078945699 .ot-desc,
#product-2078945699 .ot-intro { display: contents !important; }

/* Desktop and tablet: title, benefit, rating, price, facts, video card, e-mail field and buttons, activation
   line, instalment widgets, then the course details. The gallery keeps its column. */
@media (min-width: 768px) {
  body:has(#details-slider-2078945699) .main-content { display: flex; flex-direction: column; }
  #product-2078945699 .main-content > h1 { order: 1; }
  #product-2078945699 .main-content > .product-entry__sub-title { order: 2; }
  #product-2078945699 .main-content > salla-rating-stars { order: 3; }
  #product-2078945699 .main-content > div.whitespace-nowrap { order: 4; }
  #product-2078945699 .ot-facts { order: 5; }
  #product-2078945699 .ot-video { order: 6; }
  #product-2078945699 .main-content > form.product-form { order: 7; }
  #product-2078945699 .ot-activation { order: 8; }
  #product-2078945699 .main-content > salla-installment { order: 9; }
  #product-2078945699 .ot-sec { order: 10; }
  #product-2078945699 .main-content > div:has(> salla-social-share) { order: 11; }
  #product-2078945699 .main-content > section, #product-2078945699 .main-content > salla-quick-order { order: 12; }
}

/* Phone: the course name, benefit, rating, price and the video card come first, then the cover (full size, not
   cropped), then the facts, the e-mail field, the activation line, the instalment widgets and the details. */
@media (max-width: 767px) {
  #product-2078945699 { align-items: stretch !important; }
  #product-2078945699 > .main-content { display: contents !important; }
  #product-2078945699 > .main-content > h1 { order: 1; margin-top: 2px; }
  #product-2078945699 > .main-content > .product-entry__sub-title { order: 2; margin-bottom: 6px !important; }
  #product-2078945699 > .main-content > salla-rating-stars { order: 3; }
  #product-2078945699 > .main-content > div.whitespace-nowrap { order: 4; margin: 2px 0 10px; }
  #product-2078945699 .ot-video { order: 5; margin-bottom: 14px; }
  #product-2078945699 > .sidebar { order: 6; margin-bottom: 14px !important; }
  #product-2078945699 .ot-facts { order: 7; }
  #product-2078945699 > .main-content > form.product-form { order: 8; }
  #product-2078945699 .ot-activation { order: 9; }
  #product-2078945699 > .main-content > salla-installment { order: 10; }
  #product-2078945699 .ot-sec { order: 11; }
  #product-2078945699 > .main-content > div:has(> salla-social-share) { order: 12; }
  #product-2078945699 > .main-content > section, #product-2078945699 > .main-content > salla-quick-order { order: 13; }
}

/* 4 · One access per order (maximum per order = 1 in the product settings), so the quantity row is hidden. */
body:has(#details-slider-2078945699) .sticky-product-bar__quantity { display: none !important; }

/* 5 · Phone buy bar: one row with the three native buttons; the add-to-cart button shows its own label
   («أضف إلى السلة», normally for screen readers only). The bar steps aside while the e-mail field is being
   typed in, so it never covers the field or sits over the keyboard. */
@media (max-width: 767px) {
  body:has(#details-slider-2078945699) .sticky-product-bar {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important; transition: transform 0.2s ease;
  }
  body:has(#details-slider-2078945699) .sticky-product-bar salla-add-product-button { margin-top: 0 !important; gap: 8px; }
  body:has(#details-slider-2078945699) .sticky-product-bar .s-add-product-button-main { flex: 2.15 1 0; min-width: 0; gap: 8px; }
  body:has(#details-slider-2078945699) .sticky-product-bar .s-add-product-button-main > salla-button { flex: 1.35 1 0; min-width: 0; }
  body:has(#details-slider-2078945699) .sticky-product-bar .s-add-product-button-main > salla-mini-checkout-widget { flex: 1 1 0; min-width: 0; }
  body:has(#details-slider-2078945699) .sticky-product-bar salla-quick-buy { flex: 1 1 0; min-width: 0; }
  body:has(#details-slider-2078945699) .sticky-product-bar .s-add-product-button-main .s-button-text {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  }
  body:has(#details-slider-2078945699) .sticky-product-bar .s-add-product-button-sr-only {
    position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
    clip: auto !important; clip-path: none !important; overflow: visible !important; white-space: nowrap !important;
    font-size: 14px; font-weight: 700; line-height: 1;
  }
  body:has(#details-slider-2078945699):has(salla-product-options :is(input, textarea):focus) .sticky-product-bar {
    transform: translateY(120%);
  }
}

/* 6 · E-mail field (label and example text are set by the page script; the guidance line is the option's own
   description in Salla, shown once under the label). */
[data-option-id="1682102586"] .s-product-options-option-label small { color: var(--ot-muted); font-size: 13px; line-height: 1.7; }
[data-option-id="1682102586"] input::placeholder { color: #8796A8; }
.ot-activation {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 14px !important; padding: 9px 12px;
  border-radius: 10px; background: var(--ot-teal-soft); color: var(--ot-navy); font-size: 14px; line-height: 1.7;
}
.ot-activation::before {
  content: ''; flex: none; width: 17px; height: 17px; margin-top: 5px; border-radius: 50%;
  background: var(--ot-teal-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.7' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* 7 · Facts and video card. */
.ot-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none !important; margin: 0 0 12px !important; padding: 0 !important; }
.ot-facts li {
  margin: 0; padding: 3px 12px; border-radius: 999px; font-size: 14px; line-height: 1.7; list-style: none !important;
  color: var(--ot-navy); background: var(--ot-teal-soft); border: 1px solid rgba(14, 193, 222, 0.35);
}
.ot-facts li::marker { content: none; }
.ot-facts li::before { content: none; }
.ot-facts strong { color: var(--ot-teal-text); font-weight: 700; }

.ot-video {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 8px; border-radius: 14px; text-decoration: none !important;
  color: var(--ot-navy) !important; background: #fff; border: 1px solid var(--ot-line);
  box-shadow: 0 6px 16px rgba(10, 31, 53, 0.06);
}
.ot-video__media {
  position: relative; flex: 0 0 136px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: var(--ot-navy) var(--ot-video-poster, none) center / cover no-repeat;
}
.ot-video__play {
  position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: rgba(14, 193, 222, 0.95); box-shadow: 0 0 0 5px rgba(14, 193, 222, 0.28);
}
.ot-video__play::after {
  content: ''; position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -4px;
  border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff;
}
.ot-video__time {
  position: absolute; bottom: 5px; left: 5px; padding: 0 6px; border-radius: 6px; font-size: 11px; line-height: 18px;
  color: #fff; background: rgba(10, 31, 53, 0.8); direction: ltr;
}
.ot-video__text strong { display: block; font-size: 16px; line-height: 1.5; }
.ot-video__text span { display: block; font-size: 13px; line-height: 1.5; color: var(--ot-muted); }
.ot-video:hover .ot-video__play { background: var(--ot-teal-text); }
.ot-video:focus-visible { outline: 3px solid var(--ot-teal); outline-offset: 2px; }
.ot-inline-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; }

/* 8 · Course details. */
.ot-sec { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--ot-line); color: var(--ot-navy); font-size: 15px; line-height: 1.85; }
.ot-sec ul { list-style: none !important; margin: 0; padding: 0 !important; }
.ot-sec li { margin: 0; list-style: none !important; }
.ot-sec li::marker { content: none; }
.ot-sec p { margin: 0 0 10px; }
.ot-sec h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.5; font-weight: 700; color: var(--ot-navy); }
.ot-lead, .ot-note { color: var(--ot-muted); font-size: 14px; }
.ot-note { margin-top: 10px !important; font-size: 13px; }

.ot-cards { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ot-cards li { padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--ot-line); }
.ot-cards strong { display: block; font-size: 15.5px; line-height: 1.6; color: var(--ot-navy); }
.ot-cards span { display: block; font-size: 14px; line-height: 1.7; color: var(--ot-muted); }
.ot-cards li::before, .ot-inc li::before, .ot-list li::before { content: none; }
@media (min-width: 520px) { .ot-cards { grid-template-columns: 1fr 1fr; } }

.ot-acc, .ot-q { margin: 8px 0 0; border-radius: 12px; background: #fff; border: 1px solid var(--ot-line); overflow: hidden; }
.ot-acc > summary, .ot-q > summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; padding: 11px 14px;
}
.ot-acc > summary::-webkit-details-marker, .ot-q > summary::-webkit-details-marker { display: none; }
.ot-acc > summary::after, .ot-q > summary::after {
  content: ''; flex: none; margin-inline-start: auto; width: 9px; height: 9px;
  border-left: 2px solid var(--ot-muted); border-bottom: 2px solid var(--ot-muted);
  transform: rotate(-45deg); transition: transform 0.2s ease;
}
.ot-acc[open] > summary::after, .ot-q[open] > summary::after { transform: rotate(135deg); }
.ot-acc__n {
  flex: 0 0 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: var(--ot-navy); color: var(--ot-teal); font-size: 20px; font-weight: 700;
}
.ot-acc__t strong { display: block; font-size: 15.5px; line-height: 1.5; }
.ot-acc__t span { display: block; font-size: 13px; line-height: 1.5; color: var(--ot-muted); }
.ot-acc > ul { padding: 0 16px 12px !important; }
.ot-acc > ul li { position: relative; padding: 6px 16px 6px 0; font-size: 14px; line-height: 1.75; border-top: 1px dashed var(--ot-line); }
.ot-acc > ul li::before {
  content: ''; position: absolute; right: 2px; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--ot-teal);
}
.ot-acc > p { padding: 0 16px 12px; font-size: 14px; }
.ot-q > summary { font-weight: 600; font-size: 15px; line-height: 1.6; }
.ot-q > p { padding: 0 14px 12px; font-size: 14px; line-height: 1.8; color: var(--ot-muted); }

.ot-list li { position: relative; padding: 4px 18px 4px 0; font-size: 14.5px; line-height: 1.75; }
.ot-list li::after {
  content: ''; position: absolute; right: 2px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--ot-teal);
}
.ot-who p { font-size: 14.5px; margin-top: 10px; }

.ot-inc { display: grid; gap: 8px; }
.ot-inc li { padding: 10px 14px; border-radius: 12px; background: var(--ot-bg); border-right: 4px solid var(--ot-teal); }
.ot-inc strong { display: block; font-size: 15px; line-height: 1.6; }
.ot-inc span { display: block; font-size: 14px; line-height: 1.7; color: var(--ot-muted); }
.ot-pay { margin-top: 10px !important; font-size: 14px; color: var(--ot-muted); }

.ot-risk p { padding: 10px 14px; border-radius: 12px; background: #FFF7E8; border: 1px solid #F0D7A3; font-size: 14px; }
.ot-contact p { font-size: 14.5px; }
.ot-contact a {
  display: inline-block; margin: 0 2px; padding: 2px 12px; border-radius: 999px; font-weight: 700;
  color: #0B7A3E !important; border: 1.5px solid #25D366; text-decoration: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .ot-acc > summary::after, .ot-q > summary::after,
  body:has(#details-slider-2078945699) .sticky-product-bar { transition: none !important; }
}
/* Poster of the course video (Salla CDN, first frame of the uploaded file). */
.ot-video { --ot-video-poster: url('https://cdn.files.salla.network/other/332388491/6ddc0f32-f36a-437a-b740-040044c1287d-thumbnail-1.jpg'); }
/* ==== end of course page block ==== */