/* ======================================== */
/* OPTIMIZELY FORMS - DYNAMIC MULTI-COLUMN */
/* ======================================== */

/* Main container for form elements */
.warranty-form-content {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important; /* Clearfix */
}

/* Row containers (created by our custom renderer) */
.warranty-form-content .row,
.warranty-form-content [class*="row-"] {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 -10px !important;
}

/* ============================================ */
/* DYNAMIC WRAPPER STYLING */
/* ============================================ */

/* All form element wrappers - inherit Bootstrap behavior */
.warranty-form-content .form-element-wrapper {
    padding: 0 10px !important; /* Spacing between elements */
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
    /* Let Bootstrap classes control the width dynamically */
}

/* ============================================ */
/* FORM ELEMENT STYLING (INSIDE WRAPPERS) */
/* ============================================ */

/* Style the actual form elements inside wrappers */
.warranty-form-content .form-element-wrapper .Form__Element {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out !important;
    width: 100% !important; /* Take full width of wrapper */
    padding: 15px !important;
}

/* Ensure inputs take full width of their container */
.warranty-form-content input,
.warranty-form-content select,
.warranty-form-content textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    color: #333 !important;
    background-color: #f9f9f9 !important;
}

/* Focus state for inputs */
.warranty-form-content input:focus,
.warranty-form-content select:focus,
.warranty-form-content textarea:focus {
    outline: none !important;
    border-color: #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
    background-color: #fff !important;
}

/* Labels */
.warranty-form-content label,
.warranty-form-content .Form__Element__Caption {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #555 !important;
    font-size: 0.95rem !important;
}

/* ============================================ */
/* PRODUCT INSTALLATIONS REPEATER STYLES        */
/* ============================================ */

/* Wrapper spacing */
.Form__Element__InstallationsRepeater {
    margin-bottom: 16px !important;
}

.Form__Element__InstallationsRepeater .repeater-rows {
    display: block !important;
}

/* Each dynamic row as a grid: Product | Model | Date | Remove */
.Form__Element__InstallationsRepeater [data-repeater-row] {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important; /* Product | Model | Remove */
    gap: 12px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
}

/* Date field spans full width beneath first row */
.Form__Element__InstallationsRepeater [data-repeater-row] .form-group:nth-child(3) {
    grid-column: 1 / span 2 !important;
}

.Form__Element__InstallationsRepeater [data-repeater-row] .form-group {
    margin: 0 !important;
}

/* Remove button as an icon button */
.Form__Element__InstallationsRepeater [data-repeater-remove] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    border-radius: 8px !important;
    color: #dc2626 !important;
    border: 1px solid transparent !important;
    padding: 0 !important;
}

.Form__Element__InstallationsRepeater [data-repeater-remove]:hover {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
}

.Form__Element__InstallationsRepeater [data-repeater-add] {
    margin-top: 8px !important;
}

/* Mobile stacking */
@media (max-width: 768px) {
    .Form__Element__InstallationsRepeater [data-repeater-row] {
        grid-template-columns: 1fr auto !important; /* fields then remove icon */
    }
    .Form__Element__InstallationsRepeater [data-repeater-row] .form-group:nth-child(3) {
        grid-column: 1 / span 1 !important;
    }
}

/* Buttons */
.warranty-form-content .FormSubmitButton button,
.warranty-form-content .FormSubmitButton input[type="submit"] {
    display: inline-block !important;
    padding: 12px 25px !important;
    background-color: #28a745 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease-in-out !important;
    margin-top: 10px !important;
}

.warranty-form-content .FormSubmitButton button:hover,
.warranty-form-content .FormSubmitButton input[type="submit"]:hover {
    background-color: #218838 !important;
}

/* ============================================ */
/* RESPONSIVE DESIGN */
/* ============================================ */

/* Mobile responsive - stack everything */
@media (max-width: 768px) {
    .warranty-form-content .form-element-wrapper {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}