/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* ============================================
   Material Design 3 - Question Group Cards
   ============================================ */

/* Question Group Container - MD3 Card */
.question-container,
.ls-question-container,
.group-container {
    /* MD3 Surface Colors */
    background-color: #FFFFFF;

    /* MD3 Elevation Level 1 */
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15),
                0 1px 2px 0 rgba(0, 0, 0, 0.30);

    /* MD3 Shape - Medium rounded corners */
    border-radius: 12px;

    /* Spacing */
    padding: 20px;
    margin-bottom: 16px;

    /* Smooth transitions */
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Remove old border if present */
    border: none;

    /* Typography */
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* MD3 Hover State - Elevation Level 2 */
.question-container:hover,
.ls-question-container:hover,
.group-container:hover {
    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15),
                0 1px 2px 0 rgba(0, 0, 0, 0.30);

    /* Subtle lift effect */
    transform: translateY(-2px);
}

/* Question Group Header/Title */
.question-container h3,
.question-container .group-title,
.ls-question-container h3,
.group-container .group-name {
    /* MD3 Typography - Headline Small */
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0;

    /* MD3 Primary Color (customize as needed) */
    color: #1976D2;

    /* Spacing */
    margin-top: 0;
    margin-bottom: 16px;
    padding-bottom: 8px;

    /* MD3 Divider */
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Question Group Description */
.question-container .group-description,
.ls-question-container .group-description {
    /* MD3 Typography - Body Medium */
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;

    /* MD3 On Surface Variant */
    color: rgba(0, 0, 0, 0.60);

    /* Spacing */
    margin-bottom: 16px;
}

/* Individual Questions within Group */
.question-container .question-item,
.question-container .ls-question {
    /* Spacing between questions */
    margin-bottom: 12px;
    padding: 8px 0;
}

/* Question Text */
.question-container .question-text,
.question-container .ls-question-text {
    /* MD3 Typography - Body Large */
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;

    /* MD3 On Surface */
    color: rgba(0, 0, 0, 0.87);

    /* Spacing */
    margin-bottom: 8px;
}

/* MD3 Input Fields */
.question-container input[type="text"],
.question-container input[type="email"],
.question-container input[type="number"],
.question-container input[type="tel"],
.question-container textarea,
.question-container select {
    /* MD3 Outlined TextField */
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.38);
    border-radius: 4px;
    padding: 12px 16px;

    /* Typography */
    font-size: 16px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.87);

    /* Transitions */
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* MD3 Input Focus State */
.question-container input[type="text"]:focus,
.question-container input[type="email"]:focus,
.question-container input[type="number"]:focus,
.question-container input[type="tel"]:focus,
.question-container textarea:focus,
.question-container select:focus {
    outline: none;
    border-color: #1976D2;
    border-width: 2px;
    padding: 11px 15px; /* Adjust for thicker border */
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12);
}

/* MD3 Radio Buttons */
.question-container input[type="radio"] {
    /* Custom MD3 radio styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.60);
    border-radius: 50%;
    margin-right: 12px;

    /* Transitions */
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.question-container input[type="radio"]:checked {
    border-color: #1976D2;
    border-width: 6px;
    background-color: #FFFFFF;
}

.question-container input[type="radio"]:hover {
    border-color: #1976D2;
}

/* MD3 Checkboxes */
.question-container input[type="checkbox"] {
    /* Custom MD3 checkbox styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.60);
    border-radius: 2px;
    margin-right: 12px;
    position: relative;

    /* Transitions */
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.question-container input[type="checkbox"]:checked {
    background-color: #1976D2;
    border-color: #1976D2;
}

.question-container input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    top: -2px;
    left: 2px;
}

.question-container input[type="checkbox"]:hover {
    border-color: #1976D2;
}

/* MD3 Buttons */
.question-container button,
.question-container .btn,
.question-container input[type="submit"],
.question-container input[type="button"] {
    /* MD3 Filled Button */
    background-color: #1976D2;
    color: #FFFFFF;

    /* Shape */
    border-radius: 20px;
    border: none;

    /* Spacing */
    padding: 10px 24px;

    /* Typography */
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    text-transform: uppercase;

    /* Effects */
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    cursor: pointer;

    /* Transitions */
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* MD3 Button Hover */
.question-container button:hover,
.question-container .btn:hover,
.question-container input[type="submit"]:hover,
.question-container input[type="button"]:hover {
    background-color: #1565C0;
    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

/* MD3 Button Active/Pressed */
.question-container button:active,
.question-container .btn:active,
.question-container input[type="submit"]:active,
.question-container input[type="button"]:active {
    background-color: #0D47A1;
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    transform: translateY(0);
}

/* MD3 Secondary Button (Outlined) */
.question-container .btn-secondary,
.question-container .btn-outline {
    background-color: transparent;
    color: #1976D2;
    border: 1px solid #1976D2;
}

.question-container .btn-secondary:hover,
.question-container .btn-outline:hover {
    background-color: rgba(25, 118, 210, 0.08);
}

/* MD3 Dividers */
.question-container hr,
.question-container .divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin: 16px 0;
}

/* MD3 Error/Validation Messages */
.question-container .error,
.question-container .validation-error,
.question-container .alert-danger {
    /* MD3 Error Container */
    background-color: rgba(179, 38, 30, 0.08);
    border-left: 4px solid #B3261E;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 8px 0;

    /* Typography */
    color: #B3261E;
    font-size: 14px;
    line-height: 20px;
}

/* MD3 Success Messages */
.question-container .success,
.question-container .alert-success {
    /* MD3 Success Container */
    background-color: rgba(27, 94, 32, 0.08);
    border-left: 4px solid #1B5E20;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 8px 0;

    /* Typography */
    color: #1B5E20;
    font-size: 14px;
    line-height: 20px;
}

/* MD3 Info Messages */
.question-container .info,
.question-container .alert-info {
    /* MD3 Info Container */
    background-color: rgba(1, 87, 155, 0.08);
    border-left: 4px solid #01579B;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 8px 0;

    /* Typography */
    color: #01579B;
    font-size: 14px;
    line-height: 20px;
}

/* ============================================
   Responsive Adjustments for MD3 Cards
   ============================================ */

/* Mobile Optimization */
@media (max-width: 768px) {
    .question-container,
    .ls-question-container,
    .group-container {
        /* Reduce padding on mobile */
        padding: 16px;

        /* Smaller border radius */
        border-radius: 8px;

        /* Reduce margins */
        margin-bottom: 12px;
    }

    .question-container h3,
    .question-container .group-title {
        /* Smaller title on mobile */
        font-size: 20px;
        line-height: 28px;
    }
}

/* Tablet Optimization */
@media (min-width: 769px) and (max-width: 1024px) {
    .question-container,
    .ls-question-container,
    .group-container {
        /* Medium padding on tablet */
        padding: 18px;
    }
}

/* Desktop Optimization */
@media (min-width: 1025px) {
    .question-container,
    .ls-question-container,
    .group-container {
        /* Full padding on desktop */
        padding: 24px;
    }
}

/* ============================================
   Dark Mode Support (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {
    .question-container,
    .ls-question-container,
    .group-container {
        /* MD3 Surface Dark */
        background-color: #1E1E1E;

        /* Adjusted shadow for dark mode */
        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.30),
                    0 1px 2px 0 rgba(0, 0, 0, 0.40);
    }

    .question-container h3,
    .question-container .group-title {
        /* MD3 Primary Light */
        color: #90CAF9;
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    .question-container .question-text {
        /* MD3 On Surface Dark */
        color: rgba(255, 255, 255, 0.87);
    }

    .question-container input,
    .question-container textarea,
    .question-container select {
        background-color: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.38);
        color: rgba(255, 255, 255, 0.87);
    }
}

/* ============================================
   Print Optimization
   ============================================ */

@media print {
    .question-container,
    .ls-question-container,
    .group-container {
        /* Remove shadows for print */
        box-shadow: none;

        /* Add simple border for print */
        border: 1px solid #CCCCCC;

        /* Prevent page breaks inside cards */
        page-break-inside: avoid;
    }
}