/* ==========================================================================
   Contact page — inquiry form on the left, WhatsApp and email on the right.
   Same rules as the ruibitaquarium.com contact form, so the sites submit
   through the same /api/contact mechanism and look identical.

   Loaded from page-modules.hbs AFTER page-modules.css, so the .contact-us-page
   rules below win over the older .contact-section defaults on equal
   specificity.
   ========================================================================== */
.contact-us-page{background:#f4f8fc;padding:70px 0 80px}
.contact-us-page .container{max-width:1240px}
.contact-us-page h2{margin:0 0 14px;text-align:center;color:#0e2a47}
.contact-us-page .section-intro{max-width:760px;margin:0 auto 44px;text-align:center;color:#5b6b7d;font-size:1.05rem;line-height:1.65}
.contact-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);gap:32px;align-items:start}
.contact-form-panel,.channel-card{background:#fff;border:1px solid #e3ebf3;border-radius:16px;box-shadow:0 12px 34px rgba(16,42,67,.08)}
.contact-form-panel{padding:34px 34px 28px}
.contact-panel-title{margin:0 0 22px;font-size:1.3rem;color:#0e2a47}
.rq-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rq-field{margin-bottom:18px;display:flex;flex-direction:column}
.rq-field label{font-size:.86rem;font-weight:600;color:#33475b;margin-bottom:7px}
.rq-field label span{color:#d93025}
.rq-field label .rq-optional{color:#7b8a99;font-weight:400;font-size:.94em}
.rq-field input,.rq-field select,.rq-field textarea{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid #cfdce8;border-radius:9px;font-size:.95rem;font-family:inherit;color:#102a43;background:#fbfdff;transition:border-color .15s,box-shadow .15s}
.rq-field input:focus,.rq-field select:focus,.rq-field textarea:focus{outline:none;border-color:var(--primary,#1565c0);box-shadow:0 0 0 3px rgba(21,101,192,.14);background:#fff}
.rq-field textarea{resize:vertical;min-height:120px}
.rq-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rq-submit{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:14px 22px;border:0;border-radius:10px;background:var(--secondary,#ff6f00);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:background .15s}
.rq-submit:hover{background:#e56400}
.rq-submit:disabled{opacity:.65;cursor:progress}
.rq-note{margin:14px 0 0;font-size:.8rem;line-height:1.5;color:#7b8a99}
.rq-status{margin:12px 0 0;font-size:.9rem;line-height:1.55}
.rq-status.is-error{color:#b3261e}
.rq-status.is-success{color:#1b7f4d;font-weight:600}
.rq-status a{color:var(--primary,#1565c0);text-decoration:underline}
.contact-channel-panel{display:grid;gap:22px}
.channel-card{padding:26px 24px}
.channel-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;color:#fff;margin-bottom:14px}
.channel-whatsapp .channel-icon{background:#25d366}
.channel-email .channel-icon{background:var(--primary,#1565c0)}
.channel-card h3{margin:0 0 6px;font-size:1.05rem;color:#0e2a47}
.channel-value{margin:0 0 8px;font-size:1.1rem;font-weight:600;color:#102a43;word-break:break-word}
.channel-value a{color:inherit;text-decoration:none;border-bottom:1px solid #cfdce8}
.channel-value a:hover{color:var(--primary,#1565c0)}
.channel-meta{margin:0 0 16px;font-size:.85rem;line-height:1.55;color:#6b7c8f}
.channel-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 18px;border-radius:9px;background:#25d366;color:#fff;font-weight:600;font-size:.93rem;text-decoration:none;transition:background .15s}
.channel-button:hover{background:#1ebe5a;color:#fff}
@media (max-width:900px){
  .contact-us-page{padding:44px 0 56px}
  .contact-layout{grid-template-columns:1fr;gap:22px}
  .contact-form-panel{padding:26px 20px 22px}
  .rq-field-row{grid-template-columns:1fr;gap:0}
  .contact-us-page .section-intro{margin-bottom:28px}
}

/* Keep the two channel cards in view while the form scrolls. */
@media (min-width:901px){
  .contact-channel-panel{position:sticky;top:24px}
}

/* WhatsApp QR block inside the channel card. */
.channel-qr{margin-top:18px;padding-top:16px;border-top:1px solid #eef3f8;text-align:center}
.channel-qr img{display:inline-block;width:132px;height:132px;box-sizing:content-box;border:1px solid #e3ebf3;border-radius:10px;padding:6px;background:#fff}
.channel-qr p{margin:8px 0 0;font-size:.8rem;color:#7b8a99}