/* =========================================================
   Meeting modal — brand colour pass
   Loaded after model.css, overrides only what needs colour.
   Used site-wide, so it stays on the brand red + dark palette.
   ========================================================= */

.modal-content {
    border: 1px solid rgba(237, 50, 72, 0.18);
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    overflow: hidden;
}

/* ---------- Left panel: dark AI aurora instead of the flat laptop photo ---------- */
.poup__card--left {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #0B0C10;
    background-blend-mode: luminosity;
    background-image:
        linear-gradient(180deg, rgba(11, 12, 16, 0.82) 0%, rgba(11, 12, 16, 0.94) 100%),
        url(../../images/modal/popup-image.webp);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
/* aurora blooms in brand red, same language as the AI hero */
.poup__card--left::before {
    content: "";
    position: absolute;
    inset: -30% -20% auto -30%;
    height: 78%;
    z-index: -1;
    background:
        radial-gradient(circle at 24% 26%, rgba(237, 50, 72, 0.55) 0%, rgba(237, 50, 72, 0.16) 42%, transparent 70%),
        radial-gradient(circle at 82% 8%, rgba(120, 60, 180, 0.34) 0%, transparent 62%);
    filter: blur(28px);
}
/* faint technical grid for depth */
.poup__card--left::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
    opacity: 0.55;
}

.poup__card--left h2 {
    color: #FFFFFF;
    font-size: 22px;
    line-height: 31px;
    margin-top: 0;
}
/* pull the key phrase out in brand red */
.poup__card--left h2 .accent,
.poup__card--left h2 strong {
    color: var(--color-accent, #ED3248);
    font-weight: 600;
}
.poup__card--left p {
    color: rgba(255, 255, 255, 0.72);
}

/* small trust row under the copy */
.poup__modal-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}
.poup__modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid rgba(237, 50, 72, 0.32);
    border-radius: 999px;
    background: rgba(237, 50, 72, 0.12);
    color: #FFC9D1;
    font-size: 12px;
    line-height: 17px;
    font-weight: 500;
}
.poup__modal-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent, #ED3248);
    flex: 0 0 auto;
}

/* ---------- Right panel: form gets brand accents ---------- */
.poup__card--right .form-group label span {
    color: var(--color-accent, #ED3248);
}
.poup__card--right .form-group input,
.poup__card--right .form-group textarea {
    color: #0B0C10;
    background: #FBFBFC;
    border-color: #E1E4EA;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.poup__card--right .form-group input::placeholder,
.poup__card--right .form-group textarea::placeholder {
    color: #9AA0A9;
}
.poup__card--right .form-group input:focus,
.poup__card--right .form-group textarea:focus,
.poup__card--right .form-group input:focus-visible,
.poup__card--right .form-group textarea:focus-visible {
    border: 1px solid var(--color-accent, #ED3248);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(237, 50, 72, 0.14);
    outline: 0;
}

/* tick list in brand red */
.poup__card--right .modal-list li::before {
    /* recolour the existing tick svg to the brand red */
    filter: invert(34%) sepia(72%) saturate(3894%) hue-rotate(335deg) brightness(95%) contrast(95%);
}
.poup__card--right .modal-list li p {
    color: #474B53;
}

/* submit button on brand */
input.wpcf7-form-control.wpcf7-submit.has-spinner.button,
.poup__card--right .free-consult-btn {
    background: var(--color-accent-strong, #D9203A);
    border: 0;
    color: #FFFFFF;
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner.button:hover,
.poup__card--right .free-consult-btn:hover {
    background: var(--color-accent, #ED3248);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(237, 50, 72, 0.28);
}

/* close button sits on the light side, keep it visible and on-brand on hover */
.poup__card--right .btn-close:hover {
    filter: invert(34%) sepia(72%) saturate(3894%) hue-rotate(335deg) brightness(95%) contrast(95%);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    /* model.css swaps in a light gradient here; keep the dark brand panel */
    .poup__card--left {
        background-color: #0B0C10;
        background-image:
            linear-gradient(180deg, rgba(11, 12, 16, 0.84) 0%, rgba(11, 12, 16, 0.95) 100%),
            url(../../images/modal/popup-image.webp);
        background-size: cover;
        background-position: center;
    }
    .poup__modal-badges { margin-top: 16px; }
}
@media (max-width: 575px) {
    .poup__card--left h2 { font-size: 18px; line-height: 26px; }
    .poup__modal-badge { font-size: 11px; padding: 5px 10px; }
}