/**
 * Dynamic Dropdown Selector — Frontend Styles
 *
 * CSS custom properties (variables) are used throughout so you can
 * override the dropdown appearance from your theme or a Custom CSS block
 * without touching this file. Example:
 *
 *   .dds-dropdown-wrapper {
 *     --dds-select-bg:           #f9f9f9;
 *     --dds-select-border:       #0073aa;
 *     --dds-select-border-radius: 8px;
 *     --dds-select-font-size:    1.1rem;
 *   }
 *
 * @package DynamicDropdownSelector
 */

/* ── Design tokens ────────────────────────────────────────────────────── */
.dds-dropdown-wrapper {
	/* Dropdown colours */
	--dds-select-bg:             #ffffff;
	--dds-select-color:          #333333;
	--dds-select-border:         #cccccc;
	--dds-select-border-focus:   #4a90e2;
	--dds-select-border-hover:   #999999;
	--dds-select-shadow-focus:   rgba( 74, 144, 226, 0.25 );

	/* Dropdown shape */
	--dds-select-border-radius:  4px;
	--dds-select-border-width:   1px;
	--dds-select-font-size:      1rem;
	--dds-select-line-height:    1.5;
	--dds-select-padding-v:      10px;
	--dds-select-padding-h:      14px;
	--dds-select-arrow-size:     10px;

	/* Label */
	--dds-label-color:           inherit;
	--dds-label-font-size:       1rem;
	--dds-label-font-weight:     600;
	--dds-label-margin-bottom:   8px;

	/* Spacing */
	--dds-select-margin-bottom:  16px;
}

/* ── Wrapper ──────────────────────────────────────────────────────────── */
.dds-dropdown-wrapper {
	box-sizing: border-box;
	width: 100%;
}

.dds-dropdown-wrapper *,
.dds-dropdown-wrapper *::before,
.dds-dropdown-wrapper *::after {
	box-sizing: inherit;
}

/* ── Label ────────────────────────────────────────────────────────────── */
.dds-label {
	margin: 0 0 var( --dds-label-margin-bottom );
	font-size: var( --dds-label-font-size );
	font-weight: var( --dds-label-font-weight );
	color: var( --dds-label-color );
}

/* ── Select / Dropdown ────────────────────────────────────────────────── */
.dds-select {
	display: block;
	width: 100%;
	padding: var( --dds-select-padding-v ) calc( var( --dds-select-padding-h ) * 3 ) var( --dds-select-padding-v ) var( --dds-select-padding-h );
	margin-bottom: var( --dds-select-margin-bottom );
	font-size: var( --dds-select-font-size );
	line-height: var( --dds-select-line-height );
	color: var( --dds-select-color );
	background-color: var( --dds-select-bg );

	/* Custom arrow via inline SVG — works in all browsers including IE11 */
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555555' d='M6 8L0 0h12z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right var( --dds-select-padding-h ) center;
	background-size: var( --dds-select-arrow-size ) auto;

	border: var( --dds-select-border-width ) solid var( --dds-select-border );
	border-radius: var( --dds-select-border-radius );

	/* Remove native appearance to show custom arrow */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dds-select:hover {
	border-color: var( --dds-select-border-hover );
}

.dds-select:focus {
	outline: none;
	border-color: var( --dds-select-border-focus );
	box-shadow: 0 0 0 3px var( --dds-select-shadow-focus );
}

/* IE 11 — hide the native dropdown arrow */
.dds-select::-ms-expand {
	display: none;
}

/* ── Content wrapper ──────────────────────────────────────────────────── */
.dds-content-wrapper {
	position: relative;
}

/* All content blocks hidden by default — JS adds .dds-visible */
.dds-content-block {
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.dds-content-block.dds-visible {
	display: block;
	opacity: 1;
}

/* ── Admin-only hint (shown to Editors/Admins only) ───────────────────── */
.dds-admin-notice {
	padding: 8px 14px;
	background: #fff8e1;
	border-left: 4px solid #ffc107;
	font-size: 0.9rem;
	color: #555;
	margin: 4px 0;
}

/* ── Mobile — prevent iOS zoom on focus ───────────────────────────────── */
@media ( max-width: 480px ) {
	.dds-select {
		font-size: 16px;
	}
}

/* ── Lazy load states ─────────────────────────────────────────────────── */
.dds-lazy-placeholder {
	transition: opacity 0.3s ease;
}

.dds-lazy-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	color: #888;
	font-size: 0.9rem;
}

/* CSS spinner — no image required, works in all browsers */
.dds-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-top-color: #555;
	border-radius: 50%;
	animation: dds-spin 0.7s linear infinite;
	flex-shrink: 0;
}

@keyframes dds-spin {
	to { transform: rotate( 360deg ); }
}

/* ── Elementor editor preview ─────────────────────────────────────────── */
.dds-elementor-preview-wrapper {
	margin-top: 12px;
}

.dds-elementor-preview-content {
	margin-top: 6px;
	font-size: 0.9rem;
	color: #333;
}

/* Ensure content blocks are visible in editor preview (not hidden) */
.elementor-editor-active .dds-content-block {
	display: block;
	opacity: 1;
}