/**
 * MyScooter Finder - Bar Variant Styling
 *
 * Glass morphism "bar" style for homepage hero placement.
 * Loaded conditionally when .mscf-bar wrapper is present.
 *
 * Structure mirrors the OBS Step Menu bar CSS used on thikishop.gr,
 * with mscf class names, MyScooter brand colors, and additional
 * WoodMart-specific overrides (WoodMart aggressively styles select
 * and button elements, requiring stronger resets than the original
 * OBS plugin needs).
 *
 * Class name mapping (OBS → mscf):
 *   dm3-stepmenu-bar        → .mscf-bar
 *   dm3-stepmenu-headline   → .mscf-bar-headline
 *   obs-stepmenu-container  → .mscf-container
 *   obs-stepmenu-header     → .mscf-header
 *   obs-progress-bar        → .mscf-progress-bar
 *   obs-field-indicator     → .mscf-field-indicator
 *   obs-field-label         → .mscf-field-label
 *   obs-stepmenu-row        → .mscf-row
 *   obs-fields-grid         → .mscf-fields-grid
 *   obs-field-wrapper       → .mscf-field-wrapper
 *   obs-field-content       → .mscf-field-content
 *   obs-dropdown            → .mscf-dropdown
 *   obs-stepmenu-submit     → .mscf-submit
 *   obs-stepmenu-btn        → .mscf-btn
 *
 * Brand color mapping (thikishop → myscooter):
 *   #667eea / #764ba2 gradient → #C41E3A / #A01830 (MyScooter red)
 *   #00D4AA → #0088FF → #667eea gradient line → #C41E3A → #ff6b35
 *
 * @since 1.0.0
 */

/* ============================================
   BAR CONTAINER + GLASS MORPHISM
   ============================================ */
.mscf-bar {
    background: rgb(26 26 46 / .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px 4vw;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Gradient accent line at bottom */
.mscf-bar::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #C41E3A 0%, #ff6b35 100%);
}

/* Headline above dropdowns */
.mscf-bar-headline {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
    text-align: center;
    letter-spacing: .5px;
    line-height: 1;
}

/* ============================================
   PLUGIN ELEMENT OVERRIDES (scoped to bar)
   ============================================ */

/* Full width container */
.mscf-bar .mscf-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide header, progress bar, step indicators */
.mscf-bar .mscf-header,
.mscf-bar .mscf-progress-bar,
.mscf-bar .mscf-field-indicator {
    display: none !important;
}

/* Labels: visually hidden but accessible to screen readers */
.mscf-bar .mscf-field-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Main row - horizontal flex layout */
.mscf-bar .mscf-row {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
}

/* Fields grid - horizontal, equal columns */
.mscf-bar .mscf-fields-grid {
    display: flex !important;
    gap: 16px !important;
    margin-top: 0 !important;
    grid-template-columns: unset !important;
    width: 100% !important;
}

/* Field wrapper - equal distribution */
.mscf-bar .mscf-field-wrapper {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/*
 * Fix 1 - Stable layout when wrappers are hidden:
 * The JS calls $wrapper.addClass('mscf-hidden') which sets display:none.
 * In a flex row this collapses the wrapper entirely, causing the remaining
 * two dropdowns to expand and fill the full width (jarring layout shift).
 * Override mscf-hidden inside the bar to use visibility:hidden + pointer-
 * events:none instead, so the wrapper still occupies its flex slot but is
 * invisible and non-interactive. The select inside remains disabled as well.
 */
.mscf-bar .mscf-field-wrapper.mscf-hidden {
    display: flex !important;   /* override display:none from base class */
    visibility: hidden !important;
    pointer-events: none !important;
}

.mscf-bar .mscf-field-content {
    padding-left: 0 !important;
}

/* ============================================
   DROPDOWN STYLING - dark glassmorphism
   ============================================ */

/*
 * WoodMart override note: WoodMart's base styles set appearance, border,
 * background and height on select elements. We need appearance: none to
 * prevent the native OS arrow from appearing alongside our custom SVG arrow,
 * and height: auto to avoid WoodMart's fixed height breaking the padding.
 */
.mscf-bar .mscf-dropdown,
.mscf-bar select.mscf-dropdown {
    background-color: rgb(255 255 255 / .1) !important;
    color: #fff !important;
    border: 1px solid rgb(255 255 255 / .15) !important;
    border-radius: 50px !important;
    padding: 14px 44px 14px 22px !important;
    font-size: 16px !important;
    width: 100% !important;
    height: auto !important;
    /* Custom white chevron arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
    /* Remove native OS appearance so the custom arrow is the only one shown */
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Dropdown options (expanded list) - dark text on white for readability */
.mscf-bar .mscf-dropdown option {
    color: #333 !important;
    background: #fff !important;
}

/* Hover state - subtle brightness increase on dark bar */
.mscf-bar .mscf-dropdown:hover:not(:disabled) {
    border-color: rgb(255 255 255 / .35) !important;
    background-color: rgb(255 255 255 / .15) !important;
}

/*
 * Fix 2 - Active state on dark bar:
 * The base CSS .mscf-active sets background-color:#fff9e6 (opaque cream).
 * On the dark bar the dropdown text is white, making it invisible against
 * the cream background. Override with a semi-transparent amber tint so the
 * dark bar background shows through and white text remains readable.
 */
.mscf-bar .mscf-dropdown.mscf-active,
.mscf-bar select.mscf-dropdown.mscf-active {
    border-color: #ffaa00 !important;
    background-color: rgba(255, 170, 0, 0.18) !important;
    box-shadow: 0 0 0 2px rgba(255, 170, 0, 0.3) !important;
    color: #fff !important;
    /* Keep the white chevron arrow (set by the main dropdown rule) */
}

/* Active + hover: slightly brighter tint */
.mscf-bar .mscf-dropdown.mscf-active:hover:not(:disabled),
.mscf-bar select.mscf-dropdown.mscf-active:hover:not(:disabled) {
    border-color: #ffaa00 !important;
    background-color: rgba(255, 170, 0, 0.28) !important;
    color: #fff !important;
}

/*
 * Fix 3 - Focus ring follows pill shape:
 *
 * There are two sources of the rectangular red outline on focus:
 *
 * a) select:focus — WoodMart adds a global outline on select:focus (a square
 *    outline that ignores border-radius). We suppress it with outline:none and
 *    rely on box-shadow, which correctly follows the element's border-radius.
 *    The double selector increases specificity to beat WoodMart's own rules.
 *
 * b) .mscf-focused on the parent div — The JS in myscooter-finder.js adds the
 *    class .mscf-focused to $(this).parent() (i.e. .mscf-field-content) when
 *    the select receives focus. The base CSS (.mscf-focused rule in
 *    myscooter-finder.css) sets `outline: 2px solid var(--mscf-primary)` on
 *    that div, which renders as a sharp rectangle because CSS outline does not
 *    follow a child element's border-radius. We override it to none inside the
 *    bar because the select's own box-shadow already provides the focus cue.
 */
.mscf-bar .mscf-dropdown:focus,
.mscf-bar select.mscf-dropdown:focus {
    outline: 0 !important;
    outline-style: none !important;
    border-color: #C41E3A !important;
    box-shadow: 0 0 0 2px rgba(196, 30, 58, 0.4) !important;
}

/* Suppress the rectangular outline that JS adds via .mscf-focused on the
   parent .mscf-field-content div. box-shadow on the select is sufficient. */
.mscf-bar .mscf-focused {
    outline: 0 !important;
    outline-style: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
}

/* Active + focused: amber ring instead of red */
.mscf-bar .mscf-dropdown.mscf-active:focus,
.mscf-bar select.mscf-dropdown.mscf-active:focus {
    outline: none !important;
    border-color: #ffaa00 !important;
    box-shadow: 0 0 0 2px rgba(255, 170, 0, 0.4) !important;
    color: #fff !important;
}

/*
 * Disabled state override: the base CSS sets disabled selects to a light
 * gray (#f8f8f8) background, which looks wrong on the dark bar. This keeps
 * disabled dropdowns visually consistent with the dark glassmorphism style.
 */
.mscf-bar .mscf-dropdown:disabled,
.mscf-bar select.mscf-dropdown:disabled {
    background-color: rgb(255 255 255 / .05) !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ============================================
   SUBMIT BUTTON
   ============================================ */

.mscf-bar .mscf-submit {
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}

/*
 * WoodMart override note: WoodMart resets buttons with its own background,
 * border-radius, padding and hover transforms. The double selector
 * (.mscf-bar .mscf-btn, .mscf-bar button.mscf-btn) increases specificity
 * to reliably beat WoodMart's button rules without needing inline styles.
 */
.mscf-bar .mscf-btn,
.mscf-bar button.mscf-btn {
    background: linear-gradient(135deg, #C41E3A 0%, #A01830 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    padding: 14px 40px !important;
    font-size: 16px !important;
    border: none !important;
    white-space: nowrap !important;
    /* WoodMart resets */
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
}

/* Hover state - deepen red, subtle lift */
.mscf-bar .mscf-btn:hover,
.mscf-bar button.mscf-btn:hover {
    background: linear-gradient(135deg, #A01830 0%, #801020 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.4) !important;
    color: #fff !important;
}

/* ============================================
   ERROR MESSAGE (dark bar variant)
   ============================================ */
.mscf-bar .mscf-error-message {
    color: #ff8a8a;
    background: rgba(220, 50, 50, 0.15);
}

/* ============================================
   MOBILE RESPONSIVE
   Breakpoint matches thikishop OBS bar: 768px
   (base plugin CSS uses 767px, bar uses 768px)
   ============================================ */
@media (max-width: 768px) {
    .mscf-bar-headline {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .mscf-bar {
        padding: 12px 10px;
    }

    /* Stack dropdowns and button vertically */
    .mscf-bar .mscf-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .mscf-bar .mscf-fields-grid {
        flex-direction: column !important;
    }

    .mscf-bar .mscf-field-wrapper {
        width: 100% !important;
    }

    /*
     * Pill → rounded rectangle on mobile (matches thikishop).
     * font-size: 16px is kept explicitly here to prevent iOS Safari
     * from zooming the page when a dropdown receives focus.
     */
    .mscf-bar .mscf-dropdown,
    .mscf-bar select.mscf-dropdown {
        border-radius: 12px !important;
        min-height: 48px !important;
        font-size: 16px !important;
    }

    .mscf-bar .mscf-btn,
    .mscf-bar button.mscf-btn {
        width: 100% !important;
        border-radius: 12px !important;
        min-height: 48px !important;
    }
}