/**
 * Ozark Connect Branding Overrides for OpenSpeedTest
 * These styles override the default OpenSpeedTest colors with Ozark Connect branding
 */

:root {
    --ozark-primary: #0550B5;
    --ozark-accent: #E56B11;
    --ozark-bg: #0f0f11;
    --ozark-text: #ededef;
}

/* Override the blue gradient/accent colors */
.openSpeedtestApp [style*="fill: #3da6ff"],
.openSpeedtestApp [style*="fill: #14b0fe"],
.openSpeedtestApp [style*="fill:#3da6ff"],
.openSpeedtestApp [style*="fill:#14b0fe"] {
    fill: var(--ozark-primary) !important;
}

/* Credits section styling - fixed bottom bar */
.Credits {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: inherit !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    z-index: 1000 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.Credits a {
    color: #60A5FA !important;  /* Lighter blue for better contrast on dark footer */
    text-decoration: none !important;
}

.Credits a:hover {
    color: var(--ozark-accent) !important;
    text-decoration: underline !important;
}

/* Progress bar and gauge accent colors */
#progressbg {
    stroke: var(--ozark-primary) !important;
}

/* Download graph - solid blue */
.line {
    fill: var(--ozark-primary) !important;
}

/* Upload graph - solid orange */
.line2 {
    fill: var(--ozark-accent) !important;
}

/* Ping symbol - blue to match download */
#pingSymbol,
#pingSymbolDesk,
#pingSymbolMob {
    fill: var(--ozark-primary) !important;
}

/* Download symbol (arrow) - blue to match graph */
#downSymbol,
#downSymbolDesk,
#downSymbolMob {
    fill: var(--ozark-primary) !important;
}

/* Upload symbol (arrow) - orange to match graph */
#upSymbol,
#upSymbolDesk,
#upSymbolMob {
    fill: var(--ozark-accent) !important;
}

/* Override the graph symbols to not use gradient */
#graphc1,
#graphc2 {
    fill: none !important;
}

/* Start button - solid blue instead of gradient */
.startButton {
    fill: var(--ozark-primary) !important;
}

.startButton:hover {
    fill: #0447a3 !important;
}

/* Settings icon */
.Startsettings {
    fill: var(--ozark-primary) !important;
}

/* Progress bar colors */
.intro-Progress {
    stroke: var(--ozark-primary) !important;
}

.progressElmstart {
    stroke: var(--ozark-primary) !important;
}


/* Lighter blue for progress bar visibility */
.intro-Progress path,
.intro-Progress line,
#progressStatus-Desk,
#progressStatus-Mob {
    stroke: #60A5FA !important;
}

/* Save notification snackbar */
.save-notification {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 16px 32px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #ffffff;
    background: linear-gradient(135deg, #1c1c1f 0%, #111113 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    min-width: 200px;
    text-align: center;
    letter-spacing: 0.5px;
}

.save-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Orange for "Please wait..." - matches Ozark accent */
.save-notification.waiting {
    border-color: #E56B11;
    background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
    box-shadow: 0 8px 32px rgba(249, 115, 22, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* Blue for "Result saved." - matches Ozark primary */
.save-notification.success {
    border-color: #0550B5;
    background: linear-gradient(135deg, #0550B5 0%, #1e40af 100%);
    box-shadow: 0 8px 32px rgba(5, 89, 201, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.save-notification.error {
    border-color: #ef4444;
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
    box-shadow: 0 8px 32px rgba(239, 68, 68, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* Clickable "View Results" - blue with hover effect */
.save-notification.clickable {
    border-color: #0550B5;
    background: linear-gradient(135deg, #0550B5 0%, #1e40af 100%);
    box-shadow: 0 8px 32px rgba(5, 89, 201, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    pointer-events: auto;
    cursor: pointer;
}

.save-notification.clickable:hover {
    background: linear-gradient(135deg, #0369d1 0%, #2563eb 100%);
    box-shadow: 0 8px 40px rgba(5, 89, 201, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    transform: translateX(-50%) translateY(-2px);
}