/**
 * Gym Calendar Widget – Styles
 * File: assets/css/gym-calendar.css
 */

/* ─── Root Variables ─────────────────────────────────────── */
.gym-calendar-wrap {
    --gc-primary:    #e63946;
    --gc-bg:         #ffffff;
    --gc-border:     #e8e8e8;
    --gc-text:       #1d1d1d;
    --gc-text-muted: #888888;
    --gc-cell-hover: #fff5f5;
    --gc-radius:     12px;
    --gc-font:       'Oswald', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    --gc-font-body:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    font-family:  var(--gc-font-body);
    color:        var(--gc-text);
    overflow:     hidden;
    border-radius: var(--gc-radius);
    box-shadow:   0 8px 40px rgba(0,0,0,.10);
    background:   var(--gc-bg);
}

/* ─── Header ─────────────────────────────────────────────── */
.gym-cal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    background:      var(--gc-primary);
    padding:         18px 20px;
}

.gym-cal-title {
    font-family:  var(--gc-font);
    font-size:    1.4rem;
    font-weight:  700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:        #fff;
    margin:       0;
    flex:         1;
    text-align:   center;
}

.gym-cal-nav-btn,
.gym-cal-view-toggle {
    background:    rgba(255,255,255,.18);
    border:        none;
    color:         #fff;
    width:         36px;
    height:        36px;
    border-radius: 50%;
    cursor:        pointer;
    font-size:     1.4rem;
    line-height:   1;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background .2s, transform .15s;
    flex-shrink:   0;
}

.gym-cal-nav-btn:hover,
.gym-cal-view-toggle:hover {
    background: rgba(255,255,255,.35);
    transform:  scale(1.1);
}

/* ─── Day Labels ─────────────────────────────────────────── */
.gym-cal-days-row {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    background:            #f8f8f8;
    border-bottom:         1px solid var(--gc-border);
}

.gym-cal-day-label {
    text-align:     center;
    padding:        10px 4px;
    font-family:    var(--gc-font);
    font-size:      .75rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--gc-text-muted);
}

/* ─── Grid ───────────────────────────────────────────────── */
.gym-cal-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   1px;
    background:            var(--gc-border);
}

.gym-cal-cell {
    background:   var(--gc-bg);
    min-height:   76px;
    padding:      8px 6px 6px;
    cursor:       default;
    position:     relative;
    transition:   background .15s;
    display:      flex;
    flex-direction: column;
    align-items:  flex-start;
    gap:          4px;
}

.gym-cal-cell:not(.gym-cal-cell--empty):hover {
    background: var(--gc-cell-hover);
    cursor:     pointer;
}

.gym-cal-cell--empty {
    background: #fafafa;
}

.gym-cal-today {
    border-top: 3px solid var(--gc-primary) !important;
}

.gym-cal-today .gym-cal-day-num {
    color:          var(--gc-primary);
    font-weight:    800;
}

.gym-cal-day-num {
    font-family:  var(--gc-font);
    font-size:    .95rem;
    font-weight:  600;
    color:        var(--gc-text);
    line-height:  1;
}

/* Event / class dots */
.gym-cal-dot {
    display:       inline-block;
    width:         100%;
    height:        5px;
    border-radius: 3px;
    margin-top:    2px;
    flex-shrink:   0;
}

.gym-cal-more {
    font-size:   .65rem;
    color:       var(--gc-text-muted);
    margin-top:  2px;
    font-weight: 600;
}

/* ─── Legend ─────────────────────────────────────────────── */
.gym-cal-legend {
    display:     flex;
    gap:         20px;
    padding:     12px 20px;
    border-top:  1px solid var(--gc-border);
    background:  #fafafa;
}

.gym-cal-legend-item {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   .8rem;
    color:       var(--gc-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.gym-cal-legend-dot {
    width:         12px;
    height:        12px;
    border-radius: 3px;
    display:       inline-block;
}

/* ─── List View ──────────────────────────────────────────── */
.gym-cal-list-view {
    padding: 16px;
}

.gym-cal-list-day {
    margin-bottom: 20px;
}

.gym-cal-list-date {
    font-family:    var(--gc-font);
    font-size:      .85rem;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--gc-text-muted);
    margin-bottom:  8px;
    padding-bottom: 6px;
    border-bottom:  1px solid var(--gc-border);
}

.gym-cal-list-item {
    background:    #fafafa;
    border-radius: 8px;
    padding:       12px 14px;
    margin-bottom: 8px;
    transition:    box-shadow .15s;
}

.gym-cal-list-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.gym-cal-list-item-name {
    font-weight:   700;
    font-size:     .95rem;
    margin-bottom: 4px;
}

.gym-cal-list-item-meta {
    font-size: .82rem;
    color:     var(--gc-text-muted);
    margin-bottom: 8px;
}

.gym-cal-list-empty {
    text-align: center;
    color:      var(--gc-text-muted);
    padding:    40px 0;
}

/* ─── Modal ──────────────────────────────────────────────── */
.gym-cal-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.gym-cal-modal.is-open {
    display: flex;
}

.gym-cal-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(3px);
}

.gym-cal-modal-box {
    position:      relative;
    background:    #fff;
    border-radius: 16px;
    width:         min(480px, 92vw);
    max-height:    80vh;
    overflow-y:    auto;
    padding:       28px;
    box-shadow:    0 20px 60px rgba(0,0,0,.25);
    animation:     gcModalIn .25s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes gcModalIn {
    from { opacity:0; transform: scale(.88) translateY(20px); }
    to   { opacity:1; transform: scale(1)   translateY(0); }
}

.gym-cal-modal-close {
    position:      absolute;
    top:           12px;
    right:         14px;
    background:    #f1f1f1;
    border:        none;
    border-radius: 50%;
    width:         32px;
    height:        32px;
    font-size:     1.2rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    line-height:   1;
    transition:    background .15s;
    color:         #444;
}

.gym-cal-modal-close:hover { background: #ddd; }

.gym-cal-modal-date {
    font-family:    var(--gc-font);
    font-size:      1.1rem;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--gc-primary);
    margin:         0 0 16px;
}

.gym-cal-modal-item {
    background:    #fafafa;
    border-radius: 10px;
    padding:       14px 16px;
    margin-bottom: 12px;
    position:      relative;
}

.gym-cal-modal-item strong {
    display:       block;
    font-size:     1rem;
    margin-bottom: 6px;
    margin-top:    6px;
}

.gym-cal-modal-item p {
    margin:     3px 0;
    font-size:  .85rem;
    color:      var(--gc-text-muted);
}

.gym-cal-modal-badge {
    display:        inline-block;
    padding:        2px 8px;
    border-radius:  20px;
    font-size:      .68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          #fff;
    margin-bottom:  4px;
}

/* Book / Details button */
.gym-cal-modal-btn {
    display:         inline-block;
    margin-top:      10px;
    background:      var(--gc-primary);
    color:           #fff !important;
    text-decoration: none;
    border-radius:   6px;
    padding:         7px 16px;
    font-size:       .82rem;
    font-weight:     700;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    transition:      background .15s, transform .1s;
}

.gym-cal-modal-btn:hover {
    background: #c1121f;
    transform:  translateY(-1px);
}

.gym-cal-modal-btn--sm {
    padding:   5px 12px;
    font-size: .75rem;
    margin-top: 6px;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .gym-cal-cell  { min-height: 54px; padding: 5px 3px; }
    .gym-cal-title { font-size: 1rem; }
    .gym-cal-day-label { font-size: .65rem; padding: 8px 2px; }
    .gym-cal-day-num   { font-size: .8rem; }
    .gym-cal-legend    { flex-wrap: wrap; gap: 10px; }
}