/* =============================================================
   ALAQAAR — CONTACT, BUTTONS, FLOATING BUTTONS, PHONE PASS (redesign phase 4)
   Ported from the "Contact: soft neumorphic form" and "buttons" blocks of
   docs/redesign/alaqaar-home-reference.html. Markup: Pages/Shared/_Contact.cshtml,
   _FloatingButtons.cshtml. Loaded last, so it wins over older rules.
   ============================================================= */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- buttons: two levels, site-wide ----------
   Primary = gold fill (Get a Consultation, Request a Consultation, Send Message: .btn--primary).
   Everything else = transparent with a 1.5px gold outline and ink text (.btn--gold, .btn--outline-dark,
   .btn--outline-light), getting a light gold tint on hover. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--gold);
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: transform .15s, background .2s, color .2s, box-shadow .2s, filter .2s;
}
.btn:hover { transform: none; background: rgba(178,138,80,.14); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn .icon { width: 1.1rem; height: 1.1rem; }
.btn--block { width: 100%; }
.btn--outline-light { color: #fff; border-color: rgba(214,176,119,.8); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); }
.btn--primary {
  border-color: transparent;
  background: linear-gradient(180deg, #d6b077 0%, #b28a50 60%, #9c763f 100%);
  color: #1c1a17;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(147,112,63,.42), inset 0 2px 0 rgba(255,255,255,.35);
}
[dir="rtl"] .btn--primary { letter-spacing: 0; text-transform: none; }
.btn--primary:hover { background: linear-gradient(180deg, #d6b077 0%, #b28a50 60%, #9c763f 100%); filter: brightness(1.05); box-shadow: 0 14px 28px rgba(147,112,63,.5), inset 0 2px 0 rgba(255,255,255,.35); }
.btn--primary:active { transform: translateY(1px) scale(.99); box-shadow: inset 4px 4px 10px rgba(110,80,40,.45), inset -3px -3px 8px rgba(255,230,190,.4); }
.btn:disabled { opacity: .6; cursor: default; }

/* ---------- floating Call / WhatsApp: small ivory circles, icon only ---------- */
.floating-actions {
  position: fixed;
  left: 1.1rem;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.1rem);
  z-index: 240;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: #f7f0e8;
  border: 1px solid rgba(178,138,80,.5);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .2s;
}
.fa:hover { transform: translateY(-2px); }
.fa:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.fa .icon { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; }
.fa--call { color: var(--gold-dark); }
.fa--wa { color: #1fa855; }

/* ---------- contact: info card + soft form ---------- */
.contact { position: relative; overflow: hidden; background: transparent; color: var(--ink); padding-block: 5.5rem; padding-inline: 16px; --heading-pill-color: var(--ink); }
.contact .section-subtitle { color: var(--muted); }
.contact .section-heading { position: relative; z-index: 2; margin-bottom: 2.5rem; }
.contact__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2rem,4vw,4rem); align-items: center; }
.nm-inset { background: var(--nm-bg); box-shadow: inset 6px 6px 12px var(--nm-lo), inset -6px -6px 12px var(--nm-hi); }
.contact__info { border-radius: 2rem; padding: clamp(1.5rem,3vw,2.5rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.contact__info h3 { margin: 0; font: 700 1.15rem var(--font-body); color: var(--ink); }
.c-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; width: 100%; }
.c-list li { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.c-ico { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; color: var(--gold); }
.c-ico .icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.5; }
.c-list small { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
[dir="rtl"] .c-list small { letter-spacing: 0; }
.c-list b, .c-list a { font-weight: 600; font-size: 1rem; color: var(--ink); overflow-wrap: anywhere; }
.c-list a:hover { color: var(--gold-dark); }
.contact__info .btn { align-self: stretch; }
.socials { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.socials a { width: auto; height: auto; border: 0; border-radius: 0; display: inline-flex; color: var(--gold-dark); background: none; }
.socials a:hover { color: var(--ink); transform: none; background: none; }
.socials .icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.4; }

.form-stage { position: relative; display: grid; place-items: center; padding: clamp(2rem,4vw,3rem) clamp(.5rem,2vw,1.5rem); }
.form-halo {
  position: absolute; top: 0; left: 50%; translate: -50% 0; height: 100%; width: auto; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  box-shadow: inset 18px 18px 40px var(--nm-lo), inset -18px -18px 40px var(--nm-hi);
}
.form-halo::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; box-shadow: 16px 16px 36px var(--nm-lo), -16px -16px 36px var(--nm-hi); }
.contact-form { position: relative; width: min(100%,520px); border-radius: 2.4rem; padding: clamp(1.6rem,3.5vw,2.6rem); display: flex; flex-direction: column; gap: 1.05rem; }
.contact-form h3 {
  margin: 0; text-align: center; font: 700 clamp(1.7rem,1.3rem + 1.3vw,2.3rem) 'Jost', var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); text-shadow: 2px 2px 3px var(--nm-hi), -1px -1px 2px rgba(150,130,110,.35);
}
[dir="rtl"] .contact-form h3 { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.contact-form .lead { margin: -.5rem 0 .4rem; text-align: center; color: var(--muted); font-size: .92rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.field { position: relative; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.field .box { position: relative; display: flex; align-items: center; border-radius: 1rem; }
.field .box > svg { position: absolute; inset-inline-start: 1.05rem; width: 1.05rem; height: 1.05rem; color: var(--muted); pointer-events: none; transition: color .2s; }
.field.ta .box > svg { top: 1rem; }
.field input, .field select, .field textarea {
  width: 100%; border: 0; background: transparent; padding: 1rem 1.1rem; padding-inline-start: 2.85rem; font: 500 .98rem var(--font-body); color: var(--ink);
  border-radius: 1rem; outline: none; -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.55; }
.field select { cursor: pointer; padding-inline-end: 2.6rem; }
.field select option { color: #232d36; background: #fff; }
.field .chev { position: absolute; inset-inline-end: 1.1rem; width: .55rem; height: .55rem; border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-25%); pointer-events: none; }
.field ::placeholder { color: var(--muted); opacity: .85; }
.field .box:focus-within { box-shadow: inset 6px 6px 12px var(--nm-lo), inset -6px -6px 12px var(--nm-hi), 0 0 0 2px rgba(178,138,80,.55); }
.field .box:focus-within > svg { color: var(--gold); }
.field-error { font-size: .8rem; color: #a3392b; padding-inline-start: .6rem; min-height: 0; }
.field:has(.input-validation-error) .box { box-shadow: inset 6px 6px 12px var(--nm-lo), inset -6px -6px 12px var(--nm-hi), 0 0 0 2px rgba(163,57,43,.45); }
html[data-mode="dark"] .field-error { color: #e58a7c; }
.alert { border-radius: 1rem; padding: .85rem 1rem; margin: 0; font-size: .92rem; line-height: 1.5; font-weight: 500; }
.alert--success { background: transparent; color: #1f5a3a; border: 0; box-shadow: inset 4px 4px 10px var(--nm-lo), inset -4px -4px 10px var(--nm-hi); border-inline-start: 4px solid #3f8a5d; }
.alert--error { background: transparent; color: #a3271f; border: 0; box-shadow: inset 4px 4px 10px var(--nm-lo), inset -4px -4px 10px var(--nm-hi); border-inline-start: 4px solid #a3392b; }
html[data-mode="dark"] .alert--success { color: #8fd3a9; }
html[data-mode="dark"] .alert--error { color: #f0a399; }
.honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .form-stage { order: -1; }
}
@media (max-width: 575.98px) {
  .row2 { grid-template-columns: 1fr; }
  .form-halo { display: none; }
  .contact-form { border-radius: 1.8rem; }
  .contact { padding-block: 3.5rem; }
}

/* ---------- phone pass: tighter spacing, nothing scrolls sideways (360-430px) ---------- */
html, body { overflow-x: clip; }
@media (max-width: 600px) {
  .floating-actions { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); left: .8rem; gap: .55rem; }
  .fa { width: 2.6rem; height: 2.6rem; }
  .fa .icon { width: 1.15rem; height: 1.15rem; }
  .sec { padding-block: 3rem; }
  .section-heading { margin-bottom: 1.4rem; }
  .site-footer { padding-top: 2.5rem; }
  .f-social { gap: 1rem; }
  .btn { padding: .8rem 1.4rem; }
  .talk-section { padding-block: 1rem; }
  .heading-pill { font-size: 1.05rem; }
}
@media (max-width: 430px) {
  .carousel .card figcaption b { letter-spacing: .1em; }
  .g-badge { inset-inline-end: .25rem; }
  .map { min-height: 260px; }
  .features li, .d-item, .g-card { padding-inline: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .fa { transition: none; }
}