/* ============================================================
   HTML Calendar Plugin — Frontend Styles
   Clean, minimal design inspired by freehtmlcalendar.com
   ============================================================ */

:root {
  --hcal-font:          'Segoe UI', system-ui, -apple-system, sans-serif;
  --hcal-bg:            #ffffff;
  --hcal-border:        #e0e0e0;
  --hcal-header-bg:     #2c3e50;
  --hcal-header-color:  #ffffff;
  --hcal-day-header-bg: #f4f6f8;
  --hcal-day-color:     #333333;
  --hcal-weekend-color: #c0392b;
  --hcal-today-bg:      #2980b9;
  --hcal-today-color:   #ffffff;
  --hcal-holiday-color: #e74c3c; /* overridden per-instance via inline style */
  --hcal-holiday-text:  #ffffff;
  --hcal-empty-bg:      #fafafa;
  --hcal-gap:           16px;
  --hcal-radius:        6px;
  --hcal-shadow:        0 2px 8px rgba(0,0,0,.08);
}

/* Wrap + responsive grid */
.html-calendar-wrap {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--hcal-font);
}

.html-calendar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hcal-gap);
}

/* ── Single month card — fills available width ── */
.hcal-month {
  flex: 1 1 100%;
  width: 100%;
  background: var(--hcal-bg);
  border: 1px solid var(--hcal-border);
  border-radius: var(--hcal-radius);
  box-shadow: var(--hcal-shadow);
  overflow: hidden;
}

/* Header: Month name + year */
.hcal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--hcal-header-bg);
  color: var(--hcal-header-color);
  padding: 12px 16px;
}

.hcal-month-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.hcal-year {
  font-size: 14px;
  opacity: .75;
  font-weight: 400;
}

/* 7-column grid */
.hcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.hcal-grid.hcal-grid-weeks {
  grid-template-columns: 56px repeat(7, 1fr);
}

/* Day-of-week headers */
.hcal-day-header {
  background: var(--hcal-day-header-bg);
  color: #666;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  padding: 7px 0;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--hcal-border);
}

.hcal-week-header,
.hcal-week-num {
  background: #eef3fb;
  color: #46607d;
  font-weight: 700;
  text-align: center;
}

.hcal-week-num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

/* Individual day cell */
.hcal-day {
  position: relative;
  min-height: 58px;
  padding: 4px 3px 3px;
  text-align: center;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  cursor: default;
  transition: background .15s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.hcal-day:hover {
  background: #f0f5fb;
}

.hcal-day-num {
  display: block;
  font-size: 18px;
  color: var(--hcal-day-color);
  line-height: 1.4;
  font-weight: 400;
}

/* Empty filler cells */
.hcal-day.hcal-empty {
  background: var(--hcal-empty-bg);
  cursor: default;
}

.hcal-day.hcal-empty:hover {
  background: var(--hcal-empty-bg);
}

/* Weekend */
.hcal-day.hcal-weekend .hcal-day-num {
  color: var(--hcal-weekend-color);
}

/* Today */
.hcal-day.hcal-today {
  background: var(--hcal-today-bg);
}

.hcal-day.hcal-today .hcal-day-num {
  color: var(--hcal-today-color);
  font-weight: 700;
}

/* ── Holiday highlight ── */
.hcal-day.hcal-holiday {
  background-color: var(--hcal-holiday-color);
}

.hcal-day.hcal-holiday .hcal-day-num {
  color: var(--hcal-holiday-text);
  font-weight: 600;
}

/* Holiday name label (small text below the number) */
.hcal-holiday-name {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.9);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin-top: 1px;
}

/* ── Tooltip ── */
.hcal-day[data-holiday]:hover::after {
  content: attr(data-holiday);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #2c3e50;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.hcal-day[data-holiday]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #2c3e50;
  z-index: 101;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .hcal-month {
    width: 100%;
  }

  .html-calendar-grid {
    justify-content: center;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .hcal-month {
    width: 100%;
  }
}

/* ================================================================
   Moon Phase Styles
   ================================================================ */

/* ── Small icon in the day cell (top-right) ── */
.hcal-day {
  position: relative; /* ensure positioning context */
}

.hcal-cell-moon {
  position:    absolute;
  top:         2px;
  right:       2px;
  width:       10px;
  height:      10px;
  display:     block;
  cursor:      help;
  z-index:     2;
  line-height: 1;
}

.hcal-cell-moon .ycal-moon-svg {
  width:   10px;
  height:  10px;
  display: block;
}

/* Tooltip on cell moon icon */
.hcal-cell-moon:hover::after {
  content:        attr(data-moon);
  position:       absolute;
  bottom:         calc(100% + 5px);
  right:          0;
  background:     #222;
  color:          #fff;
  font-size:      10px;
  padding:        3px 7px;
  border-radius:  3px;
  white-space:    nowrap;
  z-index:        999;
  pointer-events: none;
  box-shadow:     0 2px 6px rgba(0,0,0,.3);
}

/* ── Moon strip below grid ── */
.hcal-moon-strip {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           5px 10px;
  padding:       5px 8px 4px;
  background:    #f4f6fb;
  border-top:    1px solid var(--hcal-border, #e0e0e0);
  border-bottom: 1px solid var(--hcal-border, #e0e0e0);
  font-size:     11px;
  color:         #555;
}

.hcal-moon-item {
  display:      inline-flex;
  align-items:  center;
  gap:          3px;
  cursor:       help;
  position:     relative;
}

.hcal-moon-item .ycal-moon-svg {
  width:       14px;
  height:      14px;
  flex-shrink: 0;
}

.hcal-moon-day {
  font-weight:  600;
  color:        #444;
  font-size:    11px;
  font-variant-numeric: tabular-nums;
}

/* Tooltip on moon strip item */
.hcal-moon-item:hover::after {
  content:        attr(data-moon);
  position:       absolute;
  bottom:         calc(100% + 5px);
  left:           50%;
  transform:      translateX(-50%);
  background:     #222;
  color:          #fff;
  font-size:      10px;
  padding:        3px 7px;
  border-radius:  3px;
  white-space:    nowrap;
  z-index:        999;
  pointer-events: none;
  box-shadow:     0 2px 6px rgba(0,0,0,.3);
}

.hcal-moon-item:hover::before {
  content:          '';
  position:         absolute;
  bottom:           calc(100% + 1px);
  left:             50%;
  transform:        translateX(-50%);
  border:           4px solid transparent;
  border-top-color: #222;
  z-index:          1000;
  pointer-events:   none;
}

/* ── Legend ── */
.hcal-legend {
  display:       flex;
  flex-wrap:     wrap;
  gap:           12px 18px;
  margin-top:    12px;
  padding:       8px 12px;
  background:    #f7f9ff;
  border:        1px solid var(--hcal-border, #e0e0e0);
  border-radius: var(--hcal-radius, 6px);
  font-size:     11px;
  color:         #555;
  font-family:   var(--hcal-font);
}

.hcal-legend-item {
  display:     flex;
  align-items: center;
  gap:         5px;
}

.hcal-legend-swatch {
  display:       inline-block;
  width:         14px;
  height:        14px;
  border-radius: 2px;
  border:        1px solid rgba(0,0,0,.12);
  flex-shrink:   0;
}

.hcal-legend-today   { background: var(--hcal-today-bg, #2980b9); }
.hcal-legend-holiday { background: var(--hcal-holiday-color, #e74c3c); opacity: .75; }
.hcal-legend-weekend { background: #fff; }
.hcal-legend-weekend::after {
  content:     '7';
  display:     block;
  text-align:  center;
  font-size:   9px;
  font-weight: 700;
  color:       var(--hcal-weekend-color, #c0392b);
  line-height: 14px;
}

/* Moon SVGs in legend */
.hcal-legend .ycal-moon-svg {
  width:  14px;
  height: 14px;
}

/* ================================================================
   Clickable Holiday Link Styles
   ================================================================ */

/* The holiday link flows below the day number */
.hcal-holiday-link {
  display:         block;
  width:           100%;
  text-decoration: none;
  color:           inherit;
  border-bottom:   2px solid rgba(255,255,255,.5);
}

/* Holiday cell with link shows pointer cursor */
.hcal-holiday[data-holiday-url] {
  cursor: pointer;
}

/* Holiday name label — shown inside the link or standalone */
.hcal-holiday-name {
  display:       block;
  font-size:     13px;
  line-height:   1.2;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  max-width:     100%;
  margin-top:    2px;
  color:         var(--hcal-holiday-text, #fff);
}

/* Tooltip for holidays WITH a link — styled differently to signal clickability */
.hcal-day[data-holiday-url]:hover::after {
  content:         attr(data-holiday) ' →';
  position:        absolute;
  bottom:          calc(100% + 6px);
  left:            50%;
  transform:       translateX(-50%);
  background:      #1a4fa3;
  color:           #fff;
  font-size:       11px;
  padding:         5px 10px;
  border-radius:   4px;
  white-space:     nowrap;
  z-index:         100;
  pointer-events:  none;
  box-shadow:      0 2px 8px rgba(0,0,0,.25);
  text-decoration: underline;
}

/* Tooltip arrow for linked holidays */
.hcal-day[data-holiday-url]:hover::before {
  content:            '';
  position:           absolute;
  bottom:             calc(100% + 2px);
  left:               50%;
  transform:          translateX(-50%);
  border:             4px solid transparent;
  border-top-color:   #1a4fa3;
  z-index:            101;
  pointer-events:     none;
}

/* Plain holiday tooltip (no link) — keep original red/dark style */
.hcal-day[data-holiday]:not([data-holiday-url]):hover::after {
  content:        attr(data-holiday);
  position:       absolute;
  bottom:         calc(100% + 6px);
  left:           50%;
  transform:      translateX(-50%);
  background:     #2c3e50;
  color:          #fff;
  font-size:      11px;
  padding:        4px 8px;
  border-radius:  4px;
  white-space:    nowrap;
  z-index:        100;
  pointer-events: none;
  box-shadow:     0 2px 6px rgba(0,0,0,.25);
}

.hcal-day[data-holiday]:not([data-holiday-url]):hover::before {
  content:          '';
  position:         absolute;
  bottom:           calc(100% + 2px);
  left:             50%;
  transform:        translateX(-50%);
  border:           4px solid transparent;
  border-top-color: #2c3e50;
  z-index:          101;
  pointer-events:   none;
}

/* ================================================================
   Events
   ================================================================ */

/* Day cell that has events but no holiday */
.hcal-day.hcal-has-events {
  background-color: var(--hcal-day-event-color, var(--hcal-event-color, #27ae60));
}

.hcal-day.hcal-has-events .hcal-day-num {
  color: #fff;
  font-weight: 600;
}

.hcal-day.hcal-has-events:hover {
  filter: brightness(0.92);
}

/* Event pill — small label inside the cell */
.hcal-event-pill {
  display:       block;
  font-size:     9px;
  line-height:   1.25;
  padding:       1px 4px;
  border-radius: 3px;
  margin-top:    2px;
  color:         #fff;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  max-width:     100%;
  text-decoration: none;
  cursor:        default;
  position:      relative;
  z-index:       3;
}

a.hcal-event-pill {
  cursor: pointer;
}

a.hcal-event-pill:hover {
  filter:          brightness(0.88);
  text-decoration: underline;
}

/* Tooltip on event pill hover */
.hcal-event-pill:hover::after {
  content:        attr(title);
  position:       absolute;
  bottom:         calc(100% + 5px);
  left:           50%;
  transform:      translateX(-50%);
  background:     #222;
  color:          #fff;
  font-size:      10px;
  padding:        3px 7px;
  border-radius:  3px;
  white-space:    nowrap;
  z-index:        999;
  pointer-events: none;
  box-shadow:     0 2px 6px rgba(0,0,0,.3);
}

.hcal-event-pill:hover::before {
  content:          '';
  position:         absolute;
  bottom:           calc(100% + 1px);
  left:             50%;
  transform:        translateX(-50%);
  border:           4px solid transparent;
  border-top-color: #222;
  z-index:          1000;
  pointer-events:   none;
}

/* Increase min-height for cells that can hold events */
.hcal-day.hcal-has-events {
  min-height: 64px;
}

/* ================================================================
   Month Navigation (show_nav="true")
   ================================================================ */

.hcal-header-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0;
  gap:             4px;
}

.hcal-header-center {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  flex:           1;
  text-align:     center;
  padding:        10px 4px;
}

.hcal-nav-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-width:       90px;
  padding:         8px 10px;
  color:           rgba(255,255,255,.85);
  text-decoration: none;
  font-size:       11px;
  font-weight:     600;
  letter-spacing:  .04em;
  line-height:     1.3;
  transition:      background .15s, color .15s;
  cursor:          pointer;
  text-align:      center;
  align-self:      stretch;
}

.hcal-nav-btn:hover {
  background: rgba(255,255,255,.15);
  color:      #fff;
}

.hcal-nav-prev { font-size: 20px; border-right: 1px solid rgba(255,255,255,.2); }
.hcal-nav-next { font-size: 20px; border-left:  1px solid rgba(255,255,255,.2); }

.hcal-nav-label {
  display:    block;
  font-size:  10px;
  font-weight: 700;
  letter-spacing: .05em;
  margin-top: 2px;
  opacity:    .85;
}

/* ================================================================
   Workday count footer
   ================================================================ */

.hcal-workdays {
  padding:     8px 12px;
  font-size:   12px;
  color:       #555;
  border-top:  1px solid var(--hcal-border, #e0e0e0);
  background:  #fafbff;
  text-align:  left;
}

.hcal-workdays strong {
  color: var(--hcal-blue, #2c3e50);
}

.calsuite-inline-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f3f7ff;
  border: 1px solid #d7e2f3;
  color: #2c3e50;
  font-size: 13px;
  font-weight: 600;
}

.calsuite-inline-link {
  color: #1a4fa3;
  text-decoration: none;
  font-weight: 600;
}

.calsuite-inline-link:hover {
  text-decoration: underline;
}

.calsuite-list,
.calsuite-list-empty {
  margin: 10px 0;
  padding: 12px 14px;
  background: #fafcff;
  border: 1px solid #dfe7f4;
  border-radius: 8px;
  color: #2c3e50;
}

.calsuite-list ul {
  margin: 0;
  padding-left: 18px;
}

.calsuite-list li + li {
  margin-top: 6px;
}

.calsuite-badge-yes {
  background: #eefaf1;
  border-color: #cfe8d6;
  color: #1f6b3b;
}

.calsuite-badge-no {
  background: #fff4f4;
  border-color: #f0d5d5;
  color: #8d3f3f;
}

.calsuite-card {
  padding: 16px 18px;
  background: linear-gradient(135deg, #f7fbff 0%, #eef4ff 100%);
  border: 1px solid #d9e3f3;
  border-radius: 12px;
  color: #24425f;
  max-width: 420px;
  box-shadow: 0 6px 18px rgba(29, 61, 102, 0.08);
}

.calsuite-card-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5c7897;
  margin-bottom: 6px;
}

.calsuite-card-date {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}

.calsuite-card-meta + .calsuite-card-meta {
  margin-top: 6px;
}

.calsuite-card-moon .ycal-moon-svg {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

.calsuite-progress {
  max-width: 420px;
  padding: 14px 16px;
  background: #fafcff;
  border: 1px solid #dfe7f4;
  border-radius: 12px;
}

.calsuite-progress-label {
  font-weight: 700;
  color: #274866;
  margin-bottom: 8px;
}

.calsuite-progress-track {
  width: 100%;
  height: 10px;
  background: #e6edf8;
  border-radius: 999px;
  overflow: hidden;
}

.calsuite-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2d6cdf 0%, #5d93ff 100%);
  border-radius: inherit;
}

.calsuite-progress-meta {
  margin-top: 8px;
  font-size: 13px;
  color: #5c7897;
}

.calsuite-card-empty {
  color: #5c7897;
}

.calsuite-mini-calendar {
  max-width: 320px;
}

.calsuite-mini-calendar .html-calendar-grid {
  display: block;
}

.calsuite-mini-calendar .hcal-month {
  max-width: 320px;
}

.calsuite-mini-calendar .hcal-header {
  padding: 10px 12px;
}

.calsuite-mini-calendar .hcal-month-name {
  font-size: 13px;
}

.calsuite-mini-calendar .hcal-year {
  font-size: 12px;
}

.calsuite-mini-calendar .hcal-day-header {
  font-size: 11px;
  padding: 6px 0;
}

.calsuite-mini-calendar .hcal-day {
  min-height: 42px;
  padding-top: 3px;
}

.calsuite-mini-calendar .hcal-day-num {
  font-size: 14px;
}

.calsuite-mini-calendar .hcal-holiday-name,
.calsuite-mini-calendar .hcal-event-pill {
  font-size: 10px;
}

.calsuite-multi-calendar .html-calendar-grid {
  display: grid;
  gap: 16px;
}

.calsuite-multi-calendar-grid .html-calendar-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.calsuite-multi-calendar-horizontal .html-calendar-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.calsuite-multi-calendar .hcal-month {
  min-width: 0;
}

.calsuite-table-wrap {
  margin: 10px 0;
  overflow-x: auto;
  border: 1px solid #dfe7f4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(29, 61, 102, 0.06);
}

.calsuite-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
}

.calsuite-table th,
.calsuite-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e9eef7;
  text-align: left;
  font-size: 13px;
  color: #26415d;
}

.calsuite-table th {
  background: #f6f9ff;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #587393;
}

.calsuite-table tbody tr:last-child td {
  border-bottom: 0;
}

.calsuite-table tbody tr.is-current {
  background: #eef5ff;
}

.calsuite-countdown {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 28px 22px;
  border-radius: 22px;
  overflow: hidden;
}

.calsuite-countdown::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% -12%, rgba(255,255,255,.16), transparent 32%),
    radial-gradient(circle at 50% 120%, rgba(0,0,0,.38), transparent 44%);
  pointer-events: none;
}

.calsuite-countdown::after {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}

.calsuite-countdown-theme-dark {
  background:
    radial-gradient(circle at top, rgba(255,255,255,.1), transparent 40%),
    linear-gradient(180deg, #2a2a2a 0%, #111111 42%, #090909 100%);
  box-shadow:
    0 24px 60px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.calsuite-countdown-theme-light {
  background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%);
  border: 1px solid #d8e0ec;
  box-shadow: 0 18px 40px rgba(61,89,128,.12);
}

.calsuite-countdown-theme-glass {
  background: linear-gradient(180deg, rgba(20,27,39,.88) 0%, rgba(12,17,26,.72) 100%);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.calsuite-countdown-title {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.24);
}

.calsuite-countdown-subtitle {
  position: relative;
  z-index: 1;
  margin: -6px 0 14px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .82;
}

.calsuite-countdown-theme-dark .calsuite-countdown-title,
.calsuite-countdown-theme-dark .calsuite-countdown-subtitle,
.calsuite-countdown-theme-glass .calsuite-countdown-title,
.calsuite-countdown-theme-glass .calsuite-countdown-subtitle,
.calsuite-countdown-theme-dark .calsuite-countdown-label,
.calsuite-countdown-theme-glass .calsuite-countdown-label,
.calsuite-countdown-theme-dark .calsuite-countdown-expired,
.calsuite-countdown-theme-glass .calsuite-countdown-expired {
  color: #f5f1dc;
}

.calsuite-countdown-theme-light .calsuite-countdown-title,
.calsuite-countdown-theme-light .calsuite-countdown-subtitle,
.calsuite-countdown-theme-light .calsuite-countdown-label,
.calsuite-countdown-theme-light .calsuite-countdown-expired {
  color: #243b57;
}

.calsuite-countdown-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 16px;
}

.calsuite-countdown-hero .calsuite-countdown-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
}

.calsuite-countdown-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.calsuite-countdown-value-wrap {
  position: relative;
  width: 100%;
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
}

.calsuite-countdown-boxed .calsuite-countdown-value-wrap,
.calsuite-countdown-flip .calsuite-countdown-value-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 46%, rgba(0,0,0,.32) 47%, rgba(0,0,0,.48) 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.42),
    0 14px 26px rgba(0,0,0,.28);
}

.calsuite-countdown-hero .calsuite-countdown-value-wrap {
  min-height: 112px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 45%, rgba(0,0,0,.28) 46%, rgba(0,0,0,.52) 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.44),
    0 16px 28px rgba(0,0,0,.3);
}

.calsuite-countdown-theme-light .calsuite-countdown-value-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(245,248,252,.94) 48%, rgba(215,224,235,.9) 49%, rgba(231,238,246,.96) 100%);
  border-color: rgba(112,131,163,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(137,156,186,.24),
    0 10px 20px rgba(84,108,145,.16);
}

.calsuite-countdown-panel,
.calsuite-countdown-shine,
.calsuite-countdown-hinge,
.calsuite-countdown-pin {
  position: absolute;
  pointer-events: none;
}

.calsuite-countdown-panel {
  left: 0;
  right: 0;
  z-index: 0;
}

.calsuite-countdown-panel-top {
  top: 0;
  height: 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 34%, rgba(255,255,255,0) 100%);
}

.calsuite-countdown-panel-bottom {
  bottom: 0;
  height: 50%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.14) 20%, rgba(0,0,0,.3) 100%);
}

.calsuite-countdown-shine {
  left: 8%;
  right: 8%;
  top: 10px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 100%);
  z-index: 1;
  opacity: .9;
}

.calsuite-countdown-hinge {
  left: 0;
  right: 0;
  top: calc(50% - 1px);
  height: 2px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(0,0,0,.45) 10%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.45) 90%, rgba(255,255,255,.05) 100%);
  box-shadow:
    0 -1px 0 rgba(255,255,255,.05),
    0 1px 0 rgba(0,0,0,.4);
  z-index: 2;
}

.calsuite-countdown-pin {
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(40,40,40,.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 2px rgba(0,0,0,.5);
  z-index: 3;
}

.calsuite-countdown-pin-left {
  left: 10px;
}

.calsuite-countdown-pin-right {
  right: 10px;
}

.calsuite-countdown-value {
  position: relative;
  z-index: 4;
  font-size: clamp(44px, 6vw, 68px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 3px 14px rgba(0,0,0,.34),
    0 1px 0 rgba(255,255,255,.08);
}

.calsuite-countdown-value.is-ticking {
  animation: calsuiteFlipTick .5s ease;
}

.calsuite-countdown-theme-dark .calsuite-countdown-value,
.calsuite-countdown-theme-glass .calsuite-countdown-value {
  color: #fff;
}

.calsuite-countdown-theme-light .calsuite-countdown-value {
  color: #17324d;
  text-shadow: none;
}

.calsuite-countdown-flip .calsuite-countdown-value-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0,0,0,.38);
  z-index: 3;
}

.calsuite-countdown-flip-shadow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 22%, transparent 52%, rgba(0,0,0,.16) 76%, rgba(0,0,0,.3) 100%);
  z-index: 1;
}

.calsuite-countdown-flip .calsuite-countdown-value.is-ticking {
  transform-origin: center;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.26));
}

.calsuite-countdown-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .95;
}

.calsuite-countdown-hero .calsuite-countdown-title {
  font-size: clamp(30px, 4vw, 42px);
  margin-bottom: 18px;
  letter-spacing: .18em;
}

.calsuite-countdown-note {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
}

.calsuite-countdown-theme-dark .calsuite-countdown-note,
.calsuite-countdown-theme-glass .calsuite-countdown-note {
  color: rgba(245,241,220,.78);
}

.calsuite-countdown-theme-light .calsuite-countdown-note {
  color: #516880;
}

.calsuite-countdown-cta-wrap {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.calsuite-countdown-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe48b 0%, #efc744 48%, #c99412 100%);
  color: #201500;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 14px 24px rgba(0,0,0,.28);
}

.calsuite-countdown-cta:hover {
  filter: brightness(1.05);
}

@keyframes calsuiteFlipTick {
  0% {
    transform: perspective(240px) rotateX(0deg) translateY(0) scale(1);
    opacity: 1;
  }
  48% {
    transform: perspective(240px) rotateX(88deg) translateY(-2px) scale(.96);
    opacity: .68;
  }
  52% {
    transform: perspective(240px) rotateX(-78deg) translateY(2px) scale(.96);
    opacity: .68;
  }
  100% {
    transform: perspective(240px) rotateX(0deg) translateY(0) scale(1);
    opacity: 1;
  }
}

.calsuite-countdown-expired {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.calsuite-countdown-preset-classic {
  max-width: 1080px;
  padding: 24px 22px 18px;
  border-radius: 18px;
}

.calsuite-countdown-preset-classic .calsuite-countdown-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.calsuite-countdown-preset-classic .calsuite-countdown-cell {
  gap: 8px;
}

.calsuite-countdown-preset-classic .calsuite-countdown-title {
  font-size: clamp(26px, 3vw, 38px);
  margin-bottom: 10px;
}

.calsuite-countdown-preset-classic .calsuite-countdown-subtitle {
  margin-bottom: 12px;
}

.calsuite-countdown-preset-classic .calsuite-countdown-value-wrap {
  min-height: 104px;
}

.calsuite-countdown-preset-launch-banner {
  max-width: 1120px;
  padding: 30px 30px 24px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,196,76,.14), transparent 20%),
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(135deg, #181818 0%, #0a0a0a 55%, #131313 100%);
}

.calsuite-countdown-preset-launch-banner::after {
  border-color: rgba(255,202,110,.16);
}

.calsuite-countdown-preset-launch-banner .calsuite-countdown-title {
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: .18em;
}

.calsuite-countdown-preset-launch-banner .calsuite-countdown-subtitle {
  color: rgba(255,238,196,.82);
}

.calsuite-countdown-preset-launch-banner .calsuite-countdown-note {
  color: rgba(255,228,164,.72);
}

.calsuite-countdown-preset-launch-banner .calsuite-countdown-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calsuite-countdown-preset-sale {
  max-width: 1120px;
  padding: 30px 30px 24px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top, rgba(255,214,118,.18), transparent 22%),
    linear-gradient(135deg, #4b090e 0%, #1a0708 38%, #0d0d0d 100%);
  box-shadow:
    0 28px 70px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,235,190,.08);
}

.calsuite-countdown-preset-sale::after {
  border-color: rgba(255,195,84,.2);
}

.calsuite-countdown-preset-sale .calsuite-countdown-title,
.calsuite-countdown-preset-sale .calsuite-countdown-subtitle,
.calsuite-countdown-preset-sale .calsuite-countdown-label,
.calsuite-countdown-preset-sale .calsuite-countdown-expired {
  color: #fff1d0;
}

.calsuite-countdown-preset-sale .calsuite-countdown-note {
  color: rgba(255,227,168,.78);
}

.calsuite-countdown-preset-sale .calsuite-countdown-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calsuite-countdown-preset-sale .calsuite-countdown-value-wrap {
  border-color: rgba(255,210,124,.18);
}

.calsuite-countdown-preset-sale .calsuite-countdown-cta {
  background: linear-gradient(180deg, #ffd97c 0%, #ffb930 54%, #db7e14 100%);
}

@media (max-width: 600px) {
  .calsuite-countdown {
    padding: 20px 14px 16px;
  }

  .calsuite-countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calsuite-countdown-title {
    font-size: 22px;
  }

  .calsuite-countdown-value-wrap {
    min-height: 86px;
  }

  .calsuite-countdown-hero .calsuite-countdown-value-wrap {
    min-height: 92px;
  }

  .calsuite-countdown-value {
    font-size: clamp(34px, 10vw, 54px);
  }

  .calsuite-countdown-preset-classic .calsuite-countdown-grid,
  .calsuite-countdown-preset-launch-banner .calsuite-countdown-grid,
  .calsuite-countdown-preset-sale .calsuite-countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}