/**
 * 환율 계산기 모달 스타일
 *
 * 이 파일은 widgets/dialog/currency-calculator.php 에서 사용됩니다.
 * 대부분 Bootstrap 5 클래스를 사용하며, 추가 커스텀 스타일이 필요한 경우 여기에 정의합니다.
 */

/* 환율 계산기 모달 헤더 */
.currency-calculator-header {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

/* 기준 통화 표시 영역 */
.currency-calculator-base {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}

.currency-calculator-base .currency-flag {
    font-size: 1.5rem;
}

.currency-calculator-base .currency-code {
    font-weight: 700;
    font-size: 1.25rem;
    margin-left: 0.5rem;
}

/* 금액 입력 필드 */
.currency-calculator-input .form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* 변환 결과 카드 */
.currency-calculator-result {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: none;
    border-radius: 0.5rem;
}

.currency-calculator-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: white;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.currency-calculator-result-item:last-child {
    margin-bottom: 0;
}

.currency-calculator-result-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0d6efd;
}

/* 환율 날짜 정보 */
.currency-calculator-rate-date {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: center;
    margin-top: 0.75rem;
}

/* 에러 메시지 애니메이션 */
.currency-calculator-error {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* 로딩 상태 */
.currency-calculator-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.currency-calculator-loading .spinner-border {
    width: 3rem;
    height: 3rem;
}