/* ==========================================================
   ALX course page (/course/{slug}): styles moved from «ALFAC UX patch v1» (Settings > Customization CSS), phase 6.
   Loaded only by course/index.blade.php. Items 1, 1b, «batch info box» (now in the view's JS), 25 (course-page part)
   and the course-page lines of «brand colours» / «readability 4». Pairs with js/alx-course.js (sticky buy bar).
   ========================================================== */

/* 1) Course page on mobile: price and buy box right under the course title.
   The patch moved the sidebar in the DOM with JS; here the two wrappers of the main column step aside
   (display: contents) so the title, the buy box and the tabs become siblings that can be ordered. */
@media (max-width: 991.98px) {
  .course-content-section.alx-buy-up > .row > .col-lg-8,
  .course-content-section.alx-buy-up .course-content-body { display: contents; }
  .course-content-section.alx-buy-up .course-content-body > * { order: 3; flex: 0 0 100%; max-width: 100%; min-width: 0; padding-inline: 15px; }
  .course-content-section.alx-buy-up .course-content-body > .course-body-on-cover { order: 1; }
  /* 30px sides: the same width the moved box had inside the main column (column padding + its own) */
  .course-content-section.alx-buy-up > .row > .course-content-sidebar { order: 2; margin: 18px 0 8px; padding-inline: 30px; }
  .course-content-section.alx-buy-up .course-content-sidebar .course-img { display: none; }
  .course-content-section.alx-buy-up .course-content-sidebar > .rounded-lg { background: #fff; padding-top: 6px; position: relative; z-index: 2; }
}

/* 1b) Sticky buy bar (mobile, course pages only) */
.alfac-buybar { display: none; }
/* until patch v1 is deleted from the settings it adds a second bar: only the server one (#alxBuybar) stays */
.alfac-buybar:not(#alxBuybar) { display: none !important; }
@media (max-width: 991.98px) {
  .alfac-buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff; box-shadow: 0 -4px 16px rgba(17, 37, 105, .12);
    transform: translateY(110%); transition: transform .25s ease;
    direction: rtl;
  }
  .alfac-buybar.is-visible { transform: translateY(0); }
  .alfac-buybar__price { font-weight: 800; font-size: 20px; color: #112569; line-height: 1.1; white-space: nowrap; }
  .alfac-buybar__price small { display: block; font-size: 12px; font-weight: 500; color: #475569; }
  .alfac-buybar__btn {
    flex: 0 0 auto; border: 0; border-radius: 10px; padding: 12px 18px;
    background: #0a7f5c; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
  }
  body.alfac-has-buybar { padding-bottom: 72px; }
}

/* 25) Instalment line under the price: «التقسيط يبدأ من … شهرياً» */
.alfac-inst { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; margin-top: 10px; padding: 6px 10px; border-radius: 10px; background: #ecfdf5; color: #065f46; font-size: 12.5px; font-weight: 600; line-height: 1.6; }
.alfac-inst b { font-weight: 800; }
.alfac-inst__sar { width: 12px; height: 12px; display: inline-block; vertical-align: middle; }
.alfac-inst--page { margin: 12px auto 0; font-size: 14px; text-align: center; }
.alfac-inst--page span { flex-basis: 100%; font-size: 11.5px; font-weight: 400; color: #047857; }

/* 11 + 15) Link box at the end of the description (online English → /pages/english-online-course, CMMP → /pages/cmmp-saudi).
   The patch's inline style, with the «brand colours» override already applied. */
.alx-desc-link { margin: 1rem 0 0 !important; padding: 12px 14px; background: #f1f5fb; border: 1px solid #d6e2f3; border-radius: 10px; font-weight: 600; line-height: 1.8; }
.alx-desc-link a { color: #2E86C1; text-decoration: underline; }