/* =====================================================
   PILLOWEB — contact.css
   ===================================================== */

.contact-hero {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 5rem;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.contact-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 80% at 80% -5%,  rgba(42,143,255,0.11) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 5%  80%,  rgba(42,255,178,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.contact-hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.breadcrumb {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--text-muted);
  margin-bottom: 1.75rem;
  font-family: var(--font-display); font-weight: 600; letter-spacing: .02em;
}
.breadcrumb a { color: var(--text-secondary); transition: color .2s; }
.breadcrumb a:hover { color: var(--text-primary); }
.contact-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text-primary); margin-bottom: 1.1rem;
}
.contact-sub {
  font-size: 1rem; color: var(--text-secondary);
  line-height: 1.75; margin-bottom: 2rem; max-width: 480px;
}
.contact-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .85rem; margin-bottom: 2rem;
}
.ccard {
  display: flex; align-items: flex-start; gap: .85rem;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  color: inherit; transition: all .25s var(--ease);
}
.ccard:hover { border-color: var(--border-mid); transform: translateY(-2px); }
.ccard-icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(42,143,255,.1); color: var(--blue);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ccard-label {
  display: block; font-family: var(--font-display);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .2rem;
}
.ccard-value { display: block; font-size: .875rem; font-weight: 500; color: var(--text-primary); }
.trust-row { display: flex; flex-direction: column; gap: .5rem; }
.trust-item {
  display: flex; align-items: center; gap: .55rem;
  font-size: .855rem; color: var(--text-secondary); font-weight: 500;
}

/* ---- FORM PANEL ---- */
.form-panel {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 2.5rem;
}
.form-panel-header { margin-bottom: 1.75rem; }
.form-panel-header h2 {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 800;
  color: var(--text-primary); margin-bottom: .35rem; letter-spacing: -.02em;
}
.form-panel-header p { font-size: .9rem; color: var(--text-secondary); }
.form-error-banner {
  display: flex; align-items: center; gap: .65rem;
  background: rgba(255,109,109,.08); border: 1px solid rgba(255,109,109,.25);
  border-radius: 9px; padding: .75rem 1rem;
  font-size: .875rem; color: #FF6D6D; margin-bottom: 1.25rem; font-weight: 500;
}
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fgroup { display: flex; flex-direction: column; gap: .4rem; }
.fgroup label {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  color: var(--text-primary); letter-spacing: .02em;
}
.fgroup label span { color: #FF6D6D; margin-left: .1rem; }
.finput-wrap { position: relative; display: flex; align-items: center; }
.finput-wrap svg { position: absolute; left: .9rem; color: var(--text-muted); pointer-events: none; flex-shrink: 0; }
.finput-wrap input,
.finput-wrap select {
  width: 100%; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: 10px;
  padding: .7rem .9rem .7rem 2.4rem;
  color: var(--text-primary); font-family: var(--font-body); font-size: .9rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.finput-wrap input:focus,
.finput-wrap select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(42,143,255,.12);
}
.finput-wrap input::placeholder { color: var(--text-muted); }
.fgroup--err .finput-wrap input,
.fgroup--err .finput-wrap select,
.fgroup--err textarea { border-color: rgba(255,109,109,.5); }
.ferr { font-size: .78rem; color: #FF6D6D; font-weight: 500; }
.fselect-wrap::after {
  content: ''; position: absolute; right: .9rem;
  width: 10px; height: 6px;
  background: var(--text-muted);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
.fselect-wrap select { cursor: pointer; }
.fselect-wrap select option { background: var(--bg-elevated); }
.fgroup textarea {
  width: 100%; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: 10px;
  padding: .85rem 1rem; color: var(--text-primary);
  font-family: var(--font-body); font-size: .9rem; line-height: 1.65;
  resize: vertical; min-height: 140px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.fgroup textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,143,255,.12); }
.fgroup textarea::placeholder { color: var(--text-muted); }
.char-count { text-align: right; font-size: .72rem; color: var(--text-muted); margin-top: .25rem; }
.btn--submit { width: 100%; justify-content: center; padding: .9rem 1.5rem; font-size: .95rem; margin-top: .25rem; }
.form-note { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--text-muted); justify-content: center; margin-top: .35rem; }

.form-success {
  text-align: center; padding: 2rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.success-icon { animation: pop-in .4s var(--ease) both; }
@keyframes pop-in { from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }
.form-success h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.form-success p { font-size: .95rem; color: var(--text-secondary); line-height: 1.7; max-width: 380px; }
.form-success strong { color: var(--text-primary); }

/* ---- MAP ---- */
.map-section { background: var(--bg-surface); }
.map-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: stretch; min-height: 420px; }
.map-embed { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); min-height: 380px; }
.map-embed iframe { display: block; }
.map-info-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 2rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.map-info-card h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--text-primary); }
.map-info-card ul { display: flex; flex-direction: column; gap: 1.1rem; }
.map-info-card li { display: flex; align-items: flex-start; gap: .75rem; }
.map-info-card li svg { flex-shrink: 0; color: var(--blue); margin-top: 2px; }
.map-info-card strong { display: block; font-size: .75rem; font-weight: 700; font-family: var(--font-display); letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .2rem; }
.map-info-card span,
.map-info-card a { font-size: .875rem; color: var(--text-secondary); line-height: 1.55; }
.map-info-card a:hover { color: var(--text-primary); }
.map-socials { display: flex; gap: .6rem; }

/* ---- FAQ ---- */
.faq-grid { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: .6rem; }
.faq-item {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color .2s;
}
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: none; padding: 1.2rem 1.5rem;
  cursor: pointer; text-align: left;
}
.faq-q span { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
.faq-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform .3s var(--ease); }
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-q[aria-expanded="true"] ~ .faq-a,
.faq-a.open { display: block; }
.faq-a { padding: 0 1.5rem; overflow: hidden; max-height: 0; transition: max-height .35s var(--ease), padding .35s; }
.faq-a.open { max-height: 300px; padding: 0 1.5rem 1.2rem; }
.faq-a p { font-size: .9rem; color: var(--text-secondary); line-height: 1.75; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .contact-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .map-layout { grid-template-columns: 1fr; }
  .map-embed { min-height: 300px; }
}
@media (max-width: 768px) {
  .contact-cards { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
  .form-panel { padding: 1.5rem; }
  .contact-heading { font-size: clamp(1.9rem, 7vw, 2.8rem); }
}