.timer-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.progress-ring {
    position: relative;
    width: 100%;
    height: 100%;
}

.progress-ring__circle {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.progress-ring__background {
    fill: none;
    stroke: var(--bs-secondary);
    stroke-width: 12;
}

.progress-ring__progress {
    fill: none;
    stroke: var(--bs-success);
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s;
}

.timer-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.5rem;
    font-weight: bold;
    font-family: monospace;
}

.appointment-counter {
    font-size: 1.5rem;
    color: var(--bs-secondary);
}

.btn {
    min-width: 120px;
    padding: 15px 30px;
}

/* Prevent text selection on touch devices */
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}