/* ==========================================================================
   Planet Interim — Global Design System
   Aligned with: Planet Interim Typography & UI System (April 6, 2026)
   Standard for all pages — public and logged-in (professional + company)
   ==========================================================================
   This is the single source of truth. Do not override locally.
   If something looks wrong on a page, fix it here — not on the page.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
    /* Brand colors */
    --pi-navy: #365A8F; /* Primary brand navy (H1/H2/H3, links, kicker text) */
    --pi-navy-dark: #2A4A6E;
    --pi-blue-dark: #365A8F; /* Alias — kept for backwards compatibility */
    --pi-blue: #00AEEF;
    --pi-blue-light: #00AEEF; /* Accent cyan (focus, rating fill, accent bullets) */
    --pi-green: #339A63; /* Primary CTA green */
    --pi-green-hover: #2f8f5c;
    --pi-orange: #fd7d05;
    --pi-red: #d9534f;
    /* Text */
    --pi-heading: #333333; /* H4 + body emphasis */
    --pi-text: #333333;
    --pi-text-soft: #666666; /* Default body text */
    --pi-text-muted: #8A94A6;
    /* Surfaces & borders */
    --pi-white: #ffffff;
    --pi-bg: #f4f7fa;
    --pi-border: #E6E9EF;
    --pi-border-strong: #B7B7B7; /* Secondary button border (per spec) */
    --pi-border-soft: #EEF1F6;
    --pi-border-cyan: #D6E2F3; /* Utility button border */
    --pi-kicker-bg: #EEF4FB; /* Kicker + utility button background */
    --pi-utility-hover: #E7F0FB;
    --pi-secondary-hover: #F7F8FA;
    --pi-overlay: rgba(42, 74, 110, 0.18);
    /* Focus / shadows */
    --pi-focus: 0 0 0 4px rgba(0, 174, 239, 0.22);
    --pi-shadow: 0 18px 42px rgba(54, 90, 143, .08);
    --pi-shadow-soft: 0 10px 24px rgba(54, 90, 143, .06);
    --pi-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.18);
    /* Typography */
    --font-main: "Montserrat", Arial, sans-serif;
    --pi-space-1: 8px;
    --pi-space-2: 12px;
    --pi-space-3: 16px;
    --pi-space-4: 20px;
    --pi-space-5: 24px;
    --pi-space-6: 32px;
    --pi-radius-btn-utility: 22px;
    --pi-shadow-card: 0 2px 8px rgba(54, 90, 143, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --pi-sidebar-width: 140px;
    --pi-sidebar-width-collapsed: 64px;
    --pi-bg-tint: #EEF4FB;
    --pi-bg-tint-hover: #E4EDF7;
}


/* ==========================================================================
   2. Reset
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--pi-text-soft);
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   3. Body text
   Default 16px / 400 / line-height 1.6 / #666666
   UI contexts (cards, dashboards, modals) may use line-height 1.55
   ========================================================================== */
.pi-text,
p,
li,
label,
input,
select,
textarea {
    font-family: var(--font-main);
}

p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--pi-text-soft);
}

.pi-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--pi-text-soft);
}

.pi-text--ui {
    line-height: 1.55;
}

/* ==========================================================================
   4. Heading system
   H1, H2, H3 → navy, never uppercase, never letter-spacing
   H4 → the ONLY heading allowed uppercase + letter-spacing
   ========================================================================== */
h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-main);
}

h1, h2, h3 {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

h1 {
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--pi-navy);
    margin-bottom: 16px;
}

h2 {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--pi-navy);
    margin-bottom: 16px;
}

h3 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--pi-navy);
    margin-bottom: 16px;
}

h4 {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--pi-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

/* ==========================================================================
   5. Links
   Navy, underlined, weight 500
   ========================================================================== */
a,
.pi-link {
    color: var(--pi-navy);
    text-decoration: none;
    font-weight: 500;
}

    a:hover,
    .pi-link:hover {
        text-decoration: none;
        opacity: 0.85;
    }

/* ==========================================================================
   6. Kicker (compact UI marker above headings / inside cards & modals)
   Height 40px, padding 0 18px, EEF4FB bg, navy text, 13px / 600
   ========================================================================== */
.pi-kicker {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--pi-kicker-bg);
    color: var(--pi-navy);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    width: max-content;
}

.pi-kicker-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
}

/* ==========================================================================
   7. Lists & bullets
   Navy markers by default; accent (cyan) variant available.
   p + ul gets 24px top margin inside content blocks / modals.
   ========================================================================== */
/*.pi-list,
.pi-modal-list {
    margin: 0;
    padding-left: 28px;
    list-style: disc;
}*/

.pi-list {
    list-style: none;
    /* optional, since default UA padding indents list items */
    padding-left: 0;
}
    .pi-list li::marker {
        content: "";
    }

.pi-list li,
.pi-modal-list li {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--pi-text-soft);
    margin-bottom: 14px;
}

.pi-list li:last-child,
.pi-modal-list li:last-child {
    margin-bottom: 0;
}

.pi-list li::marker {
    color: var(--pi-navy);
    display:none;
}

.pi-list--accent li::marker {
    color: var(--pi-blue-light);
}

/* Shared modal list (Typography & UI System §7) — disc markers, navy, sentence-case body */
.pi-modal-list {
    margin: 0;
    padding-left: 28px;
    list-style: disc;
}

    .pi-modal-list li::marker {
        color: var(--pi-navy);
    }

/* Keep the indent inside Bootstrap modals, where the bridge resets ul padding to 0 */
.modal .modal-body ul.pi-modal-list,
.pi-modal-body ul.pi-modal-list {
    padding-left: 28px;
    list-style: disc;
}

/* Modal section sub-heading — behaves like H3, never uppercase (§4.2–§4.3, §11.4) */
.pi-modal-section-title {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--pi-navy);
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 16px;
}

.pi-modal-body p + ul,
.pi-text-block p + ul {
    margin-top: 24px;
}

.pi-modal-section {
    margin-top: 20px;
}

.pi-modal-actions {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}

    .pi-modal-actions .pi-btn {
        min-width: 180px;
    }


.pi-list {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 0 28px 0;
    padding: 0;
    display: grid;
    gap: 10px;
}


    .pi-list li {
        position: relative;
       
        line-height: 1.55;
    }

        .pi-list li::before {
            content: "\f00c";
            font-family: FontAwesome;
            display: inline-flex;
            padding-right: 0.7em;
            color: #339A63 !important;
        }

        .pi-list li::marker {
            display: none;
        }

    .pi-list li {
        display: flex;
        align-items: flex-start;
    }

        .pi-list li::before {
            flex: 0 0 auto;
        }


/* ==========================================================================
   8. Page & Shell
   ========================================================================== */
.pi-page {
    padding: 24px;
    font-family: var(--font-main);
    font-size: 16px;
    color: var(--pi-text-soft);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.pi-shell {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

/* ==========================================================================
   9. Card
   ========================================================================== */
.pi-card {
    background: var(--pi-white);
    border: 1px solid var(--pi-border);
    border-radius: 22px;
    box-shadow: var(--pi-shadow);
    overflow: hidden;
}

.pi-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--pi-border);
}

.pi-card-header

.pi-card-title-wrap {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.pi-card-body {
    padding: 24px;
    display: grid;
   /* gap: 24px;*/
}

/* Intro */
.pi-intro {
    max-width: 78ch;
    line-height: 1.55;
}

/* ==========================================================================
   10. Toolbar & Stat
   ========================================================================== */
.pi-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 24px;
    border: 1px solid var(--pi-border);
    border-radius: 22px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}

.pi-stat {
    display: grid;
    gap: 12px;
}

.pi-stat-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--pi-text);
    font-weight: 600;
}

.pi-stat-value {
    color: var(--pi-navy);
    font-weight: 700;
}

.pi-stat-sub {
    font-size: 14px;
    line-height: 1.55;
    color: var(--pi-text-soft);
}

/* ==========================================================================
   11. BUTTON SYSTEM (definitive — April 2026 spec)
   Only 3 functional button types: Primary, Secondary, Utility
   ==========================================================================
   - Primary   : main action (save, continue, confirm, upload, submit, main modal CTA)
   - Secondary : ghost of primary (cancel, back, close, dismiss)
   - Utility   : smaller supportive inline action (select file, choose, edit, add)
   ========================================================================== */

/* Shared base */
.pi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    font-family: var(--font-main);
    white-space: nowrap;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    border: 1px solid transparent;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    place-content: center;
}

    .pi-btn:hover {
        transform: translateY(-1px);
        text-decoration:none;
    }

.pi-btn:focus-visible {
    outline: none;
    box-shadow: var(--pi-focus);
}

.pi-btn[disabled],
.pi-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.pi-btn svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: block;
}

/* Primary — main CTA (green per current spec) */
.pi-btn-primary {
    height: 44px;
    min-width: 168px;
    padding: 0 26px;
    font-size: 16px;
    font-weight: 600;
    background: var(--pi-green);
    color: #FFFFFF;
    border: 1px solid var(--pi-green);
}

    .pi-btn-primary:hover, .pi-btn-primary:focus {
        background: var(--pi-green-hover);
        border-color: var(--pi-green-hover);
        color: #FFFFFF;
    }

.pi-btn-blue {
    height: 44px;
    min-width: 168px;
    padding: 0 26px;
    font-size: 16px;
    font-weight: 600;
    background: var(--pi-blue);
    color: #fff;
    border: 1.5px solid var(--pi-border-strong);
}
    .pi-btn-blue:hover, .pi-btn-blue:focus {
        /* background: var(--pi-secondary-hover);*/
        background: var(--pi-blue);
        color: #FFF;
    }

/* Secondary — ghost version of primary (same size, different visual) */
.pi-btn-secondary {
    height: 44px;
    min-width: 168px;
    padding: 0 26px;
    font-size: 16px;
    font-weight: 600;
    background: #FFFFFF;
    color: var(--pi-heading);
    border: 1.5px solid var(--pi-border-strong);
}

    .pi-btn-secondary:hover, .pi-btn-secondary:focus {
        /* background: var(--pi-secondary-hover);*/
        background: var(--pi-blue);
        color: #FFF;
    }

.pi-btn-cancel {
    height: 44px;
    min-width: 168px;
    padding: 0 26px;
    font-size: 16px;
    font-weight: 600;
    background: #FFFFFF;
    color: var(--pi-heading);
    border: 1.5px solid var(--pi-border-strong);
}

    .pi-btn-cancel:hover, .pi-btn-cancel:focus, .pi-btn-cancel:active {
        background: var(--pi-secondary-hover);
        color: var(--pi-heading);
    }

/* Utility — smaller supportive inline action */
.pi-btn-utility {
    height: 34px;
    min-width: 140px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    background: var(--pi-kicker-bg);
    color: var(--pi-navy);
    border: 1px solid var(--pi-border-cyan);
}

    .pi-btn-utility:hover, .pi-btn-utility:focus {
        background: var(--pi-utility-hover);
        color: var(--pi-navy);
    }

.pi-btn-utility-green {
    background: var(--pi-green);
    color: #FFFFFF;
    border-color: var(--pi-green);
}
    .pi-btn-utility-green:hover {
        color: #FFFFFF;
        background: var(--pi-green-hover);
        border-color: var(--pi-green-hover);
    }

/* Soft/confirm green — light fill + green outline. For "save"-type confirm
   actions that must read as a utility, not a filled primary CTA. Sizing comes
   from .pi-btn-utility; disabled state from .pi-btn.is-disabled (§11 base). */
.pi-btn-utility-success {
    background: #EEF8F1;
    color: #2F8F5C;
    border-color: #CDE8D7;
}

    .pi-btn-utility-success:hover {
        background: #EEF8F1;
        color: #2F8F5C;
        border-color: #CDE8D7;
    }

.pi-btn-utility-blue {
    background: var(--pi-blue);
    color: #FFFFFF;
    border-color: var(--pi-blue);
}

    .pi-btn-utility-blue:hover {
        color: #FFFFFF;
        background: var(--pi-blue);
        border-color: var(--pi-blue);
    }

.pi-btn-utility-red {
    background: #D94F4F;
    color: #FFFFFF;
    border: 1px solid #D94F4F;
}

    .pi-btn-utility-red:hover {
        background: #c44444;
        border-color: #c44444;
        color: #FFFFFF;
    }

    /* Icon helper inside button label */
    .pi-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* ---- Legacy / supplementary variants ---------------------------------------
   Kept for pages that still rely on them. Do NOT introduce new usages.
   If a use case doesn't fit Primary / Secondary / Utility, raise it first
   before reaching for these.
----------------------------------------------------------------------------- */
.pi-btn-outline {
    height: 44px;
    min-width: 168px;
    padding: 0 26px;
    font-size: 16px;
    font-weight: 600;
    background: transparent;
    color: var(--pi-navy);
    border: 1px solid var(--pi-border-strong);
}

.pi-btn-danger {
    height: 44px;
    min-width: 168px;
    padding: 0 26px;
    font-size: 16px;
    font-weight: 600;
    background: var(--pi-red);
    color: #fff;
    border: 1px solid var(--pi-red);
}

    .pi-btn-danger:hover, .pi-btn-danger:focus {
        color: #fff;
    }
    /* ==========================================================================
   12. Empty state
   ========================================================================== */
    .pi-empty {
        border: 1px dashed var(--pi-border-strong);
        border-radius: 22px;
        padding: 32px 24px;
        background: #fcfdff;
        display: grid;
        gap: 12px;
        justify-items: start;
    }

.pi-empty-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: var(--pi-navy);
    font-weight: 700;
}

.pi-empty-text {
    max-width: 62ch;
    line-height: 1.55;
}

/* ==========================================================================
   13. Info grid
   ========================================================================== */
.pi-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pi-info-card {
    border: 1px solid var(--pi-border);
    border-radius: 22px;
    padding: 24px;
    background: #fff;
    display: grid;
    gap: 12px;
}

.pi-info-card p {
    line-height: 1.55;
}

/* ==========================================================================
   14. Footer actions & helper
   ========================================================================== */
.pi-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 8px;
}

.pi-footer-actions-triple {
    justify-content: flex-start;
}

.pi-footer-actions-triple .pi-btn {
    flex: 0 0 auto;
}

.pi-helper {
    font-size: 14px;
    line-height: 1.55;
    color: var(--pi-text-soft);
}

/* ==========================================================================
   15. Detail grid (key/value pairs)
   ========================================================================== */
.pi-detail-grid {
    display: grid;
    gap: 0;
    border: 1px solid var(--pi-border);
    border-radius: 16px;
    overflow: hidden;
}

.pi-detail-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    padding: 14px 20px;
    border-bottom: 1px solid var(--pi-border);
}

.pi-detail-row:last-child {
    border-bottom: none;
}

.pi-detail-label {
    font-weight: 600;
    color: var(--pi-text);
}

.pi-detail-value {
    color: var(--pi-text-soft);
}

/* ==========================================================================
   16. Rating block
   ========================================================================== */
.pi-rating-block {
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--pi-border);
    border-radius: 22px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}

.pi-rating-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    align-items: center;
}

.pi-rating-label {
    font-weight: 600;
    color: var(--pi-text);
}

/* ==========================================================================
   17. Forms
   ========================================================================== */
.pi-form-grid {
    display: grid;
    gap: 20px;
    max-width: 720px;
}

.pi-field {
    display: grid;
    gap: 6px;
}

.pi-field-label {
    font-weight: 600;
    color: var(--pi-text);
    font-size: 15px;
}

.pi-field-block {
    display: grid;
    gap: 8px;
}

.pi-input,
.pi-select {
    font-family: var(--font-main);
    font-size: 16px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #D9DEE6;
    border-radius: 10px;
    background: #fff;
    color: var(--pi-text);
    width: 100%;
}

.pi-textarea {
    font-family: var(--font-main);
    font-size: 16px;
    padding: 12px 16px;
    border: 1px solid #D9DEE6;
    border-radius: 10px;
    background: #fff;
    color: var(--pi-text);
    width: 100%;
    resize: vertical;
}

.pi-input:focus,
.pi-select:focus,
.pi-textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--pi-blue-light);
    box-shadow: var(--pi-focus);
}

.pi-field-error {
    color: var(--pi-red);
    font-size: 13px;
    font-weight: 500;
}

/* Form row with inline utility button (e.g. file select) */
.pi-form-row {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 960px;
}

.pi-form-row .pi-input {
    flex: 1 1 auto;
}

/* ==========================================================================
   18. Badges
   ========================================================================== */
.pi-badge-init {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--pi-bg-tint);
    color: var(--pi-navy);
    min-width: 36px;
}

.pi-badge-pending {
    background: #fff3e0;
    color: #e65100;
}

.pi-badge-available {
    background: #e8f5e9;
    color: #2e7d32;
}

.pi-badge-added {
    background: var(--pi-kicker-bg);
    color: var(--pi-navy);
}

/* ==========================================================================
   19. Alerts
   ========================================================================== */
.pi-alert {
    padding: 20px 24px;
    border-radius: 16px;
}

.pi-alert-info {
    background: var(--pi-kicker-bg);
    border: 1px solid var(--pi-border);
    color: var(--pi-navy);
}

.pi-alert-success {
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    color: #2e7d32;
}

/* ==========================================================================
   20. Table
   ========================================================================== */
.pi-table-wrap {
    overflow-x: auto;
}

.pi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.pi-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pi-navy);
    border-bottom: 2px solid var(--pi-border);
}

.pi-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pi-border);
    color: var(--pi-text-soft);
    vertical-align: middle;
}

.pi-table tr:last-child td {
    border-bottom: none;
}

/* Pager */
.pi-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    flex-wrap: wrap;
}

/* RadGrid override */
.pi-radgrid {
    border: none !important;
}

.pi-grid-header {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pi-navy);
}

/* ==========================================================================
   21. MODAL SYSTEM (shared — April 2026 spec)
   One shared pattern for validation, information, confirmation and form modals.
   - Default max-width 680px (520px compact, 720px wide)
   - Overlay click, Escape, X, and secondary "Close" all dismiss
   - Title behaves like H2 (24px / 700 / navy)
   ========================================================================== */
.pi-modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--pi-overlay);
    overflow-y: auto;
    z-index: 9999;
}

.pi-modal-overlay.is-open {
    display: flex;
}

.pi-modal {
    width: 100%;
    max-width: 680px;
    background: var(--pi-white);
    border-radius: 18px;
    box-shadow: var(--pi-shadow-modal);
    overflow: hidden;
}

.pi-modal--compact {
    max-width: 520px;
}

.pi-modal--wide {
    max-width: 720px;
}

.pi-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 36px 24px;
    border-bottom: 1px solid var(--pi-border);
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%);
}

.pi-modal-head-left {
    min-width: 0;
}

.pi-modal-head .pi-kicker {
    margin-bottom: 14px;
}

.pi-modal-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--pi-navy);
    text-transform: none;
    letter-spacing: 0;
}

.pi-modal-close {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid #D9E2EC;
    background: #FFFFFF;
    color: var(--pi-text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0;
}

.pi-modal-close svg {
    width: 20px;
    height: 20px;
    display: block;
}

.pi-modal-close:focus-visible {
    outline: none;
    box-shadow: var(--pi-focus);
}

.pi-modal-body {
    padding: 32px 36px 28px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--pi-text-soft);
}

.pi-modal-body p {
    margin: 0;
}

.pi-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding: 28px 36px 36px;
    border-top: 1px solid var(--pi-border);
    background: #FFFFFF;
}


/* ==========================================================================
   22. RadRating — outlined circles until selected (Fix #4, kept)
   ========================================================================== 
.RadRating,
.RadRating * {
    display: inline-table;
}

.RadRating ul {
    list-style: none;
    padding: 2px;
    margin: 0;
    zoom: 1;
    display: flex;
    gap: 6px;
    align-items: center;
}

.RadRating li {
    margin: 0;
    padding: 0;
}

.RadRating .rrtItem {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--pi-border-strong);
    background: var(--pi-white);
    overflow: hidden;
}

.RadRating .rrtSelected,
.RadRating .rrtOver {
    background: var(--pi-blue-light);
    border-color: var(--pi-blue-light);
}

.RadRating .rrtHalf {
    border-color: var(--pi-blue-light);
    background: linear-gradient(90deg, var(--pi-blue-light) 50%, var(--pi-white) 50%);
}

.RadRating .rrtItem a,
.RadRating .rrtItem span {
    background-image: none !important;
}
    */
/* ==========================================================================
   23. Accessibility — focus states
   ========================================================================== */
a:focus-visible {
    outline: none;
    box-shadow: var(--pi-focus);
    border-radius: 4px;
}

/* ==========================================================================
   24. Responsive
   ========================================================================== */
@media (max-width: 980px) {
    .pi-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .pi-info-grid {
        grid-template-columns: 1fr;
    }

    .pi-rating-row {
        grid-template-columns: 1fr;
    }

    .pi-detail-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (max-width: 768px) {
    .pi-modal-overlay {
        align-items: flex-start;
        padding: 16px;
    }

    .pi-modal-head {
        padding: 24px 20px 20px;
    }

    .pi-modal-title {
        font-size: 22px;
    }

    .pi-modal-body {
        padding: 28px 20px 24px;
    }

    .pi-modal-footer {
        flex-direction: column;
        padding: 24px 20px 20px;
    }

    .pi-modal-footer .pi-btn-primary,
    .pi-modal-footer .pi-btn-secondary {
        width: 100%;
    }

    .pi-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pi-form-row .pi-btn-utility {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .pi-page {
        padding: 16px;
    }

    .pi-card-header,
    .pi-card-body {
        padding: 20px;
    }

    .pi-footer-actions {
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 22px;
    }

    .pi-empty {
        padding: 24px 20px;
    }
}

.pi-check-list {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 0 28px 0;
    padding: 0;
    display: grid;
    gap: 10px;
}


    .pi-check-list li {
        position: relative;
       
        line-height: 1.55;
    }

        .pi-check-list li::before {
            content: "\f00c";
            font-family: FontAwesome;
            display: inline-flex;
            padding-right: 0.7em;
            color: #339A63 !important;
        }

        .pi-check-list li::marker {
            display: none;
        }

    .pi-check-list li {
        display: flex;
        align-items: flex-start;
    }

        .pi-check-list li::before {
            flex: 0 0 auto;
        }

/* ==========================================================================
   25. Bootstrap Modal Bridge
   Maps existing Bootstrap .modal markup to the PI modal design system.
   This allows gradual migration: modals using Bootstrap's data-dismiss
   and .modal .fade still work, but inherit PI typography, spacing and buttons.
   ========================================================================== */

/* Overlay */
.modal.fade .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    margin: 24px auto;
    padding: 0 16px;
}

/* Card */
.modal .modal-content {
    width: 100%;
    max-width: 680px;
    background: var(--pi-white);
    border-radius: 18px;
    box-shadow: var(--pi-shadow-modal);
    border: none;
    overflow: hidden;
}

    .modal .modal-content.pi-modal--compact {
        max-width: 520px;
    }

    .modal .modal-content.pi-modal--wide {
        max-width: 720px;
    }

/* Header */
.modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 16px;
    padding: 28px 36px 24px;
    border-bottom: 1px solid var(--pi-border);
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 100%);
}

    .modal .modal-header .modal-title,
    .modal .modal-header h2 {
        margin: 0;
        font-family: var(--font-main);
        font-size: 24px;
        line-height: 1.2;
        font-weight: 700;
        color: var(--pi-navy);
        text-transform: none;
        letter-spacing: 0;
    }

    .modal .modal-header .close {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 1px solid #D9E2EC;
        background: #FFFFFF;
        color: var(--pi-text-soft);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: 0 0 auto;
        padding: 0;
        font-size: 20px;
        line-height: 1;
        opacity: 1;
        margin: 0;
        order: 2;
    }

        .modal .modal-header .close:hover {
            background: var(--pi-secondary-hover);
        }

/* Body */
.modal .modal-body {
    padding: 32px 36px 28px;
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--pi-text-soft);
}

    .modal .modal-body p {
        margin: 0 0 16px 0;
    }

        .modal .modal-body p:last-child {
            margin-bottom: 0;
        }

    .modal .modal-body h3 {
        font-family: var(--font-main);
        font-size: 18px;
        font-weight: 600;
        color: var(--pi-navy);
        margin: 24px 0 12px 0;
    }

        .modal .modal-body h3:first-child {
            margin-top: 0;
        }

    /* Lists inside modals */
    .modal .modal-body ul,
    .modal .modal-body ul.advantages {
        margin: 16px 0;
        padding-left: 0px;
        list-style: disc;
    }

        .modal .modal-body ul li {
            font-family: var(--font-main);
            font-size: 16px;
            font-weight: 400;
            line-height: 1.6;
            color: var(--pi-text-soft);
            margin-bottom: 10px;
        }

            .modal .modal-body ul li:last-child {
                margin-bottom: 0;
            }

            .modal .modal-body ul li::marker {
                color: var(--pi-navy);
            }

        /* Accent list variant */
        .modal .modal-body ul.pi-list--accent li::marker {
            color: var(--pi-blue-light);
        }

    /* Horizontal rules inside modals */
    .modal .modal-body hr {
        border: none;
        border-top: 1px solid var(--pi-border);
        margin: 24px 0;
    }

/* Modal actions — standardized button area */
.pi-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 24px 36px 32px;
    border-top: 1px solid var(--pi-border);
    background: #FFFFFF;
}

    .pi-modal-actions .pi-btn {
        min-width: 180px;
    }

/* Legacy button overrides inside modals — map old btn classes to PI system */
.modal .modal-body .btn.btn-blue.btn-normal,
.modal .pi-modal-actions .btn.btn-blue.btn-normal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 180px;
    padding: 0 26px;
    border-radius: 999px;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 600;
    background: var(--pi-green);
    color: #FFFFFF;
    border: 1px solid var(--pi-green);
    text-transform: none;
    letter-spacing: 0;
}

    .modal .modal-body .btn.btn-blue.btn-normal:hover,
    .modal .pi-modal-actions .btn.btn-blue.btn-normal:hover {
        background: var(--pi-green-hover);
        border-color: var(--pi-green-hover);
    }

.modal .modal-body .btn.btn-orange.btn-normal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 180px;
    padding: 0 26px;
    border-radius: 999px;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 600;
    background: var(--pi-orange);
    color: #FFFFFF;
    border: 1px solid var(--pi-orange);
    text-transform: none;
    letter-spacing: 0;
}


/* Responsive */
@media (max-width: 768px) {
    .modal .modal-header {
        padding: 24px 20px 20px;
    }

        .modal .modal-header .modal-title,
        .modal .modal-header h2 {
            font-size: 22px;
        }

    .modal .modal-body {
        padding: 28px 20px 24px;
    }

    .pi-modal-actions {
        flex-direction: column;
        padding: 24px 20px 20px;
    }

        .pi-modal-actions .pi-btn,
        .pi-modal-actions .btn {
            width: 100%;
        }
}

.pi-input-small {
    height: 34px !important;
}

/* ==========================================================================
   26. Conversion / upsell modal (compact)
   In-product conversion moment (e.g. basic → premium). Pairs the shared
   .pi-modal / Bootstrap bridge (§21, §25) with a single-column benefits panel.
   - Compact ~480px (narrower than the 520px .pi-modal--compact)
   - Title behaves like H2 via .pi-modal-title (24px / 700 / navy)
   - Mobile full-width footer buttons are inherited from §24 (.pi-modal-footer)
   Markup: .modal-content.pi-modal.pi-modal--upsell
             > .pi-modal-close
             > .pi-modal-body ( .pi-modal-title + .pi-modal-intro + .pi-benefits )
             > .pi-modal-footer ( .pi-btn-secondary + .pi-btn-primary )
   ========================================================================== */

/* Compact width — native .pi-modal and Bootstrap-bridge markup */
.pi-modal--upsell,
.modal .modal-content.pi-modal--upsell {
    max-width: 480px;
}

/* Intro line under the title */
.pi-modal-intro {
    margin: 0 0 20px;
    font-family: var(--font-main);
    font-size: 15px;
    line-height: 1.6;
    color: var(--pi-text-soft);
}

/* Benefits panel — light-blue surface holding the green-check list */
.pi-benefits {
    background: var(--pi-kicker-bg);
    border: 1px solid var(--pi-border);
    border-radius: 12px;
    padding: 18px 20px;
}

    .pi-benefits ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .pi-benefits li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 7px 0;
        margin: 0;
        font-family: var(--font-main);
        font-size: 15px;
        line-height: 1.5;
        color: var(--pi-heading);
    }

        .pi-benefits li:first-child {
            padding-top: 0;
        }

        .pi-benefits li:last-child {
            padding-bottom: 0;
        }

        .pi-benefits li::marker {
            content: "";
        }

    /* 18px green check icon (inline SVG, stroke = currentColor) */
    .pi-benefits svg {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        color: var(--pi-green);
    }