/* =============================================================================
   WP Currency Converter – Frontend Widget Styles
   ============================================================================= */

/* --------------------------------------------------------------------------
   CSS Custom Properties (defaults; overridden by inline style on #wcc-widget)
   -------------------------------------------------------------------------- */
#wcc-widget {
	--wcc-bg:      #05264a;
	--wcc-text:    #ffffff;
	--wcc-accent:  #4caf50;
	--wcc-radius:  10px;
	--wcc-shadow:  0 4px 20px rgba(0, 0, 0, .35);
	--wcc-offset-x: 15px;
	--wcc-offset-y: 200px;
}

/* =============================================================================
   FLOATING WIDGET
   ============================================================================= */

#wcc-widget.wcc-style-floating {
	position: fixed;
	top:      var(--wcc-offset-y);
	z-index:  99999;
	display:  flex;
	align-items: flex-start;
}

#wcc-widget.wcc-style-floating.wcc-pos-right {
	right:           var(--wcc-offset-x);
	flex-direction:  row-reverse; /* panel opens to the left */
}

#wcc-widget.wcc-style-floating.wcc-pos-left {
	left:            var(--wcc-offset-x);
	flex-direction:  row;          /* panel opens to the right */
}

/* ----------------- Trigger tab ----------------- */

.wcc-trigger {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             5px;
	width:           42px;
	min-height:      70px;
	padding:         10px 6px;
	border:          1px solid rgba(255,255,255,.15);
	border-radius:   var(--wcc-radius);
	background:      #05264a;
	color:           var(--wcc-text);
	cursor:          pointer;
	box-shadow:      var(--wcc-shadow);
	transition:      background .15s, border-color .15s, opacity .15s;
	font-family:     inherit;
	line-height:     1;
	opacity:         1.0;
}
.wcc-trigger:hover,
.wcc-trigger:focus-visible {
	background:    linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)), #2d4a66;
	border-color:  rgba(255,255,255,.3);
	outline:       none;
}
.wcc-trigger.wcc-active {
	background:    linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)), #2d4a66;
	border-color:  rgba(255,255,255,.4);
	opacity:       1;
}


/*.wcc-trigger {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             5px;
	width:           42px;
	min-height:      70px;
	padding:         10px 6px;
	border:          none;
	border-radius:   var(--wcc-radius);
	background:      var(--wcc-bg);
	color:           var(--wcc-text);
	cursor:          pointer;
	box-shadow:      var(--wcc-shadow);
	transition:      background .2s, transform .15s;
	font-family:     inherit;
	line-height:     1;
}

.wcc-trigger:hover {
	filter: brightness(1.2);
}

.wcc-trigger:focus-visible {
	outline:        1px solid rgba(255,255,255,.15);
	outline-offset: 3px;
}*/

.wcc-trigger-icon {
	font-size:  18px;
}

.wcc-trigger-icon i {
	display:   block;
	transform: rotate(90deg);
	position:relative;
	left: 5px;
}

.wcc-trigger-label {
	font-size:   14px;
	font-weight: 700;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	letter-spacing: 1px;
}

/* Hide label on small screens to keep tab compact */
@media (max-width: 480px) {
	.wcc-trigger-label { display: none; }
	/* Admin option: show label on mobile too */
	.wcc-mobile-full .wcc-trigger-label { display: block; }
	.wcc-mobile-full .wcc-trigger { min-height: 90px; }
}

/* ----------------- Panel ----------------- */
.wcc-panel {
	display:        flex;
	flex-direction: column;
	gap:            10px;
	min-width:      220px;
	max-width:      280px;
	padding:        16px;
	background:     var(--wcc-bg);
	color:          var(--wcc-text);
	border-radius:  var(--wcc-radius);
	box-shadow:     var(--wcc-shadow);
	/* Animation */
	opacity:        0;
	transform:      scaleX(0);
	transform-origin: right center;
	transition:     opacity .2s, transform .2s;
	pointer-events: none;
}

/* When panel is part of a left-positioned widget, animate from left */
.wcc-pos-left .wcc-panel {
	transform-origin: left center;
}

/* Opened state (JS adds wcc-panel-open) */
.wcc-panel.wcc-panel-open {
	opacity:        1;
	transform:      scaleX(1);
	pointer-events: auto;
}

/* Hidden attribute — override with display flex when we add the open class */
.wcc-panel[hidden] {
	display: flex;
}
.wcc-panel:not(.wcc-panel-open) {
	visibility: hidden;
}

/* Spacing between trigger and panel */
.wcc-style-floating.wcc-pos-right .wcc-panel { margin-right: 6px; }
.wcc-style-floating.wcc-pos-left  .wcc-panel { margin-left:  6px; }

/* Panel header */
.wcc-panel-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.wcc-panel-title {
	font-size:   14px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.wcc-panel-close {
	background:   transparent;
	border:       none;
	color:        var(--wcc-text);
	font-size:    16px;
	line-height:  1;
	cursor:       pointer;
	padding:      2px 4px;
	border-radius: 4px;
	transition:   background .15s;
}

.wcc-panel-close:hover {
	background: rgba(255,255,255,.15);
}

/* Rate display */
.wcc-rate-display {
	background:    rgba(255,255,255,.1);
	border-radius: 6px;
	padding:       6px 10px;
	font-size:     13px;
	text-align:    center;
}

.wcc-rate-text { opacity: .9; }

/* Currency buttons list */
.wcc-currency-list {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.wcc-btn-symbol {
	font-size:   15px;
	font-weight: 700;
	min-width:   22px;
	text-align:  center;
}

.wcc-btn-name {
	font-size: 12px;
	opacity:   .9;
}

.wcc-currency-btn {
	display:         flex;
	align-items:     center;
	gap:             8px;
	width:           100%;
	padding:         8px 12px;
	background:      transparent;
	border:          1px solid rgba(255,255,255,.15);
	border-radius:   6px;
	color:           var(--wcc-text);
	font-family:     inherit;
	font-size:       13px;
	cursor:          pointer;
	text-align:      left;
	transition:      background .15s, border-color .15s;
	opacity:         0.5;
}
.wcc-currency-btn:hover,
.wcc-currency-btn:focus-visible {
	background:    rgba(255,255,255,.1);
	border-color:  rgba(255,255,255,.3);
	outline:       none;
}
.wcc-currency-btn.wcc-active {
	background:    rgba(255,255,255,.1);
	border-color:  rgba(255,255,255,.4);
	opacity:       1;
}

/* Disclaimer */
.wcc-disclaimer {
	font-size:  11px;
	opacity:    0.5;
	margin:     4px 0 0;
	line-height: 1.4;
	color: #ffffff;
}

/* =============================================================================
   BOTTOM BAR WIDGET
   ============================================================================= */

#wcc-widget.wcc-style-bottom-bar {
	position:        fixed;
	bottom:          0;
	left:            0;
	right:           0;
	z-index:         99999;
	background:      var(--wcc-bg);
	color:           var(--wcc-text);
	box-shadow:      0 -2px 12px rgba(0,0,0,.3);
}

.wcc-bar-inner {
	display:        flex;
	align-items:    center;
	flex-wrap:      wrap;
	gap:            10px 16px;
	max-width:      1200px;
	margin:         0 auto;
	padding:        10px 20px;
}

.wcc-bar-rate {
	font-size:   13px;
	opacity:     .85;
	white-space: nowrap;
}

.wcc-bar-label {
	font-size:   13px;
	font-weight: 600;
	white-space: nowrap;
}

.wcc-bar-buttons {
	display:    flex;
	flex-wrap:  wrap;
	gap:        6px;
}

/* Reuse .wcc-currency-btn but slightly smaller for the bar */
#wcc-widget.wcc-style-bottom-bar .wcc-currency-btn {
	padding:     5px 10px;
	font-size:   12px;
	border-radius: 4px;
}

/* =============================================================================
   Converted price span
   ============================================================================= */

.wcc-price {
	/* inherits surrounding styles; font-size set by JS from priceFontSize if provided */
	display: inline;
}

/* =============================================================================
   Responsive tweaks
   ============================================================================= */

@media (max-width: 600px) {
	.wcc-panel {
		min-width: 190px;
	}

	.wcc-bar-inner {
		padding: 8px 12px;
		gap:     6px 10px;
	}
}