/* ============================================================
   Hotel Booking Manager Pro — Frontend Styles
   Airbnb-inspired, mobile-first, clean hospitality aesthetic
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
    --hbmp-coral:       #ff385c;
    --hbmp-coral-dark:  #e0284e;
    --hbmp-coral-light: #fff0f3;
    --hbmp-navy:        #1a2744;
    --hbmp-gray-100:    #f7f7f7;
    --hbmp-gray-200:    #ebebeb;
    --hbmp-gray-300:    #dddddd;
    --hbmp-gray-500:    #717171;
    --hbmp-gray-700:    #484848;
    --hbmp-gray-900:    #222222;
    --hbmp-white:       #ffffff;
    --hbmp-success:     #008a05;
    --hbmp-warning:     #c47b10;
    --hbmp-danger:      #c13515;
    --hbmp-radius-sm:   8px;
    --hbmp-radius-md:   12px;
    --hbmp-radius-lg:   20px;
    --hbmp-radius-xl:   24px;
    --hbmp-shadow-sm:   0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
    --hbmp-shadow-md:   0 6px 16px rgba(0,0,0,.12);
    --hbmp-shadow-lg:   0 14px 36px rgba(0,0,0,.15);
    --hbmp-font:        'Circular','Helvetica Neue',Helvetica,Arial,sans-serif;
    --hbmp-transition:  0.2s ease;
}

/* ── Reset & Base ────────────────────────────────────────────── */
.hbmp-wrap * {
    box-sizing: border-box;
}

.hbmp-wrap {
    font-family: var(--hbmp-font);
    color: var(--hbmp-gray-900);
    line-height: 1.5;
}

/* ── Search Bar ──────────────────────────────────────────────── */
.hbmp-search-bar {
    background: var(--hbmp-white);
    border: 1px solid var(--hbmp-gray-300);
    border-radius: var(--hbmp-radius-xl);
    box-shadow: var(--hbmp-shadow-sm);
    display: flex;
    align-items: stretch;
    max-width: 860px;
    margin: 0 auto 32px;
    overflow: hidden;
    position: sticky;
    top: 80px;
    z-index: 100;
    transition: box-shadow var(--hbmp-transition);
}

.hbmp-search-bar:hover {
    box-shadow: var(--hbmp-shadow-md);
}

.hbmp-search-field {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-right: 1px solid var(--hbmp-gray-200);
    cursor: pointer;
    transition: background var(--hbmp-transition);
    min-width: 0;
}

.hbmp-search-field:hover,
.hbmp-search-field:focus-within {
    background: var(--hbmp-gray-100);
}

.hbmp-search-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--hbmp-gray-700);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
}

.hbmp-search-field input,
.hbmp-search-field select {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--hbmp-gray-900);
    outline: none;
    padding: 0;
    cursor: pointer;
}

.hbmp-search-field input::placeholder {
    color: var(--hbmp-gray-500);
}

.hbmp-search-submit {
    background: var(--hbmp-coral);
    border: none;
    border-radius: 0 var(--hbmp-radius-xl) var(--hbmp-radius-xl) 0;
    color: var(--hbmp-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    transition: background var(--hbmp-transition), transform var(--hbmp-transition);
    white-space: nowrap;
}

.hbmp-search-submit:hover {
    background: var(--hbmp-coral-dark);
    transform: none;
}

.hbmp-search-submit svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Mobile search */
@media (max-width: 767px) {
    .hbmp-search-bar {
        flex-direction: column;
        border-radius: var(--hbmp-radius-md);
        position: relative;
        top: auto;
    }
    .hbmp-search-field {
        border-right: none;
        border-bottom: 1px solid var(--hbmp-gray-200);
    }
    .hbmp-search-submit {
        border-radius: 0 0 var(--hbmp-radius-md) var(--hbmp-radius-md);
        justify-content: center;
    }
}

/* ── Guest Selector ──────────────────────────────────────────── */
.hbmp-guest-selector {
    position: relative;
}

.hbmp-guest-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--hbmp-white);
    border-radius: var(--hbmp-radius-md);
    box-shadow: var(--hbmp-shadow-md);
    padding: 16px;
    width: 280px;
    z-index: 200;
    border: 1px solid var(--hbmp-gray-200);
}

.hbmp-guest-dropdown.is-open {
    display: block;
}

.hbmp-guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--hbmp-gray-200);
}

.hbmp-guest-row:last-child {
    border-bottom: none;
}

.hbmp-guest-row-label strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.hbmp-guest-row-label span {
    font-size: 13px;
    color: var(--hbmp-gray-500);
}

.hbmp-counter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hbmp-counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--hbmp-gray-300);
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    color: var(--hbmp-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--hbmp-transition);
}

.hbmp-counter-btn:hover:not(:disabled) {
    border-color: var(--hbmp-gray-900);
    color: var(--hbmp-gray-900);
}

.hbmp-counter-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.hbmp-counter-value {
    font-size: 15px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

/* ── Filters Bar ─────────────────────────────────────────────── */
.hbmp-filters-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.hbmp-filter-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--hbmp-gray-300);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    background: var(--hbmp-white);
    cursor: pointer;
    transition: all var(--hbmp-transition);
    white-space: nowrap;
}

.hbmp-filter-pill:hover,
.hbmp-filter-pill.is-active {
    border-color: var(--hbmp-gray-900);
    background: var(--hbmp-gray-900);
    color: var(--hbmp-white);
}

/* ── Room Grid ───────────────────────────────────────────────── */
.hbmp-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

/* ── Room Card ───────────────────────────────────────────────── */
.hbmp-room-card {
    cursor: pointer;
    transition: transform var(--hbmp-transition);
}

.hbmp-room-card:hover {
    transform: translateY(-2px);
}

.hbmp-room-card__image-wrap {
    position: relative;
    border-radius: var(--hbmp-radius-md);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--hbmp-gray-200);
    margin-bottom: 12px;
}

.hbmp-room-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.hbmp-room-card:hover .hbmp-room-card__image {
    transform: scale(1.04);
}

.hbmp-room-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--hbmp-white);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: var(--hbmp-shadow-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hbmp-room-card__wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--hbmp-white);
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    font-size: 22px;
    transition: transform var(--hbmp-transition);
}

.hbmp-room-card__wishlist:hover {
    transform: scale(1.2);
}

.hbmp-room-card__wishlist.is-saved {
    color: var(--hbmp-coral);
    text-shadow: none;
}

.hbmp-room-card__body {}

.hbmp-room-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.hbmp-room-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--hbmp-gray-900);
    margin: 0;
    line-height: 1.3;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hbmp-room-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.hbmp-room-card__rating .hbmp-star {
    color: var(--hbmp-gray-900);
}

.hbmp-room-card__meta {
    font-size: 13px;
    color: var(--hbmp-gray-500);
    margin-bottom: 8px;
}

.hbmp-room-card__price {
    font-size: 14px;
    color: var(--hbmp-gray-900);
}

.hbmp-room-card__price strong {
    font-size: 16px;
    font-weight: 700;
}

.hbmp-room-card__price .hbmp-night {
    font-weight: 400;
    color: var(--hbmp-gray-500);
}

/* No image placeholder */
.hbmp-room-card__no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
}

/* ── Room Detail ─────────────────────────────────────────────── */
.hbmp-room-detail {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 16px 80px;
}

.hbmp-room-detail__gallery {
    position: relative;
    margin-bottom: 32px;
    border-radius: var(--hbmp-radius-lg);
    overflow: hidden;
}

.hbmp-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 300px;
    gap: 8px;
}

.hbmp-gallery-main {
    grid-row: span 2;
    position: relative;
    overflow: hidden;
    border-radius: var(--hbmp-radius-md) 0 0 var(--hbmp-radius-md);
}

.hbmp-gallery-thumb {
    position: relative;
    overflow: hidden;
}

.hbmp-gallery-thumb:nth-child(2) { border-radius: 0 var(--hbmp-radius-md) 0 0; }
.hbmp-gallery-thumb:last-child { border-radius: 0 0 var(--hbmp-radius-md) 0; }

.hbmp-gallery-main img,
.hbmp-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.hbmp-gallery-thumb:hover img,
.hbmp-gallery-main:hover img {
    transform: scale(1.04);
}

.hbmp-gallery-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: var(--hbmp-white);
    border: 1px solid var(--hbmp-gray-300);
    border-radius: var(--hbmp-radius-sm);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow var(--hbmp-transition);
}

.hbmp-gallery-btn:hover {
    box-shadow: var(--hbmp-shadow-sm);
}

.hbmp-room-detail__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: start;
}

.hbmp-room-detail__info {}

.hbmp-room-detail__title {
    font-size: 26px;
    font-weight: 700;
    color: var(--hbmp-gray-900);
    margin: 0 0 8px;
}

.hbmp-room-detail__type {
    font-size: 15px;
    color: var(--hbmp-gray-500);
    margin-bottom: 16px;
}

.hbmp-room-detail__highlights {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 20px 0;
    border-top: 1px solid var(--hbmp-gray-200);
    border-bottom: 1px solid var(--hbmp-gray-200);
    margin-bottom: 24px;
}

.hbmp-highlight-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.hbmp-highlight-item .hbmp-icon {
    font-size: 20px;
}

.hbmp-room-detail__description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--hbmp-gray-700);
    margin-bottom: 28px;
}

.hbmp-section-title {
    font-size: 20px;
    font-weight: 700;
    margin: 28px 0 16px;
    color: var(--hbmp-gray-900);
}

.hbmp-amenities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hbmp-amenity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--hbmp-gray-700);
}

.hbmp-amenity-item::before {
    content: '✓';
    color: var(--hbmp-coral);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

/* ── Booking Widget (sidebar) ────────────────────────────────── */
.hbmp-booking-widget {
    position: sticky;
    top: 100px;
    background: var(--hbmp-white);
    border: 1px solid var(--hbmp-gray-300);
    border-radius: var(--hbmp-radius-xl);
    padding: 24px;
    box-shadow: var(--hbmp-shadow-lg);
}

.hbmp-booking-widget__price-header {
    margin-bottom: 20px;
}

.hbmp-booking-widget__nightly {
    font-size: 22px;
    font-weight: 700;
}

.hbmp-booking-widget__nightly span {
    font-size: 14px;
    font-weight: 400;
    color: var(--hbmp-gray-500);
}

.hbmp-booking-widget__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    margin-top: 4px;
}

.hbmp-booking-date-fields {
    border: 1px solid var(--hbmp-gray-300);
    border-radius: var(--hbmp-radius-md);
    overflow: hidden;
    margin-bottom: 12px;
}

.hbmp-booking-date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.hbmp-booking-date-field {
    padding: 12px 16px;
    border-bottom: 1px solid var(--hbmp-gray-300);
    cursor: pointer;
    transition: background var(--hbmp-transition);
}

.hbmp-booking-date-field:first-child {
    border-right: 1px solid var(--hbmp-gray-300);
}

.hbmp-booking-date-field:hover,
.hbmp-booking-date-field:focus-within {
    background: var(--hbmp-gray-100);
}

.hbmp-booking-date-field label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.hbmp-booking-date-field input {
    border: none;
    background: transparent;
    font-size: 14px;
    width: 100%;
    padding: 0;
    outline: none;
    cursor: pointer;
}

.hbmp-booking-guest-field {
    padding: 12px 16px;
    cursor: pointer;
    position: relative;
}

.hbmp-booking-guest-field label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.hbmp-booking-guest-field .hbmp-guest-value {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hbmp-booking-widget__reserve-btn {
    width: 100%;
    background: linear-gradient(135deg, #ff385c 0%, #e0284e 100%);
    color: var(--hbmp-white);
    border: none;
    border-radius: var(--hbmp-radius-md);
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 16px;
    transition: all var(--hbmp-transition);
    letter-spacing: 0.2px;
}

.hbmp-booking-widget__reserve-btn:hover {
    background: linear-gradient(135deg, #e0284e 0%, #c41f42 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(255,56,92,0.35);
}

.hbmp-booking-widget__reserve-btn:active {
    transform: translateY(0);
}

.hbmp-booking-widget__reserve-btn:disabled {
    background: var(--hbmp-gray-300);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.hbmp-price-breakdown {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--hbmp-gray-200);
}

.hbmp-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--hbmp-gray-700);
}

.hbmp-price-row .hbmp-price-label {
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: default;
}

.hbmp-price-row--total {
    font-size: 16px;
    font-weight: 700;
    color: var(--hbmp-gray-900);
    border-top: 1px solid var(--hbmp-gray-200);
    padding-top: 12px;
    margin-top: 4px;
}

.hbmp-booking-note {
    font-size: 12px;
    color: var(--hbmp-gray-500);
    text-align: center;
    margin-top: 12px;
}

/* Mobile sticky bar */
.hbmp-mobile-booking-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--hbmp-white);
    border-top: 1px solid var(--hbmp-gray-200);
    padding: 12px 20px;
    z-index: 500;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}

.hbmp-mobile-booking-bar .hbmp-mobile-price {
    font-size: 16px;
    font-weight: 700;
}

.hbmp-mobile-booking-bar .hbmp-mobile-price span {
    font-size: 13px;
    font-weight: 400;
    color: var(--hbmp-gray-500);
}

.hbmp-mobile-reserve-btn {
    background: var(--hbmp-coral);
    color: var(--hbmp-white);
    border: none;
    border-radius: var(--hbmp-radius-sm);
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--hbmp-transition);
}

.hbmp-mobile-reserve-btn:hover {
    background: var(--hbmp-coral-dark);
}

@media (max-width: 1023px) {
    .hbmp-room-detail__layout {
        grid-template-columns: 1fr;
    }
    .hbmp-room-detail__sidebar {
        display: none;
    }
    .hbmp-mobile-booking-bar {
        display: flex;
    }
}

@media (max-width: 767px) {
    .hbmp-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .hbmp-gallery-main { grid-row: span 1; border-radius: var(--hbmp-radius-md); }
    .hbmp-gallery-thumb { display: none; }
    .hbmp-amenities-grid { grid-template-columns: 1fr; }
}

/* ── Booking Form ────────────────────────────────────────────── */
.hbmp-booking-form-wrap {
    max-width: 680px;
    margin: 0 auto;
}

.hbmp-form-card {
    background: var(--hbmp-white);
    border-radius: var(--hbmp-radius-lg);
    border: 1px solid var(--hbmp-gray-200);
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--hbmp-shadow-sm);
}

.hbmp-form-section-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--hbmp-gray-900);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hbmp-gray-200);
}

.hbmp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.hbmp-form-group {
    margin-bottom: 16px;
}

.hbmp-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--hbmp-gray-700);
    margin-bottom: 6px;
}

.hbmp-form-group input,
.hbmp-form-group select,
.hbmp-form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--hbmp-gray-300);
    border-radius: var(--hbmp-radius-sm);
    font-size: 14px;
    color: var(--hbmp-gray-900);
    transition: border-color var(--hbmp-transition), box-shadow var(--hbmp-transition);
    font-family: var(--hbmp-font);
    background: var(--hbmp-white);
}

.hbmp-form-group input:focus,
.hbmp-form-group select:focus,
.hbmp-form-group textarea:focus {
    border-color: var(--hbmp-gray-900);
    outline: none;
    box-shadow: 0 0 0 2px rgba(34,34,34,0.08);
}

.hbmp-form-group textarea {
    min-height: 100px;
    resize: vertical;
}

@media (max-width: 600px) {
    .hbmp-form-row {
        grid-template-columns: 1fr;
    }
    .hbmp-form-card {
        padding: 20px;
    }
}

/* Payment method selector */
.hbmp-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hbmp-payment-method-option {
    border: 2px solid var(--hbmp-gray-200);
    border-radius: var(--hbmp-radius-md);
    padding: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all var(--hbmp-transition);
}

.hbmp-payment-method-option:hover {
    border-color: var(--hbmp-gray-700);
}

.hbmp-payment-method-option.is-selected {
    border-color: var(--hbmp-coral);
    background: var(--hbmp-coral-light);
}

.hbmp-payment-method-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--hbmp-coral);
    flex-shrink: 0;
}

.hbmp-payment-method-label {
    font-size: 15px;
    font-weight: 600;
}

.hbmp-payment-method-desc {
    font-size: 13px;
    color: var(--hbmp-gray-500);
    margin-top: 2px;
}

.hbmp-payment-instructions {
    margin-top: 20px;
    background: var(--hbmp-gray-100);
    border-radius: var(--hbmp-radius-md);
    padding: 20px;
    border: 1px solid var(--hbmp-gray-200);
}

.hbmp-payment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.hbmp-payment-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.hbmp-payment-icon {
    font-size: 24px;
}

.hbmp-qr-wrap {
    text-align: center;
    margin-bottom: 16px;
}

.hbmp-qr-img {
    max-width: 200px;
    border-radius: var(--hbmp-radius-sm);
    border: 2px solid var(--hbmp-gray-200);
}

.hbmp-payment-details {
    background: var(--hbmp-white);
    border-radius: var(--hbmp-radius-sm);
    padding: 12px;
}

.hbmp-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--hbmp-gray-100);
    font-size: 14px;
}

.hbmp-detail-row:last-child {
    border-bottom: none;
}

.hbmp-detail-label {
    color: var(--hbmp-gray-500);
}

.hbmp-detail-value {
    font-weight: 600;
}

.hbmp-detail-total .hbmp-detail-value {
    color: var(--hbmp-coral);
    font-size: 16px;
}

.hbmp-payment-note {
    font-size: 13px;
    color: var(--hbmp-gray-500);
    margin-top: 12px;
}

/* Submit button */
.hbmp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--hbmp-radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--hbmp-transition);
    border: 2px solid transparent;
    text-decoration: none;
    line-height: 1;
}

.hbmp-btn-primary {
    background: var(--hbmp-coral);
    color: var(--hbmp-white);
    border-color: var(--hbmp-coral);
}

.hbmp-btn-primary:hover {
    background: var(--hbmp-coral-dark);
    border-color: var(--hbmp-coral-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255,56,92,0.3);
}

.hbmp-btn-outline {
    background: transparent;
    color: var(--hbmp-gray-900);
    border-color: var(--hbmp-gray-300);
}

.hbmp-btn-outline:hover {
    border-color: var(--hbmp-gray-900);
    background: var(--hbmp-gray-100);
}

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

.hbmp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* File upload */
.hbmp-file-upload-zone {
    border: 2px dashed var(--hbmp-gray-300);
    border-radius: var(--hbmp-radius-md);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all var(--hbmp-transition);
    position: relative;
}

.hbmp-file-upload-zone:hover,
.hbmp-file-upload-zone.drag-over {
    border-color: var(--hbmp-coral);
    background: var(--hbmp-coral-light);
}

.hbmp-file-upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.hbmp-file-upload-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.hbmp-file-upload-text {
    font-size: 14px;
    color: var(--hbmp-gray-700);
}

.hbmp-file-upload-hint {
    font-size: 12px;
    color: var(--hbmp-gray-500);
    margin-top: 4px;
}

/* ── Booking Dashboard ───────────────────────────────────────── */
.hbmp-dashboard {}

.hbmp-dashboard-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--hbmp-gray-200);
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
}

.hbmp-dashboard-tab {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hbmp-gray-500);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
    transition: color var(--hbmp-transition);
}

.hbmp-dashboard-tab:hover,
.hbmp-dashboard-tab.is-active {
    color: var(--hbmp-gray-900);
    border-bottom-color: var(--hbmp-gray-900);
}

.hbmp-booking-card {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 16px;
    background: var(--hbmp-white);
    border: 1px solid var(--hbmp-gray-200);
    border-radius: var(--hbmp-radius-md);
    padding: 20px;
    margin-bottom: 16px;
    transition: box-shadow var(--hbmp-transition);
    align-items: start;
}

.hbmp-booking-card:hover {
    box-shadow: var(--hbmp-shadow-sm);
}

.hbmp-booking-card__image {
    width: 120px;
    height: 90px;
    border-radius: var(--hbmp-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.hbmp-booking-card__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--hbmp-gray-900);
}

.hbmp-booking-card__dates {
    font-size: 14px;
    color: var(--hbmp-gray-500);
    margin-bottom: 8px;
}

.hbmp-booking-card__number {
    font-size: 12px;
    color: var(--hbmp-gray-500);
}

.hbmp-booking-card__amount {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.hbmp-booking-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.hbmp-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.hbmp-status-badge--pending { background: #fff3cd; color: #856404; }
.hbmp-status-badge--confirmed { background: #d1e7dd; color: #0f5132; }
.hbmp-status-badge--awaiting_payment { background: #cff4fc; color: #055160; }
.hbmp-status-badge--payment_verification { background: #e2d9f3; color: #432874; }
.hbmp-status-badge--checked_in { background: #d1e7dd; color: #0f5132; }
.hbmp-status-badge--checked_out { background: #e2e3e5; color: #41464b; }
.hbmp-status-badge--completed { background: #d1e7dd; color: #0f5132; }
.hbmp-status-badge--cancelled { background: #f8d7da; color: #842029; }
.hbmp-status-badge--refunded { background: #e2e3e5; color: #41464b; }
.hbmp-status-badge--draft { background: var(--hbmp-gray-100); color: var(--hbmp-gray-500); }

@media (max-width: 600px) {
    .hbmp-booking-card {
        grid-template-columns: 80px 1fr;
    }
    .hbmp-booking-card__actions {
        grid-column: 1/-1;
        flex-direction: row;
        align-items: center;
    }
    .hbmp-booking-card__image {
        width: 80px;
        height: 70px;
    }
}

/* ── Reviews ─────────────────────────────────────────────────── */
.hbmp-reviews-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px;
    background: var(--hbmp-gray-100);
    border-radius: var(--hbmp-radius-md);
    margin-bottom: 24px;
}

.hbmp-reviews-big-score {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.hbmp-reviews-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 4px;
}

.hbmp-reviews-stars .hbmp-star {
    color: #ffd700;
    font-size: 18px;
}

.hbmp-reviews-count {
    font-size: 13px;
    color: var(--hbmp-gray-500);
}

.hbmp-review-card {
    padding: 20px 0;
    border-bottom: 1px solid var(--hbmp-gray-200);
}

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

.hbmp-review-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.hbmp-review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hbmp-coral-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--hbmp-coral);
    flex-shrink: 0;
}

.hbmp-review-meta .hbmp-reviewer-name {
    font-weight: 700;
    font-size: 14px;
}

.hbmp-review-meta .hbmp-review-date {
    font-size: 12px;
    color: var(--hbmp-gray-500);
}

.hbmp-review-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--hbmp-gray-700);
}

/* ── Availability Calendar ───────────────────────────────────── */
.hbmp-calendar-wrap {
    background: var(--hbmp-white);
    border: 1px solid var(--hbmp-gray-200);
    border-radius: var(--hbmp-radius-md);
    padding: 20px;
    margin-bottom: 24px;
}

.hbmp-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.hbmp-calendar-nav button {
    background: none;
    border: 1px solid var(--hbmp-gray-200);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--hbmp-transition);
}

.hbmp-calendar-nav button:hover {
    border-color: var(--hbmp-gray-900);
    background: var(--hbmp-gray-100);
}

.hbmp-calendar-title {
    font-size: 16px;
    font-weight: 700;
}

.hbmp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.hbmp-calendar-grid .hbmp-cal-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hbmp-gray-500);
    padding: 4px;
}

.hbmp-cal-day {
    padding: 8px 4px;
    font-size: 13px;
    border-radius: var(--hbmp-radius-sm);
    cursor: pointer;
    transition: background var(--hbmp-transition);
    line-height: 1;
}

.hbmp-cal-day:hover:not(.is-disabled):not(.is-booked) {
    background: var(--hbmp-gray-100);
}

.hbmp-cal-day.is-today {
    font-weight: 700;
    color: var(--hbmp-coral);
}

.hbmp-cal-day.is-booked {
    background: var(--hbmp-gray-200);
    color: var(--hbmp-gray-400, #bbb);
    cursor: not-allowed;
    text-decoration: line-through;
}

.hbmp-cal-day.is-selected {
    background: var(--hbmp-gray-900);
    color: var(--hbmp-white);
    border-radius: 50%;
}

.hbmp-cal-day.is-in-range {
    background: var(--hbmp-gray-100);
}

.hbmp-cal-day.is-disabled {
    color: var(--hbmp-gray-300);
    cursor: not-allowed;
}

/* ── Notices ─────────────────────────────────────────────────── */
.hbmp-notice {
    padding: 14px 18px;
    border-radius: var(--hbmp-radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

.hbmp-notice--success { background: #d1e7dd; color: #0f5132; }
.hbmp-notice--error   { background: #f8d7da; color: #842029; }
.hbmp-notice--info    { background: #cff4fc; color: #055160; }
.hbmp-notice--warning { background: #fff3cd; color: #856404; }

/* ── Lightbox ────────────────────────────────────────────────── */
.hbmp-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.hbmp-lightbox.is-open {
    display: flex;
}

.hbmp-lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.hbmp-lightbox__img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--hbmp-radius-sm);
    object-fit: contain;
}

.hbmp-lightbox__close {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--hbmp-transition);
}

.hbmp-lightbox__close:hover {
    background: rgba(255,255,255,0.25);
}

.hbmp-lightbox__prev,
.hbmp-lightbox__next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: white;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--hbmp-transition);
}

.hbmp-lightbox__prev { left: 20px; }
.hbmp-lightbox__next { right: 20px; }

.hbmp-lightbox__prev:hover,
.hbmp-lightbox__next:hover {
    background: rgba(255,255,255,0.25);
}

/* ── Misc / Utility ──────────────────────────────────────────── */
.hbmp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--hbmp-gray-500);
    font-size: 15px;
}

.hbmp-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--hbmp-gray-200);
    border-top-color: var(--hbmp-coral);
    border-radius: 50%;
    animation: hbmp-spin 0.6s linear infinite;
    margin-right: 10px;
}

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

.hbmp-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.hbmp-empty-state__icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.hbmp-empty-state__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.hbmp-empty-state__text {
    font-size: 15px;
    color: var(--hbmp-gray-500);
    max-width: 360px;
    margin: 0 auto 24px;
}

.hbmp-pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}

.hbmp-pagination a,
.hbmp-pagination span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--hbmp-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    color: var(--hbmp-gray-700);
    transition: all var(--hbmp-transition);
}

.hbmp-pagination a:hover {
    border-color: var(--hbmp-gray-900);
    background: var(--hbmp-gray-100);
}

.hbmp-pagination .is-current {
    background: var(--hbmp-gray-900);
    color: var(--hbmp-white);
    border-color: var(--hbmp-gray-900);
}

.hbmp-login-prompt {
    text-align: center;
    padding: 60px 20px;
}

.hbmp-login-prompt p {
    font-size: 16px;
    margin-bottom: 20px;
    color: var(--hbmp-gray-700);
}