/* Contact page — modern, private, and consistent with the 3DTV theme. */
/*
 * The page surface, not just the section: the header, the .adsArea spacer under it
 * and the hero all have to be one colour or a lighter band shows between them.
 * !important beats the blanket `body { background-color: #212121 !important }`
 * in style.css.
 */
body.page-template-contact {
    background-color: var(--tdtv-bg, #0d0d10) !important;
}

.tdtv-contact-page {
    min-height: calc(100vh - 150px);
    padding: clamp(28px, 5vw, 76px) clamp(16px, 4vw, 48px) clamp(52px, 7vw, 96px);
    background: var(--tdtv-bg, #0d0d10);
    color: var(--tdtv-text, #f5f6f8);
}

.tdtv-contact-shell {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
    gap: clamp(42px, 7vw, 104px);
    align-items: start;
    width: min(100%, 1180px);
    margin: 0 auto;
}

.tdtv-contact-intro {
    position: sticky;
    top: 92px;
    padding-top: 24px;
}

.tdtv-contact-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    color: var(--tdtv-accent, #ffdd95);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.tdtv-contact-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    margin-right: 10px;
    background: currentColor;
}

.tdtv-contact-intro h1 {
    max-width: 500px;
    margin: 0;
    color: #fff;
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1.02;
}

.tdtv-contact-intro > p {
    max-width: 480px;
    margin: 22px 0 0;
    color: #aeb2bc;
    font-size: 16px;
    line-height: 1.75;
}

.tdtv-contact-notes {
    display: grid;
    gap: 18px;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--tdtv-border, rgba(255, 255, 255, .08));
}

.tdtv-contact-note {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    align-items: start;
}

.tdtv-contact-note__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 221, 149, .16);
    border-radius: 10px;
    background: rgba(255, 221, 149, .06);
    color: var(--tdtv-accent, #ffdd95);
}

.tdtv-contact-note__icon .tdtv-icon,
.tdtv-contact-note__icon svg {
    width: 18px;
    height: 18px;
}

.tdtv-contact-note strong,
.tdtv-contact-note span {
    display: block;
}

.tdtv-contact-note strong {
    margin: 1px 0 4px;
    color: #e9eaed;
    font-size: 14px;
    font-weight: 650;
}

.tdtv-contact-note div > span {
    color: #858b97;
    font-size: 13px;
    line-height: 1.55;
}

.tdtv-contact-card {
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 20px;
    background: linear-gradient(145deg, #191a1f 0%, #14151a 100%);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .3);
}

.tdtv-contact-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.tdtv-contact-card__head h2 {
    margin: 0;
    color: #f7f7f8;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.tdtv-contact-card__head p {
    margin: 0;
    color: #747b87;
    font-size: 12px;
}

.tdtv-contact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.tdtv-contact-field {
    margin-bottom: 21px;
}

.tdtv-contact-field label,
.tdtv-contact-label-row > label {
    display: block;
    margin: 0 0 8px;
    color: #d9dbe0;
    font-size: 13px;
    font-weight: 650;
}

.tdtv-contact-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tdtv-contact-label-row > span {
    color: #656b76;
    font-size: 11px;
}

#tdtv-contact-form input[type="text"],
#tdtv-contact-form input[type="email"],
#tdtv-contact-form textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid #30323a;
    border-radius: 9px;
    outline: none;
    background: #101116;
    color: #f3f4f6;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#tdtv-contact-form input[type="text"],
#tdtv-contact-form input[type="email"] {
    min-height: 48px;
}

#tdtv-contact-form textarea {
    min-height: 172px;
    resize: vertical;
}

#tdtv-contact-form input::placeholder,
#tdtv-contact-form textarea::placeholder {
    color: #5f6570;
}

#tdtv-contact-form input:hover,
#tdtv-contact-form textarea:hover {
    border-color: #3c3f48;
}

#tdtv-contact-form input:focus,
#tdtv-contact-form textarea:focus {
    border-color: rgba(255, 221, 149, .6);
    background: #121319;
    box-shadow: 0 0 0 3px rgba(255, 221, 149, .075);
}

#tdtv-contact-form [aria-invalid="true"] {
    border-color: rgba(255, 112, 112, .7);
}

.tdtv-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.tdtv-shield {
    --shield-ok: #54d98c;
    --shield-error: #ff7777;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(100%, 360px);
    margin: 3px 0 22px;
    padding: 11px 12px;
    box-sizing: border-box;
    border: 1px solid #34363e;
    border-radius: 10px;
    background: #111217;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.tdtv-shield.is-loading { border-color: rgba(255, 221, 149, .5); }
.tdtv-shield.is-verified { border-color: rgba(84, 217, 140, .48); box-shadow: 0 0 0 2px rgba(84, 217, 140, .06); }
.tdtv-shield.is-error { border-color: rgba(255, 119, 119, .5); }

.tdtv-shield__box {
    position: relative;
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #626772;
    border-radius: 8px;
    background: #191a20;
    color: #a9adb6;
    cursor: pointer;
}

.tdtv-shield__box:hover { border-color: #d7d9de; color: #fff; }
.tdtv-shield__box:focus-visible { outline: 2px solid var(--tdtv-accent, #ffdd95); outline-offset: 2px; }

.tdtv-shield__idle {
    width: 17px;
    height: 17px;
    border: 1.5px solid currentColor;
    border-radius: 4px;
}

.tdtv-shield__spinner,
.tdtv-shield__result { display: none; }

.tdtv-shield.is-loading .tdtv-shield__idle,
.tdtv-shield.is-verified .tdtv-shield__idle,
.tdtv-shield.is-error .tdtv-shield__idle { display: none; }

.tdtv-shield.is-loading .tdtv-shield__spinner {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 221, 149, .2);
    border-top-color: var(--tdtv-accent, #ffdd95);
    border-radius: 50%;
    animation: tdtv-shield-spin .7s linear infinite;
}

.tdtv-shield.is-verified .tdtv-shield__box,
.tdtv-shield.is-error .tdtv-shield__box { border-color: transparent; background: transparent; }

.tdtv-shield.is-verified .tdtv-shield__result,
.tdtv-shield.is-error .tdtv-shield__result {
    display: block;
    width: 19px;
    height: 19px;
    border-radius: 5px;
    background: currentColor;
}

.tdtv-shield.is-verified .tdtv-shield__box { color: var(--shield-ok); }
.tdtv-shield.is-error .tdtv-shield__box { color: var(--shield-error); }

.tdtv-shield.is-verified .tdtv-shield__result::after {
    content: '';
    display: block;
    width: 8px;
    height: 4px;
    margin: 5px 0 0 5px;
    border-left: 2px solid #102017;
    border-bottom: 2px solid #102017;
    transform: rotate(-45deg);
}

.tdtv-shield.is-error .tdtv-shield__result::before,
.tdtv-shield.is-error .tdtv-shield__result::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 2px;
    margin: 8px 0 0 4px;
    background: #261313;
    transform: rotate(45deg);
}
.tdtv-shield.is-error .tdtv-shield__result::after { transform: rotate(-45deg); }

.tdtv-shield__meta { flex: 1; min-width: 0; }
.tdtv-shield__meta strong { display: block; color: #eceef2; font-size: 13px; line-height: 1.2; }
.tdtv-shield__meta span { display: block; margin-top: 3px; color: #7f8590; font-size: 11px; }
.tdtv-shield.is-loading .tdtv-shield__meta span { color: #d4b56f; }
.tdtv-shield.is-verified .tdtv-shield__meta span { color: var(--shield-ok); }
.tdtv-shield.is-error .tdtv-shield__meta span { color: var(--shield-error); }

.tdtv-shield__brand {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .07);
    color: var(--tdtv-accent, #ffdd95);
}

.tdtv-shield__brand .tdtv-icon,
.tdtv-shield__brand svg { width: 21px; height: 21px; }
.tdtv-shield__brand span,
.tdtv-shield__brand strong,
.tdtv-shield__brand small { display: block; }
.tdtv-shield__brand strong { font-size: 9px; letter-spacing: .03em; white-space: nowrap; }
.tdtv-shield__brand small { margin-top: 1px; color: #686e79; font-size: 8px; }

.tdtv-contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    background: var(--tdtv-accent, #ffdd95);
    color: #17130b;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, opacity .16s ease;
}

.tdtv-contact-submit .tdtv-icon,
.tdtv-contact-submit svg { width: 16px; height: 16px; }
.tdtv-contact-submit:not(:disabled):hover { background: #ffe7b1; transform: translateY(-1px); }
.tdtv-contact-submit:disabled { opacity: .42; cursor: not-allowed; }
.tdtv-contact-submit.is-loading { cursor: wait; }

.tdtv-contact-response {
    margin: 0 0 16px;
    padding: 11px 13px;
    border: 1px solid rgba(84, 217, 140, .28);
    border-radius: 8px;
    background: rgba(84, 217, 140, .07);
    color: #86e8ad;
    font-size: 13px;
    line-height: 1.5;
}
.tdtv-contact-response.is-error { border-color: rgba(255, 119, 119, .3); background: rgba(255, 119, 119, .07); color: #ff9a9a; }

@keyframes tdtv-shield-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .tdtv-contact-shell { grid-template-columns: 1fr; gap: 34px; }
    .tdtv-contact-intro { position: static; padding-top: 0; }
    .tdtv-contact-intro h1 { max-width: none; }
    .tdtv-contact-intro > p { max-width: 650px; }
    .tdtv-contact-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }
}

@media (max-width: 600px) {
    .tdtv-contact-page { padding: 24px 12px 54px; }
    .tdtv-contact-intro { padding: 0 6px; }
    .tdtv-contact-intro h1 { font-size: 38px; }
    .tdtv-contact-intro > p { margin-top: 16px; font-size: 14px; }
    .tdtv-contact-notes { grid-template-columns: 1fr; gap: 14px; }
    .tdtv-contact-card { padding: 22px 16px; border-radius: 15px; }
    .tdtv-contact-card__head { align-items: flex-start; flex-direction: column; gap: 6px; }
    .tdtv-contact-fields { grid-template-columns: 1fr; gap: 0; }
    .tdtv-shield { width: 100%; }
    .tdtv-shield__brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tdtv-shield.is-loading .tdtv-shield__spinner { animation-duration: 1.5s; }
}