@font-face {
    font-family: 'Segoe UI';
    src: url('data:/fonts/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQiCLJXoAAAE4AAAAVE9TLzI...') format('truetype');
    font-weight: 400;
    font-style: normal;
}

.segoe-light {
    font-family: 'Segoe UI', 'Segoe UI Variable', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 28px;
    color: #ffffff;
}

.segoe-light-italic {
    font-family: 'Segoe UI', 'Segoe UI Variable', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 28px;
    color: #ffffff;
}

.segoe-semilight {
    font-family: 'Segoe UI', 'Segoe UI Variable', sans-serif;
    font-weight: 350;
    font-style: normal;
    font-size: 28px;
    color: #ffffff;
}

.font-card {
    background: #fff;
    padding: 20px 15px;
    /*border-radius: 0px!important;*/
    transition: transform 0.2s ease, background 0.2s ease;
    /*border: 1px solid #1a3a6a;*/
    border-bottom: 1px solid gray;
}

    .font-card .label {
        color: #8899bb;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-top: 8px;
        font-weight: 400;
    }

.segoe-semilight-italic {
    font-family: 'Segoe UI', 'Segoe UI Variable', sans-serif;
    font-weight: 350;
    font-style: italic;
    font-size: 28px;
    color: #ffffff;
}

.segoe-regular {
    font-family: 'Segoe UI', 'Segoe UI Variable', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    color: #ffffff;
}

.segoe-italic {
    font-family: 'Segoe UI', 'Segoe UI Variable', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 28px;
    color: #ffffff;
}

.segoe-semibold {
    font-family: 'Segoe UI', 'Segoe UI Variable', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 28px;
    color: #ffffff;
}

.segoe-semibold-italic {
    font-family: 'Segoe UI', 'Segoe UI Variable', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 28px;
    color: #ffffff;
}

.segoe-bold {
    font-family: 'Segoe UI', 'Segoe UI Variable', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 28px;
    color: #ffffff;
}

.segoe-bold-italic {
    font-family: 'Segoe UI', 'Segoe UI Variable', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 28px;
    color: #ffffff;
}

.segoe-black {
    font-family: 'Segoe UI', 'Segoe UI Variable', sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 28px;
    color: #ffffff;
}

.segoe-black-italic {
    font-family: 'Segoe UI', 'Segoe UI Variable', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 28px;
    color: #ffffff;
}

.segoe-variable {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-weight: 400;
    font-variation-settings: 'wght' 400;
    font-size: 28px;
    color: #ffffff;
}

.segoe-variable-thin {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-variation-settings: 'wght' 100;
    font-size: 28px;
    color: #ffffff;
}

.segoe-variable-heavy {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
    font-variation-settings: 'wght' 900;
    font-size: 28px;
    color: #ffffff;
}

/* --- NEW: two‑column profile grid (compact) --- */
.profiles-grid-2col {
    /*display: grid;*/
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

.profile-card-compact {
    background: #fff;
    border-radius: 16px;
    padding: 16px 18px 14px 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.12);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .profile-card-compact:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
        border-color: rgba(212, 175, 55, 0.25);
    }

.compact-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.compact-photo {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid #d4af37;
    background: #f0ece4;
}

.compact-info {
    flex: 1;
    min-width: 0;
}

    .compact-info .name {
        font-size: 18px;
        font-weight: 600;
        color: #1a1a2e;
        margin: 0 0 2px 0;
        font-family: 'Montserrat', 'Segoe UI', sans-serif;
    }

    .compact-info .id-badge {
        font-size: 13px;
        color: #666;
        background: #f5f0e8;
        padding: 0 10px;
        border-radius: 30px;
        display: inline-block;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .compact-info .details {
        font-size: 13px;
        color: #4a4a4a;
        line-height: 1.5;
        margin: 4px 0 0 0;
    }

        .compact-info .details i {
            color: #d4af37;
            width: 18px;
            font-size: 12px;
        }

.compact-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
}

    .compact-actions .btn-sm {
        padding: 5px 16px;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        text-decoration: none;
        color: #fff;
    }

    .compact-actions .btn-contact {
        background: linear-gradient(135deg, #2ecc71, #27ae60);
    }

        .compact-actions .btn-contact:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
        }

    .compact-actions .btn-view {
        background: linear-gradient(135deg, #1a1a2e, #16213e);
    }

        .compact-actions .btn-view:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(26, 26, 46, 0.25);
        }

    .compact-actions .btn-whatsapp {
        background: #25d366;
    }

        .compact-actions .btn-whatsapp:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
        }

    .compact-actions .btn-sm i {
        font-size: 14px;
    }

.compact-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    margin-top: 6px;
    border-top: 1px solid #f0ece4;
    padding-top: 6px;
}

@media (max-width: 992px) {
    .profiles-grid-2col {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .profiles-grid-2col {
        grid-template-columns: 1fr;
    }

    .compact-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .compact-info .details {
        text-align: center;
    }

    .compact-actions {
        justify-content: center;
    }
}

/* existing overrides */
.results-stats {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

a {
    text-decoration: none !important;
}

    a:hover {
        color: cyan !important;
    }


.master-navigation {
    position: absolute;
    z-index: 100;
    pointer-events: none;
}

    .master-navigation .sidebar,
    .master-navigation a,
    .master-navigation button,
    .master-navigation input,
    .master-navigation select,
    .master-navigation .menu-item {
        pointer-events: auto;
    }

/* ============================================================
   NOTICE BOARD — fix scroll + stacking + pointer-events
   ------------------------------------------------------------
   The .master-navigation wrapper is position:absolute + z-index:100
   + pointer-events:none, which:
     1) lets later page content paint over the notice board,
     2) swallows wheel events over the notice board body.
   These rules give the board its own stacking context above the
   page and re-enable pointer events on the board itself.
   ============================================================ */

/* 1) Lift the notice board above everything in the master row
      and let it receive pointer/wheel events. */
.notice-board {
    position: relative;
    z-index: 1050; /* > 100 (master-navigation) */
    pointer-events: auto; /* override the wrapper's none */
    max-width: 520px;
    margin-left: auto;
    margin-top: 6px;
    background: #ffffff;
    border: 1px solid #ece6dd;
    border-radius: 10px;
    box-shadow: 0 8px 24px -12px rgba(30, 25, 15, 0.18);
    overflow: hidden; /* keeps the head's rounded corners */
}

    /* 2) Collapsed state = header only. */
    .notice-board.collapsed .notice-board-body {
        display: none;
    }

    /* 3) THE SCROLL FIX — constrain height, enable vertical scroll,
      and make sure the body itself accepts pointer/wheel events. */
    .notice-board .notice-board-body {
        max-height: 320px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 4px 6px 4px 4px;
        pointer-events: auto; /* belt & braces */

        -webkit-overflow-scrolling: touch;
        background: #ffffff;
        border-top: 1px solid #ece6dd;
    }

    /* 4) Header stays clickable even though it sits inside a
      pointer-events:none ancestor. */
    .notice-board .notice-board-head {
        position: relative;
        z-index: 1;
        cursor: pointer;
        user-select: none;
        pointer-events: auto;
    }

    /* 5) Scrollbar styling (WebKit) */
    .notice-board .notice-board-body::-webkit-scrollbar {
        width: 8px;
    }

    .notice-board .notice-board-body::-webkit-scrollbar-track {
        background: #faf8f5;
    }

    .notice-board .notice-board-body::-webkit-scrollbar-thumb {
        background: #c9c1b3;
        border-radius: 8px;
    }

        .notice-board .notice-board-body::-webkit-scrollbar-thumb:hover {
            background: #a89f8e;
        }

/* 6) Mobile */
@media (max-width: 767.98px) {
    .notice-board {
        max-width: 100%;
        margin-left: 0;
    }

        .notice-board .notice-board-body {
            max-height: 260px;
        }
}