/*
 * IT-4You public currency selector accessibility layer.
 * Keeps the compact desktop utility strip while providing reliable pointer
 * targets, keyboard focus visibility, and matched mobile layout offsets.
 */

#it4y-top-strip button[data-cur],
#it4y-top-strip button[data-lang] {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-block-size: 28px;
}

#it4y-cur-menu button[data-cur] {
  min-block-size: 40px;
}

.it4-svl-grid {
  position: relative;
}

html:not([data-currency-state="ready"]) .it4-svl-grid > .it4-svl-card {
  display: none;
}

html:not([data-currency-state="ready"]) .it4-svl-grid::before {
  align-items: center;
  color: var(--text2, #64748b);
  content: "Loading pricing…";
  display: grid;
  font-size: 14px;
  grid-column: 1 / -1;
  justify-content: center;
  min-block-size: 120px;
  padding: 24px;
  text-align: center;
}

html[lang^="sv"]:not([data-currency-state="ready"]) .it4-svl-grid::before {
  content: "Laddar priser…";
}

html[lang^="ar"]:not([data-currency-state="ready"]) .it4-svl-grid::before {
  content: "جارٍ تحميل الأسعار…";
}

html[data-currency-state="error"] .it4-svl-grid::before {
  color: #b42318;
  content: "Pricing is temporarily unavailable.";
}

html[lang^="sv"][data-currency-state="error"] .it4-svl-grid::before {
  content: "Priserna är tillfälligt otillgängliga.";
}

html[lang^="ar"][data-currency-state="error"] .it4-svl-grid::before {
  content: "الأسعار غير متاحة مؤقتاً.";
}

#it4y-top-strip button[data-cur]:focus-visible,
#it4y-top-strip button[data-lang]:focus-visible,
#it4y-cur-head .it4y-cur-btn:focus-visible,
#it4y-cur-menu button[data-cur]:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
}

@media (max-width: 900px) {
  html body #it4y-top-strip {
    height: calc(48px + env(safe-area-inset-top, 0px));
    padding-block-start: env(safe-area-inset-top, 0px);
    padding-inline: 6px;
  }

  #it4y-top-strip button[data-cur],
  #it4y-top-strip button[data-lang] {
    min-block-size: 40px;
  }

  /*
   * The sticky header already reserves the complete selector-strip height.
   * Keep only the visual rhythm gap in normal flow; reserving 48px here as
   * well applied the fixed-strip offset twice and created a 48px dead zone.
   */
  html body.it4y-has-strip {
    padding-top: 8px;
  }

  html body.it4y-has-strip .topbar-bar {
    top: calc(48px + env(safe-area-inset-top, 0px));
  }
}