.tera-conditional-timer{
  width:100%;
  max-width:100%;
  margin:14px auto;
  direction:rtl;
  font-family:inherit;
  box-sizing:border-box;
}
.tera-conditional-timer__inner{
  background:var(--tera-timer-bg,#111);
  color:var(--tera-timer-text,#fff);
  border-radius:var(--tera-timer-radius,14px);
  padding:18px 20px;
  text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  border:1px solid var(--tera-timer-border,#333);
  box-sizing:border-box;
  overflow:hidden;
}
.tera-conditional-timer__title{
  font-size:18px;
  line-height:1.35;
  font-weight:700;
  margin:0 0 5px;
}
.tera-conditional-timer__message{
  font-size:14px;
  line-height:1.55;
  opacity:.9;
}
.tera-conditional-timer__clock{
  color:var(--tera-timer-accent,#d92828);
  font-size:36px;
  line-height:1;
  font-weight:800;
  letter-spacing:1px;
  margin:7px auto 0;
  direction:ltr;
  font-variant-numeric:tabular-nums;
  width:max-content;
  max-width:100%;
}
.tera-conditional-timer__expired{
  margin-top:10px;
  font-size:14px;
  font-weight:600;
}
.tera-conditional-timer.is-expired .tera-conditional-timer__clock{opacity:.7}

/* Width presets */
.tera-conditional-timer.tera-width-full{max-width:none}
.tera-conditional-timer.tera-width-wide{max-width:1100px}
.tera-conditional-timer.tera-width-medium{max-width:760px}
.tera-conditional-timer.tera-width-compact{max-width:520px}
.tera-conditional-timer.tera-width-custom{max-width:var(--tera-timer-custom-width,760px)}

/* Style 1: classic */
.tera-conditional-timer.tera-style-classic .tera-conditional-timer__inner{text-align:center}

/* Style 2: boxed clock */
.tera-conditional-timer.tera-style-boxed .tera-conditional-timer__clock{
  padding:11px 18px;
  background:var(--tera-timer-digit-bg,#fff);
  color:var(--tera-timer-digit-text,#111);
  border:2px solid var(--tera-timer-accent,#d92828);
  border-radius:calc(var(--tera-timer-radius,14px) * .72);
}

/* Style 3: horizontal */
.tera-conditional-timer.tera-style-inline .tera-conditional-timer__inner{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:'title clock' 'message clock' 'expired expired';
  column-gap:20px;
  row-gap:3px;
  align-items:center;
  text-align:right;
}
.tera-conditional-timer.tera-style-inline .tera-conditional-timer__title{grid-area:title;margin:0}
.tera-conditional-timer.tera-style-inline .tera-conditional-timer__message{grid-area:message}
.tera-conditional-timer.tera-style-inline .tera-conditional-timer__clock{
  grid-area:clock;
  margin:0;
  padding:10px 14px;
  background:var(--tera-timer-digit-bg,#fff);
  color:var(--tera-timer-digit-text,#111);
  border-radius:calc(var(--tera-timer-radius,14px) * .72);
  min-width:116px;
  text-align:center;
}
.tera-conditional-timer.tera-style-inline .tera-conditional-timer__expired{grid-area:expired}

/* Style 4: minimal */
.tera-conditional-timer.tera-style-minimal .tera-conditional-timer__inner{
  box-shadow:none;
  background:transparent;
  border:1px solid var(--tera-timer-border,#333);
}
.tera-conditional-timer.tera-style-minimal .tera-conditional-timer__clock{margin-top:8px}

@media (max-width:767px){
  .tera-conditional-timer,
  .tera-conditional-timer.tera-width-wide,
  .tera-conditional-timer.tera-width-medium,
  .tera-conditional-timer.tera-width-compact,
  .tera-conditional-timer.tera-width-custom{width:100%;max-width:100%;margin:10px auto}
  .tera-conditional-timer__inner{padding:15px 14px}
  .tera-conditional-timer__title{font-size:16px}
  .tera-conditional-timer__message{font-size:13px}
  .tera-conditional-timer__clock{font-size:31px}
  .tera-conditional-timer.tera-style-inline .tera-conditional-timer__inner{
    display:block;
    text-align:center;
  }
  .tera-conditional-timer.tera-style-inline .tera-conditional-timer__clock{
    margin:11px auto 0;
    min-width:0;
  }
}

/* Countdown label */
.tera-conditional-timer__countdown-label{
  margin:10px auto 0;
  font-size:13px;
  line-height:1.35;
  font-weight:700;
  opacity:.9;
  text-align:center;
}

/* Inline placement for countdown label */
.tera-conditional-timer.tera-style-inline .tera-conditional-timer__inner{
  grid-template-areas:'title label' 'message clock' 'expired expired';
}
.tera-conditional-timer.tera-style-inline .tera-conditional-timer__countdown-label{
  grid-area:label;
  margin:0;
  text-align:center;
}

/* Style 5: flip cards */
.tera-conditional-timer.tera-style-flip .tera-conditional-timer__inner{
  text-align:center;
}
.tera-conditional-timer.tera-style-flip .tera-conditional-timer__clock{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:100%;
  margin-top:8px;
  color:inherit;
  perspective:900px;
}
.tera-flip-card{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:58px;
  border-radius:8px;
  background:var(--tera-timer-digit-bg,#fff);
  color:var(--tera-timer-digit-text,#111);
  border:1px solid var(--tera-timer-border,#333);
  box-shadow:0 7px 16px rgba(0,0,0,.22);
  overflow:hidden;
  transform-style:preserve-3d;
  transform-origin:50% 0%;
  font-size:33px;
  line-height:1;
  font-weight:800;
}
.tera-flip-card:before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:50%;
  background:rgba(0,0,0,.055);
  pointer-events:none;
}
.tera-flip-card:after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:var(--tera-timer-accent,#d92828);
  opacity:.45;
  pointer-events:none;
}
.tera-flip-card__value{
  position:relative;
  z-index:2;
  display:block;
  min-width:1ch;
  text-align:center;
}
.tera-flip-card.is-flipping{
  animation:teraFlipCardDrop .56s cubic-bezier(.45,.05,.25,1);
}
.tera-flip-separator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:10px;
  height:58px;
  color:var(--tera-timer-accent,#d92828);
  font-size:31px;
  line-height:1;
  font-weight:800;
  transform:translateY(-2px);
}
@keyframes teraFlipCardDrop{
  0%{transform:rotateX(0deg)}
  42%{transform:rotateX(-88deg)}
  43%{transform:rotateX(88deg)}
  100%{transform:rotateX(0deg)}
}

@media (prefers-reduced-motion:reduce){
  .tera-flip-card.is-flipping{animation:none}
}

@media (max-width:767px){
  .tera-conditional-timer__countdown-label{font-size:12px;margin-top:9px}
  .tera-flip-card{width:34px;height:49px;font-size:28px;border-radius:7px}
  .tera-flip-separator{height:49px;font-size:25px;min-width:7px}
  .tera-conditional-timer.tera-style-flip .tera-conditional-timer__clock{gap:4px}
  .tera-conditional-timer.tera-style-inline .tera-conditional-timer__countdown-label{margin:9px auto 0;text-align:center}
}