/* Custom styles for survey */
.rating-button {
    @apply px-2 py-3 min-h-[52px] border-2 transition-all duration-200 touch-manipulation flex items-center justify-center;
    background-color: #D3D3D3 !important;
    border-color: #D3D3D3 !important;
    color: #333333 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    text-align: center !important;
    width: calc(20% - 6px) !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    margin: 3px !important;
    border-radius: 3px !important;
}

.rating-button:hover {
    background-color: #C0C0C0 !important;
    border-color: #C0C0C0 !important;
}

.rating-button.selected {
    background-color: #eb5e66 !important;
    border-color: #eb5e66 !important;
    color: white !important;
    font-weight: bold !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 8px rgba(235, 94, 102, 0.3) !important;
}

.radio-option {
    @apply w-full text-left border-2 border-gray-300 rounded-lg transition-all duration-200 hover:border-[#eb5e66] hover:bg-red-50 cursor-pointer text-base sm:text-lg min-h-[64px] touch-manipulation;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
    padding: 20px 0px 20px 24px !important;
}

.radio-option.selected {
    @apply border-[#eb5e66] bg-red-50 font-medium;
}

.radio-option input[type="radio"] {
    @apply hidden;
}

.radio-circle {
    @apply rounded-full border-2 border-gray-400 transition-all duration-200 relative;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

.radio-label {
    flex: 1 !important;
    line-height: 1.4;
    word-wrap: break-word;
}

.radio-option:hover .radio-circle {
    @apply border-[#eb5e66];
}

.radio-option.selected .radio-circle {
    @apply border-[#eb5e66] bg-[#eb5e66];
}

.radio-option.selected .radio-circle::after {
    content: '';
    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-white rounded-full;
}

.section {
    @apply hidden;
    display: none !important;
}

.section.active {
    @apply block;
    display: block !important;
}

textarea {
    @apply w-full px-4 py-3 rounded-lg focus:outline-none resize-none text-base bg-white;
    border: 1px solid #9CA3AF !important;
    transition: border-color 0.2s ease-in-out;
}

textarea:focus {
    border-color: #eb5e66 !important;
}

/* Scale styling */
.scale-container {
    @apply flex justify-between items-center gap-1 sm:gap-2 my-4 flex-wrap;
}

.scale-button {
    @apply w-12 h-12 sm:w-14 sm:h-14 rounded-full border-2 border-gray-300 hover:border-[#eb5e66] hover:bg-red-50 transition-all duration-200 font-semibold text-base sm:text-lg touch-manipulation bg-white;
}

.scale-button.selected {
    @apply border-[#eb5e66] bg-[#eb5e66] text-white shadow-lg transform scale-110;
}

/* Ensure touch targets meet minimum size */
button, .rating-button, .radio-option, .scale-button {
    -webkit-tap-highlight-color: transparent;
}

/* Additional radio button layout fixes */
.radio-option {
    box-sizing: border-box;
}

.radio-option .radio-circle,
.radio-option .radio-label {
    box-sizing: border-box;
}

/* Ensure radio buttons display inline properly */
label.radio-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    white-space: nowrap;
}

label.radio-option .radio-label {
    white-space: normal;
    overflow-wrap: break-word;
}

/* Add smooth transitions for selections */
.rating-button, .scale-button {
    transition: all 0.2s ease-in-out;
}

/* Add subtle animation on selection */
@keyframes selectPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.05); }
}

.rating-button.selected, .scale-button.selected {
    animation: selectPulse 0.3s ease-out;
}

/* Loading animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}