/******************
    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
*/

/* Modern Survey UI Styling */

/* Question container with card design */
.group-container,
.group-outer-container,
.ls-group-container {
    margin-bottom: 24px !important;
    padding: 0px !important;
    transition: box-shadow 0.2s ease !important;
}

.ls-answers tbody .answertext {
  text-align: left;
  font-weight: 500;
  font-family: "Poppins" sans-serif !important;
  font-size:14px;
  line-height: 24px;
  color:#151619;
}

/* .group-container:hover,
.group-outer-container:hover,
.ls-group-container:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
} */

/* Question title styling */
.group-title,
.ls-group-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

/* Question description styling */
.group-description,
.ls-group-description {
    color: #6b7280 !important;
    font-size: 0.95rem !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
}

/* Answer container styling */
.answer-container,
.ls-answer-container {
    padding: 0 !important;
}

/* Modern checkbox styling */
.ls-answers .answer-item,
.answer-item {
    margin-bottom: 0px !important;
}

.ls-answers input[type="checkbox"],
.ls-answers input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 4px !important;
    margin-right: 12px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.ls-answers input[type="checkbox"]:checked,
.ls-answers input[type="radio"]:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

.ls-answers input[type="checkbox"]:hover,
.ls-answers input[type="radio"]:hover,
input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: #3b82f6 !important;
}

/* Answer label styling */
.ls-answers label,
.answer label {
    font-size: 0.95rem !important;
    color: #374151 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    padding: 0px 12px !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease !important;
}

.ls-answers label:hover,
.answer label:hover {
    background-color: #f9fafb !important;
}

/* Text input styling */
.ls-answers input[type="text"],
.ls-answers input[type="email"],
.ls-answers input[type="number"],
.ls-answers textarea,
.ls-answers select,
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    background-color: #ffffff !important;
}

.ls-answers input[type="text"]:focus,
.ls-answers input[type="email"]:focus,
.ls-answers input[type="number"]:focus,
.ls-answers textarea:focus,
.ls-answers select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Question container spacing */
.question-container,
.ls-question-container {
    margin-bottom: 20px !important;
    padding: 16px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #f3f4f6 !important;
}

/* Question text styling */
.ls-question-text,
.question-text {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    margin-bottom: 16px !important;
    line-height: 1.5 !important;
}

/* Help text styling */
.question-help-container,
.ls-questionhelp {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    margin-top: 8px !important;
    line-height: 1.4 !important;
}

/* Button styling */
.ls-clearaction,
.ls-clearall {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.ls-clearaction:hover,
.ls-clearall:hover {
    background-color: #e5e7eb !important;
    border-color: #9ca3af !important;
}

/* Bootstrap checkbox override */
.checkbox-item input[type="checkbox"],
.radio-item input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 4px !important;
    margin-right: 12px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.checkbox-item input[type="checkbox"]:checked,
.radio-item input[type="radio"]:checked {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

.checkbox-item input[type="checkbox"]:hover,
.radio-item input[type="radio"]:hover {
    border-color: #3b82f6 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .group-container,
    .group-outer-container,
    .ls-group-container {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    .group-title,
    .ls-group-title {
        font-size: 1.1rem !important;
    }

    .ls-answers label,
    .answer label {
        padding: 6px 8px !important;
    }
}