/*
 * NATIVE Beaver Builder Contact page styling — values copied 1:1 from the React
 * component (src/components/sections/ContactSection.tsx, Tailwind classes).
 * Hard-coded (no CSS vars — BB editor doesn't inherit them). Scoped to
 * .fl-builder-content. Fonts loaded from Google Fonts (app used next/font).
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;1,9..144,400&family=Geist:wght@400;500;600;700&display=swap');

/* Astra sets body{color:#fff}; force readable dark text inside BB content */
.fl-builder-content,
.fl-builder-content p,
.fl-builder-content li,
.fl-builder-content .fl-rich-text,
.fl-builder-content .fl-rich-text p,
.fl-builder-content .fl-heading-text { color:#0E0A0C; }

/* ---- section background (radial pink + violet over #FBFAF8) ---- */
.fl-builder-content .dnb-c-sec {
  background:
    radial-gradient(circle at 50% -5%, #FFE8EE 0%, transparent 48%),
    radial-gradient(circle at 88% 20%, rgba(123,75,200,.07) 0%, transparent 38%),
    #FBFAF8 !important;
  padding: 24px 0 56px !important;   /* reduced top gap */
}
/* widen content to match the React max-width (1280) so the form isn't cramped */
.fl-builder-content .dnb-c-sec .fl-row-content { max-width: 1280px !important; }

/* ---- LEFT column ---- */
.fl-builder-content .dnb-c-pill .fl-html { display:inline-flex; }
.fl-builder-content .dnb-c-pill .pill {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,31,91,.3); background:#fff;
  padding:7px 13px; border-radius:999px; font-family:"Geist",sans-serif;
  font-size:13px; font-weight:500; color:#FF1F5B; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.fl-builder-content .dnb-c-pill .dot { width:6px; height:6px; border-radius:50%; background:#FF1F5B; box-shadow:0 0 10px #FF1F5B; }

.fl-builder-content .dnb-c-h1 .fl-heading-text {
  font-family:"Geist",sans-serif !important; font-weight:600 !important;
  font-size:clamp(44px,5.6vw,68px) !important; line-height:1 !important; letter-spacing:-.025em !important; color:#0E0A0C !important;
}
.fl-builder-content .dnb-c-sub .fl-rich-text,
.fl-builder-content .dnb-c-sub .fl-rich-text p {
  font-family:"Geist",sans-serif; font-size:18px; line-height:1.5; color:#4A3F42; max-width:44ch;
}
.fl-builder-content .dnb-c-sub .pink { color:#FF1F5B; font-weight:600; }
/* dynamic rotating word + blinking cursor (matches React) */
.fl-builder-content .dnb-c-sub .dnb-rotor { display:inline-block; color:#FF1F5B; font-weight:600; transition:opacity .2s; }
.fl-builder-content .dnb-c-sub .dnb-cursor { color:#FF1F5B; font-weight:600; margin-left:1px; animation:dnbblink 1s step-end infinite; }
@keyframes dnbblink { 50% { opacity:0; } }

/* ---- regional leads: team grid + meta row ---- */
.fl-builder-content .dnb-c-cards .fl-html { display:block; }
.fl-builder-content .dnb-team { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.fl-builder-content .dnb-ct {
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding:18px 16px 16px; box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .35s, border-color .35s, box-shadow .35s;
}
.fl-builder-content .dnb-ct:hover { transform:translateY(-3px); border-color:rgba(255,31,91,.3); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.fl-builder-content .dnb-ct-ph { width:100px; height:100px; border-radius:50%; overflow:hidden; margin-bottom:12px; background:#f3f2f0; flex-shrink:0; }
.fl-builder-content .dnb-ct-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.fl-builder-content .dnb-ct-name { font-family:"Geist",sans-serif; font-size:16px; font-weight:600; color:#FF1F5B; line-height:1.2; }
.fl-builder-content .dnb-ct-role { font-family:"Geist",sans-serif; font-size:13.5px; color:#4A3F42; margin-top:2px; line-height:1.3; }
.fl-builder-content .dnb-ct-mail { display:inline-flex; align-items:center; gap:5px; margin-top:9px; font-family:"Geist",sans-serif; font-size:11px; color:#8A7F82; text-decoration:none; white-space:nowrap; transition:color .25s; }
.fl-builder-content .dnb-ct-mail svg { flex-shrink:0; opacity:.85; }
.fl-builder-content .dnb-ct-mail:hover { color:#FF1F5B; }
/* bottom meta row */
.fl-builder-content .dnb-cmeta { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin-top:22px; padding-top:20px; border-top:1px solid rgba(0,0,0,.08); }
.fl-builder-content .dnb-cmeta-i { display:inline-flex; align-items:center; gap:8px; font-family:"Geist",sans-serif; font-size:14px; font-weight:500; color:#4A3F42; text-decoration:none; transition:color .25s; }
.fl-builder-content .dnb-cmeta-i svg { color:#FF1F5B; flex-shrink:0; }
.fl-builder-content .dnb-cmeta-i:hover { color:#FF1F5B; }
@media (max-width:1024px){ .fl-builder-content .dnb-team { grid-template-columns:repeat(2,1fr); } }
@media (max-width:400px){ .fl-builder-content .dnb-ct-ph { width:84px; height:84px; } .fl-builder-content .dnb-ct-mail { white-space:normal; word-break:break-word; } }

/* ---- RIGHT form panel ---- */
.fl-builder-content .dnb-c-form .fl-html { height:100%; }
.fl-builder-content .dnb-cform {
  position:relative; overflow:hidden; background:#fff;
  border:1px solid rgba(14,10,12,.08); border-radius:24px; padding:40px;
  box-shadow:0 30px 60px -20px rgba(14,10,12,.30),0 8px 24px -12px rgba(14,10,12,.18);
}
.fl-builder-content .dnb-cform .topbar { position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,#FF1F5B 0%,#7B4BC8 50%,#2BB5BE 100%); }
.fl-builder-content .dnb-cform h2 { font-family:"Geist",sans-serif; font-size:27px; font-weight:600; letter-spacing:-.025em; color:#0E0A0C; margin:0; }
.fl-builder-content .dnb-cform h2 .it { font-family:"Fraunces",serif; font-style:italic; font-weight:400; color:#FF1F5B !important; -webkit-text-fill-color:#FF1F5B !important; }
.fl-builder-content .dnb-cform form { margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.fl-builder-content .dnb-cform .frow { display:grid; gap:14px; grid-template-columns:1fr 1fr; }
@media (max-width:520px){ .fl-builder-content .dnb-cform .frow { grid-template-columns:1fr; } }

.fl-builder-content .dnb-cfield { position:relative; }
.fl-builder-content .dnb-cfield input,
.fl-builder-content .dnb-cfield textarea {
  width:100%; min-height:53px; border:1.5px solid rgba(14,10,12,.08); background:#FBFAF8;
  border-radius:13px; padding:22px 16px 8px; font-family:"Geist",sans-serif;
  font-size:15px; line-height:1.5; color:#0E0A0C; transition:border-color .2s, box-shadow .2s, background .2s;
}
.fl-builder-content .dnb-cfield textarea { height:120px; resize:none; padding-top:24px; }
.fl-builder-content .dnb-cfield input::placeholder,
.fl-builder-content .dnb-cfield textarea::placeholder { color:transparent; }
.fl-builder-content .dnb-cfield input:focus,
.fl-builder-content .dnb-cfield textarea:focus { outline:none; background:#fff; border-color:#FF1F5B; box-shadow:0 0 0 4px rgba(255,31,91,.15); }
.fl-builder-content .dnb-cfield label {
  position:absolute; left:16px; top:16px; pointer-events:none;
  font-family:"Geist",sans-serif; font-size:15px; color:#8A7F82; transition:all .2s;
}
.fl-builder-content .dnb-cfield input:focus + label,
.fl-builder-content .dnb-cfield input:not(:placeholder-shown) + label,
.fl-builder-content .dnb-cfield textarea:focus + label,
.fl-builder-content .dnb-cfield textarea:not(:placeholder-shown) + label {
  top:6px; font-size:11.25px; color:#FF1F5B;
}
.fl-builder-content .dnb-cform .cbtn {
  margin-top:8px; height:56px; width:100%; border:0; border-radius:999px;
  background:#FF1F5B; color:#fff; font-family:"Geist",sans-serif; font-size:15px; font-weight:500;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  box-shadow:0 8px 24px -8px rgba(255,31,91,.55); transition:transform .3s, background .3s, box-shadow .3s;
}
.fl-builder-content .dnb-cform .cbtn:hover { transform:translateY(-2px); background:#E0366D; box-shadow:0 14px 36px -10px rgba(255,31,91,.70); }
.fl-builder-content .dnb-cform .cnote { margin-top:2px; text-align:center; font-family:"Geist",sans-serif; font-size:13px; line-height:1.5; color:#8A7F82; }
.fl-builder-content .dnb-cform .cnote a { color:#FF1F5B; font-weight:500; text-decoration:none; }
/* Success overlay — React ContactSection: covers the whole panel with an animated checkmark, fades in on .sent */
.fl-builder-content .dnb-cform .dnb-c-ok { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; background:#fff; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s ease; }
.fl-builder-content .dnb-cform.sent .dnb-c-ok { opacity:1; visibility:visible; }
.fl-builder-content .dnb-cform .dnb-c-ok .ic { margin-bottom:16px; width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,31,91,.1); }
.fl-builder-content .dnb-cform .dnb-c-ok .ic svg { width:40px; height:40px; animation:dnbCBounce 1s infinite; }
.fl-builder-content .dnb-cform .dnb-c-ok .t { margin:0; font-family:"Fraunces",serif; font-size:22px; font-weight:600; color:#0E0A0C; }
.fl-builder-content .dnb-cform .dnb-c-ok .s { margin:8px 0 0; font-family:"Geist",sans-serif; font-size:14px; color:#8A7F82; }
@keyframes dnbCBounce { 0%,100%{ transform:translateY(-15%); animation-timing-function:cubic-bezier(.8,0,1,1); } 50%{ transform:translateY(0); animation-timing-function:cubic-bezier(0,0,.2,1); } }

/* ── EDITOR-FRIENDLY SECTION BACKGROUNDS: padding on inner wrapper (see daniel-bb.css).
   !important to beat contact-native.css's existing .dnb-c-sec padding !important. ── */
.fl-builder-content .dnb-c-sec { padding-top:0 !important; padding-bottom:0 !important; }
.fl-builder-content .dnb-c-sec > .fl-row-content-wrap { padding-top:44px !important; padding-bottom:76px !important; }