/* ===== Footer ===== */
footer.siteFooter{
	color:#6b7280;
	background:#eeeef0;
	padding:20px 0 40px;
}

/* 2-row grid: download spans full width, then links + langs */
.footer__inner{
	display:grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"download download"
		"links    langs";
	gap:14px 22px;
	padding:0 20px;
	font-size:14px;
}

/* Row 1 */
.footer__download{
	grid-area:download;
	align-items:center;
	justify-content:space-between;
	gap:14px 18px;
	flex-wrap:wrap;
}

.footer__downloadTitle{
	font-weight:600;
	color:#000;
	font-size:15px;
	line-height:1.2;
	margin-bottom: 20px;
}

.footer__downloadSub{
	margin-top:2px;
	font-size:13px;
	color:#6b7280;
}

/* Store badges: one line if possible; wrap to next line if not */
.footer__stores{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-start;
   margin-bottom: 30px;
}

.footerStoreLink{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:10px;
   overflow: hidden;
}

.footerStoreLink img{
	height:44px;
	width:auto;
	display:block;
}

/* Row 2 left/right */
.footer__links{ 
   grid-area:links; 
   min-width:0; 
}

.footer__langs{
   grid-area:langs;
   justify-content:flex-end;
   min-width:0;

   /* IMPORTANT: limit width so it can scroll instead of forcing layout */
   max-width: min(46vw, 520px);
   justify-self: end;
}

/* Make each row ONE line + horizontally scrollable */
.footer__links {
   font-size: 14px;
}

/* .footer__links::-webkit-scrollbar,
.footer__langs::-webkit-scrollbar{
   display:none;                
} */

/* Optional: clean dot separators without HTML dots */
.footer__links a + a::before,
.footer__langs a + a::before {
   content:" ";
   color:#9ca3af;
   margin:0 10px;
}

/* Make sure links don’t shrink weirdly */
.footer__links a,
.footer__langs a {
   flex:0 0 auto;           /* Firefox hide */
   color: #555;
}

footer a{
	color:inherit;
	text-decoration:none;
}

footer a:hover {
	color:#000;
}

@media (max-width: 900px) {
   .footer__inner{
      grid-template-columns: 1fr;
      grid-template-areas:
         "download"
         "links"
         "langs";
   }

   .footer__langs{
      justify-content:flex-start;
      max-width: 100%;
      justify-self: start;
   }
}


/* ===== Layout: desktop aligns Language with Store badges, legal below ===== */
.footerGrid {
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-areas:
      "promo lang" 
      "legal legal";
   gap: 18px 28px;
   align-items: start;
   margin: 0 auto;
   max-width: 1200px;
   padding: 0 18px;
}

.footerPromoArea { 
   grid-area: promo; 
}

.footerLangArea { 
   grid-area: lang; 
   display:flex; 
   justify-content:flex-end; 
}

.footerLegalArea { 
   grid-area: legal; 
   margin-top: 20px;
}

/* ===== Language pill button ===== */
.footerLang { 
   position: relative; 
}

.langBtn {
   height: 44px;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 0px 12px;
   border-radius: 8px;
   border: 1px solid #c1c3c5;
   background: #eeeef0;
   color: #000;
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
   font-size: 15px;
}

.langBtn__icon {
   width: 22px;
   height: 22px;
   display: block;
}

.langBtn__label {
   font-weight: 600;
}

.langBtn__chev {
   display:inline-flex;
   align-items:center;
   justify-content:center;
   transition:transform .18s ease;
}


/* ===== Menu that expands UPWARDS ===== */
.langMenu{
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 160px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 5px 44px rgba(28, 33, 44, 0.38);
  padding: 6px 0;
  z-index: 50;

  /* ✅ animation */
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transform-origin: bottom right;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  will-change: opacity, transform;
}

.footerLang.is-open .langMenu{
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .langMenu{ transition: none; }
}

.langMenu a {
   display: block;
   padding: 12px 15px;
   border-radius: 0px;
   text-decoration: none;
   color: #333;
   font-weight: 400;
   font-size: 15px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.langMenu a:hover {
   background: #f1f3f5;
}

/* Rotate chevron when open */
.footerLang.is-open .langBtn__chev{
   transform: rotate(180deg);
}

/* ===== Mobile: badges top, language second, legal third ===== */
@media (max-width: 700px){
   .footerGrid{
      display: flex;
      flex-direction: column;
      gap: 14px;
   }

  .footerPromoArea{ 
      order: 1; 
   }

  .footerLangArea { 
      order: 2; 
      justify-content:flex-start; 
   }

  .footerLegalArea{ 
      order: 3; 
   }

   /* Optional: make selector full-width on mobile */
   .langBtn{
      width: 100%;
      justify-content: space-between;
   }

   .langMenu{
      left: 0;
      right: auto;
      width: 100%;
      min-width: 0;
   }
}

/* ===== Legal row (copyright + links) ===== */
.footerLegalArea .footer__links{
  display: flex;              /* <-- this is the missing piece */
  flex-wrap: wrap;
  justify-content: start;
  align-items: start;
  gap: 10px 15px;             /* clean spacing instead of weird wrapping */
}

/* We use gap, so disable the pseudo "separator spacing" for this row */
.footerLegalArea .footer__links a + a::before{
  content: none;
  margin: 0;
}

/* Once you’re in the mobile layout, stack links vertically */
@media (max-width: 560px){
  .footerLegalArea .footer__links{
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: start;      /* use flex-start if you want left aligned */
    gap: 10px;
  }
}