/**
 * CE Orders - 신청 위젯 최소 스타일.
 * 레이아웃/색상은 대부분 테마의 Tailwind 유틸리티 클래스로 처리하고,
 * 이 파일은 Tailwind 클래스만으로 표현하기 애매한 상태(로딩 스피너·트랜지션 등)만 담당한다.
 */

.ce-orders-apply-submit.is-loading {
    position: relative;
    color: transparent;
}

.ce-orders-apply-submit.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ce-orders-spin 0.7s linear infinite;
}

@keyframes ce-orders-spin {
    to { transform: rotate(360deg); }
}

/*
 * 2단계 체크아웃(주문 확인 → 입금자 정보 입력) 전환 시 페이드인 효과.
 * display:none → 보임으로 바뀌는 순간(= hidden 클래스 제거) 애니메이션이 자동으로
 * 다시 시작되므로, JS는 클래스만 토글하면 되고 별도 트리거가 필요 없다.
 */
.ce-orders-step {
    animation: ce-orders-step-fade-in 0.25s ease;
}

@keyframes ce-orders-step-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * 실시간 폴링(ce-orders-status-poll.js)으로 주문 상태가 바뀐 순간, 패널 전체에
 * 짧은 성공 색상 플래시를 줘서 "지금 막 갱신됐다"는 것을 시각적으로 알린다.
 */
.ce-orders-status-flash {
    animation: ce-orders-status-flash 1.4s ease;
}

@keyframes ce-orders-status-flash {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.35);
    }
    30% {
        box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.18);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
    }
}