/* --- Skeleton loader (shared by home / courses / trainer) --- */
.rm-skel-card{width:100%;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);margin-bottom:30px}
#courses_loader{display:flex;flex-wrap:wrap}
#courses_loader > [class*="col-"]{display:block}
.rm-skel-img{height:190px}
.rm-skel-body{padding:18px}
.rm-skel-line{height:12px;border-radius:6px;margin-bottom:12px}
.rm-skel-line.w40{width:40%}.rm-skel-line.w55{width:55%}.rm-skel-line.w70{width:70%}.rm-skel-line.w90{width:90%}
.rm-skel{position:relative;overflow:hidden;background:#e9edf1}
.rm-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:rm-shimmer 1.25s infinite}
@keyframes rm-shimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.rm-skel::after{animation:none}}

/* --- Equal-height course cards ---------------------------------------
   The cards were ragged because the image had no fixed ratio and the title
   could run to 1-3 lines. Make every column a flex row, let the content grow,
   and pin the "تفاصيل الدورة" link to the bottom of each card. */
.courses-wrapper .row:not(#courses_loader){align-items:stretch}
.courses-wrapper .row:not(#courses_loader) > [class*="col-"]{display:flex}
.courses-wrapper .row:not(#courses_loader) .single-courses{display:flex;flex-direction:column;width:100%;height:100%}
.courses-wrapper .single-courses .courses-images{overflow:hidden}
.courses-wrapper .single-courses .courses-images img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.courses-wrapper .single-courses .courses-content{display:flex;flex-direction:column;flex:1 1 auto}
/* clamp the title to 2 lines so a long name cannot stretch one card */
.courses-wrapper .single-courses .courses-content .title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.6em;line-height:1.3em}
.courses-wrapper .single-courses .courses-content .details{margin-top:auto}
/* keep the VAT note from shifting rows that do not have it */
.courses-wrapper .single-courses .red-warn{display:block;min-height:1.2em}

/* --- Sticky footer ----------------------------------------------------
   When a page is shorter than the viewport the body background showed below
   the footer as an unexplained white band under the copyright bar. Blog pages
   never showed it because their content is always tall enough. Make the page
   wrapper fill the viewport so the footer always sits at the bottom. */
html,body{min-height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
body > .main-wrapper{flex:1 0 auto;display:flex;flex-direction:column}
body > .main-wrapper > .footer-section{margin-top:auto}



/* --- Stray horizontal scrollbar ---------------------------------------
   A full-width strip of body background under the copyright bar is a horizontal
   scrollbar: something on the page is wider than the viewport. Clip it. */
html,body{overflow-x:hidden !important;max-width:100% !important}
.main-wrapper{overflow-x:hidden;max-width:100%}


/* --- The two floating CTAs on course-details -------------------------------
   The Customizer's Additional CSS already floats BOTH buttons:
     .whatsapp-float-button    -> fixed, bottom 20, left 20
     .info-btn.info-btn-sticky -> fixed, bottom 20, right 20
   On an RTL page they were landing on top of each other, so WhatsApp covered the
   buy button. Pin them to opposite corners explicitly (logical left/right, not the
   RTL-flipped ones), and on mobile lay them out as two equal CTAs side by side.
   These load before wp-custom-css, hence !important. */

/* desktop: opposite corners, never overlapping */
@media (min-width:768px){
  .whatsapp-float-button{left:20px !important;right:auto !important;bottom:20px !important}
  .info-btn.info-btn-sticky{right:20px !important;left:auto !important;bottom:20px !important;display:block !important}
}

/* mobile: two equal CTAs, side by side */
@media (max-width:767px){
  .info-btn.info-btn-sticky{
    display:block !important;position:fixed !important;
    left:10px !important;right:auto !important;bottom:10px !important;
    width:calc(50% - 15px) !important;height:auto !important;z-index:1000 !important;margin:0}
  .info-btn.info-btn-sticky a{
    display:flex !important;width:100% !important;align-items:center;justify-content:center;
    padding:14px 8px !important;border-radius:50px;margin:0;white-space:nowrap}

  .whatsapp-float-button{
    position:fixed !important;right:10px !important;left:auto !important;bottom:10px !important;
    width:calc(50% - 15px) !important;height:auto !important;z-index:1000 !important;margin:0}
  .whatsapp-float-button .whatsapp-button{
    display:flex !important;width:100% !important;align-items:center;justify-content:center;
    padding:14px 8px !important;white-space:nowrap}

  /* keep the copyright text clear of the two fixed buttons */
  .footer-copyright{padding-bottom:80px}
}