/* ============================================
   カタログDLフォームページ専用スタイル
   ============================================ */

.dl-form-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* ───────── ダウンロード可能なカタログ プレビュー (リンクなし) ───────── */

.dl-form-catalog-preview {
    margin: 0 0 60px;
}

.dl-form-catalog-preview-title {
    text-align: center;
    font-size: 24px;
    margin: 0 0 28px;
    color: #101010;
}

.dl-form-catalog-preview-list {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.dl-form-catalog-preview-card {
    background: #fff;
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 12px;
    box-sizing: border-box;
}

.dl-form-catalog-preview-card-label {
    color: rgba(0, 0, 0, 0.5);
    font-size: 13px;
    text-align: center;
    width: 100%;
}

/* products-index-page-catalogs-links-link-content-row-company-name の色を継承
   font-size は preview用に上書き */
.dl-form-catalog-preview-card-name {
    font-size: 18px !important;
    margin: 6px 0 0;
    padding: 4px 8px;
    width: 100%;
}

/* 会社名のカラーリング (products-index-page.css と同色) */
.dl-form-catalog-preview-card .products-index-page-catalogs-links-link-content-row-company-name {
    text-align: center;
    font-weight: bold;
}
.dl-form-catalog-preview-card .products-index-page-catalogs-links-link-content-row-company-name.EVIDENT {
    background-color: rgb(16, 160, 219);
    color: #fff;
}
.dl-form-catalog-preview-card .products-index-page-catalogs-links-link-content-row-company-name.Nikon {
    background-color: rgb(255, 225, 0);
    color: rgba(0, 0, 0, 0.75);
}
.dl-form-catalog-preview-card .products-index-page-catalogs-links-link-content-row-company-name.Leica {
    background-color: rgb(255, 0, 1);
    color: #fff;
}
.dl-form-catalog-preview-card .products-index-page-catalogs-links-link-content-row-company-name.Zeiss {
    background-color: rgb(1, 32, 97);
    color: #fff;
}

/* ───────── ダウンロード手順 ───────── */

.dl-form-steps {
    margin-bottom: 60px;
}

.dl-form-steps-title {
    font-size: 28px;
    text-align: center;
    margin: 0 0 40px;
    color: #101010;
}

.dl-form-steps-list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 24px;
    counter-reset: dl-step-counter;
}

.dl-form-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    padding: 32px 20px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    position: relative;
    counter-increment: dl-step-counter;
}

/* ステップ番号 (01, 02, 03) */
.dl-form-step::before {
    content: counter(dl-step-counter, decimal-leading-zero);
    display: block;
    font-size: 22px;
    font-weight: bold;
    color: #283593;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

.dl-form-step-icon {
    width: 140px;
    height: 140px;
    object-fit: contain;
    margin-bottom: 20px;
}

.dl-form-step-text {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    margin: 0;
}

/* ───────── フォーム本体 (CF7出力対応) ───────── */

.dl-form-page-row {
    margin-top: 40px;
}

.dl-form-lead {
    text-align: center;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin: 0 0 40px;
}

/* ─── フォーム中央寄せ + 姓/名 横並び (Grid) ─── */
.dl-form-page-row .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    max-width: 640px;
    margin: 0 auto;
}

/* デフォルトは全カラム占有 (1行1項目) */
.dl-form-page-row .wpcf7-form > * {
    grid-column: 1 / -1;
}

/* 姓 → 左カラム / 名 → 右カラム */
.dl-form-page-row .wpcf7-form > p:has(.last-name) {
    grid-column: 1 / 2;
}
.dl-form-page-row .wpcf7-form > p:has(.first-name) {
    grid-column: 2 / 3;
}

/* CF7 が wpautop で <p> 自動ラップするため <p> 単位で間隔制御 */
.dl-form-page-row .wpcf7-form > p {
    margin: 0 0 20px;
}

.dl-form-page-row .wpcf7-form label {
    display: block;
    font-size: 14px;
    color: #101010;
    line-height: 1.6;
    margin: 0;
}

/* ラベル先頭の lang span (項目名) と入力の間を整える */
.dl-form-page-row .wpcf7-form label > .lang {
    display: inline-block;
    margin-bottom: 6px;
}

/* CF7の wpcf7-form-control-wrap (span) を block化して input をフル幅に */
.dl-form-page-row .wpcf7-form-control-wrap {
    display: block;
}

.dl-form-page-row .wpcf7-form input[type="text"],
.dl-form-page-row .wpcf7-form input[type="email"],
.dl-form-page-row .wpcf7-form input[type="tel"],
.dl-form-page-row .wpcf7-form select,
.dl-form-page-row .wpcf7-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-size: 15px;
    box-sizing: border-box;
    background: #fff;
    font-family: inherit;
}

.dl-form-page-row .wpcf7-form textarea {
    min-height: 100px;
    resize: vertical;
}

/* 「東海ヒットを知ったきっかけ」selectは文字幅に合わせる (全幅にしない) */
.dl-form-page-row .wpcf7-form select.dl-form-known-via {
    width: auto;
    max-width: 100%;
    padding-right: 32px; /* プルダウン矢印のスペース確保 */
}

/* 「その他」自由記入欄: labelが非表示時は親 <p> も連動して非表示 (余白も消す)
   ただし wpautop の都合で「きっかけ」selectが同じ <p> に入った場合は
   selectごと消えてしまうため、select を含む <p> は除外する */
.dl-form-page-row .wpcf7-form > p:has(> label.dl-form-known-via-other-item[style*="display:none"]):not(:has(select)),
.dl-form-page-row .wpcf7-form > p:has(> label.dl-form-known-via-other-item[style*="display: none"]):not(:has(select)) {
    display: none;
}

/* ───────── 興味のある製品 チェックボックスエリア ───────── */

/* CF7デフォルトの .wpcf7-list-item.first 左右マージンを削除 */
.dl-form-page-row .wpcf7-form .wpcf7-list-item.first {
    margin-left: 0;
    margin-right: 0;
}

/* 質問ラベル: 下に余白 (太字にはしない) */
.dl-form-page-row .wpcf7-form label.dl-form-label {
    margin-bottom: 12px;
    font-weight: normal;
}

/* チェックボックス群を縦並びに (項目ごとに改行) */
.dl-form-page-row .wpcf7-form-control-wrap.interested-products .wpcf7-checkbox {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 各項目の <label> : チェックボックスとテキストを横並び + 間隔確保 */
.dl-form-page-row .wpcf7-form-control-wrap.interested-products .wpcf7-list-item,
.dl-form-page-row label.dl-form-checkbox-other .wpcf7-list-item {
    margin: 0;
}
.dl-form-page-row .wpcf7-form-control-wrap.interested-products .wpcf7-list-item label,
.dl-form-page-row label.dl-form-checkbox-other .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 14px;              /* ← チェックボックスとテキストの距離 */
    cursor: pointer;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

/* チェックボックス本体: GDPR同意チェックボックスと同じ見た目 (16px・標準色) */
.dl-form-page-row .wpcf7-form-control-wrap.interested-products input[type="checkbox"],
.dl-form-page-row .wpcf7-form-control-wrap.interested-products-other-flag input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

/* 「その他」項目: リストの一員として上に間隔を空ける */
.dl-form-page-row label.dl-form-checkbox-other {
    display: block;
    margin: 12px 0 0;
}

/* CF7(wpautop) がマークアップの改行を <br> に変換して余白が空くため、
   このチェックボックスエリア内の <br> を非表示にする (配置は flex で制御) */
.dl-form-page-row .wpcf7-form > p:has(label.dl-form-label) > br,
.dl-form-page-row .wpcf7-form > p:has(label.dl-form-checkbox-other) > br,
.dl-form-page-row .wpcf7-form-control-wrap.interested-products br,
.dl-form-page-row label.dl-form-checkbox-other br {
    display: none;
}

/* ───────── GDPR規約エリア ───────── */

.dl-form-gdpr-area {
    margin: 32px 0;
    padding: 20px;
    border: 1px solid #ddd;
    background: #fafafa;
}

/* GDPRエリア内 <p> 余白リセット */
.dl-form-gdpr-area p {
    margin: 16px 0 0;
}

.dl-form-gdpr-text {
    font-size: 13px;
    line-height: 1.7;
    color: #555;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 8px;
}

.dl-form-gdpr-text br {
    /* GDPR本文の <br> は表示する (改行で読みやすく) */
    display: inline;
}

/* GDPR同意ラベル: チェックボックス + 同意テキスト を横並びに */
.dl-form-gdpr-consent {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #101010;
    cursor: pointer;
    line-height: 1.5;
    margin: 0 !important;
}

/* GDPR同意ラベル内の不要な <br> を非表示 */
.dl-form-gdpr-consent > br,
.dl-form-gdpr-area > p > br {
    display: none;
}

/* CF7(acceptance)のネストspanを display:contents で無効化し、
   input と同意テキストを outer label の直接の flex 子にする
   → 興味のある～と同じ「チェックボックス + テキスト」横並びに揃える */
.dl-form-gdpr-consent .wpcf7-form-control-wrap,
.dl-form-gdpr-consent .wpcf7-form-control,
.dl-form-gdpr-consent .wpcf7-list-item {
    display: contents;
}

.dl-form-gdpr-consent input[type="checkbox"] {
    display: inline-block !important;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.dl-form-gdpr-consent .lang {
    display: inline-block;
}

/* label > .lang の margin-bottom:6px が横並びGDPRではズレの原因になるため打ち消す。
   元ルール (.dl-form-page-row .wpcf7-form label > .lang = 詳細度0,3,1) より
   詳細度を高くするため label.dl-form-gdpr-consent で限定する */
.dl-form-page-row .wpcf7-form label.dl-form-gdpr-consent > .lang {
    margin-bottom: 0;
}

/* ───────── 送信ボタン エリア ───────── */

/* 送信ボタンを含む <p> を中央寄せ */
.dl-form-page-row .wpcf7-form > p:has(.dl-form-submit) {
    text-align: center;
    margin-top: 32px;
}

/* 送信ボタンエリア内の <br> (言語切替spanの間) を非表示 */
.dl-form-page-row .wpcf7-form > p:has(.dl-form-submit) > br {
    display: none;
}

.dl-form-submit {
    display: inline-block;
    margin: 0;
    padding: 14px 48px;
    font-size: 16px;
    background: #101010;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: inherit;
}

.dl-form-submit:hover:not(:disabled) {
    opacity: 0.8;
}

.dl-form-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ───────── CF7 送信中ローディングオーバーレイ ───────── */

/* CF7デフォルトの灰色パルス・内側ドットを無効化 */
.dl-form-page-row .wpcf7-spinner {
    background: none !important;
    border: 5px solid rgba(40, 53, 147, 0.2);
    border-top-color: #283593;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    visibility: hidden;
    opacity: 1;
    margin: 0;
    padding: 0;
    animation: none;
}

.dl-form-page-row .wpcf7-spinner::before {
    display: none !important;
}

/* CF7は <form> 要素に .submitting クラスを付与する */
/* (.wpcf7-form / form 両方の名前付けに対応) */

/* 1) 画面全体に薄い半透明オーバーレイ (クリック封鎖) */
.dl-form-page-row form.submitting::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.65);
    z-index: 9998;
    pointer-events: auto;
}

/* 2) スピナーを画面中央に固定 + 回転 */
.dl-form-page-row form.submitting .wpcf7-spinner {
    visibility: visible;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;          /* 4方向 0 + margin auto で中央配置 */
    z-index: 9999;
    animation: dl-form-spinner-rotate 0.8s linear infinite !important;
}

@keyframes dl-form-spinner-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ───────── CF7 レスポンス出力 (エラーメッセージ) ───────── */

/* レスポンス枠 (送信ボタンの上に表示) - エラー時 */
.dl-form-page-row .wpcf7-form > .wpcf7-response-output {
    order: 1;                  /* デフォルト 0 → 送信ボタン (order:2) の前に配置 */
    margin: 0 0 16px !important;
    padding: 12px 16px !important;
    font-size: 14px;
    border-radius: 2px;
    text-align: center;
}

/* 空のresponse-output (初期表示時 / モーダル閉じた後) は完全非表示
   CF7デフォルトの form.sent / form.failed 等で残る緑/赤枠線を消す */
.dl-form-page-row .wpcf7-form > .wpcf7-response-output:empty {
    display: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 送信ボタンの <p> を order:2 (response より後) に */
.dl-form-page-row .wpcf7-form > p:has(.dl-form-submit) {
    order: 2;
}

/* 各項目ラベルの直下に出るバリデーションエラー */
.dl-form-page-row .wpcf7-not-valid-tip {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #d00;
}

/* ───────── 送信完了モーダル ───────── */

/* 1. バックドロップ (sent状態時のみフルスクリーン暗幕) */
.dl-form-page-row form.sent::before,
.dl-form-page-row form[data-status="mail_sent"]::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
}

/* 2. レスポンス枠 → モーダル化 (中央固定) */
.dl-form-page-row form.sent .wpcf7-response-output,
.dl-form-page-row form[data-status="mail_sent"] .wpcf7-response-output {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: #fff !important;
    padding: 48px 40px !important;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    border: none !important;
    max-width: 480px;
    width: 90%;
    margin: 0 !important;
    text-align: center;
    line-height: 1.7;
    color: #101010;
}

/* 3. モーダル閉じる × ボタン (JSで挿入) */
.dl-form-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 4px 10px;
}

.dl-form-modal-close:hover {
    color: #101010;
}

/* 4. モーダル本文 (JS生成) */
.dl-form-thanks {
    margin: 0;
}

.dl-form-thanks-text {
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 1.8;
    color: #101010;
}

.dl-form-thanks-btn {
    display: inline-block;
    padding: 12px 36px;
    font-size: 15px;
    color: #101010;
    border: 1px solid #101010;
    background: #fff;
    text-decoration: none;
    transition: all 0.2s;
    border-radius: 2px;
}

.dl-form-thanks-btn:hover {
    background: #101010;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .dl-form-page-row form.sent .wpcf7-response-output,
    .dl-form-page-row form[data-status="mail_sent"] .wpcf7-response-output {
        padding: 36px 20px 24px !important;
    }
}

/* ───────── CF7 送信完了メッセージ内ボタン ───────── */

.dl-form-thanks .btn {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 36px;
    font-size: 15px;
    color: #101010;
    border: 1px solid #101010;
    background: #fff;
    text-decoration: none;
    transition: all 0.2s;
}

.dl-form-thanks .btn:hover {
    background: #101010;
    color: #fff;
}

/* ───────── レスポンシブ (モバイル) ───────── */

@media screen and (max-width: 768px) {
    .dl-form-page {
        padding: 24px 16px 48px;
    }

    .dl-form-steps-title {
        font-size: 22px;
        margin-bottom: 28px;
    }

    .dl-form-steps-list {
        flex-direction: column;
        gap: 24px;
    }

    .dl-form-step-icon {
        width: 110px;
        height: 110px;
    }

    .dl-form-step-text {
        font-size: 14px;
    }

    .dl-form-gdpr-text {
        max-height: 180px;
    }

    /* 姓/名 を縦並びに戻す */
    .dl-form-page-row .wpcf7-form {
        grid-template-columns: 1fr;
    }
    .dl-form-page-row .wpcf7-form > p:has(.last-name),
    .dl-form-page-row .wpcf7-form > p:has(.first-name) {
        grid-column: 1 / -1;
    }

    /* カタログプレビュー: 2列に */
    .dl-form-catalog-preview-title {
        font-size: 20px;
    }
    .dl-form-catalog-preview-list {
        gap: 16px;
    }
    .dl-form-catalog-preview-card {
        width: calc(50% - 8px);
        max-width: 180px;
        padding: 10px;
    }
    .dl-form-catalog-preview-card-name {
        font-size: 15px !important;
    }
}