/*
 * Hotel Booking — Search + Summary CSS
 * Layout and structure only. Colours, fonts, and button styles
 * are intentionally NOT set here — they inherit from the active theme.
 */

/* ---- Search form ---- */
.hb-search-wrap { margin: 0 0 2em; }
.hb-search-title { margin-bottom: 0.75em; }

.hb-search-form { padding: 1.5em; }

.hb-search-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: flex-end;
}

.hb-search-field {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 140px;
}

.hb-search-field label {
    margin-bottom: 0.3em;
    font-size: 0.875em;
    font-weight: 600;
}

.hb-search-field input,
.hb-search-field select {
    width: 100%;
}

.hb-search-btn-wrap { justify-content: flex-end; }

.hb-nights-badge {
    margin-top: 0.5em;
    font-size: 0.85em;
    opacity: 0.7;
}

/* ---- Results grid ---- */
.hb-search-results { margin-top: 2em; }

.hb-room-cards {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
    gap: 1.5em;
}

.hb-room-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hb-card-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.hb-card-body {
    padding: 1em;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hb-card-header {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    flex-wrap: wrap;
    margin-bottom: 0.5em;
}

.hb-card-name {
    margin: 0;
    font-size: 1.1em;
}

.hb-card-meta {
    font-size: 0.85em;
    opacity: 0.7;
    margin: 0 0 0.75em;
}

.hb-card-pricing {
    margin-bottom: 1em;
}

.hb-card-total {
    font-size: 1.2em;
    font-weight: 700;
    display: block;
}

.hb-card-per-night {
    font-size: 0.85em;
    opacity: 0.7;
}

/* Two buttons side by side */
.hb-card-actions {
    display: flex;
    gap: 0.5em;
    margin-top: auto;
}

.hb-card-actions a {
    flex: 1;
    text-align: center;
}

/* ---- Availability widget (product page) ---- */
.hb-availability-widget { margin: 1.5em 0; }

.hb-avail-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: flex-end;
    margin-bottom: 1em;
}

.hb-avail-field {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 120px;
}

.hb-avail-field label {
    margin-bottom: 0.3em;
    font-size: 0.875em;
    font-weight: 600;
}

.hb-avail-field small {
    margin-top: 0.25em;
    font-size: 0.78em;
    opacity: 0.65;
}

.hb-avail-status { margin: 0.75em 0; }
.hb-avail-ok { color: inherit; }
.hb-avail-no { color: inherit; opacity: 0.8; }

.hb-avail-actions { margin-top: 0.75em; }

.hb-price-preview {
    margin-bottom: 0.75em;
    font-size: 0.95em;
}

/* ---- Booking summary page ---- */
.hb-summary-wrap { max-width: 640px; margin: 0 auto; }

.hb-summary-room {
    display: flex;
    gap: 1.25em;
    align-items: flex-start;
    margin-bottom: 1.5em;
}

.hb-summary-img img {
    width: 180px;
    height: 120px;
    object-fit: cover;
    display: block;
}

.hb-summary-room-name { margin: 0 0 0.3em; }

.hb-summary-details {
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    margin-bottom: 1.5em;
    opacity: 0.9;
}

.hb-summary-details { opacity: 1; }

.hb-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6em 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    font-size: 0.95em;
}

.hb-summary-row:last-child { border-bottom: none; }

.hb-summary-total-row {
    font-size: 1.05em;
    font-weight: 700;
    padding-top: 0.75em;
}

.hb-summary-requests { margin-bottom: 1.5em; }

.hb-summary-requests label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4em;
}

.hb-summary-requests textarea {
    width: 100%;
    resize: vertical;
}

.hb-summary-requests small {
    display: block;
    margin-top: 0.3em;
    font-size: 0.8em;
    opacity: 0.65;
}

.hb-summary-actions {
    display: flex;
    gap: 1em;
    align-items: center;
    flex-wrap: wrap;
}

/* ---- Loading / no results ---- */
.hb-loading, .hb-no-results {
    opacity: 0.65;
    font-style: italic;
}

/* ---- Responsive ---- */
@media ( max-width: 600px ) {
    .hb-search-fields { flex-direction: column; }
    .hb-search-field  { min-width: 100%; }
    .hb-room-cards    { grid-template-columns: 1fr; }
    .hb-summary-room  { flex-direction: column; }
    .hb-summary-img img { width: 100%; height: 180px; }
    .hb-avail-fields  { flex-direction: column; }
}