/* ===========================
   GENERAL
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background-color: #eef5ff;
    color:#1f2937;
}


/* ===========================
   HOMEPAGE HEADER
=========================== */

.homepage-header {
    width: 100%;

    background:
        radial-gradient(
            circle at center top,
            #10254a 0%,
            #06152e 42%,
            #020b1b 100%
        );

    border-bottom: 1px solid
        rgba(212, 175, 55, 0.35);
}


/* ===========================
   BRAND AREA
=========================== */

.homepage-brand {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 125px;
    padding: 18px 20px;

    overflow: hidden;
}


/* ===========================
   COMPLETE WORDMARK
=========================== */

.brand-wordmark {
    display: flex;
    align-items: center;
    justify-content: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(48px, 7vw, 88px);
    font-weight: 400;
    letter-spacing: -3px;
    line-height: 1;

    white-space: nowrap;

    filter:
        drop-shadow(
            0 5px 5px
            rgba(0, 0, 0, 0.72)
        );
}


/* ===========================
   ORDINARY LETTERS
=========================== */

.brand-word {
    position: relative;
    z-index: 3;

    color: #f5f5f4;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #d6d8dd 45%,
            #ffffff 75%,
            #a9adb6 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 2px 0
        rgba(255, 255, 255, 0.28);
}


/* ===========================
   SPECIAL A AND K
=========================== */


.brand-main-letter {
    display: inline-block;

    background:
        linear-gradient(
            180deg,
            #fff0a7 0%,
            #d4af37 35%,
            #f7d774 55%,
            #a96f08 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

    font-size: 1.12em;
    line-height: 1;

    text-shadow:
        0 2px 1px
        rgba(255, 235, 150, 0.25);
}


/* ===========================
   ADVOCATE COATS
=========================== */



/* ===========================
   WHITE ADVOCATE NECK BANDS
=========================== */


/* ===========================
   T AS ADVOCATE TIE
=========================== */

.brand-tie-letter {
    position: relative;

    display: inline-block;

    width: 0.69em;
    height: 1.08em;

    margin: 0 0.02em;

    flex-shrink: 0;
}

.brand-tie-collar {
    position: absolute;
    top: 4%;
    left: 50%;

    width: 70%;
    height: 20%;

    transform: translateX(-50%);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #d9dce2
        );

    clip-path:
        polygon(
            0 0,
            50% 32%,
            100% 0,
            86% 100%,
            14% 100%
        );

    filter:
        drop-shadow(
            0 2px 2px
            rgba(0, 0, 0, 0.45)
        );
}

.brand-tie-band-left,
.brand-tie-band-right {
    position: absolute;
    top: 20%;

    width: 34%;
    height: 76%;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #cfd3da
        );

    box-shadow:
        0 3px 3px
        rgba(0, 0, 0, 0.35);
}

.brand-tie-band-left {
    left: 17%;

    transform:
        skewX(-5deg)
        rotate(2deg);

    clip-path:
        polygon(
            10% 0,
            100% 0,
            78% 100%,
            0 86%
        );
}

.brand-tie-band-right {
    right: 17%;

    transform:
        skewX(5deg)
        rotate(-2deg);

    clip-path:
        polygon(
            0 0,
            90% 0,
            100% 86%,
            22% 100%
        );
}


/* ===========================
   GOLD DIVIDER AND SCALE
=========================== */

.brand-divider > span:not(
    .brand-scale
) {
    display: block;
    height: 1px;
    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d4af37
        );
}

.brand-divider > span:last-child {
    background:
        linear-gradient(
            90deg,
            #d4af37,
            transparent
        );
}



/* ===========================
   TAGLINE
=========================== */


/* ===========================
   MOBILE BRAND HEADER
=========================== */

@media (max-width: 760px) {

.homepage-brand {
    min-height: 92px;
    padding: 14px 8px;
}

.brand-wordmark {
    font-size: clamp(34px, 10vw, 56px);
    letter-spacing: -2px;
}

    .brand-divider {
        width: 85%;
        margin-top: 7px;
    }

    .brand-scale {
        margin: 0 9px;
        font-size: 21px;
    }

    .brand-tagline {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .brand-tagline span {
        margin: 0 4px;
    }
}


@media (max-width: 430px) {

.homepage-brand {
    min-height: 78px;
    padding: 11px 5px;
}

.brand-wordmark {
    font-size: 32px;
    letter-spacing: -1.5px;
}

    .brand-divider {
        width: 88%;
        margin-top: 5px;
    }

    .brand-scale {
        font-size: 17px;
    }

    .brand-tagline {
        font-size: 8px;
        letter-spacing: 2px;
    }
}
/* ===========================
   NAVIGATION
=========================== */

/* ===========================
   NAVIGATION
=========================== */

#main-nav {
    position: relative;
    z-index: 5000;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: clamp(25px, 5vw, 72px);

    min-height: 72px;
    padding: 12px 25px;

    border-bottom: 1px solid
        rgba(212, 175, 55, 0.35);

    background:
        linear-gradient(
            180deg,
            #06152e,
            #020b1b
        );

    box-shadow:
        0 5px 16px
        rgba(2, 11, 27, 0.24);
}

#main-nav > a {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 42px;

    color: #f8fafc;

    text-decoration: none;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

#main-nav > a::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    border-radius: 3px;

    background: #d4af37;

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform 0.22s ease;
}

#main-nav > a:hover {
    color: #e8bf52;
    transform: translateY(-1px);
}

#main-nav > a:hover::after {
    transform: scaleX(1);
}
/* ===========================
   ACTIVE NAVIGATION LINK
=========================== */

#main-nav > a.active-page-link {
    color: #e8bf52;
}

#main-nav > a.active-page-link::after {
    transform: scaleX(1);
}
/* ===========================
   ACCOUNT MENU
=========================== */

#account-menu {
    position: relative;
    display: flex;
    align-items: center;
}

#account-menu > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 9px 20px;

    border: 1px solid #d4af37;
    border-radius: 8px;

    color: #f3ca65;
    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

#account-menu > a:hover {
    background: #d4af37;
    color: #07152d;

    transform: translateY(-1px);
}

.account-button {
    min-height: 44px;
    padding: 9px 20px;

    border: 1px solid #d4af37;
    border-radius: 8px;

    background: transparent;
    color: #f3ca65;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.account-button:hover {
    background: #d4af37;
    color: #07152d;

    transform: translateY(-1px);
}

.account-dropdown {
    position: absolute;
    top: 54px;
    right: 0;
    z-index: 10000;

    display: none;

    min-width: 240px;
    padding: 12px;

    border: 1px solid #dce5ef;
    border-radius: 9px;

    background: #ffffff;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.account-dropdown.open {
    display: block;
}

.account-user-name {
    padding: 8px 10px 12px;
    margin-bottom: 5px;

    border-bottom: 1px solid #e5e7eb;

    color: #123d73;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.account-dropdown a,
.account-dropdown button {
    display: block;

    width: 100%;
    padding: 10px;

    border: none;
    border-radius: 6px;

    background: transparent;
    color: #1f2937;

    font-size: 14px;
    text-align: left;
    text-decoration: none;

    cursor: pointer;
}

.account-dropdown a:hover,
.account-dropdown button:hover {
    background: #eff6ff;
    color: #2563eb;
}


/* Mobile account menu */

@media (max-width: 760px) {

    #main-nav {
        flex-wrap: wrap;

        gap: 4px 18px;

        min-height: auto;
        padding: 10px 12px 13px;
    }

    #main-nav > a {
        min-height: 36px;

        font-size: 13px;
    }

    #account-menu {
        justify-content: center;
    }

    #account-menu > a,
    .account-button {
        min-height: 37px;

        padding: 7px 13px;

        font-size: 12px;
    }

    .account-dropdown {
        top: 46px;
        right: 0;

        min-width: 220px;

        transform: none;
    }
}


@media (max-width: 480px) {

    #main-nav {
        gap: 2px 13px;
    }

    #main-nav > a {
        font-size: 11px;
    }

    #account-menu {
        width: auto;
    }

    #account-menu > a,
    .account-button {
        padding: 6px 10px;
        font-size: 11px;
    }
}


/* ===========================
   FILTER SECTION
=========================== */

#filter-section{
    width:95%;  
    margin:5px auto 10px;

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
}

#filter-section select{
    width:100%;
    height:42px;

    padding:0 12px;

    background:white;
    color:#1f2937;

    border:1px solid #d1d5db;
    border-radius:8px;

    font-size:15px;
    outline:none;
    cursor:pointer;
}

#filter-section select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}


/* ===========================
   STICKY SEARCH SECTION
=========================== */

#search-section {
    position: sticky;
    top: 0;
    z-index: 1100;

    display: flex;
    justify-content: center;

    width: 100%;
    padding: 10px 15px 8px;

    background: #f3f4f6;

    box-shadow:
        0 3px 8px
        rgba(0, 0, 0, 0.08);
}

#search-box{
    width:750px;
    max-width:80%;
    height:52px;

    padding:0 20px;

    background:white;
    color:#1f2937;

    border:1px solid #d1d5db;
    border-right:none;

    border-radius:26px 0 0 26px;

    font-size:17px;
    outline:none;
}

#search-box:focus{
    border-color:#2c3e50;
    box-shadow:-2px 0 0 3px rgba(37,99,235,0.12);
}

#search-section button{
    width:70px;
    height:52px;

    border:none;
    border-radius:0 26px 26px 0;

    background:#2563eb;
    color:white;

    font-size:22px;
    cursor:pointer;
    transition:0.2s;
}

#search-section button:hover{
    background:#c4d3fd;
}

/* ===========================
   DIRECTORY HEADING
=========================== */

#directory-heading-section {
    position: sticky;
    top: 70px;
    z-index: 1000;

    width: 100%;
    margin: 0;
    padding: 10px 20px;

    background: #ffffff;

    border-top: 1px solid #e1e7ef;
    border-bottom: 1px solid #e1e7ef;
    border-left: none;
    border-right: none;
    border-radius: 0;

    text-align: center;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

#directory-heading {
    margin: 0;

    color: #123d73;

    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}
#directory-subheading {
    margin-top: 3px;

    color: #6b7280;

    font-size: 13px;
}

.bar-directory-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 18px;
}

.directory-tab {
    min-width: 145px;
    padding: 10px 20px;

    border: 1px solid #2563eb;
    border-radius: 22px;

    background: #ffffff;
    color: #2563eb;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
    transition: 0.2s ease;
}

.directory-tab:hover {
    background: #eff6ff;
}

.directory-tab.active {
    background: #2563eb;
    color: #ffffff;
}

.directory-tab:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}


/* Mobile */

@media (max-width: 600px) {

    #directory-heading-section {
        width: 96%;
        margin-top: 18px;
        padding: 17px 12px;
    }

    #directory-heading {
        font-size: 20px;
    }

    #directory-subheading {
        font-size: 13px;
    }

    .bar-directory-tabs {
        gap: 7px;
    }

    .directory-tab {
        min-width: 0;
        flex: 1;

        padding: 9px 8px;

        font-size: 13px;
    }
    #filter-section{
    margin-top:12px;
    margin-bottom:8px;
}

#search-section{
    padding:8px 8px 6px;
}

#directory-heading-section{
    top:62px;
    padding:8px 10px;
}

#directory-heading{
    font-size:17px;
}

#directory-subheading{
    font-size:11px;
    margin-top:2px;
}
}

/* ===========================
   ADVOCATE LIST
=========================== */

#advocate-list{
    width:95%;
    margin:20px auto 35px;

    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
}


/* ===========================
   ADVOCATE CARD
=========================== */

.advocate-card{
    width:100%;

    background:white;

    border:1px solid #e5e7eb;
    border-radius:12px;

    padding:20px 16px;

    text-align:center;

    box-shadow:0 2px 10px rgba(0,0,0,0.08);

    transition:transform 0.2s, box-shadow 0.2s;
}

.advocate-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,0.13);
}

.advocate-photo{
    width:92px;
    height:92px;

    display:block;
    margin:0 auto 14px;

    border-radius:50%;
    border:3px solid #e5e7eb;

    object-fit:cover;
}

.advocate-details{
    width:100%;
}

.advocate-details h2{
    margin-bottom:7px;

    color:#111827;

    font-size:19px;
    line-height:1.25;
}

.designation{
    margin-bottom:9px;

    color:#6b7280;
    font-size:14px;
}

.bar-name{
    min-height:36px;
    margin-bottom:9px;

    color:#374151;

    font-size:14px;
    font-weight:bold;
    line-height:1.3;
}

.mobile{
    margin-bottom:10px;

    color:#374151;
    font-size:14px;
}

.mobile a{
    color:#2563eb;
    text-decoration:none;
    font-weight:bold;
}

.mobile a:hover{
    text-decoration:underline;
}

.verified{
    display:inline-block;

    margin:7px 0;

    padding:5px 11px;

    background:#16a34a;
    color:white;

    border-radius:20px;

    font-size:12px;
    font-weight:bold;
}

.verified-mark{
    color:#2563eb;
    font-size:15px;
}

.view-profile,
.advocate-details button{
    width:100%;

    margin-top:10px;
    padding:10px;

    border:none;
    border-radius:7px;

    background:#2563eb;
    color:white;

    font-size:14px;
    font-weight:bold;

    cursor:pointer;
    transition:0.2s;
}

.view-profile:hover,
.advocate-details button:hover{
    background:#1d4ed8;
}


/* ===========================
   NO RESULTS
=========================== */

.no-results{
    grid-column:1 / -1;

    width:100%;
    padding:45px 20px;

    background:white;

    border:1px solid #e5e7eb;
    border-radius:10px;

    text-align:center;
    color:#6b7280;
    font-size:19px;
}


/* ===========================
   FOOTER
=========================== */

footer{
    margin-top:50px;
    padding:20px;

    background:#1f2937;
    color:white;

    text-align:center;
}


/* ===========================
   TABLET
=========================== */

@media(max-width:992px){

    #filter-section{
        grid-template-columns:repeat(2, 1fr);
    }

    #advocate-list{
        grid-template-columns:repeat(3, 1fr);
    }

    nav{
        gap:35px;
    }
}


/* ===========================
   MOBILE
=========================== */

@media(max-width:600px){

    header{
        padding:18px 10px;
    }

    header h1{
        font-size:26px;
    }

    nav{
        justify-content:space-around;
        gap:8px;
        padding:13px 8px;
    }

    nav a{
        font-size:14px;
    }

    #filter-section{
        width:96%;
        margin-top:18px;

        grid-template-columns:repeat(2, 1fr);
        gap:9px;
    }

    #filter-section select{
        height:42px;
        padding:0 7px;
        font-size:12px;
    }

    #search-section{
        padding:10px 8px;
    }

    #search-box{
        width:100%;
        max-width:none;
        height:46px;

        padding-left:14px;

        font-size:14px;
    }

    #search-section button{
        width:55px;
        height:46px;
        font-size:19px;
    }

    #advocate-list{
        width:96%;
        margin-top:22px;

        grid-template-columns:repeat(2, 1fr);
        gap:10px;
    }

    .advocate-card{
        padding:13px 8px;
        border-radius:9px;
    }

    .advocate-photo{
        width:70px;
        height:70px;
        margin-bottom:10px;
    }

    .advocate-details h2{
        font-size:15px;
    }

    .designation,
    .bar-name,
    .mobile{
        font-size:12px;
    }

    .bar-name{
        min-height:31px;
    }

    .view-profile,
    .advocate-details button{
        padding:8px 4px;
        font-size:12px;
    }

    .executive-badge {
    margin-bottom: 7px;
    padding: 5px 9px;

    font-size: 9px;
    letter-spacing: 0.2px;
}

.executive-badge-icon {
    font-size: 9px;
}
}
.enrolment-number {
    margin: 6px 0;
    font-size: 14px;
    color: #444;
    font-weight: 500;
}

/* ===========================
   EXECUTIVE POSITION BADGE
=========================== */

.executive-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    max-width: 100%;
    margin: 3px auto 8px;
    padding: 6px 13px;

    border: 1px solid
        rgba(255, 255, 255, 0.35);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #b77908 0%,
            #d4af37 45%,
            #f0ca62 100%
        );

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.45px;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;

    box-shadow:
        0 3px 8px
        rgba(133, 88, 5, 0.28);

    overflow-wrap: anywhere;
}

.executive-badge-icon {
    flex-shrink: 0;

    color: #ffffff;

    font-size: 11px;
    line-height: 1;
}

/* =====================================
   NOTICES SECTION
===================================== */

.notices-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.notices-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.notices-toolbar h2 {
    margin: 0;
}

.post-notice-button {
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    background: #111827;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.post-notice-button:hover {
    opacity: 0.9;
}

#notices-list {
    display: grid;
    gap: 18px;
}

.notice-card {
    background: #ffffff;
    border: 1px solid #d8dee8;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.notice-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

.notice-card-header h3 {
    margin: 0;
    color: #111827;
}

.notice-date {
    font-size: 14px;
    color: #5f6878;
    white-space: nowrap;
}

.notice-description {
    margin: 12px 0;
    line-height: 1.6;
    color: #303846;
    white-space: pre-wrap;
}

.notice-attachment {
    margin-top: 15px;

    display: flex;
    justify-content: flex-start;
}

.notice-image {
    display: block;

    width: 180px;
    height: 220px;

    object-fit: cover;

    border-radius: 8px;
    border: 1px solid #dde2ea;
    background: #f7f8fa;

    cursor: pointer;
}

.notice-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 8px;
    background: #eef3f9;
    color: #173a63;
    font-weight: 600;
    text-decoration: none;
}

.notice-card-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e4e8ee;
    font-size: 13px;
    color: #687384;
}

.no-notices {
    padding: 35px 20px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #cbd2dc;
    border-radius: 10px;
}

.no-notices h3 {
    margin: 0 0 8px;
}


/* =====================================
   NOTICE MODAL
===================================== */

.notice-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.notice-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.notice-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 620px;
    max-height: 92vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.notice-modal-content h2 {
    margin: 0 35px 8px 0;
}

.notice-modal-help {
    margin: 0 0 20px;
    color: #687384;
    font-size: 14px;
}

.close-notice-modal {
    position: absolute;
    top: 12px;
    right: 15px;
    border: none;
    background: transparent;
    color: #303846;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.notice-form-group {
    margin-bottom: 18px;
}

.notice-form-group label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    color: #1c2532;
}

.notice-form-group label span {
    font-size: 13px;
    font-weight: 400;
    color: #7a8492;
}

.notice-form-group input[type="text"],
.notice-form-group input[type="date"],
.notice-form-group textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #cbd2dc;
    border-radius: 8px;
    font: inherit;
}

.notice-form-group textarea {
    resize: vertical;
}

.notice-form-group input:focus,
.notice-form-group textarea:focus {
    outline: none;
    border-color: #4b6b91;
    box-shadow: 0 0 0 3px rgba(75, 107, 145, 0.12);
}

.notice-attachment-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.notice-attachment-button {
    border: 1px solid #b9c3d0;
    border-radius: 8px;
    padding: 10px 14px;
    background: #f7f9fc;
    color: #26374b;
    font-weight: 600;
    cursor: pointer;
}

.notice-file-preview {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #d7dde6;
    border-radius: 8px;
    background: #f8fafc;
}

#notice-image-preview {
    width: 100%;
    max-height: 350px;
    object-fit: contain;
    margin-bottom: 10px;
    border-radius: 6px;
}

#notice-pdf-preview {
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 600;
    word-break: break-word;
}

.remove-notice-file {
    border: none;
    background: transparent;
    color: #b42318;
    padding: 0;
    font-weight: 600;
    cursor: pointer;
}

.notice-form-message {
    min-height: 21px;
    margin: 5px 0 12px;
    font-size: 14px;
    font-weight: 600;
}

.notice-form-message.error {
    color: #b42318;
}

.notice-form-message.success {
    color: #177245;
}

.notice-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.notice-cancel-button,
.notice-publish-button {
    border: none;
    border-radius: 8px;
    padding: 11px 17px;
    font-weight: 600;
    cursor: pointer;
}

.notice-cancel-button {
    background: #e8ecf1;
    color: #293241;
}

.notice-publish-button {
    background: #111827;
    color: #ffffff;
}

.notice-publish-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}


/* =====================================
   NOTICE MOBILE VIEW
===================================== */

@media (max-width: 600px) {

    .notices-section {
        padding: 12px;
    }

    .notices-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .post-notice-button {
        width: 100%;
    }

    .notice-card-header {
        flex-direction: column;
    }

    .notice-date {
        white-space: normal;
    }

    .notice-modal {
        padding: 10px;
    }

    .notice-modal-content {
        max-height: 95vh;
        padding: 20px 16px;
    }

.notice-image {
    width: 140px;
    height: 175px;
}

    .notice-attachment-buttons {
        flex-direction: column;
    }

    .notice-attachment-button {
        width: 100%;
    }

    .notice-modal-actions {
        flex-direction: column-reverse;
    }

    .notice-cancel-button,
    .notice-publish-button {
        width: 100%;
    }

}

.notice-posting-details {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.delete-notice-button {
    border: 1px solid #d92d20;
    border-radius: 7px;
    padding: 7px 12px;
    background: #ffffff;
    color: #b42318;
    font-weight: 600;
    cursor: pointer;
}

.delete-notice-button:hover {
    background: #fff1f0;
}

.delete-notice-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.chamber-number {
    margin: 6px 0;
}

/* ===========================
   ACTIVE BAR ASSOCIATIONS MENU
=========================== */

.active-bars-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.active-bars-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;
    padding: 8px 13px;

    border: 1px solid
        rgba(212, 175, 55, 0.72);
    border-radius: 8px;

    background: transparent;
    color: #f3ca65;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.active-bars-button:hover {
    background:
        rgba(212, 175, 55, 0.12);
}

#active-bars-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 24px;
    height: 24px;
    padding: 0 6px;

    border-radius: 999px;

    background: #d4af37;
    color: #07152d;

    font-size: 12px;
    font-weight: 800;
}

.active-bars-dropdown {
    position: absolute;
    top: 52px;
    left: 50%;
    z-index: 10000;

    display: none;

    width: min(390px, 92vw);
    max-height: 430px;
    padding: 12px;

    transform:
        translateX(-50%);

    overflow-y: auto;

    border: 1px solid #dce5ef;
    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.2);
}

.active-bars-dropdown.open {
    display: block;
}

.active-bars-dropdown-heading {
    margin: 0 0 9px;
    padding: 5px 7px 10px;

    border-bottom: 1px solid #e5e7eb;

    color: #123d73;

    font-size: 14px;
    font-weight: 800;
}

#active-bars-list {
    display: grid;
    gap: 7px;
}

.active-bar-item {
    display: grid;
    gap: 3px;

    width: 100%;
    padding: 11px 12px;

    border: 1px solid #e1e8f0;
    border-radius: 8px;

    background: #f8fbff;
    color: #1f2937;

    text-align: left;

    cursor: pointer;
}

.active-bar-item:hover {
    border-color: #8fb4dc;
    background: #edf6ff;
}

.active-bar-name {
    color: #123d73;
    font-size: 14px;
    font-weight: 800;
}

.active-bar-location {
    color: #64748b;
    font-size: 12px;
}

.active-bar-advocate-count {
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.active-bars-loading,
.active-bars-empty {
    padding: 16px 10px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}


/* ===========================
   POSITIVE DIRECTORY EMPTY STATE
=========================== */

.directory-empty-state {
    grid-column: 1 / -1;

    width: 100%;
    max-width: 780px;
    margin: 5px auto;
    padding: 38px 26px;

    border: 1px solid #cfe0f2;
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f1f7ff
        );

    text-align: center;

    box-shadow:
        0 5px 18px
        rgba(18, 61, 115, 0.08);
}

.directory-empty-icon {
    margin-bottom: 12px;
    font-size: 38px;
}

.directory-empty-state h3 {
    margin: 0 0 10px;

    color: #123d73;

    font-size: 22px;
    line-height: 1.35;
}

.directory-empty-state p {
    max-width: 620px;
    margin: 0 auto 20px;

    color: #526477;

    font-size: 15px;
    line-height: 1.65;
}

.directory-expand-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 10px 20px;

    border-radius: 8px;

    background: #2563eb;
    color: #ffffff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;
}

.directory-expand-button:hover {
    background: #1d4ed8;
}


@media (max-width: 760px) {

    .active-bars-button {
        min-height: 37px;
        padding: 7px 10px;
        font-size: 11px;
    }

    #active-bars-count {
        min-width: 21px;
        height: 21px;
        font-size: 10px;
    }

    .active-bars-dropdown {
        position: fixed;
        top: 50%;
        left: 50%;

        width: 92vw;
        max-height: 72vh;

        transform:
            translate(-50%, -50%);
    }

    .directory-empty-state {
        padding: 28px 16px;
    }

    .directory-empty-state h3 {
        font-size: 18px;
    }

    .directory-empty-state p {
        font-size: 14px;
    }
}

/* =====================================
   ADVOCATE CARD ACTION BUTTONS
===================================== */

.advocate-card-actions {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 8px;

    width: 100%;
    margin-top: 10px;
}


.advocate-card-actions .view-profile,
.advocate-card-actions .share-advocate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    width: 100%;
    min-width: 0;
    min-height: 40px;

    margin: 0;
    padding: 9px 7px;

    border: none;
    border-radius: 7px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}


.advocate-card-actions .view-profile {
    background: #2563eb;
    color: #ffffff;
}


.advocate-card-actions .view-profile:hover {
    background: #1d4ed8;
}


.advocate-card-actions .share-advocate {
    border: 1px solid #2563eb;

    background: #ffffff;
    color: #2563eb;
}


.advocate-card-actions .share-advocate:hover {
    background: #eff6ff;
}


.advocate-card-actions button:hover {
    transform: translateY(-1px);
}


.advocate-card-actions button:disabled {
    cursor: wait;
    opacity: 0.65;
    transform: none;
}


.share-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


/* =====================================
   DIGITAL CARD LOADING OVERLAY
===================================== */

.digital-card-loading {
    position: fixed;
    inset: 0;
    z-index: 30000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
}


.digital-card-loading.open {
    display: flex;
}


.digital-card-loading-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(2, 11, 27, 0.68);

    backdrop-filter:
        blur(4px);
}


.digital-card-loading-box {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(88vw, 310px);
    min-height: 150px;
    padding: 26px 22px;

    border: 1px solid
        rgba(212, 175, 55, 0.55);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f7fb
        );

    box-shadow:
        0 22px 60px
        rgba(0, 0, 0, 0.3);

    text-align: center;
}


.digital-card-loading-box p {
    margin: 18px 0 0;

    color: #06152e;

    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}


.digital-card-spinner {
    width: 44px;
    height: 44px;

    border: 4px solid #dbe5f2;
    border-top-color: #d4af37;
    border-right-color: #123d73;
    border-radius: 50%;

    animation:
        digital-card-spin
        0.8s linear infinite;
}


@keyframes digital-card-spin {

    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 600px) {

    .advocate-card-actions {
        gap: 5px;
    }

    .advocate-card-actions .view-profile,
    .advocate-card-actions .share-advocate {
        min-height: 36px;
        padding: 7px 3px;

        font-size: 11px;
    }

    .share-button-icon svg {
        width: 15px;
        height: 15px;
    }
}

/* =========================================================
   MORE DROPDOWN
========================================================= */

.directory-more-menu{

    position:relative;

    display:inline-flex;
}


.directory-more-button{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    height:44px;

    line-height:1;

    white-space:nowrap;
}

.directory-more-button span{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    margin-top:-1px;
}


.directory-more-button span{

    font-size:11px;

    transition:.25s;
}


.directory-more-button.open span{

    transform:rotate(180deg);
}


.directory-more-dropdown{

    position:absolute;

    top:calc(100% + 8px);
    right:0;

    min-width:220px;

    background:#ffffff;

    border:1px solid #e5e7eb;
    border-radius:12px;

    overflow:hidden;

    box-shadow:
        0 14px 40px
        rgba(0,0,0,.12);

    z-index:1200;
}


.directory-more-option{

    width:100%;

    padding:14px 18px;

    border:none;

    background:#ffffff;

    text-align:left;

    cursor:pointer;

    font-size:15px;

    transition:.2s;
}


.directory-more-option:hover{

    background:#f5f3ff;
}


/* =========================================================
   LOCAL COMMISSIONERS SECTION
========================================================= */

.local-commissioners-section{

    margin-top:35px;
}


.local-commissioners-heading{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;
}


.local-commissioners-heading-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

    border-radius:999px;

    background:#6d28d9;

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    margin-bottom:10px;
}


.local-commissioners-heading h2{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#111827;
}


.local-commissioners-heading p{

    margin-top:8px;

    color:#6b7280;

    line-height:1.6;
}


.local-commissioners-message{

    margin:20px 0;

    color:#6b7280;

    font-size:15px;
}


/* =========================================================
   LOCAL COMMISSIONER CARDS
========================================================= */

.local-commissioners-list{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(320px,1fr));

    gap:22px;
}


.local-commissioner-card{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:16px;

    overflow:hidden;

    transition:.25s;

    box-shadow:
        0 6px 18px
        rgba(0,0,0,.05);
}


.local-commissioner-card:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 38px
        rgba(0,0,0,.12);
}


.local-commissioner-card-top{

    display:flex;

    gap:16px;

    align-items:center;

    padding:20px;
}


.local-commissioner-card-photo{

    width:90px;

    height:90px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #ede9fe;

    background:#f3f4f6;

    flex-shrink:0;
}


.local-commissioner-card-name{

    margin:0 0 6px;

    font-size:20px;

    font-weight:700;

    color:#111827;
}


.local-commissioner-card-designation{

    margin:0;

    color:#6b7280;
}


.local-commissioner-purple-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:10px;

    padding:6px 12px;

    border-radius:999px;

    background:#6d28d9;

    color:#ffffff;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;
}


.local-commissioner-card-body{

    padding:20px;

    border-top:1px solid #f1f5f9;
}


.local-commissioner-card-row{

    display:flex;

    justify-content:space-between;

    gap:16px;

    margin-bottom:12px;
}


.local-commissioner-card-label{

    color:#6b7280;

    font-size:13px;
}


.local-commissioner-card-value{

    color:#111827;

    font-weight:600;

    text-align:right;

    word-break:break-word;
}


.local-commissioner-card-footer{

    padding:18px 20px;

    border-top:1px solid #f3f4f6;
}


.local-commissioner-profile-button{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:12px;

    border-radius:10px;

    background:#6d28d9;

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    transition:.25s;
}


.local-commissioner-profile-button:hover{

    background:#5b21b6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px){

    .directory-more-dropdown{

    left:auto;

    right:0;

    transform:none;

    width:260px;

    min-width:0;

    max-width:calc(100vw - 24px);
}

    .local-commissioners-list{

        grid-template-columns:1fr;
    }

    .local-commissioner-card-top{

        flex-direction:column;

        text-align:center;
    }

    .local-commissioner-card-row{

        flex-direction:column;

        gap:5px;
    }

    .local-commissioner-card-value{

        text-align:left;
    }

}

/* ===========================
   LOCAL COMMISSIONER CARD BADGE
=========================== */

.local-commissioner-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    width: fit-content;

    margin: 7px 0 3px;
    padding: 6px 12px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #5b21b6 0%,
            #7c3aed 55%,
            #8b5cf6 100%
        );

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.45px;
    line-height: 1.2;
    text-transform: uppercase;

    box-shadow:
        0 3px 9px
        rgba(91, 33, 182, 0.28);
}

.local-commissioner-card-badge-icon {
    font-size: 9px;
    line-height: 1;
}

@media (max-width: 600px) {

    .local-commissioner-card-badge {
        padding: 5px 10px;
        font-size: 10px;
        letter-spacing: 0.25px;
    }
}

/* =========================================================
   NAVIGATION NOTIFICATIONS
========================================================= */

.notification-menu {

    position:relative;

    display:flex;

    align-items:center;
}


.notification-button {

    position:relative;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:44px;
    height:44px;

    padding:0;

    border:1px solid
        rgba(212,175,55,.72);

    border-radius:9px;

    background:transparent;

    color:#f3ca65;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.notification-button:hover {

    background:
        rgba(212,175,55,.12);

    transform:translateY(-1px);
}


.notification-icon {

    display:inline-flex;

    align-items:center;
    justify-content:center;
}


/* ===========================
   UNREAD BADGE
=========================== */

.notification-count {

    position:absolute;

    top:-7px;
    right:-7px;

    align-items:center;
    justify-content:center;

    min-width:20px;
    height:20px;

    padding:0 5px;

    border:2px solid #06152e;

    border-radius:999px;

    background:#dc2626;

    color:#ffffff;

    font-size:10px;

    font-weight:800;

    line-height:1;
}


/* ===========================
   DROPDOWN
=========================== */

.notification-dropdown {

    position:absolute;

    top:54px;

    right:0;

    z-index:12000;

    display:none;

    width:380px;
    max-width:calc(100vw - 24px);

    max-height:520px;

    overflow:hidden;

    border:1px solid #dce5ef;

    border-radius:12px;

    background:#ffffff;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.22);
}


.notification-dropdown.open {

    display:block;
}


/* ===========================
   HEADER
=========================== */

.notification-dropdown-header {

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:15px 16px;

    border-bottom:1px solid #e5e7eb;

    background:#f8fafc;
}


.notification-dropdown-header strong {

    color:#123d73;

    font-size:16px;
}


.notification-mark-all {

    padding:0;

    border:none;

    background:transparent;

    color:#2563eb;

    font-size:12px;

    font-weight:700;

    cursor:pointer;
}


.notification-mark-all:hover {

    text-decoration:underline;
}


.notification-mark-all:disabled {

    opacity:.55;

    cursor:not-allowed;
}


/* ===========================
   LIST
=========================== */

.notification-list {

    max-height:450px;

    overflow-y:auto;

    overscroll-behavior:contain;
}


/* ===========================
   NOTIFICATION ITEM
=========================== */

.notification-item {

    display:block;

    width:100%;

    padding:14px 16px;

    border:none;

    border-bottom:1px solid #edf0f4;

    background:#ffffff;

    color:#1f2937;

    text-align:left;

    cursor:pointer;

    transition:background .18s ease;
}


.notification-item:hover {

    background:#f8fafc;
}


.notification-item.unread {

    background:#eff6ff;
}


.notification-item.unread:hover {

    background:#e6f0ff;
}


.notification-item-top {

    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:10px;
}


.notification-item-top strong {

    color:#123d73;

    font-size:14px;

    line-height:1.35;
}


.notification-unread-dot {

    width:8px;
    height:8px;

    flex-shrink:0;

    margin-top:5px;

    border-radius:50%;

    background:#2563eb;
}


.notification-item-message {

    margin:6px 0 8px;

    color:#475569;

    font-size:13px;

    line-height:1.45;

    white-space:normal;
}


.notification-item-time {

    display:block;

    color:#94a3b8;

    font-size:11px;

    font-weight:600;
}


/* ===========================
   EMPTY / LOADING
=========================== */

.notification-loading,
.notification-error {

    padding:28px 18px;

    color:#64748b;

    font-size:13px;

    text-align:center;
}


.notification-error {

    color:#b91c1c;
}


.notification-empty {

    padding:32px 20px;

    color:#64748b;

    text-align:center;
}


.notification-empty span {

    display:block;

    margin-bottom:10px;

    font-size:28px;
}


.notification-empty p {

    margin:0;

    font-size:13px;

    line-height:1.5;
}


/* =========================================================
   MOBILE NOTIFICATIONS
========================================================= */

@media (max-width:760px) {

    #account-menu {

        gap:8px;
    }


    .notification-button {

        width:37px;
        height:37px;
    }


    .notification-icon svg {

        width:18px;
        height:18px;
    }


    .notification-count {

        top:-6px;
        right:-6px;

        min-width:18px;
        height:18px;

        font-size:9px;
    }


    .notification-dropdown {

        position:fixed;

        top:50%;
        left:50%;

        right:auto;

        width:92vw;

        max-width:420px;

        max-height:75vh;

        transform:
            translate(-50%,-50%);
    }


    .notification-list {

        max-height:
            calc(75vh - 58px);
    }
}