/* DevExtreme Scope CSS */

/*
 * This file creates a scoped environment for DevExtreme components
 * to prevent vendor.css from affecting the global layout
 */

/* Reset body styles to our preferred defaults */
body {
    color: inherit !important;
    background-color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    font-variant: inherit !important;
    font-kerning: inherit !important;
    font-optical-sizing: inherit !important;
    font-stretch: inherit !important;
    font-variation-settings: inherit !important;
    font-feature-settings: inherit !important;
    text-transform: inherit !important;
    text-decoration: inherit !important;
    text-align: inherit !important;
    text-indent: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    width: inherit !important;
    height: inherit !important;
    z-index: inherit !important;
    background-position: inherit !important;
    -webkit-background-size: inherit !important;
    -moz-background-size: inherit !important;
    -o-background-size: inherit !important;
    background-size: inherit !important;
}

/* Create a scoped container for DevExtreme components */
.devextreme-scope {
    /* Reset only what's needed inside this container */
    font-family: var(--base-font-family) !important;
    line-height: inherit !important;
    box-sizing: inherit !important;
}

/* Allow DevExtreme styles to only affect elements inside .devextreme-scope */
.devextreme-scope .dx-widget,
.devextreme-scope .dx-item,
.devextreme-scope .dx-button,
.devextreme-scope .dx-selectbox,
.devextreme-scope .dx-texteditor,
.devextreme-scope .dx-texteditor-input,
.devextreme-scope .dx-placeholder,
.devextreme-scope .dx-datagrid,
.devextreme-scope .dx-popup,
.devextreme-scope .dx-overlay,
.devextreme-scope .dx-loadpanel,
.devextreme-scope .dx-scrollable,
.devextreme-scope .dx-scrollview,
.devextreme-scope .dx-list {
    /* Keep DevExtreme styling for widgets inside the scope */
    font-family: var(--base-font-family) !important;
}

/* Ensure header and footer elements are not affected */
.container {
    width: inherit !important;
    padding-right: inherit !important;
    padding-left: inherit !important;
    margin-right: auto;
    margin-left: auto;
}

/* Ensure DevExtreme components don't affect layout outside their container */
body > *:not(.devextreme-scope),
body > *:not(.devextreme-scope) .dx-widget {
    /* Reset any DevExtreme styles that might leak to layout elements */
    font-family: inherit !important;
    line-height: inherit !important;
    box-sizing: inherit !important;
}

a:hover {
    text-decoration: inherit !important;
}

/* Ensure header and footer elements are not affected */
header,
footer,
nav,
.navbar,
.navbar-nav,
.nav-item,
.nav-link,
.dropdown-menu,
.dropdown-item {
    font-family: inherit !important;
    line-height: inherit !important;
    box-sizing: inherit !important;
}

/* Ensure menu items are not affected */
.menu-item,
.menu-link,
.sub-menu,
.main-menu,
.footer-menu,
.footer-widget {
    font-family: inherit !important;
    line-height: inherit !important;
}

/* Ensure specific layout components are protected */
.main-hero,
.slide-txt,
.news_slide-over-color,
.top-first-info,
.top-slide-info,
#parallaxTraining,
#atp-match,
#next-match,
.bbtxt-content,
#resultsPoint,
#parallax-info,
.bbtxt-content-subscription,
#news-section,
.top-product {
    font-family: inherit !important;
    line-height: inherit !important;
}

/* Custom styles for search panel */
.court-rent-search-panel {
    /*background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);*/
    background-color: #e0f7ec;
    border-radius: 40px;
    padding: 1.3rem;
    display: flex;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    /*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
    font-family: inherit !important;
}

.court-rent-search-panel .dx-field-location-form {
    flex: 1;
}

/* SelectBox styling */
.court-rent-search-panel .dx-selectbox {
    width: 100%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #1a1a1a;
    transition: all 0.3s ease;
}

.court-rent-search-panel .dx-selectbox:hover {
    border-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 1);
}

.court-rent-search-panel .dx-selectbox-container .dx-texteditor-input {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 1rem 1.5rem;
    font-family: inherit !important;
}

.court-rent-search-panel .dx-placeholder::before {
    font-family: inherit !important;
    color: #1a1a1a;
}

/* Button styling */
.search-button.dx-button {
    padding: 1rem 2.5rem;
    background-color: #3b82f6 !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
    font-family: inherit !important;
}

.search-button.dx-button:hover {
    background-color: #2563eb !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(59, 130, 246, 0.3);
}

.card-link + .card-link {
    margin-left : inherit !important;
}

/* DXFORM STYLE */
.dx-field-form {
    display: flex;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 15px;
    width: -webkit-fill-available;
}

.dx-field-location-form {
    display: inline-block;
}

.dx-placeholder {
    color: #1a1a1a;
    padding-left: 2.5rem;
}

/* DXBUTTON STYLE */
.buttons-column {
    width: auto;
    float: right;
    display: inline-block;
    height: 50px;
    text-align: center;
}

.buttons-column > .column-header {
    flex-grow: 0;
    width: 150px;
    height: 35px;
    font-size: 130%;
    opacity: 0.6;
    text-align: left;
    padding-left: 15px;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    .court-rent-search-panel {
        flex-direction: column;
        padding: 1.5rem;
        margin: 0 1rem;
    }
    
    .court-rent-search-panel .dx-selectbox-container .dx-texteditor-input {
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
    }
    
    .court-rent-search-panel .search-button.dx-button {
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: inherit !important;
        width: inherit !important;
        padding-right: inherit !important;
        padding-left: inherit !important;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (min-width: 1200px) {
    .container {
        /*max-width: inherit !important;*/
    }
}