/* ============================================
   MOBILE CALENDAR - Full-Screen Airbnb Style
   ============================================ */

/* Overlay backdrop */
.mc-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: white;
    z-index: 9999;
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
}
.mc-overlay.mc-visible {
    display: flex;
}

/* Header - STICKY to keep reset button visible */
.mc-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    min-height: 52px;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}
.mc-reset-btn {
    border: none; background: none;
    font-size: 14px; font-weight: 600;
    color: #222; cursor: pointer;
    text-decoration: underline;
    padding: 8px 12px;
}
.mc-reset-btn:active { opacity: 0.6; }

/* Date summary bar */
.mc-date-summary {
    display: flex;
    padding: 16px;
    gap: 12px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.mc-date-box {
    flex: 1;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 12px;
    text-align: center;
    transition: border-color 0.2s;
}
.mc-date-box.mc-active {
    border-color: #222;
}
.mc-date-box.mc-filled {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.04);
}
.mc-date-box-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #717171;
    margin-bottom: 4px;
}
.mc-date-box-value {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}
.mc-date-box-value.mc-placeholder {
    color: #b0b0b0;
    font-weight: 400;
}

/* Weekday header (sticky) */
.mc-weekday-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 10px 16px 8px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.mc-weekday-header span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #717171;
    text-transform: uppercase;
}

/* Scrollable months container */
.mc-months-container {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 120px;
}

/* Month block */
.mc-month {
    padding: 24px 0 8px;
}
.mc-month-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
    text-transform: capitalize;
}

/* Day grid */
.mc-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 0;
}

/* Individual day cell */
.mc-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    color: #222;
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.mc-day:active:not(.mc-disabled):not(.mc-empty) {
    background: #f0f0f0;
}

/* Disabled dates (past dates) */
.mc-day.mc-disabled {
    color: #d0d0d0;
    cursor: not-allowed;
    text-decoration: line-through;
    pointer-events: none;
}

/* Empty cells (padding days from other months) */
.mc-day.mc-empty {
    cursor: default;
    pointer-events: none;
}

/* Selected start / end dates */
.mc-day.mc-range-start,
.mc-day.mc-range-end {
    background: #222;
    color: white !important;
    font-weight: 600;
    z-index: 2;
}

/* In-range days (between start and end) */
.mc-day.mc-in-range {
    background: #f0f0f0;
    border-radius: 0;
    color: #222;
}

/* Range start gets left rounding, range end gets right rounding */
.mc-day.mc-range-start {
    border-radius: 50% 0 0 50%;
}
.mc-day.mc-range-end {
    border-radius: 0 50% 50% 0;
}

/* When start == end (single date selected) */
.mc-day.mc-range-start.mc-range-end {
    border-radius: 50%;
}

/* Hover-like effect on non-selected days (only on first tap before range complete) */
.mc-day.mc-selected {
    background: #222;
    color: white !important;
    border-radius: 50%;
    z-index: 2;
}

/* Footer / Save bar - STICKY to stay visible while scrolling */
.mc-footer {
    position: sticky;
    bottom: 0; left: 0; right: 0;
    padding: 16px;
    background: white;
    border-top: 1px solid #eee;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Shadow to indicate it's floating above content */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 10;
}
.mc-footer-top {
    display: flex;
    gap: 12px;
    align-items: center;
}
.mc-footer-message {
    flex: 1;
    font-size: 13px;
    color: #717171;
    line-height: 1.3;
}
.mc-save-btn {
    /* Apple HIG minimum tap target: 44px × 44px */
    min-height: 44px;
    padding: 14px 28px;
    background: #222;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.1s;
    /* Prevent text selection on double-tap */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mc-save-btn:active {
    background: #444;
    transform: scale(0.98);
}
.mc-save-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}
.mc-footer-separator {
    height: 1px;
    background: #eee;
    margin: 0;
}
.mc-close-btn {
    /* Apple HIG minimum tap target: 44px × 44px */
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    padding: 12px;
    border-radius: 8px;
    transition: background 0.2s, transform 0.1s;
    /* Prevent text selection on double-tap */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mc-close-btn:active {
    background: #f0f0f0;
    transform: scale(0.98);
}

/* Slide-up animation */
@keyframes mc-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.mc-overlay.mc-visible {
    animation: mc-slide-up 0.3s ease-out;
}

/* Safe area for notched phones (iPhone X+, Dynamic Island) */
@supports (padding-top: env(safe-area-inset-top)) {
    .mc-header {
        padding-top: max(12px, calc(12px + env(safe-area-inset-top)));
        padding-left: max(16px, calc(16px + env(safe-area-inset-left)));
        padding-right: max(16px, calc(16px + env(safe-area-inset-right)));
    }
    .mc-footer {
        /* CRITICAL: Add safe-area-inset-bottom for iPhone home indicator */
        padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
        padding-left: max(16px, calc(16px + env(safe-area-inset-left)));
        padding-right: max(16px, calc(16px + env(safe-area-inset-right)));
    }
    /* Ensure scrollable content doesn't get hidden behind footer */
    .mc-months-container {
        padding-bottom: max(120px, calc(120px + env(safe-area-inset-bottom)));
    }
}