/* ---------------------------------------------------------------
   Rental Booking Calendar – Public Frontend Styles
   Modern, beautiful, fully themeable
--------------------------------------------------------------- */

/* ---------- CSS Custom Properties (theme defaults) ---------- */
:root {
    --rbc-primary:       #2D6A4F;
    --rbc-primary-dark:  #1B4332;
    --rbc-accent:        #95D5B2;
    --rbc-accent-light:  #D8F3DC;
    --rbc-bg:            #ffffff;
    --rbc-bg-soft:       #f8faf9;
    --rbc-surface:       #ffffff;
    --rbc-border:        #e2e8e5;
    --rbc-text:          #1a1a1a;
    --rbc-text-muted:    #6b7280;
    --rbc-booked-bg:     #fee2e2;
    --rbc-booked-text:   #991b1b;
    --rbc-selected-bg:   var(--rbc-primary);
    --rbc-selected-text: #ffffff;
    --rbc-range-bg:      var(--rbc-accent-light);
    --rbc-range-text:    var(--rbc-primary-dark);
    --rbc-radius:        14px;
    --rbc-cell-size:     42px;
    --rbc-shadow:        0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
    --rbc-font:          -apple-system, 'Segoe UI', system-ui, sans-serif;
}

/* ---- Themes ---- */
.rbc-theme-forest  { --rbc-primary:#2D6A4F; --rbc-primary-dark:#1B4332; --rbc-accent:#95D5B2; --rbc-accent-light:#D8F3DC; }
.rbc-theme-ocean   { --rbc-primary:#1D6FA4; --rbc-primary-dark:#0F4C75; --rbc-accent:#90E0EF; --rbc-accent-light:#CAF0F8; }
.rbc-theme-sunset  { --rbc-primary:#C05621; --rbc-primary-dark:#7B341E; --rbc-accent:#FBD38D; --rbc-accent-light:#FEFCBF; }
.rbc-theme-slate   { --rbc-primary:#334155; --rbc-primary-dark:#1E293B; --rbc-accent:#94A3B8; --rbc-accent-light:#E2E8F0; --rbc-bg:#f1f5f9; --rbc-bg-soft:#e2e8f0; }
.rbc-theme-rose    { --rbc-primary:#9F1239; --rbc-primary-dark:#881337; --rbc-accent:#FDA4AF; --rbc-accent-light:#FFE4E6; }

/* ---------- Wrapper ---------- */
.rbc-wrapper {
    font-family: var(--rbc-font);
    background: var(--rbc-bg-soft);
    border-radius: var(--rbc-radius);
    padding: 32px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: var(--rbc-shadow);
    color: var(--rbc-text);
    position: relative;
}

/* ---------- Header ---------- */
.rbc-header { text-align: center; margin-bottom: 28px; }

.rbc-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--rbc-primary-dark);
    margin: 0 0 6px;
    letter-spacing: -.02em;
}

.rbc-subtitle {
    font-size: .95rem;
    color: var(--rbc-text-muted);
    margin: 0;
    min-height: 1.4em;
    transition: all .3s;
}

/* ---------- Body layout ---------- */
.rbc-body { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }

/* ---------- Calendar container ---------- */
.rbc-calendar-container { flex: 1 1 500px; }

/* ---------- Nav ---------- */
.rbc-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.rbc-nav-btn {
    background: var(--rbc-surface);
    border: 1.5px solid var(--rbc-border);
    border-radius: 10px;
    width: 40px; height: 40px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--rbc-primary);
    transition: background .15s, border-color .15s, transform .1s;
    display: flex; align-items: center; justify-content: center;
}
.rbc-nav-btn:hover {
    background: var(--rbc-primary);
    border-color: var(--rbc-primary);
    color: #fff;
    transform: scale(1.05);
}

.rbc-month-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--rbc-primary-dark);
    letter-spacing: -.01em;
}

/* ---------- Grids ---------- */
.rbc-grids {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.rbc-month-grid { flex: 1 1 260px; }

.rbc-month-title {
    text-align: center;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--rbc-primary);
    margin-bottom: 12px;
}

.rbc-day-headers {
    display: grid;
    grid-template-columns: repeat(7, var(--rbc-cell-size));
    gap: 3px;
    margin-bottom: 4px;
}

.rbc-day-hdr {
    width: var(--rbc-cell-size);
    text-align: center;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rbc-text-muted);
    padding: 4px 0;
}

.rbc-day-cells {
    display: grid;
    grid-template-columns: repeat(7, var(--rbc-cell-size));
    gap: 3px;
}

/* ---------- Day cell ---------- */
.rbc-day {
    width: var(--rbc-cell-size);
    height: var(--rbc-cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s, transform .1s;
    position: relative;
    user-select: none;
}

.rbc-day:hover:not(.rbc-day-booked):not(.rbc-day-past):not(.rbc-day-empty) {
    background: var(--rbc-accent);
    color: var(--rbc-primary-dark);
    transform: scale(1.08);
}

.rbc-day-empty { cursor: default; }

.rbc-day-past {
    color: #ccc;
    cursor: not-allowed;
    text-decoration: line-through;
}

.rbc-day-booked {
    background: var(--rbc-booked-bg);
    color: var(--rbc-booked-text);
    cursor: not-allowed;
    font-size: .75rem;
}
.rbc-day-booked::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--rbc-booked-text);
    opacity: .5;
}

/* Range selection */
.rbc-day-in-range {
    background: var(--rbc-range-bg);
    color: var(--rbc-range-text);
    border-radius: 0;
}
.rbc-day-in-range:first-child,
.rbc-day-range-start { border-radius: 10px 0 0 10px; }
.rbc-day-range-end   { border-radius: 0 10px 10px 0; }

.rbc-day-selected-start,
.rbc-day-selected-end {
    background: var(--rbc-selected-bg) !important;
    color: var(--rbc-selected-text) !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    z-index: 1;
    transform: scale(1.08);
}
.rbc-day-selected-start { border-radius: 10px 0 0 10px; }
.rbc-day-selected-end   { border-radius: 0 10px 10px 0; }

.rbc-day-selected-single {
    background: var(--rbc-selected-bg) !important;
    color: var(--rbc-selected-text) !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    z-index: 1;
    transform: scale(1.08);
    border-radius: 10px !important;
}

/* Pricing colour dots */
.rbc-day-dot {
    position: absolute;
    bottom: 3px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
}

/* Today */
.rbc-day-today {
    outline: 2px solid var(--rbc-primary);
    outline-offset: -2px;
}

/* ---------- Summary panel ---------- */
.rbc-summary {
    flex: 0 0 220px;
    background: var(--rbc-surface);
    border: 1.5px solid var(--rbc-border);
    border-radius: var(--rbc-radius);
    padding: 20px;
    box-shadow: var(--rbc-shadow);
    animation: rbcFadeIn .25s ease;
}

.rbc-summary-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.rbc-date-chip {
    flex: 1;
    background: var(--rbc-bg-soft);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
}

.rbc-chip-label {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--rbc-text-muted);
    margin-bottom: 4px;
}

.rbc-chip-value {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--rbc-primary-dark);
}

.rbc-arrow { color: var(--rbc-text-muted); font-size: 1.1rem; flex-shrink: 0; }

/* Breakdown */
.rbc-price-breakdown { margin-bottom: 14px; }

.rbc-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .82rem;
    padding: 5px 0;
    border-bottom: 1px dashed var(--rbc-border);
}
.rbc-breakdown-row:last-child { border-bottom: none; }

.rbc-breakdown-label {
    display: flex; align-items: center; gap: 6px;
    color: var(--rbc-text-muted);
}
.rbc-breakdown-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

.rbc-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0 16px;
    border-top: 2px solid var(--rbc-border);
    font-weight: 700;
}

.rbc-total-amount {
    font-size: 1.3rem;
    color: var(--rbc-primary);
}

/* ---------- Buttons ---------- */
.rbc-btn-primary {
    display: block;
    width: 100%;
    padding: 13px 20px;
    background: var(--rbc-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s;
    text-align: center;
    letter-spacing: .01em;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.rbc-btn-primary:hover {
    background: var(--rbc-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.rbc-btn-primary:active { transform: translateY(0); }

.rbc-btn-ghost {
    display: block;
    width: 100%;
    padding: 9px 16px;
    background: transparent;
    color: var(--rbc-text-muted);
    border: 1.5px solid var(--rbc-border);
    border-radius: 10px;
    font-size: .85rem;
    cursor: pointer;
    margin-top: 8px;
    transition: border-color .15s, color .15s;
    text-align: center;
}
.rbc-btn-ghost:hover { border-color: var(--rbc-primary); color: var(--rbc-primary); }

.rbc-btn-full { width: 100%; }

/* ---------- Legend ---------- */
.rbc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--rbc-border);
}

.rbc-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: var(--rbc-text-muted);
}

.rbc-legend-dot {
    width: 10px; height: 10px; border-radius: 50%;
}

.rbc-legend-price {
    font-weight: 700;
    color: var(--rbc-text);
}

/* ---------- Booking form overlay ---------- */
.rbc-form-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    border-radius: var(--rbc-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: rbcFadeIn .2s ease;
}

.rbc-form-panel {
    background: var(--rbc-surface);
    border-radius: var(--rbc-radius);
    padding: 32px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    position: relative;
    animation: rbcSlideUp .25s ease;
}

.rbc-form-close {
    position: absolute;
    top: 16px; right: 20px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--rbc-text-muted);
    line-height: 1;
    padding: 4px;
}
.rbc-form-close:hover { color: var(--rbc-text); }

.rbc-form-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--rbc-primary-dark);
    margin: 0 0 16px;
}

.rbc-form-dates-recap {
    background: var(--rbc-bg-soft);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: .88rem;
    color: var(--rbc-text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}
.rbc-form-dates-recap strong { color: var(--rbc-primary-dark); }

.rbc-form-fields { display: flex; flex-direction: column; gap: 14px; }

.rbc-field label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rbc-text-muted);
    margin-bottom: 6px;
}

.rbc-field .req { color: #e53e3e; }

.rbc-field input,
.rbc-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--rbc-border);
    border-radius: 9px;
    font-size: .92rem;
    font-family: var(--rbc-font);
    color: var(--rbc-text);
    background: var(--rbc-bg);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.rbc-field input:focus,
.rbc-field textarea:focus {
    outline: none;
    border-color: var(--rbc-primary);
    box-shadow: 0 0 0 3px var(--rbc-accent-light);
}

.rbc-form-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    margin-top: 4px;
    border-top: 2px solid var(--rbc-border);
    font-size: .88rem;
    color: var(--rbc-text-muted);
}
.rbc-form-total strong { font-size: 1.2rem; color: var(--rbc-primary); }

.rbc-form-error {
    color: #e53e3e;
    font-size: .85rem;
    margin-top: 10px;
    text-align: center;
}

/* ---------- Success ---------- */
.rbc-success {
    text-align: center;
    padding: 40px 20px;
    animation: rbcFadeIn .3s ease;
}
.rbc-success-icon {
    width: 64px; height: 64px;
    background: var(--rbc-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 2rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    animation: rbcBounce .4s ease;
}
.rbc-success p { font-size: 1rem; color: var(--rbc-text-muted); max-width: 360px; margin: 0 auto; }

/* ---------- Loading ---------- */
.rbc-loading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.8);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--rbc-radius);
    z-index: 200;
}

.rbc-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--rbc-accent);
    border-top-color: var(--rbc-primary);
    border-radius: 50%;
    animation: rbcSpin .7s linear infinite;
}

/* ---------- Utilities ---------- */
.rbc-hidden { display: none !important; }

/* ---------- Animations ---------- */
@keyframes rbcFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes rbcSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rbcBounce {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes rbcSpin {
    to { transform: rotate(360deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .rbc-wrapper { padding: 20px 16px; }
    .rbc-body { flex-direction: column; }
    .rbc-summary { flex: none; width: 100%; }
    :root { --rbc-cell-size: 38px; }
    .rbc-title { font-size: 1.4rem; }
}

@media (max-width: 420px) {
    :root { --rbc-cell-size: 34px; }
    .rbc-day { font-size: .78rem; border-radius: 7px; }
}