/* ===================================
   BOERSE EXPRESS - Modern Design System
   =================================== */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');

/* ===================================
   1. WIDGET TITLES
   =================================== */

/* Base widget title styling - thin font with orange accent */
.grid-element h2,
.widget-title,
.grid-element h2.padded {
    font-family: 'Inter', 'SourceSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 200 !important; /* Extra light */
    font-size: 19px !important;
    letter-spacing: 0.8px !important;
    text-transform: none !important;
    color: #4d627f !important;
}

/* Orange accent bar for all grid h2 elements */
.grid-element h2.padded,
.grid-element .inner h2.padded {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin-left: 0;
}

/* Specific alignment fix for widgets with gray background */
.grid-element .inner.gray h2.padded {
    margin-left: 15px !important;
}

/* Orange bar before titles */
.grid-element h2.padded::before {
    content: '' !important;
    width: 4px !important;
    height: 22px !important;
    background: #ee7601 !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* Fix for MostReadNews widget */
.most-read-news h2 {
    font-family: 'Inter', 'SourceSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 200 !important;
    font-size: 19px !important;
    letter-spacing: 0.8px !important;
    text-transform: none !important;
    color: #4d627f !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.most-read-news h2::before {
    content: '' !important;
    width: 4px !important;
    height: 22px !important;
    background: #ee7601 !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .grid-element h2,
    .widget-title,
    .grid-element h2.padded {
        font-size: 17px !important;
    }

    .grid-element h2.padded::before {
        height: 20px !important;
    }
}

/* ===================================
   2. BUTTONS
   =================================== */

/* Base button styling */
.btn,
.grid-btn,
.more-btn,
button[type="button"] {
    font-family: 'Inter', 'SourceSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.3px;
    text-transform: none;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

/* Primary blue button */
.btn.blue,
.grid-btn.btn.blue,
.more-btn.btn.blue,
.grid-element .btn.blue,
.grid-element .more-btn.blue {
    background: #4d627f !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(77, 98, 127, 0.15) !important;
}

.btn.blue:hover,
.grid-btn.btn.blue:hover,
.more-btn.btn.blue:hover {
    background: #3a4d63 !important;
    box-shadow: 0 4px 12px rgba(77, 98, 127, 0.25) !important;
    transform: translateY(-1px);
}

/* Override old grid button styles */
.grid-element .grid-btn,
.grid-element .more-btn {
    background: #4d627f !important;
    border: none !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.8px !important;
    font-weight: 500 !important;
}

/* Orange accent button */
.btn.orange,
button.orange {
    background: #ee7601;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(238, 118, 1, 0.15);
}

.btn.orange:hover,
button.orange:hover {
    background: #d86a01;
    box-shadow: 0 4px 12px rgba(238, 118, 1, 0.25);
    transform: translateY(-1px);
}

/* Tab-style buttons (for Top & Flop widget) */
.btn-group {
    display: inline-flex;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 4px;
    gap: 2px;
}

.btn-group .btn {
    background: transparent;
    color: #666666;
    box-shadow: none;
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 6px;
}

.btn-group .btn:hover {
    background: rgba(77, 98, 127, 0.08);
    color: #4d627f;
    transform: none;
}

.btn-group .btn.active {
    background: #4d627f;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(77, 98, 127, 0.2);
}

/* Loading state */
.btn.loading {
    color: transparent;
    pointer-events: none;
    position: relative;
    min-height: 44px;
}

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: button-spin 0.8s linear infinite;
}

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

/* Sticky bottom buttons */
.more-btn.grid-btn.btn.blue.stick-to-bottom,
.grid-element .more-btn.stick-to-bottom,
.grid-element .more-btn,
.more-btn.grid-btn.btn.blue {
    all: unset !important;
    display: block !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #4d627f !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.more-btn.grid-btn.btn.blue.stick-to-bottom:hover,
.grid-element .more-btn.stick-to-bottom:hover {
    background: #3a4d63 !important;
}

/* Style the anchor inside */
.more-btn.grid-btn.btn.blue.stick-to-bottom a,
.grid-element .more-btn.stick-to-bottom a,
.grid-element .more-btn a,
.more-btn a {
    all: unset !important;
    display: block !important;
    padding: 16px 24px !important;
    color: #ffffff !important;
    font-family: 'Inter', 'SourceSans', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* Responsive button adjustments */
@media (max-width: 768px) {
    .btn,
    .grid-btn,
    .more-btn {
        font-size: 13px;
        padding: 10px 20px;
    }

    .btn-group .btn {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ===================================
   3. ANALYSIS SECTION
   =================================== */

/* Hide "Alles zur Aktie" button */
.analysis-buttons a[href*="alles-zur-aktie"],
.btn-row a[href*="alles-zur-aktie"],
td:first-child a,
.grid-element td:nth-child(1) a {
    display: none !important;
}

/* Style Analysen as simple link */
.analysis-buttons a[href*="analysen"],
.btn-row a[href*="analysen"],
a[href*="analysen"].btn,
td:last-child a[href*="analysen"],
.grid-element td:nth-child(2) a {
    all: unset !important;
    display: inline-block !important;
    color: #ee7601 !important;
    text-decoration: none !important;
    font-family: 'Inter', 'SourceSans', -apple-system, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    float: right !important;
    margin-top: 10px !important;
    transition: color 0.2s ease !important;
}

.analysis-buttons a[href*="analysen"]:hover,
.btn-row a[href*="analysen"]:hover,
td a[href*="analysen"]:hover {
    color: #d86a01 !important;
    text-decoration: underline !important;
}

/* Arrow after Analysen */
.analysis-buttons a[href*="analysen"]::after,
.btn-row a[href*="analysen"]::after,
td a[href*="analysen"]::after {
    content: ' →' !important;
    display: inline !important;
}

/* Remove table styling */
table:has(a[href*="analysen"]) {
    border: none !important;
    background: none !important;
}

table:has(a[href*="analysen"]) td {
    border: none !important;
    background: none !important;
}

/* ===================================
   4. NEWSFEED WIDGET
   =================================== */

/* Container styling */
.grid-element.newsfeed,
.newsfeed-widget {
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Tab navigation */
.newsfeed-tabs,
.feed-tabs {
    display: flex !important;
    background: #f8f9fa !important;
    padding: 4px !important;
    gap: 2px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Tab buttons */
.newsfeed-tabs button,
.feed-tabs button,
.newsfeed-tabs a,
.feed-tabs a {
    all: unset !important;
    flex: 1 !important;
    padding: 10px 16px !important;
    text-align: center !important;
    font-family: 'Inter', 'SourceSans', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    background: transparent !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Active tab */
.newsfeed-tabs button.active,
.feed-tabs button.active {
    background: #4d627f !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(77, 98, 127, 0.15) !important;
}

/* Tab hover */
.newsfeed-tabs button:hover:not(.active),
.feed-tabs button:hover:not(.active) {
    background: rgba(77, 98, 127, 0.08) !important;
    color: #4d627f !important;
}

/* News items container */
.newsfeed-content,
.feed-content {
    padding: 20px !important;
    background: #ffffff !important;
}

/* Individual news item */
.newsfeed-item,
.feed-item {
    display: flex !important;
    gap: 16px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    transition: all 0.2s ease !important;
}

.newsfeed-item:last-child {
    border-bottom: none !important;
}

.newsfeed-item:hover {
    background: #fafafa !important;
    margin: 0 -20px !important;
    padding: 16px 20px !important;
}

/* Article image */
.newsfeed-item img,
.feed-item img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}

/* Date and time */
.newsfeed-item-date,
.feed-item-date {
    font-size: 12px !important;
    color: #9ca3af !important;
    margin-bottom: 4px !important;
    font-family: 'Inter', sans-serif !important;
}

/* Article title */
.newsfeed-item-title,
.newsfeed-item h3 {
    font-family: 'Inter', 'SourceSans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Article description */
.newsfeed-item-description,
.newsfeed-item p {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* All articles button */
.newsfeed-more,
.feed-more,
.alle-beitrage {
    display: block !important;
    width: 100% !important;
    padding: 16px !important;
    background: #4d627f !important;
    color: #ffffff !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    text-decoration: none !important;
}

.newsfeed-more:hover,
.alle-beitrage:hover {
    background: #3a4d63 !important;
}

/* Responsive for newsfeed */
@media (max-width: 768px) {
    .news-feed .single.size-6 {
        width: 100% !important;
        float: none !important;
        margin: 0 0 25px 0 !important;
    }

    .news-feed .article-image img {
        height: 130px !important;
    }

    .news-feed .title h5 {
        font-size: 15px !important;
    }

    .news-feed .intro p {
        font-size: 13px !important;
    }
}

/* ===================================
   5. NEWSFEED WIDGET - CSS Grid Layout (NUCLEAR)
   =================================== */

/* Reset everything first */
.news-feed,
.news-feed.grid-element,
.news-feed .current-tab-content,
.news-feed .current-tab-content.blue {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Main container */
.news-feed.grid-element {
    margin-bottom: 30px !important;
}

/* Tabs */
.news-feed .tabs {
    display: flex !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #e5e7eb !important;
    background: transparent !important;
}

.news-feed .tab {
    flex: 1 !important;
}

.news-feed .tab a {
    display: block !important;
    padding: 12px 20px !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    background: transparent !important;
}

.news-feed .tab.selected a {
    color: #4d627f !important;
    border-bottom-color: #4d627f !important;
    font-weight: 600 !important;
    background: transparent !important;
}

.news-feed .tab h4 {
    margin: 0 !important;
    font-size: 15px !important;
    color: inherit !important;
}

/* Article Container - Force Grid */
.news-feed .article-container,
.news-feed .current-tab-content .article-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Articles - Reset and Style */
.news-feed .single,
.news-feed .single.size-6 {
    display: block !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    grid-column: auto !important;
}

/* Images */
.news-feed .article-image {
    margin: 0 0 12px 0 !important;
}

.news-feed .article-image img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
}

/* Article Preview Reset */
.news-feed .article-preview,
.news-feed .article-preview .table,
.news-feed .article-preview .vert-center {
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Typography - Force Colors */
.news-feed .meta p {
    font-size: 12px !important;
    color: #9ca3af !important;
    margin: 0 0 6px 0 !important;
    background: transparent !important;
}

.news-feed .title h5 {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #1f2937 !important;
    margin: 0 0 8px 0 !important;
    background: transparent !important;
}

.news-feed .intro p {
    font-size: 14px !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Clean up */
.news-feed .clear,
.news-feed .tabs .clear {
    display: none !important;
}

/* More link */
.news-feed .more-link-container {
    text-align: right !important;
    margin-top: 20px !important;
    grid-column: 1 / -1 !important;
}

.news-feed .more-link {
    color: #4d627f !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.news-feed .more-link:hover {
    text-decoration: underline !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .news-feed .article-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}


/* ===================================
   6. RELATED ARTICLES WIDGET
   =================================== */

/* CSS Variables */
:root {
    --related-bg: #ffffff;
    --related-border: #e5e7eb;
    --related-text: #374151;
    --related-text-secondary: #6b7280;
    --related-hover: #f9fafb;
    --related-accent: #ee7601;
    --related-title-bg: #f9fafb;
}

/* Override existing styles with higher specificity */
.related-articles.device-large .black.inner,
.related-articles.device-medium .black.inner,
.related-articles.device-small .black.inner {
    background: var(--related-bg) !important;
    border: 1px solid var(--related-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
}

/* Modern title styling */
.modern-related-title {
    color: var(--related-text) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    margin: 0 !important;
    padding: 18px 24px !important;
    border-bottom: 1px solid var(--related-border) !important;
    background-color: var(--related-title-bg) !important;
}

/* Article list container */
.modern-article-list {
    padding: 0 !important;
}

/* Individual article items */
.modern-related-item {
    border-bottom: 1px solid var(--related-border);
    transition: background-color 0.15s ease;
}

.modern-related-item:last-child {
    border-bottom: none;
}

.modern-related-item:hover {
    background-color: var(--related-hover);
}

/* Article links */
.modern-related-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    text-decoration: none !important;
    color: inherit !important;
    gap: 12px !important;
}

/* Article headlines */
.modern-related-headline {
    color: var(--related-text) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    flex: 1 !important;
    letter-spacing: -0.01em !important;
}

/* Read more arrow */
.modern-read-more {
    color: var(--related-text-secondary) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
    flex-shrink: 0 !important;
}

.modern-related-item:hover .modern-read-more {
    color: var(--related-accent) !important;
    transform: translateX(3px) !important;
}

/* Modern pagination */
.modern-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 20px !important;
    border-top: 1px solid var(--related-border) !important;
}

.modern-pagination-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    color: var(--related-text) !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

.modern-pagination-btn:hover {
    background: var(--related-hover) !important;
    color: var(--related-accent) !important;
}

.modern-pagination-numbers {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.modern-pagination-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    color: var(--related-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.modern-pagination-number:hover {
    background: var(--related-hover) !important;
    color: var(--related-accent) !important;
}

.modern-pagination-number.active {
    background: var(--related-accent) !important;
    color: white !important;
}

.modern-pagination-ellipsis {
    color: var(--related-text-secondary) !important;
    font-size: 14px !important;
    padding: 0 4px !important;
}

/* Keep old pagination functional but hidden */
.related-articles .pagination.bot:not(.modern-pagination) {
    display: none !important;
}

/* Mobile specific overrides */
.related-articles.device-medium,
.related-articles.device-small {
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 0 !important;
}

.related-articles.device-medium .black.inner,
.related-articles.device-small .black.inner {
    margin: 0 !important;
}

/* Responsive adjustments for related articles */
@media (max-width: 768px) {
    .modern-related-title {
        font-size: 16px !important;
        padding: 16px 20px 12px !important;
    }

    .modern-related-link {
        padding: 14px 20px !important;
    }

    .modern-related-headline {
        font-size: 14px !important;
    }

    /* Fix mobile container widths */
    .related-articles {
        float: none !important;
        clear: both !important;
    }

    .modern-pagination {
        padding: 16px !important;
    }

    .modern-pagination-btn {
        width: 28px !important;
        height: 28px !important;
    }

    .modern-pagination-number {
        min-width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }
}

/* ===================================
   7. CALENDAR WIDGET (Börsentermine)
   =================================== */

/* Main calendar container */
.grid-element.calendar {
    background: transparent !important;
    padding: 0 15px !important;
    margin-bottom: 25px !important;
}

/* Inner container with gray background */
.grid-element.calendar .inner.gray {
    background: #f8f9fa !important;
    border-radius: 8px !important;
    overflow: visible !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    padding: 0 !important;
    position: relative !important;
}

/* Calendar header - title and date in row */
.calendar .calendar-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f8f9fa !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Calendar title */
.calendar .calendar-header h2 {
    font-family: 'Inter', 'SourceSans', -apple-system, sans-serif !important;
    font-weight: 200 !important;
    font-size: 19px !important;
    letter-spacing: 0.8px !important;
    color: #4d627f !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    white-space: nowrap !important;
}

/* Orange bar before title */
.calendar .calendar-header h2::before {
    content: '' !important;
    width: 4px !important;
    height: 22px !important;
    background: #ee7601 !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* Event container */
.calendar .event-container {
    padding: 20px !important;
    background: #ffffff !important;
    border-radius: 0 0 8px 8px !important;
}

/* Event list layout */
.calendar .event-list {
    width: 100% !important;
    float: none !important;
}

/* Single event items */
.calendar .single-event {
    padding: 15px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.calendar .single-event:last-child {
    border-bottom: none !important;
}

/* Event company names */
.calendar .single-event h5 {
    margin: 0 0 4px 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

.calendar .single-event h5 a {
    color: #374151 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.calendar .single-event h5 a:hover {
    color: #ee7601 !important;
}

/* Event descriptions */
.calendar .single-event p {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Hide hr elements */
.calendar .single-event hr {
    display: none !important;
}

/* Calendar date badge in header */
.calendar .calendar-header .current-date,
.calendar .calendar-header .current-date.orange {
    background: #ee7601 !important;
    color: #ffffff !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    text-align: center !important;
    min-width: 55px !important;
    max-width: 100px;
    height: auto;
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    flex-shrink: 0 !important;
}

.calendar .calendar-header .current-date .day {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: block !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.calendar .calendar-header .current-date .month-year {
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
    display: block !important;
    color: #ffffff !important;
}

/* Clear floats */
.calendar .clear {
    clear: both !important;
}

/* Calendar button - Positioned at bottom */
.calendar .more-btn.grid-btn,
.calendar .more-btn {
    all: unset !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #4d627f !important;
    border: none !important;
    border-radius: 0 0 8px 8px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.calendar .more-btn:hover {
    background: #3a4d63 !important;
}

/* Button link styling */
.calendar .more-btn a {
    all: unset !important;
    display: block !important;
    padding: 16px 24px !important;
    color: #ffffff !important;
    font-family: 'Inter', 'SourceSans', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* Pagination dots */
.calendar .pagination.bot {
    display: flex !important;
    justify-content: center !important;
    margin: 15px 0 0 0 !important;
    padding: 0 !important;
}

.calendar .pagination.bot ul {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
}

.calendar .pagination.bot li {
    margin: 0 !important;
    padding: 0 !important;
}

.calendar .pagination.bot li a,
.calendar .pagination.bot li {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #e5e7eb !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.calendar .pagination.bot li.active a,
.calendar .pagination.bot li.active {
    background: #ee7601 !important;
}

/* Hide next/prev pagination for calendar */
.calendar .next-prev-pagination {
    display: none !important;
}

/* Fix layout issues */
.calendar .size-10,
.calendar .size-2,
.calendar .size-6 {
    width: auto !important;
    float: none !important;
}

.calendar .event-row {
    display: block !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    /* Calendar container */
    .grid-element.calendar {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .grid-element.calendar .inner.gray {
        border-radius: 12px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }

    /* Calendar header on mobile */
    .calendar .calendar-header {
        padding: 15px !important;
    }

    /* Title adjustments */
    .calendar .calendar-header h2 {
        font-size: 17px !important;
        gap: 8px !important;
    }

    .calendar .calendar-header h2::before {
        height: 18px !important;
        width: 3px !important;
    }

    /* Date badge on mobile */
    .calendar .calendar-header .current-date {
        padding: 6px 10px !important;
        min-width: 45px !important;
    }

    .calendar .calendar-header .current-date .day {
        font-size: 18px !important;
    }

    .calendar .calendar-header .current-date .month-year {
        font-size: 10px !important;
    }

    /* Event container */
    .calendar .event-container {
        padding: 15px !important;
    }

    /* Event list full width on mobile */
    .calendar .event-list {
        width: 100% !important;
    }

    /* Event items */
    .calendar .single-event {
        padding: 12px 0 !important;
    }

    .calendar .single-event h5 {
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }

    .calendar .single-event p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }


    .calendar .more-btn a {
        padding: 14px 20px !important;
        font-size: 13px !important;
    }

    /* Pagination dots */
    .calendar .pagination.bot {
        margin: 10px 0 0 0 !important;
    }

    .calendar .pagination.bot li a,
    .calendar .pagination.bot li {
        width: 7px !important;
        height: 7px !important;
    }
}

/* ===================================
   8. TOP & FLOP WIDGET
   =================================== */

/* Override title styling for consistency */
.top-flop-modern h2,
.top-flop-modern .widget-title {
    font-family: 'Inter', 'SourceSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 200 !important;
    font-size: 19px !important;
    letter-spacing: 0.8px !important;
    text-transform: none !important;
    color: #4d627f !important;
}

/* ===================================
   9. FINAL OVERRIDES
   =================================== */

/* Remove any old button styles */
.grid-btn.btn {
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}