/* Kegel Exercise Timer - Clean UI */

/* Status Badge */
#statusBadge {
    background-color: #6c757d;
    color: white;
    transition: all 0.3s ease;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#statusBadge.squeeze {
    background-color: #dc3545;
}

#statusBadge.release {
    background-color: #198754;
}

#statusBadge.rest {
    background-color: #0dcaf0;
    color: #000;
}

#statusBadge.completed {
    background-color: #198754;
}

#statusBadge.ready {
    background-color: #ffc107;
    color: #000;
}

/* Main Visual Container */
.kegel-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 280px;
    margin: 0 auto;
}

/* Direction Arrows */
.arrow {
    position: absolute;
    opacity: 0;
    transition: all 0.3s ease;
}

.arrow img {
    transition: all 0.3s ease;
    filter: brightness(0) saturate(100%) invert(70%);
}

.arrow-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.arrow-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.arrow-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.arrow-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Squeeze - arrows point inward, red */
.kegel-visual.squeeze .arrow {
    opacity: 1;
}

.kegel-visual.squeeze .arrow img {
    filter: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(2158%) hue-rotate(336deg) brightness(87%) contrast(90%);
}

.kegel-visual.squeeze .arrow-top {
    animation: arrow-in-top 0.8s ease-in-out infinite;
}

.kegel-visual.squeeze .arrow-bottom {
    animation: arrow-in-bottom 0.8s ease-in-out infinite;
}

.kegel-visual.squeeze .arrow-left {
    animation: arrow-in-left 0.8s ease-in-out infinite;
}

.kegel-visual.squeeze .arrow-right {
    animation: arrow-in-right 0.8s ease-in-out infinite;
}

/* Release - arrows point outward, green */
.kegel-visual.release .arrow {
    opacity: 1;
}

.kegel-visual.release .arrow img {
    filter: brightness(0) saturate(100%) invert(43%) sepia(96%) saturate(382%) hue-rotate(107deg) brightness(92%) contrast(88%);
}

.kegel-visual.release .arrow-top img {
    transform: rotate(180deg);
}

.kegel-visual.release .arrow-bottom img {
    transform: rotate(180deg);
}

.kegel-visual.release .arrow-left img {
    transform: rotate(180deg);
}

.kegel-visual.release .arrow-right img {
    transform: rotate(180deg);
}

.kegel-visual.release .arrow-top {
    animation: arrow-out-top 0.8s ease-in-out infinite;
}

.kegel-visual.release .arrow-bottom {
    animation: arrow-out-bottom 0.8s ease-in-out infinite;
}

.kegel-visual.release .arrow-left {
    animation: arrow-out-left 0.8s ease-in-out infinite;
}

.kegel-visual.release .arrow-right {
    animation: arrow-out-right 0.8s ease-in-out infinite;
}

/* Arrow animations - inward */
@keyframes arrow-in-top {
    0%, 100% { top: 0; }
    50% { top: 15px; }
}

@keyframes arrow-in-bottom {
    0%, 100% { bottom: 0; }
    50% { bottom: 15px; }
}

@keyframes arrow-in-left {
    0%, 100% { left: 0; }
    50% { left: 15px; }
}

@keyframes arrow-in-right {
    0%, 100% { right: 0; }
    50% { right: 15px; }
}

/* Arrow animations - outward */
@keyframes arrow-out-top {
    0%, 100% { top: 0; }
    50% { top: -10px; }
}

@keyframes arrow-out-bottom {
    0%, 100% { bottom: 0; }
    50% { bottom: -10px; }
}

@keyframes arrow-out-left {
    0%, 100% { left: 0; }
    50% { left: -10px; }
}

@keyframes arrow-out-right {
    0%, 100% { right: 0; }
    50% { right: -10px; }
}

/* The Animated Circle */
.kegel-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.1),
        inset 0 -5px 15px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .kegel-circle {
    background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 -5px 15px rgba(0, 0, 0, 0.2);
}

/* Squeeze State - Circle contracts */
.kegel-visual.squeeze .kegel-circle {
    width: 120px;
    height: 120px;
    background: linear-gradient(145deg, #f8d7da, #f1aeb5);
    box-shadow:
        0 5px 20px rgba(220, 53, 69, 0.4),
        inset 0 -3px 10px rgba(220, 53, 69, 0.2);
    animation: squeeze-pulse 1s ease-in-out infinite;
}

[data-bs-theme="dark"] .kegel-visual.squeeze .kegel-circle {
    background: linear-gradient(145deg, #842029, #58151c);
}

/* Release State - Circle expands */
.kegel-visual.release .kegel-circle {
    width: 200px;
    height: 200px;
    background: linear-gradient(145deg, #d1e7dd, #a3cfbb);
    box-shadow:
        0 15px 40px rgba(25, 135, 84, 0.3),
        inset 0 -5px 15px rgba(25, 135, 84, 0.1);
}

[data-bs-theme="dark"] .kegel-visual.release .kegel-circle {
    background: linear-gradient(145deg, #0f5132, #0a3622);
}

/* Rest State */
.kegel-visual.rest .kegel-circle {
    width: 180px;
    height: 180px;
    background: linear-gradient(145deg, #cff4fc, #9eeaf9);
    box-shadow:
        0 10px 30px rgba(13, 202, 240, 0.3),
        inset 0 -5px 15px rgba(13, 202, 240, 0.1);
    animation: rest-breathe 2s ease-in-out infinite;
}

[data-bs-theme="dark"] .kegel-visual.rest .kegel-circle {
    background: linear-gradient(145deg, #055160, #032830);
}

/* Ready State */
.kegel-visual.ready .kegel-circle {
    background: linear-gradient(145deg, #fff3cd, #ffe69c);
    animation: ready-pulse 0.8s ease-in-out infinite;
}

[data-bs-theme="dark"] .kegel-visual.ready .kegel-circle {
    background: linear-gradient(145deg, #664d03, #332701);
}

/* Completed State */
.kegel-visual.completed .kegel-circle {
    width: 180px;
    height: 180px;
    background: linear-gradient(145deg, #d1e7dd, #a3cfbb);
    box-shadow:
        0 15px 40px rgba(25, 135, 84, 0.4);
    animation: completed-celebrate 0.6s ease-out;
}

/* Countdown Number */
.kegel-countdown {
    font-size: 4rem;
    font-weight: 700;
    color: #333;
    transition: color 0.3s ease;
    line-height: 1;
}

[data-bs-theme="dark"] .kegel-countdown {
    color: #f8f9fa;
}

.kegel-visual.squeeze .kegel-countdown {
    font-size: 3rem;
    color: #dc3545;
}

.kegel-visual.release .kegel-countdown {
    font-size: 4.5rem;
    color: #198754;
}

.kegel-visual.rest .kegel-countdown {
    color: #0dcaf0;
}

.kegel-visual.ready .kegel-countdown {
    color: #997404;
}

[data-bs-theme="dark"] .kegel-visual.ready .kegel-countdown {
    color: #ffc107;
}

.kegel-visual.completed .kegel-countdown {
    font-size: 3rem;
    color: #198754;
}

/* Animations */
@keyframes squeeze-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
}

@keyframes rest-breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.9;
    }
}

@keyframes ready-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

@keyframes completed-celebrate {
    0% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(0.95); }
    75% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Hint Text */
#hintText {
    font-size: 0.95rem;
    max-width: 400px;
    margin: 0 auto;
    min-height: 48px;
    transition: color 0.3s ease;
}

/* Rep Dots */
.rep-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 320px;
    margin: 0 auto;
}

.rep-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #dee2e6;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .rep-dot {
    background: #495057;
}

.rep-dot.active {
    background: #ffc107;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

.rep-dot.done {
    background: #198754;
}

/* Buttons */
#startBtn {
    transition: all 0.3s ease;
}

#startBtn.btn-warning {
    color: #000;
}

#resetBtn:hover:not(:disabled) {
    transform: rotate(-180deg);
}

/* Settings chevron */
#settingsChevron {
    transition: transform 0.3s ease;
}

[aria-expanded="true"] #settingsChevron {
    transform: rotate(180deg);
}

#settingsCollapse .form-control:disabled {
    opacity: 0.5;
}