/**
 * 予約フロント共通パレット（:root）
 * メインアクセント rgb(255, 87, 54) = #ff5736
 * 土曜（青字）rgb(37, 99, 235)
 * 日曜（赤字）rgb(220, 38, 38)
 */
:root {
    /* 背景・紙面 */
    --rsv-sand: rgb(246, 241, 234);
    --rsv-cream: rgb(255, 253, 249);
    --rsv-ink: rgb(31, 27, 22);
    --rsv-muted: rgb(107, 95, 82);
    --rsv-line: rgb(230, 221, 210);

    /* アクセント・ボタン rgb(255, 87, 54) */
    --rsv-coral: rgb(255, 87, 54);
    --rsv-coral-soft: rgba(255, 87, 54, 0.14);

    /* 日曜（赤字）rgb(220, 38, 38) */
    --rsv-sun: rgb(220, 38, 38);
    --rsv-sun-muted: rgba(220, 38, 38, 0.45);

    /* 土曜（青字）rgb(37, 99, 235) */
    --rsv-sat: rgb(37, 99, 235);
    --rsv-sat-muted: rgba(37, 99, 235, 0.42);

    /* 強調・選択ハイライト rgb(212, 165, 116) 系 */
    --rsv-gold: rgb(212, 165, 116);
    --rsv-gold-soft: rgba(212, 165, 116, 0.24);

    /* 互換 */
    --rsv-cal-sat: var(--rsv-sat);

    /* 予約完了リード文：背景はグラデーションなしの単色（= --rsv-coral） */
    --rsv-thanks-success-bg: var(--rsv-coral);
    --rsv-thanks-success-ink: rgb(255, 255, 255);
    --rsv-thanks-success-border: rgba(0, 0, 0, 0.14);
    --rsv-thanks-success-glow: rgba(255, 87, 54, 0.35);
    /* シャイン演出用（rgba(var(--x), a) 形式） */
    --rsv-thanks-shine-rgb: 255, 255, 255;
}

/**
 * 予約完了画面「受付が完了しました…」ブロック
 */
.reserve-thanks-success {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.55;
    text-align: center;
    color: var(--rsv-thanks-success-ink);
    background: var(--rsv-thanks-success-bg);
    border: 1px solid var(--rsv-thanks-success-border);
    box-shadow: 0 4px 22px var(--rsv-thanks-success-glow);
}

.reserve-thanks-success::after {
    content: '';
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -45%;
    width: 44%;
    background: linear-gradient(
        115deg,
        rgba(var(--rsv-thanks-shine-rgb), 0) 0%,
        rgba(var(--rsv-thanks-shine-rgb), 0.07) 42%,
        rgba(var(--rsv-thanks-shine-rgb), 0.78) 49%,
        rgba(var(--rsv-thanks-shine-rgb), 0.88) 50%,
        rgba(var(--rsv-thanks-shine-rgb), 0.78) 51%,
        rgba(var(--rsv-thanks-shine-rgb), 0.07) 58%,
        rgba(var(--rsv-thanks-shine-rgb), 0) 100%
    );
    transform: translateX(0) skewX(-18deg);
    animation: rsv-thanks-shine-pass 1.35s ease-out 0.45s 1 both;
    pointer-events: none;
    mix-blend-mode: screen;
}

@keyframes rsv-thanks-shine-pass {
    0% {
        transform: translateX(0) skewX(-18deg);
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    100% {
        transform: translateX(520%) skewX(-18deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reserve-thanks-success::after {
        animation: none;
        opacity: 0;
    }
}