/* Shared Packminder countdown: fixed-ratio tear-off calendar inspired by a classic paper desk calendar. */
.demo-countdown,
.countdown-card{
  --cal-red:#ef2029;
  --cal-paper:#efefef;
  --cal-ink:#191919;
  --cal-edge:#c7cdd3;
  --cal-shadow:#5e6975;
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  flex:0 0 auto!important;
  overflow:visible!important;
  padding:0!important;
  margin:0!important;
  text-align:center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  isolation:isolate;
  box-sizing:border-box!important;
  transform:none!important;
}

/* Homepage demo: intentionally small so it supports, rather than dominates, the Tenerife details. */
.demo-countdown{
  width:56px!important;
  min-width:56px!important;
  max-width:56px!important;
  height:74px!important;
  min-height:74px!important;
}

/* Real trip countdown stays a little larger for readability. */
.countdown-card{
  width:98px!important;
  min-width:98px!important;
  max-width:98px!important;
  height:126px!important;
  min-height:126px!important;
}

.demo-countdown{filter:drop-shadow(0 3px 0 var(--cal-shadow)) drop-shadow(0 5px 5px rgba(16,33,59,.12))}
.countdown-card{filter:drop-shadow(0 6px 0 var(--cal-shadow)) drop-shadow(0 8px 9px rgba(16,33,59,.14))}

.demo-countdown::before,
.countdown-card::before{
  content:"";
  position:absolute;
  z-index:10;
  width:5px;
  height:15px;
  top:-7px;
  left:6px;
  border-radius:999px;
  background:#f8f8f8;
  box-shadow:
    0 2px 0 rgba(74,84,94,.72),
    11px 0 0 #f8f8f8,11px 2px 0 rgba(74,84,94,.72),
    22px 0 0 #f8f8f8,22px 2px 0 rgba(74,84,94,.72),
    33px 0 0 #f8f8f8,33px 2px 0 rgba(74,84,94,.72),
    44px 0 0 #f8f8f8,44px 2px 0 rgba(74,84,94,.72);
  pointer-events:none;
}

.countdown-card::before{
  width:8px;
  height:25px;
  top:-11px;
  left:10px;
  box-shadow:
    0 3px 0 rgba(74,84,94,.72),
    18px 0 0 #f8f8f8,18px 3px 0 rgba(74,84,94,.72),
    36px 0 0 #f8f8f8,36px 3px 0 rgba(74,84,94,.72),
    54px 0 0 #f8f8f8,54px 3px 0 rgba(74,84,94,.72),
    72px 0 0 #f8f8f8,72px 3px 0 rgba(74,84,94,.72);
}

.demo-countdown::after,
.countdown-card::after{
  content:"";
  position:absolute;
  z-index:7;
  right:0;
  bottom:0;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 11px 11px;
  border-color:transparent transparent #ffffff transparent;
  filter:drop-shadow(-1px -1px 0 rgba(20,28,36,.08));
  pointer-events:none;
}

.countdown-card::after{border-width:0 0 20px 20px}

.demo-countdown span,
.countdown-card span{
  order:1!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:3px 3px 0 0!important;
  background:var(--cal-red)!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  letter-spacing:0!important;
  text-transform:none!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

.demo-countdown span{height:23px!important}
.countdown-card span{height:38px!important}

.demo-countdown span::after,
.countdown-card span::after{
  content:"DAYS LEFT"!important;
  display:block!important;
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.demo-countdown span::after{font-size:8px!important}
.countdown-card span::after{font-size:13.5px!important}

.demo-countdown strong,
.countdown-card strong{
  order:2!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--cal-edge)!important;
  border-top:0!important;
  border-radius:0 0 3px 3px!important;
  background:var(--cal-paper)!important;
  color:var(--cal-ink)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:900!important;
  line-height:1!important;
  text-shadow:none!important;
  box-sizing:border-box!important;
}

.demo-countdown strong{
  height:51px!important;
  min-height:51px!important;
  font-size:29px!important;
  padding-bottom:2px!important;
}

.countdown-card strong{
  height:88px!important;
  min-height:88px!important;
  font-size:54px!important;
  padding-bottom:4px!important;
}

html[data-theme="dark"] .demo-countdown strong,
html[data-theme="dark"] .countdown-card strong{
  background:var(--cal-paper)!important;
  color:var(--cal-ink)!important;
  border-color:var(--cal-edge)!important;
}

@media(max-width:640px){
  .demo-countdown{
    width:50px!important;
    min-width:50px!important;
    max-width:50px!important;
    height:66px!important;
    min-height:66px!important;
  }
  .demo-countdown::before{
    width:5px;height:14px;top:-6px;left:5px;
    box-shadow:
      0 2px 0 rgba(74,84,94,.72),
      10px 0 0 #f8f8f8,10px 2px 0 rgba(74,84,94,.72),
      20px 0 0 #f8f8f8,20px 2px 0 rgba(74,84,94,.72),
      30px 0 0 #f8f8f8,30px 2px 0 rgba(74,84,94,.72),
      40px 0 0 #f8f8f8,40px 2px 0 rgba(74,84,94,.72);
  }
  .demo-countdown span{height:20px!important}
  .demo-countdown span::after{font-size:7px!important}
  .demo-countdown strong{height:46px!important;min-height:46px!important;font-size:26px!important}
  .demo-countdown::after{border-width:0 0 10px 10px}

  .countdown-card{
    width:86px!important;
    min-width:86px!important;
    max-width:86px!important;
    height:110px!important;
    min-height:110px!important;
  }
  .countdown-card::before{
    width:7px;height:22px;top:-10px;left:9px;
    box-shadow:
      0 3px 0 rgba(74,84,94,.72),
      16px 0 0 #f8f8f8,16px 3px 0 rgba(74,84,94,.72),
      32px 0 0 #f8f8f8,32px 3px 0 rgba(74,84,94,.72),
      48px 0 0 #f8f8f8,48px 3px 0 rgba(74,84,94,.72),
      64px 0 0 #f8f8f8,64px 3px 0 rgba(74,84,94,.72);
  }
  .countdown-card span{height:34px!important}
  .countdown-card span::after{font-size:11.5px!important}
  .countdown-card strong{height:76px!important;min-height:76px!important;font-size:47px!important}
  .countdown-card::after{border-width:0 0 17px 17px}
}