.blocked-badge {
        background-color: #dc2626;
    }

    .badge-container {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 10px;
        padding-right: 100px;
    }

    .sr-only {
        display: none;
    }

    /* embedded */
    .embedded .header {
        display: flex;
        justify-content: flex-end;
        background-color: transparent;
    }

    .embedded .header .logo-link,
    .embedded .header .night-mode-toggle,
    .embedded .header .notification-button {
        display: none;
    }

    .embedded .header .faq-button {
        display: flex;
    }

    .embedded body::before,
    .embedded body::after {
        background: none !important;
    }

    .embedded html {
        --bg-color: #ffffff !important;
        --container-bg: rgba(255, 255, 255, 0.25) !important;
        --container-fade: rgba(255, 255, 255, 0.6) !important;
        --primary-text: #1a1a1a !important;
        --secondary-text: #555555 !important;
        --header-bg: #264edc !important;
        --header-text: #ffffff !important;
        --accent-color: #264edc !important;
        --grid-color: rgba(38, 78, 220, 0.05) !important;
        --border-color: #d1d5db !important;
        --box-bg: #f0f2f5 !important;
        --box-border: #ddd !important;
        --button: #1D3EB2 !important;
        --scroll-color: rgb(29, 29, 29, 1) !important;
    }

    .embedded #night-mode-toggle {
        display: none !important;
    }

    .embedded .header .directlink-button {
        position: relative;
        background: var(--button);
        color: var(--header-text);
        border: none;
        padding: 8px 14px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 1.4em;
        z-index: 2000;
        transition: background 0.2s ease, color 0.2s ease;
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .embedded .header .directlink-button:hover {
        filter: brightness(1.1);
    }

    .directlink-button {
        display: none;
    }

    .directlink-text {
        font-size: 16px;
        font-weight: 400;
    }

    :root {
        overflow-x: hidden;
        overscroll-behavior: none;
        --bg-color: #f0f2f5;
        --container-bg: rgba(255, 255, 255, 0.25);
        --container-fade: rgba(255, 255, 255, 0.6);
        --primary-text: #1a1a1a;
        --secondary-text: #555555;
        --header-bg: #264edc;
        --header-text: #ffffff;
        --accent-color: #264edc;
        --grid-color: rgba(38, 78, 220, 0.05);
        --border-color: #d1d5db;
        --box-bg: #ffffff;
        --box-border: #ddd;
        --button: #1D3EB2;
        --scroll-color: rgb(29, 29, 29, 1);
        --burger-button-hover: #264edc1c;
        --inner-box-bg: #f9f9f9;

    }

    html.night-mode {
        --bg-color: #1b1f24;
        --container-bg: rgba(26, 26, 26, 0.6);
        --container-fade: rgba(46, 46, 46, 0.6);
        --burger-button-hover: rgba(46, 46, 46, 0.6);
        --primary-text: #e2e2e2;
        --secondary-text: #aaaaaa;
        --header-bg: #1c1f24;
        --header-text: #fafafa;
        --accent-color: #3b82f6;
        --grid-color: rgba(59, 131, 246, 0.05);
        --border-color: #444;
        --box-bg: #1f1f1f;
        --box-border: #333;
        --button: #333;
        --scroll-color: rgb(29, 29, 29, 1);
        --inner-box-bg: #2e2e2e;
    }

    ::-webkit-scrollbar {
        scrollbar-width: none;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--scroll-color);
        border-radius: 6px;
        border: 3px solid transparent;
        background-clip: padding-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--scroll-color);
    }

    ::-webkit-scrollbar-button {
        background: transparent;
    }

    a {
        color: var(--accent-color);
        text-decoration: none;
        font-weight: bold;
        transition: color 0.3s ease;
    }

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

    .footer a:hover {
        color: var(---accent-color);
        text-decoration: underline;
    }

    .footer a:visited {
        color: var(--accent-color);
    }

    .footer a:focus {
        outline: 2px dashed var(--accent-color);
    }

    .footer a:active {
        color: var(--accent-color);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Inter', sans-serif;
    }

    body {
        background: var(--bg-color);
        overflow-x: hidden;
        position: relative;
        transition: background-color 0.3s ease, color 0.3s ease;
        padding-top: 64px;
        /* Add padding equal to header height */
    }

    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: -1;
        background:
            linear-gradient(var(--grid-color) 2px, transparent 1px),
            linear-gradient(90deg, var(--grid-color) 2px, transparent 1px);
        background-size: 30px 30px;
    }

    body::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: -1;
        background: radial-gradient(circle at center,
                rgba(255, 255, 255, 0.08) 0%,
                transparent 60%);
        mix-blend-mode: overlay;
        transition: background 0.3s ease;
    }

    .night-mode-toggle,
    .notification-button {
        position: relative;
        background: var(--button);
        color: var(--header-text);
        border: none;
        padding: 8px 14px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 1.4em;
        z-index: 2000;
        transition: background 0.2s ease, color 0.2s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .night-mode-toggle:hover,
    .notification-button:hover {
        filter: brightness(1.1);
    }

    .faq-button {
        position: relative;
        background: var(--button);
        color: var(--header-text);
        border: none;
        padding: 8px 14px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 1.4em;
        z-index: 2000;
        transition: background 0.2s ease, color 0.2s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .faq-button:hover {
        filter: brightness(1.1);
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--header-bg);
        padding: 10px;
        transition: background 0.3s ease;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1200;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .logo-link {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 32px;
        width: auto;
    }

    .burger-menu-button {
        position: absolute;
        right: 15px;
        background: none;
        border: none;
        background-color: var(--header-bg);
        border-radius: 4px;
        color: var(--header-text);
        font-size: 1.4em;
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1001;
    }

    .burger-menu-button:active {
        filter: brightness(1.4);
        background-color: var(--button);

    }

    .burger-menu-button:hover {
        background-color: var(--button);
    }

    .burger-menu {
        position: fixed;
        top: 60px;
        right: 15px;
        width: 250px;
        background: var(--box-bg);
        padding: 8px;
        transition: transform 0.2s ease, opacity 0.2s ease;
        z-index: 999;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: column;
        gap: 4px;
        border-radius: 8px;
        transform-origin: top right;
        transform: scale(0.95);
        opacity: 0;
        pointer-events: none;
        border: 1px solid var(--border-color);
    }

    .burger-menu.active {
        transform: scale(1);
        opacity: 1;
        pointer-events: all;
    }

    .burger-menu .notification-button,
    .burger-menu .faq-button,
    .burger-menu .night-mode-toggle {
        width: 100%;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        background: transparent;
        color: var(--primary-text);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 1em;
        cursor: pointer;
        transition: background 0.2s ease;

    }

    .burger-menu .notification-button:hover,
    .burger-menu .faq-button:hover,
    .burger-menu .night-mode-toggle:hover {
        background: var(--burger-button-hover);
    }

    .burger-menu .notification-button span,
    .burger-menu .faq-button span,
    .burger-menu .night-mode-toggle span {
        font-size: 14px;
        font-weight: 500;
    }

    .burger-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
        z-index: 999;
    }

    .burger-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Update embedded styles */
    .embedded .burger-menu .directlink-button {
        width: 100%;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        background: transparent;
        color: var(--primary-text);
        border: none;
        border-radius: 6px;
        font-size: 1em;
        text-decoration: none;
        transition: background 0.2s ease;
    }

    .embedded .burger-menu .directlink-button:hover {
        background: var(--container-fade);
    }

    .container {
        max-width: 1200px;
        min-width: 360px;
        margin: 20px auto;
        position: relative;
        padding: 20px;
        background: var(--container-bg);
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s ease, color 0.3s ease;
        margin-top: 10px;
    }

    .map-legislation-wrapper {
        display: flex;
        justify-content: center;
        gap: 20px;
        width: 100%;
    }

    .map-column {
        flex: 1;
        max-width: calc(50% - 10px);
        display: flex;
        flex-direction: column;
    }

    .legislation-section {
        flex: 1;
        max-width: calc(50% - 10px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
    }

    .map-box {
        background: var(--box-bg);
        border: 1px solid var(--box-border);
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        transition: background-color 0.3s ease, color 0.3s ease;
        height: 100%;
    }

    .map-text-box {
        background: var(--container-fade);
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s ease, color 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    #title {
        font-size: 1.1em;
        font-weight: 500;
        color: var(--primary-text);
        margin-bottom: 4px;
        transition: color 0.3s ease;
        line-height: 1.3;
        overflow: hidden;
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    #subtitle {
        font-size: 14px;
        color: var(--secondary-text);
        transition: color 0.3s ease;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .map-container {
        position: relative;
        width: 100%;
        height: 600px;
        border-radius: 6px;
        overflow: hidden;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    #map {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .leaflet-container {
        background: transparent !important;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .legislation-section {
        display: flex;
        flex-direction: column;
        width: 50%;
        gap: 10px;
        /* transition: width 0.3s ease; */
        height: 100%;
        /* Ensure full height */
    }

    /* Changed from a div to an h2 but kept the class to retain the look */
    .legislation-header-label {
        background: var(--box-bg);
        border: 1px solid var(--box-border);
        border-radius: 8px;
        padding: 12px;
        font-size: 18px;
        width: 100%;
        font-weight: 600;
        color: var(--primary-text);
        text-align: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .legislation-container {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-height: 600px;
        /* Set a reasonable max-height */
        height: calc(100vh - 300px);
        /* Alternative dynamic height based on viewport */
        background: var(--box-bg);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        flex: 1;
        /* Take up remaining space */
        display: flex;
        flex-direction: column;
        border: 1px solid var(--box-border);
        gap: 18px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* Add grid layout when expanded */
    .legislation-section.expanded .legislation-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px;
    }

    .legislation-item {
        padding: 16px;
        background: var(--inner-box-bg);
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease;
        position: relative;
        height: fit-content;
        position: relative;
        /* Acts as the positioning parent */
        padding-bottom: 60px;
        /* Adjust this value to leave enough room for the button */
    }

    /* Adjust item width in expanded view */
    .legislation-section.expanded .legislation-item {
        display: flex;
        flex-direction: column;
        height: 250px;
    }

    /* Adjust description length in expanded view */
    .legislation-section.expanded .legislation-description {
        overflow: hidden;
        display: -webkit-box;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    html.night-mode .legislation-item {
        background: var(--inner-box-bg);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .datetime-ago {
        position: absolute;
        top: 16px;
        right: 16px;
        padding: 4px 8px;
        font-size: 14px;
        color: var(--secondary-text);
    }

    html.night-mode .datetime-ago {
        color: #aaaaaa;
    }

    .legislation-header {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 600;
        color: var(--primary-text);
        transition: color 0.3s ease;
        overflow: hidden;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .legislation-meta {
        font-size: 14px;
        color: var(--secondary-text);
        display: flex;
        flex-direction: column;
        gap: 4px;
        transition: color 0.3s ease;
    }

    .legislation-meta div {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .legislation-description {
        font-size: 14px;
        color: var(--secondary-text);
        line-height: 1.4;
        /* Updated from 1.3 to match Truth Social */
        margin-top: 6px;
        transition: color 0.3s ease;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        /* Show 6 lines before truncating */
        line-clamp: 6;
        /* For future compatibility */
        -webkit-box-orient: vertical;
    }

    .legislation-footer {
        margin-top: 8px;
        display: flex;
        justify-content: flex-end;
        position: absolute;
        bottom: 16px;
        /* Distance from the bottom of the container */
        right: 16px;
        /* Distance from the right of the container */
        margin: 0;
    }

    .read-more-btn {
        background: var(--accent-color);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .read-more-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Changed from a div to an h2 but kept the class to retain the look */
    .schedule-header-label {
        background: var(--box-bg);
        border: 1px solid var(--box-border);
        border-radius: 8px;
        padding: 12px;
        font-size: 18px;
        font-weight: 600;
        margin-top: 15px;
        color: var(--primary-text);
        text-align: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .control-group {
        width: 100%;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 15px;
        background: var(--box-bg);
        border: 1px solid var(--box-border);
        border-radius: 8px;
        padding: 12px;
        font-size: 1.5rem;
        color: var(--primary-text);
        text-align: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .slider-container {
        flex-grow: 1;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .slider-label {
        font-size: 14px;
        color: var(--secondary-text);
        min-width: 50px;
        text-align: center;
        transition: color 0.3s ease;
    }

    .slider {
        flex-grow: 1;
        height: 10px;
        -webkit-appearance: none;
        appearance: none;
        background: #e5e7eb;
        outline: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .slider:hover {
        background: #d1d5db;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        background: #fff;
        border: 2px solid var(--accent-color);
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.1s ease, background-color 0.3s ease, border-color 0.3s ease;
    }

    .slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: #fff;
        border: 2px solid var(--accent-color);
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.1s ease, background-color 0.3s ease, border-color 0.3s ease;
    }

    .slider::-webkit-slider-thumb:hover {
        transform: scale(1.1);
    }

    .slider::-moz-range-thumb:hover {
        transform: scale(1.1);
    }

    .schedule {
        flex: 1;
        /* Take up remaining space */
        overflow-y: auto;
        padding: 20px;
        padding-top: 0px;
        background: var(--box-bg);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--box-border);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .schedule-date {
        font-size: 18px;
        font-weight: 500;
        color: var(--primary-text);
        margin: 20px 0 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e7eb;
        transition: border-color 0.3s ease;
    }

    html.night-mode .schedule-date {
        border-bottom: 1px solid #666;
        transition: border-color 0.3s ease;
    }

    .schedule-item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 10px 0;
        transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
    }

    .schedule-item:hover {
        transform: translateX(3px);
    }

    .schedule-marker {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        background: #888888;
        border: 2px solid var(--box-bg);
        border-radius: 50%;
        margin-top: 4px;
        position: relative;
        box-shadow: 0 0 0 2px #888888;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .schedule-marker-latest {
        background: var(--accent-color);
        box-shadow: 0 0 0 2px var(--accent-color);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .schedule-marker-latest-ring {
        position: absolute;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 2px solid var(--accent-color);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: pulse-map 2.5s infinite;
        transition: border-color 0.3s ease;
    }

    .schedule-content {
        flex-grow: 1;
        transition: color 0.3s ease;
    }

    .schedule-time {
        font-size: 14px;
        color: var(--secondary-text);
        margin-bottom: 4px;
        word-wrap: break-word;
        transition: color 0.3s ease;
    }

    .schedule-details {
        font-size: 14px;
        color: var(--primary-text);
        line-height: 1.4;
        word-wrap: break-word;
        transition: color 0.3s ease;
    }

    .badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 14px;
        margin-right: 8px;
        color: #fff;
        white-space: nowrap;
        align-self: flex-start;
    }

    .legislation-badge {
        background-color: #007bff;
    }

    .executive-order-badge {
        background-color: #28a745;
    }

    .grant-of-clemency-badge {
        background-color: #2885a7;
    }

    .memoranda-badge {
        background-color: #71829f;
    }

    .proclamation-badge {
        background-color: #9c27b0;
    }

    @keyframes pulse-map {
        0% {
            width: 12px;
            height: 12px;
            opacity: 0;
            border-width: 2px;
        }

        4% {
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        100% {
            width: 40px;
            height: 40px;
            opacity: 0;
            border-width: 2px;
        }
    }

    .marker-latest {
        position: relative;
    }

    .marker-latest::before {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        background: var(--accent-color);
        border: 2px solid #ffffff;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .marker-latest-ring {
        position: absolute;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 2px solid var(--accent-color);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: pulse-map 2.5s infinite;
        transition: border-color 0.3s ease;
    }

    .marker-default {
        position: relative;
    }

    .marker-default::before {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        background: #888;
        border: 2px solid #fff;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .marker-selected {
        position: relative;
    }

    .marker-selected::before {
        content: '';
        position: absolute;
        width: 14px;
        height: 14px;
        background: #888;
        border: 2px solid #fff;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .marker-selected-ring {
        position: absolute;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 2px solid #888;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: pulse-map 2.5s infinite;
        transition: border-color 0.3s ease;
    }

    .marker-departure {
        position: relative;
    }

    .marker-departure::before {
        content: '';
        position: absolute;
        width: 6px;
        height: 6px;
        background: var(--accent-color);
        border: 1px solid #ffffff;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .footer {
        text-align: center;
        font-size: 12px;
        color: var(--primary-text);
        transition: color 0.3s ease;
    }

    .schedule-truth-wrapper {
        display: flex;
        gap: 20px;
    }

    @media screen and (max-width: 365px) {

        .badge {
            font-size: 12px;
        }

        .datetime-ago {
            font-size: 12px;
        }
    }

    .truth-social-section {
        display: flex;
        flex-direction: column;
        width: 50%;
        gap: 10px;
    }


    .header-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .notification-button.granted {
        background: var(--button);
        color: #fff;
    }

    .notification-button.denied {
        background: #ff4d4dd9;
        color: #fff;
    }

    .notification-button.denied:hover {
        background: #ff4d4dd9;
        color: #fff;
    }

    #loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--header-bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.5s ease;
        backdrop-filter: blur(10px);
        contain: strict;
    }

    #loading-screen.fadeOut {
        opacity: 0;
        pointer-events: none;
    }

    .loading-logo {
        width: 80px;
        height: 80px;
        animation: pulse 2s ease-in-out infinite;
        margin-bottom: 20px;
    }

    @keyframes pulse {
        0% {
            transform: scale(0.95);
            opacity: 0.8;
        }

        50% {
            transform: scale(1.05);
            opacity: 1;
        }

        100% {
            transform: scale(0.95);
            opacity: 0.8;
        }
    }

    .spinner {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 3px solid var(--accent-color);
        border-top-color: transparent;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .motd-header-label {
        max-width: 1200px;
        width: calc(100% - 40px);
        margin: 20px auto;
        position: relative;
        padding: 20px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        background: var(--box-bg);
        border: 1px solid var(--box-border);
        border-radius: 8px;
        padding: 12px;
        font-size: 14px;
        font-weight: 400;
        color: var(--primary-text);
        text-align: center;
        transition: background-color 0.3s ease, color 0.3s ease;
        margin-top: 10px;
    }

    .motd-header-label.has-close-button {
        padding-left: 50px;
    }

    .motd-close-button {
        position: absolute;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--secondary-text);
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .motd-close-button:hover {
        background: var(--container-fade);
        color: var(--primary-text);
    }

    .popup-overlay {
        display: block;
        /* Change from none to block */
        position: fixed;
        inset: 0;
        backdrop-filter: blur(6px);
        z-index: 99999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .popup-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

    .popup-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.95);
        background: var(--box-bg);
        width: 90%;
        max-width: 520px;
        border-radius: 16px;
        padding: 0;
        /* Remove default padding */
        opacity: 0;
        pointer-events: none;
        z-index: 100000;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, opacity 0.3s ease;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* Contain child elements */
    }

    .popup-container.active {
        opacity: 1;
        pointer-events: all;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Update popup header */
    .popup-title {
        padding: 25px 25px 15px;
        font-size: 20px;
        font-weight: 600;
        color: var(--primary-text);
        border-bottom: 1px solid var(--border-color);
        margin: 0;
        /* Remove margin */
        background: var(--inner-box-bg);
    }

    /* Update popup content */
    .popup-content {
        color: var(--secondary-text);
        line-height: 1.6;
        font-size: 15px;
        margin: 0;
        /* Remove margin */
        max-height: 60vh;
        overflow-y: auto;
        background: var(--box-bg);
    }

    /* Style the scrollbar for the content */
    .popup-content::-webkit-scrollbar {
        width: 8px;
    }

    .popup-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .popup-content::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 4px;
    }

    /* Update popup footer */
    .popup-footer-row {
        margin: 0;
        /* Remove margin */
        padding: 15px 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid var(--border-color);
        background: var(--inner-box-bg);
    }

    /* Update popup close button */
    .popup-close-button {
        position: absolute;
        top: 12px;
        right: 14px;
        background: var(--container-fade);
        border: none;
        color: var(--secondary-text);
        width: 32px;
        height: 32px;
        border-radius: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 24px;
        justify-content: center;
        transition: all 0.2s ease;
        /* Fix typo: 0.2sease → 0.2s ease */
        z-index: 1;
    }

    .popup-close-button:hover {
        background: var(--border-color);
        color: var(--primary-text);
        transform: scale(1.1);
    }

    /* Update left icons container */
    .popup-left-icons {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Update icon buttons */
    .popup-icon-button {
        background: var(--container-fade);
        border: none;
        cursor: pointer;
        color: var(--secondary-text);
        width: 32px;
        height: 32px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        font-size: 18px;
    }

    .popup-icon-button:hover {
        background: var(--border-color);
        color: var(--primary-text);
        transform: scale(1.1);
    }

    /* Summary Toggle Button Style */
    .summary-toggle-button.active {
        color: var(--accent-color);
        /* Highlight when premium summary is active */
    }

    /* Update read source button */
    .popup-readsource-button {
        background: var(--accent-color);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .popup-readsource-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Update animations */
    @keyframes fadeInOverlay {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOutOverlay {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @keyframes popupShow {
        from {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.95);
        }

        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    @keyframes popupHide {
        from {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        to {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.95);
        }
    }

    /* Update Truth Social popup specific styles */
    .popup-truth-header {
        background: var(--inner-box-bg);
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 12px;
    }

    .popup-truth-content {
        padding: 20px 25px;
        color: var(--primary-text);
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 16px;
        white-space: pre-wrap;
    }

    .popup-truth-media {
        border-radius: 12px;
        margin: 15px 0;
        transition: transform 0.2s ease;
    }

    .popup-truth-media:hover {
        transform: scale(1.02);
    }

    /* Dark mode adjustments */
    html.night-mode .popup-container {
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
    }

    /* CivicTracker Announcement Popup Styles */
    .civictracker-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        display: none;
        transition: opacity 0.3s ease;
    }

    .civictracker-overlay.active {
        opacity: 1;
        display: block;
    }

    .civictracker-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.95);
        background: var(--box-bg);
        border: 1px solid var(--box-border);
        border-radius: 16px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        max-width: 600px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        z-index: 9999;
        opacity: 0;
        display: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .civictracker-container.active {
        opacity: 1;
        display: block;
        transform: translate(-50%, -50%) scale(1);
    }

    .civictracker-close-button {
        position: absolute;
        top: 16px;
        right: 16px;
        background: none;
        border: none;
        color: var(--secondary-text);
        cursor: pointer;
        padding: 8px;
        border-radius: 50%;
        transition: all 0.2s ease;
        z-index: 10;
    }

    .civictracker-close-button:hover {
        background: var(--container-bg);
        color: var(--primary-text);
    }

    .civictracker-close-button i {
        font-size: 20px;
    }

    .civictracker-header {
        padding: 32px 32px 24px 32px;
        text-align: center;
        border-bottom: 1px solid var(--border-color);
    }

    .civictracker-logo {
        margin-bottom: 16px;
    }

    .civictracker-logo-img {
        width: 120px;
        height: auto;
        max-height: 80px;
        object-fit: contain;
    }

    .civictracker-title {
        font-size: 28px;
        font-weight: 700;
        color: var(--primary-text);
        margin: 0;
        line-height: 1.2;
    }

    .civictracker-content {
        padding: 24px 32px;
    }

    .civictracker-section {
        margin-bottom: 24px;
    }

    .civictracker-section:last-child {
        margin-bottom: 0;
    }

    .civictracker-section h3 {
        font-size: 18px;
        font-weight: 600;
        color: var(--primary-text);
        margin: 0 0 12px 0;
    }

    .civictracker-section p {
        font-size: 16px;
        line-height: 1.6;
        color: var(--secondary-text);
        margin: 0 0 12px 0;
    }

    .civictracker-section ul {
        margin: 12px 0;
        padding-left: 20px;
    }

    .civictracker-section li {
        font-size: 16px;
        line-height: 1.6;
        color: var(--secondary-text);
        margin-bottom: 8px;
    }

    .civictracker-section li:last-child {
        margin-bottom: 0;
    }

    .civictracker-section strong {
        color: var(--primary-text);
        font-weight: 600;
    }

    .civictracker-footer {
        padding: 24px 32px 32px 32px;
        text-align: center;
        border-top: 1px solid var(--border-color);
    }

    .civictracker-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--accent-color);
        color: white;
        text-decoration: none;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        transition: all 0.2s ease;
    }

    .civictracker-button:hover {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(38, 78, 220, 0.3);
    }

    .civictracker-button i {
        font-size: 16px;
    }

    /* Dark mode adjustments for CivicTracker popup */
    html.night-mode .civictracker-container {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    }

    /* Mobile responsiveness for CivicTracker popup */
    @media screen and (max-width: 768px) {
        .civictracker-container {
            width: 95%;
            max-height: 85vh;
        }

        .civictracker-header {
            padding: 24px 20px 20px 20px;
        }

        .civictracker-title {
            font-size: 24px;
        }

        .civictracker-content {
            padding: 20px 20px;
        }

        .civictracker-footer {
            padding: 20px 20px 24px 20px;
        }

        .civictracker-section h3 {
            font-size: 16px;
        }

        .civictracker-section p,
        .civictracker-section li {
            font-size: 14px;
        }

        .civictracker-button {
            font-size: 14px;
            padding: 10px 20px;
        }
    }

    .popup-summary-wrapper {
        position: relative;
        overflow-y: auto;
        padding: 5px 25px 5px 25px;
        min-height: 200px;
        /* Minimum height to prevent small content shrinking */
        max-height: 60vh;
        /* Maximum height for very large content */
        transition: height 0.1s ease;
        /* Smooth transition if height changes */
    }

    /* When both summaries exist, fix the height to prevent jumps */
    .popup-container.has-both-summaries .popup-summary-wrapper {
        height: var(--summary-max-height, 60vh);
        /* Use CSS variable to store the larger height */
    }

    .search-filter-section {
        background: var(--box-bg);
        border: 1px solid var(--box-border);
        border-radius: 8px;
    }

    .search-container {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .search-container .iconoir-search {
        position: absolute;
        margin: 0;
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--secondary-text);
    }

    #legislation-search,
    #truth-social-search {
        width: 100%;
        padding: 10px 35px;
        margin: 10px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 14px;
        background: var(--container-fade);
        color: var(--primary-text);
    }

    .clear-search-button {
        position: absolute;
        right: 16px;
        background: none;
        border: none;
        color: var(--secondary-text);
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 8px;
        border-radius: 6px;
        transition: background 0.2s ease;
    }

    .clear-search-button:hover {
        color: var(--primary-text);
        background: var(--container-bg);
    }

    .filter-badges-container {
        width: 100%;
        overflow-x: hidden;
    }

    .filter-badges-scroll {
        display: flex;
        padding: 0px 10px 10px 10px;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .filter-badges-scroll::-webkit-scrollbar {
        display: none;
    }

    .filter-badge {
        white-space: nowrap;
        padding: 6px 12px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background: var(--container-fade);
        color: var(--secondary-text);
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .filter-badge:hover {
        background: var(--accent-color);
        color: white;
        border-color: var(--accent-color);
    }

    .filter-badge.active {
        background: var(--accent-color);
        color: white;
        border-color: var(--accent-color);
    }

    .filter-badge[data-type="legislation"].active {
        background-color: #007bff;
        border-color: #007bff;
    }

    .filter-badge[data-type="executive-order"].active {
        background-color: #28a745;
        border-color: #28a745;
    }

    .filter-badge[data-type="grant-of-clemency"].active {
        background-color: #2885a7;
        border-color: #2885a7;
    }

    .filter-badge[data-type="memoranda"].active {
        background-color: #71829f;
        border-color: #71829f;
    }

    .filter-badge[data-type="blocked"].active {
        background-color: #dc2626;
        border-color: #dc2626;
    }

    .filter-badge[data-type="legislation"]:hover {
        background-color: #007bff;
        border-color: #007bff;
        color: white;
    }

    .filter-badge[data-type="executive-order"]:hover {
        background-color: #28a745;
        border-color: #28a745;
        color: white;
    }

    .filter-badge[data-type="grant-of-clemency"]:hover {
        background-color: #2885a7;
        border-color: #2885a7;
        color: white;
    }

    .filter-badge[data-type="memoranda"]:hover {
        background-color: #71829f;
        border-color: #71829f;
        color: white;
    }

    .filter-badge[data-type="blocked"]:hover {
        background-color: #dc2626;
        border-color: #dc2626;
        color: white;
    }

    .filter-badge[data-type="proclamation"].active {
        background-color: #9c27b0;
        border-color: #9c27b0;
    }

    .filter-badge[data-type="proclamation"]:hover {
        background-color: #9c27b0;
        border-color: #9c27b0;
        color: white;
    }

    .burger-menu .auth-button {
        width: 100%;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        background: transparent;
        color: var(--primary-text);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 1em;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .burger-menu .auth-button:hover {
        background: var(--burger-button-hover);
    }

    .burger-menu .auth-button span {
        font-size: 14px;
        font-weight: 500;
    }

    @media screen and (max-width: 900px) {
        .burger-menu .auth-button {
            font-size: 1em;
            padding: 10px 12px;
        }
    }

    /* Upgrade Button in Header */
    .upgrade-button {
        display: flex;
        align-items: center;
        gap: 6px;
        background-color: var(--accent-color);
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: background-color 0.2s;
        margin-right: 12px;
    }

    .upgrade-button:hover {
        background-color: var(--button);
    }

    .upgrade-button i {
        font-size: 16px;
    }

    /* Upgrade Page Styles */
    .upgrade-container {
        max-width: 800px;
        margin: 40px auto;
        padding: 20px;
    }

    .upgrade-container h1 {
        text-align: center;
        color: var(--primary-text);
        margin-bottom: 40px;
        font-size: 2.5em;
    }

    .upgrade-content {
        display: flex;
        gap: 40px;
        align-items: flex-start;
    }

    .features-list {
        flex: 1;
        background: var(--box-bg);
        padding: 30px;
        border-radius: 12px;
        border: 1px solid var(--box-border);
    }

    .features-list h2 {
        color: var(--primary-text);
        margin-bottom: 20px;
        font-size: 1.5em;
    }

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

    .features-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--primary-text);
        margin-bottom: 16px;
        font-size: 1.1em;
    }

    .features-list li i {
        color: var(--accent-color);
        font-size: 1.2em;
    }

    .upgrade-action {
        flex: 0 0 300px;
        background: var(--box-bg);
        padding: 30px;
        border-radius: 12px;
        border: 1px solid var(--box-border);
        text-align: center;
    }

    .price-tag {
        margin-bottom: 20px;
    }

    .price-tag .amount {
        font-size: 3em;
        font-weight: bold;
        color: var(--primary-text);
    }

    .price-tag .period {
        font-size: 1.2em;
        color: var(--secondary-text);
    }

    .subscribe-button {
        width: 100%;
        padding: 12px 24px;
        background-color: var(--accent-color);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 1.1em;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .subscribe-button:hover {
        background-color: var(--button);
    }

    .subscription-status {
        margin: 10px 0;
        color: var(--primary-text);
        min-height: 20px;
    }


    .truth-social-header-label {
        background: var(--box-bg);
        border: 1px solid var(--box-border);
        border-radius: 8px;
        padding: 12px;
        font-size: 18px;
        font-weight: 600;
        color: var(--primary-text);
        text-align: center;
        margin-top: 15px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .truth-social-container {
        flex: 1;
        width: 100%;
        padding: 20px;
        background: var(--box-bg);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--box-border);
        gap: 18px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .truth-post {
        padding: 16px;
        background: var(--inner-box-bg);
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease;
        position: relative;
    }

    .truth-post-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
    }

    /* Container for all content */
    .truth-post-content-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    /* Update header to use flex layout */
    .truth-post-header {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .truth-post-meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        justify-content: center;
    }

    .truth-post-name {
        font-weight: 600;
        color: var(--primary-text);
        font-size: 14px;
        line-height: 1.2;
    }

    .truth-post-username {
        color: var(--secondary-text);
        font-size: 13px;
        line-height: 1.2;
    }

    /* Update date position to use the container as reference */
    .truth-post-date {
        color: var(--secondary-text);
        font-size: 14px;
        margin-top: 8px;
        /* Add space between content and date */
    }

    .truth-post-content {
        color: var(--primary-text);
        font-size: 14px;
        line-height: 1.4;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 8;
        /* Increased from 4 to 8 lines */
        line-clamp: 8;
        /* Increased from 4 to 8 lines */
        -webkit-box-orient: vertical;
    }

    /* Update footer to extend full width */
    .truth-post-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 12px;
        border-top: 1px solid var(--border-color);
        margin-top: auto;
    }

    /* Style the footer buttons container */
    .truth-post-footer-buttons {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Style the share/link buttons */
    .truth-post-icon-button {
        background: var(--container-fade);
        border: none;
        cursor: pointer;
        color: var(--secondary-text);
        width: 32px;
        height: 32px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        font-size: 18px;
    }

    .truth-post-icon-button:hover {
        background: var(--border-color);
        color: var(--primary-text);
        transform: scale(1.1);
    }

    .truth-post-link {
        background: var(--accent-color);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        text-decoration: none;
    }

    .truth-post-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .truth-social-section .search-container {
        margin-bottom: 0;
        /* Override the legislation search margin */
    }

    #truth-social-search:focus {
        outline: none;
        border-color: var(--accent-color);
    }

    /* Parent containers for schedule and truth social sections */
    .schedule-truth-wrapper>div {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 900px;
        gap: 10px;
    }

    .relevance-filter-container {
        padding: 10px 10px 10px 10px;
        margin-bottom: 10px;
    }

    .relevance-slider-container {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0;
    }

    .relevance-icon {
        color: var(--secondary-text);
        font-size: 14px;
        cursor: help;
    }

    .relevance-value {
        color: var(--secondary-text);
        font-size: 13px;
        min-width: 16px;
        text-align: center;
    }

    #relevance-slider {
        flex: 1;
        height: 4px;
        background: var(--border-color);
        position: relative;
        border-radius: 2px;
    }

    #relevance-slider .noUi-connect {
        background: var(--accent-color);
    }

    #relevance-slider .noUi-handle {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--accent-color);
        border: 2px solid #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        top: -7px;
        right: -8px !important;
    }

    #relevance-slider .noUi-handle:before,
    #relevance-slider .noUi-handle:after {
        display: none;
    }

    @media screen and (max-width: 900px) {
        .relevance-filter-container {
            padding: 8px;
        }

        .relevance-value {
            font-size: 13px;
        }
    }

    .pro-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        border-radius: inherit;
    }

    .pro-overlay-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 20px;
        text-align: center;
        color: var(--primary-text);
    }

    .pro-overlay-content i {
        font-size: 24px;
        color: var(--accent-color);
    }

    .pro-overlay-content span {
        font-size: 14px;
    }

    .pro-upgrade-button {
        background: var(--accent-color);
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: filter 0.2s ease;
    }

    .pro-upgrade-button:hover {
        filter: brightness(1.1);
    }

    .search-filter-section {
        position: relative;
    }

    .truth-posts-loading {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        width: 100%;
    }

    .truth-posts-loading .spinner {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 3px solid var(--accent-color);
        border-top-color: transparent;
        animation: spin 1s linear infinite;
    }

    .truth-post-media-container {
        width: 100%;
        margin-top: 12px;
        position: relative;
    }

    .truth-post-media {
        width: 100%;
        height: auto;
        max-height: 300px;
        border-radius: 8px;
        object-fit: cover;
    }

    .popup-truth-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
    }

    .popup-truth-meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-top: 6px;
    }

    .popup-truth-name-row {
        padding-bottom: 5px;
    }

    .popup-truth-name {
        font-weight: 600;
        color: var(--primary-text);
        font-size: 14px;
        line-height: 1.2;
    }

    .popup-truth-username {
        color: var(--secondary-text);
        font-size: 13px;
        line-height: 1.2;
    }

    .popup-truth-date {
        color: var(--secondary-text);
        font-size: 14px;
    }

    .popup-truth-content {
        color: var(--primary-text);
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 16px;
        white-space: pre-wrap;
        padding: 0 16px;
        /* Add horizontal padding */
    }

    .popup-truth-content p {
        margin-bottom: 12px;
        margin-top: 12px;
    }

    .popup-truth-content a {
        color: var(--accent-color);
        text-decoration: none;
    }

    .popup-truth-content a:hover {
        text-decoration: underline;
    }

    .popup-truth-media {
        width: 100%;
        max-height: 400px;
        border-radius: 12px;
        object-fit: cover;
        margin: 16px 0;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .popup-truth-media:hover {
        opacity: 0.9;
    }

    /* Remove engagement stats styles */
    .popup-truth-stats,
    .popup-truth-stat {
        display: none;
    }

    /* Add styles for the screenshot button */
    .truth-post-screenshot {
        background: var(--container-fade);
        border: none;
        cursor: pointer;
        color: var(--secondary-text);
        width: 32px;
        height: 32px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        font-size: 18px;
        padding: 0;
    }

    .truth-post-screenshot:hover {
        background: var(--border-color);
        color: var(--primary-text);
        transform: scale(1.1);
    }

    /* Add styles for when taking screenshot */
    .truth-post.screenshotting {
        background: var(--inner-box-bg) !important;
        color: var(--primary-text) !important;
        box-shadow: none !important;
    }

    /* Add styles for screenshot mode */
    .truth-post.screenshotting .truth-post-footer,
    .truth-post.screenshotting .truth-post-icon-button {
        display: none !important;
    }

    /* Add watermark styles */
    .truth-post-watermark {
        display: none;
        /* Hidden by default */
        position: absolute;
        bottom: 12px;
        right: 12px;
        font-size: 12px;
        color: var(--secondary-text);
        opacity: 0.7;
        font-weight: 500;
        pointer-events: none;
        z-index: 10;
    }

    /* Show watermark during screenshot */
    .truth-post.screenshotting .truth-post-watermark {
        display: block;
    }

    /* Add styles for screenshot clone */
    .truth-post-screenshot-clone {
        position: fixed;
        left: -9999px;
        top: -9999px;
        width: 600px !important;
        max-width: 600px;
        padding: 16px !important;
        margin: 0 !important;
        background: #f9f9f9 !important;
        border-radius: 6px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        z-index: -1;
        pointer-events: none;
        height: auto !important;
        color: #1a1a1a !important;
    }

    /* Update Truth Social screenshot styles for light mode */
    .light-mode-screenshot.truth-post-screenshot-clone {
        background: #f9f9f9 !important;
        color: #1a1a1a !important;
    }

    .light-mode-screenshot .truth-post-header {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .light-mode-screenshot .truth-post-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }

    .light-mode-screenshot .truth-post-meta {
        display: flex;
        flex-direction: column;
    }

    .light-mode-screenshot .truth-post-name {
        font-weight: 600;
        font-size: 16px;
        color: #1a1a1a !important;
        line-height: 1.2;
        margin-bottom: 2px !important;
    }

    .light-mode-screenshot .truth-post-username {
        font-size: 14px;
        color: #555555 !important;
        line-height: 1.2;
    }

    .light-mode-screenshot .truth-post-content-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .light-mode-screenshot .truth-post-content {
        display: block !important;
        white-space: pre-wrap !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: visible !important;
        max-height: none !important;
        margin-bottom: 16px !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        color: #1a1a1a !important;
    }

    .light-mode-screenshot .truth-post-date {
        margin-bottom: 16px !important;
        color: #555555 !important;
        font-size: 14px !important;
    }

    .light-mode-screenshot .truth-post-divider {
        width: 100%;
        height: 1px;
        background-color: #d1d5db !important;
        margin: 0 0 12px 0;
    }

    .light-mode-screenshot .truth-post-watermark {
        display: block !important;
        position: static !important;
        font-size: 12px !important;
        color: #555555 !important;
        opacity: 0.7 !important;
        text-align: right !important;
        margin-top: 4px !important;
    }

    .truth-post-screenshot-clone * {
        margin: 0 !important;
        padding: 0 !important;
    }

    .truth-post-screenshot-clone .truth-post-content {
        display: block !important;
        /* Show all text */
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        white-space: pre-wrap !important;
    }

    .truth-post-screenshot-clone .truth-post-footer {
        display: none !important;
    }

    .truth-post-screenshot-clone .truth-post-watermark {
        display: block !important;
        position: absolute !important;
        bottom: 12px !important;
        right: 12px !important;
        font-size: 12px !important;
        color: var(--secondary-text) !important;
        opacity: 0.7 !important;
    }

    /* Add watermark styles for legislation screenshots */
    .popup-watermark {
        display: none;
        position: absolute;
        bottom: 12px;
        right: 12px;
        font-size: 12px;
        color: var(--secondary-text);
        opacity: 0.7;
        font-weight: 500;
    }

    /* Add screenshot clone styles for legislation */
    .popup-screenshot-clone {
        position: fixed;
        left: -9999px;
        top: -9999px;
        width: 600px !important;
        padding: 0 !important;
        /* Remove padding to control it in child elements */
        margin: 0 !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        /* Increased rounded corners */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
        /* Add subtle shadow */
        z-index: -1;
        pointer-events: none;
        box-sizing: border-box !important;
        overflow: hidden !important;
        /* Changed to hidden to respect border radius */
    }

    .popup-screenshot-clone * {
        box-sizing: border-box !important;
    }

    .popup-screenshot-clone .popup-title {
        width: 100% !important;
        overflow: visible !important;
        white-space: normal !important;
        padding: 25px 25px 15px !important;
        background: #f9f9f9 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    .popup-screenshot-clone .popup-content {
        width: 100% !important;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        white-space: normal !important;
        padding: 20px 25px !important;
    }

    .popup-screenshot-clone .popup-divider {
        width: 100% !important;
        height: 1px !important;
        background-color: #e5e7eb !important;
        margin: 0 !important;
    }

    .popup-screenshot-clone .popup-content p,
    .popup-screenshot-clone .popup-content ul,
    .popup-screenshot-clone .popup-content ol,
    .popup-screenshot-clone .popup-content li,
    .popup-screenshot-clone .popup-content div {
        overflow: visible !important;
        max-height: none !important;
        white-space: normal !important;
    }

    .popup-screenshot-clone .popup-footer-row,
    .popup-screenshot-clone .popup-close-button {
        display: none !important;
    }

    .popup-screenshot-clone .popup-watermark {
        display: block !important;
        padding: 12px 25px !important;
        text-align: right !important;
        font-size: 12px !important;
        color: #6b7280 !important;
        opacity: 0.8 !important;
    }

    /* Light mode specific styles for legislation screenshots */
    .light-mode-screenshot.popup-screenshot-clone {
        background: #ffffff !important;
        color: #1a1a1a !important;
    }

    .light-mode-screenshot .popup-title {
        background: #f9f9f9 !important;
        color: #1a1a1a !important;
        border-bottom: 1px solid #d1d5db !important;
        padding: 25px 25px 15px !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        margin: 0 !important;
    }

    .light-mode-screenshot .popup-content {
        background: #ffffff !important;
        color: #555555 !important;
        padding: 20px 25px !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        white-space: normal !important;
    }

    .light-mode-screenshot .popup-divider {
        width: 100% !important;
        height: 1px !important;
        background-color: #e5e7eb !important;
        margin: 0 !important;
    }

    .light-mode-screenshot .popup-content p {
        margin-bottom: 16px !important;
        color: #1a1a1a !important;
        overflow: visible !important;
        max-height: none !important;
        white-space: normal !important;
    }

    .light-mode-screenshot .popup-content ul,
    .light-mode-screenshot .popup-content ol {
        margin-bottom: 16px !important;
        padding-left: 24px !important;
        color: #1a1a1a !important;
        overflow: visible !important;
        max-height: none !important;
        white-space: normal !important;
    }

    .light-mode-screenshot .popup-content li {
        margin-bottom: 8px !important;
        color: #1a1a1a !important;
        overflow: visible !important;
        max-height: none !important;
        white-space: normal !important;
    }

    .light-mode-screenshot .popup-watermark {
        display: block !important;
        padding: 12px 25px !important;
        text-align: right !important;
        font-size: 12px !important;
        color: #6b7280 !important;
        opacity: 0.8 !important;
        background: #ffffff !important;
    }

    /* Mobile Navigation */
    .mobile-nav {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--box-bg);
        border-top: 1px solid var(--border-color);
        padding: 8px;
        z-index: 1000;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* Center content vertically */
        gap: 4px;
        background: none;
        border: none;
        color: var(--secondary-text);
        padding: 8px 4px;
        /* Reduce horizontal padding */
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        flex: 1;
        /* Make all buttons take equal width */
        min-width: 0;
        /* Allow flex items to shrink below content size */
        text-align: center;
        /* Center text */
    }

    .mobile-nav-item i {
        font-size: 24px;
        min-height: 24px;
        /* Ensure consistent height */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-nav-item span {
        font-size: 12px;
        white-space: nowrap;
        /* Prevent text from wrapping */
        overflow: hidden;
        text-overflow: ellipsis;
        /* Add ellipsis for overflow text */
        width: 100%;
        /* Make span take full width of button */
        display: block;
        /* Ensure the span is a block element */
    }

    .mobile-nav-item.active {
        color: var(--accent-color);
        background: var(--container-fade);
    }

    .schedule-section {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* Add specific styling for date in screenshot clones to fix iOS sizing issues */
    .truth-post-screenshot-clone .truth-post-date {
        font-size: 14px !important;
        /* Force consistent font size */
        color: var(--secondary-text) !important;
        margin-top: 8px !important;
        line-height: 1.2 !important;
        /* Control line height */
        scale: 1 !important;
        /* Prevent iOS scaling */
        -webkit-text-size-adjust: 100% !important;
        /* Prevent iOS text adjustment */
        text-size-adjust: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* Fix iOS text size in screenshot clones overall */
    .truth-post-screenshot-clone {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    /* Also fix popup screenshot text sizing */
    .popup-screenshot-clone {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    /* Remove old Pro feature popup styles */
    .pro-badge,
    .pro-feature-message,
    .pro-feature-logo {
        display: none;
    }

    /* Pro Feature Popup - completely new design */
    .pro-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        z-index: 100000;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .pro-popup-overlay.active {
        opacity: 1;
    }

    .pro-popup-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.95);
        z-index: 100001;
        width: 90%;
        max-width: 450px;
        background: linear-gradient(145deg, #1f2937, #111827);
        border-radius: 16px;
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
        overflow: hidden;
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .pro-popup-container.active {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .pro-popup-container:hover {
        box-shadow: 0 0 40px rgba(59, 130, 246, 0.4);
    }

    .pro-popup-header {
        text-align: center;
        padding: 25px 20px 15px;
        position: relative;
    }

    .pro-popup-logo-container {
        position: relative;
        width: 70px;
        height: 70px;
        margin: 0 auto 15px;
    }

    .pro-popup-logo {
        width: 100%;
        height: 100%;
        filter: brightness(0) invert(1);
        position: relative;
        z-index: 2;
    }

    .pro-popup-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        background: rgba(59, 130, 246, 0.8);
        border-radius: 50%;
        filter: blur(20px);
        z-index: 1;
        animation: pulse-glow 3s infinite ease-in-out;
    }

    @keyframes pulse-glow {

        0%,
        100% {
            opacity: 0.6;
            transform: translate(-50%, -50%) scale(0.8);
        }

        50% {
            opacity: 0.8;
            transform: translate(-50%, -50%) scale(1.1);
        }
    }

    .pro-popup-title {
        color: white;
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .pro-label {
        display: inline-block;
        background: linear-gradient(90deg, #3b82f6, #93c5fd);
        color: white;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        margin-right: 6px;
    }

    .pro-popup-content {
        padding: 0 25px 20px;
        color: #e5e7eb;
    }

    .pro-popup-content p {
        margin-bottom: 16px;
        line-height: 1.6;
        font-size: 15px;
    }

    .pro-popup-note {
        color: #93c5fd;
        font-style: italic;
        font-size: 14px !important;
    }

    .pro-popup-actions {
        display: flex;
        padding: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        gap: 12px;
    }

    .pro-popup-close {
        flex: 1;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #e5e7eb;
        padding: 12px;
        border-radius: 8px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .pro-popup-close:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .pro-popup-upgrade {
        flex: 1.5;
        background: linear-gradient(90deg, #3b82f6, #2563eb);
        color: white;
        border: none;
        padding: 12px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
    }

    .pro-popup-upgrade:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3);
    }

    /* Adjust for dark mode compatibility */
    html.night-mode .pro-popup-container {
        background: linear-gradient(145deg, #1c1f24, #0f141a);
    }

    /* Toggle Button Styles */
    .toggle-view-button {
        background: var(--button);
        color: white;
        border: none;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border-radius: 4px;
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease;
        /* Only transition the background */
        margin-left: 10px;
        overflow: hidden;
        /* Prevent content from affecting size */
        padding: 0;
        /* Remove any padding that might affect size */
        box-sizing: border-box;
        /* Ensure padding doesn't add to dimensions */
    }

    .toggle-view-button:hover {
        background-color: var(--button);
    }

    .toggle-view-button i {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .legislation-header-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Hidden Map Column */
    .map-column.hidden {
        display: none !important;
    }

    /* Expanded Legislation Section */
    .legislation-section.expanded {
        max-width: 100%;
        width: 100%;
        flex: 1 0 100%;
    }

    /* Grid layout for expanded legislation */
    .legislation-section.expanded .legislation-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    /* Mobile adjustments for expanded view */
    @media screen and (max-width: 900px) {
        .toggle-view-button {
            display: none !important;
        }
    }

    /* Enhanced popup-open body styles for all devices */
    html.popup-open {
        height: 100%;
        overflow-y: hidden !important;
    }

    /* CivicTracker popup body styles */
    html.civictracker-popup-open {
        height: 100%;
        overflow-y: hidden !important;
    }

    /* Add popup overlay styles to prevent scroll propagation */
    .popup-overlay.active {
        opacity: 1;
        pointer-events: all;
        touch-action: none;
        /* Prevent touch scrolling on mobile */
    }

    /* Same for any Pro feature popup */
    .pro-popup-overlay.active {
        opacity: 1;
        pointer-events: all;
        touch-action: none;
        /* Prevent touch scrolling on mobile */
    }

    /* Add this rule to adjust the z-index of Leaflet controls */
    .leaflet-control-container {
        z-index: 800 !important;
        /* Lower than header z-index */
    }

    /* Add this rule to ensure proper positioning of the overlay */
    .popup-overlay {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* Enhance popup content formatting */
    .popup-summary-wrapper {
        position: relative;
        overflow-y: auto;
        padding: 5px 25px 5px 25px;
        min-height: 200px;
        /* Minimum height to prevent small content shrinking */
        max-height: 60vh;
        /* Maximum height for very large content */
        transition: height 0.1s ease;
        /* Smooth transition if height changes */
    }

    /* When both summaries exist, fix the height to prevent jumps */
    .popup-container.has-both-summaries .popup-summary-wrapper {
        height: var(--summary-max-height, 60vh);
        /* Use CSS variable to store the larger height */
    }

    .popup-summary-wrapper p {
        margin-bottom: 16px;
        line-height: 1.6;
        margin-top: 5px;
    }

    .popup-summary-wrapper ul,
    .popup-summary-wrapper ol {
        margin-bottom: 16px;
        padding-left: 24px;
    }

    .popup-summary-wrapper li {
        margin-bottom: 8px;
    }

    .popup-summary-wrapper strong {
        font-weight: 600;
    }

    /* Force light mode for screenshots */
    .light-mode-screenshot {
        --bg-color: #f0f2f5 !important;
        --container-bg: rgba(255, 255, 255, 0.25) !important;
        --container-fade: rgba(255, 255, 255, 0.6) !important;
        --primary-text: #1a1a1a !important;
        --secondary-text: #555555 !important;
        --header-bg: #264edc !important;
        --header-text: #ffffff !important;
        --accent-color: #264edc !important;
        --grid-color: rgba(38, 78, 220, 0.05) !important;
        --border-color: #d1d5db !important;
        --box-bg: #ffffff !important;
        --box-border: #ddd !important;
        --button: #1D3EB2 !important;
        --scroll-color: rgb(29, 29, 29, 1) !important;
        --inner-box-bg: #f9f9f9 !important;
        background: #ffffff !important;
        color: #1a1a1a !important;
    }

    .light-mode-screenshot .popup-title {
        background: #f9f9f9 !important;
        color: #1a1a1a !important;
        border-bottom: 1px solid #d1d5db !important;
        padding: 25px 25px 15px !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        margin: 0 !important;
    }

    .light-mode-screenshot .popup-content {
        background: #ffffff !important;
        color: #555555 !important;
        padding: 20px 25px !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        white-space: normal !important;
    }

    .light-mode-screenshot .popup-content p {
        margin-bottom: 16px !important;
        color: #1a1a1a !important;
        overflow: visible !important;
        max-height: none !important;
        white-space: normal !important;
    }

    .light-mode-screenshot .popup-content ul,
    .light-mode-screenshot .popup-content ol {
        margin-bottom: 16px !important;
        padding-left: 24px !important;
        color: #1a1a1a !important;
        overflow: visible !important;
        max-height: none !important;
        white-space: normal !important;
    }

    .light-mode-screenshot .popup-content li {
        margin-bottom: 8px !important;
        color: #1a1a1a !important;
        overflow: visible !important;
        max-height: none !important;
        white-space: normal !important;
    }

    .light-mode-screenshot .popup-watermark {
        display: block !important;
        position: absolute !important;
        bottom: 12px !important;
        right: 12px !important;
        font-size: 12px !important;
        color: #555555 !important;
        opacity: 0.7 !important;
    }

    .light-mode-screenshot .badge {
        color: #ffffff !important;
    }

    .light-mode-screenshot .legislation-badge {
        background-color: #007bff !important;
    }

    .light-mode-screenshot .executive-order-badge {
        background-color: #28a745 !important;
    }

    .light-mode-screenshot .grant-of-clemency-badge {
        background-color: #2885a7 !important;
    }

    .light-mode-screenshot .memoranda-badge {
        background-color: #71829f !important;
    }

    .light-mode-screenshot .proclamation-badge {
        background-color: #9c27b0 !important;
    }

    .light-mode-screenshot .blocked-badge {
        background-color: #dc2626 !important;
    }

    /* Legislation screenshot styles in light mode */
    .light-mode-screenshot.popup-screenshot-clone {
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
        overflow: hidden !important;
    }

    .light-mode-screenshot .popup-title {
        background: #f9f9f9 !important;
        color: #1a1a1a !important;
        border-bottom: 1px solid #e5e7eb !important;
        padding: 25px 25px 15px !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        margin: 0 !important;
    }

    .light-mode-screenshot .popup-content {
        background: #ffffff !important;
        color: #555555 !important;
        padding: 20px 25px !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        white-space: normal !important;
    }

    .light-mode-screenshot .popup-divider {
        width: 100% !important;
        height: 1px !important;
        background-color: #e5e7eb !important;
        margin: 0 !important;
    }

    .light-mode-screenshot .popup-content p {
        margin-bottom: 16px !important;
        color: #1a1a1a !important;
        overflow: visible !important;
        max-height: none !important;
        white-space: normal !important;
    }

    .light-mode-screenshot .popup-content ul,
    .light-mode-screenshot .popup-content ol {
        margin-bottom: 16px !important;
        padding-left: 24px !important;
        color: #1a1a1a !important;
        overflow: visible !important;
        max-height: none !important;
        white-space: normal !important;
    }

    .light-mode-screenshot .popup-content li {
        margin-bottom: 8px !important;
        color: #1a1a1a !important;
        overflow: visible !important;
        max-height: none !important;
        white-space: normal !important;
    }

    .light-mode-screenshot .popup-watermark {
        display: block !important;
        padding: 12px 25px !important;
        text-align: right !important;
        font-size: 12px !important;
        color: #6b7280 !important;
        opacity: 0.8 !important;
        background: #ffffff !important;
    }

    .popup-screenshot-clone .popup-watermark {
        display: block !important;
        padding: 8px 25px !important;
        /* Reduced padding from 12px to 8px */
        text-align: right !important;
        font-size: 11px !important;
        /* Reduced font size from 12px to 11px */
        color: #6b7280 !important;
        opacity: 0.7 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1 !important;
        /* Ensure compact line height */
    }

    .light-mode-screenshot .popup-watermark {
        display: block !important;
        padding: 8px 25px !important;
        /* Reduced padding from 12px to 8px */
        text-align: right !important;
        font-size: 11px !important;
        /* Reduced font size from 12px to 11px */
        color: #6b7280 !important;
        opacity: 0.7 !important;
        background: #ffffff !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1 !important;
        /* Ensure compact line height */
    }

    /* Custom notification */
    #custom-notification {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background-color: var(--accent-color);
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        z-index: 100001;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
        font-size: 14px;
        font-weight: 500;
        pointer-events: none;
        text-align: center;
        max-width: 90%;
    }

    #custom-notification.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .popup-truth-location {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        margin: 12px 0;
        background: var(--container-fade);
        border-radius: 8px;
        border-left: 3px solid var(--accent-color);
        position: relative;
        overflow: hidden;
    }

    .popup-truth-location i {
        font-size: 16px;
        color: var(--accent-color);
    }

    .location-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .location-label {
        font-size: 12px;
        color: var(--secondary-text);
    }

    .location-value {
        font-size: 14px;
        font-weight: 500;
        color: var(--primary-text);
    }

    /* Pro blur effect */
    .pro-blur {
        cursor: pointer;
    }

    .pro-blur .location-value {
        filter: blur(5px);
    }

    .pro-overlay-mini {
        position: absolute;
        top: 0;
        right: 0;
        background: var(--accent-color);
        color: white;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 0 0 0 6px;
    }

    /* Add to screenshot styles */
    .popup-screenshot-clone .popup-truth-location,
    .truth-post-screenshot-clone .popup-truth-location {
        display: none !important;
        /* Hide in screenshots */
    }

    /* Enhanced hover effect for upgradable elements */
    .pro-blur:hover {
        background: var(--container-fade-hover);
        transform: translateY(-1px);
        transition: all 0.2s ease;
    }

    .ad-container .adsbygoogle {
        display: block !important;
        width: 100%;
    }

    .truth-social-container {
        flex: 1;
        width: 100%;
        padding: 20px;
        background: var(--box-bg);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--box-border);
        gap: 18px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    @media screen and (max-width: 900px) {
        #secondary-ads {
            display: none;
        }

        .legislation-section {
            gap: 0;
        }

        .legislation-header-label {
            display: none;
        }

        .upgrade-content {
            flex-direction: column;
        }

        .filter-badge {
            font-size: 12px;
            padding: 5px 10px;
        }

        .container {
            padding: 10px;
        }

        .upgrade-action {
            flex: 1;
            width: 100%;
        }

        .upgrade-container {
            padding: 20px;
        }

        .upgrade-button {
            padding: 4px 8px;
            font-size: 12px;
        }

        .upgrade-button i {
            font-size: 12px;
            margin-right: 3px;
        }

        body {
            padding-bottom: calc(100px + env(safe-area-inset-bottom));
            /* Increase padding to account for safe area */
        }

        .truth-social-container {
            max-height: 600px;
            min-height: 600px;
        }

        .truth-post-media-text {
            font-size: 14px;
        }

        .truth-post-avatar {
            width: 40px;
            height: 40px;
        }

        .truth-post-name {
            font-size: 14px;
        }

        .truth-post-username {
            font-size: 13px;
        }

        .truth-post-date {
            font-size: 12px;
        }

        .schedule {
            max-height: 600px;
            min-height: 600px;
        }

        .map-box {
            max-width: none;
        }

        .legislation-container {
            margin-top: 10px;
            max-height: 600px;
            min-height: 600px;
        }

        .toggle-view-button {
            display: none !important;
        }

        .map-legislation-wrapper {
            flex-direction: column;
            height: 100%;
        }

        .schedule-truth-wrapper {
            flex-direction: column;
            height: 100%;
        }

        .truth-social-section {
            width: 100%;
        }


        .logo {
            height: 30px;
        }

        .legislation-section {
            width: 100%;
        }

        .top-bar-link {
            display: none !important;
        }

        .map-container {
            height: 100%;
            aspect-ratio: 1;
        }

        .faq-button {
            font-size: 1.3em;
        }

        .directlink-button {
            font-size: 1.3em !important;
        }

        .night-mode-toggle {
            font-size: 1.3em;
        }

        .notification-button {
            font-size: 1.3em;
        }

        .read-more-btn {
            font-size: 14px;
        }

        #title {
            font-size: 1em;
        }

        .control-group {
            font-size: 2rem;
        }

        .map-text-box {
            height: auto;
        }

        #title {
            line-height: normal;
        }



        #subtitle {
            overflow: visible;
            white-space: normal;
            text-overflow: clip;
        }

        .mobile-nav {
            display: flex;
        }

        .truth-social-header-label {
            display: none;
        }

        .map-legislation-wrapper,
        .schedule-truth-wrapper {
            display: flex;
            flex-direction: column;
        }

        .map-column,
        .legislation-section,
        .truth-social-section,
        .schedule-section {
            max-width: 100%;
        }

        /* Hide sections based on active state */
        body[data-active-section="map"] .legislation-section,
        body[data-active-section="map"] .truth-social-section {
            display: none !important;
        }

        body[data-active-section="legislation"] .map-column,
        body[data-active-section="legislation"] .schedule-section,
        body[data-active-section="legislation"] .truth-social-section {
            display: none !important;
        }

        body[data-active-section="truth"] .map-column,
        body[data-active-section="truth"] .schedule-section,
        body[data-active-section="truth"] .legislation-section {
            display: none !important;
        }

        /* Hide AdSense ads for Pro users */
        /* body.is-pro .ad-container { ... } - removed */
    }

    /* Tariff Button Styles */
    #tariff-button-container {
        display: flex;
        justify-content: center;
        margin: 15px auto;
        max-width: 1200px;
        padding: 0 16px;
    }

    .tariff-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 20px;
        background: var(--accent-color);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .tariff-button:hover {
        background: var(--button);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .tariff-button i {
        font-size: 18px;
    }

    /* Tariff Modal Styles */
    .tariff-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.65);
        z-index: 10000;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .tariff-overlay.active {
        display: block;
        opacity: 1;
        animation: fadeInOverlay 0.3s ease forwards;
    }

    .tariff-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        width: 90%;
        max-width: 900px;
        max-height: 85vh;
        background-color: var(--box-bg);
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
        z-index: 10001;
        opacity: 0;
        display: none;
        flex-direction: column;
        overflow: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
        border: 1px solid var(--box-border);
    }

    .tariff-container.active {
        display: flex;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        animation: popupShow 0.3s ease forwards;
    }

    .tariff-title {
        padding: 20px 25px;
        font-size: 24px;
        font-weight: 700;
        color: var(--primary-text);
        border-bottom: 1px solid var(--box-border);
        text-align: center;
        background: var(--container-fade);
    }

    .tariff-content {
        padding: 20px 25px;
        overflow-y: auto;
        max-height: calc(85vh - 140px);
        color: var(--primary-text);
    }

    .tariff-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
    }

    .tariff-section {
        flex: 1;
        min-width: 250px;
    }

    .tariff-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid var(--box-border-light);
    }

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

    .tariff-overall {
        background-color: var(--container-fade);
        padding: 10px;
        border-radius: 6px;
        margin-bottom: 10px;
        font-weight: 700;
        border: 1px solid var(--box-border);
    }

    .tariff-country {
        font-weight: 500;
    }

    .tariff-rate {
        font-weight: 600;
        color: var(--accent-color);
    }

    .tariff-close-button {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: transparent;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        color: var(--secondary-text);
        z-index: 2;
        transition: color 0.2s ease;
    }

    .tariff-close-button:hover {
        color: var(--accent-color);
    }

    .tariff-close-button i {
        font-size: 24px;
    }

    .tariff-footer {
        padding: 15px 25px;
        border-top: 1px solid var(--box-border);
        display: flex;
        justify-content: center;
        color: var(--secondary-text);
        font-size: 14px;
        background: var(--container-fade);
    }

    /* Mobile responsiveness for tariff modal */
    @media screen and (max-width: 768px) {
        .tariff-container {
            width: 95%;
            max-width: none;
        }
        
        .tariff-group {
            flex-direction: column;
        }
        
        .tariff-section {
            min-width: 100%;
        }
        
        .tariff-title {
            font-size: 20px;
            padding: 15px;
        }
        
        .tariff-content {
            padding: 15px;
        }
        
        .tariff-footer {
            padding: 10px;
        }
    }