/* Contact section + contact form for szempillatanfolyam.hu.
   Marveen, 2026-09-01. Replaces the leftover Elementor/Fluent Forms block on
   the homepage (element 58d33f3) and restyles the same form on /kapcsolat/.
   Revert: drop the <link> to this file and restore the .bak HTML files. */

.mvk {
  --mvk-pink: #fd5c93;
  --mvk-pink-d: #d93d74;
  --mvk-ink: #1e1418;
  --mvk-ink2: #6d5f66;
  --mvk-line: #f0dae3;
  --mvk-card: #fff;
  --mvk-soft: #fff3f7;
  box-sizing: border-box;
  padding: 64px 0 72px;
  background: linear-gradient(180deg, #fff8fb 0%, #fff 45%, #fff8fb 100%);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--mvk-ink);
}
.mvk *, .mvk *::before, .mvk *::after { box-sizing: border-box; }
.mvk-in { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- heading ---------- */
.mvk-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.mvk-kicker {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mvk-pink);
  background: var(--mvk-soft); border: 1px solid var(--mvk-line);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.mvk-title {
  margin: 0 0 14px; font-size: clamp(28px, 4.2vw, 40px); line-height: 1.18;
  font-weight: 700; color: var(--mvk-ink); letter-spacing: -.01em;
}
.mvk-title span { color: var(--mvk-pink); }
.mvk-lead { margin: 0; font-size: 16px; line-height: 1.65; color: var(--mvk-ink2); }

/* ---------- layout ---------- */
.mvk-grid { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 981px) {
  .mvk-grid { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: 28px; }
}
.mvk-side { display: grid; gap: 12px; align-content: start; }

/* on phones the tap-to-call tiles come first, the form after them */
.mvk-formcard { order: 2; }
.mvk-side { order: 1; }
@media (min-width: 981px) { .mvk-formcard { order: 1; } .mvk-side { order: 2; } }

.mvk-card {
  background: var(--mvk-card); border: 1px solid var(--mvk-line);
  border-radius: 18px; box-shadow: 0 10px 30px rgba(196, 118, 148, .10);
}
.mvk-formcard { padding: 26px 24px 22px; }
@media (min-width: 600px) { .mvk-formcard { padding: 34px 32px 28px; } }

/* ---------- form ---------- */
.mvk-form { margin: 0; }
.mvk-field { margin-bottom: 16px; }
.mvk-field > label {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--mvk-ink); margin: 0 0 7px; text-transform: none;
}
.mvk-req { color: var(--mvk-pink); }
.mvk-form input[type="text"], .mvk-form input[type="tel"],
.mvk-form input[type="email"], .mvk-form textarea {
  width: 100%; display: block; font: inherit; font-size: 15px; color: var(--mvk-ink);
  background: #fffafc; border: 1.5px solid var(--mvk-line); border-radius: 12px;
  padding: 12px 14px; line-height: 1.45; transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
.mvk-form textarea { min-height: 132px; resize: vertical; }
.mvk-form input::placeholder, .mvk-form textarea::placeholder { color: #bdaab3; }
.mvk-form input:focus, .mvk-form textarea:focus {
  outline: none; background: #fff; border-color: var(--mvk-pink);
  box-shadow: 0 0 0 4px rgba(253, 92, 147, .14);
}
.mvk-row { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 560px) { .mvk-row { grid-template-columns: 1fr 1fr; column-gap: 16px; } }
.mvk-hint { margin: -6px 0 18px; font-size: 13px; line-height: 1.5; color: var(--mvk-ink2); }

.mvk-form .ff_submit_btn_wrapper { margin: 4px 0 0; }
.mvk-submit {
  display: block; width: 100%; font: inherit; font-size: 16px; font-weight: 600;
  color: #fff; background: var(--mvk-pink); border: 0; border-radius: 999px;
  padding: 15px 24px; cursor: pointer; letter-spacing: .01em;
  box-shadow: 0 8px 20px rgba(253, 92, 147, .32);
  transition: background .15s, transform .12s, box-shadow .15s;
}
.mvk-submit:hover:not(:disabled) { background: var(--mvk-pink-d); box-shadow: 0 10px 24px rgba(217, 61, 116, .36); }
.mvk-submit:active:not(:disabled) { transform: translateY(1px); }
.mvk-submit:disabled { opacity: .6; cursor: default; }
.mvk-form .mv-form-note {
  margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--mvk-ink2); text-align: center;
}
.mvk-form .mv-form-note a { color: var(--mvk-pink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.mvk-form .mv-form-note a:hover { text-decoration: underline; }

/* ---------- contact tiles ---------- */
.mvk-tile {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--mvk-card); border: 1px solid var(--mvk-line); border-radius: 16px;
  padding: 15px 16px; color: var(--mvk-ink);
  box-shadow: 0 6px 18px rgba(196, 118, 148, .08);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.mvk-tile:hover { border-color: var(--mvk-pink); box-shadow: 0 10px 24px rgba(253, 92, 147, .18); transform: translateY(-1px); }
.mvk-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; background: var(--mvk-soft); color: var(--mvk-pink);
}
.mvk-ico svg { width: 21px; height: 21px; display: block; }
.mvk-tile-tx { min-width: 0; flex: 1 1 auto; }
.mvk-tile-lb { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mvk-ink2); }
.mvk-tile-vl { display: block; font-size: 16px; font-weight: 600; color: var(--mvk-ink); margin-top: 2px; overflow-wrap: anywhere; }
.mvk-arrow { flex: 0 0 auto; color: #d9c2cc; }
.mvk-arrow svg { width: 16px; height: 16px; display: block; }
.mvk-tile:hover .mvk-arrow { color: var(--mvk-pink); }

/* ---------- address ---------- */
.mvk-place { padding: 18px 18px 16px; }
.mvk-place-h { display: flex; align-items: flex-start; gap: 12px; }
.mvk-place-h .mvk-ico { width: 40px; height: 40px; border-radius: 12px; }
.mvk-place-t { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mvk-ink2); }
.mvk-place-a { display: block; margin: 4px 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.mvk-place-n { margin: 12px 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--mvk-ink2); }
.mvk-map {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: var(--mvk-pink);
  border: 1.5px solid var(--mvk-line); border-radius: 999px; padding: 9px 16px;
  transition: border-color .15s, background .15s;
}
.mvk-map:hover { border-color: var(--mvk-pink); background: var(--mvk-soft); }
.mvk-map svg { width: 15px; height: 15px; }

/* ---------- trust ---------- */
.mvk-trust {
  display: flex; align-items: center; gap: 14px;
  background: var(--mvk-soft); border: 1px solid var(--mvk-line);
  border-radius: 16px; padding: 14px 16px;
}
.mvk-trust img { flex: 0 0 auto; width: 96px; height: auto; display: block; }
.mvk-trust p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--mvk-ink2); }
.mvk-trust b { color: var(--mvk-ink); font-weight: 600; }

/* ---------- validation feedback from marveen-form.js ---------- */
.mvk-form .mv-field-error { color: #c0264a; font-size: 13px; margin-top: 5px; }
.mvk-form .mv-invalid { border-color: #c0264a !important; box-shadow: 0 0 0 4px rgba(192, 38, 74, .10) !important; }
.mvk-form .mv-form-message { margin-top: 16px; }

/* ---------- dark theme (marveen-dark.js sets html[data-mvdark]) ---------- */
html[data-mvdark] .mvk {
  --mvk-ink: var(--mvd-tx); --mvk-ink2: var(--mvd-tx2);
  --mvk-line: var(--mvd-line); --mvk-card: var(--mvd-panel);
  --mvk-soft: var(--mvd-panel2); --mvk-pink: var(--mvd-pink); --mvk-pink-d: #f0a0b8;
  background: var(--mvd-bg) !important;
}
html[data-mvdark] .mvk-card, html[data-mvdark] .mvk-tile { box-shadow: none; }
html[data-mvdark] .mvk-form input[type="text"], html[data-mvdark] .mvk-form input[type="tel"],
html[data-mvdark] .mvk-form input[type="email"], html[data-mvdark] .mvk-form textarea {
  background: var(--mvd-panel2) !important; color: var(--mvd-tx) !important;
  border-color: var(--mvd-line) !important;
}
html[data-mvdark] .mvk-form input::placeholder, html[data-mvdark] .mvk-form textarea::placeholder { color: #7d6c73; }
html[data-mvdark] .mvk-submit {
  color: #1a1114 !important; background: var(--mvd-pink) !important;
  border-color: var(--mvd-pink) !important; box-shadow: none;
}
html[data-mvdark] .mvk-submit:hover:not(:disabled) { background: #f0a0b8 !important; }
html[data-mvdark] .mvk-tile, html[data-mvdark] .mvk-map { color: var(--mvd-tx) !important; }
html[data-mvdark] .mvk-tile-vl { color: var(--mvd-tx) !important; }
html[data-mvdark] .mvk-map { color: var(--mvd-pink) !important; }
html[data-mvdark] .mvk-trust img { filter: brightness(.95); }

/* ---------- /kapcsolat/ keeps its own layout, only the form is restyled ---------- */
.mvk-standalone { padding: 0; background: none; }
.mvk-standalone .mvk-form {
  background: var(--mvk-card); border: 1px solid var(--mvk-line); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(196, 118, 148, .10); padding: 26px 24px 22px;
}
@media (min-width: 600px) { .mvk-standalone .mvk-form { padding: 32px 30px 26px; } }
html[data-mvdark] .mvk-standalone { background: none !important; }
html[data-mvdark] .mvk-standalone .mvk-form { background: var(--mvd-panel) !important; box-shadow: none; }