/* ==========================================================================
   GiveRefer — Contact Us redesign
   Scoped under .gr-contact. px units (legacy html{font-size:10px}).
   High-specificity + !important to beat upgrade/css/main.css button{...!important}
   and style.css #wrapper h1 / .form-control rules.
   ========================================================================== */

.gr-contact {
  --grc-pink: #ec2d7a;
  --grc-magenta: #c026d3;
  --grc-violet: #6d28d9;
  --grc-fg: #1c1530;
  --grc-muted: #6b6580;
  --grc-border: #ece8f2;
  --grc-gradient: linear-gradient(100deg, #ec2d7a 0%, #c026d3 50%, #6d28d9 100%);
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg, #faf7ff 0%, #f6f0fb 100%);
}

/* ============================ HERO ============================ */
.gr-contact__hero {
  position: relative;
  overflow: hidden;
  padding: 56px 16px 0;
  background:
    radial-gradient(720px 380px at 72% 26%, rgba(192, 38, 211, 0.14), transparent 62%),
    radial-gradient(520px 320px at 12% 30%, rgba(236, 45, 122, 0.10), transparent 60%),
    linear-gradient(180deg, #f4e9fb 0%, #f3ecfc 40%, #eaf5ea 100%);
}
/* optional real background illustration (drop public/images/contact-hero-bg.*) */
.gr-contact__hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
/* CSS approximation of the landscape: faint city skyline + green ground band */
.gr-contact__hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 60px; height: 90px;
  z-index: 0;
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 360px 90px;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='90' viewBox='0 0 360 90'%3E%3Cg fill='%23c9a8e8'%3E%3Crect x='4' y='40' width='26' height='50'/%3E%3Crect x='34' y='24' width='20' height='66'/%3E%3Crect x='58' y='52' width='24' height='38'/%3E%3Crect x='86' y='14' width='18' height='76'/%3E%3Crect x='108' y='44' width='28' height='46'/%3E%3Crect x='140' y='30' width='22' height='60'/%3E%3Crect x='166' y='50' width='26' height='40'/%3E%3Crect x='196' y='20' width='18' height='70'/%3E%3Crect x='218' y='46' width='30' height='44'/%3E%3Crect x='252' y='34' width='20' height='56'/%3E%3Crect x='276' y='52' width='26' height='38'/%3E%3Crect x='306' y='26' width='18' height='64'/%3E%3Crect x='328' y='48' width='28' height='42'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
/* green ground band */
.gr-contact__hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 130px;
  z-index: 0;
  background: linear-gradient(180deg, transparent, rgba(150, 206, 165, 0.45));
  pointer-events: none;
}

.gr-contact__hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  min-height: 320px;
}

.gr-contact__hero-text { position: relative; }
.gr-contact h1.gr-contact__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 58px !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  letter-spacing: -1px;
  margin: 0 0 16px !important;
  background-image: var(--grc-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.gr-contact__subtitle {
  font-size: 19px;
  line-height: 1.45;
  color: #3a2f52;
  margin: 0;
  max-width: 380px;
  font-weight: 400;
}

/* hero sparkles */
.gr-contact__spark {
  position: absolute;
  color: var(--grc-pink);
  pointer-events: none;
}
.gr-contact__spark--1 { top: -10px; left: 330px; width: 26px; height: 26px; color: var(--grc-magenta); }
.gr-contact__spark--2 { top: 70px;  left: 360px; width: 20px; height: 20px; }
.gr-contact__spark--3 { top: 120px; left: 318px; width: 14px; height: 14px; opacity: .7; }

/* hero genie + floating chips */
.gr-contact__hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 460px;
}
.gr-contact__genie {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-bottom: -36px;            /* overlap the cards row, like the mock */
  filter: drop-shadow(0 26px 40px rgba(109, 40, 217, 0.32));
}
.gr-contact__chip {
  position: absolute;
  z-index: 3;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 16px 34px -10px rgba(28, 21, 48, 0.4);
}
.gr-contact__chip svg { width: 30px; height: 30px; }
.gr-contact__chip--mail  { top: 70px;  left: 30px;  background: linear-gradient(135deg, #a855f7, #7c3aed); }
.gr-contact__chip--wa    { top: 36px;  right: 0;    background: linear-gradient(135deg, #25D366, #128C7E); }
.gr-contact__chip--phone { bottom: 150px; right: 24px; background: linear-gradient(135deg, #ec2d7a, #c026d3); }

/* ============================ CONTACT CARDS ============================ */
.gr-contact__cards {
  position: relative;
  z-index: 4;
  max-width: 1180px;
  margin: -20px auto 0;
  padding: 0 0 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.gr-contact__card {
  background: #fff;
  border: 1px solid var(--grc-border);
  border-radius: 18px;
  padding: 26px 18px 18px;
  text-align: center;
  box-shadow: 0 18px 44px -22px rgba(108, 40, 217, 0.3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gr-contact__card:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -22px rgba(108, 40, 217, 0.42); }
.gr-contact__card-icon {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 12px 26px -10px rgba(28, 21, 48, 0.35);
}
.gr-contact__card-icon svg { width: 28px; height: 28px; }
.gr-contact__card-icon--violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.gr-contact__card-icon--pink  { background: linear-gradient(135deg, #f43f8e, #ec2d7a); }
.gr-contact__card-icon--wa    { background: linear-gradient(135deg, #25D366, #128C7E); }
.gr-contact__card-icon--blue  { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.gr-contact__card-title {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 6px;
}
/* title colour matches the card's icon (per the mock) */
.gr-contact__card-title--violet { color: #6d28d9; }
.gr-contact__card-title--pink   { color: #ec2d7a; }
.gr-contact__card-title--green  { color: #16a34a; }
.gr-contact__card-title--blue   { color: #2563eb; }
.gr-contact__card-value { font-size: 14.5px; color: var(--grc-muted); margin: 0 0 14px; word-break: break-word; }
.gr-contact__card-value a { color: var(--grc-muted); text-decoration: none; }
.gr-contact__card-value a:hover { color: var(--grc-magenta); }
.gr-contact__deco { width: 82%; height: 28px; margin: 4px auto 0; display: block; }
.gr-contact__deco--violet { color: #6d28d9; }
.gr-contact__deco--pink   { color: #ec2d7a; }
.gr-contact__deco--green  { color: #16a34a; }
.gr-contact__deco--blue   { color: #2563eb; }
.gr-contact__deco-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
}
.gr-contact__deco-play svg { width: 12px; height: 12px; }
.gr-contact__deco-wrap { position: relative; }

/* ============================ FORM + MAP ============================ */
.gr-contact__formsec { padding: 36px 16px 64px; }
.gr-contact__shell {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 26px;
  padding: 2px;
  background: linear-gradient(120deg, rgba(236,45,122,.5), rgba(192,38,211,.45) 50%, rgba(109,40,217,.5));
  box-shadow: 0 30px 70px -34px rgba(108, 40, 217, 0.4);
}
.gr-contact__shell-inner {
  background: #fff;
  border-radius: 24px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 34px;
  align-items: start;
}

/* form */
.gr-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.gr-contact__group { margin-bottom: 18px; }
.gr-contact__label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--grc-fg);
  margin: 0 0 8px;
}
.gr-contact__label .req { color: #ef4444; }
.gr-contact__field { position: relative; }
.gr-contact__field-icon {
  position: absolute;
  left: 16px; top: 19px;
  width: 20px; height: 20px;
  color: var(--grc-magenta);
  pointer-events: none;
}
.gr-contact .gr-contact__input,
.gr-contact .gr-contact__textarea {
  width: 100%;
  border: 1px solid var(--grc-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  padding: 0 16px 0 46px !important;
  height: 58px;
  font-size: 15.5px;
  color: var(--grc-fg);
  font-family: inherit;
  outline: none;
  box-shadow: 0 6px 16px -12px rgba(108, 40, 217, 0.2);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gr-contact .gr-contact__textarea {
  height: auto;
  min-height: 120px;
  padding: 16px 16px 16px 46px !important;
  resize: vertical;
  line-height: 1.5;
}
.gr-contact .gr-contact__input::placeholder,
.gr-contact .gr-contact__textarea::placeholder { color: #a59fb5; }
.gr-contact .gr-contact__input:focus,
.gr-contact .gr-contact__textarea:focus {
  border-color: var(--grc-magenta) !important;
  box-shadow: 0 0 0 4px rgba(192, 38, 211, 0.12) !important;
}

.gr-contact__recaptcha { margin: 4px 0 22px; max-width: 100%; overflow: hidden; }
.gr-contact__recaptcha .g-recaptcha { transform-origin: 0 0; }
/* the widget is a fixed ~304px iframe — scale it down so it never overflows narrow screens */
@media (max-width: 400px) {
  .gr-contact__recaptcha .g-recaptcha { transform: scale(0.85); }
}
@media (max-width: 340px) {
  .gr-contact__recaptcha .g-recaptcha { transform: scale(0.78); }
}

.gr-contact__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.gr-contact button.gr-contact__submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 250px;
  height: 60px;
  padding: 0 32px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-image: var(--grc-gradient) !important;
  background-color: transparent !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 16px 34px -12px rgba(192, 38, 211, 0.6) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gr-contact button.gr-contact__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -12px rgba(192, 38, 211, 0.7) !important;
}
.gr-contact__submit svg { width: 20px; height: 20px; }
.gr-contact__note {
  font-family: 'Lily Script One', cursive;
  font-size: 18px;
  color: var(--grc-magenta);
  line-height: 1.2;
}

/* alerts */
.gr-contact__alert {
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 14.5px;
  font-weight: 500;
}
.gr-contact__alert--success { background: #e7f9ee; color: #1a8a4d; border: 1px solid #bfe9cf; }
.gr-contact__alert--error { background: #fde8ef; color: #b1245a; border: 1px solid #f6c2d5; }

/* map */
.gr-contact__map {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--grc-border);
  box-shadow: 0 14px 34px -18px rgba(108, 40, 217, 0.3);
  min-height: 480px;
  height: 100%;
}
.gr-contact__map iframe { display: block; width: 100%; height: 100%; min-height: 480px; border: 0; }

/* ============================ Responsive ============================ */
@media (max-width: 991px) {
  .gr-contact__hero-inner { grid-template-columns: 1fr; text-align: center; }
  .gr-contact__hero-text { order: 1; }
  .gr-contact__hero-visual { order: 2; min-height: 320px; }
  .gr-contact__subtitle { margin-left: auto; margin-right: auto; }
  .gr-contact__spark { display: none; }
  .gr-contact__cards { grid-template-columns: repeat(2, 1fr); }
  .gr-contact__shell-inner { grid-template-columns: 1fr; }
  .gr-contact__map, .gr-contact__map iframe { min-height: 360px; }
}
@media (max-width: 575px) {
  .gr-contact h1.gr-contact__title { font-size: 42px !important; }
  .gr-contact__subtitle { font-size: 16.5px; }
  .gr-contact__cards { grid-template-columns: 1fr; }
  .gr-contact__row { grid-template-columns: 1fr; gap: 0; }
  .gr-contact__shell-inner { padding: 24px 18px; }
  .gr-contact button.gr-contact__submit { width: 100%; min-width: 0; }
  .gr-contact__genie { max-width: 230px; }
}