/**
 * Storzen Currency Switcher — Frontend Styles
 * Lightweight, theme-agnostic, accessible.
 */

/* -------------------------------------------------------------------------
   CSS Custom Properties
   --------------------------------------------------------------------- */
:root {
	--storzen-cs-font:        inherit;
	--storzen-cs-radius:      6px;
	--storzen-cs-border:      1px solid rgba(0, 0, 0, 0.15);
	--storzen-cs-bg:          #ffffff;
	--storzen-cs-bg-hover:    #f5f5f5;
	--storzen-cs-bg-active:   #f0f0f0;
	--storzen-cs-text:        inherit;
	--storzen-cs-shadow:      0 4px 12px rgba(0, 0, 0, 0.12);
	--storzen-cs-accent:      #2c6fcd;
	--storzen-cs-accent-text: #ffffff;
	--storzen-cs-z-index:     999;
	--storzen-cs-transition:  0.18s ease;
}

/* -------------------------------------------------------------------------
   Base wrapper
   --------------------------------------------------------------------- */
.storzen-cs-switcher {
	display:     inline-block;
	position:    relative;
	font-family: var(--storzen-cs-font);
	font-size:   0.9em;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Dropdown style
   --------------------------------------------------------------------- */
.storzen-cs-dropdown-wrap {
	position: relative;
	display:  inline-block;
}

.storzen-cs-trigger {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         8px 12px;
	background:      var(--storzen-cs-bg);
	border:          var(--storzen-cs-border);
	border-radius:   var(--storzen-cs-radius);
	cursor:          pointer;
	font-family:     var(--storzen-cs-font);
	font-size:       1em;
	color:           var(--storzen-cs-text);
	white-space:     nowrap;
	transition:      background var(--storzen-cs-transition),
	                 border-color var(--storzen-cs-transition);
	-webkit-user-select: none;
	user-select:     none;
}

.storzen-cs-trigger:hover,
.storzen-cs-trigger:focus-visible {
	background:    var(--storzen-cs-bg-hover);
	border-color:  rgba(0, 0, 0, 0.28);
	outline:       none;
}

.storzen-cs-trigger:focus-visible {
	box-shadow: 0 0 0 2px var(--storzen-cs-accent);
}

.storzen-cs-arrow {
	font-size:  0.65em;
	opacity:    0.55;
	transition: transform var(--storzen-cs-transition);
}

.storzen-cs-trigger[aria-expanded="true"] .storzen-cs-arrow {
	transform: rotate(180deg);
}

/* Dropdown list */
.storzen-cs-dropdown-list {
	position:         absolute;
	top:              calc(100% + 4px);
	left:             0;
	z-index:          var(--storzen-cs-z-index);
	min-width:        140px;
	max-height:       260px;
	overflow-y:       auto;
	margin:           0;
	padding:          4px 0;
	list-style:       none;
	background:       var(--storzen-cs-bg);
	border:           var(--storzen-cs-border);
	border-radius:    var(--storzen-cs-radius);
	box-shadow:       var(--storzen-cs-shadow);

	/* Hidden by default — shown via JS toggle. */
	opacity:          0;
	pointer-events:   none;
	transform:        translateY(-6px);
	transition:       opacity var(--storzen-cs-transition),
	                  transform var(--storzen-cs-transition);
}

.storzen-cs-dropdown-list.is-open {
	opacity:        1;
	pointer-events: auto;
	transform:      translateY(0);
}

.storzen-cs-option {
	display:     flex;
	align-items: center;
	gap:         8px;
	padding:     8px 14px;
	cursor:      pointer;
	white-space: nowrap;
	transition:  background var(--storzen-cs-transition);
}

.storzen-cs-option:hover,
.storzen-cs-option:focus {
	background: var(--storzen-cs-bg-hover);
	outline:    none;
}

.storzen-cs-option.is-active {
	background:  var(--storzen-cs-bg-active);
	font-weight: 600;
}

.storzen-cs-option.is-active::after {
	content:    "✓";
	margin-left: auto;
	font-size:   0.8em;
	color:       var(--storzen-cs-accent);
}

/* -------------------------------------------------------------------------
   Buttons style
   --------------------------------------------------------------------- */
.storzen-cs-buttons-wrap {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
}

.storzen-cs-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	padding:       6px 12px;
	background:    var(--storzen-cs-bg);
	border:        var(--storzen-cs-border);
	border-radius: var(--storzen-cs-radius);
	cursor:        pointer;
	font-family:   var(--storzen-cs-font);
	font-size:     0.875em;
	color:         var(--storzen-cs-text);
	transition:    background var(--storzen-cs-transition),
	               border-color var(--storzen-cs-transition),
	               color var(--storzen-cs-transition);
}

.storzen-cs-btn:hover,
.storzen-cs-btn:focus-visible {
	background:   var(--storzen-cs-bg-hover);
	border-color: rgba(0, 0, 0, 0.28);
	outline:      none;
}

.storzen-cs-btn:focus-visible {
	box-shadow: 0 0 0 2px var(--storzen-cs-accent);
}

.storzen-cs-btn.is-active {
	background:   var(--storzen-cs-accent);
	border-color: var(--storzen-cs-accent);
	color:        var(--storzen-cs-accent-text);
	font-weight:  600;
}

/* -------------------------------------------------------------------------
   Select style
   --------------------------------------------------------------------- */
.storzen-cs-select-field {
	padding:       8px 32px 8px 10px;
	background:    var(--storzen-cs-bg);
	border:        var(--storzen-cs-border);
	border-radius: var(--storzen-cs-radius);
	font-family:   var(--storzen-cs-font);
	font-size:     1em;
	color:         var(--storzen-cs-text);
	cursor:        pointer;
	appearance:    auto;
	max-width:     100%;
	transition:    border-color var(--storzen-cs-transition);
}

.storzen-cs-select-field:hover {
	border-color: rgba(0, 0, 0, 0.28);
}

.storzen-cs-select-field:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 2px var(--storzen-cs-accent);
}

.storzen-cs-switcher.is-loading .storzen-cs-select-field {
	opacity:        0.6;
	pointer-events: none;
	cursor:         wait;
}

/* -------------------------------------------------------------------------
   Flag + label
   --------------------------------------------------------------------- */
.storzen-cs-flag {
	font-size:      1.15em;
	line-height:    1;
	flex-shrink:    0;
}

.storzen-cs-label {
	display:     inline-flex;
	align-items: center;
	gap:         0.15em;
	line-height: 1;
}

/* Symbol — wrapped in <bdi> so RTL scripts (Arabic, Armenian, Hebrew, etc.)
   display in their natural visual direction.
   Wide-coverage font stack ensures glyphs render even when the theme font
   lacks Arabic / Armenian / other non-Latin code points. */
.storzen-cs-symbol {
	font-family: "Segoe UI", "Arial Unicode MS", "Noto Sans", "Noto Sans Arabic",
	             "Noto Sans Armenian", system-ui, sans-serif;
}

.storzen-cs-code {
	letter-spacing: 0.02em;
}

.storzen-cs-name {
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Loading state (while AJAX request is in-flight)
   --------------------------------------------------------------------- */
.storzen-cs-switcher.is-loading .storzen-cs-trigger,
.storzen-cs-switcher.is-loading .storzen-cs-btn {
	opacity:        0.6;
	pointer-events: none;
	cursor:         wait;
}

/* -------------------------------------------------------------------------
   Scrollbar styling for dropdown (minimal)
   --------------------------------------------------------------------- */
.storzen-cs-dropdown-list::-webkit-scrollbar {
	width: 4px;
}

.storzen-cs-dropdown-list::-webkit-scrollbar-track {
	background: transparent;
}

.storzen-cs-dropdown-list::-webkit-scrollbar-thumb {
	background:    rgba(0, 0, 0, 0.2);
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.storzen-cs-trigger,
	.storzen-cs-btn,
	.storzen-cs-option,
	.storzen-cs-dropdown-list,
	.storzen-cs-arrow {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
	.storzen-cs-dropdown-list {
		left:      auto;
		right:     0;
		min-width: 120px;
	}
}