/* Contact Us page composition. Shared colors, gutters, controls, and shell remain in site.css. */
.contact-hero {
  overflow: hidden;
  color: var(--white);
  background-color: #0068da;
  background-image: linear-gradient(90deg, rgba(0, 52, 161, .96) 0%, rgba(0, 98, 215, .78) 44%, rgba(0, 99, 220, .1) 74%), url('../hero_bg/contactus_bg.png');
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.contact-hero::after {
  position: absolute;
  right: -8%;
  bottom: -4.2rem;
  left: -8%;
  height: 7.5rem;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--white);
  content: "";
}

.contact-hero__inner {
  z-index: 1;
  justify-content: center;
  min-height: inherit;
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.contact-hero__content { max-width: 36rem; }

.contact-hero .section__tag { color: var(--orange); }

.contact-hero .hero__title {
  margin-top: var(--space-2);
  color: var(--white);
  font-size: clamp(3rem, 5.4vw, 5.4rem);
}

.contact-hero .hero__description {
  max-width: 34rem;
  color: rgba(255, 255, 255, .95);
}

.contact-hero__assurances {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding: 0;
  margin: var(--space-5) 0 0;
  list-style: none;
  font-size: .8rem;
  font-weight: 800;
}

.contact-hero__assurances li { display: inline-flex; align-items: center; gap: .5rem; }
.contact-hero__assurances span { display: grid; width: 1.3rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; font-size: .68rem; }

.contact-reach .section-header { margin-bottom: var(--space-6); }
.contact-audiences .section__header { margin-bottom: var(--space-6); }

.contact-reach__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--grid-gap);
}

.contact-reach-card {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  text-align: center;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.contact-reach-card:is(a):hover { border-color: var(--blue-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.contact-reach-card--message:target { scroll-margin-top: calc(var(--header-height) + var(--space-5)); border-color: var(--blue-primary); box-shadow: var(--shadow-md); }
.contact-reach-card__icon { display: grid; width: 3.5rem; aspect-ratio: 1; place-items: center; border-radius: 50%; }
.contact-reach-card__icon svg, .contact-support__icon svg, .contact-hotline__icon svg, .contact-audience-card__icon svg, .contact-office-note__icon svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.contact-reach-card__icon--phone, .contact-reach-card__icon--email, .contact-reach-card__icon--location, .contact-reach-card__icon--message { color: var(--blue-primary); background: var(--blue-pale); }
.contact-reach-card h3 { margin: var(--space-3) 0 .45rem; color: var(--dark); font-size: 1rem; }
.contact-reach-card p { max-width:80%;margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.contact-reach-card > strong { display: block; margin-top: var(--space-3); color: var(--blue-primary); font-size: .75rem; line-height: 1.45; overflow-wrap: anywhere; }
.contact-reach-card__meta { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; margin-top: var(--space-3); padding: .35rem .7rem; border-radius: var(--radius-pill); color: var(--blue-primary); background: var(--blue-pale); font-size: .68rem; font-weight: 700; line-height: 1.3; }

.contact-socials { display: flex; justify-content: center; gap: .65rem; margin-top: var(--space-3); }
.contact-socials__item { display: grid; width: 2.25rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(247, 130, 32, .35); border-radius: var(--radius-sm); color: var(--orange); background: rgba(247, 130, 32, .12); transition: background-color .2s, color .2s, box-shadow .2s, transform .2s; }
.contact-socials__icon { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.contact-socials__item:is(a):hover { color: var(--white); background: var(--orange); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.contact-assistance { padding-top: var(--section-space-y-compact); }
.contact-assistance__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: var(--grid-gap); align-items: stretch; }

.contact-form {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--radius-lg);
  color: var(--white);
  background: linear-gradient(135deg, #0053bf, var(--blue-primary));
  box-shadow: var(--shadow-md);
}

.contact-form__heading h2, .contact-support h2 { margin: 0; color: inherit; font-size: clamp(1.45rem, 2vw, 2rem); letter-spacing: -.03em; }
.contact-form__heading p { margin: var(--space-2) 0 0; color: rgba(255, 255, 255, .9); font-size: .82rem; line-height: 1.6; }
.contact-form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-1); }
.contact-form__field--wide { grid-column: 1 / -1; }
.contact-form .field { gap: .35rem; }
.contact-form .field__label { color: var(--white); font-size: .72rem; }
.contact-form .field__control { border-color: rgba(255, 255, 255, .58); background: var(--white); }
.contact-form .field textarea { min-height: 7rem; }
.contact-form .field__help { color: rgba(255, 255, 255, .86); }
.contact-form__consent { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--radius-sm); background: rgba(13, 27, 62, .14); }
.contact-form__consent input { width: 1rem; height: 1rem; margin-top: .15rem; accent-color: var(--orange); }
.contact-form__consent label { color: rgba(255, 255, 255, .94); font-size: .7rem; line-height: 1.55; }
.contact-form__submit { width: 100%; min-height: 48px; border: 0; color: var(--white); background: var(--orange); }
.contact-form__submit:hover { background: var(--orange-dark); }
.contact-form__privacy { margin: 0; color: rgba(255, 255, 255, .9); font-size: .7rem; line-height: 1.5; }
.contact-form__privacy a { color: var(--white); font-weight: 800; }

.contact-support { display: grid; align-content: start; padding: clamp(1.5rem, 3vw, 2.4rem); }
.contact-support .section__tag { margin-bottom: var(--space-2); }
.contact-support h2 { color: var(--dark); }
.contact-support__links { display: grid; margin-top: var(--space-4); }
.contact-support__links a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); color: var(--dark); text-decoration: none; }
.contact-support__links a:hover strong, .contact-support__links a:hover i { color: var(--blue-primary); }
.contact-support__icon { display: grid; width: 2.3rem; aspect-ratio: 1; place-items: center; border-radius: .7rem; color: var(--blue-primary); background: var(--blue-pale); }
.contact-support__icon svg { width: 1.25rem; height: 1.25rem; }
.contact-support__links strong, .contact-support__links small { display: block; }
.contact-support__links strong { font-size: .78rem; }
.contact-support__links small { margin-top: .2rem; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.contact-support__links i { color: var(--blue-primary); font-size: 1.4rem; font-style: normal; }

.contact-hotline { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: linear-gradient(135deg, var(--white), var(--off-white)); }
.contact-hotline__icon { display: grid; flex: 0 0 auto; width: 3.4rem; aspect-ratio: 1; place-items: center; border-radius: 50%; color: var(--blue-primary); background: var(--blue-pale); }
.contact-hotline span > strong, .contact-hotline span > small, .contact-hotline a { display: block; }
.contact-hotline strong { color: var(--dark); font-size: .78rem; }
.contact-hotline small { margin-top: .2rem; color: var(--muted); font-size: .66rem; }
.contact-hotline a { margin-top: .2rem; color: var(--blue-primary); font-size: 1.2rem; font-weight: 900; text-decoration: none; }

.contact-audiences { padding-top: var(--section-space-y-compact); }
.contact-audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.contact-audience-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); padding: clamp(1.25rem, 2.5vw, 1rem); }
.contact-audience-card__content { display: grid; grid-column: 1; align-content: start; align-self: start; gap: var(--stack-sm); min-width: 0; }
.contact-audience-card__icon { display: grid; grid-column: 2; grid-row: 1; align-self: center; width: 4rem; aspect-ratio: 1; place-items: center; border-radius: var(--radius-md); }
.contact-audience-card__icon--home { color: var(--blue-primary); background: var(--blue-pale); }
.contact-audience-card__icon--enterprise { color: var(--orange); background: var(--orange-pale); }
.contact-audience-card h3, .contact-audience-card p { margin: 0; }
.contact-audience-card h3 { color: var(--dark); font-size: 1rem; }
.contact-audience-card p { color: var(--muted); font-size: .78rem; line-height: 1.55; }
.contact-audience-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stack-sm); }
.contact-audience-card__actions .btn { font-size: .7rem; }
.contact-audience-card__actions > a:not(.btn) { color: var(--blue-primary); font-size: .72rem; font-weight: 800; text-decoration: none; }

.contact-office-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); margin-top: var(--grid-gap); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--off-white); }
.contact-office-note__icon { display: grid; width: 3rem; aspect-ratio: 1; place-items: center; border-radius: .8rem; color: var(--blue-primary); background: var(--white); }
.contact-office-note p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.contact-office-note strong { color: var(--dark); }
.contact-office-note .btn { white-space: nowrap; }

@media (max-width: 1050px) {
  .contact-reach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-assistance__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .contact-hero { min-height: 30rem; background-image: linear-gradient(90deg, rgba(0, 52, 161, .94) 0%, rgba(0, 98, 215, .78) 60%, rgba(0, 99, 220, .42) 100%), url('../hero_bg/contactus_bg.png'); background-position: center, 64% center; }
  .contact-hero__inner { padding-bottom: 4rem; }
  .contact-audience-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .contact-hero { min-height: 27rem; background-image: linear-gradient(90deg, rgba(0, 52, 161, .96), rgba(0, 98, 215, .72)), url('../hero_bg/contactus_bg.png'); background-position: center, 66% center; }
  .contact-hero::after { bottom: -2.8rem; height: 5rem; }
  .contact-hero__assurances { gap: var(--space-2) var(--space-3); font-size: .7rem; }
  .contact-reach__grid, .contact-form__fields { grid-template-columns: 1fr; }
  .contact-reach-card { min-height: 0; }
  .contact-form__field--wide { grid-column: auto; }
  .contact-audience-card { grid-template-columns: 1fr; align-content: start; gap: var(--stack-md); }
  .contact-audience-card__content, .contact-audience-card__icon { grid-column: auto; grid-row: auto; }
  .contact-audience-card__icon { align-self: start; }
  .contact-office-note { grid-template-columns: auto minmax(0, 1fr); }
  .contact-office-note .btn { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 380px) {
  .contact-hero__assurances { display: grid; }
  .contact-hotline { align-items: flex-start; }
}


/* Message Us Viber icon emphasis. */
.contact-socials__item[data-config-link='viber'] .contact-socials__icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.4; }
.contact-socials__icon--viber { display: block; background: currentColor; -webkit-mask: url("../images/viber-icon.png") center / contain no-repeat; mask: url("../images/viber-icon.png") center / contain no-repeat; }

.enterprise-email-dialog {
  width: min(calc(100% - 1rem), 35rem);
  max-height: calc(100svh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  color: var(--dark);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}

.enterprise-email-dialog::backdrop {
  background: rgba(3, 18, 54, .62);
  backdrop-filter: blur(4px);
}

.enterprise-email-dialog__content {
  display: grid;
  gap: var(--stack-md);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.enterprise-email-dialog__content > * {
  margin: 0;
}

.enterprise-email-dialog__content > p {
  color: var(--muted);
  line-height: 1.6;
}

.enterprise-email-dialog__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  width: 2.5rem;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--dark);
  background: var(--blue-pale);
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 1;
}

.enterprise-email-dialog__close:hover,
.enterprise-email-dialog__close:focus-visible {
  color: var(--white);
  background: var(--orange);
}

.enterprise-email-dialog__address {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--blue-pale);
}

.enterprise-email-dialog__address::before {
  grid-row: 1 / 3;
  width: 3.4rem;
  aspect-ratio: 1;
  border-radius: .8rem;
  background: #dcecff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / 1.65rem no-repeat;
  content: '';
}

.enterprise-email-dialog__address span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.enterprise-email-dialog__address strong {
  color: var(--blue-primary);
  font-size: .94rem;
  font-weight: 800;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.enterprise-email-dialog__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.enterprise-email-dialog__actions .btn {
  width: 100%;
}

.enterprise-email-dialog__content > .enterprise-email-dialog__status {
  color: var(--blue-primary);
  font-size: .85rem;
  font-weight: 700;
}

.enterprise-email-dialog__status:empty {
  display: none;
}

.enterprise-email-dialog__copy-field {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

.email-options__copy,
.email-options__gmail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}

.email-options__copy::before,
.email-options__gmail::before {
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  content: '';
}

.email-options__copy::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1Zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm0 16H8V7h11v14Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1Zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm0 16H8V7h11v14Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.email-options__gmail::before {
  background: var(--blue-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 20V4h3.7L12 9.9 18.3 4H22v16h-3V8.6L12 15.1 5 8.6V20H2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 20V4h3.7L12 9.9 18.3 4H22v16h-3V8.6L12 15.1 5 8.6V20H2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 600px) {
  .enterprise-email-dialog__actions {
    grid-template-columns: 1fr;
  }
}