/* ==========================================================================
   Get Quote Plugin Styles (v1.0)
   ========================================================================== */

/* --- Get Quote Button --- */
.get-quote-button {
    /* Стилизуй кнопку по дизайну сайта */
    /* Например: */
    /* background-color: #ffc107;
    color: #333;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s ease; */
}
/*
.get-quote-button:hover {
    background-color: #e0a800;
} */


/* --- Modal Overlay and Content --- */
.get-quote-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none; /* Initially hidden, JS adds 'active' */
    /* display: flex; Use flex for centering, but controlled by 'active' class */
    align-items: center;
    justify-content: center;
    z-index: 10000; /* High z-index */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* IMPORTANT: This rule makes the modal visible when active, includes user's !important */
.get-quote-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    display: flex !important; /* Ensure it displays as flex when active */
}

.get-quote-modal-content {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 5px;
    max-width: 600px; /* Adjust width as needed */
    width: 90%;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-height: 90vh; /* Limit height and enable scrolling */
    overflow-y: auto; /* Enable vertical scroll if content overflows */
}

.get-quote-modal-close {
    position: absolute !important;
    top: 10px;
    right: 15px;
    font-size: 2.5rem !important;
    line-height: 1;
    cursor: pointer;
    padding: 0 !important;
}


/* --- Form General Styles --- */
#get-quote-form .form-field {
    margin-bottom: 15px;
}




#get-quote-form textarea {
    min-height: 80px;
    resize: vertical; /* Allow vertical resizing */
}

/* --- Required Fields Styling (Fieldset + Legend) --- */
.required-fieldset {
    border: 1px solid #555; /* Dark grey border */
    padding: 5px 15px; /* Top padding larger for legend */
    margin: 0 0 20px 0; /* Reset default margins, add bottom margin */
    border-radius: 4px;
    position: relative;
}

.required-legend {
    /* Positioning and background for "overlapping" effect */
    display: inline-block; /* Make legend behave like an inline block */
    padding: 0 8px; /* Horizontal padding around text */
    margin-left: 10px; /* Small indent from the left edge */
    background-color: #fff; /* Same as modal background */
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
    /* Reset browser defaults */
    width: auto;
    float: none;
    line-height: 1; /* Adjust line height if needed */
}

/* Optional: Add span inside legend if more styling needed */
/* .required-legend span {} */

/* Flex container for fields inside the fieldset */
.fieldset-flex-wrapper {
    display: flex;
    flex-direction: row; /* Side-by-side layout */
    gap: 15px; /* Space between flex items (fields) */
}

/* Form fields specifically inside the required fieldset */
.required-fieldset .form-field {
    flex: 1; /* Each field takes equal space */
    min-width: 0; /* Prevent flex items from overflowing */
    margin-bottom: 0; /* Remove default bottom margin */
}


/* --- Product Info Block (Loaded via JS) --- */
.get-quote-product-info {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    display: flex; /* Use flex for image and text alignment */
    align-items: flex-start; /* Align items to the top */
    gap: 15px; /* Space between image and text block */
}
.get-quote-product-info img {
    flex-shrink: 0; /* Prevent image from shrinking */
    max-width: 80px; /* Control image size */
    height: auto;
}
.get-quote-product-info div { /* Text container */
    flex: 1; /* Take remaining space */
    min-width: 0; /* Prevent overflow */
}
.get-quote-product-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
}
.get-quote-product-info p {
    margin: 0 0 5px 0;
    font-size: 0.95em;
    color: #555;
}


/* --- Form Messages (Success/Error) --- */
.get-quote-form-messages div {
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    text-align: center;
    border: 1px solid transparent;
}
.get-quote-form-messages .success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}
.get-quote-form-messages .error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}


/* --- Loading Spinner --- */
.get-quote-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #333; /* Spinner color */
    animation: get-quote-spin 1s ease-in-out infinite;
    margin-left: 10px;
    vertical-align: middle;
}

@keyframes get-quote-spin {
    to { transform: rotate(360deg); }
}


/* --- Privacy Policy Notice --- */
.privacy-notice {
    margin-top: 15px;
    text-align: center;
	margin-bottom: 0;
}
.privacy-notice a {
    color: #555;
    text-decoration: underline;
}
.privacy-notice a:hover {
    text-decoration: none;
}


/* --- Dadata Suggestions Styling --- */
.suggestions-suggestions {
    z-index: 10001 !important; 
}

/* --- Phone Validation Error Highlight --- */
#get-quote-form input[type="tel"].invalid-phone {
    border-color: #dc3232 !important; 

}

/* --- Responsive Adjustments --- */
@media (max-width: 600px) { /* Adjust breakpoint as needed */

    .get-quote-modal-content {
        padding: 25px 20px; /* Reduce padding on smaller screens */
        max-height: 95vh; /* Allow slightly more height */
    }

    .fieldset-flex-wrapper {
        flex-direction: column; /* Stack fields vertically */
        gap: 0; /* Remove horizontal gap */
    }

    .required-fieldset .form-field {
        margin-bottom: 15px; /* Add back bottom margin when stacked */
    }
    /* Remove margin from the last field in the stacked layout */
    .required-fieldset .form-field:last-child {
        margin-bottom: 0;
    }

    #get-quote-form {
        font-size: 15px; /* Slightly adjust base font size if needed */
    }
}