/* ===========================================================
   PI – Country & Currency Offcanvas
   (no change to middle panel background)
   =========================================================== */

#pi-country-offcanvas.offcanvas,
#pi-currency-offcanvas.offcanvas {
  /* width / shell */
  --bs-offcanvas-width: min(92vw, 420px);
  width: var(--bs-offcanvas-width) !important;

  color: var(--text-strong);
  border-left: 1px solid var(--border-glass);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--elev-3);

  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);

  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden; /* body scrolls, shell stays fixed */
}

@media (max-width: 576px) {
  #pi-country-offcanvas.offcanvas,
  #pi-currency-offcanvas.offcanvas {
    border-radius: 0;
  }
}

/* Header --------------------------------------------------- */
#pi-country-offcanvas .offcanvas-header,
#pi-currency-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--divider-glass);
}

#pi-country-offcanvas .offcanvas-title,
#pi-currency-offcanvas .offcanvas-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.2px;
}

#pi-country-offcanvas .btn-close,
#pi-currency-offcanvas .btn-close {
  filter: invert(1) opacity(0.75);
}
#pi-country-offcanvas .btn-close:hover,
#pi-currency-offcanvas .btn-close:hover {
  opacity: 1;
}

/* Body layout (NO background override here) ---------------- */
#pi-country-offcanvas .offcanvas-body,
#pi-currency-offcanvas .offcanvas-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

/* Checklist items ------------------------------------------ */
#pi-country-offcanvas .form-check,
#pi-currency-offcanvas .form-check {
  margin-bottom: 0.5rem;
}

#pi-country-offcanvas .form-check-label,
#pi-currency-offcanvas .form-check-label {
  color: var(--text-strong);
  font-weight: 500;
}

/* Checkbox styling ----------------------------------------- */
#pi-country-offcanvas .form-check-input,
#pi-currency-offcanvas .form-check-input {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  box-shadow: none;
}

#pi-country-offcanvas .form-check-input:focus,
#pi-currency-offcanvas .form-check-input:focus {
  box-shadow: var(--focus-ring);
  border-color: rgba(72, 168, 255, 0.65);
}

#pi-country-offcanvas .form-check-input:checked,
#pi-currency-offcanvas .form-check-input:checked {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

/* Footer + Apply button ------------------------------------ */
#pi-country-offcanvas .offcanvas-footer,
#pi-currency-offcanvas .offcanvas-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: center;

  padding: 12px 16px 20px;
  background: inherit;                 /* ← no dark “chin” */
  border-top: 1px solid var(--divider-glass);
  z-index: 3;
}

#pi-country-offcanvas .offcanvas-footer .btn,
#pi-currency-offcanvas .offcanvas-footer .btn {
  min-width: 120px;
  font-weight: 600;
}

#pi-country-offcanvas .offcanvas-footer .btn-primary,
#pi-currency-offcanvas .offcanvas-footer .btn-primary {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}

#pi-country-offcanvas .offcanvas-footer .btn-primary:hover,
#pi-currency-offcanvas .offcanvas-footer .btn-primary:hover {
  filter: brightness(1.03);
}

#pi-country-offcanvas .offcanvas-footer .btn-primary:active,
#pi-currency-offcanvas .offcanvas-footer .btn-primary:active {
  filter: brightness(0.97);
}
/* ===========================================================
   Country & Currency Offcanvas (all ids ending in these)
   =========================================================== */

[id$="-country-offcanvas"].offcanvas,
[id$="-currency-offcanvas"].offcanvas {
  /* size & position */
  --bs-offcanvas-width: min(92vw, 420px);
  --bs-offcanvas-bg: rgba(10, 27, 61, 0.96);  /* shell colour */
  width: var(--bs-offcanvas-width) !important;

  background-color: var(--bs-offcanvas-bg) !important;
  color: var(--text-strong);
  border-left: 1px solid var(--border-glass);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--elev-3);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);

  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

@media (max-width: 576px) {
  [id$="-country-offcanvas"].offcanvas,
  [id$="-currency-offcanvas"].offcanvas {
    border-radius: 0;
  }
}

/* Header --------------------------------------------------- */
[id$="-country-offcanvas"] .offcanvas-header,
[id$="-currency-offcanvas"] .offcanvas-header {
  border-bottom: 1px solid var(--divider-glass);
}

[id$="-country-offcanvas"] .offcanvas-title,
[id$="-currency-offcanvas"] .offcanvas-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.2px;
}

[id$="-country-offcanvas"] .btn-close,
[id$="-currency-offcanvas"] .btn-close {
  filter: invert(1) opacity(0.75);
}
[id$="-country-offcanvas"] .btn-close:hover,
[id$="-currency-offcanvas"] .btn-close:hover {
  opacity: 1;
}

/* Body layout ---------------------------------------------- */
[id$="-country-offcanvas"] .offcanvas-body,
[id$="-currency-offcanvas"] .offcanvas-body {
  padding: 16px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

/* Checklist items (plain form-checks) ---------------------- */
[id$="-country-offcanvas"] .form-check,
[id$="-currency-offcanvas"] .form-check {
  margin-bottom: 0.5rem;
}

[id$="-country-offcanvas"] .form-check-label,
[id$="-currency-offcanvas"] .form-check-label {
  color: var(--text-strong);
  font-weight: 500;
}

/* Checkbox styling ----------------------------------------- */
[id$="-country-offcanvas"] .form-check-input,
[id$="-currency-offcanvas"] .form-check-input {
  border-radius: 999px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  box-shadow: none;
}

[id$="-country-offcanvas"] .form-check-input:focus,
[id$="-currency-offcanvas"] .form-check-input:focus {
  box-shadow: var(--focus-ring);
  border-color: rgba(72, 168, 255, 0.75);
}

[id$="-country-offcanvas"] .form-check-input:checked,
[id$="-currency-offcanvas"] .form-check-input:checked {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

/* Footer + Apply button (no extra dark "chin") ------------- */
[id$="-country-offcanvas"] .offcanvas-footer,
[id$="-currency-offcanvas"] .offcanvas-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 20px 16px;
  /* same colour as shell so it blends in */
  background-color: var(--bs-offcanvas-bg);
  border-top: 1px solid var(--divider-glass);
  z-index: 3;
}

/* Full‑width Apply button inside footer (and fallback in body) */
[id$="-country-offcanvas"] .offcanvas-footer .btn,
[id$="-currency-offcanvas"] .offcanvas-footer .btn,
[id$="-country-offcanvas"] .offcanvas-body .btn[id$="-apply"],
[id$="-currency-offcanvas"] .offcanvas-body .btn[id$="-apply"] {
  width: 100%;
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[id$="-country-offcanvas"] .offcanvas-footer .btn:hover,
[id$="-currency-offcanvas"] .offcanvas-footer .btn:hover,
[id$="-country-offcanvas"] .offcanvas-body .btn[id$="-apply"]:hover,
[id$="-currency-offcanvas"] .offcanvas-body .btn[id$="-apply"]:hover {
  filter: brightness(1.04);
}

[id$="-country-offcanvas"] .offcanvas-footer .btn:active,
[id$="-currency-offcanvas"] .offcanvas-footer .btn:active,
[id$="-country-offcanvas"] .offcanvas-body .btn[id$="-apply"]:active,
[id$="-currency-offcanvas"] .offcanvas-body .btn[id$="-apply"]:active {
  filter: brightness(0.97);
}
[id$="-country-offcanvas"] .offcanvas-body input[type="search"],
[id$="-currency-offcanvas"] .offcanvas-body input[type="search"] {
  display: none !important;
}

[id$="-country-offcanvas"] .offcanvas-body > :has(input[type="search"]),
[id$="-currency-offcanvas"] .offcanvas-body > :has(input[type="search"]) {
  display: none !important;
}
/* Hide the search bar in the country/currency offcanvas */
[id$="-country-offcanvas"] .offcanvas-body [placeholder^="Search"],
[id$="-currency-offcanvas"] .offcanvas-body [placeholder^="Search"] {
  display: none !important;
}
/* ===========================================================
   Country, Currency & Price Source Offcanvas
   (all ids ending in these)
   =========================================================== */

[id$="-country-offcanvas"].offcanvas,
[id$="-currency-offcanvas"].offcanvas,
[id$="-price-source-offcanvas"].offcanvas {
  /* size & position */
  --bs-offcanvas-width: min(92vw, 420px);
  --bs-offcanvas-bg: rgba(10, 27, 61, 0.96);  /* shell colour */
  width: var(--bs-offcanvas-width) !important;

  background-color: var(--bs-offcanvas-bg) !important;
  color: var(--text-strong);
  border-left: 1px solid var(--border-glass);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--elev-3);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);

  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

@media (max-width: 576px) {
  [id$="-country-offcanvas"].offcanvas,
  [id$="-currency-offcanvas"].offcanvas,
  [id$="-price-source-offcanvas"].offcanvas {
    border-radius: 0;
  }
}

/* Header --------------------------------------------------- */
[id$="-country-offcanvas"] .offcanvas-header,
[id$="-currency-offcanvas"] .offcanvas-header,
[id$="-price-source-offcanvas"] .offcanvas-header {
  border-bottom: 1px solid var(--divider-glass);
}

[id$="-country-offcanvas"] .offcanvas-title,
[id$="-currency-offcanvas"] .offcanvas-title,
[id$="-price-source-offcanvas"] .offcanvas-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.2px;
}

[id$="-country-offcanvas"] .btn-close,
[id$="-currency-offcanvas"] .btn-close,
[id$="-price-source-offcanvas"] .btn-close {
  filter: invert(1) opacity(0.75);
}
[id$="-country-offcanvas"] .btn-close:hover,
[id$="-currency-offcanvas"] .btn-close:hover,
[id$="-price-source-offcanvas"] .btn-close:hover {
  opacity: 1;
}

/* Body layout ---------------------------------------------- */
[id$="-country-offcanvas"] .offcanvas-body,
[id$="-currency-offcanvas"] .offcanvas-body,
[id$="-price-source-offcanvas"] .offcanvas-body {
  padding: 16px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

/* Checklist / radio items ---------------------------------- */
[id$="-country-offcanvas"] .form-check,
[id$="-currency-offcanvas"] .form-check,
[id$="-price-source-offcanvas"] .form-check {
  margin-bottom: 0.5rem;
}

[id$="-country-offcanvas"] .form-check-label,
[id$="-currency-offcanvas"] .form-check-label,
[id$="-price-source-offcanvas"] .form-check-label {
  color: var(--text-strong);
  font-weight: 500;
}

/* Checkbox / radio styling --------------------------------- */
[id$="-country-offcanvas"] .form-check-input,
[id$="-currency-offcanvas"] .form-check-input,
[id$="-price-source-offcanvas"] .form-check-input {
  border-radius: 999px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  box-shadow: none;
}

[id$="-country-offcanvas"] .form-check-input:focus,
[id$="-currency-offcanvas"] .form-check-input:focus,
[id$="-price-source-offcanvas"] .form-check-input:focus {
  box-shadow: var(--focus-ring);
  border-color: rgba(72, 168, 255, 0.75);
}

[id$="-country-offcanvas"] .form-check-input:checked,
[id$="-currency-offcanvas"] .form-check-input:checked,
[id$="-price-source-offcanvas"] .form-check-input:checked {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

/* Footer + bottom button ----------------------------------- */
[id$="-country-offcanvas"] .offcanvas-footer,
[id$="-currency-offcanvas"] .offcanvas-footer,
[id$="-price-source-offcanvas"] .offcanvas-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 20px 16px;
  background-color: var(--bs-offcanvas-bg);
  border-top: 1px solid var(--divider-glass);
  z-index: 3;
}

/* Full‑width button inside footer (and fallback in body) */
[id$="-country-offcanvas"] .offcanvas-footer .btn,
[id$="-currency-offcanvas"] .offcanvas-footer .btn,
[id$="-price-source-offcanvas"] .offcanvas-footer .btn,
[id$="-country-offcanvas"] .offcanvas-body .btn[id$="-apply"],
[id$="-currency-offcanvas"] .offcanvas-body .btn[id$="-apply"],
[id$="-price-source-offcanvas"] .offcanvas-body .btn[id$="-apply"] {
  width: 100%;
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[id$="-country-offcanvas"] .offcanvas-footer .btn:hover,
[id$="-currency-offcanvas"] .offcanvas-footer .btn:hover,
[id$="-price-source-offcanvas"] .offcanvas-footer .btn:hover,
[id$="-country-offcanvas"] .offcanvas-body .btn[id$="-apply"]:hover,
[id$="-currency-offcanvas"] .offcanvas-body .btn[id$="-apply"]:hover,
[id$="-price-source-offcanvas"] .offcanvas-body .btn[id$="-apply"]:hover {
  filter: brightness(1.04);
}

[id$="-country-offcanvas"] .offcanvas-footer .btn:active,
[id$="-currency-offcanvas"] .offcanvas-footer .btn:active,
[id$="-price-source-offcanvas"] .offcanvas-footer .btn:active,
[id$="-country-offcanvas"] .offcanvas-body .btn[id$="-apply"]:active,
[id$="-currency-offcanvas"] .offcanvas-body .btn[id$="-apply"]:active,
[id$="-price-source-offcanvas"] .offcanvas-body .btn[id$="-apply"]:active {
  filter: brightness(0.97);
}

/* (optional) hide search inside country/currency only ------- */
[id$="-country-offcanvas"] .offcanvas-body input[type="search"],
[id$="-currency-offcanvas"] .offcanvas-body input[type="search"] {
  display: none !important;
}

[id$="-country-offcanvas"] .offcanvas-body > :has(input[type="search"]),
[id$="-currency-offcanvas"] .offcanvas-body > :has(input[type="search"]) {
  display: none !important;
}
/* Market‑Trends only: remove the dark "chin" under the Apply button */
#mt-country-offcanvas .offcanvas-body,
#mt-currency-offcanvas .offcanvas-body {
    padding-bottom: 0.5rem;  /* or 0, if you want it completely flush */
}

/* Kill any extra padding/margin on the last child (the Apply wrapper) */
#mt-country-offcanvas .offcanvas-body > div:last-child,
#mt-currency-offcanvas .offcanvas-body > div:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}