/* ── Custom properties (set per-timer via inline style) ──────────────────────── */
.sct-timer {
    --sct-bg:       #ffffff;
    --sct-num:      #375D38;
    --sct-lbl:      #9A7A6D;
    --sct-text:     #222222;
    --sct-border:   #e2ded9;
    --sct-btn-bg:   #375D38;
    --sct-btn-txt:  #ffffff;
    --sct-radius:   14px;
    --sct-pad:      20px;
    --sct-gap:      10px;
    /* typography */
    --sct-hd-font: inherit;  --sct-hd-wt: 700;  --sct-hd-d: 18px;  --sct-hd-t: 17px;  --sct-hd-m: 16px;
    --sct-nm-font: inherit;  --sct-nm-wt: 800;  --sct-nm-d: 30px;  --sct-nm-t: 26px;  --sct-nm-m: 22px;
    --sct-lb-font: inherit;  --sct-lb-wt: 600;  --sct-lb-d: 11px;  --sct-lb-t: 10px;  --sct-lb-m: 10px;
    --sct-ms-font: inherit;  --sct-ms-wt: 400;  --sct-ms-d: 14px;  --sct-ms-t: 13px;  --sct-ms-m: 13px;
    --sct-bt-font: inherit;  --sct-bt-wt: 600;  --sct-bt-d: 14px;  --sct-bt-t: 13px;  --sct-bt-m: 13px;
}

/* ── Base ────────────────────────────────────────────────────────────────────── */
.sct-timer {
    box-sizing:    border-box;
    display:       flex;
    flex-direction: column;
    gap:           14px;
    background:    var(--sct-bg);
    color:         var(--sct-text);
    border:        1px solid var(--sct-border);
    border-radius: var(--sct-radius);
    padding:       var(--sct-pad);
    margin:        14px 0;
    font-family:   var(--sct-ms-font);
    font-size:     var(--sct-ms-d);
    font-weight:   var(--sct-ms-wt);
    line-height:   1.45;
    position:      relative;
}
.sct-timer:not(.sct-no-shadow) {
    box-shadow: 0 4px 20px rgba(55,93,56,.10), 0 1px 4px rgba(55,93,56,.06);
}

/* ── Badge ───────────────────────────────────────────────────────────────────── */
.sct-pill {
    display:     inline-block;
    background:  var(--sct-btn-bg);
    color:       var(--sct-btn-txt);
    font-size:   11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:     4px 12px;
    border-radius: 999px;
    align-self:  flex-start;
}

/* ── Body (heading + subtext) ────────────────────────────────────────────────── */
.sct-body {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
}
.sct-icon-wrap { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.sct-copy { flex: 1; }
.sct-heading {
    font-family:  var(--sct-hd-font);
    font-size:    var(--sct-hd-d);
    font-weight:  var(--sct-hd-wt);
    color:        var(--sct-text);
    margin:       0 0 3px;
    line-height:  1.2;
}
.sct-sub {
    font-family:  var(--sct-ms-font);
    font-size:    var(--sct-ms-d);
    font-weight:  var(--sct-ms-wt);
    color:        var(--sct-text);
    opacity:      .72;
    margin:       0;
    line-height:  1.3;
}

/* ── Clock ───────────────────────────────────────────────────────────────────── */
.sct-clock {
    display:     flex;
    align-items: center;
    gap:         var(--sct-gap);
    flex-wrap:   wrap;
}
.sct-seg {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    min-width:      60px;
    padding:        10px 8px 8px;
    background:     rgba(55,93,56,.04);
    border:         1px solid rgba(55,93,56,.10);
    border-radius:  10px;
    text-align:     center;
}
.sct-num {
    display:      block;
    font-family:  var(--sct-nm-font);
    font-size:    var(--sct-nm-d);
    font-weight:  var(--sct-nm-wt);
    color:        var(--sct-num);
    line-height:  1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.sct-lbl {
    display:      block;
    font-family:  var(--sct-lb-font);
    font-size:    var(--sct-lb-d);
    font-weight:  var(--sct-lb-wt);
    color:        var(--sct-lbl);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top:   5px;
    line-height:  1;
}
.sct-colon {
    font-size:    var(--sct-nm-d);
    font-weight:  800;
    color:        var(--sct-num);
    opacity:      .28;
    line-height:  1;
    align-self:   flex-start;
    margin-top:   10px;
    flex-shrink:  0;
}

/* ── Digit tick animation ────────────────────────────────────────────────────── */
@keyframes sct-tick {
    0%   { transform: translateY(-5px); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateY(0); }
}
.sct-tick { animation: sct-tick .28s cubic-bezier(.22,1,.36,1); }

/* ── Expired message ─────────────────────────────────────────────────────────── */
.sct-expired-msg {
    display:     none;
    font-weight: 700;
    font-size:   var(--sct-ms-d);
    color:       var(--sct-text);
    text-align:  center;
    padding:     6px 0;
}

/* ── Footer (coupon + CTA) ───────────────────────────────────────────────────── */
.sct-foot {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         10px;
}
.sct-coupon-row {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    font-size:   13px;
}
.sct-coupon-row .sct-label-txt { color: var(--sct-text); opacity: .65; }
.sct-coupon-chip {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Courier, monospace;
    font-weight: 700;
    font-size:   13px;
    color:       var(--sct-num);
    background:  rgba(55,93,56,.07);
    border:      1px solid rgba(55,93,56,.14);
    padding:     3px 10px;
    border-radius: 6px;
    letter-spacing: .05em;
}
.sct-cta {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      var(--sct-btn-bg);
    color:           var(--sct-btn-txt) !important;
    font-family:     var(--sct-bt-font);
    font-size:       var(--sct-bt-d);
    font-weight:     var(--sct-bt-wt);
    padding:         10px 24px;
    border-radius:   999px;
    text-decoration: none !important;
    border:          none;
    cursor:          pointer;
    transition:      filter .15s, transform .1s;
    white-space:     nowrap;
    line-height:     1;
}
.sct-cta:hover     { filter: brightness(1.1); transform: translateY(-1px); }
.sct-cta:disabled  { opacity: .6; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════════════════════
   LAYOUT VARIANTS
   ═══════════════════════════════════════════════════════════════════════════════ */
.sct-layout-inline  { flex-direction: row; align-items: center; flex-wrap: wrap; }
.sct-layout-bar     { flex-direction: row; align-items: center; flex-wrap: wrap; width: 100%; border-radius: 0; }
.sct-layout-compact { gap: 8px; padding: 12px 14px; }
.sct-layout-compact .sct-seg { min-width: 48px; padding: 7px 6px; }

/* Alignment */
.sct-align-center .sct-clock, .sct-align-center .sct-foot { justify-content: center; }
.sct-align-center .sct-heading, .sct-align-center .sct-sub { text-align: center; }
.sct-align-center .sct-pill { align-self: center; }
.sct-align-right  .sct-clock, .sct-align-right  .sct-foot { justify-content: flex-end; }
.sct-align-right  .sct-heading, .sct-align-right  .sct-sub { text-align: right; }
.sct-align-right  .sct-pill { align-self: flex-end; }

/* ═══════════════════════════════════════════════════════════════════════════════
   TEMPLATE VARIANTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Minimal — no box, just inline strip */
.sct-template-minimal { background: transparent; border: none; box-shadow: none; padding: 8px 0; }
.sct-template-minimal .sct-seg { background: none; border: none; min-width: 44px; padding: 4px; }
.sct-template-minimal .sct-colon { opacity: .2; }

/* Premium — default, full card (base styles cover this) */

/* Urgency — bold accent border + colored units */
.sct-template-urgency { border-width: 2px; border-color: var(--sct-btn-bg); }
.sct-template-urgency .sct-seg { background: var(--sct-btn-bg); border-color: var(--sct-btn-bg); }
.sct-template-urgency .sct-num { color: var(--sct-btn-txt); }
.sct-template-urgency .sct-lbl { color: rgba(255,255,255,.75); }
.sct-template-urgency .sct-colon { color: var(--sct-btn-txt); opacity: .45; }

/* Coupon — dashed coupon chip */
.sct-template-coupon .sct-coupon-chip { border-style: dashed; border-width: 1.5px; font-size: 15px; padding: 6px 14px; letter-spacing: .08em; }

/* Circular — round unit boxes */
.sct-template-circular .sct-seg { border-radius: 50%; width: 72px; height: 72px; min-width: 72px; padding: 0; justify-content: center; }
.sct-template-circular .sct-num { font-size: calc(var(--sct-nm-d) * .8); }
.sct-template-circular .sct-colon { margin-top: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════════
   FLOATING
   ═══════════════════════════════════════════════════════════════════════════════ */
.sct-timer.sct-floating { position: fixed; left: 0; right: 0; z-index: 9999; margin: 0; border-left: 0; border-right: 0; border-radius: 0; }
.sct-location-floating_top    { top: 0; }
.sct-location-floating_bottom { bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .sct-heading { font-size: var(--sct-hd-t) !important; }
    .sct-num     { font-size: var(--sct-nm-t) !important; }
    .sct-lbl     { font-size: var(--sct-lb-t) !important; }
    .sct-sub     { font-size: var(--sct-ms-t) !important; }
    .sct-cta     { font-size: var(--sct-bt-t) !important; }
    .sct-hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
    .sct-timer   { padding: 14px; }
    .sct-heading { font-size: var(--sct-hd-m) !important; }
    .sct-num     { font-size: var(--sct-nm-m) !important; }
    .sct-lbl     { font-size: var(--sct-lb-m) !important; }
    .sct-sub     { font-size: var(--sct-ms-m) !important; }
    .sct-cta     { font-size: var(--sct-bt-m) !important; }
    .sct-seg     { min-width: 52px; }
    .sct-colon   { margin-top: 8px; }
    .sct-foot    { flex-direction: column; align-items: flex-start; }
    .sct-align-center .sct-foot { align-items: center; }
    .sct-mobile-stacked          { flex-direction: column; }
    .sct-mobile-two-col .sct-clock { display: grid; grid-template-columns: 1fr auto 1fr auto; }
    .sct-mobile-compact .sct-seg    { min-width: 44px; padding: 6px 5px; }
    .sct-hide-mobile { display: none !important; }
}
@media (min-width: 1025px) { .sct-hide-desktop { display: none !important; } }