/* contacts.css — rebuilt (photo bg per theme + glass containers) */

/* ---------- Page background images (Light/Dark) ---------- */

/* HERO section background */
.contact-hero{
  position: relative;
  padding: 60px 0 66px;
  border-bottom: 1px solid var(--border);

  background-image:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42)),
    url("../images/contacts-bg-light.80845a2ebbc2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

[data-theme="dark"] .contact-hero{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.78)),
    url("../images/contacts-bg-dark.9e7489ca7014.jpg");
}

/* FORM section background */
.contact-form{
  position: relative;
  padding: 56px 0 66px;

  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)),
    url("../images/contacts-bg-light.80845a2ebbc2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

[data-theme="dark"] .contact-form{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.84)),
    url("../images/contacts-bg-dark.9e7489ca7014.jpg");
}

/* shared inner width */
.contact-hero__inner,
.contact-form__inner{
  width: min(1120px, 92vw);
  margin: 0 auto;
}

/* hero layout */
.contact-hero__grid{
  display: grid;
  grid-template-columns: 2fr 1.9fr;
  gap: 18px;
  align-items: stretch;
}

/* ---------- LEFT VISUAL (glass) ---------- */
.contact-visual{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  overflow: hidden;
  min-height: 360px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .contact-visual{
  border-color: rgba(255,255,255,.14);
  background: rgba(10,12,18,.34);
  box-shadow: 0 24px 85px rgba(0,0,0,.45);
}

/* decorative ring */
.contact-visual__ring{
  position: absolute;
  left: 18px;
  top: 18px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  border: 10px solid color-mix(in srgb, var(--burg) 18%, transparent);
  opacity: .9;
}

/* center circle photo */
.contact-visual__photo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 230px;
  height: 230px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--orange) 35%, rgba(255,255,255,.22));
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  background-image: url("../images/t5.83a0ddf447dd.jpg"); /* можеш да смениш */
  background-size: cover;
  background-position: center;
}

/* accent dot */
.contact-visual__dot{
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--orange) 92%, #fff),
    var(--orange)
  );
  box-shadow: 0 18px 45px rgba(0,0,0,.15);
}

/* ---------- RIGHT INFO CARD (glass) ---------- */
.contact-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  overflow: hidden;
  padding: 24px 22px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .contact-card{
  border-color: rgba(255,255,255,.14);
  background: rgba(10,12,18,.34);
  box-shadow: 0 24px 85px rgba(0,0,0,.45);
}

.contact-card__title{
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 32px);
}

.contact-card__line{
  width: 78px;
  height: 3px;
  border-radius: 999px;
  margin: 10px auto 14px;
  background: linear-gradient(90deg, var(--orange), var(--blue));
}

.contact-card__rows{
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.contact-row{
  margin: 0;
  display: grid;
  gap: 4px;
  text-align: center;
}

.contact-row__label{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  color: color-mix(in srgb, var(--text) 80%, transparent);
}

[data-theme="dark"] .contact-row__label{
  color: rgba(255,255,255,.78);
}

.contact-row__value{
  font-weight: 800;
  color: color-mix(in srgb, var(--text) 92%, transparent);
  text-decoration: none;
}

[data-theme="dark"] .contact-row__value{
  color: rgba(255,255,255,.92);
}

.contact-row__value:hover{
  color: color-mix(in srgb, var(--orange) 70%, var(--text));
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Social */
.contact-social{
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.social-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  text-decoration: none;
  font-weight: 900;
  color: color-mix(in srgb, var(--blue) 70%, var(--text));
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.social-pill:hover{
  transform: translateY(-1px);
  filter: brightness(.98) saturate(1.05);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
}

[data-theme="dark"] .social-pill{
  border-color: rgba(255,255,255,.14);
  background: rgba(10,12,18,.30);
  color: rgba(255,255,255,.92);
}

/* ---------- FORM SECTION ---------- */
.contact-form__title{
  margin: 0 0 16px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 32px);
  color: rgba(255,255,255,.95);
  text-shadow: 0 14px 40px rgba(0,0,0,.25);
}

[data-theme="dark"] .contact-form__title{
  color: rgba(255,255,255,.95);
}

/* Form card gets blur too */
.form-card{
  width: min(860px, 100%);
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  padding: 18px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .form-card{
  border-color: rgba(255,255,255,.14);
  background: rgba(10,12,18,.34);
  box-shadow: 0 24px 85px rgba(0,0,0,.45);
}

/* Errors */
.form-errors{
  border: 1px solid color-mix(in srgb, var(--burg) 35%, rgba(255,255,255,.22));
  background: color-mix(in srgb, var(--burg) 50%, transparent);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--text) 92%, transparent);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .form-errors{
  color: rgba(255,255,255,.92);
  background: rgba(135,10,44,.18);
  border-color: rgba(255,255,255,.14);
}

.form-errors ul{
  margin: 8px 0 0;
  padding-left: 18px;
}
.form-errors li{ margin: 4px 0; }

/* Grid */
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field{
  display: grid;
  gap: 8px;
}

.field--full{
  grid-column: 1 / -1;
}

.field label{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 25px rgba(0,0,0,.20);
}

/* Inputs */
.field input,
.field textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  padding: 12px 12px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.95);
  outline: none;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.field input::placeholder,
.field textarea::placeholder{
  color: rgba(255,255,255,.70);
}

[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea{
  border-color: rgba(255,255,255,.14);
  background: rgba(10,12,18,.28);
}

.field input:focus,
.field textarea:focus{
  border-color: color-mix(in srgb, var(--orange) 55%, rgba(255,255,255,.22));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 18%, transparent);
}

/* Submit */
.form-actions{
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .contact-hero__grid{
    grid-template-columns: 1fr;
  }
  .contact-visual{
    min-height: 320px;
  }
  .contact-visual__photo{
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 560px){
  .contact-hero,
  .contact-form{
    padding: 44px 0 54px;
  }

  .form-grid{
    grid-template-columns: 1fr;
  }
}


/* ✅ Make FORM section darker in LIGHT mode (so fields pop) */
.contact-form{
  position: relative;
  padding: 56px 0 66px;

  /* darker overlay than before */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.55)),
    url("../images/contacts-bg-light.80845a2ebbc2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* optional: make inputs a bit more solid in LIGHT mode */
.contact-form .field input,
.contact-form .field textarea{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
}

.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder{
  color: rgba(255,255,255,.78);
}

/* ✅ HERO GRID: give breathing room from section edges */
.contact-hero__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;

  /* new */
  padding: 22px 0;                 /* space from top/bottom of hero section */
  align-items: center;
}

/* ✅ Make both containers smaller and centered inside their columns */
.contact-visual,
.contact-card{
  width: 100%;
  max-width: 460px;                /* smaller blocks */
  margin: 0 auto;                  /* center inside each grid column */
}

/* ✅ Make the visual a bit shorter */
.contact-visual{
  min-height: 320px;               /* was 360px */
}

/* ✅ Slightly reduce card padding */
.contact-card{
  padding: 20px 18px;              /* was 24px 22px */
}

/* Responsive: on smaller screens keep nice spacing */
@media (max-width: 980px){
  .contact-hero__grid{
    grid-template-columns: 1fr;
    padding: 18px 0;
    gap: 14px;
  }

  .contact-visual,
  .contact-card{
    max-width: 520px;              /* a bit wider when stacked */
  }

  .contact-visual{
    min-height: 300px;
  }
}

@media (max-width: 560px){
  .contact-hero__grid{ padding: 14px 0; }
  .contact-visual,
  .contact-card{ max-width: 100%; }
  .contact-visual{ min-height: 270px; }
}