:root{--glx-safe-pad: 16px;}
.glx-countdown{
  --bg: var(--glx-bg, #0a0a0a);
  --text: var(--glx-text, #ffffff);
  --accent: var(--glx-accent, #4190de);
  --btn-bg: var(--glx-btn-bg, #4190de);
  --btn-text: var(--glx-btn-text, #ffffff);
  --headline-size: var(--headline-size, 28px);
  --light-size: var(--light-size, 18px);
  --button-size: var(--button-size, 16px);

  background: var(--bg);
  color: var(--text);
  width: 100vw;
  margin-left: calc(50% - 50vw); /* full-bleed even inside containers */
  margin-right: calc(50% - 50vw);
  padding: 12px var(--glx-safe-pad);
  position: relative;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.glx-countdown .glx-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  max-width: 1600px; margin: 0 auto;
}

.glx-headline{font-size: var(--headline-size); margin: 0; letter-spacing: .2px; font-weight: 800}
.glx-light-head{font-size: var(--light-size); font-weight: 400; opacity: .9; margin-top: 4px}

.glx-timer{display:flex; align-items:center; gap: clamp(8px, 1.8vw, 18px); font-variant-numeric: tabular-nums; font-feature-settings: "tnum";}
.glx-unit{display:flex; flex-direction:column; align-items:center; min-width: 70px}
.glx-num{font-size: clamp(22px, 4.5vw, 48px); font-weight: 800; line-height: 1}
.glx-label{font-size: clamp(10px, 1.6vw, 12px); text-transform: uppercase; opacity:.8; letter-spacing:.08em}
.glx-sep{font-size: clamp(18px, 4vw, 36px); color: var(--accent); font-weight: 700; line-height:1}
.glx-expired{font-weight:700; color: var(--accent); font-size: clamp(18px, 3vw, 24px)}

.glx-btn{
  display:inline-block;
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 10px 18px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  font-size: var(--button-size);
  transition: transform .08s ease, opacity .2s ease;
}
.glx-btn:hover{transform: translateY(-1px); opacity: .95}

.glx-left, .glx-center, .glx-right{display:flex; flex-direction:column; gap:6px}
.glx-right{align-items:flex-end}

.glx-close{
  position:absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  opacity: .9;
}
.glx-close:hover{opacity: 1}

@media (max-width: 900px){
  .glx-countdown .glx-wrap{gap: 8px}
  .glx-left, .glx-right{width: 100%}
  .glx-right{align-items: flex-start}
  .glx-timer{width: 100%; justify-content: space-between}
  .glx-unit{min-width: unset}
}