/*
 * Moovit Form Plugin Custom CSS
 *
 * IMPORTANT: This file should be loaded AFTER the main plugin CSS (moovit-form-plugin.css)
 * to ensure custom overrides take effect. All selectors are written to maximize specificity.
 *
 * Responsive and RTL-friendly. 100% width rules apply to small screens only.
 */

/* General styles */

/*
 * Typography: force form elements to use the site's body font-family.
 * This ensures the plugin UI matches the site's typography regardless of
 * element-specific font rules coming from theme or component CSS.
 */
.moovit-form-container,
#moovit-form-root {
    /* inherit the page/body font family */
    font-family: inherit !important;
}

/* Ensure common form controls inherit the body font (inputs, selects, buttons, labels, textareas) */
.moovit-form-container input,
.moovit-form-container select,
.moovit-form-container textarea,
.moovit-form-container button,
.moovit-form-container label,
.moovit-form-container .form-control,
.moovit-form-container .form-select,
.moovit-form-container .btn,
.moovit-form-container .datetime-picker,
.moovit-form-container .places-autocomplete,
#moovit-form-root input,
#moovit-form-root select,
#moovit-form-root textarea,
#moovit-form-root button,
#moovit-form-root label,
#moovit-form-root .form-control,
#moovit-form-root .form-select,
#moovit-form-root .btn,
#moovit-form-root .datetime-picker,
#moovit-form-root .places-autocomplete,
#moovit-form-root .card-header,
.moovit-form-container .card-header,
#moovit-form-root h1,
.moovit-form-container h1,
#moovit-form-root h2,
.moovit-form-container h2,
#moovit-form-root h3,
.moovit-form-container h3,
#moovit-form-root h4,
.moovit-form-container h4,
#moovit-form-root h5,
.moovit-form-container h5,
#moovit-form-root h6,
.moovit-form-container h6 ,
.moovit-form-container .mb-0, 
#moovit-form-root .mb-0,
.moovit-form-container .mb-2, #moovit-form-root .mb-2,
.moovit-form-container .mb-4, #moovit-form-root .mb-4{
    font-family: inherit !important;
}

/* Keep existing settings tabs styles */
ul#moovitSettingsTabs {
    margin-bottom: -6px;
}
div#moovitSettingsTabsContent {
    border-style: solid !important;
    border-width: 1px !important;
}

/* RTL datetime picker fix */
[dir="rtl"] .moovit-form-container .datetime-picker {
    direction: ltr !important;
    text-align: left !important;
}

/* Hide button group buttons by default */
#moovit-form-root .btn-group button {
    display: none;
}

/* Button group border radius (LTR & RTL) */
.moovit-form-container .btn-group label:first-of-type,
#moovit-form-root .btn-group label:first-of-type {
    border-radius: 0 !important;
    border-top-left-radius: .5rem !important;
    border-bottom-left-radius: .5rem !important;
}
.moovit-form-container .btn-group label:last-of-type,
#moovit-form-root .btn-group label:last-of-type {
    border-radius: 0 !important;
    border-top-right-radius: .5rem !important;
    border-bottom-right-radius: .5rem !important;
}
[dir="rtl"] .moovit-form-container .btn-group label:last-of-type,
[dir="rtl"] #moovit-form-root .btn-group label:last-of-type {
    border-radius: 0 !important;
    border-top-left-radius: .5rem !important;
    border-bottom-left-radius: .5rem !important;
}
[dir="rtl"] .moovit-form-container .btn-group label:first-of-type,
[dir="rtl"] #moovit-form-root .btn-group label:first-of-type {
    border-radius: 0 !important;
    border-top-right-radius: .5rem !important;
    border-bottom-right-radius: .5rem !important;
}

/* Google Maps control image centering */
.moovit-form-container .gm-control-active img {
    -webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%,-50%) !important;
    transform: translate(-50%, -50%) !important;
    position: relative !important;
    top: 25%;
    left: 50%;
}

/* Theme color overrides for buttons */
[data-bs-theme="dark"] .moovit-form-container .btn-outline-light,
#moovit-form-root[data-bs-theme="dark"] .btn-outline-light {
    color: var(--bs-light)!important;
    border-color: var(--bs-light)!important;
    background: var(--bs-dark)!important;
}
[data-bs-theme="light"] .moovit-form-container .btn-outline-light,
#moovit-form-root[data-bs-theme="light"] .btn-outline-light {
    color: var(--bs-dark)!important;
    border-color: var(--bs-dark)!important;
    background: var(--bs-light)!important;
}

/* Disabled button style */
.moovit-form-container button[disabled] {
    opacity: 0.3;
}
.moovit-form-container button svg {
    transform: translate(0, 0.3rem);
}

/* Card header and version label */
.moovit-form-container .card-header {
    line-height: 3rem;
    display: block;
    height: 3rem;
    margin: 0;
    margin-top: -30px;
    font-weight: bold;
}
.version-moov {
    position: absolute;
    right: 0;
    top: auto;
    transform: translateY(-5rem) rotate(-90deg) !important;
    transform-origin: bottom right;
    font-size: 8px;
}
    #moovit-form-root .map-container {
        height: 300px !important;
        margin: 1rem 0px !important;
    }

[dir="rtl"] .moovit-form-container .pac-container,
[style*="direction: rtl"] .moovit-form-container .pac-container,
[dir="rtl"] .moovit-form-container .pac-container *,
[style*="direction: rtl"] .moovit-form-container .pac-container *,
[dir="rtl"] .moovit-form-container .pac-target-input,
[style*="direction: rtl"] .moovit-form-container .pac-target-input,
.pac-item {
    text-align: left !important;
    direction: ltr !important;
}


/*
 * MOBILE-ONLY: 100% width for fields and containers on small screens
 */
@media (max-width: 768px) {
    .moovit-form-container,
    #moovit-form-root.moovit-form-container,
    .moovit-form-container .field-container,
    #moovit-form-root .field-container {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* Ensure inputs inside take full width */
    .moovit-form-container .form-control:not(.number-input-container),
    .moovit-form-container .form-select:not(.number-input-container),
    .moovit-form-container input[type="text"]:not(.number-input-container),
    .moovit-form-container input[type="email"]:not(.number-input-container),
    .moovit-form-container input[type="tel"]:not(.number-input-container),
    .moovit-form-container input[type="number"]:not(.number-input-container),
    .moovit-form-container select,
    .moovit-form-container textarea {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/*
 * TABLET & DESKTOP OVERRIDES (min-width: 768px)
 * Add any layout changes for larger screens here
 */
@media (min-width: 768px) {
    
    /* Button group containers should be full width, but buttons inside should be regular size */
    .moovit-form-container .btn-group,
    .moovit-form-container .button-group,
    #moovit-form-root .btn-group,
    #moovit-form-root .button-group {
        width: 100% !important;
        display: flex;
        flex-wrap: wrap;
    }
    .moovit-form-container .btn-group .btn,
    .moovit-form-container .button-group .btn,
    #moovit-form-root .btn-group .btn,
    #moovit-form-root .button-group .btn {
        width: auto !important;
        flex: 0 0 auto;
        min-width: 80px;
        /* Adjust min-width as needed for your design */
    }
    .moovit-form-container .btn-group-lg > .btn,
    #moovit-form-root .btn-group-lg > .btn {
        font-size: medium;
    }
}