/* =====================================================
   Home CSS (scoped to fm- / fm-xdev- only)
   File: /theme/css/home.css
   ===================================================== */

/* ===================== CORE THEME ===================== */
:root{
  --fm-accent:#FEC107;
  --fm-accent-soft:rgba(254,193,7,.12);
  --fm-text-main:#222;
  --fm-text-muted:#666;
  --fm-bg:#fff;
  --fm-shadow-soft:0 10px 35px rgba(0,0,0,.07);
}

/* Performance helpers (safe) */
.fm-services,
.fm-grand-tours,
.fm-daytrips-v2,
.fm-reviews{
  content-visibility:auto;
  contain-intrinsic-size: 800px;
}

/* Generic sections using same padding + white background */
.fm-intro-section,
.fm-services,
.fm-grand-tours,
.fm-daytrips-v2,
.fm-reviews{
  padding:60px 0;
  background:var(--fm-bg);
}

/* Shared title style */
.title h2{
  font-size:30px;
  font-weight:700;
  margin-bottom:5px;
  color:var(--fm-text-main);
}
.title p{
  font-size:15px;
  color:var(--fm-text-muted);
}

/* Generic card base */
.fm-card{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--fm-shadow-soft);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.fm-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 45px rgba(0,0,0,.12);
}

/* Generic primary button */
.fm-btn-primary{
  display:inline-block;
  padding:10px 22px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
  text-decoration:none;
  background:var(--fm-accent);
  color:#fff;
  border:none;
  box-shadow:0 10px 22px rgba(254,193,7,.4);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.fm-btn-primary:hover{
  background:#e0a700;
  box-shadow:0 14px 26px rgba(254,193,7,.55);
  transform:translateY(-1px);
}

/* Ghost button (outline) */
.fm-btn-ghost{
  display:inline-block;
  padding:10px 22px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
  text-decoration:none;
  background:#fff;
  color:var(--fm-text-main);
  border:1px solid rgba(0,0,0,.12);
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.fm-btn-ghost:hover{
  border-color:var(--fm-accent);
  color:var(--fm-accent);
  transform:translateY(-1px);
}

/* =====================================================
   FIX 1: Horizontal scrollbar ("bar of swap")
   - keep scoped to home blocks only
   ===================================================== */

/* prevent any fm blocks from exceeding viewport width */
.fm-intro-section,
.fm-services,
.fm-grand-tours,
.fm-daytrips-v2,
.fm-reviews,
.fm-xdev-container{
  max-width:100%;
  overflow-x:hidden;
}

/* very common culprit: Bootstrap rows / negative margins */
.fm-intro-section .row,
.fm-services .row,
.fm-grand-tours .row,
.fm-daytrips-v2 .row,
.fm-reviews .row{
  margin-left:0;
  margin-right:0;
}

/* ensure columns don’t create overflow */
.fm-intro-section [class*="col-"],
.fm-services [class*="col-"],
.fm-grand-tours [class*="col-"],
.fm-daytrips-v2 [class*="col-"],
.fm-reviews [class*="col-"]{
  min-width:0;
}

/* images never overflow their containers */
.fm-intro-section img,
.fm-services img,
.fm-grand-tours img,
.fm-daytrips-v2 img,
.fm-reviews img{
  max-width:100%;
  height:auto;
  display:block;
}

/* =====================================================
   FIX 2: Payment methods section became too big
   - still scoped: it's the only non-fm block
   - but we keep it minimal and safe
   ===================================================== */
.get-offer{
  padding:26px 0;
  margin:0;
  overflow:hidden;
}

.get-offer .title-payment,
.get-offer .title-payment.alt-2{
  font-size:26px;
  line-height:1.2;
  margin:0;
  display:block;
}

/* keep list tidy (no huge images) */
.get-offer .payment-list{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  padding:0;
  margin:0;
  list-style:none;
  flex-wrap:wrap;
}
.get-offer .payment-list li{ margin:0; }

.get-offer .payment-list img,
.get-offer .payment-list img.responsive{
  width:auto !important;
  height:34px !important;
  max-height:34px !important;
  max-width:120px !important;
  object-fit:contain;
  display:block;
}

/* ===================== INTRO SECTION ===================== */
.fm-intro-shell{
  max-width:1200px;
  margin:0 auto;
  padding:0 15px;
}
.fm-intro-row{
  display:flex;
  align-items:stretch;
  gap:40px;
}
.fm-intro-content{
  flex:1;
  display:flex;
  flex-direction:column;
}
.fm-intro-image-card{
  position:relative;
  flex:1;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.15);
}
.fm-intro-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .35s ease;
}
.fm-intro-image-card:hover .fm-intro-image{
  transform:scale(1.05);
}
.fm-intro-image-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05));
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
}
.fm-intro-badge{
  background:rgba(255,255,255,.95);
  border-radius:999px;
  padding:8px 20px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.fm-intro-badge span{display:block;}

/* ribbon on intro image */
.fm-ribbon{
  position:absolute;
  top:16px;
  left:-50px;
  width:160px;
  text-align:center;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  color:#fff;
  background:#d43232;
  padding:6px 0;
  transform:rotate(-45deg);
  box-shadow:0 10px 20px rgba(0,0,0,.25);
  z-index:2;
}

/* Intro text */
.fm-intro-header{margin-bottom:18px;}
.fm-intro-title{
  font-size:32px;
  font-weight:800;
  margin:0 0 5px;
  color:var(--fm-text-main);
}
.fm-intro-subtitle{
  font-size:20px;
  line-height:1.4;
  font-weight:700;
  margin:0;
  color:var(--fm-text-main);
}
.fm-intro-body{
  margin-top:18px;
  font-size:14px;
  line-height:1.8;
  color:#444;
}
.fm-intro-body p{margin-bottom:10px;}

/* Highlights */
.fm-intro-highlights{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:100%;
}
.fm-highlight-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border-radius:999px;
  background:var(--fm-accent-soft);
  font-size:12px;
  font-weight:600;
  color:#5c3a0a;
}
.fm-pill-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-right:6px;
  border-radius:50%;
  background:var(--fm-accent);
  color:#fff;
  font-size:11px;
}

/* CTA */
.fm-intro-cta{
  margin-top:auto;
  padding-top:20px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  max-width:100%;
}

/* ===================== SERVICES SECTION ===================== */
.fm-service-grid{
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.fm-service-grid > [class*="col-"]{display:flex;}
.fm-service-card{
  background:#fff;
  border-radius:20px;
  padding:30px 25px;
  width:100%;
  display:flex;
  flex-direction:column;
  min-height:280px;
  border-top:3px solid var(--fm-accent);
  box-shadow:var(--fm-shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease;
}
.fm-service-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 45px rgba(0,0,0,.12);
}
.fm-service-icon{
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--fm-accent-soft);
  color:var(--fm-accent);
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:26px;
  margin-bottom:18px;
}
.fm-service-title{
  font-size:18px;
  font-weight:600;
  margin-bottom:10px;
  color:var(--fm-text-main);
}
.fm-service-text{
  font-size:14px;
  color:#555;
  line-height:1.6;
  flex-grow:1;
}

/* ===================== GRAND TOURS ===================== */
.fm-grand-grid{margin-top:40px;}
.fm-grand-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  height:100%;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.fm-grand-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 55px rgba(0,0,0,.12);
}
.fm-grand-image img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
.fm-grand-content{padding:22px 20px 30px;}
.fm-grand-title{
  font-size:17px;
  font-weight:600;
  margin:0 0 8px;
  color:var(--fm-text-main);
}
.fm-grand-desc{
  color:#666;
  font-size:14px;
  line-height:1.6;
  margin-bottom:18px;
}
.fm-grand-btn{
  display:inline-block;
  background:var(--fm-accent);
  color:#fff;
  padding:10px 22px;
  border-radius:999px;
  border:none;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.fm-grand-btn:hover{
  background:#e0a700;
  transform:translateY(-1px);
}
/* Ribbon */
.fm-grand-ribbon{
  position:absolute;
  top:14px;
  right:-38px;
  background:var(--fm-accent);
  color:#fff;
  padding:6px 60px;
  transform:rotate(45deg);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
}

/* ===================== DAY TRIPS (4 IN A ROW) ===================== */
.fm-daytrip-row{
  margin-top:40px;
  display:flex;
  justify-content:space-between;
  gap:15px;
}
.fm-daytrip-card-v2{
  background:#fff;
  border-radius:14px;
  border:2px solid var(--fm-accent);
  text-align:center;
  box-shadow:0 4px 20px rgba(0,0,0,.07);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fm-daytrip-card-v2:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  border-color:#ffdd3c;
}
.fm-daytrip-card-v2 .img-wrap{
  width:100%;
  height:180px;
  overflow:hidden;
}
.fm-daytrip-card-v2 .img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.fm-daytrip-card-v2 h3{
  font-size:17px;
  font-weight:600;
  margin:15px 0 10px;
  color:var(--fm-text-main);
}
.fm-daytrip-card-v2 p{
  font-size:14px;
  color:#555;
  padding:0 15px;
  margin-bottom:18px;
  line-height:1.5;
  flex-grow:1;
}
.fm-daytrip-card-v2 .trip-link{
  display:inline-block;
  margin-bottom:15px;
  font-size:14px;
  font-weight:600;
  color:var(--fm-accent);
  text-decoration:none;
  transition:color .2s ease;
}
.fm-daytrip-card-v2 .trip-link:hover{color:#dba800;}

/* ===================== REVIEWS ===================== */
.fm-reviews .title h2{margin-bottom:25px;}
.fm-review-row{margin-top:10px;}
.fm-review-card{
  background:#fff;
  border-radius:14px;
  padding:22px;
  border-left:4px solid var(--fm-accent);
  box-shadow:0 8px 26px rgba(0,0,0,.07);
  margin-bottom:20px;
  height:100%;
  display:flex;
  align-items:center;
}
.fm-review-card p{
  font-size:14px;
  line-height:1.7;
  color:#444;
  margin:0;
}
.fm-review-dots{bottom:-35px;}
.fm-review-dots li{
  width:10px;
  height:10px;
  background:#ddd;
  border-radius:50%;
  border:none;
  margin:0 4px;
  transition:transform .2s ease, background .2s ease;
}
.fm-review-dots li.active,
.fm-review-dots li:hover{
  background:var(--fm-accent);
  transform:scale(1.2);
}

/* ===================== XDEV SLIDER (your other slider) ===================== */
.fm-xdev-title{
  text-align:center;
  font-size:42px;
  font-weight:800;
  letter-spacing:1px;
  margin-bottom:20px;
  color:#222;
}
.fm-xdev-container{
  position:relative;
  width:100%;
  max-width:100%;
  height:520px;
  margin:0 auto;
  background:#f5f5f5;
  box-shadow:0 30px 50px rgba(0,0,0,.15);
  overflow:hidden;
}
.fm-xdev-slide{
  position:relative;
  width:100%;
  height:100%;
}
.fm-xdev-container .fm-xdev-slide .fm-xdev-item{
  width:200px;
  height:300px;
  position:absolute;
  top:50%;
  transform:translate(0,-50%);
  border-radius:20px;
  box-shadow:0 30px 50px #505050;
  background-position:50% 50%;
  background-size:cover;
  display:inline-block;
  transition:.5s;
}
.fm-xdev-slide .fm-xdev-item:nth-child(1),
.fm-xdev-slide .fm-xdev-item:nth-child(2){
  top:0;
  left:0;
  transform:translate(0,0);
  border-radius:0;
  width:100%;
  height:100%;
}
.fm-xdev-slide .fm-xdev-item:nth-child(3){left:50%;}
.fm-xdev-slide .fm-xdev-item:nth-child(4){left:calc(50% + 220px);}
.fm-xdev-slide .fm-xdev-item:nth-child(5){left:calc(50% + 440px);}
.fm-xdev-slide .fm-xdev-item:nth-child(n + 6){
  left:calc(50% + 660px);
  opacity:0;
}
.fm-xdev-content{
  position:absolute;
  top:50%;
  left:100px;
  width:300px;
  text-align:left;
  color:#eee;
  transform:translate(0,-50%);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  display:none;
}
.fm-xdev-slide .fm-xdev-item:nth-child(2) .fm-xdev-content{display:block;}
.fm-xdev-name{
  font-size:40px;
  text-transform:uppercase;
  font-weight:bold;
  opacity:0;
  animation:fmXdevAnimate 1s ease-in-out 1 forwards;
}
.fm-xdev-des{
  margin-top:10px;
  margin-bottom:20px;
  opacity:0;
  animation:fmXdevAnimate 1s ease-in-out .3s 1 forwards;
}
.fm-xdev-content button{
  padding:10px 20px;
  border:none;
  cursor:pointer;
  background:#FEC107;
  color:#222;
  font-weight:600;
  border-radius:999px;
  opacity:0;
  animation:fmXdevAnimate 1s ease-in-out .6s 1 forwards;
}
@keyframes fmXdevAnimate{
  from{opacity:0; transform:translate(0,100px); filter:blur(33px);}
  to{opacity:1; transform:translate(0); filter:blur(0);}
}
.fm-xdev-button{
  width:100%;
  text-align:center;
  position:absolute;
  bottom:20px;
  left:0;
}
.fm-xdev-button button{
  width:40px;
  height:35px;
  border-radius:8px;
  border:1px solid #000;
  cursor:pointer;
  margin:0 5px;
  background:#fff;
  font-size:22px;
  line-height:35px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.3s;
}
.fm-xdev-button button:hover{
  background:#ababab;
  color:#fff;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:991px){
  .fm-intro-section{padding:40px 0 35px;}
  .fm-intro-row{display:block;}
  .fm-intro-image-card{margin-bottom:25px;}
  .fm-intro-title,
  .fm-intro-subtitle{text-align:center;}
  .fm-intro-cta,
  .fm-intro-highlights{justify-content:center;}

  /* payment block on tablet */
  .get-offer{ padding:20px 0; text-align:center; }
  .get-offer .payment-list{ justify-content:center; }
}

@media (max-width:767px){
  .fm-intro-title{font-size:26px;}
  .fm-intro-subtitle{font-size:16px;}
  .fm-service-card{min-height:auto; margin-bottom:20px;}
  .fm-grand-image img{height:200px;}
  .fm-daytrip-row{flex-direction:column; gap:25px;}
  .fm-review-card{padding:18px;}
  .fm-reviews .title h2{font-size:24px;}

  /* payment logos on mobile */
  .get-offer .title-payment,
  .get-offer .title-payment.alt-2{ font-size:20px; margin-bottom:10px; }
  .get-offer .payment-list img,
  .get-offer .payment-list img.responsive{
    height:28px !important;
    max-height:28px !important;
    max-width:110px !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fm-card,
  .fm-service-card,
  .fm-grand-card,
  .fm-daytrip-card-v2,
  .fm-intro-image{
    transition:none !important;
  }
  .fm-xdev-name,
  .fm-xdev-des,
  .fm-xdev-content button{
    animation:none !important;
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
  }
}
/* ===================== Morocco Desert Tours (Modern Tabs) ===================== */
.fm-tours-tabs{
  padding:60px 0;
  position:relative;
  overflow:hidden;
}

/* Optional: if you want a background image like your screenshot, set it here */
.fm-tours-tabs.fm-has-bg{
  background: #0b1220 url("assets/images/your-bg.jpg") center/cover no-repeat;
}
.fm-tours-tabs.fm-has-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(8,12,20,.60), rgba(8,12,20,.35));
  pointer-events:none;
}
.fm-tours-tabs .container{ position:relative; }

.fm-tabs-head{ margin-bottom:22px; }
.fm-tabs-title{
  font-size:34px;
  font-weight:800;
  margin:0 0 6px;
  color:#111;
}
.fm-tabs-sub{
  margin:0;
  color:#555;
}

/* Tabs row */
.fm-tabs{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin:18px auto 26px;
}

.fm-tab{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#222;
  padding:12px 16px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.fm-tab:hover{
  transform:translateY(-1px);
  border-color:rgba(254,193,7,.55);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.fm-tab.is-active{
  border-color:rgba(254,193,7,.85);
  background:rgba(254,193,7,.18);
}

/* Panels */
.fm-panels{ width:100%; }
.fm-panel{ display:block; }
.fm-panel[hidden]{ display:none !important; }

/* Cards grid */
.fm-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.fm-tour-card{
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 16px 45px rgba(0,0,0,.10);
  transition:transform .2s ease, box-shadow .2s ease;
}
.fm-tour-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 60px rgba(0,0,0,.14);
}

.fm-tour-media{
  position:relative;
  display:block;
  aspect-ratio: 4 / 3;
  background:#eee;
}
.fm-tour-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.fm-badge{
  position:absolute;
  top:12px;
  right:12px;
  background:rgba(254,193,7,.95);
  color:#222;
  font-weight:800;
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}

.fm-tour-body{
  padding:16px 16px 18px;
}
.fm-tour-title{
  margin:0 0 8px;
  font-size:16px;
  font-weight:800;
  line-height:1.25;
}
.fm-tour-title a{
  color:#111;
  text-decoration:none;
}
.fm-tour-text{
  margin:0 0 12px;
  color:#555;
  font-size:13px;
  line-height:1.6;
}
.fm-tour-link{
  font-weight:800;
  color:#dba800;
  text-decoration:none;
}
.fm-tour-link:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width: 991px){
  .fm-tabs-title{ font-size:28px; }
  .fm-cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px){
  .fm-tours-tabs{ padding:42px 0; }
  .fm-tabs{ gap:8px; margin:14px auto 18px; }
  .fm-tab{ width:100%; max-width:420px; text-align:center; }
  .fm-cards{ grid-template-columns:1fr; }
}