/**
 * 問い合わせ・ご意見テンプレート専用（template-contact.php / template-feedback.php）。
 * assets.php で条件付き enqueue。:root は main.css に依存。
 */

/* 問い合わせ（template-contact.php） */
.mtl-contact-intro {
    max-width: 46rem;
    margin-bottom: 1.5rem;
}

.mtl-contact-notice {
    max-width: 46rem;
    margin: 0 0 1.25rem;
}

.mtl-contact-notice p {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.96rem;
    line-height: 1.5;
}

.mtl-contact-notice--success {
    border: 1px solid rgba(110, 200, 140, 0.45);
    background: rgba(34, 72, 48, 0.35);
    color: #d8f5e0;
}

.mtl-contact-notice--error {
    border: 1px solid rgba(255, 120, 120, 0.4);
    background: rgba(72, 28, 28, 0.35);
    color: #ffd4d4;
}

.mtl-contact-form {
    max-width: 46rem;
    margin: 0;
    padding: 1rem 1.15rem 1.2rem;
    border-radius: 12px;
    border: 2px solid rgba(126, 200, 255, 0.52);
    background: var(--card);
    box-shadow:
        0 6px 18px rgba(8, 14, 32, 0.22),
        inset 0 0 0 1px rgba(126, 200, 255, 0.12);
}

.mtl-contact-field {
    margin: 0 0 1.1rem;
}

.mtl-contact-field:last-of-type {
    margin-bottom: 0;
}

.mtl-contact-field label {
    display: block;
    margin: 0 0 0.5rem;
    padding: 0.48rem 0.72rem 0.52rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #eaf2ff;
    letter-spacing: 0.02em;
    border-radius: 8px;
    border: 1px solid rgba(126, 200, 255, 0.35);
    background:
        linear-gradient(
            120deg,
            rgba(34, 60, 102, 0.72) 0%,
            rgba(28, 49, 84, 0.68) 52%,
            rgba(22, 38, 67, 0.75) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 2px 8px rgba(8, 14, 32, 0.18);
}

.mtl-contact-required {
    color: rgba(255, 160, 140, 0.95);
    font-weight: 700;
}

.mtl-contact-field input[type="text"],
.mtl-contact-field input[type="email"],
.mtl-contact-field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(126, 200, 255, 0.42);
    background: rgba(12, 16, 30, 0.92);
    color: var(--text);
    font: inherit;
    font-size: 0.98rem;
    line-height: 1.45;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.mtl-contact-field textarea {
    resize: vertical;
    min-height: 9rem;
}

.mtl-contact-field input:focus-visible,
.mtl-contact-field textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: rgba(158, 214, 255, 0.72);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(110, 140, 255, 0.35);
}

.mtl-contact-field--honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mtl-contact-actions {
    margin: 1.25rem 0 0;
    padding-top: 0.25rem;
}

/* 問い合わせ・ご意見: 主ボタン（確認画面へ / この内容で送信する）をフォーム・ラベルと同系色に統一 */
.mtl-contact-actions .button-primary,
.mtl-contact-preview-send .button-primary {
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    color: #f0f4ff;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(126, 200, 255, 0.52);
    background:
        linear-gradient(
            120deg,
            rgba(34, 60, 102, 0.92) 0%,
            rgba(28, 49, 84, 0.94) 52%,
            rgba(30, 52, 100, 0.92) 100%
        );
    box-shadow:
        0 2px 12px rgba(8, 14, 32, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mtl-contact-actions .button-primary:hover,
.mtl-contact-preview-send .button-primary:hover {
    border-color: rgba(158, 214, 255, 0.62);
    filter: brightness(1.07);
}

.mtl-contact-actions .button-primary:focus-visible,
.mtl-contact-preview-send .button-primary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.mtl-contact-preview-actions a.button {
    color: #eaf2ff;
    font-weight: 600;
    border: 1px solid rgba(126, 200, 255, 0.42);
    background: rgba(14, 18, 34, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mtl-contact-preview-actions a.button:hover {
    border-color: rgba(158, 214, 255, 0.52);
    background: rgba(22, 30, 52, 0.88);
    color: #f5f8ff;
}

.mtl-contact-notice--inline {
    max-width: 46rem;
    margin: 0 0 1rem;
}

.mtl-contact-preview {
    max-width: 46rem;
    margin: 0;
    padding: 1rem 1.15rem 1.2rem;
    border-radius: 12px;
    border: 2px solid rgba(126, 200, 255, 0.52);
    background: var(--card);
    box-shadow:
        0 6px 18px rgba(8, 14, 32, 0.22),
        inset 0 0 0 1px rgba(126, 200, 255, 0.12);
}

.mtl-contact-preview-lead {
    margin: 0 0 1.1rem;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.55;
}

.mtl-contact-preview-list {
    margin: 0;
    padding: 0;
}

.mtl-contact-preview-row {
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid rgba(126, 200, 255, 0.28);
}

.mtl-contact-preview-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.mtl-contact-preview-row dt {
    margin: 0 0 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.mtl-contact-preview-row dd {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    color: #eaf2ff;
    word-break: break-word;
}

.mtl-contact-preview-actions {
    margin-top: 1.25rem;
    padding-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.mtl-contact-preview-send {
    margin: 0;
}

.mtl-contact-preview-back {
    margin: 0;
}