/* Contact Us page: extends synology-neo.css's shared .syn-* patterns with
   a real, functional feedback form (submit-feedback.php + reCAPTCHA + a
   Google Maps embed) restyled dark — every field id/name, the
   #feedback-form id and the .rating-stars structure are UNCHANGED from the
   original light-themed page, since index.php's inline JS and
   submit-feedback.php both depend on those exact identifiers. Cyan accent
   (not orange) — this isn't a specific partner brand page, so it uses the
   site's own primary color instead. */

.contact-page .hero-art { background-image: url('../images/hero/index2-quantum.webp'); background-position: center 30%; background-size: cover; }
.contact-hero { min-height: 360px; }
.contact-hero-inner { min-height: 360px; }
.contact-page .syn-hero-copy { width: 60%; }
.contact-page em { color: #00c8ff; }

/* ---------- office / map column ---------- */
.contact-body { padding: 40px 0 60px; }
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 30px; align-items: start; }
.contact-info-col { display: flex; flex-direction: column; gap: 20px; }
.contact-card { background: radial-gradient(ellipse at 50% 0%, #0c3651, #04111b 65%); border: 1px solid #155474; border-radius: 10px; padding: 24px; }
.contact-card h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.contact-addr { font-size: 13.5px; line-height: 1.6; color: #b7cbd9; margin: 0 0 16px; }
.contact-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #155474; color: #fff; font-weight: 600; font-size: 13.5px; text-decoration: none; overflow-wrap: anywhere; }
.contact-row:first-of-type { border-top: none; }
.contact-row i { color: #00c8ff; font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.contact-row:hover { color: #00c8ff; }
.contact-map { padding: 0; overflow: hidden; }
.contact-map iframe { display: block; width: 100%; height: 320px; border: 0; filter: grayscale(0.2) invert(0.92) contrast(0.9); }

/* ---------- form column ---------- */
.contact-form-panel { background: radial-gradient(ellipse at 50% 0%, #0c3651, #04111b 65%); border: 1px solid #155474; border-top: 3px solid #00c8ff; border-radius: 10px; padding: 26px; }
.contact-form-panel h2 { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 18px; }
.contact-form-row { display: flex; flex-wrap: wrap; gap: 16px; }
.contact-field { flex: 1 1 calc(50% - 8px); min-width: 220px; }
.contact-field-full { flex: 1 1 100%; }
.contact-label { display: block; font-size: 12.5px; font-weight: 600; color: #b7cbd9; margin-bottom: 8px; }
.req { color: #ff6b6b; }
.contact-input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px;
  padding: 12px 14px; border: 1px solid #155474; border-radius: 8px;
  background: #030b13; color: #fff; outline: none; transition: border-color 150ms ease, box-shadow 150ms ease;
}
.contact-input::placeholder { color: #6f8ea0; }
.contact-input:focus { border-color: #00c8ff; box-shadow: 0 0 0 3px #00c8ff33; }
select.contact-input { appearance: auto; }
textarea.contact-input { min-height: 100px; resize: vertical; }
.error-msg { display: block; font-size: 11.5px; color: #ff6b6b; margin-top: 4px; }

.rating-stars { display: flex; gap: 10px; }
.rating-stars input[type="radio"] { display: none; }
.rating-stars label i { color: #33465a; font-size: 26px; cursor: pointer; transition: color 0.3s ease; }
.rating-stars input[type="radio"]:checked ~ label,
.rating-stars input[type="radio"]:checked + label:hover,
.rating-stars input[type="radio"]:checked + label:hover ~ label,
.rating-stars input[type="radio"]:checked ~ label:hover { color: gold; }
.rating-stars label:hover, .rating-stars label:hover ~ label { color: gold; }
.rating-stars input[type="radio"]:checked + label i { color: gold; }

.contact-submit-row { display: flex; justify-content: flex-end; }
.contact-page .button.primary { min-height: 44px; }

@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-page .syn-hero-copy { width: 85%; }
}
@media (max-width: 700px) {
  .contact-field { flex: 1 1 100%; }
  .contact-map iframe { height: 240px; }
  .contact-submit-row { justify-content: stretch; }
  .contact-page .button.primary { width: 100%; }
}