.tf-countdown-wrapper {
display: flex;
align-items: center;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.tf-countdown-item {
text-align: center;
margin: 0 5px;
}
.tf-countdown-value {
display: block;
font-size: 2em;
font-weight: bold;
line-height: 1;
color: #333;
}
.tf-countdown-label {
display: block;
font-size: 0.8em;
color: #666;
text-transform: uppercase;
margin-top: 5px;
}
.tf-countdown-separator {
font-size: 2em;
font-weight: bold;
color: #666;
margin: 0 5px;
line-height: 1;
}
.tf-countdown-expired {
color: #dc3545;
font-weight: bold;
font-size: 1.5em;
} .tf-template-minimal {
background: #f8f9fa;
padding: 20px;
border-radius: 5px;
}
.tf-template-minimal .tf-countdown-value {
background: #fff;
padding: 10px 15px;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
} .tf-template-modern {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
padding: 20px;
border-radius: 10px;
color: #fff;
}
.tf-template-modern .tf-countdown-value {
color: #fff;
}
.tf-template-modern .tf-countdown-label {
color: rgba(255,255,255,0.8);
}
.tf-template-modern .tf-countdown-separator {
color: rgba(255,255,255,0.6);
} .tf-template-classic {
background: #fff;
padding: 15px;
border: 2px solid #ddd;
border-radius: 3px;
}
.tf-template-classic .tf-countdown-value {
color: #2c5282;
} @media (max-width: 768px) {
.tf-countdown-wrapper {
flex-wrap: wrap;
}
.tf-countdown-item {
margin: 10px;
}
.tf-countdown-value {
font-size: 1.5em;
}
.tf-countdown-separator {
font-size: 1.5em;
}
} .tinyfunnel-countdown {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 16px;
line-height: 1.4;
text-align: center;
margin: 20px 0;
} .default-countdown {
font-size: 24px;
font-weight: bold;
color: #333;
letter-spacing: 1px;
} .minimal-countdown {
font-family: monospace;
font-size: 28px;
color: #666;
letter-spacing: 2px;
background: #f5f5f5;
padding: 15px;
border-radius: 5px;
display: inline-block;
} .modern-countdown {
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.modern-countdown .time-value {
font-size: 32px;
font-weight: 600;
letter-spacing: 2px;
}
.modern-countdown .time-value span {
font-size: 16px;
opacity: 0.8;
margin: 0 5px;
} .classic-countdown {
display: flex;
justify-content: center;
gap: 20px;
}
.classic-countdown .time-section {
display: flex;
flex-direction: column;
align-items: center;
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
min-width: 80px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.classic-countdown .value {
font-size: 36px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.classic-countdown .label {
font-size: 12px;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
} .countdown-expired {
font-size: 24px;
color: #dc3545;
font-weight: bold;
padding: 10px;
}
.tinyfunnel-countdown.expired {
opacity: 0.7;
} @media (max-width: 768px) {
.classic-countdown {
flex-wrap: wrap;
gap: 10px;
}
.classic-countdown .time-section {
min-width: 60px;
padding: 10px;
}
.classic-countdown .value {
font-size: 24px;
}
.modern-countdown .time-value {
font-size: 24px;
}
.minimal-countdown {
font-size: 20px;
}
}