/* OpZone Tactical Light Theme */

html, body {
    font-family: 'Iceland', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #1a1a1a;
    color: #649fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* MudBlazor overrides */
/*.mud-appbar {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0;
}*/

/* Mud Heading Overrides */
h1{
    font-size: 4rem !important; 
}

li{
    margin-left: 35px;
}

.mud-paper{
    color: inherit !important;
}

p{
}

.mud-typography-subtitle1{
    margin-bottom: 1.5rem !important;
    font-size: 1.2rem !important;
}

.text-center{
    text-align: center;
}
.single-element{
    display: block;
}

.mud-appbar .mud-icon-button {
    color: #64748b !important;
}

.mud-input {
    &.mud-typography-subtitle1{
        margin-bottom: 3px !important;
    }
}

.mud-drawer {
    background-color: #0f172a !important;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
}

.mud-nav-item a.mud-nav-link {
    border-radius: 8px;
    margin: 2px 8px;
    color: #cbd5e1 !important;
    font-weight: 500;
}

.mud-nav-item a.mud-nav-link:hover,
.mud-nav-item a.mud-nav-link.active {
    background-color: rgba(2, 132, 199, 0.16) !important;
    color: #38bdf8 !important;
}

.mud-nav-item a.mud-nav-link .mud-nav-link-icon {
    color: #64748b !important;
}

.mud-nav-item a.mud-nav-link:hover .mud-nav-link-icon,
.mud-nav-item a.mud-nav-link.active .mud-nav-link-icon {
    color: #0284c7 !important;
}

.mud-main-panel {
    background-color: #f1f5f9;
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: #e2e8f0;
    border-radius: 8px;
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #0284c7;
    border-width: 2px;
}

/* Hero / carousel overlay */
.opz-hero-wrapper {
    position: relative;
    height: 94.9vh;
}

/*html { scrollbar-width: none; }*/ /* Firefox */
/*body { -ms-overflow-style: none; }*/ /* IE and Edge */
/*body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; }*/ /* Chrome */

.opz-hero-carousel-static {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)),url('img/Promo1.png');
    background-size: 150%;
    background-position: left top;
    background-repeat: repeat;
    /*min-height: calc(100vh + 68px);*/
    overflow: hidden;
}

.opz-hero-carousel {
    background-image: url('img/Promo1.png');
    background-size: 125%;
    background-position: left center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    animation: opz-hero-pan 5s ease-in-out forwards;
}

.opz-hero-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
    z-index: 5;
}

.opz-hero-progress-bar {
    height: 100%;
    width: 100%;
    background: #0284c7;
    transform-origin: left center;
    animation-name: opz-hero-progress-drain;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 2s;
}

@keyframes opz-hero-progress-drain {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

.opz-hero-carousel {
    background-image: url('img/Promo1.png');
    background-size: 125%;
    background-position: left center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    animation: opz-hero-pan 5s ease-in-out forwards;
}

@keyframes opz-hero-pan {
    from {
        background-position: left center;
    }
    to {
        background-position: right center;
    }
}

.opz-long-text {
    width: 60vw;
    margin: 0 auto;
    min-height: calc(100vh - 48px);
}

a {
    color: rgba(129, 202, 255, 0.7);
}

@media (max-width: 768px) {
    .opz-hero-carousel {
        background-size: cover;
        background-position: center center;
    }

    .opz-long-text {
        width: 90vw;
        margin: 0 auto;
    }

    h1 {
        font-size: 3rem !important;
        color: #68b5e3 !important;
    }

    h2 {
        font-size: 2rem !important;
        color: #68b5e3 !important;
    }

    h4 {
        font-size: 1.5rem !important;
        color: #68b5e3 !important;
    }

    .opz-hero-carousel-static {
        background-size: cover;
        background-position: center center;
        padding-top: 50px;
        min-height: calc(100vh + 68px);
    }


    .opz-hero-wrapper {
        height: calc(100dvh - 48px);
    }

    .opz-hero-text {
        background: rgba(0, 61, 93, 0.55);
        color: #ffffff !important;
        padding: 20px 32px;
        border-radius: 12px;
        backdrop-filter: blur(2px);
        max-width: 90%;
        font-weight: 700;
        line-height: 1.4;
        animation: none !important;
    }
}

.opz-hero-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
    text-align: center;
}

.opz-hero-text-sticky {
    background: rgba(0, 61, 93, 0.55);
    color: #ffffff !important;
    padding: 20px 32px;
    border-radius: 12px;
    backdrop-filter: blur(2px);
    max-width: 90%;
    font-weight: 700;
    line-height: 1.4;
}

.opz-hero-text {
    background: rgba(0, 61, 93, 0.55);
    color: #ffffff !important;
    padding: 20px 32px;
    border-radius: 12px;
    backdrop-filter: blur(2px);
    max-width: 90%;
    font-weight: 700;
    line-height: 1.4;
    animation: opz-letter-spread 6s ease-in-out forwards;
}

@keyframes opz-letter-spread {
    from {
        letter-spacing: normal;
    }
    to {
        letter-spacing: 0.08em;
    }
}

/* OpZone utilities */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 24px;
}

.info-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.content-card {
    width: 100%;
    max-width: 60vw;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background-color: rgba(33,33,33,0.7);
}

.content-card-wide {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background-color: rgba(33,33,33,0.7);
}

.content-card-light {
    width: 100%;
    min-height: 80vh;
    border-radius: 8px;
    border: 1px solid #55595e;
    background-color: rgba(33,33,33,0.7);

    & p {
        color: #c7c7c7;
    }
}



.login-icon {
    color: #0284c7 !important;
    font-size: 48px !important;
}

.opz-appbar-icon {
    color: #0284c7 !important;
}

.opz-appbar-title {
    color: #1e293b !important;
    font-weight: 700 !important;
}

/* ---- Mobile nav (hamburger + drawer) ----
   Below the MudBlazor md breakpoint (960px) the appbar shows only the logo
   and a hamburger; the inline links move into a slide-out Temporary drawer.
   At/above 960px the inline links return and the hamburger disappears. */
.opz-nav-inline {
    display: flex;
    align-items: center;
}

/* Inline nav links — sized to match the previous Size.Small text buttons */
.opz-nav-link {
    font-size: 0.8125rem;
    line-height: 1.75;
    white-space: nowrap;
}

.opz-nav-menu-btn {
    display: none;
}

.opz-nav-drawer {
    --mud-drawer-width: 280px;
}

.opz-nav-drawer-header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: #1a1a1a;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.opz-nav-drawer-brand {
    display: block;
    line-height: 0;
}

.opz-nav-drawer-brand img {
    height: 28px;
    width: auto;
    display: block;
}

.opz-nav-drawer-divider {
    margin: 8px 20px;
}

@media (max-width: 959.98px) {
    .opz-nav-inline {
        display: none !important;
    }

    .opz-nav-menu-btn {
        display: inline-flex;
    }
}

/*.mud-appbar-dense {
    padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/2) !important;
}*/

.mud-active-tab{
    background-color: rgba(33,33,33,0.7);
}

/* ---- Footer ----
   The footer sits in normal document flow directly beneath the page
   content (no viewport pinning): on short pages it simply follows the
   content with empty space below, and on long pages it scrolls with it. */
.mud-layout {
    display: flex;
    flex-direction: column;
}

.opz-footer {
    flex: 0 0 auto;
    padding: 0.6rem 24px 0.9rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    font-size: 0.8rem;
    color: #94a3b8;
}

.opz-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    max-width: 1400px;
    margin: 0 auto;
}

.opz-footer a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s ease;
}

.opz-footer a:hover {
    color: #0284c7;
}

.opz-footer a:focus-visible {
    outline: 2px solid #0284c7;
    outline-offset: 3px;
    border-radius: 2px;
}

.opz-footer-copy {
    margin-left: auto;
    color: #64748b;
}

@media (max-width: 768px) {
    .opz-footer-inner {
        justify-content: center;
        gap: 8px 20px;
    }

    .opz-footer-copy {
        flex-basis: 100%;
        margin-left: 0;
        text-align: center;
    }
}

.mud-toolbar-appbar{
    height: auto !important;
}

.mud-button-login {
    height: 44px;
    font-size: 15px;
    font-weight: 600;
}

/* Page defaults */
.opz-page-large {
    padding: 24px;
    max-width: 2100px;
    margin: 0 auto;
}

.opz-page {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.opz-page-header {
    margin-bottom: 24px;
}

    .opz-page-header h1 {
        font-size: 28px;
        font-weight: 700;
        color: #5085dc;
        margin: 0;
    }

.opz-page-header p {
    color: #64748b;
    margin: 4px 0 0 0;
}

/* Stat cards */
.opz-stat-card {
    padding: 20px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
}

.opz-stat-card .label {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.opz-stat-card .value {
    font-size: 32px;
    font-weight: 700;
    color: #1e293b;
    margin: 4px 0;
}

.opz-stat-card .change.positive { color: #16a34a; }
.opz-stat-card .change.negative { color: #dc2626; }

/* Status indicators */
.opz-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

.opz-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.opz-status-dot.active { background-color: #16a34a; }
.opz-status-dot.warning { background-color: #d97706; }
.opz-status-dot.danger { background-color: #dc2626; }
.opz-status-dot.inactive { background-color: #94a3b8; }

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f8fafc;
}

::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Onboarding overlay */
.opz-onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.opz-onboarding-panel {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
}

.opz-onboarding-close {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* ==========================================================================
   About page — full-height scroll-snap pane carousel
   Used by SiteOwners.razor (/About)
   Desktop: horizontal snap stage, panes ~76vw, edge-fade mask, click-to-focus.
   Mobile (<768px): stacked vertical flow, natural page scroll, no mask.
   ========================================================================== */

/* Hero shell: keeps the tactical Promo1 treatment from .opz-hero-carousel-static
   but locks to the visible area below the fixed appbar (MudAppBar Dense = 48px). */
.opz-min-page {
    height: calc(100dvh - 70px);
    min-height: 0;
}

.opz-about-hero {
    position: relative;
    min-height: calc(100dvh - 70px);
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    overflow: auto;
    scrollbar-width: thin;
}

/* Scroll-snap stage: horizontal, edge-faded, scrollbar hidden.
   Padding 12vw on each side lets the first/last pane reach true center
   at the scroll ends (scrollWidth math stays exactly reachable). */
.opz-about-stage {
    display: flex;
    align-items: center;
    gap: 2vw;
    height: 100%;
    padding: 0 12vw;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* legacy Edge / IE */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.opz-about-stage::-webkit-scrollbar {
    display: none; /* Chrome / Safari / Edge */
}

/* Pane cards — dimmed and slightly scaled unless active/centered */
.opz-pane {
    flex: 0 0 76vw;
    width: 76vw;
    height: 100%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(104, 181, 227, 0.14);
    border-radius: 12px;
    background: rgba(26, 28, 33, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 48px rgba(2, 132, 199, 0.03),
        0 16px 40px rgba(0, 0, 0, 0.45);
    color: #c7c7c7;
    cursor: pointer;
    opacity: 0.45;
    transform: scale(0.96);
    filter: saturate(0.6);
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease,
                box-shadow 0.4s ease, filter 0.4s ease;
    outline: none;
}

/* Centered pane (toggled by opzoneCarouselInit) or keyboard-focused pane */
.opz-pane-active,
.opz-pane:focus-visible {
    opacity: 1;
    transform: none;
    filter: none;
    border-color: rgba(104, 181, 227, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 64px rgba(2, 132, 199, 0.06),
        0 0 0 1px rgba(2, 132, 199, 0.25),
        0 24px 64px rgba(0, 0, 0, 0.6);
}

.opz-pane:focus-visible {
    outline: 2px solid #0284c7;
    outline-offset: 3px;
}


.opz-pricing-box{
    background-color: rgba(44,44,44,0.9);
}

.opz-pricing-dev {
    background-color: rgba(44,44,44,0.7);
    width: 90%;
    margin: 0 auto;
}

@media (hover: hover) {
    .opz-pane:hover {
        opacity: 0.8;
        transform: scale(0.97);
        border-color: rgba(104, 181, 227, 0.35);
    }

    .opz-pane-active:hover {
        opacity: 1;
        transform: none;
    }
}

/* Pinned header — chapter eyebrow, title, accent rule */
.opz-pane-header {
    flex: 0 0 auto;
    padding: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 56px) 4px;
}

.opz-pane-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #68b5e3;
}

.opz-pane-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border: 1px solid rgba(2, 132, 199, 0.55);
    border-radius: 4px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: #0284c7;
}

.opz-pane-title {
    margin: 0 0 14px;
    font-size: clamp(1.8rem, 2.4vw, 2.5rem);
    line-height: 1.1;
    color: #68b5e3 !important;
}

.opz-pane-rule {
    width: 64px;
    height: 2px;
    border-radius: 1px;
    margin-bottom: 6px;
    background: linear-gradient(90deg, #0284c7, rgba(2, 132, 199, 0));
}


/*Pricing styles to match About*/
.opz-price-body{

}

    .opz-price-body ul {
        list-style: none;
        margin: 4px 0 8px;
        padding: 0;
    }

        .opz-price-body ul li {
            position: relative;
            margin-left: 0;
            margin-bottom: 8px;
            padding-left: 24px;
            line-height: 1.6;
        }

            .opz-price-body ul li::before {
                content: "";
                position: absolute;
                left: 4px;
                top: 0.62em;
                width: 7px;
                height: 7px;
                border-left: 2px solid #0284c7;
                border-bottom: 2px solid #0284c7;
                transform: rotate(-45deg);
            }

        /* Centred pricing lists (e.g. the "OpZone Event Day" card). The li is a
           full-width block, so the absolute marker above pins to the card edge
           while the text sits centred in the middle. Let the marker flow inline
           with the text instead, so the two centre together as one unit — and so
           it still tracks the first line when a long item wraps. Left-aligned
           cards keep the absolute hanging-indent marker. */
        .opz-price-body .text-center ul li {
            padding-left: 0;
        }

            .opz-price-body .text-center ul li::before {
                position: static;
                display: inline-block;
                margin-right: 10px;
                vertical-align: baseline;
            }

/* Scrollable body — long panes (e.g. Custom Game Formats) scroll internally */
.opz-pane-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 12px clamp(24px, 4vw, 56px) 28px;
    scrollbar-width: thin;
    scrollbar-color: rgba(104, 181, 227, 0.4) rgba(0, 0, 0, 0.25);
}

.opz-pane-body::-webkit-scrollbar {
    width: 6px;
}

.opz-pane-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}

.opz-pane-body::-webkit-scrollbar-thumb {
    background: rgba(104, 181, 227, 0.4);
    border-radius: 3px;
}

.opz-pane-para {
    color: #c7c7c7;
    line-height: 1.7;
}

/* Section heads inside panes (e.g. "What Players Get...") */
.opz-pane-section {
    margin: 26px 0 12px;
    font-size: 1.35rem;
    line-height: 1.2;
    color: #68b5e3 !important;
}

/* Sub-section heads inside panes (Counter-Strike / Shrinking Zone / Tournament) */
.opz-pane-subsection {
    margin: 20px 0 8px;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #81caff !important;
}

/* Tactical chevron list bullets */
.opz-pane-body ul {
    list-style: none;
    margin: 4px 0 8px;
    padding: 0;
}

.opz-pane-body ul li {
    position: relative;
    margin-left: 0;
    margin-bottom: 8px;
    padding-left: 24px;
    line-height: 1.6;
}

.opz-pane-body ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-left: 2px solid #0284c7;
    border-bottom: 2px solid #0284c7;
    transform: rotate(-45deg);
}

.opz-pane a {
    color: #81caff;
    text-decoration: underline;
    text-decoration-color: rgba(129, 202, 255, 0.4);
    text-underline-offset: 3px;
}

.opz-pane a:hover {
    color: #9fd4ff;
}

/* Pinned footer — brand + pane position */
.opz-pane-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px clamp(24px, 4vw, 56px);
    border-top: 1px solid rgba(104, 181, 227, 0.12);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(199, 199, 199, 0.55);
}

.opz-pane-brand {
    color: #0284c7;
    font-weight: 700;
    letter-spacing: 0.3em;
}

/* Desktop-only interaction hint (pointer-events: none so it never blocks clicks) */
.opz-about-hint {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 2;
    transform: translateX(-50%);
    padding: 6px 14px;
    border: 1px solid rgba(104, 181, 227, 0.18);
    border-radius: 999px;
    background: rgba(10, 12, 15, 0.55);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(199, 199, 199, 0.7);
    white-space: nowrap;
    pointer-events: none;
}

/* Mobile (<768px): stacked vertical flow — no horizontal scroll, no mask,
   panes are full width and content-sized. */
@media (max-width: 768px) {
    .opz-about-hero {
        height: auto;
        overflow: visible;
        padding: 28px 0 40px;
        background-size: cover;
        background-position: center center;
        padding-top: 0;
    }

    .opz-about-stage {
        flex-direction: column;
        gap: 20px;
        height: auto;
        padding: 0 16px;
        overflow: visible;
        overscroll-behavior: auto;
        scroll-snap-type: none;
        scrollbar-width: auto;
        -ms-overflow-style: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .opz-pane {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        scroll-snap-align: none;
        opacity: 1;
        transform: none;
        filter: none;
        cursor: default;
        overflow: visible;
    }

    .opz-pane-body {
        overflow: visible;
        padding-bottom: 20px;
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

    .opz-pane-title {
        font-size: 1.9rem !important;
    }

    .opz-about-hint {
        display: none;
    }
}

/* ---- Profile tab (dashboard) ----
   The dashboard panel (content-card-light) is always dark, so these classes
   pin light text colors regardless of the active MudBlazor theme. */

.opz-pt-heading {
    color: #e2e8f0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.opz-pt-sub,
.opz-pt-hint {
    color: #94a3b8;
}

.opz-pt-hint-error {
    color: #f87171;
}

.opz-pt-switch-label {
    color: #e2e8f0;
}

.opz-pt-card {
    height: 100%;
    background: rgba(15, 23, 42, 0.24);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
}

.opz-pt-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.15);
    border: 2px solid rgba(148, 163, 184, 0.35);
}

.opz-pt-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.opz-pt-avatar-icon {
    font-size: 40px;
    color: #94a3b8;
}

.opz-pt-file-input {
    display: none;
}

.opz-pt-platform {
    min-width: 160px;
    max-width: 220px;
}

.opz-pt-url {
    flex: 1 1 auto;
    min-width: 220px;
}

.opz-pt-url-invalid .mud-input-helper-text {
    color: #f87171 !important;
}

.opz-pt-remove {
    align-self: center;
    margin-top: 4px;
}

.opz-pt-privacy-row {
    padding: 10px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.opz-pt-privacy-row:last-child {
    border-bottom: none;
}

.opz-pt-privacy-status {
    min-width: 56px;
    text-align: right;
}

/* ==========================================================================
   News & Roadmap
   Category chips, feed cards, article typography, and the admin markdown
   editor theming. The admin panel (content-card-light) is always dark, so
   these classes pin light colors regardless of the active MudBlazor theme.
   ========================================================================== */

/* ---- Category chips (shared: public feed, article, admin table) ---- */
.opz-news-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--opz-cat);
    background: color-mix(in srgb, var(--opz-cat) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--opz-cat) 45%, transparent);
    white-space: nowrap;
}


/* ---- Feed hero ---- */
.opz-news-hero {
    background: radial-gradient(1200px 500px at 85% -10%, rgba(2, 132, 199, 0.32), transparent 90%), radial-gradient(800px 400px at -10% 110%, rgba(139, 92, 246, 0.14), transparent 56%), #0b1220;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding: clamp(20px, 2vw, 8px) 24px 28px;
}

.opz-news-hero-inner {
    max-width: 900px;
    margin: 0 auto;
}

.opz-news-eyebrow {
    margin: 0 0 12px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #93a1b3;
}

.opz-news-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(2.6rem, 6vw, 4.2rem) !important;
    line-height: 1;
    color: #e2e8f0 !important;
    letter-spacing: 0.01em;
}

.opz-news-intro {
    margin: 0;
    max-width: 640px;
    font-size: 1.08rem;
    line-height: 1.6;
    color: #94a3b8;
}

/* ---- Feed page shell ---- */
.opz-news-page {
    margin: 0 auto;
    padding: 32px 24px 72px;
}

.opz-news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.opz-news-filter-chip {
    cursor: pointer;
}

/* ---- Feed cards ---- */
.opz-news-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.opz-news-card {
    display: block;
    margin-bottom: 20px;
    width: 100%;
    text-align: left;
    padding: 22px 24px;
    border-radius: 12px;
    border: 1px solid rgba(63,63,63,0.7);
    background-color: rgba(33,33,33,0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    outline: none;
    font-family: inherit;
}

.opz-news-card:hover {
    transform: translateY(-2px);
    border-color: rgba(2, 132, 199, 0.5);
    background: rgba(20, 30, 52, 0.82);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.opz-news-card:focus-visible {
    outline: 2px solid #0284c7;
    outline-offset: 3px;
}

.opz-news-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.opz-news-card-date {
    font-size: 0.82rem;
    color: #94a3b8;
}

.opz-news-card-title {
    margin: 0 0 8px;
    font-size: 1.35rem;
    line-height: 1.25;
    color: #e2e8f0 !important;
}

.opz-news-card-excerpt {
    margin: 0 0 14px;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #94a3b8;
}

.opz-news-card-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: #38bdf8;
}

.opz-news-empty {
    padding: 48px 24px;
    text-align: center;
    border: 1px dashed rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.5);
}

/* ---- Article page ---- */
.opz-news-article-page {
    padding-top: 40px;
}

.opz-news-back {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #38bdf8;
    text-decoration: none;
}

.opz-news-back:hover {
    color: #7dd3fc;
}

.opz-news-article-card {
    max-width: 1200px;
    margin: 0 auto;
}

.opz-news-article-header {
    margin-bottom: 24px;
}

.opz-news-article-title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3rem) !important;
    line-height: 1.1;
    color: #e2e8f0 !important;
    letter-spacing: 0.005em;
}

/* Reading card */
.opz-news-article {
    padding: clamp(22px, 4vw, 40px);
    border-radius: 12px;
    background-color: rgba(33,33,33,0.7);
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    color: #cbd5e1;
    font-size: 1.02rem;
    line-height: 1.75;
    word-break: break-word;
}

.opz-news-article > :first-child {
    margin-top: 0;
}

.opz-news-article > :last-child {
    margin-bottom: 0;
}

.opz-news-article h1,
.opz-news-article h2,
.opz-news-article h3,
.opz-news-article h4,
.opz-news-article h5,
.opz-news-article h6 {
    color: #e2e8f0;
    line-height: 1.25;
    margin: 1.6em 0 0.6em;
}

.opz-news-article h1 { font-size: 1.8rem; }
.opz-news-article h2 { font-size: 1.5rem; }
.opz-news-article h3 { font-size: 1.25rem; }
.opz-news-article h4 { font-size: 1.1rem; }

.opz-news-article p {
    margin: 0 0 1.1em;
}

.opz-news-article a {
    color: #38bdf8;
    text-decoration: underline;
    text-decoration-color: rgba(56, 189, 248, 0.4);
    text-underline-offset: 3px;
}

.opz-news-article a:hover {
    color: #7dd3fc;
}

.opz-news-article ul,
.opz-news-article ol {
    margin: 0 0 1.1em;
    padding-left: 1.4em;
}

.opz-news-article li {
    margin-left: 0;
    margin-bottom: 0.35em;
}

.opz-news-article blockquote {
    margin: 1.2em 0;
    padding: 4px 0 4px 16px;
    border-left: 3px solid #0284c7;
    color: #94a3b8;
    font-style: italic;
}

.opz-news-article code {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.88em;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.14);
    color: #e2e8f0;
}

.opz-news-article pre {
    margin: 1.2em 0;
    padding: 16px;
    border-radius: 8px;
    background: #0b1220;
    border: 1px solid rgba(148, 163, 184, 0.16);
    overflow-x: auto;
}

.opz-news-article pre code {
    padding: 0;
    background: transparent;
    color: #cbd5e1;
}

.opz-news-article img {
    max-width: 100%;
    border-radius: 8px;
}

.opz-news-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
}

.opz-news-article th,
.opz-news-article td {
    border: 1px solid rgba(148, 163, 184, 0.2);
    padding: 8px 12px;
    text-align: left;
}

.opz-news-article th {
    background: rgba(148, 163, 184, 0.1);
    color: #e2e8f0;
}

.opz-news-article hr {
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    margin: 1.6em 0;
}

/* Editor alert blocks (```att / note / tip / warn) */
.opz-news-article .me-alert.callout {
    margin: 1.2em 0;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(148, 163, 184, 0.08);
}

/* ---- Admin table ---- */
.opz-news-table-title {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opz-news-count-over {
    color: #f87171 !important;
    font-weight: 700;
}

/* ---- Admin editor dialog ---- */
.opz-news-editor-body {
    max-width: 100%;
}

.opz-news-editor-category {
    min-width: 190px;
}

.opz-news-editor-label {
    color: #e2e8f0;
}

.opz-news-editor-box {
    border-radius: 8px;
    overflow: hidden;
}

.opz-news-preview {
    margin-top: 22px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding-top: 16px;
}

.opz-news-preview-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 12px;
}

/* ---- Markdown editor dark theming ----
   Loaded after the package's own CSS, so these rules win. The admin panel
   (content-card-light) is always dark; pin light surfaces/text. */
.EasyMDEContainer {
    color: #e2e8f0;
}

.EasyMDEContainer .editor-toolbar {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid #1e293b;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.EasyMDEContainer .editor-toolbar button {
    color: #94a3b8;
    background: transparent;
}

.EasyMDEContainer .editor-toolbar button:hover {
    background: rgba(2, 132, 199, 0.16);
    color: #38bdf8;
    border-color: transparent;
}

.EasyMDEContainer .editor-toolbar button.active {
    background: rgba(2, 132, 199, 0.28);
    color: #38bdf8;
    border-color: transparent;
}

.EasyMDEContainer .editor-toolbar button.separator {
    border-left: 1px solid rgba(148, 163, 184, 0.25);
}

.EasyMDEContainer .EasyMDEContainer,
.EasyMDEContainer .CodeMirror {
    background: rgba(15, 23, 42, 0.9);
    color: #e2e8f0;
}

.EasyMDEContainer .CodeMirror {
    border: 1px solid #1e293b;
    border-radius: 0 0 8px 8px;
}

.EasyMDEContainer .CodeMirror-focused {
    border-color: rgba(2, 132, 199, 0.6);
}

.EasyMDEContainer .CodeMirror-cursor {
    border-left-color: #38bdf8;
}

.EasyMDEContainer .CodeMirror-selected {
    background: rgba(2, 132, 199, 0.3) !important;
}

.EasyMDEContainer .CodeMirror-placeholder {
    color: #64748b;
}

.EasyMDEContainer .cm-s-easymde .cm-header { color: #38bdf8; }
.EasyMDEContainer .cm-s-easymde .cm-link { color: #38bdf8; }
.EasyMDEContainer .cm-s-easymde .cm-url { color: #7dd3fc; }
.EasyMDEContainer .cm-s-easymde .cm-quote { color: #94a3b8; }
.EasyMDEContainer .cm-s-easymde .cm-comment { color: #64748b; }
.EasyMDEContainer .cm-s-easymde .cm-string { color: #86efac; }
.EasyMDEContainer .cm-s-easymde .cm-tag { color: #fca5a5; }
.EasyMDEContainer .cm-s-easymde .cm-attribute { color: #fcd34d; }

.EasyMDEContainer .editor-statusbar {
    background: rgba(15, 23, 42, 0.9);
    border-top: 1px solid #1e293b;
    border-radius: 0 0 8px 8px;
    color: #64748b;
}

.EasyMDEContainer .editor-statusbar span {
    color: #64748b;
}

.EasyMDEContainer .editor-preview {
    background: rgba(15, 23, 42, 0.9);
    color: #cbd5e1;
}

.EasyMDEContainer .editor-preview-active,
.EasyMDEContainer .editor-preview-active-side {
    background: rgba(15, 23, 42, 0.9);
    color: #cbd5e1;
}

.EasyMDEContainer .editor-preview h1,
.EasyMDEContainer .editor-preview h2,
.EasyMDEContainer .editor-preview h3,
.EasyMDEContainer .editor-preview h4 {
    color: #e2e8f0;
}

.EasyMDEContainer .editor-preview a {
    color: #38bdf8;
}

.EasyMDEContainer .editor-preview code {
    background: rgba(148, 163, 184, 0.14);
    color: #e2e8f0;
}

.EasyMDEContainer .editor-preview pre {
    background: #0b1220;
}

.EasyMDEContainer .editor-preview blockquote {
    border-left-color: #0284c7;
    color: #94a3b8;
}

/* Fullscreen editor keeps the dark surfaces */
.EasyMDEContainer .CodeMirror-fullscreen,
.EasyMDEContainer .editor-preview-full {
    background: rgba(15, 23, 42, 0.97);
    z-index: 9999;
}

/* ==========================================================================
   Legal pages — Privacy Policy / Terms and Conditions
   Reading-card treatment shared with news articles, tuned for long-form
   legal text: narrower measure, numbered section heads with hairline rules.
   ========================================================================== */

.opz-legal-page {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(32px, 6vw, 64px) 24px 72px;
}

.opz-legal-eyebrow {
    margin: 0 0 10px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #93a1b3;
}

.opz-legal-title {
    margin: 0 0 8px;
    font-size: clamp(2.2rem, 5vw, 3rem) !important;
    line-height: 1.1;
    color: #e2e8f0 !important;
    letter-spacing: 0.01em;
}

.opz-legal-updated {
    margin: 0 0 28px;
    font-size: 0.9rem;
    color: #64748b;
}

.opz-legal-card {
    padding: clamp(24px, 4vw, 44px);
    border-radius: 12px;
    background-color: rgba(33, 33, 33, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    color: #cbd5e1;
    font-size: 1.02rem;
    line-height: 1.75;
    word-break: break-word;
}

.opz-legal-card > :first-child {
    margin-top: 0;
}

.opz-legal-card > :last-child {
    margin-bottom: 0;
}

.opz-legal-card h2 {
    margin: 1.8em 0 0.6em;
    padding-top: 0.9em;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    font-size: 1.3rem !important;
    line-height: 1.3;
    color: #e2e8f0 !important;
}

.opz-legal-card h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.opz-legal-card p {
    margin: 0 0 1.1em;
}

.opz-legal-card ul {
    margin: 0 0 1.1em;
    padding-left: 1.4em;
}

.opz-legal-card li {
    margin-left: 0;
    margin-bottom: 0.35em;
}

.opz-legal-card a {
    color: #38bdf8;
    text-decoration: underline;
    text-decoration-color: rgba(56, 189, 248, 0.4);
    text-underline-offset: 3px;
}

.opz-legal-card a:hover {
    color: #7dd3fc;
}

/* ==========================================================================
   Account deletion page — warning card, destructive confirm
   ========================================================================== */

.opz-delete-page {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(40px, 7vw, 80px) 24px 72px;
}

.opz-delete-card {
    padding: clamp(26px, 4vw, 40px);
    border-radius: 12px;
    background-color: rgba(33, 33, 33, 0.7);
    border: 1px solid rgba(248, 113, 113, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 0 48px rgba(248, 113, 113, 0.04),
        0 16px 40px rgba(0, 0, 0, 0.4);
}

.opz-delete-icon {
    color: #f87171;
    margin-bottom: 16px;
}

.opz-delete-title {
    margin: 0 0 14px;
    font-size: 1.6rem !important;
    line-height: 1.2;
    color: #f87171 !important;
}

.opz-delete-body {
    margin: 0 0 24px;
    color: #cbd5e1;
    line-height: 1.7;
}

.opz-delete-prompt {
    display: block;
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.opz-delete-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 24px;
}

.opz-delete-button {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

.opz-delete-button:hover {
    background-color: #ef4444 !important;
}

.opz-delete-button:disabled {
    background-color: rgba(248, 113, 113, 0.22) !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

.opz-delete-button:focus-visible {
    outline: 2px solid #fca5a5;
    outline-offset: 2px;
}

.opz-delete-cancel {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s ease;
}

.opz-delete-cancel:hover {
    color: #e2e8f0;
}

.opz-delete-cancel:focus-visible {
    outline: 2px solid #0284c7;
    outline-offset: 3px;
    border-radius: 2px;
}

/* ==========================================================================
   Address map picker � OpZoneMap component, MapPickerDialog, autocomplete
   ========================================================================== */

/* Reusable map surface. Dark while tiles load; rounded like the site's dark
   panels (legal/news cards) with the standard card border. */
.opz-map {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background-color: #0b1220;
    overflow: hidden;
}

/* MapPickerDialog body � the map fills the dialog width at a fixed height. */
.opz-map-picker {
    width: 100%;
}

.opz-map-picker .opz-map {
    height: 400px;
}

/* "Select from map" trigger under the address autocomplete */
.opz-map-pick-btn {
    text-transform: none;
    letter-spacing: 0.02em;
}

/* MudAutocomplete popover against the dark onboarding panel:
   MudBlazor's default light surface looks off here, so pin the dark surfaces. */
.opz-autocomplete-popover .mud-popover-content {
    background-color: rgba(15, 23, 42, 0.97);
    border: 1px solid #1e293b;
    border-radius: 8px;
    color: #e2e8f0;
}

.opz-autocomplete-popover .mud-list-item {
    color: #cbd5e1;
}

.opz-autocomplete-popover .mud-list-item:hover,
.opz-autocomplete-popover .mud-list-item.mud-selected-item,
.opz-autocomplete-popover .mud-selected-item {
    background-color: rgba(2, 132, 199, 0.16);
    color: #38bdf8;
}

/* ==========================================================================
   My Sites dashboard (column 1 — sites table)
   The dashboard panel (content-card-light) is always dark, so these classes
   pin light text colors regardless of the active MudBlazor theme.
   ========================================================================== */

.opz-sites-card {
    height: 100%;
    background: rgba(15, 23, 42, 0.22);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
}

.opz-sites-heading {
    color: #e2e8f0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.opz-sites-placeholder,
.opz-sites-muted {
    color: #94a3b8;
}

.opz-sites-status {
    color: #cbd5e1;
}

/* MudTable against the dark panel: transparent surface, pinned text colours */
.opz-sites-table .mud-table-root,
.opz-sites-table .mud-table-container {
    background: transparent;
    color: #cbd5e1;
}

.opz-sites-table .mud-table-head th {
    color: #94a3b8;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.opz-sites-table .mud-table-body td {
    color: #cbd5e1;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    cursor: pointer;
}

.opz-sites-table.mud-table-hover .mud-table-row:hover {
    background-color: rgba(2, 132, 199, 0.12);
}

.opz-sites-table .mud-table-row.opz-sites-row-selected {
    background-color: rgba(2, 132, 199, 0.18);
    box-shadow: inset 3px 0 0 #0284c7;
}

.opz-sites-table .mud-table-row.opz-sites-row-selected .mud-text {
    color: #e2e8f0;
}

/* ==========================================================================
   My Sites dashboard (column 2 — site details panel)
   Same dark-panel language as .opz-sites-card; pinned light text regardless
   of the active MudBlazor theme (the dashboard panel is always dark).
   ========================================================================== */

.opz-sitedetails-card {
    height: 100%;
    background: rgba(15, 23, 42, 0.22);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
}

.opz-sitedetails-heading {
    color: #e2e8f0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.opz-sitedetails-hint {
    color: #94a3b8;
}

.opz-sitedetails-error {
    color: #f87171;
}

.opz-sitedetails-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
}

.opz-sitedetails-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.08);
}

/* View-only definition list */
.opz-sitedetails-fields {
    display: flex;
    flex-direction: column;
}

.opz-sitedetails-field {
    padding: 10px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.opz-sitedetails-field:last-child {
    border-bottom: none;
}

.opz-sitedetails-value {
    display: block;
    margin-top: 2px;
    color: #cbd5e1;
    line-height: 1.5;
    word-break: break-word;
}

/* ==========================================================================
   My Sites dashboard (column 2 — social links + logo)
   ========================================================================== */

.opz-sitelinks-platform {
    min-width: 160px;
    max-width: 220px;
}

.opz-sitelinks-url {
    flex: 1 1 auto;
    min-width: 220px;
}

.opz-sitelinks-url-invalid .mud-input-helper-text {
    color: #f87171 !important;
}

.opz-sitelinks-remove {
    align-self: center;
    margin-top: 4px;
}

.opz-logo-box {
    width: 88px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.12);
    border: 1px dashed rgba(148, 163, 184, 0.4);
}

.opz-logo-icon {
    font-size: 40px;
    color: #94a3b8;
}

.opz-logo-icon-sm {
    font-size: 18px;
    color: #94a3b8;
    vertical-align: middle;
    margin-right: 6px;
}

/* ==========================================================================
   Opening hours editor (used inside the site details panel)
   Same dark-panel language as .opz-sitedetails-*; rows stack on narrow widths.
   ========================================================================== */

.opz-hours-section-title {
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
}

.opz-hours {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opz-hours-empty {
    color: #94a3b8;
    font-style: italic;
}

.opz-hours-row {
    display: grid;
    grid-template-columns: 150px 1fr 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.45);
}

.opz-hours-row-closed {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.22);
}

.opz-hours-day {
    min-width: 0;
}

.opz-hours-time {
    min-width: 0;
}

.opz-hours-closed-label {
    color: #f87171;
    font-size: 0.85rem;
    font-weight: 600;
    grid-column: 2 / 4;
}

.opz-hours-closed-switch {
    display: flex;
    align-items: center;
    justify-content: center;
}

.opz-hours-remove {
    color: #f87171;
}

.opz-hours-add {
    align-self: flex-start;
}

@media (max-width: 600px) {
    .opz-hours-row {
        grid-template-columns: 1fr 1fr;
    }

    .opz-hours-day {
        grid-column: 1 / -1;
    }

    .opz-hours-closed-label {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   Site boundary editor (My Sites dashboard — column 3)
   Same dark-panel language as .opz-sites-card / .opz-sitedetails-*; the map
   surface mirrors .opz-map but is scoped to the boundary editor.
   ========================================================================== */

.opz-boundary-card {
    height: 100%;
    background: rgba(15, 23, 42, 0.22);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
}

.opz-boundary-heading {
    color: #e2e8f0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.opz-boundary-map {
    width: 100%;
    height: 700px;
    border-radius: 12px;
    border: 1px solid #1e293b;
    background-color: #0b1220;
    overflow: hidden;
}

.opz-boundary-hint {
    color: #94a3b8;
}

.opz-boundary-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.opz-boundary-tiles {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.28);
}

.opz-boundary-tile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.opz-boundary-tile-check {
    color: #38bdf8;
}

.opz-boundary-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.opz-boundary-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.opz-boundary-tool {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.28);
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.opz-boundary-tool:hover {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.5);
}

.opz-boundary-tool-active {
    color: #38bdf8;
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
}

.opz-boundary-tool-danger {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
}

.opz-boundary-tool-danger.opz-boundary-tool-active {
    color: #f87171;
    border-color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}

.opz-boundary-btn {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.opz-boundary-btn-danger {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
}

.opz-boundary-alert {
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.25);
}

.opz-boundary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.opz-boundary-badge {
    margin-left: 8px;
}

.opz-boundary-expand-btn {
    color: #94a3b8;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.opz-boundary-expand-btn:hover {
    color: #e2e8f0;
    background-color: rgba(148, 163, 184, 0.12);
}

/* Expanded full-screen overlay. The card becomes a fixed overlay; the map grows
   to fill the available height via a flex column layout. */
.opz-boundary-expanded {
    position: fixed;
    inset: 16px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.97);
    border-color: rgba(148, 163, 184, 0.4);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    animation: opz-boundary-fade-in 0.18s ease;
}

.opz-boundary-expanded .opz-boundary-map {
    flex: 1;
    height: auto;
    min-height: 0;
}

@keyframes opz-boundary-fade-in {
    from {
        opacity: 0;
        transform: scale(0.985);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}