/**
 * Page Designer — Countdown Timer Block (block CSS)
 * v1.0.0 (PAGE_DESIGNER_VERSION 2.9.394)
 *
 * Strict isolation: every selector uses pd-blk-cdt-* namespace.
 * Style variants live on the root via pd-blk-cdt-style-{none|colons|boxed|pills}
 * and pd-blk-cdt-labelpos-{below|inline|hidden}.
 */

.pd-blk-cdt {
    /* v3.7.22 — wired to the Global Theme instead of hardcoded Catppuccin/px
       defaults (the panel doesn't override these, so they were fixed admin
       colours that ignored the tenant theme). Numbers/labels now follow
       General Text (colour + size via % factors), separators/pills follow the
       Links colour, the boxed-unit surface is a neutral tint. */
    --pd-blk-cdt-bg:        color-mix(in srgb, currentColor 10%, transparent);
    --pd-blk-cdt-fg:        var(--pd-general-color, currentColor);
    --pd-blk-cdt-accent:    var(--pd-link-color, #89b4fa);
    --pd-blk-cdt-label-fg:  color-mix(in srgb, var(--pd-general-color, currentColor) 65%, transparent);
    --pd-blk-cdt-num-size:  calc(var(--pd-general-size, 16px) * 2.75);   /* 44px @ General 16 */
    --pd-blk-cdt-num-weight:var(--pd-general-weight, 700); /* v3.7.27 — follows General Text Weight */
    --pd-blk-cdt-label-size:calc(var(--pd-general-size, 16px) * 0.75);   /* 12px @ General 16 */
    --pd-blk-cdt-gap:       16px;
    --pd-blk-cdt-pad:       18px;
    --pd-blk-cdt-radius:    10px;

    display: flex;
    flex-direction: column;
    align-items: var(--pd-general-justify, center); /* v3.7.27 — follows General Text Align */
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    color: var(--pd-blk-cdt-fg);
    font-family: inherit;
}

.pd-blk-cdt-units {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pd-blk-cdt-gap);
    flex-wrap: wrap;
}

.pd-blk-cdt-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    box-sizing: border-box;
}

.pd-blk-cdt-num {
    font-size: var(--pd-blk-cdt-num-size);
    font-weight: var(--pd-blk-cdt-num-weight);
    line-height: var(--pd-general-lh, 1); /* v3.7.27 — follows General Text Line Height */
    font-variant-numeric: tabular-nums;
    color: var(--pd-blk-cdt-fg);
    letter-spacing: var(--pd-general-ls, -1px); /* v3.7.27 — follows General Text Letter Spacing */
}

.pd-blk-cdt-label {
    margin-top: 6px;
    font-size: var(--pd-blk-cdt-label-size);
    color: var(--pd-blk-cdt-label-fg);
    text-transform: uppercase;
    letter-spacing: var(--pd-general-ls, 1.5px); /* v3.7.27 — follows General Text Letter Spacing */
}

.pd-blk-cdt-sep {
    font-size: var(--pd-blk-cdt-num-size);
    font-weight: var(--pd-general-weight, 700); /* v3.7.27 — follows General Text Weight */
    line-height: var(--pd-general-lh, 1); /* v3.7.27 — follows General Text Line Height */
    color: var(--pd-blk-cdt-accent);
    align-self: flex-start;
    padding-top: 0;
}

[hidden].pd-blk-cdt-unit,
[hidden].pd-blk-cdt-sep,
[hidden].pd-blk-cdt-units,
[hidden].pd-blk-cdt-expired { display: none; }

/* Style: none */
.pd-blk-cdt-style-none .pd-blk-cdt-sep { display: none; }
.pd-blk-cdt-style-none .pd-blk-cdt-unit { padding: 0; background: transparent; border: none; }

/* Style: colons */
.pd-blk-cdt-style-colons .pd-blk-cdt-sep {
    display: inline-flex;
    /* --pd-cdt-colon = the panel's Colon colour picker; falls back to the
       theme accent (the base .pd-blk-cdt-sep colour) when unset. */
    color: var(--pd-cdt-colon, var(--pd-blk-cdt-accent));
}
.pd-blk-cdt-style-colons .pd-blk-cdt-unit { padding: 0; background: transparent; border: none; }

/* Style: boxed */
.pd-blk-cdt-style-boxed .pd-blk-cdt-sep { display: none; }
.pd-blk-cdt-style-boxed .pd-blk-cdt-unit {
    padding: var(--pd-blk-cdt-pad) calc(var(--pd-blk-cdt-pad) + 4px);
    /* --pd-cdt-surface = the panel's global Background colour picker; falls
       back to the theme's neutral boxed tint when unset. */
    background: var(--pd-cdt-surface, var(--pd-blk-cdt-bg));
    border: 1px solid color-mix(in srgb, var(--pd-link-color, #89b4fa) 25%, transparent);
    border-radius: var(--pd-blk-cdt-radius);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* Style: pills */
.pd-blk-cdt-style-pills .pd-blk-cdt-sep { display: none; }
.pd-blk-cdt-style-pills .pd-blk-cdt-unit {
    padding: var(--pd-blk-cdt-pad) calc(var(--pd-blk-cdt-pad) + 12px);
    /* --pd-cdt-surface = the panel's global Background colour picker; falls
       back to the theme accent when unset. */
    background: var(--pd-cdt-surface, var(--pd-blk-cdt-accent));
    color: inherit; /* v3.7.19 — General Text colour, not admin token */
    border-radius: 999px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--pd-link-color, #89b4fa) 25%, transparent);
}
.pd-blk-cdt-style-pills .pd-blk-cdt-num,
.pd-blk-cdt-style-pills .pd-blk-cdt-label { color: var(--pd-btn-color, #fff); } /* v3.7.23 — on-accent text (theme's button-text colour), no hardcoded colour */

/* Alignment (panel: Display → Alignment, via the PD_ALIGN_TOOL SoT).
   Attribute-driven (not a runtime class) so it serialises to the published
   page exactly like every other data-pd-cdt-* setting. Higher specificity
   (0,2,0) than the base .pd-blk-cdt rule (0,1,0), so no !important needed.
   Unset / empty attr matches nothing here, so the timer falls back to the
   base rule (align-items: var(--pd-general-justify)) and keeps following the
   Global Theme's General Text Align. */
.pd-blk-cdt[data-pd-cdt-align="left"]   { align-items: flex-start; }
.pd-blk-cdt[data-pd-cdt-align="center"] { align-items: center; }
.pd-blk-cdt[data-pd-cdt-align="right"]  { align-items: flex-end; }

/* Label position */
.pd-blk-cdt-labelpos-hidden .pd-blk-cdt-label { display: none; }
.pd-blk-cdt-labelpos-inline .pd-blk-cdt-unit  { flex-direction: row; gap: 6px; align-items: baseline; }
.pd-blk-cdt-labelpos-inline .pd-blk-cdt-label { margin-top: 0; }

/* Expired state */
.pd-blk-cdt-expired {
    padding: 16px 20px;
    background: rgba(220, 38, 38, 0.12); /* v3.7.19 — error red, no admin token */
    border: 1px solid #dc2626;
    border-radius: var(--pd-blk-cdt-radius);
    color: #dc2626;
    font-weight: 600;
    text-align: center;
}

/* Editor canvas only — stripped at save by GrapesJS data-gjs-* removal */
[data-gjs-type="pd-cd-timer"] {
    padding: 6px;
    margin: 4px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .pd-blk-cdt {
        --pd-blk-cdt-num-size: 32px;
        --pd-blk-cdt-pad: 12px;
        --pd-blk-cdt-gap: 10px;
    }
    .pd-blk-cdt-unit { min-width: 56px; }
}
@media (max-width: 480px) {
    .pd-blk-cdt {
        --pd-blk-cdt-num-size: 24px;
        --pd-blk-cdt-pad: 8px;
        --pd-blk-cdt-gap: 6px;
    }
    .pd-blk-cdt-unit { min-width: 44px; }
    .pd-blk-cdt-label { font-size: 10px; letter-spacing: 1px; }
}