/* ==========================================================
   CALENDAR STRIP
========================================================== */

#calendar-strip {
    position: absolute;
    left: 0;
    top: 306px;
    width: 100%;
    height: 52px;
    --gradient-east: #000000;
    background: linear-gradient(90deg, #cc0066 0%, var(--gradient-east) 100%);
    overflow: hidden;
    box-sizing: border-box;
}

#calendar-strip .date-selector-bar {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#calendar-strip .calendar-strip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

#calendar-strip .calendar-strip {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 0 8px;
    min-width: max-content;
    height: 100%;
    align-items: center;
}

#calendar-strip .calendar-tile {
    flex: 0 0 49px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    color: #ffffff;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.2;
    font-size: clamp(8px, 2vw, 12px);
    font-weight: 600;
    overflow: hidden;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%,
            80% 100%, 20% 100%, 0% 80%, 0% 20%);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%),
        #190033;
    border: 1px solid #013a06;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

#calendar-strip .calendar-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.10), transparent 65%);
    pointer-events: none;
}

#calendar-strip .calendar-tile:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%),
        #190033;
    border-color: rgba(255, 255, 255, 0.20);
    transform: scale(1.02);
}

#calendar-strip .calendar-tile:active {
    transform: scale(0.96);
}

#calendar-strip .calendar-tile-active {
    background:
        linear-gradient(180deg, rgba(204, 0, 102, 0.40) 0%, rgba(204, 0, 102, 0.15) 100%),
        #190033;
    border-color: #cc0066;
    box-shadow: 0 0 20px rgba(204, 0, 102, 0.30);
}

#calendar-strip .calendar-tile-today {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%),
        #2a004d;
    border-color: #f70491;
}

#calendar-strip .calendar-day,
#calendar-strip .calendar-date {
    position: relative;
    z-index: 1;
    text-align: center;
    white-space: nowrap;
}

#calendar-strip .calendar-day {
    font-size: clamp(7px, 1.8vw, 11px);
    line-height: 1.2;
    opacity: 0.85;
}

#calendar-strip .calendar-date {
    font-size: clamp(9px, 2.2vw, 12px);
    line-height: 1.2;
    font-weight: 700;
}

#calendar-strip .calendar-tile-active .calendar-date {
    color: #f70491;
}

#calendar-strip .calendar-tile-today .calendar-date {
    color: #f70491;
}

#calendar-strip .calendar-tile:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

#calendar-strip .calendar-tile:focus:not(:focus-visible) {
    outline: none;
}

/* Scrollbar styling */
#calendar-strip .calendar-strip-inner::-webkit-scrollbar {
    height: 3px;
}

#calendar-strip .calendar-strip-inner::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

#calendar-strip .calendar-strip-inner::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.20);
    border-radius: 10px;
}

#calendar-strip .calendar-strip-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.20) rgba(255, 255, 255, 0.05);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 420px) {
    #calendar-strip {
        width: 100%;
        left: 0;
        top: 306px;
    }

    #calendar-strip .calendar-tile {
        flex: 0 0 42px;
        height: 38px;
        font-size: clamp(7px, 1.6vw, 10px);
    }

    #calendar-strip .calendar-strip {
        gap: 9px;
        padding: 0 4px;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    #calendar-strip {
        top: 200px;
        height: 44px;
    }

    #calendar-strip .calendar-tile {
        flex: 0 0 40px;
        height: 34px;
        font-size: clamp(6px, 1.4vw, 9px);
    }

    #calendar-strip .calendar-strip {
        gap: 3px;
        padding: 0 4px;
    }
}