/**
 * Currency Symbol CSS for Monthly Price Sliders
 * Adds THB symbol using ::before pseudo-element
 */

/* ============================================
   UNIVERSAL - Target elements marked by JavaScript
   ============================================ */

/* Primary selector: Elements marked by JavaScript */
.brikk-has-currency::before,
[data-brikk-currency="true"]::before {
    content: "฿";
    margin-right: 4px;
    font-weight: normal;
    display: inline-block;
}

/* Force display for all possible value containers */
.brikk-has-currency,
[data-brikk-currency="true"] {
    position: relative;
}

/* ============================================
   EXPLORE PAGE - Routiz Monthly Price Slider
   ============================================ */

/* CRITICAL: Target Routiz's range text element - this is what displays "60000" */
.rz-mod[data-field-id="monthly_price"] .rz-number-range-text,
.rz-number-type-range .rz-number-range-text {
    position: relative;
}

.rz-mod[data-field-id="monthly_price"] .rz-number-range-text::before,
.rz-number-type-range .rz-number-range-text::before {
    content: "฿";
    margin-right: 4px;
    font-weight: normal;
    display: inline-block;
}

/* Fallback: Target any .rz-number-range-text near monthly_price input */
input[name*="monthly_price"][type="range"] ~ .rz-number-range-text,
input[name*="monthly_price"][type="range"] + .rz-number-range-text {
    position: relative;
}

input[name*="monthly_price"][type="range"] ~ .rz-number-range-text::before,
input[name*="monthly_price"][type="range"] + .rz-number-range-text::before {
    content: "฿";
    margin-right: 4px;
    font-weight: normal;
    display: inline-block;
}

/* Target Routiz number/slider field with monthly_price field key */
.rz-mod[data-field-id="monthly_price"] .rz-value,
.rz-mod[data-field-id="monthly_price"] .rz-field-value,
.rz-mod[data-field-id="monthly_price"] .rz-number-value,
.rz-mod[data-field-id="monthly_price"] input[type="range"] + .rz-value,
.rz-mod[data-field-id="monthly_price"] .rz-slider-value,
.rz-mod[data-field-id="monthly_price"] output,
.rz-mod[data-field-id="monthly_price"] .rz-stepper-text {
    position: relative;
}

.rz-mod[data-field-id="monthly_price"] .rz-value::before,
.rz-mod[data-field-id="monthly_price"] .rz-field-value::before,
.rz-mod[data-field-id="monthly_price"] .rz-number-value::before,
.rz-mod[data-field-id="monthly_price"] input[type="range"] + .rz-value::before,
.rz-mod[data-field-id="monthly_price"] .rz-slider-value::before,
.rz-mod[data-field-id="monthly_price"] output::before,
.rz-mod[data-field-id="monthly_price"] .rz-stepper-text::before {
    content: "฿";
    margin-right: 4px;
    font-weight: normal;
    display: inline-block;
}

/* Alternative: Target by input name attribute */
input[name="monthly_price"] + .rz-value::before,
input[name="monthly_price"] + span::before,
.rz-mod:has(input[name="monthly_price"]) .rz-value::before {
    content: "฿";
    margin-right: 4px;
    font-weight: normal;
}

/* Target Routiz slider output/display element */
.rz-mod[data-field-id="monthly_price"] output,
.rz-mod[data-field-id="monthly_price"] .rz-output,
.rz-mod[data-field-id="monthly_price"] .rz-display-value {
    position: relative;
}

.rz-mod[data-field-id="monthly_price"] output::before,
.rz-mod[data-field-id="monthly_price"] .rz-output::before,
.rz-mod[data-field-id="monthly_price"] .rz-display-value::before {
    content: "฿";
    margin-right: 4px;
    font-weight: normal;
}

/* ============================================
   HOME PAGE - Custom Monthly Price Slider
   ============================================ */

/* Target home page slider by common class patterns */
.brikk-monthly-price-slider .rz-value::before,
.brikk-monthly-price-slider .rz-field-value::before,
.brikk-monthly-price-slider .rz-number-value::before,
.brikk-monthly-price-slider .rz-slider-value::before,
.brikk-monthly-price-slider output::before,
.brikk-monthly-price-slider .rz-output::before {
    content: "฿";
    margin-right: 4px;
    font-weight: normal;
}

/* Target by ID if slider has specific ID */
#monthly_price_slider .rz-value::before,
#monthly_price_slider output::before,
#monthly_price_slider + .rz-value::before {
    content: "฿";
    margin-right: 4px;
    font-weight: normal;
}

/* ============================================
   UNIVERSAL SELECTORS - Catch All Patterns
   ============================================ */

/* Target any element that displays monthly price value */
[data-field="monthly_price"] .rz-value::before,
[data-field="monthly_price"] output::before,
[data-field="monthly_price"] .rz-display-value::before {
    content: "฿";
    margin-right: 4px;
    font-weight: normal;
}

/* Target slider containers that contain monthly_price input */
.rz-mod:has(input[name*="monthly_price"]) .rz-value::before,
.rz-mod:has(input[name*="monthly_price"]) output::before,
.rz-mod:has(input[name*="monthly_price"]) .rz-display-value::before {
    content: "฿";
    margin-right: 4px;
    font-weight: normal;
}

/* ============================================
   FALLBACK - Direct Value Display Elements
   ============================================ */

/* If Routiz uses specific structure, target common patterns */
.rz-search-form [data-field-id="monthly_price"] .rz-value::before,
.rz-search-form [data-field-id="monthly_price"] output::before,
.rz-search-form input[name="monthly_price"] + .rz-value::before,
.rz-search-form input[name="monthly_price"] + output::before {
    content: "฿";
    margin-right: 4px;
    font-weight: normal;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    /* Ensure currency symbol displays correctly on mobile */
    .rz-mod[data-field-id="monthly_price"] .rz-value::before,
    .rz-mod[data-field-id="monthly_price"] output::before,
    .brikk-monthly-price-slider .rz-value::before,
    .brikk-monthly-price-slider output::before {
        margin-right: 3px;
        font-size: 0.9em;
    }
}