/* Bazarmela countdown styles (homepage deal sections + their previews in Theme settings).
   The timer sits on a coloured band (default) or, with .bm-tm-light, on a light background.
   --tm-a = accent colour (the section colour), --tm-h = height of one block (the button next to it uses the same). */
.bm-tm{--tm-a:var(--d1,#dc2626);display:flex;align-items:center;gap:10px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.bm-tm__lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;max-width:64px;line-height:1.2;opacity:.95}
.bm-tm__clock{display:flex;align-items:center;gap:4px}
.bm-tm__u{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:46px;height:var(--tm-h,48px);padding:0 5px;box-sizing:border-box}
.bm-tm__u b{font-size:20px;font-weight:800;line-height:1}
.bm-tm__u i{font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:3px;opacity:.8}
.bm-tm__c{font-size:18px;font-weight:800;opacity:.85;margin:0 1px}

/* 1. Tiles: white blocks, coloured numbers */
.bm-tm--tiles .bm-tm__u{background:#fff;color:var(--tm-a);border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.bm-tm--tiles .bm-tm__u i{color:#6b7280;opacity:1}
/* 2. Dark: black blocks like a flip clock */
.bm-tm--dark .bm-tm__u{background:#111827;color:#fff;border-radius:8px;box-shadow:inset 0 -2px 0 rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.25);position:relative}
.bm-tm--dark .bm-tm__u::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.12)}
/* 3. Outline: see-through blocks with a white border */
.bm-tm--outline .bm-tm__u{border:2px solid rgba(255,255,255,.85);border-radius:10px;color:#fff}
/* 4. Pill: one compact pill (ends-in text + 05:42:18) */
.bm-tm--pill{gap:0;background:#fff;color:var(--tm-a);border-radius:999px;height:var(--tm-h,40px);padding:0 16px 0 14px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.bm-tm--pill .bm-tm__lbl{max-width:none;margin-right:10px;color:#374151;font-size:11.5px}
.bm-tm--pill .bm-tm__clock{gap:0}
.bm-tm--pill .bm-tm__u{min-width:0;height:auto;padding:0}
.bm-tm--pill .bm-tm__u b{font-size:18px}
.bm-tm--pill .bm-tm__u i{display:none}
.bm-tm--pill .bm-tm__c{font-size:17px;margin:0 2px}
/* 5. Circles */
.bm-tm--circle .bm-tm__u{width:var(--tm-h,52px);height:var(--tm-h,52px);min-width:0;padding:0;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.9)}
.bm-tm--circle .bm-tm__u b{font-size:18px}
.bm-tm--circle .bm-tm__u i{font-size:8.5px}
.bm-tm--circle .bm-tm__c{display:none}
.bm-tm--circle .bm-tm__clock{gap:6px}
/* 6. Minimal: big numbers, no blocks */
.bm-tm--minimal .bm-tm__u{min-width:0;padding:0 2px}
.bm-tm--minimal .bm-tm__u b{font-size:26px}
.bm-tm--minimal .bm-tm__c{font-size:22px;align-self:flex-start;margin-top:4px}

/* On a light background (the "Light box" section look) */
.bm-tm-light .bm-tm{color:var(--tm-a)}
.bm-tm-light .bm-tm__lbl{color:#4b5563}
.bm-tm-light .bm-tm--tiles .bm-tm__u{background:var(--tm-a);color:#fff}
.bm-tm-light .bm-tm--tiles .bm-tm__u i{color:rgba(255,255,255,.85)}
.bm-tm-light .bm-tm--outline .bm-tm__u{border-color:var(--tm-a);color:var(--tm-a)}
.bm-tm-light .bm-tm--pill{background:var(--tm-a);color:#fff}
.bm-tm-light .bm-tm--pill .bm-tm__lbl{color:rgba(255,255,255,.9)}
.bm-tm-light .bm-tm--circle .bm-tm__u{background:#fff;border-color:var(--tm-a);color:var(--tm-a)}

@media (max-width:640px){
	.bm-tm{gap:8px}
	.bm-tm__u{min-width:40px}
	.bm-tm__u b{font-size:17px}
	.bm-tm--minimal .bm-tm__u b{font-size:22px}
	.bm-tm--pill{padding:0 12px}
}