/* ================================================================
   MWP MultiCurrency Pro — Front-end v2.5.0
   Custom dropdown + button-group + price decorations
   ================================================================

   Index
   ──────────────────────────────────────────────────────────────
   0. Design tokens (CSS variables — edit here to restyle globally)
   1. Wrapper
   2. Custom dropdown  (.mwp-mc-drop)
   3. Native select fallback
   4. Button group     (.mwp-mc-buttons)
   5. Price decorations
   6. Responsive  ≤ 600 px
   ================================================================ */


/* ── 0. Design tokens ──────────────────────────────────────────
   Scoped to .mwp-mc-switcher — zero bleed to the rest of the page.
   ──────────────────────────────────────────────────────────── */
.mwp-mc-switcher {
  /* Dark-header palette (default) */
  --mc-bg         : rgba(255,255,255,.12);
  --mc-bg-hov     : rgba(255,255,255,.22);
  --mc-border     : rgba(255,255,255,.25);
  --mc-border-hov : rgba(255,255,255,.45);
  --mc-text       : inherit;
  /* Light-header palette (applied via .mc-light modifier) */
  --mc-bg-light   : #f8fafc;
  --mc-bg-light-hov: #f1f5f9;
  --mc-border-light: #e2e8f0;
  --mc-border-light-hov: #cbd5e1;
  --mc-text-light : #1e293b;
  /* Panel */
  --mc-panel-bg   : #ffffff;
  --mc-panel-border: #e2e8f0;
  --mc-panel-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --mc-item-hover : #f8fafc;
  --mc-item-active: #eff6ff;
  --mc-item-active-text: #2563eb;
  /* Accents */
  --mc-accent     : #2563eb;
  --mc-accent-dark: #1d4ed8;
  /* Shape */
  --mc-radius     : 8px;
  --mc-height     : 34px;
  --mc-fs         : 13px;
  --mc-fw         : 600;
  /* Motion */
  --mc-duration   : .18s;
  --mc-easing     : ease;
}


/* ── 1. Wrapper ─────────────────────────────────────────────── */
.mwp-mc-switcher {
  display       : inline-flex;
  align-items   : center;
  gap           : 6px;
  vertical-align: middle;
  position      : relative;
  font-size     : 14px;
  /* Isolate style cascade — no token bleed */
  contain       : style;
  /* Never clip the dropdown panel */
  overflow      : visible;
}


/* ── 2. Custom dropdown (.mwp-mc-drop) ─────────────────────────
   Built by mc-ui-header.js — replaces the native <select>.
   ──────────────────────────────────────────────────────────── */
.mwp-mc-drop {
  position: relative;
  display : inline-block;
}

/* Trigger button */
.mwp-mc-drop__btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 6px;
  padding      : 6px 10px;
  background   : var(--mc-bg);
  border       : 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  color        : var(--mc-text);
  font         : inherit;
  font-size    : var(--mc-fs);
  font-weight  : var(--mc-fw);
  cursor       : pointer;
  white-space  : nowrap;
  line-height  : 1;
  transition   : background var(--mc-duration) var(--mc-easing),
                 border-color var(--mc-duration) var(--mc-easing);
}
.mwp-mc-drop__btn:hover {
  background  : var(--mc-bg-hov);
  border-color: var(--mc-border-hov);
}
.mwp-mc-drop__btn:focus-visible {
  outline       : 2px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}

/* Light modifier */
.mwp-mc-drop__btn.light,
.mwp-mc-switcher.mc-light .mwp-mc-drop__btn {
  background  : var(--mc-bg-light);
  border-color: var(--mc-border-light);
  color       : var(--mc-text-light);
}
.mwp-mc-drop__btn.light:hover,
.mwp-mc-switcher.mc-light .mwp-mc-drop__btn:hover {
  background  : var(--mc-bg-light-hov);
  border-color: var(--mc-border-light-hov);
}

/* Caret */
.mwp-mc-drop__caret {
  width      : 10px;
  height     : 10px;
  flex-shrink: 0;
  opacity    : .7;
  transition : transform var(--mc-duration) var(--mc-easing);
}
.mwp-mc-drop.open .mwp-mc-drop__caret { transform: rotate(180deg); }

/* Dropdown panel */
.mwp-mc-drop__panel {
  display      : none;
  position     : absolute;
  top          : calc(100% + 6px);
  right        : 0;
  min-width    : 140px;
  background   : var(--mc-panel-bg);
  border       : 1px solid var(--mc-panel-border);
  border-radius: 10px;
  box-shadow   : var(--mc-panel-shadow);
  overflow     : hidden;
  z-index      : 99999;
  animation    : mcDropIn .15s var(--mc-easing);
}
@keyframes mcDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.mwp-mc-drop.open .mwp-mc-drop__panel { display: block; }

/* Option rows */
.mwp-mc-drop__item {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  padding      : 9px 13px;
  font-size    : var(--mc-fs);
  font-weight  : 500;
  color        : #1e293b;
  cursor       : pointer;
  border-bottom: 1px solid #f1f5f9;
  white-space  : nowrap;
  transition   : background .12s;
}
.mwp-mc-drop__item:last-child { border-bottom: none; }
.mwp-mc-drop__item:hover      { background: var(--mc-item-hover); }
.mwp-mc-drop__item.active {
  background: var(--mc-item-active);
  color     : var(--mc-item-active-text);
  font-weight: 700;
}
.mwp-mc-drop__item.active::after {
  content    : '✓';
  margin-left: auto;
  font-size  : 12px;
  color      : var(--mc-item-active-text);
}

/* Flag + code inside panel rows */
.mwp-mc-drop__flag { font-size: 17px; line-height: 1; flex-shrink: 0; }
.mwp-mc-drop__code { letter-spacing: .3px; }


/* ── 3. Native select fallback ─────────────────────────────────
   Shown only when JS is disabled or mc-ui-header.js hasn't run yet.
   mc-ui-header.js hides this with inline style once it builds the
   custom dropdown, so both paths never show simultaneously.
   ──────────────────────────────────────────────────────────── */
.mwp-mc-switcher select.mwp-mc {
  appearance         : none !important;
  border             : 1px solid var(--mc-border);
  border-radius      : var(--mc-radius);
  padding            : 0 30px 0 10px;
  background-color   : var(--mc-bg);
  background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat  : no-repeat;
  background-position: right 9px center;
  color              : var(--mc-text);
  font               : inherit;
  font-size          : var(--mc-fs);
  font-weight        : var(--mc-fw);
  height             : var(--mc-height);
  cursor             : pointer;
  vertical-align     : middle;
  transition         : border-color var(--mc-duration) var(--mc-easing),
                       background-color var(--mc-duration) var(--mc-easing);
}
.mwp-mc-switcher select.mwp-mc:hover {
  border-color    : var(--mc-border-hov);
  background-color: var(--mc-bg-hov);
}
.mwp-mc-switcher select.mwp-mc:focus-visible {
  border-color: rgba(255,255,255,.7);
  outline     : 2px solid rgba(255,255,255,.3);
  outline-offset: 1px;
}

/* Light header variant */
.mwp-mc-switcher.mc-light select.mwp-mc {
  background-color : var(--mc-bg-light);
  background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  border-color     : var(--mc-border-light);
  color            : var(--mc-text-light);
}


/* ── 4. Button group (.mwp-mc-buttons) ─────────────────────── */
.mwp-mc-switcher.mwp-mc-buttons {
  flex-wrap: wrap;
  gap      : 4px;
}
.mwp-mc-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 5px;
  padding        : 5px 11px;
  border         : 1px solid var(--mc-border);
  border-radius  : calc(var(--mc-radius) - 1px);
  background     : var(--mc-bg);
  color          : var(--mc-text);
  font           : inherit;
  font-size      : 12px;
  font-weight    : var(--mc-fw);
  cursor         : pointer;
  letter-spacing : .2px;
  line-height    : 1.4;
  text-decoration: none;
  transition     : background var(--mc-duration) var(--mc-easing),
                   border-color var(--mc-duration) var(--mc-easing);
}
.mwp-mc-btn:hover {
  background  : var(--mc-bg-hov);
  border-color: var(--mc-border-hov);
}
.mwp-mc-btn:focus-visible {
  outline       : 2px solid rgba(255,255,255,.5);
  outline-offset: 2px;
}
.mwp-mc-btn.active {
  background  : var(--mc-accent);
  color       : #fff;
  border-color: var(--mc-accent-dark);
}

/* Light header variant */
.mwp-mc-switcher.mc-light .mwp-mc-btn {
  background  : #f1f5f9;
  border-color: var(--mc-border-light);
  color       : var(--mc-text-light);
}
.mwp-mc-switcher.mc-light .mwp-mc-btn:hover  { background: #e2e8f0; }
.mwp-mc-switcher.mc-light .mwp-mc-btn.active {
  background  : var(--mc-accent);
  color       : #fff;
  border-color: var(--mc-accent-dark);
}


/* ── 5. Price decorations ───────────────────────────────────── */
.mwp-mc-prefix {
  display       : inline-flex;
  align-items   : center;
  gap           : 3px;
  margin-right  : 3px;
  vertical-align: middle;
}
.mwp-mc-flag { font-size: .9em; line-height: 1; }
.mwp-mc-code {
  font-size     : .75em;
  font-weight   : 700;
  letter-spacing: .4px;
  opacity       : .7;
  text-transform: uppercase;
}


/* ── 6. Responsive  ≤ 600 px ────────────────────────────────── */
@media (max-width: 600px) {
  .mwp-mc-drop__btn             { font-size: 12px; padding: 5px 9px; }
  .mwp-mc-drop__panel           { right: auto; left: 0; min-width: 120px; }
  .mwp-mc-btn                   { font-size: 11px; padding: 4px 8px; }
  .mwp-mc-switcher select.mwp-mc{ height: 32px; font-size: 12px; }
}