/* Scoped to the multilingual contact pages. */
body.contact-page {background-image: none; background-color: #fff;}
.contact-page .i18n {display: block;}
.contact-page[data-contact-language="ja"] .i18n:not([lang="ja"]),
.contact-page[data-contact-language="en"] .i18n:not([lang="en"]),
.contact-page[data-contact-language="zh-CN"] .i18n:not([lang="zh-CN"]) {display: none;}
.contact-page #hpb-headerExtra1 .office-phone {grid-template-columns: 7em max-content;}
.contact-page #hpb-nav li a {font-size: 12px;}
.contact-page #hpb-title {margin-bottom: 20px;}
.contact-page #hpb-title h2 {box-sizing: border-box; width: 100%; height: auto; min-height: 50px; padding: 12px 18px; background: #37acd4; color: #fff; font-size: 22px; line-height: 1.4; overflow: visible;}
.contact-page #contact {font-size: 15px; line-height: 1.8; color: #354954;}
.contact-page #contact p {margin: 0 0 16px; line-height: 1.8;}
.contact-page .contact-languages {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;}
.contact-page .contact-languages button {padding: 8px 16px; border: 1px solid #b5d4e2; border-radius: 4px; background: #f3f8fa; color: #155d7b; cursor: pointer; font: inherit;}
.contact-page .contact-languages button[aria-pressed="true"] {background: #176c91; border-color: #176c91; color: #fff;}
.contact-page .contact-intro {padding: 16px; background: #edf7fb; border-left: 4px solid #32a8cf;}
.contact-page .contact-field {display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 18px; padding: 18px 0; border-top: 1px solid #dce8ee;}
.contact-page .contact-field label {font-weight: 600; color: #155d7b;}
.contact-page .required {color: #b02a37;}
.contact-page .contact-field input,.contact-page .contact-field textarea {width: 100%; max-width: 100%; box-sizing: border-box; border: 1px solid #97b4c2; border-radius: 4px; padding: 10px 12px; font: inherit; line-height: 1.5; background: #fff; color: #243a46;}
.contact-page .contact-field textarea {resize: vertical; min-height: 180px;}
.contact-page .contact-field input:focus,.contact-page .contact-field textarea:focus {outline: 2px solid #176c91; outline-offset: 2px;}
.contact-page #contact .field-help {margin: 7px 0 0; font-size: 13px; color: #526671;}
.contact-page .contact-submit {display: block; margin: 20px auto; padding: 12px 34px; border: 0; border-radius: 4px; background: #176c91; color: #fff; font: inherit; font-weight: 600; cursor: pointer;}
.contact-page .contact-submit:focus-visible {outline: 2px solid #173548; outline-offset: 3px;}
.contact-page .contact-sales {margin-top: 24px; padding: 14px; background: #f3f6f8; font-size: 13px;}
@media screen and (max-width: 599px) {
 .contact-page .contact-field {display: block;}
 .contact-page .contact-field label {display: block; margin-bottom: 8px;}
 .contact-page #hpb-headerExtra1 p.tel {font-size: 14px;}
}

.contact-page .contact-trap {position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}

.contact-page .contact-submit:disabled {background: #c3ced4; color: #40515a; cursor: not-allowed;}

/* Language-aware office information on contact pages. */
.contact-page .contact-office-maps {display: grid; gap: 8px; margin: 15px 0 12px;}
.contact-page .contact-office-maps a {display: block; padding: 12px; background: #edf7fb; border: 1px solid #d1e5ed; font-size: 13px; line-height: 1.6; text-decoration: none; color: #155d7b;}
.contact-page .contact-office-maps a:hover {text-decoration: underline;}
.contact-page #companyinfo p {overflow-wrap: anywhere;}

/* 2026-11-04: matching raised buttons and quiet disabled states. */
.contact-page .contact-languages button {
    min-height: 42px;
    border-color: #b8ccd8;
    background: linear-gradient(180deg, #ffffff 0%, #eef5f9 100%);
    color: #245b76;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(32,78,104,.08);
}
.contact-page .contact-languages button:hover {
    border-color: #80aac1;
    background: linear-gradient(180deg, #ffffff 0%, #e1f0f8 100%);
}
.contact-page .contact-languages button[aria-pressed="true"] {
    border-color: #205c7b;
    background: linear-gradient(180deg, #327a9b 0%, #215f7d 100%);
    color: #fff;
    box-shadow: inset 0 2px 3px rgba(10,48,68,.22), inset 0 -1px 0 rgba(255,255,255,.10);
}
.contact-page .contact-languages button:focus-visible {outline: 2px solid #155c7d; outline-offset: 3px;}
.contact-page .contact-submit {
    min-height: 48px;
    border: 1px solid #155677;
    border-radius: 5px;
    background: linear-gradient(180deg, #2e7c9e 0%, #226d92 50%, #1b5e80 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 3px rgba(25,72,98,.17);
    text-shadow: 0 1px 1px rgba(0,35,55,.2);
}
.contact-page .contact-submit:not(:disabled):hover {
    background: linear-gradient(180deg, #2c7d9d 0%, #247195 50%, #206a8e 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 4px rgba(25,72,98,.20);
}
.contact-page .contact-submit:not(:disabled):active {
    background: #215f7e;
    box-shadow: inset 0 2px 4px rgba(5,40,60,.24);
}
.contact-page .contact-submit:disabled {
    border-color: #c2ced6;
    background: linear-gradient(180deg, #e8edf1 0%, #d9e2e8 100%);
    color: #617580;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    text-shadow: none;
    cursor: not-allowed;
}

/* Reduce button padding without shrinking the labels excessively. */
.contact-page .contact-languages button {
    min-height: 34px;
    padding: 5px 12px;
    font-size: 14px;
    line-height: 1.4;
}
.contact-page .contact-submit {
    min-height: 38px;
    padding: 7px 22px;
    font-size: 14px;
    line-height: 1.4;
}
@media screen and (max-width: 899px) {
    .contact-page .contact-languages button {min-height: 36px;}
    .contact-page .contact-submit {min-height: 40px;}
}