/**
 * Streamline Integration — Plugin Styles
 *
 * Inherits from the theme's Bootstrap 5 CSS custom properties.
 * No plugin-specific color variables — everything references --bs-* vars.
 */

/* ── Base ──────────────────────────────────────────────────────────── */
.si-error {
    color: var(--bs-danger);
    padding: 12px;
    background: var(--bs-danger-bg-subtle);
    border-left: 4px solid var(--bs-danger);
    border-radius: var(--bs-border-radius);
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.si-btn {
    display: inline-block;
    padding: var(--bs-btn-padding-y, 0) var(--bs-btn-padding-x, 1.75rem);
    font-size: var(--bs-btn-font-size, 0.875rem);
    font-weight: var(--bs-btn-font-weight, 800);
    line-height: var(--bs-btn-line-height, 1.5);
    border: var(--bs-btn-border-width, 2px) solid transparent;
    border-radius: var(--bs-btn-border-radius, 0);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, opacity 0.2s, border-color 0.2s;
}

.si-btn:disabled {
    opacity: var(--bs-btn-disabled-opacity, 0.65);
    cursor: not-allowed;
}

.si-btn--primary {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

.si-btn--primary:hover:not(:disabled) {
    background: var(--bs-btn-hover-bg, var(--bs-primary));
    border-color: var(--bs-btn-hover-border-color, transparent);
}

.si-btn--secondary {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.si-btn--secondary:hover:not(:disabled) {
    background: var(--bs-gray-200);
}

.si-btn--small {
    padding: 4px 14px;
    font-size: 13px;
}

.si-btn--large {
    padding: 8px 36px;
    font-size: 17px;
}

/* ── Search Layout (sidebar + content) ─────────────────────────────── */
.si-search-wrapper {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--bs-gutter-x, 2.5rem);
    align-items: start;
}

.si-search-sidebar {
    position: sticky;
    top: 32px;
    background: var(--bs-gray-100);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 20px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}

.si-search-sidebar .si-form-row {
    flex-direction: column;
}

.si-search-sidebar .si-field {
    flex: 1 1 100%;
}

.si-search-sidebar .si-checkbox-group {
    flex-direction: column;
}

.si-search-sidebar .si-form-row--actions {
    flex-direction: column;
    gap: 8px;
}

.si-search-sidebar .si-form-row--actions .si-btn {
    width: 100%;
}

.si-search-content {
    min-height: 400px;
}

/* ── Forms ─────────────────────────────────────────────────────────── */
.si-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.si-field {
    flex: 1 1 180px;
}

.si-field--full {
    flex: 1 1 100%;
}

.si-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.si-field input,
.si-field select {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    font-family: var(--bs-body-font-family);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-sizing: border-box;
}

.si-field input:focus,
.si-field select:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: var(--bs-focus-ring-width, 0.25rem) var(--bs-focus-ring-width, 0.25rem) 0 rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity, 0.25));
    box-shadow: 0 0 0 var(--bs-focus-ring-width, 0.25rem) rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity, 0.25));
}

.si-input--error {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 var(--bs-focus-ring-width, 0.25rem) rgba(var(--bs-danger-rgb), 0.25) !important;
}

/* ── Filter Accordions ─────────────────────────────────────────────── */
.si-filter-accordion {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    margin-bottom: 12px;
    overflow: hidden;
}

.si-filter-accordion summary {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.si-filter-accordion summary::-webkit-details-marker {
    display: none;
}

.si-filter-accordion summary::after {
    content: '+';
    font-size: 18px;
    font-weight: 700;
    color: var(--bs-secondary-color);
    transition: transform 0.2s;
}

.si-filter-accordion[open] summary::after {
    content: '\2212'; /* minus sign */
}

.si-filter-accordion > .si-checkbox-group {
    padding: 8px 14px 14px;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.si-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.si-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}

.si-checkbox input[type="checkbox"],
.si-checkbox input[type="radio"] {
    width: auto;
    margin: 0;
}

/* ── Loading ───────────────────────────────────────────────────────── */
.si-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    color: var(--bs-secondary-color);
}

.si-spinner {
    width: 36px;
    height: 36px;
    border: 4px solid var(--bs-border-color);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: si-spin 0.8s linear infinite;
}

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

/* ── Search Results ────────────────────────────────────────────────── */
.si-results-count {
    margin-bottom: 16px;
    color: var(--bs-secondary-color);
}

.si-no-results {
    text-align: center;
    padding: 40px;
    color: var(--bs-secondary-color);
}

.si-property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.si-property-grid--small {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.si-property-card {
    background: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    box-shadow: var(--bs-box-shadow-sm);
    transition: box-shadow 0.2s;
}

.si-property-card:hover {
    box-shadow: var(--bs-box-shadow);
}

.si-property-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.si-property-card__body {
    padding: var(--bs-card-spacer-x, 1.25rem);
}

.si-property-card__title {
    margin: 0 0 4px;
    font-size: 17px;
    color: var(--bs-heading-color, inherit);
}

.si-property-card__title a {
    color: var(--bs-primary);
    text-decoration: none;
}

.si-property-card__title a:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}

.si-property-card__location {
    font-size: 13px;
    color: var(--bs-secondary-color);
    margin: 0 0 8px;
}

.si-property-card__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.si-property-card__price {
    font-size: 16px;
    font-weight: 700;
    color: var(--bs-success);
    margin: 0 0 12px;
}

/* ── Single Property ───────────────────────────────────────────────── */
.si-single-property__header {
    margin-bottom: 24px;
}

.si-single-property__title {
    margin: 0 0 4px;
    font-size: 28px;
    color: var(--bs-primary);
}

.si-single-property__subtitle {
    color: var(--bs-secondary-color);
    font-size: 15px;
    margin: 0;
}

.si-single-property__meta {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
    font-size: 15px;
}

.si-single-property__description {
    margin: 24px 0;
    line-height: 1.7;
}

.si-section-title {
    font-size: 20px;
    color: var(--bs-primary);
    margin: 32px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bs-border-color);
}

/* ── Gallery ───────────────────────────────────────────────────────── */
.si-gallery {
    margin-bottom: 24px;
}

.si-gallery__main img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
}

.si-gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.si-gallery__thumb {
    flex: 0 0 auto;
    border: 2px solid transparent;
    border-radius: var(--bs-border-radius-sm);
    cursor: pointer;
    padding: 0;
    background: none;
}

.si-gallery__thumb img {
    width: 72px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--bs-border-radius-sm);
    display: block;
}

.si-gallery__thumb--active {
    border-color: var(--bs-primary);
}

.si-virtual-tour {
    margin-bottom: 24px;
}

/* ── Amenities Panel ───────────────────────────────────────────────── */
.si-amenities-group {
    margin-bottom: 8px;
}

.si-amenities-group summary {
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
    font-size: 15px;
}

.si-amenities-group ul {
    padding-left: 24px;
    margin: 4px 0 0;
    columns: 2;
}

.si-amenities-group li {
    font-size: 14px;
    margin-bottom: 4px;
}

/* ── Availability Calendar ─────────────────────────────────────────── */
.si-calendar-section {
    margin: 32px 0;
}

.si-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
}

.si-cal-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.si-cal-table th {
    padding: 8px;
    font-size: 13px;
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.si-cal-table td {
    padding: 10px;
    font-size: 14px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    cursor: default;
}

.si-day--available {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    text-decoration: underline;
}

.si-day--checkin {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.si-day--checkout {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.si-day--booked {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.si-day--selectable {
    cursor: pointer;
}

.si-day--selectable:hover {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.si-day--selected-in,
.si-day--selected-out {
    outline: 3px solid var(--bs-primary);
    outline-offset: -3px;
    font-weight: 700;
}

.si-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    font-size: 13px;
}

.si-legend {
    display: flex;
    align-items: center;
    gap: 6px;
}

.si-legend::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.si-legend--available::before  { background: var(--bs-primary-bg-subtle); }
.si-legend--checkin::before    { background: var(--bs-success-bg-subtle); }
.si-legend--checkout::before   { background: var(--bs-warning-bg-subtle); }
.si-legend--booked::before     { background: var(--bs-danger-bg-subtle); }

/* ── Price Calculator ──────────────────────────────────────────────── */
.si-price-calc {
    margin: 32px 0;
}

.si-price-form {
    margin-bottom: 16px;
}

.si-price-table {
    width: 100%;
    max-width: 400px;
    border-collapse: collapse;
    margin: 16px 0;
}

.si-price-table td {
    padding: 8px 12px;
    font-size: 15px;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.si-price-table td:last-child {
    text-align: right;
    font-weight: 600;
}

.si-price-table__total td {
    font-weight: 700;
    border-top: 2px solid var(--bs-body-color);
}

.si-book-cta {
    text-align: center;
    margin: 24px 0;
}

/* ── Reviews ───────────────────────────────────────────────────────── */
.si-reviews-panel details > summary {
    cursor: pointer;
}

.si-review {
    padding: 16px 0;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.si-review:last-child {
    border-bottom: none;
}

.si-review__rating {
    font-weight: 700;
    color: var(--bs-warning);
    margin-bottom: 4px;
}

.si-review__text {
    line-height: 1.6;
    margin: 0 0 4px;
}

.si-review__author {
    font-size: 13px;
    color: var(--bs-secondary-color);
    margin: 0;
}

/* ── Booking Flow ──────────────────────────────────────────────────── */
.si-booking-steps {
    display: flex;
    gap: 4px;
    margin-bottom: 28px;
}

.si-step {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 600;
    background: var(--bs-gray-100);
    border-radius: var(--bs-border-radius-sm);
    color: var(--bs-secondary-color);
}

.si-step--active {
    background: var(--bs-primary);
    color: #fff;
}

.si-step--done {
    background: var(--bs-success);
    color: #fff;
}

.si-booking-summary {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
    padding: var(--bs-card-spacer-x, 1.25rem);
    background: var(--bs-gray-100);
    border-radius: var(--bs-border-radius);
}

.si-booking-thumb {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
}

.si-booking-price {
    margin-bottom: 24px;
}

.si-coupon-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 20px;
}

.si-coupon-row label {
    font-size: 14px;
    font-weight: 600;
}

.si-coupon-row input {
    padding: 8px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    font-size: 14px;
}

.si-booking-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 20px;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* ── VRA ───────────────────────────────────────────────────────────── */
.si-vra-text {
    max-height: 400px;
    overflow-y: auto;
    padding: 16px;
    background: var(--bs-gray-100);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 16px;
}

.si-vra-actions {
    margin-bottom: 16px;
}

/* ── Payment ───────────────────────────────────────────────────────── */
.si-payment-total {
    padding: 16px;
    background: var(--bs-gray-100);
    border-radius: var(--bs-border-radius);
    font-size: 18px;
    margin: 20px 0;
}

.si-payment-total strong {
    color: var(--bs-success);
}

#si-booking-error {
    margin-top: 16px;
}

/* ── Similar Properties ────────────────────────────────────────────── */
.si-similar {
    margin-top: 40px;
}

.si-property-card--small img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.si-property-card--small h4 {
    padding: 10px;
    margin: 0;
    font-size: 14px;
}

.si-property-card--small h4 a {
    color: var(--bs-primary);
    text-decoration: none;
}

/* ── Print ─────────────────────────────────────────────────────────── */
@media print {
    .si-booking-steps,
    .si-booking-nav,
    .si-vra-actions,
    .si-coupon-row,
    .si-btn {
        display: none !important;
    }

    .si-vra-text {
        max-height: none;
        overflow: visible;
        border: none;
        padding: 0;
    }
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .si-search-wrapper {
        grid-template-columns: 1fr;
    }

    .si-search-sidebar {
        position: static;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .si-form-row {
        flex-direction: column;
    }

    .si-field {
        flex: 1 1 100%;
    }

    .si-property-grid {
        grid-template-columns: 1fr;
    }

    .si-booking-summary {
        flex-direction: column;
        text-align: center;
    }

    .si-booking-steps {
        flex-direction: column;
    }

    .si-amenities-group ul {
        columns: 1;
    }

    .si-gallery__main img {
        max-height: 300px;
    }
}