/* صناعة فريق ام-تي-ثيمز. مرخّص حصراً للواجهة BAGs ولا غيرها.
   ممنوع منعاً تاماً النسخ التجاري أو الترحيل لجهة أخرى،
   وكل خرق يُعد انتهاكاً صريحاً لحقوق ام-تي-ثيمز الفكرية. */

/* ==================================================================
   BAGS Theme — Footer Styles (RTL)
   Built from Figma node 1:1376
   ================================================================== */

.bags-footer {
  display: block;
  width: 100%;
  font-family: inherit;
  color: var(--footer-main-text, #837e69);
}

/* Container — relies on Bootstrap's `.container` / `.container-fluid`
   classes for width (same approach as every other section in the
   theme). `.bags-footer__container` only adds `position: relative` so
   the watermark inside can position absolutely against it. */
.bags-footer__container {
  position: relative;
}

/* ==================================================================
   Features bar (top)
   ================================================================== */
.bags-footer__features {
  background-color: var(--footer-features-bg);
  border-block-end: 1px solid var(--footer-features-border);
  padding-block: 40px;
  overflow: hidden;
}

.bags-footer__features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

.bags-footer__feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* Centered mode: when the merchant enables it the icons sit in the
   middle of each column and the title/description text centers below. */
.bags-footer__features-grid.is-centered .bags-footer__feature {
  align-items: center;
  text-align: center;
}

/* Engineered by MTthemes — Licensed to b-A-g-S exclusively.
   Any commercial reuse breaches MTthemes IP rights. */

.bags-footer__feature-icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bags-footer__feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bags-footer__feature-title {
  margin: 0;
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
  color: var(--footer-features-title);
}

.bags-footer__feature-text {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--footer-features-text);
}

/* Mobile/tablet features bar — scroll-snap slider with JS-driven
   autoplay. The track scrolls one card at a time every few seconds
   (like any normal slider). Scroll-snap ensures clean stops on each
   slide. Pauses while the user is actively touching the slider. */
@media (max-width: 991px) {
  .bags-footer__features {
    padding-block: 20px;
  }
  .bags-footer__features-grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* scroll-padding keeps the snap target aligned to the inset, not
       flush against the container edge — gives breathing room on both
       inline sides so cards never touch the viewport border. */
    scroll-padding-inline-start: 16px;
    -webkit-overflow-scrolling: touch;
    padding-inline: 16px;
    /* No negative margin — let the parent container's inline padding
       provide the side gutter so the slider is inset, not edge-to-edge. */
    scrollbar-width: none;
  }
  .bags-footer__features-grid::-webkit-scrollbar { display: none; }
  .bags-footer__feature {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
  .bags-footer__features-grid.is-centered .bags-footer__feature {
    align-items: flex-start;
    text-align: start;
  }
}

/* ==================================================================
   Main footer
   ================================================================== */
.bags-footer__main {
  position: relative;
  background-color: var(--footer-main-bg);
  padding-block: 92px 60px;
  /* Figma section is ~695px tall. The columns take ~260px so without a
     min-height the watermark sits flush against them — the BAGS
     wordmark in the lower half of the section needs vertical room. */
  min-height: 700px;
  overflow: hidden;
}

.bags-footer__main-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 360fr 216fr 216fr 216fr 296fr;
  column-gap: 24px;
  row-gap: 40px;
  align-items: start;
}

.bags-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bags-footer__title {
  margin: 0;
  font-size: 30px;
  line-height: 48px;
  font-weight: 600;
  color: var(--footer-main-title);
}

.bags-footer__about-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bags-footer__text {
  margin: 0;
  font-size: 16px;
  line-height: 27px;
  font-weight: 500;
  color: var(--footer-main-text);
  max-width: 360px;
}

.bags-footer__cred {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 27px;
  font-weight: 600;
  color: var(--footer-main-text);
}

.bags-footer__cred a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bags-footer__cred a:hover {
  color: var(--footer-main-text-hover);
}

.bags-footer__cred svg,
.bags-footer__cred img {
  flex-shrink: 0;
  width: 39px;
  height: auto;
}

/* الجهة المالكة: مؤسسة م.ت ثيمز — الإذن لمتجر باجـز فقط.
   النشر التجاري ممنوع منعاً قاطعاً تحت أي صورة. */

/* ===== Link lists (cols 2-4) ===== */
.bags-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bags-footer__list li,
.bags-footer__list a {
  font-size: 16px;
  line-height: 27px;
  font-weight: 500;
  color: var(--footer-main-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bags-footer__list a:hover {
  color: var(--footer-main-text-hover);
}

/* ===== Newsletter (last col) ===== */
.bags-footer__newsletter-form {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--footer-newsletter-bg);
  border-radius: 0;
  padding: 0;
  gap: 0;
  height: 75px;
  width: 100%;
  max-width: 300px;
}

.bags-footer__newsletter-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  height: 100%;
  padding-inline-start: 24px;
  padding-inline-end: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--footer-newsletter-text);
  font-family: inherit;
}

.bags-footer__newsletter-input::placeholder {
  text-align: right;
}

.bags-footer__newsletter-input::placeholder {
  color: var(--footer-newsletter-text);
  opacity: 0.85;
}

.bags-footer__newsletter-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  height: 100%;
  width: 60px;
  padding: 0;
  color: var(--footer-newsletter-text);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s ease;
}

.bags-footer__newsletter-submit:hover {
  color: #000;
}

.bags-footer__newsletter-submit svg {
  flex-shrink: 0;
}

[dir="rtl"] .bags-footer__newsletter-submit svg {
  transform: scaleX(-1) rotate(45deg);
}

/* ===== Watermark — Figma 1:1079: BAGS wordmark behind the columns.
   Positioned absolutely at the bottom of the main section and centered
   horizontally regardless of writing mode. Direction-independent
   transform is intentional — translateX(-50%) horizontally centers
   the element relative to its own width whether on RTL or LTR pages. */
.bags-footer__watermark {
  position: absolute;
  inset-block-end: 24px;
  left: 50%;
  transform: translateX(-50%);
  /* `--footer-watermark-scale` (set on .bags-footer from the schema-driven
     `watermark_size` percentage) multiplies the existing clamp ranges so
     the merchant can grow/shrink the wordmark without picking new
     desktop/mobile pixel values per breakpoint. Defaults to 1 = no change. */
  font-size: calc(clamp(180px, 36vw, 560px) * var(--footer-watermark-scale, 1));
  line-height: 0.85;
  font-weight: 800;
  letter-spacing: -12px;
  color: var(--footer-watermark-color, #161202);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}

.bags-footer__watermark--image,
.bags-footer__watermark--svg {
  /* Span 92% of the container width, capped at 1327px like Figma.
     Height proportional via clamp so the wordmark scales nicely. */
  width: calc(min(92%, 1327px) * var(--footer-watermark-scale, 1));
  height: calc(clamp(140px, 22vw, 320px) * var(--footer-watermark-scale, 1));
  font-size: 0;
}

@media (max-width: 575px) {
  .bags-footer__watermark {
    font-size: calc(clamp(80px, 28vw, 240px) * var(--footer-watermark-scale, 1));
    inset-block-end: 16px;
  }
}

@media (max-width: 1199px) {
  .bags-footer__main-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
  }
}

@media (max-width: 991px) {
  /* Mobile/tablet footer follows Figma 1:2053 — About is always shown,
     remaining columns collapse into bordered accordion rows. */
  .bags-footer__main-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    row-gap: 0;
  }
  .bags-footer__title {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
  }
  .bags-footer__main {
    padding-block: 24px;
    padding-inline: 24px;
    min-height: 0;
  }

  .bags-footer__about {
    margin-block-end: 8px;
  }
  .bags-footer__about > .bags-footer__title {
    font-size: 20px;
    line-height: 24px;
  }

  /* Each collapsible column becomes a self-contained bordered card
     where the TITLE row is the visible bordered button (Figma 1:691):
     full-width, 60px tall, 1px solid #221c03 around the whole row. */
  .bags-footer__col:not(.bags-footer__about) {
    border-block-start: 0;
    padding: 0;
    margin-block-start: 12px;
  }

  .bags-footer__col:not(.bags-footer__about) > .bags-footer__title {
    margin: 0;
    height: 60px;
    padding: 16px;
    border: 1px solid #221c03;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    position: relative;
    color: var(--footer-main-text);
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    box-sizing: border-box;
  }

  .bags-footer__col:not(.bags-footer__about) > .bags-footer__title::after {
    content: '';
    width: 14px;
    height: 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none'><path d='M1 1L7 7L13 1' stroke='%23837e69' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }

  .bags-footer__col:not(.bags-footer__about).is-open > .bags-footer__title::after {
    transform: rotate(180deg);
  }

  /* Collapsed content sits OUTSIDE the bordered title and is hidden
     by default; opens with a smooth max-height transition. */
  .bags-footer__col:not(.bags-footer__about) > .bags-footer__list,
  .bags-footer__col:not(.bags-footer__about) > .bags-footer__newsletter-form,
  .bags-footer__col:not(.bags-footer__about) > .bags-footer__newsletter-form ~ * {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease, margin 0.3s ease;
    padding-block: 0;
    margin-block-start: 0;
  }

  .bags-footer__col:not(.bags-footer__about).is-open > .bags-footer__list,
  .bags-footer__col:not(.bags-footer__about).is-open > .bags-footer__newsletter-form {
    max-height: 600px;
    padding: 16px;
    margin-block-start: -1px; /* sit flush with the title border */
    border: 1px solid #221c03;
    border-block-start: 0;
    max-width:100%;
    width:100%;
  }

  /* Watermark shrinks on mobile so it doesn't dwarf the accordion. */
  .bags-footer__watermark {
    font-size: clamp(60px, 18vw, 140px);
    inset-block-end: 16px;
    letter-spacing: -3px;
  }
}

/* ==================================================================
   Bottom bar
   ================================================================== */
.bags-footer__bottom {
  background-color: var(--footer-bottom-bg);
  padding-block: 28px;
}

/* © m·t·themes — proprietary footer code for BaGs.
   لا يجوز نسخه أو نقله لمتجر آخر تحت أي ظرف. */

/* On mobile/tablet the social row sits flush against the main footer
   (Figma 1:2069) — drop the distinct bottom-bar bg and let the main-bg
   show through. Payments row keeps the bottom-bar bg as a separator. */
@media (max-width: 991px) {
  .bags-footer__bottom {
    background-color: var(--footer-main-bg);
    padding-block: 0;
  }
  .bags-footer__bottom-actions {
    background-color: var(--footer-main-bg);
    padding-block: 24px;
    width: 100%;
    justify-content: center;
  }
  .bags-footer__payments {
    background-color: var(--footer-bottom-bg);
    padding-block: 16px;
    padding-inline: 16px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.bags-footer__bottom-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Visual order: socials sit at inline-start (right in RTL, left in LTR),
   the MT-Themes credit sits in the visual middle, payments sit at
   inline-end. We don't swap the DOM (keeps source order natural for
   accessibility), just reorder via flex `order`. With three items and
   `justify-content: space-between` on the parent, the middle child
   naturally floats in the center. */
.bags-footer__bottom-actions { order: 1; }
.bags-footer__credit { order: 2; }
.bags-footer__payments { order: 3; }

.bags-footer__credit {
  font-size: 14px;
  font-weight: 500;
  color: var(--footer-main-text);
  white-space: nowrap;
  flex-shrink: 0;
  margin:5px auto 0;
  direction: ltr;
}
.bags-footer__credit a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s ease;
}
.bags-footer__credit a:hover {
  color: var(--footer-main-text-hover);
}

.bags-footer__payments {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  /* No `flex: 1` — let the row fall back to its natural width so
     `justify-content: space-between` on the parent can push it all
     the way to the inline-end (visually LEFT in RTL). */
}

.bags-footer__payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  flex-shrink: 0;
}

.bags-footer__payment-icon img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(0.95);
}

.bags-footer__bottom-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.bags-footer__apps {
  display: flex;
  gap: 10px;
  margin-block-start: 12px;
  flex-wrap: wrap;
}

.bags-footer__apps img {
  display: block;
  height: 40px;
  width: auto;
}

.bags-footer__socials {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bags-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--footer-social-border);
  background: transparent;
  color: var(--footer-social-color);
  text-decoration: none;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.bags-footer__social svg {
  width: 20px;
  height: 20px;
}

.bags-footer__social:hover {
  background-color: var(--footer-social-filled-bg);
  color: #fff;
  transform: translateY(-2px);
}

.bags-footer__social--filled {
  background-color: var(--footer-social-filled-bg);
  border-color: transparent;
  color: #fff;
}

.bags-footer__social--filled:hover {
  filter: brightness(1.1);
}

.bags-footer__copyrights {
  margin-block-start: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--footer-main-text);
}

.bags-footer__copyrights a {
  color: inherit;
  text-decoration: none;
}

.bags-footer__copyrights a:hover {
  color: var(--footer-main-text-hover);
}

@media (max-width: 767px) {
  .bags-footer__bottom-grid {
    flex-direction: column;
    align-items: stretch;
    margin-top:-1px;
  }
  .bags-footer__payments {
    justify-content: center;
    padding-top:30px;
    padding-bottom:30px;
    gap:30px;
  }
  .bags-footer__bottom-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
  .bags-footer__social {
    width: 48px;
    height: 48px;
  }
}

/* ==================================================================
   Mobile visibility toggles for floating WhatsApp + back-to-top.
   Set from the customizer (Footer → WhatsApp). When the merchant flips
   either checkbox ON the corresponding element is hidden at viewport
   widths ≤ 991px (touch breakpoint).
   ================================================================== */
@media (max-width: 991px) {
  .whatsChat.is-hide-back-top-mobile .progress-wrap {
    display: none !important;
  }
  .whatsChat.is-hide-whatsapp-mobile .whatsTitle,
  .whatsChat.is-hide-whatsapp-mobile .angleDown {
    display: none !important;
  }
}