/* Styles for TimerWidget */
/* Styles for TimerWidget */
/* TimerWidget Styles */
.cv-timer-widget {
          position: relative;
          background-color: var(--cv-color-surface);
          border: var(--cv-border-width) solid var(--cv-color-border);
          border-radius: var(--cv-border-radius-md);
          font-family: var(--cv-font-family);
          color: var(--cv-color-text-main);
          text-align: center;
          box-shadow: var(--cv-shadow-sm);
          background-size: cover;
          overflow: hidden;
        }
        .cv-timer-widget.cv-timer-has-bg {
          color: var(--cv-color-on-media, #fff);
        }
        .cv-timer-overlay {
          position: absolute;
          inset: 0;
          z-index: 0;
        }
        .cv-timer-bg-effect {
          z-index: 0;
        }
        .cv-timer-content {
          position: relative;
          z-index: 1;
          padding: var(--cv-spacing-lg);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .cv-timer-expired {
          margin: 0;
          font-size: var(--cv-font-size-subtitle);
          font-weight: 600;
        }
        .cv-timer-title {
          margin-top: 0;
          margin-bottom: var(--cv-spacing-md);
          font-size: var(--cv-font-size-subtitle);
        }
        .cv-timer-blocks {
          display: flex;
          justify-content: center;
          gap: var(--cv-spacing-md);
        }
        .cv-timer-block {
          display: flex;
          flex-direction: column;
          align-items: center;
          background: var(--cv-color-background);
          padding: var(--cv-spacing-sm);
          border-radius: var(--cv-border-radius-sm);
          min-width: 60px;
          border: var(--cv-border-width) solid var(--cv-color-border);
        }
        .cv-timer-value {
          font-size: 1.5rem;
          font-weight: 700;
          color: var(--cv-color-primary);
        }
        .cv-timer-label {
          font-size: 0.75rem;
          text-transform: uppercase;
          color: var(--cv-color-text-muted);
          margin-top: 0.25rem;
        }
        .cv-timer-has-bg .cv-timer-block {
          /* Deliberately more translucent than --cv-color-scrim-strong: the photo
             behind these blocks should still read through them. */
          background: var(--cv-timer-glass-bg, rgba(15, 17, 21, 0.55));
          border-color: rgba(255, 255, 255, 0.25);
          backdrop-filter: blur(2px);
        }
        .cv-timer-has-bg .cv-timer-value {
          color: var(--cv-color-on-media, #fff);
        }
        .cv-timer-has-bg .cv-timer-label {
          color: rgba(255, 255, 255, 0.75);
        }

        /* Variants — control the widget's own background/text when there's no
           photo background (backgroundImageUrl already forces the "has-bg"
           look above); the block/value/label accent styling always applies,
           even over a photo, so e.g. neon's glow still reads on top of one. */
        .cv-timer-variant-dark:not(.cv-timer-has-bg) {
          background-color: var(--cv-timer-dark-bg, #0f172a);
          color: var(--cv-color-on-media, #fff);
          border-color: rgba(255, 255, 255, 0.12);
        }
        .cv-timer-variant-dark:not(.cv-timer-has-bg) .cv-timer-block {
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(255, 255, 255, 0.14);
        }
        .cv-timer-variant-dark:not(.cv-timer-has-bg) .cv-timer-value {
          color: var(--cv-color-on-media, #fff);
        }
        .cv-timer-variant-dark:not(.cv-timer-has-bg) .cv-timer-label {
          color: rgba(255, 255, 255, 0.6);
        }

        .cv-timer-variant-gray:not(.cv-timer-has-bg) {
          background-color: var(--cv-timer-gray-bg, #64748b);
          color: var(--cv-color-on-media, #fff);
          border-color: rgba(255, 255, 255, 0.15);
        }
        .cv-timer-variant-gray:not(.cv-timer-has-bg) .cv-timer-block {
          background: rgba(255, 255, 255, 0.12);
          border-color: rgba(255, 255, 255, 0.2);
        }
        .cv-timer-variant-gray:not(.cv-timer-has-bg) .cv-timer-value {
          color: var(--cv-color-on-media, #fff);
        }
        .cv-timer-variant-gray:not(.cv-timer-has-bg) .cv-timer-label {
          color: rgba(255, 255, 255, 0.75);
        }

        .cv-timer-variant-neon:not(.cv-timer-has-bg) {
          background-color: var(--cv-timer-neon-bg, #0a0a12);
          color: var(--cv-color-on-media, #fff);
          border-color: var(--cv-timer-neon-border, rgba(6, 240, 240, 0.4));
        }
        .cv-timer-variant-neon .cv-timer-block {
          background: rgba(10, 10, 20, 0.55);
          border: 1px solid var(--cv-timer-neon-edge, rgba(6, 240, 240, 0.6));
          box-shadow: 0 0 12px var(--cv-timer-neon-glow, rgba(6, 240, 240, 0.5)), inset 0 0 8px rgba(127, 196, 222, 0.15);
        }
        .cv-timer-variant-neon .cv-timer-value {
          color: var(--cv-timer-neon-accent, #0ff0f0);
          text-shadow: 0 0 8px rgba(6, 240, 240, 0.9), 0 0 16px var(--cv-timer-neon-glow, rgba(6, 240, 240, 0.5));
        }
        .cv-timer-variant-neon .cv-timer-label {
          color: var(--cv-timer-neon-accent-alt, rgba(127, 196, 222, 0.85));
          text-shadow: 0 0 6px var(--cv-timer-neon-glow, rgba(127, 196, 222, 0.6));
        }
        .cv-timer-variant-neon .cv-timer-title {
          color: var(--cv-timer-neon-accent, #0ff0f0);
          text-shadow: 0 0 10px rgba(6, 240, 240, 0.7);
        }