/* ==========================================================================
   Professional Profile Card — popup (lead-form success + exit-intent)
   Reuses the theme's existing Bootstrap .modal conventions (see
   templates/popups/campaign.php) and brand colors already established across
   the site's custom work: navy #1b2a4e for text, orange var(--p-color,#f7931e)
   as the accent (see plugins/lawyerpro/assets/css/dynamic-css.php).
   Mobile-first: WhatsApp sharing is the primary use case.
   ========================================================================== */

.lp-pc-modal .modal-dialog {
    max-width: 380px;
    margin: 14px auto;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 28px);
}

.lp-pc-modal .modal-content {
    border-radius: 18px;
    border: none;
    padding: 18px 16px 16px;
    box-shadow: 0 20px 60px rgba(27, 42, 78, 0.25);
    max-height: calc(100vh - 28px);
    overflow-y: auto;
    width: 100%;
}

.lp-pc-modal .lp-pc-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f2f4f8;
    color: #1b2a4e;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 2;
}

.lp-pc-modal-body {
    text-align: center;
}

/* Headline block (swapped between "Thank You!" and the exit-intent copy by JS) */
.lp-pc-headline {
    margin-bottom: 10px;
}

.lp-pc-headline .lp-pc-check {
    display: block;
    font-size: 26px;
    color: #2ecc71;
    margin-bottom: 3px;
}

.lp-pc-headline h3 {
    color: #1b2a4e;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 3px;
    line-height: 1.25;
}

.lp-pc-headline p {
    color: #5a6478;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

/* ---- The card itself ---- */
.lp-profile-card {
    margin: 0 auto 14px;
    max-width: 300px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e7ebf3;
    box-shadow: 0 8px 30px rgba(27, 42, 78, 0.12);
    overflow: hidden;
    position: relative;
}

/* Soft decorative wave at the bottom, same spirit as the reference card. A real element
   rather than a ::after pseudo-element — the html2canvas-based "Download Card" capture
   (profile-card.js) needs to rasterize this reliably, and pseudo-elements are the least
   consistently supported thing across canvas-capture libraries/versions. */
.lp-pc-card-wave {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -6%;
    height: 46%;
    background: radial-gradient(ellipse at center, #eaf1fb 0%, #f7faff 60%, rgba(255, 255, 255, 0) 100%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.lp-pc-card-inner {
    position: relative;
    z-index: 1;
    padding: 16px 16px 12px;
}

.lp-pc-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 6px;
    color: #1b2a4e;
}

.lp-pc-icon svg {
    width: 100%;
    height: 100%;
}

.lp-pc-name {
    color: #1b2a4e;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    margin: 0 0 2px;
    line-height: 1.2;
}

.lp-pc-profession {
    color: #2c3b63;
    font-size: 12.5px;
    font-weight: 600;
    margin: 0 0 6px;
}

.lp-pc-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #1b2a4e;
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 6px;
}

.lp-pc-location svg {
    flex: none;
    color: var(--p-color, #f7931e);
}

.lp-pc-specializations {
    color: #5a6478;
    font-size: 11px;
    line-height: 1.4;
    margin: 0 0 10px;
    padding: 0 4px;
}

.lp-pc-qr-block {
    margin: 0 auto 6px;
}

.lp-pc-qr {
    width: 96px;
    height: 96px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-pc-qr canvas,
.lp-pc-qr img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 4px;
}

/* Only shown if the QR library fails to load (see profile-card.js renderQrOnce) — a
   usable fallback rather than a blank box. */
.lp-pc-qr-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px dashed #c7d0e0;
    border-radius: 8px;
    color: #1b2a4e !important;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
}

.lp-pc-scan-label {
    color: #1b2a4e;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin: 4px 0 0;
}

.lp-pc-brand {
    margin-top: 10px;
}

.lp-pc-brand img {
    max-height: 34px;
    width: auto;
    margin: 0 auto;
    display: block;
}

.lp-pc-brand-text {
    color: #1b2a4e;
    font-weight: 800;
    font-size: 16px;
}

/* ---- Action buttons ---- */
.lp-pc-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-pc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.lp-pc-btn:active {
    transform: scale(0.98);
}

/* !important throughout this block: the theme has global button/anchor color rules
   (same class of bug already hit once on the "View More" buttons' pseudo-classes) that
   otherwise win on specificity and grey these out. Forcing color on the button AND its
   icon/label children directly, rather than relying on inheritance, since a generic
   theme rule targeting `span`/`i` inside .modal-content can otherwise out-specificity
   the inherited value. */
.lp-pc-btn-primary,
.lp-pc-btn-primary .lp-pc-btn-label,
.lp-pc-btn-primary i {
    background: #1b2a4e;
    color: #fff !important;
}

.lp-pc-btn-primary:hover,
.lp-pc-btn-primary:focus,
.lp-pc-btn-primary:active {
    opacity: 0.92;
    color: #fff !important;
}

.lp-pc-btn-secondary,
.lp-pc-btn-secondary .lp-pc-btn-label,
.lp-pc-btn-secondary i {
    background: #25d366; /* WhatsApp green — this action is WhatsApp-first per spec */
    color: #fff !important;
}

.lp-pc-btn-secondary:hover,
.lp-pc-btn-secondary:focus,
.lp-pc-btn-secondary:active {
    opacity: 0.92;
    color: #fff !important;
}

/* ---- Native/fallback share menu (shown when Web Share API isn't available) ---- */
.lp-pc-share-menu {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f7f9fc;
    border-radius: 10px;
    padding: 10px;
}

.lp-pc-share-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e7ebf3;
    color: #1b2a4e;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.lp-pc-share-option:hover {
    background: #eef2f9;
    color: #1b2a4e;
}

.lp-pc-share-option .fa-whatsapp {
    color: #25d366;
}

.lp-pc-share-option.lp-pc-copied {
    color: #2ecc71;
}

/* ---- Small screens (majority of traffic — WhatsApp share is mobile-first) ---- */
@media (max-width: 480px) {
    .lp-pc-modal .modal-dialog {
        margin: 10px auto;
        max-width: none;
        min-height: calc(100vh - 20px);
        padding: 0 10px;
    }

    .lp-pc-modal .modal-content {
        padding: 16px 14px 14px;
        border-radius: 16px;
        max-height: calc(100vh - 20px);
    }

    .lp-profile-card {
        max-width: 100%;
    }
}

/* Very short viewports (landscape phones, small laptops with the browser chrome
   eating vertical space) — shrink further rather than relying on internal scroll
   alone, so the whole card+actions stay visible without scrolling in the common case. */
@media (max-height: 700px) {
    .lp-pc-headline {
        margin-bottom: 6px;
    }

    .lp-pc-card-inner {
        padding: 12px 14px 10px;
    }

    .lp-pc-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 4px;
    }

    .lp-pc-qr {
        width: 80px;
        height: 80px;
    }
}

/* Larger screens: keep the card at its natural card-like proportions rather than
   stretching full modal width. */
@media (min-width: 481px) {
    .lp-profile-card {
        max-width: 280px;
    }
}