/**
 * BD Jela Thana Selector Pro — style.css
 *
 * Clean, responsive styles for the district / thana / union / postcode selector.
 * Uses BEM-style class names prefixed with "bdjts-" to avoid conflicts.
 *
 * @package BD_Jela_Thana_Selector_Pro
 * @version 1.0.0
 */

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
	--bdjts-primary:        #006A4E;   /* Bangladesh flag green */
	--bdjts-primary-light:  #e6f4ef;
	--bdjts-border:         #ced4da;
	--bdjts-border-focus:   #006A4E;
	--bdjts-bg:             #ffffff;
	--bdjts-bg-disabled:    #f8f9fa;
	--bdjts-text:           #212529;
	--bdjts-text-muted:     #6c757d;
	--bdjts-radius:         6px;
	--bdjts-shadow:         0 2px 8px rgba(0, 0, 0, 0.08);
	--bdjts-transition:     0.2s ease;
	--bdjts-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	                         "Helvetica Neue", Arial, sans-serif;
}

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.bdjts-wrapper {
	display:          flex;
	flex-wrap:        wrap;
	gap:              16px;
	padding:          24px;
	background:       var(--bdjts-bg);
	border:           1px solid var(--bdjts-border);
	border-radius:    var(--bdjts-radius);
	box-shadow:       var(--bdjts-shadow);
	font-family:      var(--bdjts-font);
	color:            var(--bdjts-text);
	box-sizing:       border-box;
	max-width:        900px;
}

/* ── Field Groups ───────────────────────────────────────────────────────────── */
.bdjts-field-group {
	display:          flex;
	flex-direction:   column;
	gap:              6px;
	flex:             1 1 200px;    /* grows/shrinks; wraps on small screens */
	min-width:        180px;
}

/* ── Labels ─────────────────────────────────────────────────────────────────── */
.bdjts-label {
	font-size:        0.85rem;
	font-weight:      600;
	color:            var(--bdjts-text);
	letter-spacing:   0.02em;
}

/* ── Select Dropdowns ───────────────────────────────────────────────────────── */
.bdjts-select {
	appearance:       none;
	-webkit-appearance: none;
	width:            100%;
	padding:          10px 36px 10px 12px;
	font-size:        0.9rem;
	font-family:      inherit;
	color:            var(--bdjts-text);
	background-color: var(--bdjts-bg);
	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='%23006A4E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 12px center;
	border:           1px solid var(--bdjts-border);
	border-radius:    var(--bdjts-radius);
	cursor:           pointer;
	transition:       border-color var(--bdjts-transition),
	                  box-shadow   var(--bdjts-transition);
	box-sizing:       border-box;
}

.bdjts-select:focus {
	outline:          none;
	border-color:     var(--bdjts-border-focus);
	box-shadow:       0 0 0 3px rgba(0, 106, 78, 0.15);
}

.bdjts-select:disabled {
	background-color: var(--bdjts-bg-disabled);
	color:            var(--bdjts-text-muted);
	cursor:           not-allowed;
	opacity:          0.7;
}

/* ── Text Input (Postcode) ──────────────────────────────────────────────────── */
.bdjts-input {
	width:            100%;
	padding:          10px 12px;
	font-size:        0.9rem;
	font-family:      inherit;
	color:            var(--bdjts-text);
	background-color: var(--bdjts-bg-disabled);
	border:           1px solid var(--bdjts-border);
	border-radius:    var(--bdjts-radius);
	cursor:           default;
	box-sizing:       border-box;
	transition:       border-color var(--bdjts-transition);
}

.bdjts-input[readonly] {
	background-color: var(--bdjts-primary-light);
	border-color:     var(--bdjts-primary);
	font-weight:      600;
	letter-spacing:   0.05em;
}

.bdjts-input::placeholder {
	color:            var(--bdjts-text-muted);
	font-weight:      400;
	font-size:        0.82rem;
}

/* ── WooCommerce Section ────────────────────────────────────────────────────── */
.bdjts-woocommerce-section {
	margin-top:       24px;
	padding-top:      20px;
	border-top:       1px solid var(--bdjts-border);
}

.bdjts-woocommerce-section h3 {
	margin:           0 0 16px;
	font-size:        1rem;
	font-weight:      600;
	color:            var(--bdjts-primary);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.bdjts-wrapper {
		flex-direction:  column;
		padding:         16px;
	}

	.bdjts-field-group {
		flex:            1 1 100%;
		min-width:       100%;
	}
}

/* ── Loading state (applied via JS while fetching data) ─────────────────────── */
.bdjts-wrapper.bdjts-loading .bdjts-select {
	opacity:          0.5;
	pointer-events:   none;
}