/* ============================================================
   Trading DayNight Clocks  |  world-clocks.css  v7.0
   No card borders · JS-driven fluid scaling · map fills widget
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=Exo+2:wght@400;700&display=swap');

/* --wc-unit is set by JS = widget width / 24
   All sizes derive from this one value so everything
   scales perfectly at any container width.              */

.world-clocks-widget {
    --wc-unit:     16px;    /* JS overrides this immediately */
    --wc-accent:   #00c9a7;
    --wc-border:   #333E48;
    --wc-text:     #1a2e3d;
    --wc-text-dim: #333E48;

    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    font-family: 'Exo 2', 'Segoe UI', sans-serif;
    box-shadow:
        0 0 0 0.5px rgba(51,62,72,0.5),
        0 4px 24px rgba(0,30,60,0.14);
}

/* ── MAP BACKDROP ─────────────────────────────────────────── */
.wc-map-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.wc-map-svg-wrapper {
    width: 100%;
    height: 100%;
}

.wc-map-svg-wrapper svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wc-map-svg-wrapper svg .wc-country {
    fill: #f0f5f8 !important;
    stroke: #007a65 !important;
    stroke-width: 2.0 !important;
}

.wc-map-svg-wrapper svg rect:first-child {
    fill: #daeaf3 !important;
}

.wc-daynight-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 0.68;
}

.wc-connectors {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}

.wc-dots {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.wc-dot {
    position: absolute;
    transform: translate(-50%, -50%);
}

.wc-dot__ring {
    width:  calc(var(--wc-unit) * 0.55);
    height: calc(var(--wc-unit) * 0.55);
    background: var(--wc-accent);
    border-radius: 50%;
    border: calc(var(--wc-unit) * 0.1) solid #fff;
    box-shadow: 0 0 0 2px rgba(0,201,167,0.3), 0 0 8px rgba(0,201,167,0.6);
    animation: wc-pulse 2.6s ease-in-out infinite;
}

@keyframes wc-pulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(0,201,167,0.28), 0 0 7px rgba(0,201,167,0.5); }
    50%      { box-shadow: 0 0 0 4px rgba(0,201,167,0.10), 0 0 16px rgba(0,201,167,0.9); }
}

/* ── CONTENT (drives widget height) ──────────────────────── */
.wc-content {
    position: relative;
    z-index: 5;
}

.wc-clocks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: calc(var(--wc-unit) * 0.35);
    padding: calc(var(--wc-unit) * 0.5);
}

/* Cards: no border, no background — pure text over map */
.wc-card {
    background: transparent;
    border: none;
    border-radius: calc(var(--wc-unit) * 0.4);
    padding: calc(var(--wc-unit) * 0.45) calc(var(--wc-unit) * 0.35);
    text-align: center;
}

/* Night class kept for potential future use — text colour intentionally matches day */

.wc-card__city {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: calc(var(--wc-unit) * 0.52);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--wc-text-dim);
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: calc(var(--wc-unit) * 0.1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 2s ease;
}

.wc-card__time {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: calc(var(--wc-unit) * 1.1);
    font-weight: 500;
    color: var(--wc-text);
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
    transition: color 2s ease;
}

/* ── LEGEND ───────────────────────────────────────────────── */
.wc-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--wc-unit) * 0.9);
    padding: calc(var(--wc-unit) * 0.3) calc(var(--wc-unit) * 0.6) calc(var(--wc-unit) * 0.4);
    border-top: 1px solid rgba(51,62,72,0.18);
    position: relative;
    z-index: 5;
}

.wc-legend__item {
    display: flex;
    align-items: center;
    gap: calc(var(--wc-unit) * 0.28);
    font-size: calc(var(--wc-unit) * 0.42);
    color: var(--wc-text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
}

.wc-legend__swatch {
    width:  calc(var(--wc-unit) * 1.1);
    height: calc(var(--wc-unit) * 0.32);
    border-radius: calc(var(--wc-unit) * 0.16);
    flex-shrink: 0;
}

.wc-legend__swatch--day {
    background: #f0f5f8;
    border: 1px solid var(--wc-accent);
}

.wc-legend__swatch--night {
    background: linear-gradient(90deg, #1a3d5c, #2e5f82);
    border: 1px solid rgba(0,201,167,0.2);
}