/**
 * jp-541-consultation-popup.css — JP-541 [C11] "Book a consultation" popup
 *
 * Client feedback (cluster C11, 2026-06-02): the "Book a consultation" popup
 * (#request-form-call / .modal-lead-request, footer.php) still has the old
 * design. It rendered the legacy cream #FFFAEB panel, an ORANGE-gradient
 * "KONTAKT & BERATUNG" eyebrow and a grey title — the redesign cascade never
 * reached this modal (its only styling lives in the compiled dist/app.css).
 *
 * Fix: restyle the modal CHROME to the design-system "Hubspot/Kontakt" Update
 * (Figma 163:5063 "Kontakt-Box"), reusing the exact tokens already shipped for
 * the inline #kontaktieren section (custom-clone.css JP-434):
 *   - Navy #0b1b45 panel, Light-Blue #89d2ff curved divider on the right
 *   - Eyebrow → Light Blue #89d2ff, Inter SemiBold 18/24/0.9 uppercase
 *   - Title  → white Kurdis Wide Bold 32/40/0.64
 *   - Body + phone → white Inter 18/28
 *   - Customer-logo strip hidden (Figma 163:5063 omits it; the dark logos are
 *     also invisible on navy)
 *   - Larger modal radius, white close button
 *
 * NOT in scope (environmental): the contact form itself is a HubSpot form
 * rendered inside a cross-origin <iframe> (#hs-form-iframe-0). Its fields and
 * the "Senden" button are HubSpot-controlled and cannot be restyled from the
 * site CSS — see JP-434's identical note (custom-clone.css ~7806). The
 * light-blue panel shows through the iframe's transparent areas.
 *
 * Figma: https://www.figma.com/design/VSSY3wxlC31HrYDwwmHmrv/JTL-Website-Modules?node-id=163-5063
 * Tokens: Dark Blue #0b1b45 · Light Blue #89d2ff · white #ffffff.
 */

/* ── Modal shell: navy panel, large radius, clip the curved divider ───────── */
#request-form-call .modal-content {
    position: relative !important;
    background: #0b1b45 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}

/* Light-Blue curved divider — same vector + technique as JP-348/JP-434
   (#kontaktieren). Sits behind both columns; the transparent HubSpot iframe
   shows it through on the right. */
#request-form-call .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 43%;
    right: 0;
    background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 516.319 420.833' fill='none'><path d='M488.762 104.849L429.812 0L0 5.19073e-06L0.000206333 420.833H429.815L488.762 316.013C525.505 250.692 525.505 170.198 488.762 104.849Z' fill='%2389D2FF'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: rotate(180deg);
    z-index: 0;
    pointer-events: none;
}

/* Both columns sit above the curve; strip their own backgrounds. */
#request-form-call .modal-header,
#request-form-call .modal-body {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    border: 0 !important;
}
#request-form-call .modal-header {
    padding: 46px !important;
    border-radius: 0 !important;
}
#request-form-call .modal-body {
    padding: 40px 46px !important;
    border-radius: 0 !important;
}

/* ── Left panel typography ────────────────────────────────────────────────── */
/* Eyebrow "KONTAKT & BERATUNG" — legacy paints it via a clipped orange gradient
   (background-clip:text + transparent fill); repaint solid Light Blue. */
#request-form-call .gradient-subtitle {
    background: none !important;
    background-image: none !important;
    -webkit-text-fill-color: #89d2ff !important;
    color: #89d2ff !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;          /* 5% of 18px */
    text-transform: uppercase !important;
    display: block !important;
    margin-bottom: 6px !important;
}

/* Title → white Kurdis Wide Bold. */
#request-form-call .modal-lead-request__content-title,
#request-form-call .modal-lead-request__content-title strong {
    color: #ffffff !important;
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 40px !important;
    letter-spacing: 0.64px !important;          /* 2% of 32px */
    display: block !important;
}

/* Body + phone → white Inter. */
#request-form-call .modal-lead-request__content p,
#request-form-call .modal-lead-request__content-contact {
    color: #ffffff !important;
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
}
#request-form-call .modal-lead-request__content p strong,
#request-form-call .modal-lead-request__content-contact strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Customer-logo strip — hidden (Figma 163:5063 omits it; dark logos would be
   invisible on navy anyway). */
#request-form-call .modal-lead-request__logos {
    display: none !important;
}

/* ── Close button — white so it reads on the navy panel. ──────────────────── */
/* Bootstrap-4 `.close` is a text "×" glyph — recolour white (no filter, which
   would invert the glyph back to dark). */
#request-form-call .close,
#request-form-call [data-dismiss="modal"] {
    color: #ffffff !important;
    text-shadow: none !important;
    opacity: 1 !important;
    z-index: 2 !important;
}
/* Bootstrap-5 `.btn-close` is a background-image SVG — whiten via filter. */
#request-form-call .btn-close {
    filter: invert(1) grayscale(1) brightness(2) !important;
    opacity: 1 !important;
    z-index: 2 !important;
}

/* ── Stacked layout (< xl, where .modal-content goes column) ──────────────── */
/* The diagonal curve is a side-by-side device; stacked it slashes across the
   navy text panel. Hide it and give the form panel a solid Light-Blue bg so
   the result reads as navy text block on top, light-blue form block below. */
@media (max-width: 1199.98px) {
    #request-form-call .modal-content::before {
        display: none !important;
    }
    #request-form-call .modal-body {
        background: #89d2ff !important;
    }
}