/**
 * Veil Tokyo
 * WEB Reservation Page (page-booking.php)
 */

/* ==========================================================================
   0. PAGE SPECIFIC OVERRIDES & UTILITIES
   ========================================================================== */
/* 非表示ユーティリティの物理保証（詳細度競合の完全打破） */
.d-none,
.course-radio-card.d-none,
.last-call-alert-banner.d-none,
.form-success-box.d-none {
    display: none !important;
}

/* 予約ページ内では画面下部追従固定ボタン（.sticky-reserve）を非表示化 */
.booking-page-container ~ .sticky-reserve,
body.page-template-page-booking .sticky-reserve {
    display: none;
}

.border-left-accent {
    border-left: 4px solid var(--accent-gold);
}

.text-red-alert {
    color: var(--accent-red);
}

.justify-start {
    justify-content: flex-start;
}

.font-20 {
    font-size: 20px;
}

.font-28 {
    font-size: 28px;
}

/* ==========================================================================
   1. BOOKING PAGE CONTAINER & METHOD A/B SPLIT CARDS
   ========================================================================== */
.booking-page-container {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-32) var(--space-16) 120px;
    position: relative;
    z-index: 2;
}

.method-split-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
    margin-bottom: var(--space-40);
}

@media (max-width: 767px) {
    .method-split-grid {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }
}

.method-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-thin);
    border-radius: var(--radius-md);
    padding: var(--space-32);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.method-card.primary {
    border-color: var(--border-accent);
}

.method-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}

.method-tag {
    font-family: var(--font-en);
    font-size: 11px;
    color: var(--accent-gold);
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: var(--space-8);
    text-transform: uppercase;
}

.method-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: var(--space-12);
}

.method-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 24px;
    min-height: 48px;
}

.method-status-badge {
    color: #10B981;
    font-weight: 700;
    font-size: 12px;
    padding: var(--space-8) 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: flash-badge 1.5s infinite alternate;
}

/* ==========================================================================
   2. LAST CALL AUTOMATIC ALERT BANNER (退勤直前割 リアルタイム検知)
   ========================================================================== */
.last-call-alert-banner {
    border: 1px solid var(--accent-red);
    background-color: var(--accent-red-light);
    padding: var(--space-20);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    text-align: left;
    margin-top: var(--space-24);
    margin-bottom: var(--space-24);
    animation: border-red-glow 1.5s infinite, frame-shake 0.5s infinite alternate;
}

.alert-banner-header {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    color: #FFB3B3;
    font-weight: 700;
    font-size: 15px;
}

.alert-banner-desc {
    font-size: 12px;
    color: var(--text-main);
    line-height: 20px;
}

/* ==========================================================================
   3. 15-STEP EFO BOOKING FORM BOX & INPUTS
   ========================================================================== */
.booking-form-box {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-thin);
    padding: var(--space-40);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
    position: relative;
}

@media (max-width: 767px) {
    .booking-form-box {
        padding: var(--space-20);
    }
}

.form-step-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-24);
    text-align: left;
}

.form-step-label {
    display: block;
    font-size: 14px;
    font-family: var(--font-jp);
    letter-spacing: 1px;
    color: var(--accent-gold);
    font-weight: 700;
}

.input-select-custom,
select.input-select-custom {
    width: 100%;
    height: 48px;
    background-color: var(--bg-base);
    border: 1px solid var(--border-thin);
    color: var(--text-main);
    padding: 0 var(--space-16);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23C29B53' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* ドロップダウンoptionのダークモード背景色・文字色固定 */
.input-select-custom option,
select.input-select-custom option {
    background-color: #0E1524;
    color: var(--text-main);
    padding: 12px 16px;
}

.input-select-custom.select-multiple {
    height: auto;
    min-height: 48px;
    padding: var(--space-8) var(--space-16);
    background-image: none;
}

.input-select-custom:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 12px var(--accent-gold-light);
}

.input-text-custom {
    width: 100%;
    height: 48px;
    background-color: var(--bg-base);
    border: 1px solid var(--border-thin);
    color: var(--text-main);
    padding: 0 var(--space-16);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.input-text-custom:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 12px var(--accent-gold-light);
}

.input-textarea-custom {
    width: 100%;
    min-height: 120px;
    background-color: var(--bg-base);
    border: 1px solid var(--border-thin);
    color: var(--text-main);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.input-textarea-custom:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 12px var(--accent-gold-light);
}

.btn-submit-large {
    height: 56px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* ==========================================================================
   3-1. NAME & HONORIFIC INLINE GROUP (お客様名 ＆ 敬称プルダウン一体型)
   ========================================================================== */
.name-honorific-group {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    width: 100%;
}

.name-honorific-group .input-text-custom {
    flex: 1;
    min-width: 0;
}

.input-honorific-select {
    width: 120px;
    min-width: 110px;
    flex-shrink: 0;
    height: 48px;
    background-color: var(--bg-base);
    border: 1px solid var(--border-accent);
    color: var(--accent-gold);
    font-weight: 700;
    padding: 0 var(--space-32) 0 var(--space-16);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23C29B53' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.input-honorific-select:focus,
.input-honorific-select:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 0 12px var(--accent-gold-light);
}

.input-honorific-select option {
    background-color: #0E1524;
    color: var(--text-main);
    padding: 10px 14px;
}

@media (max-width: 480px) {
    .name-honorific-group {
        gap: var(--space-8);
    }
    .input-honorific-select {
        width: 100px;
        min-width: 90px;
        padding: 0 var(--space-24) 0 var(--space-12);
        font-size: 13px;
    }
}

/* カリキュラム（コース）選択ラジオカード */
.course-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
    margin-top: var(--space-12);
}

@media (max-width: 767px) {
    .course-card-grid {
        grid-template-columns: 1fr;
    }
}

.course-radio-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px 24px;
    background-color: var(--bg-base);
    border: 1px solid var(--border-thin);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-sizing: border-box;
    min-height: 140px;
}

.course-radio-card:hover,
.course-radio-card.active {
    border-color: var(--accent-gold);
    box-shadow: 0 0 16px var(--accent-gold-light);
}

.course-radio-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    line-height: 1.4;
    margin-bottom: 8px;
}

.course-radio-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 22px;
    margin-top: 4px;
    margin-bottom: 12px;
}

.course-radio-price {
    font-family: var(--font-num);
    font-size: 20px;
    color: var(--accent-gold);
    font-weight: 700;
    margin-top: auto;
    letter-spacing: 1px;
}

/* ==========================================================================
   3-2. CAMPAIGN & PROMOTION CHECKBOX CARDS
   ========================================================================== */
.campaign-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
    margin-top: var(--space-8);
}

@media (max-width: 640px) {
    .campaign-checkbox-grid {
        grid-template-columns: 1fr;
    }
}

.campaign-check-card {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    background-color: var(--bg-base);
    border: 1px solid var(--border-thin);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.campaign-check-card:hover {
    border-color: var(--border-accent);
    background-color: var(--bg-surface-elevated);
}

.campaign-check-card:has(.campaign-check-input:checked) {
    border-color: var(--accent-gold);
    background-color: var(--accent-gold-light);
    box-shadow: 0 0 12px var(--accent-gold-light);
}

.campaign-check-input {
    accent-color: var(--accent-gold);
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.campaign-check-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.campaign-check-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 18px;
}

.campaign-check-discount {
    font-family: var(--font-num);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-gold);
}

/* ==========================================================================
   3-3. SERVICE STYLE CHECKBOX CARDS (接客スタイル複数選択カード)
   ========================================================================== */
.checkbox-option-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.checkbox-option-card {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    background-color: var(--bg-base);
    border: 1px solid var(--border-thin);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    font-size: 13px;
    color: var(--text-main);
    line-height: 20px;
}

.checkbox-option-card:hover {
    border-color: var(--border-accent);
    background-color: var(--bg-surface-elevated);
}

.checkbox-option-card:has(.checkbox-option-input:checked) {
    border-color: var(--accent-gold);
    background-color: var(--accent-gold-light);
    box-shadow: 0 0 10px var(--accent-gold-light);
    color: var(--accent-gold);
    font-weight: 700;
}

.checkbox-option-input {
    accent-color: var(--accent-gold);
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ==========================================================================
   3-4. PLAY ATTRIBUTES CHECKBOX GRID (ご希望プレイ属性複数選択グリッド)
   ========================================================================== */
.play-attributes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-8);
}

@media (max-width: 767px) {
    .play-attributes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.play-attribute-card {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: 10px 14px;
    background-color: var(--bg-base);
    border: 1px solid var(--border-thin);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    font-size: 13px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.play-attribute-card:hover {
    border-color: var(--border-accent);
    background-color: var(--bg-surface-elevated);
}

.play-attribute-card:has(.play-attribute-input:checked) {
    border-color: var(--accent-gold);
    background-color: var(--accent-gold-light);
    box-shadow: 0 0 10px var(--accent-gold-light);
    color: var(--accent-gold);
    font-weight: 700;
}

.play-attribute-input {
    accent-color: var(--accent-gold);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ==========================================================================
   4. INQUIRY FORM (SUB-CV) & POLICY ACCORDIONS
   ========================================================================== */
.sub-inquiry-section {
    margin-top: var(--space-64);
    padding-top: var(--space-48);
    border-top: 1px solid var(--border-thin);
}

.policy-accordion-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin-top: var(--space-24);
}

.policy-accordion-item {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-thin);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.3s;
}

.policy-accordion-item:hover {
    border-color: var(--accent-gold);
}

.policy-accordion-header {
    width: 100%;
    padding: var(--space-20) var(--space-24);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--text-main);
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.policy-accordion-header:hover {
    background-color: var(--accent-gold-light);
}

.policy-accordion-content {
    display: none;
    padding: var(--space-20) var(--space-24);
    border-top: 1px solid var(--border-thin);
    background-color: var(--bg-base);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 24px;
}

.policy-accordion-content.active {
    display: block;
}

.form-success-box {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid #10B981;
    color: #10B981;
    padding: var(--space-24);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    margin-top: var(--space-24);
}