/**
 * Stimulus Controllers CSS
 *
 * Stimulus 컨트롤러에서 사용하는 스타일
 */

/* ====================================
   Star Rating Controller
   ==================================== */

/* 기본 별점/하트 스타일 (기존 스타일 보완) */
.star-rating label.active i {
    transition: all 0.15s ease;
}

.star-rating label:hover i {
    transform: scale(1.2);
}

/* ====================================
   Autocomplete Controller
   ==================================== */

.autocomplete-dropdown {
    position: absolute;
    z-index: 1050;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: -1px;
}

.autocomplete-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.autocomplete-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background-color: #e9ecef;
}

.autocomplete-item:not(:last-child) {
    border-bottom: 1px solid #f1f3f5;
}

/* 부모 요소에 relative 포지션 필요 */
[data-controller="autocomplete"] {
    position: relative;
}

/* ====================================
   Character Counter Controller
   ==================================== */

[data-controller="char-counter"] .text-warning {
    color: #e67700 !important;
}

[data-controller="char-counter"] .text-danger {
    color: #dc3545 !important;
    font-weight: 600;
}

/* ====================================
   Meal Type Controller
   ==================================== */

/* 자동 선택 시 하이라이트 애니메이션 */
@keyframes mealTypeSelected {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

[data-controller="meal-type"] .btn-check:checked + .btn {
    animation: mealTypeSelected 0.3s ease;
}

/* ====================================
   Toggle Controller
   ==================================== */

[data-controller="toggle"] [data-toggle-target="content"] {
    transition: opacity 0.2s ease, max-height 0.3s ease;
}

/* ====================================
   Alert Controller
   ==================================== */

[data-controller="alert"] {
    transition: opacity 0.15s ease;
}