/**
 * Rental SaaS Plugin - Frontend Styles
 *
 * All selectors are prefixed with .rsaas- to avoid collisions with the host theme.
 * No global element overrides. No !important unless absolutely necessary.
 *
 * Load order: flatpickr.css -> rsaas-plugin.css
 */

/* ---------------------------------------------------------------------------
   CSS custom properties  (--rsaas- prefix avoids collisions with theme vars)
--------------------------------------------------------------------------- */

:root {
    --rsaas-accent:         #0073aa;
    --rsaas-accent-dark:    #005f8b;
    --rsaas-border:         #d5d5d5;
    --rsaas-shadow:         0 2px 6px rgba(0, 0, 0, 0.08);
    --rsaas-radius:         5px;
    --rsaas-text-main:      #1a1a1a;
    --rsaas-text-muted:     #555;
    --rsaas-bg-card:        #fff;
    --rsaas-legend-avail:   #2d9e6b;
    --rsaas-legend-sel:     #0073aa;
    --rsaas-legend-unavail: #bbb;
}

/* ---------------------------------------------------------------------------
   Layout containers
--------------------------------------------------------------------------- */

.rsaas-rooms,
.rsaas-search,
.rsaas-booking,
.rsaas-calendar {
    box-sizing: border-box;
    font-family: inherit;
    color: inherit;
}

/* ---------------------------------------------------------------------------
   Room cards
--------------------------------------------------------------------------- */

.rsaas-rooms {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.rsaas-room-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1 1 260px;
    max-width: 360px;
    padding: 1.25rem;
    border: 1px solid var(--rsaas-border);
    border-radius: var(--rsaas-radius);
    background: var(--rsaas-bg-card);
    box-shadow: var(--rsaas-shadow);
}

.rsaas-room-name {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rsaas-text-main);
}

.rsaas-room-desc {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--rsaas-text-muted);
    flex: 1 1 auto;
}

.rsaas-room-meta {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--rsaas-text-main);
}

.rsaas-room-meta li {
    margin-bottom: 0.25rem;
}

.rsaas-room-footer {
    margin-top: auto;
    padding-top: 0.875rem;
    border-top: 1px solid var(--rsaas-border);
}

.rsaas-rooms.rsaas-empty {
    display: block;
}

/* ---------------------------------------------------------------------------
   Forms (search and booking)
--------------------------------------------------------------------------- */

.rsaas-search-form,
.rsaas-booking-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.rsaas-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 200px;
}

.rsaas-field label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #222;
}

.rsaas-field input[type="text"],
.rsaas-field input[type="email"],
.rsaas-field input[type="tel"],
.rsaas-field textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: #111;
}

.rsaas-field input:focus,
.rsaas-field textarea:focus {
    outline: 2px solid #0073aa;
    outline-offset: 1px;
    border-color: #0073aa;
}

.rsaas-field textarea {
    resize: vertical;
}

.rsaas-required {
    color: #c00;
    margin-left: 2px;
}

.rsaas-field-submit {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */

.rsaas-btn {
    display: inline-block;
    padding: 0.55rem 1.25rem;
    border: none;
    border-radius: 3px;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-align: center;
}

.rsaas-btn-search,
.rsaas-btn-book {
    background-color: var(--rsaas-accent);
    color: #fff;
}

.rsaas-btn-search:hover,
.rsaas-btn-book:hover {
    background-color: var(--rsaas-accent-dark);
}

.rsaas-btn-cta {
    display: block;
    background-color: var(--rsaas-accent);
    color: #fff;
    text-decoration: none;
    padding: 0.55rem 1.25rem;
    border-radius: var(--rsaas-radius);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.rsaas-btn-cta:hover,
.rsaas-btn-cta:focus {
    background-color: var(--rsaas-accent-dark);
    color: #fff;
    text-decoration: none;
}

.rsaas-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Search results
--------------------------------------------------------------------------- */

.rsaas-search-results {
    margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Calendar
--------------------------------------------------------------------------- */

.rsaas-calendar {
    display: block;
    border: 1px solid var(--rsaas-border);
    border-radius: var(--rsaas-radius);
    background: var(--rsaas-bg-card);
    box-shadow: var(--rsaas-shadow);
    padding: 1.25rem;
    max-width: 380px;
}

.rsaas-calendar-header {
    margin-bottom: 0.75rem;
}

.rsaas-calendar-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--rsaas-text-main);
}

.rsaas-calendar-input {
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rsaas-border);
    border-radius: 3px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: #111;
    cursor: pointer;
}

.rsaas-calendar-loading {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.35rem;
}

/* Hidden once JS has initialised. rsaas-plugin.js adds .rsaas-loaded class. */
.rsaas-calendar.rsaas-loaded .rsaas-calendar-loading {
    display: none;
}

/* Re-surface the loading element as an error notice after a failed month fetch. */
.rsaas-calendar.rsaas-loaded.rsaas-has-error .rsaas-calendar-loading {
    display: block;
    color: #c00;
}

/* ---------------------------------------------------------------------------
   Calendar legend
--------------------------------------------------------------------------- */

.rsaas-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: var(--rsaas-text-muted);
}

.rsaas-calendar-legend li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.rsaas-calendar-legend li::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rsaas-legend-available::before  { background: var(--rsaas-legend-avail); }
.rsaas-legend-selected::before   { background: var(--rsaas-legend-sel); }
.rsaas-legend-unavailable::before { background: var(--rsaas-legend-unavail); }

/* ---------------------------------------------------------------------------
   Status messages
--------------------------------------------------------------------------- */

.rsaas-error {
    padding: 0.75rem 1rem;
    background: #fef0f0;
    border-left: 4px solid #c00;
    color: #c00;
    font-size: 0.95rem;
    margin: 0.5rem 0;
}

.rsaas-notice {
    padding: 0.75rem 1rem;
    background: #f7f7f7;
    border-left: 4px solid #888;
    color: #555;
    font-size: 0.95rem;
    margin: 0.5rem 0;
}

.rsaas-booking-message {
    margin-top: 1rem;
    font-size: 0.95rem;
}

.rsaas-booking-message.rsaas-success {
    padding: 0.75rem 1rem;
    background: #f0faf0;
    border-left: 4px solid #3a7;
    color: #235;
}

.rsaas-booking-message.rsaas-error {
    padding: 0.75rem 1rem;
    background: #fef0f0;
    border-left: 4px solid #c00;
    color: #c00;
}

/* ---------------------------------------------------------------------------
   Admin page (settings)
--------------------------------------------------------------------------- */

.rsaas-admin .rsaas-connection-status {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.rsaas-admin .rsaas-connected {
    background: #f0faf0;
    border: 1px solid #3a7;
    color: #235;
}

.rsaas-admin .rsaas-disconnected {
    background: #f7f7f7;
    border: 1px solid #ccc;
    color: #555;
}

/* ---------------------------------------------------------------------------
   Responsive — narrow screens (≤ 480 px)
--------------------------------------------------------------------------- */

@media ( max-width: 480px ) {
    .rsaas-rooms {
        flex-direction: column;
    }

    .rsaas-room-card {
        max-width: 100%;
    }

    .rsaas-calendar {
        max-width: 100%;
    }

    .rsaas-search-form,
    .rsaas-booking-form {
        flex-direction: column;
    }

    .rsaas-field {
        flex: 1 1 auto;
    }
}