/* ==========================================================================
   JWF DateTime Widgets — Frontend Styles
   All sizing uses em so the single "base_font_size" Elementor slider
   scales every element proportionally in one go.
   ========================================================================== */

/* ── Shared wrapper ─────────────────────────────────────────────────────── */
.jwf-dtw-wrapper {
    width: 100%;
    display: block;
}

/* ==========================================================================
   DATE WIDGET
   ========================================================================== */
.jwf-date-card {
    display: block;
    width: 100%;
    box-sizing: border-box;
    /* background, border-radius, padding — set inline per instance */
}

.jwf-date-header {
    display: flex;
    align-items: baseline;
    /* gap and margin-bottom set inline per instance */
}

.jwf-date-day {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 300;
    line-height: 1;
    /* font-size, color — Elementor typography / inline */
}

.jwf-date-month {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
    /* font-size, color, letter-spacing — Elementor typography / inline */
}

.jwf-dot-grid {
    display: grid;
    /* grid-template-columns, gap — set inline per instance */
}

.jwf-dot {
    border-radius: 50%;
    display: block;
    /* width, height, background — set inline per instance */
}

.jwf-dot--empty {
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* ==========================================================================
   TIME WIDGET
   ========================================================================== */
.jwf-time-card {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    /* font-size, background, border, border-radius,
       padding, gap, backdrop-filter — set inline per instance */
}

.jwf-time-pill {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* width, height, background, box-shadow — set inline per instance */
}

.jwf-time-pill-dot {
    border-radius: 50%;
    opacity: 0.9;
    /* width, height, background — set inline per instance */
}

.jwf-clock-face {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    /* gap — set inline per instance */
}

.jwf-clock-main {
    display: flex;
    align-items: center;
    /* gap — set inline per instance */
}

.jwf-clock-time {
    font-family: 'Share Tech Mono', monospace;
    line-height: 1;
    white-space: nowrap;
    /* font-size, color, letter-spacing — Elementor typography / inline */
}

.jwf-ampm-wrap {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* gap — set inline per instance */
}

.jwf-ampm {
    font-family: 'Albert Sans', sans-serif;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    /* font-size, color, opacity, letter-spacing — Elementor / inline */
}

.jwf-timezone {
    font-family: 'Albert Sans', sans-serif;
    white-space: nowrap;
    line-height: 1.2;
    /* font-size, color — Elementor typography / inline */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Analog Clock Widget
   ═══════════════════════════════════════════════════════════════════════════ */

.jwf-ac-wrapper {
    display: inline-block;
    width: 100%;
}

.jwf-ac-container {
    /* All styling comes from inline styles for Elementor control */
}

.jwf-ac-datetime-section {
    /* Flex layout from inline styles */
}

.jwf-ac-datetime {
    font-family: 'Albert Sans', sans-serif;
    line-height: 1.2;
    /* Typography from Elementor controls */
}

.jwf-ac-clock {
    position: relative;
    border-radius: 50%;
    margin: 0 auto;
    /* Size, background, border from inline styles */
}

.jwf-ac-marker {
    position: absolute;
    width: 2px;
    height: 8px;
    left: 50%;
    transform-origin: center;
    margin-left: -1px;
}

.jwf-ac-marker-12 {
    top: 2%;
    left: 50%;
}

.jwf-ac-marker-3 {
    top: 50%;
    right: 2%;
    left: auto;
    width: 8px;
    height: 2px;
    margin-left: 0;
    margin-top: -1px;
}

.jwf-ac-marker-6 {
    bottom: 2%;
    left: 50%;
}

.jwf-ac-marker-9 {
    top: 50%;
    left: 2%;
    width: 8px;
    height: 2px;
    margin-left: 0;
    margin-top: -1px;
}

.jwf-ac-center {
    position: absolute;
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.jwf-ac-hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    border-radius: 2px 2px 0 0;
}

.jwf-ac-hand-hour {
    width: 4px;
    height: 25%;
    margin-left: -2px;
}

.jwf-ac-hand-minute {
    width: 3px;
    height: 35%;
    margin-left: -1.5px;
}

.jwf-ac-hand-second {
    width: 2px;
    height: 40%;
    margin-left: -1px;
}