/* TwoWeekCalendar (js/two-week-calendar.js) — compact 2-week filter calendar.
   Fills 100% of its container width; today bold; selection = pink circle. */

.twc {
    width: 100%;
    font-family: var(--font-main);
    direction: rtl;
}

.twc-weekdays,
.twc-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    direction: rtl;
}

.twc-weekdays {
    margin-bottom: 6px;
}

/* nav row: arrows page the 2-week window back / forward */
.twc-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.twc-range {
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.twc-arrow {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: var(--black-color);
    cursor: pointer;
    transition: background 0.15s ease;
}

.twc-arrow:hover:not(:disabled) {
    background: #f2f2f2;
}

.twc-arrow:disabled {
    color: #ccc;
    cursor: default;
}

.twc-weekday {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #777;
}

.twc-day {
    width: 38px;
    height: 38px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    font-family: var(--font-main);
    font-size: 15px;
    color: var(--black-color);
    cursor: pointer;
    transition: background 0.15s ease;
}

.twc-day:hover:not(:disabled):not(.twc-selected) {
    background: #f2f2f2;
}

.twc-past {
    color: #ccc;
    cursor: default;
}

.twc-today {
    font-weight: 800;   /* today is bold */
}

.twc-selected {
    background: var(--pink-color);   /* selection: pink rounded */
    color: #fff;
    font-weight: bold;
}