/*
Theme Name:   HourlyBytes (WPLMS Child)
Theme URI:    https://hourlybytes.com
Description:  Light, Piynex-inspired aesthetic for HourlyBytes — live 60-minute AI courses. Manrope font, blue→purple gradient brand. Child theme of WPLMS.
Author:       HourlyBytes
Author URI:   https://hourlybytes.com
Template:     wplms
Version:      1.5.0
License:      GPL v2 or later
Text Domain:  hourlybytes
*/

/* Pull parent WPLMS styles first */
@import url("../wplms/style.css");

/* =========================================================
   HOURLYBYTES — PIYNEX-INSPIRED LIGHT THEME
   Light, soft-lavender background. Manrope display + body.
   Brand: blue→purple gradient, primary blue #2347E5.
   Variable names retained from prior dark theme so existing
   selectors keep working — values are simply re-mapped to the
   new light palette.
   ========================================================= */

:root {
    /* Surfaces */
    --hb-midnight: #F7F7FB;   /* page background (was dark — now off-white) */
    --hb-deep:     #F4F5F9;   /* alt section bg / footer */
    --hb-card:     #FFFFFF;   /* card surface */
    --hb-card-tint:#F8FAFF;   /* alt card bg with faint blue */

    /* Brand */
    --hb-blue:     #2347E5;   /* primary brand blue */
    --hb-blue-2:   #3B5BFF;   /* gradient stop 2 */
    --hb-purple:   #7C3AED;   /* gradient stop 3 */
    --hb-teal:     #7C3AED;   /* legacy alias — now mapped to brand purple */
    --hb-grad:     linear-gradient(135deg, #2347E5 0%, #4C5BFF 50%, #7C3AED 100%);
    --hb-grad-soft:linear-gradient(135deg, rgba(35,71,229,0.08), rgba(124,58,237,0.08));

    /* Status */
    --hb-green:    #16A34A;
    --hb-amber:    #FFC640;   /* Piynex highlight yellow */
    --hb-red:      #EF4444;

    /* Type */
    --hb-light:    #0F172A;   /* primary text — near-black ink */
    --hb-text-2:   #475569;   /* secondary text */
    --hb-muted:    #64748B;   /* tertiary / muted */
    --hb-faint:    #94A3B8;   /* very muted */

    /* Lines */
    --hb-border:   #E5E9FF;   /* primary border (light blue tint) */
    --hb-border-2: #E5E7EB;   /* neutral border */

    /* Type families — single Manrope family, just different weights. */
    --hb-mono:     'Manrope', system-ui, -apple-system, sans-serif;
    --hb-sans:     'Manrope', system-ui, -apple-system, sans-serif;

    /* Geometry */
    --hb-radius:    16px;
    --hb-radius-sm: 10px;
    --hb-shadow:    0 4px 12px rgba(35, 71, 229, 0.08);
    --hb-shadow-lg: 0 12px 32px rgba(35, 71, 229, 0.12);
}

/* Fonts — Manrope is enqueued from Google Fonts in functions.php */
body,
body.home,
body.hb-dark {
    background: var(--hb-midnight);
    color: var(--hb-light);
    font-family: var(--hb-sans);
    font-size: 15px;
    line-height: 1.6;
}

/* Standalone landing page — emitted by page-hourlybytes-home.php
   without get_header()/get_footer(). Force full-viewport block layout
   so WPLMS parent-theme body rules (flex sidebars, margin-left chrome,
   max-width constraints) can't shift our nav/hero to one side. */
body.hb-standalone {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    float: none !important;
    position: static !important;
    left: 0 !important;
    right: 0 !important;
}
body.hb-standalone,
body.hb-standalone * {
    box-sizing: border-box;
}
/* The nav must claim full viewport width because WPLMS parent-theme
   rules on the bare <nav> element would otherwise shrink it. Other
   sections use their own natural centered max-widths. */
body.hb-standalone > .hb-nav {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}
/* Admin bar handling: push content down so the WP admin bar doesn't
   cover the sticky HourlyBytes nav. */
body.hb-standalone #wpadminbar { position: fixed; }
body.hb-standalone.admin-bar { margin-top: 32px !important; }
@media (max-width: 782px) {
    body.hb-standalone.admin-bar { margin-top: 46px !important; }
}

/* Override WPLMS/Bootstrap white backgrounds on main containers */
#wrapper,
#main,
.site-content,
.woocommerce,
.bp-wrap,
.page-content,
.entry-content {
    background: var(--hb-midnight) !important;
    color: var(--hb-light);
}

a { color: var(--hb-blue); text-decoration: none; }
a:hover { color: var(--hb-teal); }

h1, h2, h3, h4, h5, h6 {
    color: var(--hb-light);
    font-family: var(--hb-sans);
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* ===================== NAV ===================== */
.hb-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 40px;
    border-bottom: 0.5px solid var(--hb-border);
    position: sticky; top: 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    z-index: 100;
}
.hb-logo { font-family: var(--hb-mono); font-size: 19px; font-weight: 700; color: var(--hb-light); }
.hb-logo span { color: var(--hb-blue); }
.hb-nav-right { display: flex; align-items: center; gap: 14px; }

.hb-live-pill {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,107,107,0.12);
    border: 0.5px solid rgba(255,107,107,0.3);
    color: var(--hb-red); font-size: 11px; font-weight: 700;
    padding: 5px 12px; border-radius: 20px; letter-spacing: 1px;
}
.hb-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hb-red); animation: hb-blink 1.4s infinite; }
@keyframes hb-blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

.hb-nav-cta {
    background: var(--hb-blue); color: #ffffff; border: none;
    padding: 10px 20px; border-radius: 6px;
    font-family: var(--hb-sans); font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none; display: inline-block;
}
.hb-nav-cta:hover,
.hb-nav-cta:visited,
.hb-nav-cta:focus { background: #1f3ed4; color: #ffffff; }

/* ===================== HERO ===================== */
.hb-hero {
    padding: 72px 40px 60px; text-align: center;
    background: radial-gradient(ellipse at 50% 20%, rgba(35,71,229,0.06) 0%, transparent 65%);
}
.hb-eyebrow { font-family: var(--hb-mono); font-size: 11px; color: var(--hb-teal); letter-spacing: 3px; margin-bottom: 18px; }
.hb-hero h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 600; line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 16px; }
.hb-hero h1 em { font-style: normal; color: var(--hb-blue); }
.hb-hero-sub { color: var(--hb-muted); font-size: 16px; max-width: 500px; margin: 0 auto 48px; }

/* ===================== COURSES GRID ===================== */
.hb-courses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 40px 80px;
}

.hb-card { border-radius: 16px; overflow: hidden; background: var(--hb-card); }
.hb-card.is-live { border: 0.5px solid rgba(35,71,229,0.30); }
.hb-card.is-wait { border: 0.5px solid var(--hb-border); }

.hb-banner-live {
    background: linear-gradient(90deg, rgba(35,71,229,0.15), rgba(124,58,237,0.08));
    padding: 10px 20px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 0.5px solid rgba(35,71,229,0.15);
    flex-wrap: wrap; gap: 6px;
}
.hb-banner-live__l { display: flex; align-items: center; gap: 8px; font-family: var(--hb-mono); font-size: 11px; color: var(--hb-blue); font-weight: 700; letter-spacing: 1px; }
.hb-banner-live__r { font-family: var(--hb-mono); font-size: 11px; color: var(--hb-teal); }

.hb-banner-wait {
    background: linear-gradient(90deg, rgba(124,58,237,0.08), rgba(46,204,113,0.05));
    padding: 10px 20px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 0.5px solid var(--hb-border);
    flex-wrap: wrap; gap: 6px;
}
.hb-banner-wait__l { font-family: var(--hb-mono); font-size: 11px; color: var(--hb-teal); font-weight: 700; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.hb-wait-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hb-amber); animation: hb-blink 2s infinite; }

/* ===================== COUNTDOWN ===================== */
.hb-countdown {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 16px 20px;
    background: rgba(35,71,229,0.04);
    border-bottom: 0.5px solid var(--hb-border);
    flex-wrap: nowrap;
}
.hb-cd-block { text-align: center; flex: 1; min-width: 0; }
.hb-cd-num {
    font-family: var(--hb-mono); font-size: clamp(18px, 3vw, 26px); font-weight: 700; color: var(--hb-light);
    background: rgba(35,71,229,0.08);
    border: 0.5px solid rgba(35,71,229,0.15);
    border-radius: 8px;
    padding: 8px 4px;
    display: block; width: 100%;
}
.hb-cd-label { font-size: 9px; color: var(--hb-muted); margin-top: 5px; letter-spacing: 1px; }
.hb-cd-sep { font-family: var(--hb-mono); font-size: 20px; color: var(--hb-blue); opacity: 0.5; flex-shrink: 0; margin-bottom: 16px; }

/* ===================== CARD BODY ===================== */
.hb-body { padding: 20px; }
.hb-track { font-family: var(--hb-mono); font-size: 10px; color: var(--hb-blue); letter-spacing: 2px; margin-bottom: 12px; }
.hb-track.teal { color: var(--hb-teal); }

.hb-icon-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hb-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hb-mono); font-size: 12px; font-weight: 700;
    flex-shrink: 0;
}
.hb-icon.blue { background: rgba(35,71,229,0.08); color: var(--hb-blue); }
.hb-icon.teal { background: rgba(124,58,237,0.08); color: var(--hb-teal); }

.hb-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--hb-light); margin: 0; }
.hb-desc  { font-size: 13px; color: var(--hb-muted); line-height: 1.7; margin-bottom: 16px; }

/* Pills */
.hb-pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.hb-pill { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 500; }
.hb-pill.blue  { background: rgba(35,71,229,0.08); color: var(--hb-blue); }
.hb-pill.teal  { background: rgba(124,58,237,0.08); color: var(--hb-teal); }
.hb-pill.green { background: rgba(46,204,113,0.12); color: var(--hb-green); }
.hb-pill.amber { background: rgba(245,166,35,0.12); color: var(--hb-amber); }
.hb-pill.red   { background: rgba(255,107,107,0.12); color: var(--hb-red); }

/* Curriculum */
.hb-curr { border-top: 0.5px solid var(--hb-border); padding: 16px 20px; }
.hb-curr-head { font-size: 10px; color: var(--hb-muted); letter-spacing: 1px; margin-bottom: 12px; }
.hb-curr-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 0.5px solid var(--hb-border); }
.hb-curr-row:last-child { border: none; }
.hb-cn { font-family: var(--hb-mono); font-size: 10px; color: var(--hb-muted); min-width: 18px; margin-top: 2px; }
.hb-ct { font-size: 13px; color: var(--hb-text-2); flex: 1; }
.hb-ctime { font-family: var(--hb-mono); font-size: 10px; color: var(--hb-muted); white-space: nowrap; }

/* Price + CTA */
.hb-price-cta { padding: 16px 20px 20px; }
.hb-price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hb-price-amt { font-family: var(--hb-mono); font-size: 30px; font-weight: 700; color: var(--hb-light); }
.hb-price-note { font-size: 12px; color: var(--hb-muted); }
.hb-price-original { font-family: var(--hb-mono); font-size: 14px; color: #94A3B8; text-decoration: line-through; }
.hb-seats { font-size: 12px; color: var(--hb-amber); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.hb-seat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hb-amber); }

.hb-btn-live,
.hb-courses button[type="submit"],
.woocommerce .single_add_to_cart_button,
.woocommerce a.button.alt {
    width: 100%; padding: 14px; border-radius: 8px;
    background: var(--hb-blue) !important; color: #fff !important;
    border: none; font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: var(--hb-sans);
}
.hb-btn-live:hover { opacity: 0.9; }

.hb-rp { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.hb-rp span { font-size: 11px; color: #94A3B8; }
.hb-rp .rpbadge { background: #2f74eb; color: #ffffff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }

/* Waitlist teaser + form */
.hb-tease { padding: 16px 20px; border-bottom: 0.5px solid var(--hb-border); position: relative; }
.hb-tease-curr { opacity: 0.3; filter: blur(2px); pointer-events: none; }
.hb-tease-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.hb-lock { font-size: 22px; }
.hb-lock-msg { font-family: var(--hb-mono); font-size: 11px; color: var(--hb-teal); letter-spacing: 1px; }

.hb-wform { padding: 16px 20px 20px; border-top: 0.5px solid var(--hb-border); }
.hb-wform-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--hb-light); }
.hb-wform-sub   { font-size: 12px; color: var(--hb-muted); margin-bottom: 14px; }
.hb-winput {
    width: 100%; background: var(--hb-midnight);
    border: 0.5px solid #3a3a5a; border-radius: 8px;
    padding: 11px 14px; color: var(--hb-light);
    font-family: var(--hb-sans); font-size: 13px;
    outline: none; margin-bottom: 8px;
}
.hb-winput:focus { border-color: var(--hb-teal); }
.hb-winput::placeholder { color: #94A3B8; }
.hb-wbtn {
    width: 100%; padding: 12px; border-radius: 8px;
    background: transparent; color: var(--hb-teal);
    border: 0.5px solid var(--hb-teal);
    font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: var(--hb-sans);
}
.hb-wperks { display: flex; gap: 14px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.hb-wperk { font-size: 11px; color: var(--hb-muted); display: flex; gap: 5px; }
.hb-wperk b { color: var(--hb-green); }

/* Social proof */
.hb-social { background: var(--hb-deep); padding: 48px 40px; text-align: center; border-top: 0.5px solid var(--hb-border); }
.hb-social p { font-size: 13px; color: var(--hb-muted); margin-bottom: 16px; font-family: var(--hb-mono); }
.hb-avatars { display: flex; justify-content: center; align-items: center; margin-bottom: 12px; }
.hb-av {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid var(--hb-midnight);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hb-mono); font-size: 11px; font-weight: 700;
    margin-left: -8px;
}
.hb-av:first-child { margin-left: 0; }
.hb-av-1 { background: rgba(35,71,229,0.18); color: var(--hb-blue); }
.hb-av-2 { background: rgba(124,58,237,0.18); color: var(--hb-teal); }
.hb-av-3 { background: rgba(46,204,113,0.3); color: var(--hb-green); }
.hb-av-4 { background: rgba(245,166,35,0.3); color: var(--hb-amber); }
.hb-av-5 { background: rgba(255,107,107,0.3); color: var(--hb-red); }
.hb-av-more { background: #2a2a4a; color: var(--hb-muted); font-size: 10px; }
.hb-social-count { font-size: 14px; color: var(--hb-light); font-weight: 500; }

/* Footer */
.hb-footer {
    padding: 24px 40px; border-top: 0.5px solid var(--hb-border);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
    background: var(--hb-midnight);
}
.hb-footer-logo { font-family: var(--hb-mono); font-size: 14px; font-weight: 700; color: var(--hb-light); }
.hb-footer-logo span { color: var(--hb-blue); }
.hb-footer-copy { font-size: 11px; color: #94A3B8; }
.hb-footer-links { display: flex; gap: 18px; }
.hb-footer-links a { font-size: 11px; color: var(--hb-muted); text-decoration: none; }
.hb-footer-links a:hover { color: var(--hb-teal); }

/* WooCommerce dark-mode overrides */
.woocommerce ul.products li.product,
.woocommerce div.product,
.woocommerce table.shop_table,
.woocommerce-checkout .form-row,
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--hb-card) !important;
    color: var(--hb-light) !important;
    border-color: var(--hb-border) !important;
}
.woocommerce-checkout #payment,
.woocommerce-cart .cart_totals {
    background: var(--hb-deep) !important;
    color: var(--hb-light) !important;
}
.woocommerce input.input-text,
.woocommerce-page input.input-text,
.woocommerce textarea {
    background: var(--hb-midnight) !important;
    color: var(--hb-light) !important;
    border: 0.5px solid #3a3a5a !important;
    border-radius: 8px !important;
}

/* Responsive */
@media (max-width: 640px) {
    .hb-nav     { padding: 14px 20px; }
    .hb-hero    { padding: 48px 20px 40px; }
    .hb-courses { padding: 0 20px 60px; }
    .hb-footer  { padding: 20px; flex-direction: column; text-align: center; }
    .hb-footer-links { justify-content: center; }
}

/* ============================================================================
   SITE-WIDE DARK COMPATIBILITY LAYER
   ============================================================================
   Applies on every page (body.hb-dark is set globally by the child theme's
   body_class filter). Targets common WPLMS, WooCommerce, BuddyPress, and
   generic WordPress surfaces so secondary pages (courses, checkout, my-account,
   blog, login/register) visually match the HourlyBytes landing page.

   Principles:
   - Only color + background + border overrides. No layout/sizing changes.
   - !important is used liberally because the parent theme's rules are
     high-specificity and sometimes inline. If a specific module breaks,
     target it surgically rather than relaxing this layer.
   ============================================================================ */

/* ---------- Top-level containers ---------- */
body.hb-dark,
body.hb-dark #page,
body.hb-dark #wrapper,
body.hb-dark #main,
body.hb-dark #primary,
body.hb-dark #content,
body.hb-dark .site,
body.hb-dark .site-content,
body.hb-dark .entry-content,
body.hb-dark .page-content,
body.hb-dark .woocommerce,
body.hb-dark .woocommerce-page,
body.hb-dark .woocommerce-account,
body.hb-dark .woocommerce-MyAccount-content,
body.hb-dark .woocommerce-checkout,
body.hb-dark .woocommerce-cart,
body.hb-dark .bp-wrap,
body.hb-dark .buddypress-wrap,
body.hb-dark .bb-wrap,
body.hb-dark .dashboard,
body.hb-dark .vibe-dashboard,
body.hb-dark .wplms-dashboard {
    background-color: var(--hb-midnight) !important;
    color: var(--hb-light) !important;
}

/* ---------- Headings, body text ---------- */
body.hb-dark h1,
body.hb-dark h2,
body.hb-dark h3,
body.hb-dark h4,
body.hb-dark h5,
body.hb-dark h6,
body.hb-dark .entry-title,
body.hb-dark .page-title,
body.hb-dark .woocommerce-MyAccount-navigation-link a,
body.hb-dark .woocommerce h2,
body.hb-dark .woocommerce h3 {
    color: var(--hb-light) !important;
}
body.hb-dark p,
body.hb-dark li,
body.hb-dark span,
body.hb-dark label,
body.hb-dark dd, body.hb-dark dt,
body.hb-dark .woocommerce-Address,
body.hb-dark .woocommerce-customer-details {
    color: var(--hb-light) !important;
}

/* ---------- Site header (WPLMS masthead) ---------- */
body.hb-dark #masthead,
body.hb-dark #header,
body.hb-dark .site-header,
body.hb-dark .main-header,
body.hb-dark .bb_header,
body.hb-dark #wplms-header,
body.hb-dark .header-wrap,
body.hb-dark .top-header,
body.hb-dark #top-bar {
    background-color: var(--hb-midnight) !important;
    border-bottom: 0.5px solid var(--hb-border) !important;
    color: var(--hb-light) !important;
    box-shadow: none !important;
}

/* ---------- Navigation menus ---------- */
body.hb-dark .main-navigation,
body.hb-dark .menu-primary-container,
body.hb-dark .primary-menu,
body.hb-dark nav.main-nav,
body.hb-dark #site-navigation,
body.hb-dark .nav-menu,
body.hb-dark #top-nav,
body.hb-dark .menu-item {
    background-color: transparent !important;
    color: var(--hb-light) !important;
}
body.hb-dark .main-navigation a,
body.hb-dark .menu-primary-container a,
body.hb-dark .primary-menu a,
body.hb-dark nav.main-nav a,
body.hb-dark #site-navigation a,
body.hb-dark .nav-menu a,
body.hb-dark #top-nav a,
body.hb-dark .menu-item a {
    color: var(--hb-light) !important;
}
body.hb-dark .main-navigation a:hover,
body.hb-dark .menu-primary-container a:hover,
body.hb-dark .primary-menu a:hover,
body.hb-dark .nav-menu a:hover,
body.hb-dark #top-nav a:hover,
body.hb-dark .menu-item a:hover,
body.hb-dark .current-menu-item > a {
    color: var(--hb-blue) !important;
}
/* Submenu backgrounds */
body.hb-dark .sub-menu,
body.hb-dark .children {
    background-color: var(--hb-deep) !important;
    border: 0.5px solid var(--hb-border) !important;
}

/* ---------- Sidebars & widgets ---------- */
body.hb-dark #sidebar,
body.hb-dark .sidebar,
body.hb-dark .widget-area,
body.hb-dark .widget {
    background-color: var(--hb-deep) !important;
    color: var(--hb-light) !important;
    border-color: var(--hb-border) !important;
}
body.hb-dark .widget-title,
body.hb-dark .widget h2,
body.hb-dark .widget h3 {
    color: var(--hb-light) !important;
}

/* ---------- Footer ---------- */
body.hb-dark #colophon,
body.hb-dark .site-footer,
body.hb-dark .footer,
body.hb-dark #footer,
body.hb-dark .footer-wrap,
body.hb-dark .site-info {
    background-color: var(--hb-deep) !important;
    color: var(--hb-light) !important;
    border-top: 0.5px solid var(--hb-border) !important;
}
body.hb-dark #colophon a,
body.hb-dark .site-footer a,
body.hb-dark .footer a,
body.hb-dark #footer a {
    color: var(--hb-blue) !important;
}

/* ---------- Cards / panels / boxes ---------- */
body.hb-dark .panel,
body.hb-dark .box,
body.hb-dark .card,
body.hb-dark .woocommerce ul.products li.product,
body.hb-dark .woocommerce-MyAccount-navigation,
body.hb-dark .woocommerce-MyAccount-navigation ul,
body.hb-dark .woocommerce-order-details,
body.hb-dark .woocommerce-customer-details,
body.hb-dark .cart_totals,
body.hb-dark .course-item,
body.hb-dark .unit-item,
body.hb-dark .curriculum-item,
body.hb-dark .section-item,
body.hb-dark .vibe-course-meta {
    background-color: var(--hb-card) !important;
    color: var(--hb-light) !important;
    border: 0.5px solid var(--hb-border) !important;
    border-radius: 10px !important;
}

/* ---------- Tables ---------- */
body.hb-dark table,
body.hb-dark .woocommerce table.shop_table {
    background-color: var(--hb-card) !important;
    border-color: var(--hb-border) !important;
}
body.hb-dark th,
body.hb-dark td,
body.hb-dark .woocommerce table.shop_table th,
body.hb-dark .woocommerce table.shop_table td {
    border-color: var(--hb-border) !important;
    color: var(--hb-light) !important;
}
body.hb-dark thead,
body.hb-dark .woocommerce table.shop_table thead {
    background-color: var(--hb-deep) !important;
}
body.hb-dark tbody tr:nth-child(even) {
    background-color: rgba(255,255,255,0.02) !important;
}

/* ---------- Forms ---------- */
body.hb-dark input[type="text"],
body.hb-dark input[type="email"],
body.hb-dark input[type="password"],
body.hb-dark input[type="tel"],
body.hb-dark input[type="url"],
body.hb-dark input[type="search"],
body.hb-dark input[type="number"],
body.hb-dark input[type="date"],
body.hb-dark select,
body.hb-dark textarea,
body.hb-dark .woocommerce form .form-row input.input-text,
body.hb-dark .woocommerce form .form-row textarea,
body.hb-dark .woocommerce form .form-row select {
    background-color: var(--hb-deep) !important;
    color: var(--hb-light) !important;
    border: 0.5px solid var(--hb-border) !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
}
body.hb-dark input:focus,
body.hb-dark select:focus,
body.hb-dark textarea:focus {
    outline: 1px solid var(--hb-blue) !important;
    outline-offset: 0 !important;
    border-color: var(--hb-blue) !important;
}
body.hb-dark ::placeholder {
    color: var(--hb-muted) !important;
    opacity: 1 !important;
}

/* ---------- Buttons ---------- */
body.hb-dark button:not(.hb-nav-cta):not(.hb-btn-live):not(.hb-wbtn),
body.hb-dark input[type="submit"],
body.hb-dark .button,
body.hb-dark .wp-block-button__link,
body.hb-dark .woocommerce #respond input#submit,
body.hb-dark .woocommerce a.button,
body.hb-dark .woocommerce button.button,
body.hb-dark .woocommerce input.button,
body.hb-dark .woocommerce #place_order,
body.hb-dark .wplms-button {
    background-color: var(--hb-blue) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    transition: background-color 0.15s ease !important;
}
body.hb-dark button:hover:not(.hb-nav-cta):not(.hb-btn-live):not(.hb-wbtn),
body.hb-dark input[type="submit"]:hover,
body.hb-dark .button:hover,
body.hb-dark .woocommerce a.button:hover,
body.hb-dark .woocommerce button.button:hover,
body.hb-dark .woocommerce #place_order:hover {
    background-color: #3A85E0 !important;
    color: #fff !important;
}

/* ---------- Links (fallback) ---------- */
body.hb-dark a { color: var(--hb-blue); }
body.hb-dark a:hover { color: var(--hb-teal); }

/* HourlyBytes-branded clickable surfaces must keep their white text.
   They have their own colored backgrounds (blue/red/etc), so the
   generic body.hb-dark a coloring would render text invisible.
   This rule lives AFTER the link fallback so it wins on tie. */
body.hb-dark .hb-nav-cta,
body.hb-dark a.hb-nav-cta,
body.hb-dark .hb-btn-live,
body.hb-dark a.hb-btn-live,
body.hb-dark .hb-wbtn,
body.hb-dark .hb-logo,
body.hb-dark .hb-logo a,
body.hb-dark a.hb-logo {
    color: var(--hb-light) !important;
}
body.hb-dark .hb-nav-cta:hover,
body.hb-dark .hb-btn-live:hover,
body.hb-dark .hb-wbtn:hover,
body.hb-dark .hb-logo:hover,
body.hb-dark a.hb-logo:hover {
    color: var(--hb-light) !important;
}
body.hb-dark .hb-logo span,
body.hb-dark a.hb-logo span {
    color: var(--hb-blue) !important;
}

/* ---------- Blockquote ---------- */
body.hb-dark blockquote {
    background-color: var(--hb-deep);
    border-left: 3px solid var(--hb-blue);
    color: var(--hb-light);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
}

/* ---------- WooCommerce notices ---------- */
body.hb-dark .woocommerce-info,
body.hb-dark .woocommerce-message,
body.hb-dark .woocommerce-error,
body.hb-dark .woocommerce-notice {
    background-color: var(--hb-deep) !important;
    color: var(--hb-light) !important;
    border-top: 3px solid var(--hb-blue) !important;
    border-radius: 6px !important;
}
body.hb-dark .woocommerce-error { border-top-color: var(--hb-red) !important; }
body.hb-dark .woocommerce-message { border-top-color: var(--hb-green) !important; }

/* ---------- WPLMS course player ---------- */
body.hb-dark .course-single-bg,
body.hb-dark .course-player,
body.hb-dark .course-curriculum,
body.hb-dark .curriculum,
body.hb-dark .unit-content,
body.hb-dark .unit-sidebar,
body.hb-dark .single-course .content-area {
    background-color: var(--hb-midnight) !important;
    color: var(--hb-light) !important;
}

/* ---------- Horizontal rules ---------- */
body.hb-dark hr {
    border: none !important;
    border-top: 0.5px solid var(--hb-border) !important;
}

/* ---------- WPLMS page title strip overrides ---------- */
/* These render between the header and the main content on cart,
   checkout, my-account, blog, and similar pages. WPLMS uses a
   handful of class names depending on the layout setting. */
body.hb-dark .page-title-bar,
body.hb-dark .subheader,
body.hb-dark .breadcrumb-container,
body.hb-dark .bb_breadcrumb,
body.hb-dark .vibe-page-title,
body.hb-dark #page-title,
body.hb-dark .entry-banner,
body.hb-dark .breadcrumb-bar,
body.hb-dark .page-header,
body.hb-dark .entry-header,
body.hb-dark .vibebp-page-header,
body.hb-dark .bb-page-header {
    background: var(--hb-midnight) !important;
    color: var(--hb-light) !important;
    border-bottom: 0.5px solid var(--hb-border) !important;
    box-shadow: none !important;
}
body.hb-dark .page-title-bar h1,
body.hb-dark .subheader h1,
body.hb-dark .vibe-page-title h1,
body.hb-dark #page-title h1,
body.hb-dark .entry-header h1,
body.hb-dark .page-header h1 {
    color: var(--hb-light) !important;
}
body.hb-dark .breadcrumbs,
body.hb-dark .breadcrumb,
body.hb-dark .woocommerce-breadcrumb {
    color: var(--hb-muted) !important;
    background: transparent !important;
}
body.hb-dark .breadcrumbs a,
body.hb-dark .breadcrumb a,
body.hb-dark .woocommerce-breadcrumb a {
    color: var(--hb-blue) !important;
}

/* WPLMS sometimes renders a white block above content via these classes */
body.hb-dark .container-page-title,
body.hb-dark .page-title-wrap,
body.hb-dark .single-course .page-title-bar {
    background: var(--hb-midnight) !important;
}

/* WooCommerce cart/checkout container backgrounds */
body.hb-dark .woocommerce-cart-form,
body.hb-dark .woocommerce-checkout-payment,
body.hb-dark .woocommerce-checkout-review-order,
body.hb-dark .woocommerce-form-login,
body.hb-dark .woocommerce-form-register,
body.hb-dark form.checkout {
    background: var(--hb-midnight) !important;
    color: var(--hb-light) !important;
}

/* ---------- Kill the white frame around content ----------
   WPLMS + Visual Composer wrap page content in `.entry-content`,
   `.wpb_wrapper`, `.vc_column-inner` etc. with a white background and
   thick padding. That renders as a chunky white "frame" around our
   dark cart/checkout panels. Strip the chrome. */
body.hb-dark .entry-content,
body.hb-dark .page-content,
body.hb-dark .wpb_wrapper,
body.hb-dark .wpb_column,
body.hb-dark .vc_column-inner,
body.hb-dark .vc_row,
body.hb-dark .vc_row-fluid,
body.hb-dark .page-wrap-content,
body.hb-dark .post-wrap,
body.hb-dark article.page,
body.hb-dark article.post,
body.hb-dark article.type-page,
body.hb-dark article.type-post,
body.hb-dark .post,
body.hb-dark .hentry {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* The .woocommerce wrapper itself should be transparent so the body's
   midnight background bleeds through (overrides the earlier rule that
   set it to var(--hb-midnight) — they're equivalent visually but
   transparent lets gradients/parents shine through cleanly). */
body.hb-dark .woocommerce,
body.hb-dark .woocommerce-page {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================================
   WPLMS-SPECIFIC SURFACES (round 2)
   Added after observing the cart/checkout pages still had three light strips:
   the WPLMS page heading bar, the outer white content wrapper, and the grey
   WPLMS main-header (above the page heading).
   ============================================================================ */

/* ---------- WPLMS top utility bar + main header ---------- */
body.hb-dark .top-bar,
body.hb-dark .header-top,
body.hb-dark .pre-header,
body.hb-dark .top-header-bar,
body.hb-dark .header-bar,
body.hb-dark .main-header,
body.hb-dark .vibe-header,
body.hb-dark .main-header-wrap,
body.hb-dark .header-wrap,
body.hb-dark .header-middle,
body.hb-dark .header-bottom,
body.hb-dark .bb_header_wrap {
    background-color: var(--hb-midnight) !important;
    color: var(--hb-light) !important;
    border-color: var(--hb-border) !important;
    box-shadow: none !important;
}
body.hb-dark .top-bar a,
body.hb-dark .header-top a,
body.hb-dark .main-header a,
body.hb-dark .header-wrap a {
    color: var(--hb-light) !important;
}

/* ---------- WPLMS page heading / title bar ----------
   This is the strip right below the header that shows the page title
   ("Cart", "My Account", "Checkout", etc.) and breadcrumbs. WPLMS
   uses several class names for this across its templates. */
body.hb-dark .page-heading,
body.hb-dark .page-heading-wrap,
body.hb-dark .wplms-page-heading,
body.hb-dark .vibe-page-heading,
body.hb-dark .page-title-wrap,
body.hb-dark .page-title-bar,
body.hb-dark .page-banner,
body.hb-dark .bb-page-heading,
body.hb-dark .entry-header,
body.hb-dark .heading-wrap,
body.hb-dark .page-heading-inner,
body.hb-dark .title-bar,
body.hb-dark .course-heading,
body.hb-dark .archive-heading {
    background-color: var(--hb-midnight) !important;
    background-image: none !important;
    color: var(--hb-light) !important;
    border-bottom: 0.5px solid var(--hb-border) !important;
}
body.hb-dark .page-heading h1,
body.hb-dark .page-heading h2,
body.hb-dark .wplms-page-heading h1,
body.hb-dark .vibe-page-heading h1,
body.hb-dark .page-title-wrap h1,
body.hb-dark .page-banner h1,
body.hb-dark .entry-header h1,
body.hb-dark .entry-title {
    color: var(--hb-light) !important;
}

/* ---------- Breadcrumbs ---------- */
body.hb-dark .breadcrumb,
body.hb-dark .breadcrumbs,
body.hb-dark .woocommerce-breadcrumb,
body.hb-dark .yoast-breadcrumb,
body.hb-dark .rank-math-breadcrumb,
body.hb-dark #breadcrumbs {
    background-color: transparent !important;
    color: var(--hb-muted) !important;
}
body.hb-dark .breadcrumb a,
body.hb-dark .breadcrumbs a,
body.hb-dark .woocommerce-breadcrumb a {
    color: var(--hb-blue) !important;
}

/* ---------- Outer content wrappers (the "big white rectangle") ----------
   On cart/checkout/my-account, WPLMS/WooCommerce wraps the body in one
   of these containers with an inherited light background. Force them
   transparent so the body's midnight color shows through. */
body.hb-dark .container,
body.hb-dark .container-fluid,
body.hb-dark .main-container,
body.hb-dark .row,
body.hb-dark .content-wrap,
body.hb-dark .content-area,
body.hb-dark .inner-wrap,
body.hb-dark .single-content,
body.hb-dark .page-wrap,
body.hb-dark .site-main,
body.hb-dark .woocommerce-cart-form,
body.hb-dark .woocommerce-cart-form__contents,
body.hb-dark .cart-collaterals,
body.hb-dark .cart_totals,
body.hb-dark .woocommerce-checkout-review-order,
body.hb-dark .wc-block-components-main,
body.hb-dark .woocommerce-notices-wrapper,
body.hb-dark .bbp-breadcrumb,
body.hb-dark .col-sm-12,
body.hb-dark .col-md-12,
body.hb-dark [class^="col-"],
body.hb-dark [class*=" col-"] {
    background-color: transparent !important;
    background-image: none !important;
}

/* Re-apply card bg specifically on cart_totals since we just nuked it above */
body.hb-dark .cart_totals,
body.hb-dark .cart-totals {
    background-color: var(--hb-card) !important;
    border: 0.5px solid var(--hb-border) !important;
    border-radius: 10px !important;
    padding: 20px !important;
}

/* ---------- WPLMS/generic "boxed" content regions that commonly have
             a hardcoded white bg (e.g. cart page main, page.php default) ---------- */
body.hb-dark .page-content-wrap,
body.hb-dark .post-content-wrap,
body.hb-dark .entry-content-wrap,
body.hb-dark .single-page-content,
body.hb-dark .wplms-content,
body.hb-dark .vibe-content,
body.hb-dark .shop_table_wrap,
body.hb-dark .cart-wrap,
body.hb-dark .checkout-wrap {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ---------- Footer (grey strip at the bottom) ---------- */
body.hb-dark .footer-wrap,
body.hb-dark .footer-inner,
body.hb-dark .footer-widgets,
body.hb-dark .site-info,
body.hb-dark .footer-bottom,
body.hb-dark .footer-top,
body.hb-dark .copyright-wrap,
body.hb-dark .copyright-bar {
    background-color: var(--hb-deep) !important;
    color: var(--hb-light) !important;
    border-top: 0.5px solid var(--hb-border) !important;
}
body.hb-dark .footer-wrap a,
body.hb-dark .site-info a,
body.hb-dark .copyright-wrap a {
    color: var(--hb-blue) !important;
}

/* =========================================================
   PIYNEX-INSPIRED ADDITIONS
   Gradient buttons, gradient hero text, soft card shadows,
   recommended-pill, light footer.
   ========================================================= */

/* Gradient CTA — applies to nav CTA and "Book Live Seat" buttons.
   Covers :visited and :focus too so WordPress's default link colors
   don't re-paint the text purple/dark-blue and lose contrast. */
.hb-nav-cta,
a.hb-nav-cta,
a.hb-nav-cta:link,
a.hb-nav-cta:visited,
.hb-btn-live,
a.hb-btn-live,
a.hb-btn-live:link,
a.hb-btn-live:visited,
.hb-btn-primary,
a.hb-btn-primary,
a.hb-btn-primary:link,
a.hb-btn-primary:visited {
    background: var(--hb-grad) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(35,71,229,0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    font-weight: 600;
    text-shadow: none;
}
.hb-nav-cta:hover,
a.hb-nav-cta:hover,
.hb-nav-cta:focus,
a.hb-nav-cta:focus,
.hb-btn-live:hover,
a.hb-btn-live:hover,
.hb-btn-live:focus,
a.hb-btn-live:focus,
.hb-btn-primary:hover,
a.hb-btn-primary:hover,
.hb-btn-primary:focus,
a.hb-btn-primary:focus {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(35,71,229,0.28);
    opacity: 1;
}
/* Make sure any inner span/em inside a CTA also stays white. */
.hb-nav-cta *, a.hb-nav-cta *,
.hb-btn-live *, a.hb-btn-live *,
.hb-btn-primary *, a.hb-btn-primary * {
    color: #ffffff !important;
}

/* Hero gradient text accent — words wrapped in <em> inside .hb-hero h1 */
.hb-hero h1 em {
    background: var(--hb-grad);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    font-style: normal;
    font-weight: 700;
}

/* Card surfaces — soft white with light blue border + subtle shadow */
.hb-card {
    background: var(--hb-card) !important;
    border: 1px solid var(--hb-border) !important;
    box-shadow: var(--hb-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.hb-card:hover {
    box-shadow: var(--hb-shadow-lg);
    transform: translateY(-2px);
    border-color: rgba(35,71,229,0.25) !important;
}
.hb-card.is-live {
    background: linear-gradient(180deg, var(--hb-card-tint) 0%, var(--hb-card) 60%) !important;
    border-color: rgba(35,71,229,0.30) !important;
}

/* Recommended / Best-value pill (Piynex amber capsule) */
.hb-pill.recommended,
.hb-recommended {
    background: var(--hb-amber) !important;
    color: #1F2937 !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    text-transform: uppercase;
    font-size: 10.5px !important;
    box-shadow: 0 2px 6px rgba(255,198,64,0.35);
}

/* Section eyebrow (the "// HOW IT WORKS" Piynex caption-style) */
.hb-eyebrow {
    color: var(--hb-blue);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

/* Pricing section / footer surface tone */
.hb-section,
.hb-section-alt {
    background: var(--hb-deep);
}
.hb-section { background: var(--hb-midnight); }

/* Form fields — light surface with blue focus ring (Piynex feel) */
.hb-wform input[type="text"],
.hb-wform input[type="email"],
.hb-waitlist input[type="text"],
.hb-waitlist input[type="email"],
input[type="text"].hb-input,
input[type="email"].hb-input {
    background: #FFFFFF !important;
    color: var(--hb-light) !important;
    border: 1px solid var(--hb-border) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-family: var(--hb-sans) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hb-wform input:focus,
.hb-waitlist input:focus,
input.hb-input:focus {
    outline: none !important;
    border-color: var(--hb-blue) !important;
    box-shadow: 0 0 0 3px rgba(35,71,229,0.12) !important;
}

/* Waitlist submit button — gradient pill */
.hb-wbtn {
    background: var(--hb-grad) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    font-family: var(--hb-sans) !important;
    font-weight: 600 !important;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(35,71,229,0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hb-wbtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(35,71,229,0.28);
}
.hb-wbtn:disabled { opacity: 0.7; transform: none; cursor: wait; }

/* Footer links — Piynex uses muted ink with brand blue on hover */
body.hb-dark .footer-wrap a,
body.hb-dark .site-info a,
body.hb-dark .copyright-wrap a {
    color: var(--hb-text-2) !important;
}
body.hb-dark .footer-wrap a:hover,
body.hb-dark .site-info a:hover,
body.hb-dark .copyright-wrap a:hover {
    color: var(--hb-blue) !important;
}

/* Live red dot — keep brand red, but slightly bigger on Piynex layout */
.hb-live-dot {
    box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}


/* =========================================================
   BUTTON TEXT VISIBILITY — belt & suspenders
   The light Piynex theme paints most buttons with the brand
   gradient or solid blue. We force WHITE text on every flavor
   we ship + every WC button we render through, covering the
   :link/:hover/:focus/:visited states so WordPress's default
   visited-link colors can't repaint them dark on dark.
   ========================================================= */
.hb-nav-cta,
.hb-nav-cta:link,
.hb-nav-cta:visited,
.hb-nav-cta:hover,
.hb-nav-cta:focus,
.hb-nav-cta:active,
.hb-btn-live,
.hb-btn-live:link,
.hb-btn-live:visited,
.hb-btn-live:hover,
.hb-btn-live:focus,
.hb-btn-live:active,
.hb-btn-primary,
.hb-btn-primary:link,
.hb-btn-primary:visited,
.hb-btn-primary:hover,
.hb-btn-primary:focus,
.hb-btn-primary:active,
.hb-wbtn,
.hb-wbtn:link,
.hb-wbtn:visited,
.hb-wbtn:hover,
.hb-wbtn:focus,
.hb-wbtn:active,
.hb-courses .hb-card button[type="submit"],
.woocommerce .single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.checkout-button,
.woocommerce-button,
.wc-block-components-button,
.woocommerce-MyAccount-content .button,
.woocommerce a.button.alt:link,
.woocommerce a.button.alt:visited,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce a.button:link,
.woocommerce a.button:visited,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce-MyAccount-content .button:link,
.woocommerce-MyAccount-content .button:visited,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .button:focus,
button.hb-btn,
input[type="submit"].hb-btn,
a.hb-btn,
a.hb-btn:link,
a.hb-btn:visited,
a.hb-btn:hover,
a.hb-btn:focus {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Keep inner spans/em white too — Piynex sometimes wraps icon text */
.hb-nav-cta *,
.hb-btn-live *,
.hb-btn-primary *,
.hb-wbtn *,
.woocommerce a.button *,
.woocommerce button.button *,
.woocommerce a.button.alt *,
.woocommerce-MyAccount-content .button * {
    color: inherit !important;
}

/* OUTLINE / GHOST buttons — text is brand blue, not white. Carve them
   out so the blanket rule above doesn't make them invisible. */
.hb-btn-ghost,
a.hb-btn-ghost,
.hb-btn-outline,
a.hb-btn-outline {
    color: var(--hb-blue) !important;
    background: transparent !important;
    border: 1px solid var(--hb-blue) !important;
    box-shadow: none !important;
}
.hb-btn-ghost:hover,
a.hb-btn-ghost:hover,
.hb-btn-outline:hover,
a.hb-btn-outline:hover {
    background: rgba(35,71,229,0.06) !important;
    color: var(--hb-blue) !important;
}

/* =========================================================
   LOGO — force solid colors so WPLMS / parent themes can't
   recolor the [HB] mark to white-on-white.
   ========================================================= */
a.hb-logo,
.hb-logo,
.hb-logo:link,
.hb-logo:visited,
.hb-logo:hover {
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    background: none !important;
    text-decoration: none !important;
}
.hb-logo span,
a.hb-logo span,
.hb-footer-logo span {
    color: #2347E5 !important;
    -webkit-text-fill-color: #2347E5 !important;
    background: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}
.hb-footer-logo,
a.hb-footer-logo,
.hb-footer-logo:link,
.hb-footer-logo:visited {
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    background: none !important;
}

/* =========================================================
   COUNTDOWN — defensive visibility for every unit. WPLMS or
   parent theme rules can occasionally hide flex children with
   weird min-width:0 + overflow rules; force every cd-block to
   render every unit's number.
   ========================================================= */
.hb-countdown .hb-cd-block,
.hb-countdown .hb-cd-num,
.hb-countdown .hb-cd-label,
.hb-countdown [data-unit] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.hb-countdown {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.hb-countdown .hb-cd-block {
    flex: 1 1 0 !important;
    min-width: 50px !important;
}