/* =====================================================
   鳴白用 注文ステータスの見える化 - フロントエンドスタイル
   管理画面テーマ（黒背景×金色）に完全統一
   ===================================================== */

:root {
    --nkhos-gold:        #C9A84C;
    --nkhos-gold-light:  #E2C97E;
    --nkhos-gold-dark:   #9A7A2E;
    --nkhos-gold-muted:  rgba(201, 168, 76, 0.15);
    --nkhos-gold-border: rgba(201, 168, 76, 0.3);
    --nkhos-bg-deep:     #0D0D0D;
    --nkhos-bg-card:     #151515;
    --nkhos-bg-row:      #1A1A1A;
    --nkhos-text:        #E8E0D0;
    --nkhos-text-muted:  #7A7060;
    --nkhos-border:      #2A2520;
    --nkhos-radius:      6px;
    --nkhos-shadow:      0 4px 24px rgba(0,0,0,0.6);
}

/* =====================================================
   ステータスカード全体
   ===================================================== */
.nkhos-status-wrap {
    background: linear-gradient(135deg, #0D0D0D 0%, #1A1508 50%, #0D0D0D 100%);
    border: 1px solid var(--nkhos-gold-border);
    border-radius: var(--nkhos-radius);
    padding: 28px 32px;
    margin: 0 0 28px;
    box-shadow: var(--nkhos-shadow), inset 0 1px 0 rgba(201,168,76,0.2);
    position: relative;
    overflow: hidden;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    color: var(--nkhos-text);
}

.nkhos-status-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--nkhos-gold), transparent);
}

/* =====================================================
   ヘッダー行
   ===================================================== */
.nkhos-status-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nkhos-border);
}

.nkhos-status-heading {
    font-size: 13px;
    font-weight: 600;
    color: var(--nkhos-gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nkhos-order-ref {
    margin-left: auto;
    font-size: 11px;
    color: var(--nkhos-text-muted);
    letter-spacing: 0.05em;
    background: var(--nkhos-gold-muted);
    border: 1px solid var(--nkhos-gold-border);
    padding: 2px 10px;
    border-radius: 20px;
}

.nkhos-icon {
    width: 16px;
    height: 16px;
    color: var(--nkhos-gold);
    flex-shrink: 0;
}

.nkhos-icon-sm {
    width: 12px;
    height: 12px;
    color: var(--nkhos-text-muted);
    flex-shrink: 0;
}

/* =====================================================
   商品名エリア
   ===================================================== */
.nkhos-product-list {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(201, 168, 76, 0.06);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: var(--nkhos-radius);
    margin-bottom: 20px;
}

.nkhos-product-list .nkhos-icon-sm {
    color: var(--nkhos-gold);
    flex-shrink: 0;
    margin-top: 2px;
}

.nkhos-product-names {
    font-size: 12px;
    color: var(--nkhos-text);
    line-height: 1.6;
    letter-spacing: 0.02em;
}

.nkhos-product-sep {
    color: var(--nkhos-text-muted);
    margin: 0 4px;
    font-size: 11px;
}

/* =====================================================
   プログレスバー
   ===================================================== */
.nkhos-progress-track {
    height: 2px;
    background: var(--nkhos-border);
    border-radius: 99px;
    margin-bottom: 28px;
    overflow: hidden;
    position: relative;
}

.nkhos-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--nkhos-gold-dark), var(--nkhos-gold), var(--nkhos-gold-light));
    border-radius: 99px;
    transition: width 0.6s ease;
    box-shadow: 0 0 6px rgba(201,168,76,0.5);
}

/* =====================================================
   ステップリスト
   ===================================================== */
.nkhos-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
}

.nkhos-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

.nkhos-step-connector {
    flex: 0 0 auto;
    width: 40px;
    height: 1px;
    background: var(--nkhos-border);
    margin-top: 18px;
    transition: background 0.3s;
}

.nkhos-step-connector.done {
    background: var(--nkhos-gold);
    box-shadow: 0 0 4px rgba(201,168,76,0.4);
}

/* =====================================================
   ステップアイコン
   ===================================================== */
.nkhos-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    margin-bottom: 10px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.nkhos-step-icon svg {
    width: 16px;
    height: 16px;
}

.nkhos-step--done .nkhos-step-icon {
    background: linear-gradient(135deg, var(--nkhos-gold-dark), var(--nkhos-gold));
    border-color: var(--nkhos-gold);
    color: #0D0D0D;
    box-shadow: 0 0 10px rgba(201,168,76,0.35);
}

.nkhos-step--current .nkhos-step-icon {
    background: var(--nkhos-gold-muted);
    border-color: var(--nkhos-gold);
    color: var(--nkhos-gold-light);
    box-shadow: 0 0 14px rgba(201,168,76,0.35), inset 0 0 8px rgba(201,168,76,0.1);
    animation: nkhos-pulse 2s ease-in-out infinite;
}

.nkhos-step--pending .nkhos-step-icon {
    background: var(--nkhos-bg-deep);
    border-color: var(--nkhos-border);
    color: var(--nkhos-text-muted);
}

@keyframes nkhos-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(201,168,76,0.35), inset 0 0 8px rgba(201,168,76,0.1); }
    50%       { box-shadow: 0 0 22px rgba(201,168,76,0.6), inset 0 0 12px rgba(201,168,76,0.2); }
}

/* =====================================================
   ステップテキスト
   ===================================================== */
.nkhos-step-body {
    text-align: center;
    padding: 0 4px;
}

.nkhos-step-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.4;
    margin-bottom: 5px;
}

.nkhos-step--done    .nkhos-step-label { color: var(--nkhos-gold); }
.nkhos-step--current .nkhos-step-label { color: var(--nkhos-gold-light); }
.nkhos-step--pending .nkhos-step-label { color: var(--nkhos-text-muted); }

/* 日付 — 視認性向上 */
.nkhos-step-date {
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    font-weight: 500;
}

.nkhos-step--done    .nkhos-step-date { color: #7A7060; }
.nkhos-step--current .nkhos-step-date { color: rgba(226, 201, 126, 0.95); }
.nkhos-step--pending .nkhos-step-date { color: #5C5448; }

/* =====================================================
   フッター
   ===================================================== */
.nkhos-status-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--nkhos-border);
    font-size: 11px;
    color: var(--nkhos-text-muted);
    letter-spacing: 0.03em;
}

/* =====================================================
   ショートコード - 空・ログイン誘導
   ===================================================== */
.nkhos-sc-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nkhos-sc-empty,
.nkhos-sc-login {
    background: var(--nkhos-bg-card);
    border: 1px solid var(--nkhos-gold-border);
    border-radius: var(--nkhos-radius);
    padding: 24px;
    text-align: center;
    color: var(--nkhos-text-muted);
    font-size: 13px;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', sans-serif;
    box-shadow: var(--nkhos-shadow);
}

.nkhos-sc-login a {
    color: var(--nkhos-gold);
    text-decoration: underline;
    transition: color 0.2s;
}

.nkhos-sc-login a:hover {
    color: var(--nkhos-gold-light);
}

/* =====================================================
   レスポンシブ（スマートフォン）
   ===================================================== */
@media (max-width: 600px) {
    .nkhos-status-wrap {
        padding: 20px 18px;
    }

    .nkhos-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .nkhos-step {
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
        flex: unset;
        padding: 8px 0;
    }

    .nkhos-step-icon {
        margin-bottom: 0;
        margin-right: 14px;
        flex-shrink: 0;
    }

    .nkhos-step-body {
        text-align: left;
        padding: 4px 0;
    }

    .nkhos-step-connector {
        width: 1px;
        height: 20px;
        margin: 0 0 0 17px;
    }

    .nkhos-status-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .nkhos-order-ref {
        margin-left: 0;
    }

    .nkhos-product-list {
        padding: 8px 12px;
    }
}