/* ======================================================
   CONTACT US — LAYOUT + FORM + MODAL
====================================================== */

/* ------------------------------
   FORCE 2-COLUMN LAYOUT
------------------------------ */

/* exact structure on your page */
main.page-contact.clean-contact .page-section.contact-flex .container.contact-two-col{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
  gap: 42px !important;
  align-items: start !important;
}

/* grid children */
main.page-contact.clean-contact .page-section.contact-flex .container.contact-two-col > .contact-card{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* mobile stack */
@media (max-width: 980px){
  main.page-contact.clean-contact .page-section.contact-flex .container.contact-two-col{
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------
   CARD STYLING
------------------------------ */
.page-contact.clean-contact .contact-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 28px;

  /* ✅ makes "reviews" align cleanly within the card */
  display: flex;
  flex-direction: column;
}

.page-contact.clean-contact .contact-card h2{
  margin: 0 0 12px;
  font-size: 1.5rem;
}

.page-contact.clean-contact .contact-card p{
  margin: 0 0 14px;
  line-height: 1.6;
  opacity: 0.9;
}

.page-contact.clean-contact .contact-detail{
  margin: 10px 0;
  line-height: 1.55;
}

.page-contact.clean-contact .hero-call{
  display: inline-block;
  margin-top: 12px;
}

/* ------------------------------
   GOOGLE REVIEWS SNIPPET (inside left card)
------------------------------ */
/* ------------------------------
   GOOGLE REVIEWS SNIPPET (inside left card)
------------------------------ */
.page-contact.clean-contact .contact-reviews{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(148,163,184,.18);

  display: grid;                 /* ✅ grid works best here */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.page-contact.clean-contact .contact-reviews .reviews-label{
  margin: 0;
  font-size: .9rem;
  font-weight: 800;
  color: rgba(255,255,255,.86);
  letter-spacing: .2px;
}

.page-contact.clean-contact .contact-reviews .reviews-actions{
  display: inline-flex;          /* ✅ keeps links side-by-side */
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;             /* ✅ prevents stacking */
}

.page-contact.clean-contact .contact-reviews .reviews-link{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 900;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}

.page-contact.clean-contact .contact-reviews .reviews-link:hover{
  text-decoration: underline;
}

/* Optional secondary style */
.page-contact.clean-contact .contact-reviews .reviews-link--ghost{
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.18);
  padding: .45rem .7rem;
  border-radius: 999px;
  text-decoration: none;
}

.page-contact.clean-contact .contact-reviews .reviews-link--ghost:hover{
  color: #fff;
  border-color: rgba(36,155,240,.45);
  text-decoration: none;
}

/* Mobile: stack label then buttons */
@media (max-width: 520px){
  .page-contact.clean-contact .contact-reviews{
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .page-contact.clean-contact .contact-reviews .reviews-actions{
    flex-wrap: wrap;
  }
}

/* ------------------------------
   FORM INPUTS
------------------------------ */
.page-contact.clean-contact .form-group{
  margin-bottom: 14px;
}

.page-contact.clean-contact .form-group label{
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.page-contact.clean-contact .form-group small{
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  opacity: 0.85;
}

.page-contact.clean-contact .amg-form input[type="text"],
.page-contact.clean-contact .amg-form input[type="email"],
.page-contact.clean-contact .amg-form input[type="tel"],
.page-contact.clean-contact .amg-form input[type="file"],
.page-contact.clean-contact .amg-form textarea{
  width: 100% !important;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: #fff;
  outline: none;
  font-size: 0.95rem;
}

.page-contact.clean-contact .amg-form textarea{
  resize: vertical;
  min-height: 140px;
}

.page-contact.clean-contact .amg-form input:focus,
.page-contact.clean-contact .amg-form textarea:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(36,155,240,0.25);
}

.page-contact.clean-contact .btn-full{
  width: 100% !important;
}

/* ======================================================
   MODAL (matches your JS: .show + aria-hidden)
====================================================== */

/* Hidden by default */
.amg-modal-overlay{
  position: fixed;
  inset: 0;
  display: none;                 /* <-- keeps it off the page */
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.70);
  z-index: 9999;
}

/* Show modal if JS adds .show OR aria-hidden becomes false */
.amg-modal-overlay.show,
.amg-modal-overlay[aria-hidden="false"]{
  display: flex;
}

.amg-modal{
  width: min(520px, 100%);
  background: rgba(15,23,42,0.98);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

.amg-modal h2{
  margin: 0 0 10px;
}

.amg-modal p{
  margin: 0 0 16px;
  opacity: 0.9;
}

.amg-btn{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff;
  font-weight: 800;
}