/* ============================================================
   contact.css — Contact Page Styles
   Gowtham Advanced Physiotherapy
   Depends on: global.css
============================================================ */

/* ── CONTACT INFO + MESSAGE FORM LAYOUT ── */
.contact-layout { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 76vh; }

/* Left info panel */
.c-info { background: var(--blue); padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; }
.c-info h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px,3.5vw,50px); font-weight: 300; color: var(--white); margin-bottom: 14px; line-height: 1.1; }
.c-info > p { font-size: 15px; color: rgba(205,215,214,.78); line-height: 1.75; margin-bottom: 44px; }
.c-items { display: flex; flex-direction: column; gap: 24px; }
.ci-i { display: flex; gap: 16px; align-items: flex-start; }
.ci-ico { width: 46px; height: 46px; background: rgba(248,112,96,.14); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; margin-top: 2px; }
.ci-lbl { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 4px; }
.ci-val { font-size: 15px; color: var(--white); font-weight: 400; line-height: 1.55; }
.soc-row { display: flex; gap: 10px; margin-top: 36px; }
.soc-btn { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); font-size: 13px; cursor: none; text-decoration: none; transition: all .3s; }
.soc-btn:hover { border-color: var(--coral); color: var(--coral); }

/* Right message form panel */
.c-form-panel { background: var(--white); padding: 80px 68px; display: flex; flex-direction: column; justify-content: center; }
.c-form-panel h3 { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 400; color: var(--blue); margin-bottom: 32px; }
.fg { margin-bottom: 22px; }
.fg label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 9px; color: var(--beige); font-weight: 600; }
.fg input,
.fg textarea,
.fg select {
  width: 100%; border: none; border-bottom: 1.5px solid var(--grey);
  padding: 11px 0; font-family: inherit; font-size: 15px;
  outline: none; transition: border-color .3s; background: transparent; color: var(--blue);
}
.fg input:focus,
.fg textarea:focus,
.fg select:focus { border-color: var(--coral); }
.fg select { cursor: none; appearance: none; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sub-btn {
  width: 100%; padding: 16px; background: var(--coral); color: var(--white);
  border: 2px solid var(--coral); font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  border-radius: 3px; cursor: none; transition: all .3s; margin-top: 6px;
}
.sub-btn:hover { background: transparent; color: var(--coral); }

/* ── BOOKING SECTION ── */
.booking-sec { display: grid; grid-template-columns: 1fr 1.2fr; min-height: 680px; }

/* Booking left panel */
.book-left { background: var(--deep); padding: 96px 60px; display: flex; flex-direction: column; justify-content: center; }
.book-left h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px,3.5vw,48px); font-weight: 400; color: var(--white); margin-bottom: 20px; line-height: 1.1; }
.book-left > p { color: var(--grey); font-size: 15px; line-height: 1.75; margin-bottom: 38px; }
.book-feats { list-style: none; }
.book-feats li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.bf-ico { width: 42px; height: 42px; background: rgba(248,112,96,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.bf-txt h4 { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 3px; }
.bf-txt p { font-size: 12px; color: var(--grey); line-height: 1.5; }

/* Booking right form */
.book-right { padding: 80px 68px; background: var(--white); display: flex; flex-direction: column; justify-content: center; }
.book-right h3 { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 400; color: var(--blue); margin-bottom: 32px; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ig { margin-bottom: 20px; }
.ig label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 9px; color: var(--beige); font-weight: 600; }
.ig input,
.ig textarea,
.ig select {
  width: 100%; border: none; border-bottom: 1.5px solid var(--grey);
  padding: 11px 0; font-family: inherit; font-size: 15px;
  outline: none; transition: border-color .3s; background: transparent; color: var(--blue);
}
.ig input:focus,
.ig textarea:focus,
.ig select:focus { border-color: var(--coral); }
.ig select { cursor: none; appearance: none; }
.book-btn {
  width: 100%; padding: 16px; background: var(--coral); color: var(--white);
  border: 2px solid var(--coral); font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  border-radius: 3px; cursor: none; transition: all .3s; margin-top: 4px;
}
.book-btn:hover { background: transparent; color: var(--coral); }

/* ── MAP ── */
.map-sec { padding: 60px 60px 80px; background: var(--light); }
.map-box {
  background: var(--white); border-radius: 8px; height: 340px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; border: 1.5px solid var(--grey); position: relative; overflow: hidden;
}
.map-bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(16,37,66,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(16,37,66,.07) 1px, transparent 1px);
  background-size: 36px 36px;
}
.map-pin { font-size: 50px; z-index: 1; }
.map-nm { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--blue); z-index: 1; }
.map-addr { font-size: 13px; color: var(--mid); z-index: 1; text-align: center; line-height: 1.6; }

/* ── FAQ ── */
.faq-sec { padding: 96px 60px; background: var(--white); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; }
.faq-i { border: 1px solid var(--grey); border-radius: 4px; padding: 32px 32px; cursor: none; transition: all .3s; }
.faq-i:hover { border-color: var(--coral); box-shadow: 0 8px 30px rgba(16,37,66,.08); }
.faq-q { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--blue); margin-bottom: 12px; display: flex; align-items: flex-start; gap: 12px; }
.faq-q::before { content: 'Q'; width: 28px; height: 28px; background: var(--coral); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.faq-a { font-size: 14px; color: var(--mid); line-height: 1.75; padding-left: 40px; }

/* ── RESPONSIVE ── */
@media (max-width: 1080px) {
  .contact-layout, .booking-sec { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .f2, .fr { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr 1fr; }
  .c-info, .c-form-panel, .book-left, .book-right, .map-sec, .faq-sec { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 540px) {
  .faq-grid { grid-template-columns: 1fr; }
}