/* ============================================================
   EtqanShop — Design 2a — footer.css
   Dark footer (the only dark section on the page).
   ============================================================ */

.site-footer {
  /* Dark grey base with soft golden ambient highlights in the corners */
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(201, 169, 120, 0.18), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(168, 136, 78, 0.14), transparent 60%),
    linear-gradient(180deg, #232325 0%, #1c1c1e 45%, #161618 100%);
  color: var(--color-footer-fg);
  position: relative;
  margin-top: clamp(48px, 7vw, 96px);
  overflow: hidden;
}

/* Top accent line — gold gradient */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold-deep), var(--color-gold), var(--color-gold-soft), var(--color-gold), var(--color-gold-deep));
  z-index: 1;
}

/* Subtle golden grain — a faint diagonal sheen across the footer */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0%, transparent 40%, rgba(201, 169, 120, 0.06) 50%, transparent 60%, transparent 100%);
  mix-blend-mode: screen;
}

/* Lift all real content above the diagonal sheen pseudo-element */
.site-footer > * { position: relative; z-index: 1; }

/* Top band — newsletter mini-block could be standalone too */
.site-footer__main {
  padding-block: clamp(48px, 6vw, 80px);
}

.footer-grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  grid-template-columns: 1.4fr repeat(3, 1fr);
}

@media (max-width: 991.98px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575.98px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand__logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-md);
  text-decoration: none;
}

.footer-brand__img {
  height: 52px;
  width: auto;
  display: block;
}

.footer-brand__desc {
  color: var(--color-footer-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  max-width: 36ch;
  margin: 0 0 var(--space-lg);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-footer-fg);
}

.footer-contact a {
  color: var(--color-footer-fg);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-contact a:hover,
.footer-contact a:focus-visible { color: var(--color-purple-line); }

.footer-contact i {
  color: var(--color-gold);
  width: 18px;
  text-align: center;
  margin-inline-end: var(--space-sm);
}

.footer-col__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-md);
  letter-spacing: var(--ls-snug);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-links a {
  color: var(--color-footer-fg);
  font-size: var(--fs-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  opacity: 0.85;
  transition: opacity var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.footer-links a::before {
  content: "›";
  color: var(--color-gold);
  font-weight: var(--fw-bold);
  transition: transform var(--transition-fast);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-purple-line);
  opacity: 1;
  transform: translateX(2px);
}

/* App download block */
.footer-app__heading {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-sm);
}

.footer-app__desc {
  font-size: var(--fs-xs);
  color: var(--color-footer-muted);
  margin: 0 0 var(--space-md);
}

.footer-app__badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-sm);
}

.footer-app__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Identical outer box so both badges occupy the same layout footprint */
  flex: 0 0 auto;
  width: 148px;
  height: 44px;
  overflow: hidden;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.footer-app__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The Google Play PNG ships with built-in transparent padding around its
   artwork, so it renders visibly smaller than the Apple SVG inside the same
   box. Scale just the inner image up so the two badges look the same size. */
.footer-app__badge--google img {
  transform: scale(1.4);
}

.footer-app__badge:hover,
.footer-app__badge:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

/* Social icons */
.footer-social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.footer-social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--color-footer-fg);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-circle);
  font-size: var(--fs-md);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  background: var(--color-purple);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
}

/* Payments strip */
.footer-payments {
  border-block-start: 1px solid var(--color-footer-border);
  padding-block: var(--space-lg);
}

.footer-payments__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--color-footer-muted);
}

.footer-payments__icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.payment-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.payment-mark svg {
  display: block;
  width: 44px;
  height: auto;
}

.payment-mark:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.footer-payments__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--color-footer-muted);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}

/* Bottom strip */
.site-footer__bottom {
  border-block-start: 1px solid var(--color-footer-border);
  padding-block: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.site-footer__copyright {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-footer-muted);
}

.site-footer__credit {
  margin: 0;
  font-size: var(--fs-tiny);
  color: var(--color-footer-muted);
  opacity: 0.85;
  letter-spacing: 0.02em;
}

.site-footer__credit a {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px dotted currentColor;
  transition: color var(--transition-fast);
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
  color: var(--color-purple-line);
}

@media (max-width: 575.98px) {
  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}