/* =============================================
   CONTACT PAGE — contact.css
   ============================================= */

.page-hero {
  background: linear-gradient(135deg, #1a73e8 0%, #4285f4 50%, #1557b0 100%);
  padding: 120px 0 80px; text-align:center; position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 60%, rgba(255,255,255,0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 30%, rgba(255,255,255,0.06) 0%, transparent 40%);
}
.page-hero-content { position:relative; z-index:1; }
.page-hero .section-tag { background:rgba(255,255,255,0.2); color:#fff; border-color:rgba(255,255,255,0.3); }
.page-hero h1 { font-family:var(--font-display); font-size:clamp(2rem,5vw,3.2rem); font-weight:800; color:#fff; margin:14px 0 12px; }
.page-hero p  { color:rgba(255,255,255,0.82); font-size:1.1rem; }
.hero-wave { line-height:0; }
.hero-wave svg { display:block; width:100%; height:60px; }

/* QUICK CONTACT */
.quick-contact { background:var(--bg); }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.quick-card {
  background:#fff; border-radius:var(--radius); padding:30px 22px;
  text-align:center; text-decoration:none; color:var(--text);
  box-shadow:var(--card-shadow); border:2px solid transparent;
  transition:all 0.3s; display:block;
}
.quick-card:hover { transform:translateY(-6px); border-color:var(--primary); }
.quick-wa:hover   { border-color:var(--green); }
.qc-icon  { font-size:2.8rem; margin-bottom:12px; }
.quick-card h3 { font-family:var(--font-display); font-size:1.05rem; font-weight:800; margin-bottom:8px; color:var(--text); }
.qc-num   { font-size:1.2rem; font-weight:800; color:var(--primary); margin-bottom:6px; }
.quick-wa .qc-num { color:var(--green); }
.qc-hint  { color:var(--text-light); font-size:0.82rem; }
.qc-hours { color:var(--text-light); font-size:0.9rem; font-weight:600; line-height:1.7; }

/* MAIN CONTACT LAYOUT */
.contact-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start; }

/* Shop blocks */
.shop-block {
  display:flex; gap:18px; margin-bottom:28px;
  background:var(--bg); border-radius:var(--radius); padding:24px;
  border:2px solid #e8f0fe; transition:all 0.3s;
}
.shop-block:hover { border-color:var(--primary); background:#fff; }
.shop-icon-wrap { font-size:2.4rem; flex-shrink:0; }
.shop-details .shop-label {
  display:inline-block; background:var(--primary); color:#fff;
  font-size:0.78rem; font-weight:700; padding:4px 12px; border-radius:50px;
  margin-bottom:8px;
}
.shop-details h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:800; margin-bottom:8px; color:var(--text); }
.shop-details p  { color:var(--text-light); font-size:0.9rem; line-height:1.9; margin-bottom:10px; }
.shop-phone { display:block; font-size:1.1rem; font-weight:800; color:var(--primary); text-decoration:none; margin-bottom:10px; }

/* Map */
.map-embeds-container { margin-top: 40px; }

.map-embeds-container .map-section-title {
  font-family: var(--font-display);
  font-weight: 800;
  margin-bottom: 24px;
  font-size: 1.4rem;
  text-align: center;
}

.map-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns side-by-side on desktop */
  gap: 24px; /* Space between map blocks */
  margin-top: 30px; /* Space below the main map title */
}

.map-embed-block {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.map-embed-block h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 15px; /* Adjusted margin for consistency */
  font-size: 1.15rem; /* Slightly larger title for prominence */
  color: var(--primary); /* Highlight the title */
}

.map-embed-block iframe {
  width: 100%;
  height: 300px; /* Consistent height for all maps */
  border: 0;
  border-radius: var(--radius); /* Match parent block radius */
}
/* FORM */
.form-card {
  background:var(--bg); border-radius:var(--radius); padding:40px 36px;
  border:2px solid #e8f0fe; position:sticky; top:90px;
}
.form-header { margin-bottom:28px; }
.form-header h2 { font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:var(--text); margin-bottom:6px; }
.form-header p  { color:var(--text-light); font-size:0.95rem; }

.form-group { margin-bottom:18px; }
.form-group label { display:block; font-weight:700; margin-bottom:7px; font-size:0.92rem; color:var(--text); }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:13px 16px;
  border:2.5px solid #e8f0fe; border-radius:12px;
  font-family:var(--font-body); font-size:1rem; color:var(--text);
  background:#fff; transition:border-color 0.2s; outline:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--primary); }
.form-group textarea { resize:vertical; }
.form-note { text-align:center; color:var(--text-light); font-size:0.85rem; margin-top:12px; }

/* FAQ */
.faq-section { background:var(--bg); }
.faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.faq-item {
  background:#fff; border-radius:var(--radius); padding:26px 28px;
  box-shadow:var(--card-shadow); border-left:5px solid var(--primary);
  transition:all 0.3s;
}
.faq-item:hover { transform:translateX(4px); box-shadow:0 12px 36px rgba(26,115,232,0.16); }
.faq-q { font-family:var(--font-display); font-size:1.05rem; font-weight:800; color:var(--text); margin-bottom:10px; }
.faq-a { color:var(--text-light); font-size:0.94rem; line-height:1.8; }

/* RESPONSIVE */
@media (max-width:1000px) {
  .quick-grid    { grid-template-columns:1fr 1fr; }
  .contact-layout{ grid-template-columns:1fr; }
  .form-card     { position:static; }
  .shop-block    { flex-direction:column; }
  .map-grid-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px; /* Space for the horizontal scrollbar */
  }
  .map-embed-block {
    flex: 0 0 85%; /* Take up 85% of screen width so users see there is more to swipe */
    scroll-snap-align: center;
  }
  .faq-grid      { grid-template-columns:1fr; }
}