/* ZGSZ Weather Terminal - Widget Styles (HKO-compatible) */

.zgsz-widget-container {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.zgsz-widget-title {
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(135, 206, 235, 0.5);
    padding-bottom: 10px;
}

.zgsz-widget-title h3 {
    margin: 0;
    font-size: 18px;
    color: #87ceeb;
    font-weight: 600;
}

/* Date Tabs Navigation */
.zgsz-records-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(135, 206, 235, 0.3);
    flex-wrap: wrap;
}

.zgsz-records-tab-btn {
    padding: 6px 12px;
    background: rgba(135, 206, 235, 0.1);
    border: 1px solid rgba(135, 206, 235, 0.3);
    border-radius: 3px 3px 0 0;
    color: #87ceeb;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: none;
    line-height: 1.2;
}

.zgsz-records-tab-btn:hover {
    background: rgba(135, 206, 235, 0.2);
    color: #b0e0e6;
}

.zgsz-records-tab-btn.zgsz-records-tab-active {
    background: rgba(135, 206, 235, 0.3);
    border-color: #87ceeb;
    color: #b0e0e6;
    border-bottom: 2px solid #87ceeb;
}

/* Two-Column Layout for Stations */
.zgsz-stations-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.zgsz-station-box {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid #87ceeb;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zgsz-station-header {
    border-bottom: 1px solid rgba(135, 206, 235, 0.3);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.zgsz-station-header h4 {
    margin: 0;
    font-size: 14px;
    color: #87ceeb;
    font-weight: 600;
}

/* Records List - EXACT HKO STYLE */
.zgsz-records-list {
    max-height: 400px;
    overflow-y: auto;
    flex: 1;
}

.zgsz-record-item {
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    margin-bottom: 2px;
}

.zgsz-record-item:last-child {
    margin-bottom: 0;
}

.zgsz-record-time {
    color: #87ceeb;
    font-weight: 600;
    margin-right: 2px;
    font-size: 11px;
    flex-shrink: 0;
}

.zgsz-record-data {
    color: #e0e0e0;
    word-break: break-word;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
}

.zgsz-col {
    display: inline-block;
    min-width: 35px;
    margin-right: 2px;
    font-size: 11px;
    padding: 1px 2px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.zgsz-record-data strong {
    color: #fff;
    font-weight: 600;
}

/* Statistics Display */
.zgsz-stats-display {
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.zgsz-stats-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.zgsz-stat-item {
    font-size: 12px;
    color: #e0e0e0;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    line-height: 1.5;
}

/* Loading & Error */
.zgsz-loading {
    text-align: center;
    padding: 20px;
    color: #87ceeb;
    font-size: 14px;
    display: none !important;
}

.zgsz-error {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    color: #ff6b6b;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.zgsz-error p {
    margin: 0;
    font-size: 13px;
}

.zgsz-no-data {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
}

/* Footer Info */
.zgsz-footer-info {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: #b0e0e6;
    flex-wrap: wrap;
    gap: 10px;
}

.zgsz-tier-info {
    display: inline-block;
}

.zgsz-last-update {
    margin-left: 4px;
    color: #b0e0e6;
}

/* Scrollbar Styling */
.zgsz-records-list::-webkit-scrollbar {
    width: 6px;
}

.zgsz-records-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.zgsz-records-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.zgsz-records-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .zgsz-stations-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .zgsz-widget-container {
        padding: 15px;
    }

    .zgsz-record-item {
        font-size: 11px;
        margin-bottom: 1px;
    }

    .zgsz-col {
        min-width: 35px;
        font-size: 10px;
        padding: 1px 2px;
    }

    .zgsz-records-list {
        max-height: 300px;
    }

    .zgsz-footer-info {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .zgsz-widget-container {
        padding: 10px;
        font-size: 11px;
    }

    .zgsz-record-item {
        font-size: 9px;
        padding: 5px 6px;
    }

    .zgsz-col {
        font-size: 9px;
        padding: 1px 2px;
    }

    .zgsz-records-list {
        max-height: 250px;
    }

    .zgsz-footer-info {
        font-size: 10px;
        padding-top: 10px;
    }
} 

/* Historical Widget Column Headers */
.zgsz-records-header {
    display: flex;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #87ceeb;
    border-bottom: 1px solid rgba(135, 206, 235, 0.5);
}

.zgsz-col-header {
    display: inline-block;
    min-width: 30px;
    margin-right: 2px;
    padding: 2px 4px;
    text-align: center;
}

/* Current Display Section */
.zgsz-current-display {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.zgsz-current-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
}

.zgsz-current-header .zgsz-label {
    font-weight: bold;
    color: #87ceeb;
}

/* URL Items Display */
.zgsz-current-values {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    margin-top: 10px;
}

/* URL Item Box */
.zgsz-url-item {
    flex: 1;
    min-width: 280px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(135, 206, 235, 0.3);
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    transition: all 0.3s ease;
}

.zgsz-url-item.zgsz-url-item-updated {
    animation: zgsz-url-item-pulse 2.5s ease-out;
}

/* Header: [1] Time on left, Updated on right (same level) */
/* Header: [1] Time on left, Updated on right (same level) */
.zgsz-url-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(135, 206, 235, 0.2);
}

.zgsz-url-header-left {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
}

.zgsz-url-name {
    color: #87ceeb;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

.zgsz-url-time {
    color: #b0e0e6;
    font-size: 11px;
    font-weight: normal;
    flex-shrink: 0;
}

.zgsz-url-updated {
    color: #b0e0e6;
    font-size: 10px;
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
    min-width: 50px;
}


/* Data row */
.zgsz-url-data-row {
    display: flex;
    align-items: flex-start;
}

.zgsz-url-data {
    color: #e0e0e0;
    font-size: 11px;
    line-height: 1.5;
    word-break: break-word;
    flex: 1;
}

.zgsz-url-item.zgsz-url-item-updated .zgsz-url-data {
    animation: zgsz-url-data-glow 2.5s ease-out;
}

.zgsz-url-data strong {
    color: #fff;
    font-weight: 600;
}

/* Loading & Empty states */
.zgsz-url-loading {
    color: #b0e0e6;
    font-size: 12px;
    padding: 10px;
    text-align: center;
}

.zgsz-url-empty {
    color: #999;
    font-size: 12px;
    padding: 10px;
    text-align: center;
}

/* ===== URL ITEM UPDATE ANIMATION ===== */

/* Pulse animation for updated URL items */
@keyframes zgsz-url-item-pulse {
    0% {
        background: rgba(76, 175, 80, 0.3);
        box-shadow: 0 0 12px rgba(76, 175, 80, 0.6), inset 0 0 8px rgba(76, 175, 80, 0.2);
        transform: scale( 1 );
        border-color: rgba(76, 175, 80, 0.6);
    }
    25% {
        background: rgba(76, 175, 80, 0.25);
        box-shadow: 0 0 16px rgba(76, 175, 80, 0.5), inset 0 0 10px rgba(76, 175, 80, 0.15);
        transform: scale( 1.01 );
    }
    50% {
        background: rgba(76, 175, 80, 0.2);
        box-shadow: 0 0 15px rgba(76, 175, 80, 0.4), inset 0 0 8px rgba(76, 175, 80, 0.1);
        transform: scale( 1.015 );
        border-color: rgba(76, 175, 80, 0.5);
    }
    75% {
        background: rgba(76, 175, 80, 0.1);
        box-shadow: 0 0 10px rgba(76, 175, 80, 0.3), inset 0 0 5px rgba(76, 175, 80, 0.05);
        transform: scale( 1.01 );
    }
    100% {
        background: rgba(255, 255, 255, 0.05);
        box-shadow: none;
        transform: scale( 1 );
        border-color: rgba(135, 206, 235, 0.3);
    }
}

/* Glow effect for updated URL data */
@keyframes zgsz-url-data-glow {
    0% {
        color: #fff;
        text-shadow: 0 0 8px rgba(76, 175, 80, 0.8);
    }
    50% {
        color: #e0e0e0;
        text-shadow: 0 0 4px rgba(76, 175, 80, 0.4);
    }
    100% {
        color: #e0e0e0;
        text-shadow: none;
    }
}

/* Update indicator for URL header */
@keyframes zgsz-url-header-highlight {
    0% {
        background: rgba(76, 175, 80, 0.2);
        border-bottom-color: rgba(76, 175, 80, 0.6);
    }
    50% {
        background: rgba(76, 175, 80, 0.1);
        border-bottom-color: rgba(76, 175, 80, 0.4);
    }
    100% {
        background: transparent;
        border-bottom-color: rgba(135, 206, 235, 0.2);
    }
}

.zgsz-url-item.zgsz-url-item-updated .zgsz-url-header {
    animation: zgsz-url-header-highlight 2.5s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* URL Items Mobile */
    .zgsz-current-values {
        flex-direction: column;
        gap: 10px;
    }

    .zgsz-url-item {
        min-width: 100%;
        padding: 8px;
        gap: 6px;
    }

    .zgsz-url-header {
        gap: 6px;
        padding-bottom: 6px;
        flex-wrap: nowrap;
    }

    .zgsz-url-header-left {
        width: auto;
        gap: 2px;
        flex-wrap: nowrap;
    }

    .zgsz-url-name {
        font-size: 11px;
    }

    .zgsz-url-time {
        font-size: 10px;
    }

    .zgsz-url-data {
        font-size: 10px;
    }

    .zgsz-url-updated {
        font-size: 9px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .zgsz-current-display {
        padding: 12px;
    }

    .zgsz-current-header {
        font-size: 12px;
    }

    .zgsz-current-header .zgsz-label {
        font-size: 12px;
    }

    .zgsz-current-values {
        flex-direction: column;
        gap: 8px;
        margin-top: 8px;
    }

    .zgsz-url-item {
        min-width: 100%;
        padding: 8px;
        gap: 6px;
        font-size: 11px;
    }

    .zgsz-url-header {
        gap: 4px;
        padding-bottom: 6px;
    }

    .zgsz-url-name {
        font-size: 10px;
    }

    .zgsz-url-time {
        font-size: 9px;
    }

    .zgsz-url-data {
        font-size: 9px;
    }

    .zgsz-url-updated {
        font-size: 8px;
    }
}

/* ===== EXTERNAL LINKS WIDGET STYLES ===== */

.zgsz-external-links-widget {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Three Column Grid Layout */
.zgsz-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.zgsz-links-column {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Column Titles */
.zgsz-links-title {
    border-bottom: 2px solid rgba(135, 206, 235, 0.5);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.zgsz-links-title h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #87ceeb;
}

/* Links List - Vertical (default) */
.zgsz-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Links List - Horizontal (for Radar & Satellites) */
.zgsz-links-list-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}

.zgsz-links-list li {
    margin: 0;
    padding: 0;
}

.zgsz-links-list-horizontal li {
    flex: 0 1 auto;
}

.zgsz-links-list a {
    display: inline-block;
    color: #87ceeb;
    text-decoration: none;
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 3px;
    background: rgba(135, 206, 235, 0.1);
    transition: all 0.3s ease;
    word-break: break-word;
    white-space: nowrap;
}

.zgsz-links-list a:hover {
    background: rgba(135, 206, 235, 0.2);
    color: #b0e0e6;
    text-decoration: underline;
}

/* Membership Prompts */
.zgsz-links-prompt {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 4px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.zgsz-links-prompt .zgsz-prompt-text {
    color: #FFD700;
    font-size: 11px;
    flex: 1;
}

.zgsz-links-prompt .zgsz-signin-link,
.zgsz-links-prompt .zgsz-upgrade-link {
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: inline-block;
}

.zgsz-links-prompt .zgsz-signin-link {
    background: rgba(135, 206, 235, 0.2);
    border: 1px solid #87ceeb;
    color: #87ceeb;
}

.zgsz-links-prompt .zgsz-signin-link:hover {
    background: rgba(135, 206, 235, 0.3);
    color: #b0e0e6;
}

.zgsz-links-prompt .zgsz-upgrade-link {
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid #FFD700;
    color: #FFD700;
}

.zgsz-links-prompt .zgsz-upgrade-link:hover {
    background: rgba(255, 215, 0, 0.3);
    color: #FFA500;
    border-color: #FFA500;
}

/* ===== RESPONSIVE DESIGN FOR EXTERNAL LINKS ===== */

/* Tablet Responsive (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .zgsz-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    .zgsz-links-column {
        padding: 12px;
    }

    .zgsz-links-title h3 {
        font-size: 13px;
    }

    .zgsz-links-list a {
        font-size: 10px;
        padding: 5px 6px;
    }

    .zgsz-links-list-horizontal {
        gap: 4px;
    }

    .zgsz-links-list-horizontal a {
        padding: 4px 6px;
        font-size: 9px;
    }
}

/* Mobile Responsive (max-width: 768px) */
@media (max-width: 768px) {
    .zgsz-external-links-widget {
        padding: 15px;
    }

    .zgsz-links-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    .zgsz-links-column {
        padding: 12px;
        gap: 10px;
    }

    .zgsz-links-title h3 {
        font-size: 12px;
    }

    .zgsz-links-list a {
        font-size: 10px;
        padding: 5px 6px;
    }

    /* Radar & Satellites: Horizontal wrap on mobile */
    .zgsz-links-list-horizontal {
        gap: 4px;
    }

    .zgsz-links-list-horizontal a {
        padding: 4px 6px;
        font-size: 9px;
        white-space: normal;
    }

    .zgsz-links-prompt {
        padding: 10px;
        gap: 6px;
    }

    .zgsz-links-prompt .zgsz-prompt-text {
        font-size: 10px;
    }

    .zgsz-links-prompt .zgsz-signin-link,
    .zgsz-links-prompt .zgsz-upgrade-link {
        padding: 4px 8px;
        font-size: 9px;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .zgsz-external-links-widget {
        padding: 10px;
    }

    .zgsz-links-grid {
        gap: 10px;
    }

    .zgsz-links-column {
        padding: 10px;
        gap: 8px;
    }

    .zgsz-links-title h3 {
        font-size: 11px;
        margin-bottom: 5px;
    }

    .zgsz-links-list {
        gap: 4px;
    }

    .zgsz-links-list a {
        font-size: 9px;
        padding: 4px 5px;
    }

    /* Radar & Satellites: Horizontal wrap on small mobile */
    .zgsz-links-list-horizontal {
        gap: 3px;
    }

    .zgsz-links-list-horizontal a {
        padding: 3px 5px;
        font-size: 8px;
        white-space: normal;
    }

    .zgsz-links-prompt {
        flex-direction: column;
        text-align: center;
        padding: 8px;
    }

    .zgsz-links-prompt .zgsz-signin-link,
    .zgsz-links-prompt .zgsz-upgrade-link {
        width: 100%;
    }
}

/* ===== HISTORICAL WIDGET SPECIFIC STYLES ===== */

/* Red background for C_Tod rows - apply to zgsz-record-data */
.zgsz-record-item-red .zgsz-record-data {
    background: rgba(220, 53, 69, 0.3) !important;
    border: 1px solid rgba(220, 53, 69, 0.5) !important;
    border-radius: 3px;
    padding: 2px 4px;
}

.zgsz-record-item-red .zgsz-col {
    background: rgba(220, 53, 69, 0.2) !important;
    border: 1px solid rgba(220, 53, 69, 0.4) !important;
}

/* Footer styling - match HKO hko-footer-right */
.zgsz-footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: #b0e0e6;
    flex-wrap: wrap;
    gap: 10px;
}

.zgsz-footer-left {
    flex: 1;
    order: 1;
}

.zgsz-footer-right {
    order: 2;
    flex-shrink: 0;
}

.zgsz-more-link {
    color: #87ceeb;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 6px 12px;
    border-radius: 3px;
    background: rgba(135, 206, 235, 0.1);
    display: inline-block;
}

.zgsz-more-link:hover {
    color: #fff;
    background: rgba(135, 206, 235, 0.2);
}

/* Responsive footer */
@media (max-width: 768px) {
    .zgsz-footer-info {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .zgsz-footer-left,
    .zgsz-footer-right {
        order: unset;
        flex: none;
    }
}

/* ===== FORECAST WIDGET STYLES ===== */

/* Ensure the widget inherits base container styling */
.zgsz-widget-container.zgsz-forecast-widget {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.zgsz-forecast-title {
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(135, 206, 235, 0.5);
    padding-bottom: 10px;
}

.zgsz-forecast-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #87ceeb;
}

/* Tab Navigation - CRITICAL: Match HKO styling exactly */
.zgsz-forecast-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(135, 206, 235, 0.3);
    flex-wrap: wrap;
}

/* Tab Buttons - FIXED: Use cyan/blue not green */
.zgsz-forecast-tab-btn {
    padding: 10px 16px;
    background: rgba(135, 206, 235, 0.1);
    border: 1px solid rgba(135, 206, 235, 0.3);
    border-radius: 4px 4px 0 0;
    color: #87ceeb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: none;
}

.zgsz-forecast-tab-btn:hover {
    background: rgba(135, 206, 235, 0.2);
    color: #b0e0e6;
}

.zgsz-forecast-tab-btn.zgsz-forecast-tab-active {
    background: rgba(135, 206, 235, 0.3);
    border-color: #87ceeb;
    color: #b0e0e6;
    border-bottom: 2px solid #87ceeb;
}

/* Tab Content */
.zgsz-forecast-content {
    margin-bottom: 15px;
}

.zgsz-forecast-tab-pane {
    display: none;
    animation: zgsz-forecast-fadeIn 0.3s ease-in;
}

.zgsz-forecast-tab-pane.zgsz-forecast-tab-active {
    display: block;
}

@keyframes zgsz-forecast-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Forecast Table */
.zgsz-forecast-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.zgsz-forecast-table thead {
    background: rgba(0, 0, 0, 0.2);
}

.zgsz-forecast-table th {
    padding: 10px;
    text-align: left;
    color: #87ceeb;
    font-weight: 600;
    border-bottom: 1px solid rgba(135, 206, 235, 0.3);
}

.zgsz-forecast-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(135, 206, 235, 0.2);
    color: #e0e0e0;
}

.zgsz-forecast-table tbody tr:hover {
    background: rgba(135, 206, 235, 0.1);
}

.zgsz-forecast-table td.zgsz-no-data {
    text-align: center;
    color: #999;
    padding: 20px;
}

.zgsz-forecast-tab-content {
    min-height: 200px;
}

/* Loading & Error States */
.zgsz-forecast-widget .zgsz-loading {
    text-align: center;
    padding: 20px;
    color: #87ceeb;
    font-size: 14px;
    display: none !important;
}

.zgsz-forecast-widget .zgsz-error {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    color: #ff6b6b;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.zgsz-forecast-widget .zgsz-error p {
    margin: 0;
    font-size: 13px;
}

/* Footer */
.zgsz-forecast-widget .zgsz-footer-info {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: #b0e0e6;
    flex-wrap: wrap;
    gap: 10px;
}

.zgsz-forecast-widget .zgsz-footer-center {
    flex: 1;
    text-align: center;
}

.zgsz-forecast-widget .zgsz-last-update {
    color: #b0e0e6;
}

/* ===== RESPONSIVE DESIGN FOR FORECAST ===== */

@media (max-width: 768px) {
    .zgsz-widget-container.zgsz-forecast-widget {
        padding: 15px;
    }

    .zgsz-forecast-title h3 {
        font-size: 14px;
    }

    .zgsz-forecast-tabs {
        gap: 6px;
    }

    .zgsz-forecast-tab-btn {
        padding: 8px 12px;
        font-size: 11px;
    }

    .zgsz-forecast-table {
        font-size: 10px;
    }

    .zgsz-forecast-table th,
    .zgsz-forecast-table td {
        padding: 6px 8px;
    }
}

@media (max-width: 480px) {
    .zgsz-widget-container.zgsz-forecast-widget {
        padding: 10px;
    }

    .zgsz-forecast-title h3 {
        font-size: 13px;
    }

    .zgsz-forecast-tabs {
        gap: 4px;
    }

    .zgsz-forecast-tab-btn {
        padding: 6px 10px;
        font-size: 10px;
    }

    .zgsz-forecast-table {
        font-size: 9px;
    }

    .zgsz-forecast-table th,
    .zgsz-forecast-table td {
        padding: 5px 6px;
    }

    .zgsz-forecast-widget .zgsz-footer-info {
        padding-top: 10px;
        font-size: 10px;
    }
}


/* ===== HISTORICAL CHARTS WIDGET STYLES ===== */

.zgsz-historical-charts-widget {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Charts Grid - Responsive */
.zgsz-charts-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    grid-auto-flow: row;
}

.zgsz-chart-wrapper {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.zgsz-chart-wrapper h3 {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #87ceeb;
    font-weight: 600;
}

.zgsz-chart {
    width: 100%;
    height: 350px;
    flex-grow: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .zgsz-chart {
        height: 300px;
    }

    .zgsz-chart-wrapper h3 {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .zgsz-chart {
        height: 250px;
    }

    .zgsz-chart-wrapper h3 {
        font-size: 12px;
    }

    .zgsz-chart-wrapper {
        padding: 10px;
    }
}

/* ===== POLYMARKET SECTION STYLES ===== */

.zgsz-polymarket-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
}

.zgsz-polymarket-section {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 4px;
    border-left: 3px solid #87ceeb;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.zgsz-polymarket-label {
    font-size: 12px;
    font-weight: 600;
    color: #87ceeb;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(135, 206, 235, 0.3);
    flex-shrink: 0;
}

.zgsz-polymarket-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.zgsz-polymarket-list li {
    margin: 0;
    padding: 0;
}

.zgsz-polymarket-list a {
    display: block;
    color: #87ceeb;
    text-decoration: none;
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 3px;
    background: rgba(135, 206, 235, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    border: 1px solid rgba(135, 206, 235, 0.2);
}

.zgsz-polymarket-list a:hover {
    background: rgba(135, 206, 235, 0.2);
    color: #b0e0e6;
    border-color: rgba(135, 206, 235, 0.4);
    text-decoration: none;
}

/* ✅ KEEP 2 COLUMNS ON TABLET (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .zgsz-polymarket-container {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .zgsz-polymarket-section {
        padding: 10px;
    }

    .zgsz-polymarket-label {
        font-size: 11px;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .zgsz-polymarket-list a {
        font-size: 10px;
        padding: 5px 6px;
    }
}

/* ✅ KEEP 2 COLUMNS ON MOBILE (max-width: 768px) */
@media (max-width: 768px) {
    .zgsz-polymarket-container {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .zgsz-polymarket-section {
        padding: 10px;
    }

    .zgsz-polymarket-label {
        font-size: 11px;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .zgsz-polymarket-list a {
        font-size: 10px;
        padding: 5px 6px;
    }
}

/* ✅ KEEP 2 COLUMNS ON SMALL MOBILE (max-width: 480px) */
@media (max-width: 480px) {
    .zgsz-polymarket-container {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .zgsz-polymarket-section {
        padding: 8px;
    }

    .zgsz-polymarket-label {
        font-size: 10px;
        margin-bottom: 6px;
        padding-bottom: 5px;
    }

    .zgsz-polymarket-list a {
        font-size: 9px;
        padding: 4px 5px;
    }
}

/* =========================================
   HISTORICAL TEMPERATURE BOX LAYOUT
   ========================================= */

/*
 * Desktop:
 * ZGSZ Metar | Hourly Temp | History Temp
 */
.zgsz-historical-widget .zgsz-historical-data-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
    align-items: stretch;
}

.zgsz-historical-widget
.zgsz-historical-data-container
.zgsz-station-box {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* METAR columns */
.zgsz-metar-header,
.zgsz-metar-record {
    display: grid;
    grid-template-columns:
        minmax(42px, 0.9fr)
        minmax(50px, 1fr)
        minmax(42px, 0.8fr)
        minmax(58px, 1fr);
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
}

.zgsz-metar-header {
    flex-wrap: nowrap;
}

.zgsz-metar-header .zgsz-col-header,
.zgsz-metar-record .zgsz-col {
    min-width: 0;
    margin-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zgsz-metar-header .zgsz-col-header {
    text-align: left;
}

.zgsz-metar-record {
    margin-bottom: 2px;
}

.zgsz-metar-record .zgsz-col {
    padding: 1px 2px;
}

.zgsz-metar-time {
    color: #87ceeb;
}

.zgsz-metar-fetch {
    font-size: 10px;
}

/*
 * Keep the records area usable when a box contains many records.
 */
.zgsz-historical-data-container .zgsz-records-list {
    min-width: 0;
    overflow-x: auto;
}

/* =========================================
   MOBILE: ONE BOX PER ROW
   ========================================= */

@media (max-width: 768px) {
    /*
     * Override the desktop three-column layout.
     *
     * Order:
     * 1. ZGSZ Metar
     * 2. Hourly Temp
     * 3. History Temp
     */
    .zgsz-historical-widget .zgsz-historical-data-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        width: 100%;
    }

    .zgsz-historical-widget
    .zgsz-historical-data-container
    .zgsz-station-box {
        width: 100%;
        min-width: 0;
        padding: 12px;
    }

    /*
     * Keep each box's records readable on mobile.
     */
    .zgsz-historical-widget
    .zgsz-historical-data-container
    .zgsz-records-list {
        max-height: 300px;
        overflow-x: auto;
        overflow-y: auto;
    }

    .zgsz-metar-header,
    .zgsz-metar-record {
        grid-template-columns:
            minmax(58px, 0.8fr)
            minmax(85px, 1fr)
            minmax(65px, 0.8fr)
            minmax(78px, 1fr);
        gap: 4px;
    }

    .zgsz-metar-header .zgsz-col-header,
    .zgsz-metar-record .zgsz-col {
        font-size: 10px;
    }
}

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

@media (max-width: 480px) {
    .zgsz-historical-widget .zgsz-historical-data-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .zgsz-historical-widget
    .zgsz-historical-data-container
    .zgsz-station-box {
        padding: 10px;
    }

    .zgsz-historical-widget
    .zgsz-historical-data-container
    .zgsz-records-list {
        max-height: 280px;
    }

    .zgsz-metar-header,
    .zgsz-metar-record {
        grid-template-columns:
            minmax(52px, 0.8fr)
            minmax(78px, 1fr)
            minmax(58px, 0.8fr)
            minmax(72px, 1fr);
        gap: 3px;
    }

    .zgsz-metar-header .zgsz-col-header,
    .zgsz-metar-record .zgsz-col {
        font-size: 9px;
    }
}