/* =============================================================================
   THEME-AWARE CSS VARIABLES FOR MY RENTAL CALENDAR
   ============================================================================= */

:root {
    /* Brand Colors - Sjörydet Huisstijl (PLAN_BRANDING.md) */
    --mrc-brand-primary: #840e12;           /* Sjörydet rood (hoofdkleur) */
    --mrc-brand-gradient-end: #c41419;      /* Lichter rood voor gradients */
    --mrc-brand-bg-dark: #2f3033;          /* Donker grijs achtergrond */
    
    /* Brand Gradients */
    --mrc-gradient-primary: linear-gradient(135deg, #840e12 0%, #c41419 100%);
    --mrc-gradient-subtle: linear-gradient(135deg, #840e12 0%, #a41015 100%);
    --mrc-gradient-dark-primary: linear-gradient(135deg, #2f3033 0%, #840e12 100%);
    
    /* Success/Discount Gradient (BEWAARD - niet branding) */
    --mrc-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    
    /* Brand Color Variants (met alpha) */
    --mrc-brand-primary-alpha-light: rgba(132, 14, 18, 0.15);
    --mrc-brand-primary-alpha-medium: rgba(132, 14, 18, 0.35);
    --mrc-brand-primary-alpha-strong: rgba(132, 14, 18, 0.6);
    
    /* Legend Colors - Theme Customizable */
    --mrc-legend-available: #10b981;        /* Green for available dates */
    --mrc-legend-unavailable: #dc2626;      /* Red for unavailable dates */
    --mrc-legend-booked: #f59e0b;          /* Orange for booked dates */
    --mrc-legend-pending: #3b82f6;         /* Blue for pending bookings */
    --mrc-legend-external: #6b7280;        /* Gray for external blocks */
    
    /* Legend Alpha Variants (with theme fallbacks) */
    --mrc-legend-available-alpha: rgba(16, 185, 129, 0.15);
    --mrc-legend-unavailable-alpha: rgba(220, 38, 38, 0.15);
    --mrc-legend-booked-alpha: rgba(245, 158, 11, 0.15);
    --mrc-legend-pending-alpha: rgba(59, 130, 246, 0.15);
    --mrc-legend-external-alpha: rgba(107, 114, 128, 0.15);
    
    /* Legend Border Variants */
    --mrc-legend-available-border: rgba(16, 185, 129, 0.35);
    --mrc-legend-unavailable-border: rgba(220, 38, 38, 0.35);
    --mrc-legend-booked-border: rgba(245, 158, 11, 0.35);
    --mrc-legend-pending-border: rgba(59, 130, 246, 0.35);
    --mrc-legend-external-border: rgba(107, 114, 128, 0.35);
    
    /* Legend Text Colors */
    --mrc-legend-available-text: #047857;
    --mrc-legend-unavailable-text: #991b1b;
    --mrc-legend-booked-text: #92400e;
    --mrc-legend-pending-text: #1e40af;
    --mrc-legend-external-text: #374151;
    
    /* Progressive Enhancement with color-mix (for modern browsers) */
    @supports (color: color-mix(in srgb, #000 0%, #fff 100%)) {
        --mrc-legend-available-alpha: color-mix(in srgb, var(--mrc-legend-available) 15%, transparent);
        --mrc-legend-unavailable-alpha: color-mix(in srgb, var(--mrc-legend-unavailable) 15%, transparent);
        --mrc-legend-booked-alpha: color-mix(in srgb, var(--mrc-legend-booked) 15%, transparent);
        --mrc-legend-pending-alpha: color-mix(in srgb, var(--mrc-legend-pending) 15%, transparent);
        --mrc-legend-external-alpha: color-mix(in srgb, var(--mrc-legend-external) 15%, transparent);
        
        --mrc-legend-available-border: color-mix(in srgb, var(--mrc-legend-available) 35%, transparent);
        --mrc-legend-unavailable-border: color-mix(in srgb, var(--mrc-legend-unavailable) 35%, transparent);
        --mrc-legend-booked-border: color-mix(in srgb, var(--mrc-legend-booked) 35%, transparent);
        --mrc-legend-pending-border: color-mix(in srgb, var(--mrc-legend-pending) 35%, transparent);
        --mrc-legend-external-border: color-mix(in srgb, var(--mrc-legend-external) 35%, transparent);
        
        --mrc-legend-available-text: color-mix(in srgb, var(--mrc-legend-available) 80%, black);
        --mrc-legend-unavailable-text: color-mix(in srgb, var(--mrc-legend-unavailable) 80%, black);
        --mrc-legend-booked-text: color-mix(in srgb, var(--mrc-legend-booked) 80%, black);
        --mrc-legend-pending-text: color-mix(in srgb, var(--mrc-legend-pending) 80%, black);
        --mrc-legend-external-text: color-mix(in srgb, var(--mrc-legend-external) 80%, black);
    }
}

/* Visuele boekingen in kalender */
.booking-event {
  border-radius: var(--mrc-booking-radius, 6px) !important;
  font-weight: bold;
  opacity: 0.95;
  font-size: 0.95em;
  padding: 2px 4px;
  box-shadow: var(--mrc-booking-shadow, 0 2px 6px rgba(0,0,0,0.08));
}

.booking-status-confirmed, .booking-status-bevestigd {
  background: var(--mrc-booking-confirmed-bg, #39e639) !important;
  color: var(--mrc-booking-confirmed-text, #fff) !important;
  border: 1.5px solid var(--mrc-booking-confirmed-border, #39e639) !important;
}

.booking-status-pending, .booking-status-aanvraag {
  background: var(--mrc-booking-pending-bg, #ffb347) !important;
  color: var(--mrc-booking-pending-text, #222) !important;
  border: 1.5px solid var(--mrc-booking-pending-border, #ffb347) !important;
}

.booking-status-cancelled, .booking-status-geannuleerd {
  background: var(--mrc-booking-cancelled-bg, #bdbdbd) !important;
  color: var(--mrc-booking-cancelled-text, #fff) !important;
  border: 1.5px solid var(--mrc-booking-cancelled-border, #bdbdbd) !important;
}

/* Externe blokkades styling */
.external-block {
  border-radius: var(--mrc-external-radius, 6px) !important;
  font-weight: bold;
  opacity: 0.9;
  font-size: 0.875em;
  padding: 2px 4px;
  box-shadow: var(--mrc-external-shadow, 0 2px 4px rgba(0,0,0,0.15));
}

.external-block.platform-airbnb {
  background: var(--mrc-airbnb-bg, #ff5a5f) !important;
  border-color: var(--mrc-airbnb-border, #e8474c) !important;
}

.external-block.platform-booking {
  background: var(--mrc-booking-com-bg, #003580) !important;
  border-color: var(--mrc-booking-com-border, #002b6b) !important;
}

.external-block.platform-vrbo {
  background: var(--mrc-vrbo-bg, #1080c4) !important;
  border-color: var(--mrc-vrbo-border, #0d6eaa) !important;
}

.external-block.platform-tripadvisor {
  background: #00af87 !important;
  border-color: #009973 !important;
}

.external-block.platform-expedia {
  background: #0067db !important;
  border-color: #0056c7 !important;
}

.external-block.platform-other {
  background: #6c757d !important;
  border-color: #545b62 !important;
}

/* Frontend calendar wrapper */
.mrc-rental-calendar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px auto !important;
    box-sizing: border-box;
    padding: 0;
}

.mrc-calendar-title {
    display: none; /* Verberg dubbele titel - page titel is voldoende */
}

.mrc-calendar-grid {
    background: var(--mrc-calendar-surface, #ffffff);
    border: 2px solid var(--mrc-brand-primary, #840e12);
    border-radius: 12px;
    padding: 1.25rem;
    min-height: 480px;
    box-shadow: 0 12px 28px -18px rgba(132, 14, 18, 0.25);
}

/* Force FullCalendar to use full available width (match legend width) */
#rental-calendar {
    width: 100% !important;
    max-width: 100% !important;
}

#rental-calendar.fc {
    width: 100% !important;
    max-width: none !important;
}

.fc-media-screen {
    width: 100% !important;
}

.fc-view-harness {
    width: 100% !important;
}

/* Ensure FullCalendar table fills container */
.fc .fc-scrollgrid {
    width: 100% !important;
}

.fc-theme-standard .fc-scrollgrid {
    border: 2px solid var(--mrc-brand-primary, #840e12) !important;
    border-radius: 8px !important;
}

/* Ensure uniform row heights - already working at 70px */
.fc-daygrid-day-frame {
    min-height: 70px !important;
}

.fc-scrollgrid-section-body > tr {
    height: 70px !important;
}

/* Remove row height override - causing issues */

/* Keep calendar cells square-ish and proportional */
.fc-daygrid-day {
    position: relative;
}

.fc-daygrid-day-top {
    display: flex;
    justify-content: center;
    padding: 0.25rem;
}

/* Compact price display to prevent height overflow */
.mrc-day-price {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    line-height: 1.1 !important;
    padding: 2px 4px !important;
}

.mrc-day-price .mrc-price-original {
    display: block;
    line-height: 1 !important;
    margin-bottom: 1px !important;
}

.mrc-day-price .mrc-price-discounted {
    display: block;
    line-height: 1 !important;
}

.mrc-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    background: var(--mrc-brand-bg-dark, #2f3033);
    padding: 1rem 1.5rem;
    border-radius: 8px;
}

.mrc-calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mrc-calendar-legend-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.1);
}

/* Available dates legend styling */
.mrc-calendar-legend-item--available {
    border-color: var(--mrc-legend-available-border);
    background: var(--mrc-legend-available-alpha);
    color: var(--mrc-legend-available-text);
}

/* Unavailable dates legend styling */
.mrc-calendar-legend-item--unavailable {
    border-color: var(--mrc-legend-unavailable-border);
    background: var(--mrc-legend-unavailable-alpha);
    color: var(--mrc-legend-unavailable-text);
}

/* Booked dates legend styling */
.mrc-calendar-legend-item--booked {
    border-color: var(--mrc-legend-booked-border);
    background: var(--mrc-legend-booked-alpha);
    color: var(--mrc-legend-booked-text);
}

/* Pending bookings legend styling */
.mrc-calendar-legend-item--pending {
    border-color: var(--mrc-legend-pending-border);
    background: var(--mrc-legend-pending-alpha);
    color: var(--mrc-legend-pending-text);
}

/* External blocks legend styling */
.mrc-calendar-legend-item--external {
    border-color: var(--mrc-legend-external-border);
    background: var(--mrc-legend-external-alpha);
    color: var(--mrc-legend-external-text);
}

.mrc-calendar-legend-marker {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    position: relative;
}

/* Specific marker styling for each type */
.mrc-calendar-legend-item--available .mrc-calendar-legend-marker {
    background: var(--mrc-legend-available);
}

.mrc-calendar-legend-item--unavailable .mrc-calendar-legend-marker {
    background: var(--mrc-legend-unavailable);
}

.mrc-calendar-legend-item--unavailable .mrc-calendar-legend-marker::after {
    content: '×';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.mrc-calendar-legend-item--booked .mrc-calendar-legend-marker {
    background: var(--mrc-legend-booked);
}

.mrc-calendar-legend-item--pending .mrc-calendar-legend-marker {
    background: var(--mrc-legend-pending);
}

.mrc-calendar-legend-item--external .mrc-calendar-legend-marker {
    background: var(--mrc-legend-external);
}

/* Label styling for better readability */
.mrc-calendar-legend-label {
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* Accessibility improvements */
.mrc-calendar-legend-item:focus-visible {
    outline: 3px solid var(--mrc-legend-available);
    outline-offset: 2px;
    border-radius: 999px;
}

/* Responsive legend layout */
@media (max-width: 640px) {
    .mrc-calendar-legend {
        gap: 0.5rem;
        font-size: var(--mrc-text-sm);
    }
    
    .mrc-calendar-legend-item {
        padding: 0.375rem 0.625rem;
        gap: 0.375rem;
    }
    
    .mrc-calendar-legend-marker {
        width: 10px;
        height: 10px;
    }
    
    .mrc-calendar-legend-item--unavailable .mrc-calendar-legend-marker::after {
        font-size: 14px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --mrc-legend-available: #22c55e;
        --mrc-legend-unavailable: #ef4444;
        --mrc-legend-booked: #f59e0b;
        --mrc-legend-pending: #60a5fa;
        --mrc-legend-external: #9ca3af;
        
        --mrc-legend-available-text: #dcfce7;
        --mrc-legend-unavailable-text: #fecaca;
        --mrc-legend-booked-text: #fef3c7;
        --mrc-legend-pending-text: #dbeafe;
        --mrc-legend-external-text: #f3f4f6;
    }
    
    .mrc-calendar-legend-item {
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.05);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mrc-calendar-legend-item {
        border-width: 2px;
        font-weight: 700;
    }
    
    .mrc-calendar-legend-marker {
        border: 2px solid currentColor;
        width: 14px;
        height: 14px;
    }
    
    .mrc-calendar-legend-item--unavailable .mrc-calendar-legend-marker::after {
        font-size: 14px;
        font-weight: 900;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mrc-calendar-legend-item {
        transition: none;
    }
    
    .mrc-calendar-legend-item:hover {
        transform: none;
    }
}

.mrc-calendar-instructions {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--mrc-instructions-text, #555);
    font-size: 14px;
}

.mrc-calendar-instructions p {
    margin: 0.35rem 0;
    font-size: 14px;
}

.mrc-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: #555;
    font-size: 0.9rem;
}

.mrc-loading.is-visible {
    display: flex;
}

.mrc-loading-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: #0d6efd;
    animation: mrc-spin 0.8s linear infinite;
}

.mrc-loading-text {
    font-weight: 600;
}

@keyframes mrc-spin {
    to { transform: rotate(360deg); }
}

/* Agenda Legend Styling */
.mrc-agenda-legend {
    margin-top: var(--mrc-legend-spacing, 10px);
    text-align: center;
}

.mrc-agenda-legend-status {
    display: inline-block;
    padding: var(--mrc-agenda-status-padding, 2px 8px);
    margin: 0 var(--mrc-legend-item-spacing, 5px);
    border-radius: var(--mrc-border-radius, 4px);
    font-size: var(--mrc-legend-font-size, 0.875rem);
    font-weight: var(--mrc-legend-font-weight, 500);
}

.mrc-agenda-legend-status--confirmed {
    background-color: var(--mrc-status-confirmed-bg, #28a745);
    color: var(--mrc-status-confirmed-text, #fff);
}

.mrc-agenda-legend-status--pending {
    background-color: var(--mrc-status-pending-bg, #ffc107);
    color: var(--mrc-status-pending-text, #333);
}

.mrc-agenda-legend-status--blocked {
    background-color: var(--mrc-status-blocked-bg, #dc3545);
    color: var(--mrc-status-blocked-text, #fff);
}

/* Admin Panel Styling */
.mrc-addons-section {
    margin-top: var(--mrc-section-spacing, 20px);
}

.mrc-no-addons-message {
    color: var(--mrc-muted-text, #666);
    font-style: italic;
    margin: 0;
}

/* Customer Login Menu Styling */
.mrc-customer-menu-item {
    position: relative;
}

/* Laat het thema alle visuele stijlen bepalen (kleur, padding, font).
   Alleen flex toevoegen voor uitlijning van het icoontje naast de tekst. */
.mrc-customer-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mrc-customer-icon {
    font-size: 1em;
    line-height: 1;
}

.mrc-customer-text {
    /* erft lettertype en kleur van het thema */
}

.mrc-customer-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--mrc-dropdown-bg, white);
    border: 1px solid var(--mrc-border-color, #ddd);
    border-radius: var(--mrc-border-radius, 6px);
    box-shadow: var(--mrc-dropdown-shadow, 0 4px 12px rgba(0,0,0,0.15));
    min-width: 560px;
    z-index: 9999;
    padding: 15px;
}

.mrc-login-title {
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--mrc-text-color, #333);
    font-size: 14px;
}

.mrc-login-input {
    margin-bottom: 10px;
}

.mrc-login-input input,
.mrc-login-code-section input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--mrc-input-border, #ddd);
    border-radius: var(--mrc-input-radius, 4px);
    margin-bottom: 8px;
}

.mrc-btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--mrc-button-radius, 4px);
    cursor: pointer;
    font-size: 14px;
}

.mrc-btn-primary {
    background: var(--mrc-primary-color, #0073aa);
    color: var(--mrc-primary-text, white);
}

.mrc-btn-secondary {
    background: var(--mrc-secondary-bg, #f0f0f0);
    color: var(--mrc-secondary-text, #333);
}

.mrc-btn:hover {
    opacity: 0.9;
}

.mrc-welcome-text {
    margin-bottom: 10px;
}

.mrc-customer-name {
    color: var(--mrc-primary-color, #0073aa);
}

.mrc-customer-info {
    margin-top: 4px;
}

.mrc-customer-email {
    color: var(--mrc-muted-text, #666);
}

.mrc-customer-actions {
    display: flex;
    gap: 10px;
}

.mrc-customer-actions a {
    color: var(--mrc-primary-color, #0073aa);
    text-decoration: none;
    font-size: 14px;
}

.mrc-message {
    margin-top: 8px;
    padding: 6px;
    border-radius: var(--mrc-message-radius, 3px);
    font-size: 14px;
}

.mrc-message-success {
    background: var(--mrc-success-bg, #d4edda);
    color: var(--mrc-success-text, #155724);
    border: 1px solid var(--mrc-success-border, #c3e6cb);
}

.mrc-message-error {
    background: var(--mrc-error-bg, #f8d7da);
    color: var(--mrc-error-text, #721c24);
    border: 1px solid var(--mrc-error-border, #f5c6cb);
}

.mrc-message-info {
    background: var(--mrc-info-bg, #d1ecf1);
    color: var(--mrc-info-text, #0c5460);
    border: 1px solid var(--mrc-info-border, #bee5eb);
}

.mrc-fallback-menu {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--mrc-fallback-bg, rgba(255,255,255,0.95));
    border-radius: var(--mrc-border-radius, 6px);
    box-shadow: var(--mrc-fallback-shadow, 0 2px 8px rgba(0,0,0,0.1));
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 0;
}
.mrc-agenda-legend {
    margin-top: 10px;
}

.mrc-agenda-legend-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-right: 8px;
}

.mrc-agenda-legend-status--confirmed {
    background: var(--mrc-status-confirmed-bg, #28a745);
    color: var(--mrc-status-confirmed-text, #fff);
}

.mrc-agenda-legend-status--pending {
    background: var(--mrc-status-pending-bg, #ffc107);
    color: var(--mrc-status-pending-text, #333);
}

.mrc-agenda-legend-status--blocked {
    background: var(--mrc-status-blocked-bg, #dc3545);
    color: var(--mrc-status-blocked-text, #fff);
}

.mrc-toast-fallback {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translate(-50%, -12px);
    background: #1f2937;
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mrc-toast-fallback.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.mrc-toast-fallback--success {
    background: #198754;
}

.mrc-toast-fallback--error {
    background: #c0392b;
}

.mrc-toast-fallback--info {
    background: #1f2937;
}

.mrc-price-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #198754;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mrc-price-badge__original {
    text-decoration: line-through;
    opacity: 0.7;
}

.mrc-price-badge__current {
    font-weight: 700;
}

.mrc-price-badge--discount {
    background: #b7791f;
}

.mrc-unavailable-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #c0392b;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

/* PATCH 3.12.3: Daily price display under day number */
.mrc-day-price {
    font-size: 14px;
    font-weight: 600;
    color: #10b981;
    text-align: center;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-size 0.2s ease;
}

/* Customer discount styling */
.mrc-day-price.mrc-has-discount {
    line-height: 1.3;
}

.mrc-day-price .mrc-price-original {
    display: block;
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
}

.mrc-day-price .mrc-price-discounted {
    display: block;
    font-size: 14px;
    color: #28a745;
    font-weight: 700;
}

/* PATCH 3.12.3: Mobile responsive - show only currency symbol on small screens */
@media (max-width: 768px) {
    .mrc-day-price {
        /* On mobile, show only currency symbol using CSS */
        font-size: 14px;
        max-width: 30px;
    }
    
    .mrc-day-price .mrc-price-original {
        font-size: 14px;
    }
    
    .mrc-day-price .mrc-price-discounted {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .mrc-day-price {
        /* On very small screens, minimal display */
        font-size: 14px;
        max-width: 25px;
    }
}

/* Frontend styles voor shortcodes */
.mrc-prices-frontend {
    margin: 20px 0;
}

.mrc-prices-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.mrc-prices-table th,
.mrc-prices-table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.mrc-prices-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

/* Modal Typography - Consistent font sizes */
.mrc-modal h3,
.mrc-date-summary h3 {
    font-size: 1.25rem;    /* 20px */
    font-weight: 600;
    margin-bottom: 1rem;
    color: #212529;
}

.mrc-modal h4 {
    font-size: 1rem;       /* 16px */
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #495057;
}

.mrc-booking-form {
    width: 100%;           /* Fill container - no max-width */
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.mrc-booking-form .form-group {
    margin-bottom: 15px;
}

.mrc-booking-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;      /* Medium instead of bold */
    font-size: 0.9375rem;  /* 15px */
    color: #212529;
}

.mrc-booking-form input,
.mrc-booking-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9375rem;  /* 15px - match labels */
}

.mrc-booking-form small {
    font-size: 0.9375rem;  /* 15px */
    color: #666;
}

.mrc-booking-form .btn {
    padding: 10px 20px;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9375rem;  /* 15px - gelijk aan input velden */
}

.mrc-booking-form .btn:hover {
    background: #005a87;
}

/* Addons Info Box */
.mrc-addons-info {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    height: fit-content;
    font-size: 1rem;
}

.mrc-addons-info h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mrc-addons-info h4::before {
    content: '💡';
    font-size: 1.25rem;
}

.mrc-addons-info p {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
}

.mrc-addons-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mrc-addons-info li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.mrc-addons-info li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mrc-addons-info .addon-name {
    font-weight: 500;
    color: #212529;
    font-size: 1rem;
}

.mrc-addons-info .addon-price {
    font-weight: 600;
    color: #0d6efd;
    white-space: nowrap;
    margin-left: 0.5rem;
    font-size: 1rem;
}

.mrc-agenda-legend {
    margin-top: 10px;
}

.mrc-agenda-legend span {
    margin-right: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
}

/* Highlight kleur voor geselecteerde range (FullCalendar) */
.fc-highlight {
  background: rgba(57, 230, 57, 0.25) !important;
  opacity: 0.9 !important;
  box-shadow: 0 0 8px rgba(57, 230, 57, 0.3) !important;
  border: 1px solid rgba(57, 230, 57, 0.5) !important;
}
/* Vandaag (huidige dag) blauw highlighten */
.fc-daygrid-day.fc-day-today {
  background: #b1d2ee !important;
  color: #fff !important;
  border: 2px solid #5d81a5 !important;
}


/* Voorkom highlight op geboekte dagen */


/* Verberg event-blokken zodat alleen dagprijs en dagnummer zichtbaar zijn (alleen frontend) */
#rental-calendar .fc-daygrid-day-events,
#rental-calendar .fc-daygrid-event-harness,
#rental-calendar .fc-event,
#rental-calendar .fc-event-main,
#rental-calendar .fc-event-title-container {
  display: none !important;
}

/* Toon alleen background events voor kleuren/styling (alleen frontend) */
#rental-calendar .fc-daygrid-day .fc-bg-event {
  display: block !important;
}
/* Verberg lege event-divs in dagcellen (alleen frontend) */
#rental-calendar .fc-daygrid-event-harness:empty {
  display: none;
}

/* Kalender container */
 #rental-calendar {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 24px;
  box-sizing: border-box;
  overflow-x: unset;
}
/* Maak de achtergrond van de tabel wit/transparant */
.fc-scrollgrid,
.fc-scrollgrid table {
  background: transparent !important;
}

/* Kalender font - inherit from Vantage theme via CSS variables */
.fc {
  font-family: var(--mrc-font-family-base);
}

/* FullCalendar theme integration improvements
 * 
 * Custom properties available for theme customization:
 * --mrc-border-color: Day cell borders
 * --mrc-border-light: Inner day cell shadows
 * --mrc-day-bg: Day cell background
 * --mrc-day-text: Day cell text color
 * --mrc-header-text: Calendar header text
 * --mrc-day-number-color: Day number color
 * --mrc-event-text: Event text color
 * --mrc-price-text: Price badge text
 * --mrc-price-bg: Price badge background
 * --mrc-price-available-bg: Available day price background
 * --mrc-price-available-text: Available day price text
 * --mrc-available-bg: Available period background
 * --mrc-available-border: Available period border
 * --mrc-booked-bg: Booked period background
 * --mrc-booked-border: Booked period border
 * --mrc-blocked-bg: Blocked period background
 * --mrc-blocked-border: Blocked period border
 */

/* Dagcellen en grid */
.fc-daygrid-day {
  border: 1px solid var(--mrc-border-color, #d6d6d6);
  box-shadow: 0 0 0 1px var(--mrc-border-light, #eaeaea) inset;
  background: var(--mrc-day-bg, inherit);
  color: var(--mrc-day-text, inherit);
}
.fc-daygrid-day-frame {
  position: relative;
  min-height: 56px;
  padding-bottom: 18px;
}

/* Dagprijs styling - theme-friendly */
.fc-daygrid-day-price {
    position: absolute;
    right: 4px;
    bottom: 4px;
    font-size: 0.875em;
    z-index: 2;
    color: var(--mrc-price-text, #757575);
    background: var(--mrc-price-bg, rgba(255,255,255,0.9));
    border-radius: 4px;
    padding: 2px 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Price indicator op beschikbare dagen - reduced !important usage */
.fc-daygrid-day-price {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: var(--mrc-price-available-bg, #4caf50);
    color: var(--mrc-price-available-text, white);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: bold;
    z-index: 10;
}

/* Zorg ervoor dat day cells relatieve positionering hebben - but allow theme override */
#rental-calendar .fc-daygrid-day-frame {
    position: relative;
}

/* Status indicators - use CSS custom properties for theme integration */
.price-period {
    background-color: transparent;
    border-color: transparent;
}

.booked-period {
    background-color: var(--mrc-booked-bg, rgba(255, 235, 238, 0.8));
    border-color: var(--mrc-booked-border, #f44336);
}

.blocked-period {
    background-color: var(--mrc-blocked-bg, rgba(243, 229, 245, 0.8));
    border-color: var(--mrc-blocked-border, #9c27b0);
}

/* Currency toggle button */
#mrc-currency-toggle {
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

#mrc-currency-toggle:hover {
    background: #f5f5f5;
}

/* Beschikbare en onbeschikbare dagen */
.fc-daygrid-day {
    background: #fff;
    color: #333;
    cursor: pointer;
}

.fc-day-disabled {
  background: #e0e0e0;
  color: #aaa;
  cursor: not-allowed;
}

/* Geboekte dagen - verwijder underline styling voor frontend */
.fc-daygrid-day.booked {
  background: #f0f0f0;
  color: #bbb;
}
/* Verwijder onderstreepte styling van datum nummers */
.fc-daygrid-day.booked .fc-daygrid-day-number {
  color: #666 !important;
  font-weight: 500 !important;
}

/* Niet beschikbare dagen (geboekt + geblokkeerd) */
.fc-daygrid-day.unavailable {
  background: #ffebee !important;
  color: #bbb !important;
  cursor: not-allowed !important;
}

.fc-daygrid-day.unavailable .fc-daygrid-day-number {
  color: #c62828 !important;
  text-decoration: line-through !important;
  font-weight: bold !important;
}

/* PATCH 3.12.4: Hide prices for unavailable dates with strikethrough */
.fc-daygrid-day.unavailable .mrc-day-price {
  display: none !important;
}

/* PATCH 3.12.4: Cursor styles for available vs unavailable */
.fc-daygrid-day.unavailable {
  cursor: not-allowed !important;
}

.fc-daygrid-day:not(.unavailable) {
  cursor: pointer !important;
}

/* Rode X indicator voor niet-beschikbare dagen */
.fc-daygrid-day-unavailable {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #f44336 !important;
  color: white !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: bold !important;
  z-index: 10 !important;
}

/* Weekdagen headers - branding styling */
.fc-col-header-cell,
.fc-daygrid-weekday,
.fc-scrollgrid .fc-col-header-cell,
.fc-col-header-cell a {
  background: var(--mrc-brand-bg-dark, #2f3033) !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.5px !important;
  padding: 12px 8px !important;
  text-decoration: none !important;
  border: none !important;
  pointer-events: auto;
  cursor: default;
}

/* Daggetallen en events - fixed 20px font size (niet schaalbaar) */
.fc-daygrid-day-number {
  color: #333 !important;
  font-weight: var(--mrc-font-semibold, 600);
  font-size: 20px !important; /* Vaste grootte - niet afhankelijk van font scale */
  padding: 8px;
  line-height: var(--mrc-leading-tight, 1.25);
  text-decoration: none !important;
}

/* Override Vantage theme link styling for day numbers */
.fc-daygrid-day-number a {
  color: #333 !important;
  text-decoration: none !important;
}
.fc-event,
.fc-daygrid-event {
  color: var(--mrc-event-text, inherit);
}

/* CTA Button voor "Start reservering" */
.mrc-cta-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.mrc-cta-container.mrc-cta-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mrc-cta-content {
    background: var(--mrc-cta-bg, #ffffff);
    border: 1px solid var(--mrc-cta-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--mrc-cta-radius, 12px);
    box-shadow: var(--mrc-cta-shadow, 0 8px 32px rgba(0, 0, 0, 0.15));
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    min-width: 280px;
    backdrop-filter: blur(8px);
}

.mrc-cta-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mrc-cta-period {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--mrc-cta-period-color, #1f2937);
    line-height: 1.3;
}

.mrc-cta-label {
    font-size: 0.875em;
    color: var(--mrc-cta-label-color, #10b981);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mrc-cta-button {
    background: var(--mrc-cta-button-bg, #10b981);
    color: var(--mrc-cta-button-text, #ffffff);
    border: none;
    border-radius: var(--mrc-cta-button-radius, 8px);
    padding: 10px 16px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.mrc-cta-button:hover {
    background: var(--mrc-cta-button-hover-bg, #059669);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.mrc-cta-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.mrc-cta-icon {
    font-size: 1.1em;
    line-height: 1;
}

.mrc-cta-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: var(--mrc-cta-close-bg, #ef4444);
    color: var(--mrc-cta-close-text, #ffffff);
    border: 2px solid var(--mrc-cta-close-border, #ffffff);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.mrc-cta-close:hover {
    background: var(--mrc-cta-close-hover-bg, #dc2626);
    transform: scale(1.1);
}

.mrc-cta-close:active {
    transform: scale(1);
}

/* Responsive CTA styling */
@media (max-width: 640px) {
    .mrc-cta-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }
    
    .mrc-cta-content {
        min-width: unset;
        width: 100%;
        padding: 14px 16px;
    }
    
    .mrc-cta-button {
        padding: 8px 12px;
        font-size: var(--mrc-text-sm);
    }
}

/* =============================================================================
   REVIEWS DISPLAY (GUEST BOOK)
   ============================================================================= */

/* ---- Widget wrapper ---- */
.mrc-reviews-widget {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
    font-family: inherit;
}

/* ---- Summary block ---- */
.mrc-reviews-summary {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    padding: 24px 0 28px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.mrc-reviews-avg-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
    gap: 6px;
}

.mrc-reviews-avg-score {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: #1a1a1a;
}

.mrc-reviews-avg-stars {
    display: flex;
    gap: 2px;
}

.mrc-reviews-avg-stars .mrc-star {
    font-size: 22px;
}

.mrc-reviews-avg-label {
    font-size: 13px;
    color: #666;
    text-align: center;
    white-space: nowrap;
}

/* ---- Rating bars ---- */
.mrc-rating-bars {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}

.mrc-rating-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mrc-rating-bar-label {
    display: flex;
    gap: 1px;
    width: 74px;
    flex-shrink: 0;
}

.mrc-star-sm {
    font-size: 13px;
    color: #f39c12;
}

.mrc-star-sm.empty {
    color: #ddd;
}

.mrc-rating-bar-track {
    flex: 1;
    height: 10px;
    background: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

.mrc-rating-bar-fill {
    height: 100%;
    background: #f39c12;
    border-radius: 5px;
    transition: width 0.4s ease;
}

.mrc-rating-bar-count {
    font-size: 13px;
    color: #444;
    width: 20px;
    text-align: right;
    flex-shrink: 0;
}

/* ---- Review cards ---- */
.mrc-reviews-list {
    display: flex;
    flex-direction: column;
}

.mrc-review-card {
    padding: 20px 0;
    border-bottom: 1px solid #ebebeb;
}

.mrc-review-card:first-child {
    border-top: none;
}

.mrc-review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}

.mrc-review-card-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mrc-review-card-stars .mrc-star {
    font-size: 16px;
}

.mrc-review-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.mrc-review-card-date {
    font-size: 13px;
    color: #888;
}

.mrc-review-card-body {
    font-size: 15px;
    line-height: 1.65;
    color: #333;
}

/* Stars (shared) */
.mrc-star {
    font-size: 18px;
    color: #f39c12;
}

.mrc-star.empty {
    color: #ddd;
}

/* Legacy selectors — kept for backwards compat */
.mrc-reviews-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Admin override: full-width table on Reviews Beheer page */
.wp-admin .mrc-reviews-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.mrc-review-item {
    padding: 20px 0;
    border-bottom: 1px solid #ebebeb;
}

/* Responsive */
@media (max-width: 600px) {
    .mrc-reviews-summary {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .mrc-reviews-avg-block {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-width: unset;
    }

    .mrc-reviews-avg-score {
        font-size: 40px;
    }

    .mrc-rating-bars {
        width: 100%;
    }

    .mrc-review-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =============================================================================
   CLICK-SELECT MODE STYLING
   ============================================================================= */

/* Click-select start date highlight */
.fc-daygrid-day.mrc-click-selected-start {
    background-color: rgba(74, 144, 226, 0.2) !important;
    border: 2px solid #4a90e2 !important;
    position: relative;
    z-index: 5;
}

.fc-daygrid-day.mrc-click-selected-start::after {
    content: '📍 Start';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: var(--mrc-text-sm);
    background: #4a90e2;
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
    z-index: 6;
    pointer-events: none;
}

/* Cursor hints for interactive dates */
.fc-daygrid-day:not(.unavailable):not(.fc-day-past):not(.fc-day-disabled) {
    cursor: pointer;
}

.fc-daygrid-day.unavailable,
.fc-daygrid-day.fc-day-past,
.fc-daygrid-day.fc-day-disabled {
    cursor: not-allowed;
}

/* Enhanced cursor during click-select mode */
.mrc-calendar-click-mode .fc-daygrid-day:not(.unavailable):not(.fc-day-past):not(.mrc-click-selected-start) {
    cursor: crosshair;
}

/* Hover effect during click-select mode */
.mrc-calendar-click-mode .fc-daygrid-day:not(.unavailable):not(.fc-day-past):not(.mrc-click-selected-start):hover {
    background-color: rgba(74, 144, 226, 0.1) !important;
    transition: background-color 0.2s ease;
}

/* =============================================================================
   FULLCALENDAR NAVIGATION BUTTONS - BRANDING INTEGRATION
   ============================================================================= */

/* FullCalendar knoppen (prev, next, today) - gebruik branding kleuren */
.fc .fc-button-primary {
    background: var(--mrc-brand-bg-dark, #2f3033) !important;
    border-color: var(--mrc-brand-bg-dark, #2f3033) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.fc .fc-button-primary:hover:not(:disabled) {
    background: #3a3c40 !important;
    border-color: #3a3c40 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.fc .fc-button-primary:disabled {
    background: #e0e0e0 !important;
    border-color: #ccc !important;
    color: #999 !important;
    opacity: 0.6 !important;
}

.fc .fc-button-primary:active,
.fc .fc-button-primary.fc-button-active {
    background: #1f2022 !important;
    border-color: #1f2022 !important;
    color: #fff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* =============================================================================
   FULLCALENDAR TOOLBAR - MAANDNAAM STYLING
   ============================================================================= */

/* Toolbar container met rode gradient achtergrond */
.fc .fc-toolbar {
    background: var(--mrc-gradient-primary, linear-gradient(135deg, #840e12 0%, #c41419 100%)) !important;
    padding: 16px 20px !important;
    border-radius: 8px 8px 0 0 !important;
    margin-bottom: 0 !important;
}

/* Maandnaam/titel styling - wit op rode achtergrond */
.fc .fc-toolbar-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Zorg dat buttons ook wit blijven in toolbar */
.fc .fc-toolbar .fc-button-primary {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}