:root {
  --wcmc-black:       #0a0a0a;
  --wcmc-white:       #ffffff;
  --wcmc-grey-50:     #f9f9f9;
  --wcmc-grey-100:    #f2f2f2;
  --wcmc-grey-200:    #e5e5e5;
  --wcmc-grey-300:    #d1d1d1;
  --wcmc-grey-400:    #9b9b9b;
  --wcmc-grey-600:    #5a5a5a;
  --wcmc-radius:      6px;
  --wcmc-radius-lg:   10px;
  --wcmc-shadow:      0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
  --wcmc-shadow-sm:   0 1px 4px rgba(0,0,0,0.08);
  --wcmc-transition:  180ms cubic-bezier(0.4, 0, 0.2, 1);
  --wcmc-font:        system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wcmc-font-mono:   'SFMono-Regular', Consolas, monospace;
  --wcmc-panel-w:     280px;
  --wcmc-panel-max-h: 360px;
  --wcmc-z:           9999;
}

.wcmc-dropdown-wrapper {
  position:    relative;
  display:     inline-block;
  font-family: var(--wcmc-font);
}

.wcmc-trigger {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  padding:         9px 14px 9px 12px;
  background:      var(--wcmc-white);
  color:           var(--wcmc-black);
  border:          1.5px solid var(--wcmc-grey-200);
  border-radius:   var(--wcmc-radius);
  font-family:     var(--wcmc-font);
  font-size:       14px;
  font-weight:     500;
  line-height:     1.4;
  cursor:          pointer;
  user-select:     none;
  outline:         none;
  white-space:     nowrap;
  min-width:       180px;
  transition:      border-color var(--wcmc-transition),
                   box-shadow   var(--wcmc-transition),
                   background   var(--wcmc-transition);
  box-shadow:      var(--wcmc-shadow-sm);
}

.wcmc-trigger:hover {
  border-color: var(--wcmc-black);
  box-shadow:   0 2px 8px rgba(0,0,0,0.12);
}

.wcmc-trigger:focus-visible {
  border-color: var(--wcmc-black);
  box-shadow:   0 0 0 3px rgba(0,0,0,0.15);
}

.wcmc-trigger[aria-expanded="true"] {
  border-color: var(--wcmc-black);
  box-shadow:   0 0 0 2px var(--wcmc-black);
}

.wcmc-trigger-icon {
  display:     flex;
  align-items: center;
  color:       var(--wcmc-black);
  font-size:   15px;
  flex-shrink: 0;
}

.wcmc-trigger-label {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex:        1;
  overflow:    hidden;
}

.wcmc-flag {
  font-size:    16px;
  line-height:  1;
  flex-shrink:  0;
}

.wcmc-country-name {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.wcmc-currency-badge {
  font-size:   11px;
  font-weight: 600;
  color:       var(--wcmc-grey-400);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.wcmc-trigger-arrow {
  display:      flex;
  align-items:  center;
  color:        var(--wcmc-grey-400);
  font-size:    11px;
  flex-shrink:  0;
  transition:   transform var(--wcmc-transition), color var(--wcmc-transition);
}

.wcmc-trigger[aria-expanded="true"] .wcmc-trigger-arrow {
  transform:  rotate(180deg);
  color:      var(--wcmc-black);
}

.wcmc-panel {
  position:       absolute;
  top:            calc(100% + 6px);
  left:           0;
  z-index:        var(--wcmc-z);
  width:          var(--wcmc-panel-w);
  background:     var(--wcmc-white);
  border:         1.5px solid var(--wcmc-black);
  border-radius:  var(--wcmc-radius-lg);
  box-shadow:     var(--wcmc-shadow);
  overflow:       hidden;
  opacity:        0;
  visibility:     hidden;
  transform:      translateY(-8px) scale(0.97);
  transform-origin: top left;
  transition:     opacity      var(--wcmc-transition),
                  visibility   var(--wcmc-transition),
                  transform    var(--wcmc-transition);
}

.wcmc-panel.is-open {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0) scale(1);
}

.wcmc-panel.align-right {
  left:  auto;
  right: 0;
  transform-origin: top right;
}

.wcmc-search-wrap {
  position:     relative;
  padding:      10px 12px 8px;
  border-bottom: 1px solid var(--wcmc-grey-200);
}

.wcmc-search-icon {
  position:  absolute;
  left:      22px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--wcmc-grey-400);
  font-size: 12px;
  pointer-events: none;
  margin-top: -4px;
}

.wcmc-search {
  width:         100%;
  padding:       7px 10px 7px 30px;
  font-family:   var(--wcmc-font);
  font-size:     13px;
  color:         var(--wcmc-black);
  background:    var(--wcmc-grey-50);
  border:        1px solid var(--wcmc-grey-200);
  border-radius: var(--wcmc-radius);
  outline:       none;
  box-sizing:    border-box;
  transition:    border-color var(--wcmc-transition), box-shadow var(--wcmc-transition);
}

.wcmc-search::placeholder { color: var(--wcmc-grey-400); }

.wcmc-search:focus {
  border-color: var(--wcmc-black);
  box-shadow:   0 0 0 2px rgba(0,0,0,0.08);
  background:   var(--wcmc-white);
}

.wcmc-list {
  list-style:    none;
  margin:        0;
  padding:       6px 0;
  max-height:    var(--wcmc-panel-max-h);
  overflow-y:    auto;
  overscroll-behavior: contain;
}

.wcmc-list::-webkit-scrollbar        { width: 4px; }
.wcmc-list::-webkit-scrollbar-track  { background: transparent; }
.wcmc-list::-webkit-scrollbar-thumb  { background: var(--wcmc-grey-300); border-radius: 4px; }
.wcmc-list::-webkit-scrollbar-thumb:hover { background: var(--wcmc-grey-400); }

.wcmc-option {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       9px 14px;
  cursor:        pointer;
  font-size:     13.5px;
  font-weight:   400;
  color:         var(--wcmc-black);
  line-height:   1.4;
  transition:    background var(--wcmc-transition);
  border-radius: 0;
}

.wcmc-option:hover,
.wcmc-option:focus {
  background: var(--wcmc-grey-100);
  outline:    none;
}

.wcmc-option--selected {
  background: var(--wcmc-grey-50);
  font-weight: 600;
}

.wcmc-option--selected:hover { background: var(--wcmc-grey-100); }

.wcmc-option.is-hidden { display: none; }

.wcmc-option-flag {
  font-size:   17px;
  line-height: 1;
  flex-shrink: 0;
}

.wcmc-option-name {
  flex: 1;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.wcmc-option-currency {
  font-size:      11px;
  font-weight:    600;
  color:          var(--wcmc-grey-400);
  letter-spacing: 0.04em;
  flex-shrink:    0;
  font-family:    var(--wcmc-font-mono);
}

.wcmc-option-check {
  font-size:   11px;
  color:       var(--wcmc-black);
  flex-shrink: 0;
}

.wcmc-no-results {
  padding:    12px 14px;
  font-size:  13px;
  color:      var(--wcmc-grey-400);
  text-align: center;
  display:    none;
}

.wcmc-no-results.is-visible { display: block; }

.wcmc-panel-loading {
  display:         none;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         16px;
  font-size:       13px;
  color:           var(--wcmc-grey-600);
  background:      rgba(255,255,255,0.9);
  position:        absolute;
  inset:           0;
  border-radius:   var(--wcmc-radius-lg);
  z-index:         1;
}

.wcmc-panel-loading.is-loading { display: flex; }

.wcmc-backdrop {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    calc(var(--wcmc-z) - 1);
}

.wcmc-backdrop.is-visible { display: block; }

.wcmc-trigger.is-loading {
  opacity:        0.7;
  pointer-events: none;
  cursor:         default;
}

@media (prefers-reduced-motion: reduce) {
  .wcmc-panel,
  .wcmc-trigger,
  .wcmc-option,
  .wcmc-trigger-arrow { transition: none; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --wcmc-black:    #f0f0f0;
    --wcmc-white:    #1a1a1a;
    --wcmc-grey-50:  #222222;
    --wcmc-grey-100: #2a2a2a;
    --wcmc-grey-200: #383838;
    --wcmc-grey-300: #505050;
    --wcmc-grey-400: #888888;
    --wcmc-grey-600: #aaaaaa;
    --wcmc-shadow:   0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
    --wcmc-shadow-sm:0 1px 4px rgba(0,0,0,0.3);
  }
}

@media (max-width: 480px) {
  .wcmc-panel {
    position: fixed;
    bottom:   0;
    left:     0 !important;
    right:    0;
    top:      auto;
    width:    100%;
    border-radius: var(--wcmc-radius-lg) var(--wcmc-radius-lg) 0 0;
    transform-origin: bottom center;
  }
  .wcmc-panel.is-open { transform: translateY(0); }
  .wcmc-panel:not(.is-open) { transform: translateY(100%); }
}