/* Ticketta! 購入手続き（クーポン、お客様情報、予約確認、予約完了）。案A「静かな受付」。buyer.css の値を使う。 */
/* Standalone stylesheet; deliberately valid CSS as well as SCSS. */
/* 画面の構造と文言は変えず、ページ単位のクラス .tk-flow-page の中だけ見た目を整える。 */

.container.tk-flow-page {
    width: 100%;
    max-width: calc(720px + 2 * var(--space-16));
    min-width: 0;
    padding: var(--space-24) var(--space-16) 0;
    color: var(--text);
    font-family: var(--font-sans);
    text-align: left;
}

/* 進み具合の帯 */
.tk-flow-page .progress-container {
    margin: 0 0 var(--space-24);
}

.tk-flow-page .progress {
    height: 4px;
    margin: 0;
    border-radius: 0;
    background: var(--border-subtle);
    box-shadow: none;
}

.tk-flow-page .progress-bar {
    background: var(--action);
    box-shadow: none;
}

/* 見出しと本文 */
.tk-flow-page h3,
.tk-flow-page h4,
.tk-flow-page h5,
.tk-flow-page .card-title {
    margin: 0 0 var(--space-12);
    color: var(--text);
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

.tk-flow-page h3 {
    font-size: 24px;
    line-height: 1.4;
}

.tk-flow-page h4,
.tk-flow-page h4.card-title {
    font-size: 20px;
}

.tk-flow-page h5,
.tk-flow-page h5.card-title {
    font-size: 16px;
}

.tk-flow-page p {
    font-size: 16px;
    line-height: 1.7;
}

.tk-flow-page small {
    display: block;
    margin-top: var(--space-4);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.tk-flow-page a {
    color: var(--action);
}

.tk-flow-page a:hover {
    color: var(--action-hover);
}

/* カード: 影をやめ、枠線と面の差で区切る */
.tk-flow-page .row {
    margin-right: 0;
    margin-left: 0;
}

.tk-flow-page .row > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.tk-flow-page .card {
    width: 100%;
    margin: 0 0 var(--space-16);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
    color: var(--text);
    font-size: 16px;
}

.tk-flow-page .card .card {
    border-radius: var(--radius-sm);
    background: var(--surface-tint);
}

.tk-flow-page .card .card-header {
    margin: 0;
    padding: var(--space-16) var(--space-24) 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.tk-flow-page .card .card-body,
.tk-flow-page .card.card-body {
    padding: var(--space-16) var(--space-24) var(--space-24);
}

.tk-flow-page .card .card .card-header {
    padding: var(--space-12) var(--space-16) 0;
}

.tk-flow-page .card .card .card-body {
    padding: var(--space-8) var(--space-16) var(--space-16);
}

/* 入力欄 */
.tk-flow-page .form-group {
    margin: 0 0 var(--space-16);
    padding: 0;
}

.tk-flow-page .form-group label,
.tk-flow-page .form-group > p {
    position: static;
    display: block;
    margin: 0 0 var(--space-4);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    transform: none;
}

.tk-flow-page .form-group label small {
    font-weight: 400;
}

.tk-flow-page .form-control,
.tk-flow-page .is-focused .form-control {
    height: auto;
    min-height: var(--control-height);
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-sm);
    background: var(--surface);
    background-image: none;
    box-shadow: none;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
}

.tk-flow-page textarea.form-control {
    min-height: 96px;
}

.tk-flow-page .form-control:focus {
    border-color: var(--action);
    outline: var(--focus-width) solid var(--action);
    outline-offset: 0;
}

.tk-flow-page .form-control:disabled {
    background: var(--surface-tint);
}

/* チェックボックス: Material Kit の見た目を操作色にそろえる */
.tk-flow-page .form-check {
    margin: 0 0 var(--space-12);
    padding-left: 0;
}

.tk-flow-page .form-check .form-check-label {
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
}

.tk-flow-page .form-check .form-check-sign .check {
    border-color: var(--border-control);
    border-radius: 4px;
}

.tk-flow-page .form-check .form-check-input:checked + .form-check-sign .check {
    border-color: var(--action);
    background: var(--action);
}

.tk-flow-page .form-check .form-check-input:focus-visible + .form-check-sign .check {
    outline: var(--focus-width) solid var(--action);
    outline-offset: 2px;
}

/* ボタン */
.tk-flow-page .btn {
    min-height: var(--control-height);
    margin: var(--space-4) 0;
    padding: var(--space-8) var(--space-24);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: none;
    color: var(--action);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: none;
}

.tk-flow-page .btn:hover,
.tk-flow-page .btn:focus {
    background: var(--action-subtle);
    box-shadow: none;
    color: var(--action);
}

.tk-flow-page .btn.btn-primary {
    border-color: transparent;
    background: var(--action);
    color: var(--on-action);
}

.tk-flow-page .btn.btn-primary:hover,
.tk-flow-page .btn.btn-primary:focus {
    background: var(--action-hover);
    color: var(--on-action);
}

.tk-flow-page .btn.btn-primary:active {
    background: var(--action-pressed);
}

.tk-flow-page .btn:focus-visible {
    outline: var(--focus-width) solid var(--action);
    outline-offset: 2px;
}

.tk-flow-page .btn[disabled],
.tk-flow-page .btn.disabled {
    opacity: 0.5;
}

/* 丸い小ボタン（QR読み取り、説明）は元の大きさのまま色だけそろえる */
.tk-flow-page .btn.btn-fab {
    min-height: 0;
    padding: 0;
    border-radius: var(--radius-full);
}

/* お客様情報の「確認」は画面幅に合わせて大きく置く */
.tk-flow-page #personal-form > .submit,
.tk-flow-page #personal-form > input[type="submit"] {
    display: block;
    margin: var(--space-8) 0 0;
}

.tk-flow-page #personal-form input[type="submit"].btn {
    width: 100%;
    max-width: 360px;
}

/* 予約確認 */
.tk-flow-page .tk-flow-status {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0 0 var(--space-16);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-sm);
    background: var(--warning-bg);
    color: var(--warning-ink);
    font-size: 16px;
}

.tk-flow-page .tk-flow-status .orange {
    color: var(--warning-ink);
}

.tk-flow-page .card.confirmation {
    padding: var(--space-16) var(--space-24) var(--space-24);
    background: var(--surface);
}

.tk-flow-page .card.confirmation .field-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    width: 100%;
}

.tk-flow-page .card.confirmation .field-container div + div {
    margin-left: 0;
}

.tk-flow-page .card.confirmation table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.tk-flow-page .card.confirmation td {
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 16px;
    line-height: 1.6;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.tk-flow-page .card.confirmation td + td {
    padding-left: var(--space-16);
    text-align: right;
}

.tk-flow-page .card.confirmation table:not(.ticket) td:first-child {
    width: 40%;
    color: var(--text-muted);
    font-size: 14px;
}

.tk-flow-page .card.confirmation table:not(.ticket) td + td {
    text-align: left;
}

.tk-flow-page .card.confirmation .tk-flow-concert td {
    padding-top: var(--space-12);
    font-weight: 700;
}

.tk-flow-page .card.confirmation table.ticket tr:last-child td {
    border-bottom: 0;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tk-flow-page .card.confirmation table.ticket td + td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tk-flow-page .payment-btn {
    width: 100%;
}

/* 予約完了 */
.tk-flow-page .table {
    margin: 0 0 var(--space-12);
}

.tk-flow-page .table td {
    padding: var(--space-8) 0;
    border-top: 0;
    border-bottom: 1px solid var(--border-subtle);
}

/* 会員登録（入力と送信後）。.tk-signup-page の中だけ */
.tk-signup-page .row > .col-6 + .col-6 {
    padding-left: var(--space-16);
}

.tk-signup-page .card.card-body.tk-signup-agree {
    padding: 0;
    border: 0;
    background: none;
}

.tk-signup-agree h4 {
    margin: 0 0 var(--space-12);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

.tk-flow-page .tk-signup-agree .form-check {
    margin: 0 0 var(--space-8);
    padding: var(--space-8) var(--space-16);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.tk-signup-agree .form-check .form-check-label {
    display: block;
    min-height: 28px;
}

.tk-signup-page .submit .btn {
    width: 100%;
    max-width: 360px;
    min-height: 52px;
}

.tk-signup-page .tk-signup-sent {
    display: block;
    margin: 0 0 var(--space-16);
    padding: var(--space-16) var(--space-24);
    border-radius: var(--radius-md);
    background: var(--info-bg);
    color: var(--text);
}

.tk-signup-page .tk-signup-sent p {
    margin: 0;
}

.tk-signup-page .tk-signup-sent p:first-child {
    margin-bottom: var(--space-4);
    color: var(--info-ink);
    font-weight: 700;
}

.tk-signup-page .card .table td:first-child {
    width: 40%;
    color: var(--text-muted);
    font-size: 14px;
}

.tk-signup-page .card .table td + td {
    padding-left: var(--space-16);
    overflow-wrap: anywhere;
}

/* クーポンの適用（Application/apply_coupon.php） */
.tk-flow-page .tk-coupon h4 {
    margin-bottom: var(--space-16);
}

.tk-coupon-code-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

/* Material Kit が入力欄を span.bmd-form-group で包み、上に余白を付けるため打ち消す */
.tk-coupon-code-row > .bmd-form-group,
.tk-flow-page .tk-coupon-code-row > .form-control {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 320px;
    margin: 0;
    padding: 0;
}

.tk-flow-page .tk-coupon-code-row .bmd-form-group .form-control {
    width: 100%;
}

.tk-flow-page .tk-coupon-code-row .btn {
    flex: 0 0 auto;
    margin: 0;
}

.tk-coupon-help {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-control);
    border-radius: var(--radius-full);
    color: var(--action);
    font-size: 14px;
    cursor: help;
}

.tk-coupon-help:focus-visible {
    outline: var(--focus-width) solid var(--action);
    outline-offset: 2px;
}

.tk-flow-page .tk-coupon-error {
    display: block;
    margin-top: var(--space-8);
    color: var(--danger-ink);
    font-size: 14px;
    font-weight: 700;
}

.tk-coupon-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin-top: var(--space-16);
}

.tk-coupon-list:empty {
    display: none;
}

.tk-coupon-item {
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-tint);
}

.tk-coupon-title {
    display: block;
    width: 100%;
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

.tk-flow-page .tk-coupon-terms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: 0 0 var(--space-8);
}

.tk-coupon-terms span {
    padding: 2px var(--space-8);
    border-radius: var(--radius-full);
    background: var(--action-subtle);
    color: var(--action);
    font-size: 13px;
    font-weight: 700;
}

.tk-flow-page .tk-coupon-note {
    margin: 0 0 var(--space-8);
    color: var(--text-muted);
    font-size: 14px;
}

.tk-flow-page .tk-coupon-ticket {
    margin: 0;
    border-top: 1px solid var(--border-subtle);
}

.tk-flow-page .tk-coupon-ticket .form-check-label {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-12);
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-8) 0 var(--space-8) 32px;
}

.tk-flow-page .tk-coupon-ticket .tk-coupon-ticket-name,
.tk-flow-page .tk-coupon-ticket .tk-coupon-ticket-price {
    position: static;
    display: inline;
    color: var(--text);
}

.tk-flow-page .tk-coupon-ticket .tk-coupon-ticket-name {
    flex: 1 1 auto;
    font-weight: 700;
}

.tk-flow-page .tk-coupon-ticket .tk-coupon-ticket-price {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tk-flow-page .tk-coupon-ticket .tk-coupon-ticket-price small,
.tk-flow-page .tk-coupon-ticket .tk-coupon-ticket-price b {
    display: inline;
    margin: 0;
    color: inherit;
    font-size: 14px;
}

.tk-flow-page .tk-coupon-ticket .form-check-sign {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.tk-coupon-actions .submit .btn,
.tk-coupon-actions input[type="submit"].btn {
    width: 100%;
    max-width: 360px;
    min-height: 52px;
}

@media (min-width: 768px) {
    .tk-flow-page .row > .col-md-6 + .col-md-6 {
        padding-left: var(--space-16);
    }
}

@media (max-width: 767px) {
    .container.tk-flow-page {
        padding-top: var(--space-16);
    }

    .tk-flow-page .card .card-header {
        padding: var(--space-16) var(--space-16) 0;
    }

    .tk-flow-page .card .card-body,
    .tk-flow-page .card.card-body,
    .tk-flow-page .card.confirmation {
        padding: var(--space-12) var(--space-16) var(--space-16);
    }

    .tk-flow-page h3 {
        font-size: 20px;
    }

    .tk-flow-page h4,
    .tk-flow-page h4.card-title {
        font-size: 18px;
    }
}