/* ==========================================================================
   ibinderbook-landingpages.css
   Modernized styling for anonymous campaign landing pages
   (landingpages/actionrequired.aspx and the Action Required thank-you flow).

   Design source: design/ibinderbook_Design_Guide_Handoff.html
   The :root token block below is copied verbatim from the guide. Once
   Content/design-tokens.css is merged to develop, replace the block with:
       @import url("design-tokens.css");
   ========================================================================== */

:root {
    /* Brand / semantic colors */
    --ibb-primary: #039be5;
    --ibb-primary-hover: #0288d1;
    --ibb-primary-active: #0277bd;
    --ibb-primary-soft: #e1f5fe;
    --ibb-success: #2e7d32;
    --ibb-success-soft: rgba(46, 125, 50, 0.12);
    --ibb-danger: #c62828;
    --ibb-danger-soft: rgba(198, 40, 40, 0.12);
    --ibb-warning-soft: rgba(249, 168, 37, 0.14);
    --ibb-warning-text: #865600;
    --ibb-warning-border: #f0cf7d;
    /* Text */
    --ibb-text: #263238;
    --ibb-text-secondary: #546e7a;
    --ibb-text-muted: #90a4ae;
    /* Surfaces / borders */
    --ibb-border: #e0e6eb;
    --ibb-border-strong: #ccd6dd;
    --ibb-bg: #f7f9fb;
    --ibb-surface: #ffffff;
    --ibb-surface-alt: #f1f4f6;
    /* Shadows */
    --ibb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ibb-shadow-md: 0 8px 24px rgba(38, 50, 56, 0.08);
    /* Radii */
    --ibb-radius-sm: 8px;
    --ibb-radius-md: 12px;
    --ibb-radius-lg: 16px;
    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
}

/* ==========================================================================
   Base
   ========================================================================== */

body.lp-page {
    margin: 0;
    background: linear-gradient(180deg, #f9fbfc 0%, #f3f7f9 100%);
    background-color: var(--ibb-bg);
    color: var(--ibb-text);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.lp-main {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-6);
}

.lp-main a {
    color: var(--ibb-primary);
    text-decoration: none;
}

    .lp-main a:hover {
        color: var(--ibb-primary-hover);
        text-decoration: underline;
    }

/* ==========================================================================
   Cards (shared shell for every section)
   ========================================================================== */

.lp-card {
    background: var(--ibb-surface);
    border: 1px solid var(--ibb-border);
    border-radius: var(--ibb-radius-lg);
    box-shadow: var(--ibb-shadow-sm);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.lp-section-title {
    margin: 0 0 var(--space-3);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ibb-text);
}

.lp-subsection-title {
    margin: var(--space-4) 0 var(--space-2);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ibb-text-secondary);
}

/* ==========================================================================
   Header: agency logo + name + brand rule (preserved, modernized)
   ========================================================================== */

.lp-header-card {
    background: var(--ibb-surface);
    border: 1px solid var(--ibb-border);
    border-radius: var(--ibb-radius-lg) var(--ibb-radius-lg) 0 0;
    box-shadow: var(--ibb-shadow-sm);
    padding: var(--space-4) var(--space-5);
    margin-bottom: 0;
}

.lp-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

    .lp-header img {
        height: 52px;
        width: auto;
        border: 0;
        border-radius: var(--ibb-radius-sm);
        background: var(--ibb-surface);
    }

.lp-agency-name {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ibb-text);
}

/* The header rule: kept as a real <hr>, restyled as the brand accent */
.lp-rule {
    border: 0;
    height: 3px;
    margin: 0 0 var(--space-5);
    background: linear-gradient(90deg, var(--ibb-primary) 0%, var(--ibb-primary-soft) 100%);
    border-radius: 0 0 var(--ibb-radius-sm) var(--ibb-radius-sm);
}

/* ==========================================================================
   Campaign body copy (DB-template HTML rendered into lblHTMLCampaign)
   ========================================================================== */

.lp-body-copy {
    font-size: 15px;
    line-height: 1.65;
}

    .lp-body-copy h3 {
        margin: var(--space-2) 0 var(--space-2);
        font-size: 21px;
        font-weight: 600;
        line-height: 1.25;
        color: var(--ibb-text);
    }

    .lp-body-copy strong {
        font-weight: 600;
    }

    .lp-body-copy a {
        font-weight: 500;
    }

/* ==========================================================================
   Public legal documents
   ========================================================================== */

.lp-legal-page {
    max-width: 960px;
    padding-top: var(--space-6);
}

.lp-legal-title {
    margin: 0 0 var(--space-2);
    color: var(--ibb-text);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
}

.lp-legal-effective-date {
    margin: 0 0 var(--space-5);
    color: var(--ibb-text-secondary);
}

.lp-legal-page .lp-section-title {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
    font-size: 20px;
    line-height: 1.2;
}

.lp-legal-page ul {
    padding-left: 1.25rem;
}

.lp-legal-contact {
    padding: var(--space-4);
    border: 1px solid var(--ibb-border);
    border-radius: var(--ibb-radius-sm);
    background: var(--ibb-bg);
}

    .lp-legal-contact p:last-child {
        margin-bottom: 0;
    }

/* ==========================================================================
   Upload section (reasonId 2 and 5): RadGrid + RadCloudUpload
   ========================================================================== */

.lp-upload-intro {
    text-align: center;
    margin: var(--space-2) 0 var(--space-3);
    color: var(--ibb-text-secondary);
    font-size: 14px;
}

.lp-main .RadGrid {
    border: 1px solid var(--ibb-border);
    border-radius: var(--ibb-radius-md);
    overflow: hidden;
    font-family: inherit;
}

    .lp-main .RadGrid .rgMasterTable {
        font-family: inherit;
        font-size: 14px;
        width: 100%;
        table-layout: fixed;
    }

    .lp-main .RadGrid th.rgHeader {
        background: var(--ibb-surface-alt);
        color: var(--ibb-text-secondary);
        font-size: 13px;
        font-weight: 600;
        border-color: var(--ibb-border);
        padding: 10px 14px;
    }

    .lp-main .RadGrid .rgRow td,
    .lp-main .RadGrid .rgAltRow td {
        border-color: var(--ibb-border);
        padding: 12px 14px;
        color: var(--ibb-text);
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .lp-main .RadGrid .rgAltRow {
        background: #fbfcfd;
    }

    /* "Upload File" grid push-button -> secondary button per guide */
    .lp-main .RadGrid input[type="button"],
    .lp-main .RadGrid input[type="submit"] {
        background: var(--ibb-surface);
        border: 1px solid var(--ibb-border-strong);
        border-radius: var(--ibb-radius-sm);
        color: var(--ibb-text);
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        padding: 6px 14px;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .lp-main .RadGrid input[type="button"]:hover,
        .lp-main .RadGrid input[type="submit"]:hover {
            border-color: var(--ibb-primary);
            box-shadow: var(--ibb-shadow-sm);
        }

/* Status chips: markup uses Bootstrap-3-era .label classes; style them as
   guide chips so 'pending' / 'uploaded' render correctly under Bootstrap 4 */
.lp-main .label {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.4;
}

.lp-main .label-warning {
    background: var(--ibb-warning-soft);
    border: 1px solid var(--ibb-warning-border);
    color: var(--ibb-warning-text);
}

.lp-main .label-success {
    background: var(--ibb-success-soft);
    border: 1px solid rgba(46, 125, 50, 0.25);
    color: var(--ibb-success);
}

/* Uploaded-file link in the upload grid (scoped under .lp-main to beat the generic `.lp-main a` link color) */
.lp-main .lp-upload-file {
    color: var(--ibb-success);
    font-weight: 600;
    text-decoration: none;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

    .lp-main .lp-upload-file:hover {
        color: var(--ibb-success);
        text-decoration: underline;
    }

    .lp-main .lp-upload-file i {
        margin-right: 6px;
    }

/* Upload summary in the grid footer: "Uploaded: X of Y" */
.lp-main .lp-upload-count {
    font-weight: 600;
    font-size: 13px;
    color: var(--ibb-text-secondary);
}

/* ==========================================================================
   Questions / Client-Agent chat
   ========================================================================== */

.lp-chat textarea.riTextBox,
.lp-chat .RadInput textarea {
    font-family: inherit;
    font-size: 16px; /* >=16px prevents iOS auto-zoom on focus */
    color: var(--ibb-text);
    background: var(--ibb-surface);
    border: 1px solid var(--ibb-border-strong);
    border-radius: var(--ibb-radius-sm);
    padding: 10px 12px;
    min-height: 96px;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .lp-chat textarea.riTextBox:focus,
    .lp-chat .RadInput textarea:focus {
        outline: none;
        border-color: var(--ibb-primary);
        box-shadow: 0 0 0 3px var(--ibb-primary-soft);
    }

.lp-chat .riTextBox::placeholder {
    color: var(--ibb-text-muted);
}

.lp-chat-log {
    padding-top: var(--space-2);
}

    /* Chat history grid: borderless message list */
    .lp-chat-log .RadGrid {
        border: 0;
        border-radius: 0;
    }

        .lp-chat-log .RadGrid .rgRow td,
        .lp-chat-log .RadGrid .rgAltRow td {
            border: 0;
            border-bottom: 1px solid var(--ibb-border);
            padding: 10px 8px;
            font-size: 14px;
        }

        .lp-chat-log .RadGrid .rgAltRow {
            background: transparent;
        }

/* ==========================================================================
   Lines-of-business selector
   ========================================================================== */

.lp-lob-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
}

@media (min-width: 576px) {
    .lp-lob-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.lp-lob-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-2) var(--space-3);
    background: var(--ibb-surface);
    border: 1px solid var(--ibb-border);
    border-radius: var(--ibb-radius-md);
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .lp-lob-item:hover {
        border-color: var(--ibb-border-strong);
        box-shadow: var(--ibb-shadow-sm);
    }

    /* Selected state: RadCheckBox adds .rbChecked when toggled on */
    .lp-lob-item:has(.rbChecked),
    .lp-lob-item:has(input:checked) {
        border-color: var(--ibb-primary);
        background: var(--ibb-primary-soft);
    }

    .lp-lob-item img {
        width: 48px;
        height: 48px;
        object-fit: contain;
    }

    .lp-lob-item .RadButton,
    .lp-lob-item .RadCheckBox {
        font-family: inherit !important;
        font-size: 14px;
        color: var(--ibb-text);
    }

/* ==========================================================================
   Submit CTA (green, per brand contract)
   ========================================================================== */

.lp-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-5);
}

.lp-main .btn-success {
    background-color: var(--ibb-success);
    border-color: var(--ibb-success);
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    padding: 12px 32px;
    min-width: 200px;
    border-radius: var(--ibb-radius-sm);
    box-shadow: var(--ibb-shadow-sm);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

    .lp-main .btn-success:hover,
    .lp-main .btn-success:focus {
        background-color: #1b5e20;
        border-color: #1b5e20;
        color: #ffffff;
        text-decoration: none;
    }

    .lp-main .btn-success:focus {
        outline: none;
        box-shadow: 0 0 0 3px var(--ibb-success-soft);
    }

/* ==========================================================================
   Small-screen refinements
   ========================================================================== */

@media (max-width: 575.98px) {
    .lp-main {
        padding: var(--space-3) var(--space-3) var(--space-5);
    }

    .lp-card,
    .lp-header-card {
        padding: var(--space-4);
    }

    .lp-header img {
        height: 44px;
    }

    .lp-agency-name {
        font-size: 17px;
    }

    .lp-body-copy h3 {
        font-size: 19px;
    }

    .lp-actions {
        justify-content: stretch;
    }

        .lp-actions .btn-success {
            width: 100%;
            text-align: center;
        }

    .lp-main .lp-pay-btn {
        display: flex;
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Thank-you overlay (post-submit confirmation; Close returns to the page)
   ========================================================================== */

.lp-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(38, 50, 56, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--space-4);
}

.lp-overlay-card {
    background: var(--ibb-surface);
    border-radius: var(--ibb-radius-lg);
    box-shadow: var(--ibb-shadow-md);
    max-width: 440px;
    width: 100%;
    padding: var(--space-6) var(--space-5);
    text-align: center;
}

.lp-overlay-check {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-4);
    border-radius: 50%;
    background: var(--ibb-success-soft);
    color: var(--ibb-success);
    font-size: 26px;
    line-height: 52px;
    font-weight: 700;
    text-align: center;
}

.lp-overlay-title {
    margin: 0 0 var(--space-2);
    font-size: 19px;
    font-weight: 600;
    color: var(--ibb-text);
}

.lp-overlay-sub {
    margin: 0 0 var(--space-5);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ibb-text-secondary);
}

.lp-btn-primary {
    display: inline-block;
    background: var(--ibb-primary);
    border: 1px solid var(--ibb-primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: var(--ibb-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .lp-btn-primary:hover {
        background: var(--ibb-primary-hover);
        border-color: var(--ibb-primary-hover);
    }

/* ==========================================================================
   Already-requested LOB tiles (checkbox disabled server-side -> rbDisabled)
   ========================================================================== */

.lp-lob-item {
    position: relative;
}

    .lp-lob-item:has(.rbDisabled),
    .lp-lob-item:has(input[disabled]) {
        background: var(--ibb-surface-alt);
        opacity: 0.8;
    }

        .lp-lob-item:has(.rbDisabled):hover,
        .lp-lob-item:has(input[disabled]):hover {
            border-color: var(--ibb-border);
            box-shadow: none;
        }

        .lp-lob-item:has(.rbDisabled)::after,
        .lp-lob-item:has(input[disabled])::after {
            content: "\2713";
            position: absolute;
            top: 8px;
            right: 8px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--ibb-success);
            color: #ffffff;
            font-size: 12px;
            line-height: 20px;
            font-weight: 700;
            text-align: center;
        }

/* Inline confirmation for note-only submits */
.lp-note-sent {
    display: inline-block;
    margin-top: var(--space-2);
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ibb-success-soft);
    color: var(--ibb-success);
    font-size: 13px;
    font-weight: 600;
}

/* ==========================================================================
   Footer: agency name + contact (Option C - logo stays in the header)
   ========================================================================== */

.lp-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-4) var(--space-2);
    border-top: 1px solid var(--ibb-border);
    font-size: 13px;
    color: var(--ibb-text-secondary);
    text-align: center;
}

.lp-footer-name {
    font-weight: 600;
    color: var(--ibb-text);
}

.lp-footer-link {
    color: var(--ibb-primary);
    text-decoration: none;
    overflow-wrap: break-word;
}

    /* keep only the phone number from wrapping; let long website URLs break */
    .lp-footer-link[href^="tel:"] {
        white-space: nowrap;
    }

    .lp-footer-link:hover {
        color: var(--ibb-primary-hover);
        text-decoration: underline;
    }

    .lp-footer-link i {
        margin-right: 6px;
    }

.lp-footer-sep {
    color: var(--ibb-border-strong);
}

/* ==========================================================================
   Payment options panel (Non-Payment & Renewal) - code-rendered, replaces the
   plain-text payment lines that used to live in the DB template body.
   ========================================================================== */

.lp-payment {
    background: var(--ibb-primary-soft);
    border-color: rgba(3, 155, 229, 0.18);
}

.lp-payment-title {
    margin: 0 0 var(--space-3);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    /* --ibb-text (not primary-active) for AA contrast on the light-blue panel; matches .lp-section-title */
    color: var(--ibb-text);
}

/* scoped under .lp-main so it beats the generic `.lp-main a` link color (else white text loses to brand-blue) */
.lp-main .lp-pay-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* primary-active (not --ibb-primary) so white text clears WCAG AA contrast (4.8:1) */
    background: var(--ibb-primary-active);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 11px 24px;
    border-radius: var(--ibb-radius-sm);
    text-decoration: none;
}

    .lp-main .lp-pay-btn:hover,
    .lp-main .lp-pay-btn:focus {
        background: #01579b;
        color: #ffffff;
        text-decoration: none;
    }

    .lp-pay-btn i {
        font-size: 15px;
    }

.lp-pay-phone {
    margin-top: var(--space-3);
    font-size: 15px;
    color: var(--ibb-text);
}

    .lp-pay-phone a {
        color: var(--ibb-primary);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

        .lp-pay-phone a:hover {
            text-decoration: underline;
        }