/**
 * HotelPlanner Frontend Styles - FIXED Version
 * Fixes: Load More button text, Photo Gallery caption text
 */

/* Search Form */
.hotelplanner-search-form,
.hotel-search-page,
body .hotelplanner-search-form,
body .hotel-search-page {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

/* COMPACT SEARCH FORM ON RESULTS PAGE */
.hotel-search-page .hotelplanner-search-form,
.hotel-search-page .hp-search-form {
    margin: 0 0 20px 0 !important;
    padding: 12px 16px !important;
    max-width: 100% !important;
}

.hotel-search-page .hp-search-form {
    display: grid !important;
    grid-template-columns: 2fr 1.5fr 1.5fr 1fr 1fr 1fr auto !important;
    gap: 10px !important;
    align-items: end !important;
}

.hotel-search-page .hp-search-form label {
    margin: 0 !important;
}

.hotel-search-page .hp-search-form label span {
    display: block !important;
    margin-bottom: 4px !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    color: #1d344f !important;
}

.hotel-search-page .hp-search-form .hp-input {
    padding: 8px 10px !important;
    font-size: 14px !important;
}

.hotel-search-page .hp-search-form .hp-search-button {
    grid-column: auto !important;
    justify-self: stretch !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    align-self: end !important;
}

/* Hide hidden radius field container on compact form */
.hotel-search-page .hp-search-form input[name="radius"] {
    display: none !important;
}

/* Fix for white-on-white text issue - ULTRA SPECIFIC */
.hotelplanner-search-form,
.hotelplanner-search-form *:not(.hp-search-button):not(.hp-view-rooms-btn):not(.hp-book-btn):not(.hp-load-more-btn),
.hotel-search-page,
.hotel-search-page *:not(.hp-search-button):not(.hp-view-rooms-btn):not(.hp-book-btn):not(.hp-load-more-btn),
body .hotelplanner-search-form,
body .hotelplanner-search-form *:not(.hp-search-button):not(.hp-view-rooms-btn):not(.hp-book-btn):not(.hp-load-more-btn),
body .hotel-search-page,
body .hotel-search-page *:not(.hp-search-button):not(.hp-view-rooms-btn):not(.hp-book-btn):not(.hp-load-more-btn),
html body .hotel-search-page,
html body .hotel-search-page *:not(.hp-search-button):not(.hp-view-rooms-btn):not(.hp-book-btn):not(.hp-load-more-btn) {
    color: #333 !important;
}

/* Force all headings to be dark */
.hotelplanner-search-form h1,
.hotelplanner-search-form h2,
.hotelplanner-search-form h3,
.hotelplanner-search-form h4,
.hotelplanner-search-form h5,
.hotelplanner-search-form h6,
.hotel-search-page h1,
.hotel-search-page h2,
.hotel-search-page h3,
.hotel-search-page h4,
.hotel-search-page h5,
.hotel-search-page h6,
.hp-search-form h1,
.hp-search-form h2,
.hp-search-form h3,
.hp-search-form h4,
.hp-search-form h5,
.hp-search-form h6,
body .hotel-search-page h1,
body .hotel-search-page h2,
body .hotel-search-page h3,
body .hotel-search-page h4,
body .hotel-search-page h5,
body .hotel-search-page h6,
html body .hotel-search-page h1,
html body .hotel-search-page h2,
html body .hotel-search-page h3,
html body .hotel-search-page h4,
html body .hotel-search-page h5,
html body .hotel-search-page h6,
h1.hp-heading,
h2.hp-heading,
h3.hp-heading,
h4.hp-heading,
h5.hp-heading,
h6.hp-heading {
    color: #1a1a1a !important;
}

.hp-search-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hp-search-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr auto;
    gap: 15px;
    align-items: end;
}

.hp-search-vertical .hp-search-row {
    grid-template-columns: 1fr;
}

.hp-search-compact .hp-search-row {
    grid-template-columns: 1fr 1fr;
}

.hp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hp-field label {
    font-weight: 500;
    font-size: 14px;
    color: #333 !important;
}

/* Additional heading fixes for any container */
div h1, div h2, div h3, div h4, div h5, div h6,
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6,
.hp-field h1, .hp-field h2, .hp-field h3, .hp-field h4, .hp-field h5, .hp-field h6 {
    color: #1a1a1a !important;
}

/* CENTER SEARCH BUTTON ON MAIN SEARCH FORM */
.hotelplanner-search-form .hp-search-button {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
}

/* BOOKING PAGE - Force all headings to black */
.hp-booking-page h1,
.hp-booking-page h2,
.hp-booking-page h3,
.hp-booking-page h4,
.hp-booking-page h5,
.hp-booking-page h6,
body .hp-booking-page h1,
body .hp-booking-page h2,
body .hp-booking-page h3,
body .hp-booking-page h4,
body .hp-booking-page h5,
body .hp-booking-page h6,
html body .hp-booking-page h1,
html body .hp-booking-page h2,
html body .hp-booking-page h3,
html body .hp-booking-page h4,
html body .hp-booking-page h5,
html body .hp-booking-page h6 {
    color: #000000 !important;
}

.hp-input {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
    color: #333 !important;
}

.hp-input:focus {
    outline: none;
    border-color: #2271b1;
}

/* Placeholder text color fix */
.hp-input::placeholder,
input::placeholder,
select::placeholder,
textarea::placeholder {
    color: #666 !important;
    opacity: 1;
}

.hp-input.error,
input.error,
select.error,
textarea.error {
    border-color: #d63638;
}

.hp-field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Guest Selector */
.hp-guests-selector {
    position: relative;
}

.hp-guests-toggle {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333 !important;
}

.hp-guests-toggle:after {
    content: "â–¼";
    font-size: 12px;
}

.hp-guests-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    margin-top: 5px;
    display: none;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    min-width: 280px;
}

.hp-guests-dropdown.active {
    display: block;
}

.hp-guest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 5px 0;
}

.hp-guest-row:last-child {
    margin-bottom: 0;
}

.hp-guest-row label {
    font-weight: 500;
    font-size: 14px;
    color: #333 !important;
}

.hp-counter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hp-counter-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    transition: all 0.3s;
    color: #333 !important;
    font-weight: bold;
}

.hp-counter-btn:hover {
    background: #f0f0f0;
    border-color: #2271b1;
    color: #2271b1;
}

.hp-counter-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.hp-counter-input {
    width: 50px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    font-size: 14px;
}

.hp-guests-summary {
    display: block;
    text-align: left;
}

/* Search Button and All Action Buttons - AGGRESSIVE WHITE TEXT */
.hp-search-button,
body .hp-search-button,
html body .hp-search-button,
.hp-modal .hp-search-button,
body .hp-modal .hp-search-button,
html body .hp-modal .hp-search-button {
    padding: 12px 30px;
    background: #2271b1;
    color: white !important;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
}

.hp-search-button:hover,
body .hp-search-button:hover,
html body .hp-search-button:hover,
.hp-modal .hp-search-button:hover,
body .hp-modal .hp-search-button:hover,
html body .hp-modal .hp-search-button:hover {
    background: #135e96;
    color: white !important;
}

.hp-view-rooms-btn,
body .hp-view-rooms-btn,
html body .hp-view-rooms-btn,
.hp-modal .hp-view-rooms-btn,
body .hp-modal .hp-view-rooms-btn,
html body .hp-modal .hp-view-rooms-btn {
    padding: 10px 20px;
    background: #2271b1;
    color: white !important;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
    text-decoration: none;
    white-space: nowrap;
    margin-top: auto;
}

.hp-view-rooms-btn:hover,
body .hp-view-rooms-btn:hover,
html body .hp-view-rooms-btn:hover,
.hp-modal .hp-view-rooms-btn:hover,
body .hp-modal .hp-view-rooms-btn:hover,
html body .hp-modal .hp-view-rooms-btn:hover {
    background: #135e96;
    color: white !important;
}

.hp-room-book-btn,
.hp-book-btn,
body .hp-room-book-btn,
body .hp-book-btn,
html body .hp-room-book-btn,
html body .hp-book-btn,
.hp-modal .hp-room-book-btn,
.hp-modal .hp-book-btn,
body .hp-modal .hp-room-book-btn,
body .hp-modal .hp-book-btn,
html body .hp-modal .hp-room-book-btn,
html body .hp-modal .hp-book-btn {
    padding: 10px 25px;
    background: #4caf50;
    color: white !important;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
}

.hp-book-btn:hover,
.hp-room-book-btn:hover,
body .hp-book-btn:hover,
body .hp-room-book-btn:hover,
html body .hp-book-btn:hover,
html body .hp-room-book-btn:hover,
.hp-modal .hp-book-btn:hover,
.hp-modal .hp-room-book-btn:hover,
body .hp-modal .hp-book-btn:hover,
body .hp-modal .hp-room-book-btn:hover,
html body .hp-modal .hp-book-btn:hover,
html body .hp-modal .hp-room-book-btn:hover {
    background: #45a049;
    color: white !important;
}

/* Reserve Button - White Text - BLUE COLOR - ULTRA SPECIFIC - OVERRIDE MODAL BODY */
.hp-modal-body .hp-room-tile .hp-room-content .hp-room-footer .hp-reserve-button,
.hp-modal-body .hp-room-tile .hp-room-footer .hp-reserve-button,
.hp-modal-body .hp-room-footer .hp-reserve-button,
.hp-modal-body .hp-reserve-button,
.hp-modal-body button.hp-reserve-button,
body .hp-modal-body .hp-reserve-button,
html body .hp-modal-body .hp-reserve-button,
.hp-room-modal .hp-modal-body .hp-reserve-button,
body .hp-room-modal .hp-modal-body .hp-reserve-button,
html body .hp-room-modal .hp-modal-body .hp-reserve-button,
.hp-reserve-button,
body .hp-reserve-button,
html body .hp-reserve-button,
.hp-modal .hp-reserve-button,
body .hp-modal .hp-reserve-button,
html body .hp-modal .hp-reserve-button,
.hp-room-modal .hp-reserve-button,
body .hp-room-modal .hp-reserve-button,
html body .hp-room-modal .hp-reserve-button {
    padding: 12px 30px !important;
    background: #2271b1 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
    width: 100% !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.hp-modal-body .hp-room-tile .hp-room-content .hp-room-footer .hp-reserve-button:hover,
.hp-modal-body .hp-room-tile .hp-room-footer .hp-reserve-button:hover,
.hp-modal-body .hp-room-footer .hp-reserve-button:hover,
.hp-modal-body .hp-reserve-button:hover,
.hp-modal-body button.hp-reserve-button:hover,
body .hp-modal-body .hp-reserve-button:hover,
html body .hp-modal-body .hp-reserve-button:hover,
.hp-room-modal .hp-modal-body .hp-reserve-button:hover,
body .hp-room-modal .hp-modal-body .hp-reserve-button:hover,
html body .hp-room-modal .hp-modal-body .hp-reserve-button:hover,
.hp-reserve-button:hover,
body .hp-reserve-button:hover,
html body .hp-reserve-button:hover,
.hp-modal .hp-reserve-button:hover,
body .hp-modal .hp-reserve-button:hover,
html body .hp-modal .hp-reserve-button:hover,
.hp-room-modal .hp-reserve-button:hover,
body .hp-room-modal .hp-reserve-button:hover,
html body .hp-room-modal .hp-reserve-button:hover {
    background: #135e96 !important;
    color: white !important;
}

/* Back to Top Button for Modal */
.hp-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #2271b1;
    color: white !important;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.hp-back-to-top:hover {
    background: #135e96;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.hp-back-to-top.visible {
    display: flex;
}

.hp-reserve-btn,
body .hp-reserve-btn,
html body .hp-reserve-btn,
.hp-modal .hp-reserve-btn,
body .hp-modal .hp-reserve-btn,
html body .hp-modal .hp-reserve-btn {
    width: 100%;
    background: #f4d03f;
    color: #1a1a1a !important;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.hp-reserve-btn:hover,
body .hp-reserve-btn:hover,
html body .hp-reserve-btn:hover,
.hp-modal .hp-reserve-btn:hover,
body .hp-modal .hp-reserve-btn:hover,
html body .hp-modal .hp-reserve-btn:hover {
    background: #e5c230;
    color: #1a1a1a !important;
}

/* Advanced Options */
.hp-advanced-options {
    margin-top: 20px;
}

.hp-advanced-toggle {
    background: none;
    border: none;
    color: #2271b1;
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
}

.hp-advanced-fields {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}

.hp-advanced-fields.active {
    display: grid;
}

.hp-price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hp-price-inputs input {
    flex: 1;
}

.hp-amenities-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hp-amenities-list label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: normal;
}

/* Search Results */
.hotelplanner-search-results {
    margin-top: 30px;
}

.hotelplanner-search-results h1,
.hotelplanner-search-results h2,
.hotelplanner-search-results h3,
.hotelplanner-search-results h4 {
    color: #1a1a1a !important;
}

.hp-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
}

.hp-results-header h1,
.hp-results-header h2,
.hp-results-header h3 {
    color: #1a1a1a !important;
}

.hp-results-count {
    font-size: 18px;
    font-weight: 500;
}

.hp-results-controls {
    display: flex;
    gap: 20px;
    align-items: center;
}

.hp-sort-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hp-sort-select {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.hp-view-controls {
    display: flex;
    gap: 5px;
}

.hp-view-btn {
    padding: 5px 10px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
}

.hp-view-btn.active {
    background: #2271b1;
    color: white;
    border-color: #2271b1;
}

/* Results Container */
/* OLD LAYOUT RULES - DISABLED FOR GRID LAYOUT
.hp-results-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
*/

/* Search Results Container - from template */
.hp-search-results-container {
    display: flex;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.hp-sidebar-column {
    width: 320px;
    flex-shrink: 0;
}

/* OLD RULE - DISABLED FOR GRID 
.hp-results-main {
    flex: 1;
    min-width: 0;
}
*/

.hp-search-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Sidebar Map Container */
.hp-sidebar-map-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.hp-sidebar-map-container h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a !important;
}

.hp-sidebar-map {
    height: 400px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

/* OLD RULES - DISABLED FOR GRID
.hp-results-sidebar {
    flex: 0 0 300px;
    position: sticky;
    top: 20px;
}

.hp-results-list {
    flex: 1;
    min-width: 0;
}

.hp-results-main {
    order: 1;
}
*/

/* OLD MAP LAYOUT - DISABLED
.hp-results-container:has(.hp-results-map-container) {
    grid-template-columns: 350px 1fr 300px;
}

.hp-results-map-container {
    order: 1;
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
}
*/

.hp-results-map {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

/* Loading State */
.hp-loading {
    text-align: center;
    padding: 60px 20px;
    background: transparent;
}

.hp-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #2271b1;
    border-radius: 50%;
    animation: hp-spin 1s linear infinite;
}

@keyframes hp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hotel Card (List View) */
.hp-hotel-card {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    transition: box-shadow 0.3s, transform 0.2s;
    overflow: hidden;
}

.hp-hotel-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.hp-hotel-card.highlighted {
    border: 2px solid #2271b1;
    box-shadow: 0 4px 16px rgba(34, 113, 177, 0.3);
}

.hp-hotel-image {
    flex-shrink: 0;
    width: 200px;
    height: 150px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.hp-hotel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-hotel-image-placeholder {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-hotel-image-placeholder .dashicons {
    font-size: 48px;
    color: #ccc;
    width: 48px;
    height: 48px;
}

.hp-hotel-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hp-hotel-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.hp-hotel-name {
    font-size: 20px;
    font-weight: 600;
    color: #000 !important;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
}

.hp-hotel-name a {
    color: #1a1a1a !important;
}

.hp-hotel-name-link {
    font-size: 12;
    color: #135e96;
    text-decoration: none;
    transition: color 0.2s;
}

.hp-hotel-name-link:hover {
    color: #2271b1;
    text-decoration: underline;
}

.hp-hotel-rating {
    display: inline-flex;
    gap: 2px;
    color: #FFD700 !important;
    font-size: 14px;
    line-height: 1;
}

.hp-hotel-rating .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.hp-hotel-location {
    color: #666;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.hp-distance {
    font-size: 13px;
    color: #999;
}

.hp-hotel-description {
    color: #666;
    font-size: 14px;
    line-height: 1.4;
    margin: 5px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hp-hotel-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hp-amenity-tag {
    padding: 4px 10px;
    background: #f0f0f0;
    border-radius: 15px;
    font-size: 12px;
    color: #666;
}

.hp-hotel-pricing {
    flex: 0 0 auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    min-width: 120px;
}

.hp-price {
    font-size: 24px;
    font-weight: 600;
    color: #2271b1;
    white-space: nowrap;
    margin-bottom: 5px;
}

.hp-price-info {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

/* Grid View */
.hp-results-items[data-view="grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.hp-results-items[data-view="grid"] .hp-hotel-card {
    flex-direction: column;
}

.hp-results-items[data-view="grid"] .hp-hotel-image {
    width: 100%;
    height: 200px;
}

/* Map Popup Styles */
.leaflet-popup-content {
    min-width: 200px;
}

.hp-map-popup h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
}

.hp-map-popup p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #666;
}

.hp-map-popup .hp-view-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    background: #2271b1;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background 0.2s;
}

.hp-map-popup .hp-view-btn:hover {
    background: #135e96;
}

/* Filters Sidebar - FIXED */
.hp-filters {
    background: #ffffff !important;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
}

/* FORCE all filter headings to be dark - CRITICAL FIX */
.hp-filters h3,
.hp-filters h4,
body .hp-filters h3,
body .hp-filters h4,
html body .hp-filters h3,
html body .hp-filters h4,
.hp-filter-group h4,
body .hp-filter-group h4,
html body .hp-filter-group h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a !important;
}

.hp-filter-group {
    margin-bottom: 25px;
}

.hp-filter-group h4 {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a !important;
}

.hp-name-filter {
    margin-bottom: 15px;
}

.hp-name-filter input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #333 !important;
}

.hp-name-filter input::placeholder {
    color: #999 !important;
}

.hp-name-filter input:focus {
    outline: none;
    border-color: #2271b1;
}

/* FIXED Price Filter with proper slider styling */
.hp-price-filter {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hp-price-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 3px;
    outline: none;
}

.hp-price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #2271b1;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.hp-price-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #2271b1;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.hp-price-slider::-webkit-slider-thumb:hover {
    background: #135e96;
    transform: scale(1.1);
}

.hp-price-slider::-moz-range-thumb:hover {
    background: #135e96;
    transform: scale(1.1);
}

.hp-price-display,
.hp-price-display span {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: #333 !important;
}

.hp-rating-filter,
.hp-amenities-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hp-rating-filter label,
.hp-amenities-filter label,
.hp-filters label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    color: #333 !important;
    padding: 4px 0;
    transition: background 0.2s;
}

.hp-rating-filter label:hover,
.hp-amenities-filter label:hover {
    background: #f5f5f5;
    padding-left: 4px;
    border-radius: 4px;
}

.hp-rating-filter input[type="checkbox"],
.hp-amenities-filter input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.hp-stars {
    color: #ffd700 !important;
}

.hp-apply-filters,
.hp-clear-filters {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.3s;
}

.hp-apply-filters {
    background: #2271b1 !important;
    color: #fff !important;
}

.hp-apply-filters:hover {
    background: #135e96 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(34, 113, 177, 0.3);
}

.hp-clear-filters {
    background: #f0f0f0 !important;
    color: #666 !important;
}

.hp-clear-filters:hover {
    background: #e0e0e0 !important;
}

/* Pagination */
.hp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 30px;
    padding: 20px;
}

.hp-pagination a,
.hp-pagination span {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
}

.hp-pagination a:hover {
    background: #f0f0f0;
}

.hp-pagination .current {
    background: #2271b1;
    color: white;
    border-color: #2271b1;
}

/* Room Availability */
.hp-room-list,
body .hp-room-list,
html body .hp-room-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hp-room-card,
body .hp-room-card,
html body .hp-room-card {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    gap: 20px;
    background: #fff;
    transition: box-shadow .2s;
    color: #333 !important;
}

/* Force all text inside room cards to be dark */
.hp-room-card *,
body .hp-room-card *,
html body .hp-room-card * {
    color: #333 !important;
}

.hp-room-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hp-room-info,
body .hp-room-info {
    color: #333 !important;
}

.hp-room-info h3,
body .hp-room-info h3,
html body .hp-room-info h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #1a1a1a !important;
}

.hp-room-name,
body .hp-room-name,
html body .hp-room-name {
    font-size: 1.1rem;
    color: #1a1a1a !important;
}

.hp-room-description,
body .hp-room-description {
    font-size: 0.98rem;
    color: #333 !important;
}

.hp-room-features,
body .hp-room-features {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #666 !important;
}

.hp-room-features span,
.hp-feature,
body .hp-room-features span,
body .hp-feature {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.98rem;
    color: #666 !important;
}

.hp-cancel-policy {
    font-size: 14px;
    color: #4caf50 !important;
    margin-top: 10px;
}

.hp-cancel-policy.non-refundable {
    color: #f44336 !important;
}

.hp-room-pricing,
body .hp-room-pricing {
    flex: 1;
    min-width: 180px;
    max-width: 250px;
    text-align: right;
    padding: 12px;
    margin-top: 8px;
    background: #f5f8fa;
    border-radius: 6px;
    width: 100%;
    color: #333 !important;
}

/* Booking Form */
.hp-booking-form {
    max-width: 800px;
    margin: 0 auto;
}

.hp-booking-section {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 20px;
}

.hp-booking-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

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

.hp-form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hp-form-field label {
    font-weight: 500;
    font-size: 14px;
}

.hp-form-field input,
.hp-form-field select,
.hp-form-field textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    color: #333 !important;
}

.hp-payment-icons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.hp-payment-icons img {
    height: 30px;
}

/* My Bookings */
.hotelplanner-my-bookings {
    max-width: 1200px;
    margin: 0 auto;
}

.hp-bookings-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.hp-filter-btn {
    padding: 8px 20px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.hp-filter-btn.active {
    background: #2271b1;
    color: white;
    border-color: #2271b1;
}

.hp-booking-item {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 20px;
    padding: 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
}

.hp-booking-status {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.hp-booking-status.confirmed {
    background: #d4f4dd;
    color: #00a32a;
}

.hp-booking-status.cancelled {
    background: #ffd6d6;
    color: #d63638;
}

/* Empty State */
.hp-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: #666;
    font-size: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

.hp-empty-state p {
    margin: 0 0 20px 0;
    font-size: 18px;
}

.hp-no-results {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

.hp-no-results p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* Modal Styles */
.hp-modal,
body .hp-modal,
html body .hp-modal {
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hp-fade-in 0.3s;
}

/* Force all modal content to have dark text EXCEPT buttons */
.hp-modal *:not(.hp-search-button):not(.hp-view-rooms-btn):not(.hp-book-btn):not(.hp-room-book-btn):not(.hp-reserve-btn):not(.hp-search-button *):not(.hp-view-rooms-btn *):not(.hp-book-btn *):not(.hp-room-book-btn *):not(.hp-reserve-btn *),
body .hp-modal *:not(.hp-search-button):not(.hp-view-rooms-btn):not(.hp-book-btn):not(.hp-room-book-btn):not(.hp-reserve-btn):not(.hp-search-button *):not(.hp-view-rooms-btn *):not(.hp-book-btn *):not(.hp-room-book-btn *):not(.hp-reserve-btn *),
html body .hp-modal *:not(.hp-search-button):not(.hp-view-rooms-btn):not(.hp-book-btn):not(.hp-room-book-btn):not(.hp-reserve-btn):not(.hp-search-button *):not(.hp-view-rooms-btn *):not(.hp-book-btn *):not(.hp-room-book-btn *):not(.hp-reserve-btn *) {
    color: #333 !important;
}

@keyframes hp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hp-modal-content,
body .hp-modal-content {
    background-color: #fff;
    width: 95%;
    max-width: 1400px;
    max-height: 95vh;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    color: #333 !important;
}

.hp-modal-header,
body .hp-modal-header {
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hp-modal-header h3,
body .hp-modal-header h3,
html body .hp-modal-header h3 {
    margin: 0;
    font-size: 24px;
    color: #333 !important;
}

.hp-modal-close,
body .hp-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999 !important;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-modal-close:hover {
    color: #333 !important;
}

.hp-modal-body,
body .hp-modal-body,
html body .hp-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    color: #333 !important;
}

/* Force all text inside modal body to be dark EXCEPT buttons */
.hp-modal-body *:not(.hp-search-button):not(.hp-view-rooms-btn):not(.hp-book-btn):not(.hp-room-book-btn):not(.hp-reserve-btn):not(.hp-reserve-button):not(.hp-load-more-btn):not(.hp-view-gallery-btn):not(.hp-photo-gallery-btn):not(.hp-search-button *):not(.hp-view-rooms-btn *):not(.hp-book-btn *):not(.hp-room-book-btn *):not(.hp-reserve-btn *):not(.hp-reserve-button *):not(.hp-load-more-btn *):not(.hp-view-gallery-btn *):not(.hp-photo-gallery-btn *),
body .hp-modal-body *:not(.hp-search-button):not(.hp-view-rooms-btn):not(.hp-book-btn):not(.hp-room-book-btn):not(.hp-reserve-btn):not(.hp-reserve-button):not(.hp-load-more-btn):not(.hp-view-gallery-btn):not(.hp-photo-gallery-btn):not(.hp-search-button *):not(.hp-view-rooms-btn *):not(.hp-book-btn *):not(.hp-room-book-btn *):not(.hp-reserve-btn *):not(.hp-reserve-button *):not(.hp-load-more-btn *):not(.hp-view-gallery-btn *):not(.hp-photo-gallery-btn *),
html body .hp-modal-body *:not(.hp-search-button):not(.hp-view-rooms-btn):not(.hp-book-btn):not(.hp-room-book-btn):not(.hp-reserve-btn):not(.hp-reserve-button):not(.hp-load-more-btn):not(.hp-view-gallery-btn):not(.hp-photo-gallery-btn):not(.hp-search-button *):not(.hp-view-rooms-btn *):not(.hp-book-btn *):not(.hp-room-book-btn *):not(.hp-reserve-btn *):not(.hp-reserve-button *):not(.hp-load-more-btn *):not(.hp-view-gallery-btn *):not(.hp-photo-gallery-btn *) {
    color: #333 !important;
}

/* Force all headings inside modal body to be very dark */
.hp-modal-body h1,
.hp-modal-body h2,
.hp-modal-body h3,
.hp-modal-body h4,
.hp-modal-body h5,
.hp-modal-body h6,
body .hp-modal-body h1,
body .hp-modal-body h2,
body .hp-modal-body h3,
body .hp-modal-body h4,
body .hp-modal-body h5,
body .hp-modal-body h6 {
    color: #1a1a1a !important;
}

.hp-room-modal .hp-modal-content {
    max-width: 1400px;
    width: 95%;
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.hp-room-modal .hp-modal-body,
body .hp-room-modal .hp-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    max-height: calc(90vh - 60px);
    color: #333 !important;
}

.hp-room-modal .hp-modal-header,
body .hp-room-modal .hp-modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e0e0e0;
    background: white;
}

.hp-room-modal .hp-modal-header h3,
body .hp-room-modal .hp-modal-header h3,
html body .hp-room-modal .hp-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a !important;
}

.hp-room-modal .hp-modal-close,
body .hp-room-modal .hp-modal-close {
    font-size: 24px;
    color: #666 !important;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: all 0.2s;
}

.hp-room-modal .hp-modal-close:hover {
    background: #f5f5f5;
    color: #1a1a1a;
}

.hp-room-modal .hp-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    text-align: center;
}

.hp-room-modal .hp-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0066cc;
    border-radius: 50%;
    animation: hp-spin 1s linear infinite;
    margin-bottom: 16px;
}

/* Badge Styles */
.hp-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #2271b1;
    color: white;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    margin-right: 5px;
}

/* Utilities */
.hp-text-center {
    text-align: center;
}

.hp-mt-20 {
    margin-top: 20px;
}

.hp-mb-20 {
    margin-bottom: 20px;
}

.hp-error {
    padding: 15px;
    background: #ffd6d6;
    color: #d63638;
    border-radius: 4px;
    margin-bottom: 20px;
}

.hp-success {
    padding: 15px;
    background: #d4f4dd;
    color: #00a32a;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hp-search-row {
        grid-template-columns: 1fr 1fr;
    }
    
    .hp-field-group {
        grid-column: span 2;
    }
}

@media (max-width: 1024px) {
    /* OLD FLEX RULE - DISABLED FOR GRID
    .hp-results-container {
        flex-direction: column;
    }
    */
    
    .hp-results-sidebar {
        position: relative;
        top: 0;
        flex: 1;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hp-search-row {
        grid-template-columns: 1fr;
    }
    
    .hp-hotel-card {
        flex-direction: column;
    }
    
    .hp-hotel-image {
        width: 100%;
        height: 200px;
    }
    
    .hp-form-row {
        grid-template-columns: 1fr;
    }
}


/**
 * 2-COLUMN LAYOUT
 * Left: Filters + Map | Right: Hotel Results
 */

/* Force 2-column layout: Sidebar (filters + map) | Results */
.hp-results-container {
    display: grid !important;
    grid-template-columns: 250px 1fr !important;
    grid-template-rows: auto !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
}

/* Left sidebar - filters AND map - Column 1 */
.hp-results-sidebar {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    position: sticky !important;
    top: 20px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
}

/* Filters section */
.hp-filters {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    flex-shrink: 0 !important;
}

/* Map container in sidebar */
.hp-results-sidebar .hp-sidebar-map-container {
    display: block !important;
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    flex-shrink: 0 !important;
}

.hp-results-sidebar .hp-sidebar-map-container h3 {
    margin: 0 0 12px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
}

.hp-results-sidebar .hp-sidebar-map,
.hp-results-sidebar #hp-results-map {
    height: 350px !important;
    width: 100% !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid #e0e0e0 !important;
}

/* Hide the map wrapper that was in column 3 */
.hp-results-map-wrapper {
    display: none !important;
}

/* Right area - hotel results - Column 2 */
.hp-results-main {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.hp-results-list {
    min-width: 0 !important;
    width: 100% !important;
}

/* Make sure results items stack vertically */
.hp-results-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Pagination stays in right column */
.hp-pagination-container {
    grid-column: 2 / 3 !important;
    width: 100% !important;
}

/* Yellow stars in filters */
.hp-rating-filter .hp-stars,
.hp-stars {
    color: #FFD700 !important;
    font-size: 14px !important;
}

/* Responsive: Stack on mobile */
@media (max-width: 1024px) {
    .hp-results-container {
        grid-template-columns: 1fr !important;
    }
    
    .hp-results-sidebar {
        position: relative !important;
        max-height: none !important;
        order: 2 !important;
    }
    
    .hp-results-main {
        grid-column: 1 !important;
        order: 1 !important;
    }
    
    .hp-results-sidebar .hp-sidebar-map,
    .hp-results-sidebar #hp-results-map {
        height: 300px !important;
    }
}

/* jQuery UI Datepicker Fix - Ensure it shows above everything */
.ui-datepicker {
    z-index: 99999 !important;
}

/* ======================================
   LOAD MORE BUTTON FIX - WHITE TEXT
   ====================================== */
.hp-load-more-btn,
button.hp-load-more,
.hp-pagination-container button,
body .hp-load-more-btn,
body button.hp-load-more,
body .hp-pagination-container button,
html body .hp-load-more-btn,
html body button.hp-load-more,
html body .hp-pagination-container button,
.hp-modal .hp-load-more-btn,
body .hp-modal .hp-load-more-btn,
html body .hp-modal .hp-load-more-btn,
.hp-modal button.hp-load-more,
body .hp-modal button.hp-load-more,
html body .hp-modal button.hp-load-more {
    padding: 12px 30px !important;
    background: #2271b1 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.hp-load-more-btn:hover,
button.hp-load-more:hover,
.hp-pagination-container button:hover,
body .hp-load-more-btn:hover,
body button.hp-load-more:hover,
body .hp-pagination-container button:hover,
html body .hp-load-more-btn:hover,
html body button.hp-load-more:hover,
html body .hp-pagination-container button:hover,
.hp-modal .hp-load-more-btn:hover,
body .hp-modal .hp-load-more-btn:hover,
html body .hp-modal .hp-load-more-btn:hover,
.hp-modal button.hp-load-more:hover,
body .hp-modal button.hp-load-more:hover,
html body .hp-modal button.hp-load-more:hover {
    background: #135e96 !important;
    color: white !important;
}

/* ======================================
   VIEW GALLERY / PHOTO BUTTON FIX - WHITE TEXT
   ====================================== */
.hp-view-gallery-btn,
button.hp-view-gallery,
.hp-photo-gallery-btn,
.hp-view-photos-btn,
body .hp-view-gallery-btn,
body button.hp-view-gallery,
body .hp-photo-gallery-btn,
body .hp-view-photos-btn,
html body .hp-view-gallery-btn,
html body button.hp-view-gallery,
html body .hp-photo-gallery-btn,
html body .hp-view-photos-btn,
.hp-modal .hp-view-gallery-btn,
body .hp-modal .hp-view-gallery-btn,
html body .hp-modal .hp-view-gallery-btn,
.hp-modal button.hp-view-gallery,
body .hp-modal button.hp-view-gallery,
html body .hp-modal button.hp-view-gallery,
.hp-modal .hp-photo-gallery-btn,
body .hp-modal .hp-photo-gallery-btn,
html body .hp-modal .hp-photo-gallery-btn {
    padding: 10px 20px !important;
    background: #2271b1 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
    text-decoration: none !important;
}

.hp-view-gallery-btn:hover,
button.hp-view-gallery:hover,
.hp-photo-gallery-btn:hover,
.hp-view-photos-btn:hover,
body .hp-view-gallery-btn:hover,
body button.hp-view-gallery:hover,
body .hp-photo-gallery-btn:hover,
body .hp-view-photos-btn:hover,
html body .hp-view-gallery-btn:hover,
html body button.hp-view-gallery:hover,
html body .hp-photo-gallery-btn:hover,
html body .hp-view-photos-btn:hover,
.hp-modal .hp-view-gallery-btn:hover,
body .hp-modal .hp-view-gallery-btn:hover,
html body .hp-modal .hp-view-gallery-btn:hover,
.hp-modal button.hp-view-gallery:hover,
body .hp-modal button.hp-view-gallery:hover,
html body .hp-modal button.hp-view-gallery:hover,
.hp-modal .hp-photo-gallery-btn:hover,
body .hp-modal .hp-photo-gallery-btn:hover,
html body .hp-modal .hp-photo-gallery-btn:hover {
    background: #135e96 !important;
    color: white !important;
}

/* ======================================
   GALLERY MODAL CAPTION FIX - WHITE TEXT
   ====================================== */
.hp-gallery-modal .hp-caption,
.hp-photo-modal .hp-caption,
.hp-lightbox-caption,
.hp-image-caption,
.hp-photo-caption,
body .hp-gallery-modal .hp-caption,
body .hp-photo-modal .hp-caption,
body .hp-lightbox-caption,
body .hp-image-caption,
body .hp-photo-caption,
html body .hp-gallery-modal .hp-caption,
html body .hp-photo-modal .hp-caption,
html body .hp-lightbox-caption,
html body .hp-image-caption,
html body .hp-photo-caption,
.hp-modal .hp-caption,
body .hp-modal .hp-caption,
html body .hp-modal .hp-caption,
.hp-gallery-modal .hp-modal-body .hp-caption,
body .hp-gallery-modal .hp-modal-body .hp-caption,
html body .hp-gallery-modal .hp-modal-body .hp-caption,
.hp-photo-modal .hp-modal-body .hp-caption,
body .hp-photo-modal .hp-modal-body .hp-caption,
html body .hp-photo-modal .hp-modal-body .hp-caption {
    color: white !important;
    background: rgba(0, 0, 0, 0.7) !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* Photo gallery image counter / navigation */
.hp-gallery-counter,
.hp-photo-counter,
.hp-image-counter,
body .hp-gallery-counter,
body .hp-photo-counter,
body .hp-image-counter,
html body .hp-gallery-counter,
html body .hp-photo-counter,
html body .hp-image-counter,
.hp-modal .hp-gallery-counter,
.hp-modal .hp-photo-counter,
body .hp-modal .hp-gallery-counter,
body .hp-modal .hp-photo-counter,
html body .hp-modal .hp-gallery-counter,
html body .hp-modal .hp-photo-counter {
    color: white !important;
    background: rgba(0, 0, 0, 0.6) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}

/* Gallery navigation buttons */
.hp-gallery-prev,
.hp-gallery-next,
.hp-photo-prev,
.hp-photo-next,
body .hp-gallery-prev,
body .hp-gallery-next,
body .hp-photo-prev,
body .hp-photo-next,
html body .hp-gallery-prev,
html body .hp-gallery-next,
html body .hp-photo-prev,
html body .hp-photo-next {
    background: rgba(0, 0, 0, 0.5) !important;
    color: white !important;
    border: none !important;
    font-size: 24px !important;
    padding: 10px 15px !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
}

.hp-gallery-prev:hover,
.hp-gallery-next:hover,
.hp-photo-prev:hover,
.hp-photo-next:hover,
body .hp-gallery-prev:hover,
body .hp-gallery-next:hover,
body .hp-photo-prev:hover,
body .hp-photo-next:hover,
html body .hp-gallery-prev:hover,
html body .hp-gallery-next:hover,
html body .hp-photo-prev:hover,
html body .hp-photo-next:hover {
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
}

/* ======================================
   ULTRA AGGRESSIVE PHOTO CAPTION FIX
   Maximum specificity to override everything
   ====================================== */

/* Photo captions - ALL possible selectors */
div.hp-photo-caption,
span.hp-photo-caption,
p.hp-photo-caption,
.hp-modal div.hp-photo-caption,
.hp-modal span.hp-photo-caption,
.hp-modal p.hp-photo-caption,
.hp-gallery-modal div.hp-photo-caption,
.hp-gallery-modal span.hp-photo-caption,
.hp-gallery-modal p.hp-photo-caption,
.hp-photo-modal div.hp-photo-caption,
.hp-photo-modal span.hp-photo-caption,
.hp-photo-modal p.hp-photo-caption,
body div.hp-photo-caption,
body span.hp-photo-caption,
body p.hp-photo-caption,
html body div.hp-photo-caption,
html body span.hp-photo-caption,
html body p.hp-photo-caption,
.hp-modal-body div.hp-photo-caption,
.hp-modal-body span.hp-photo-caption,
.hp-modal-body p.hp-photo-caption,
body .hp-modal div.hp-photo-caption,
body .hp-modal span.hp-photo-caption,
body .hp-modal p.hp-photo-caption,
html body .hp-modal div.hp-photo-caption,
html body .hp-modal span.hp-photo-caption,
html body .hp-modal p.hp-photo-caption {
    color: white !important;
    background: rgba(0, 0, 0, 0.7) !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    text-align: center !important;
    display: block !important;
}

/* More photos button - ALL possible selectors */
button.hp-more-photos,
a.hp-more-photos,
.hp-more-photos-btn,
div.hp-more-photos,
span.hp-more-photos,
.hp-modal button.hp-more-photos,
.hp-modal a.hp-more-photos,
.hp-modal .hp-more-photos-btn,
.hp-gallery-modal button.hp-more-photos,
.hp-gallery-modal a.hp-more-photos,
.hp-gallery-modal .hp-more-photos-btn,
body button.hp-more-photos,
body a.hp-more-photos,
body .hp-more-photos-btn,
html body button.hp-more-photos,
html body a.hp-more-photos,
html body .hp-more-photos-btn,
body .hp-modal button.hp-more-photos,
body .hp-modal a.hp-more-photos,
body .hp-modal .hp-more-photos-btn,
html body .hp-modal button.hp-more-photos,
html body .hp-modal a.hp-more-photos,
html body .hp-modal .hp-more-photos-btn {
    padding: 10px 20px !important;
    background: #2271b1 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
    text-decoration: none !important;
    display: inline-block !important;
}

button.hp-more-photos:hover,
a.hp-more-photos:hover,
.hp-more-photos-btn:hover,
.hp-modal button.hp-more-photos:hover,
.hp-modal a.hp-more-photos:hover,
.hp-modal .hp-more-photos-btn:hover,
body button.hp-more-photos:hover,
body a.hp-more-photos:hover,
body .hp-more-photos-btn:hover,
html body button.hp-more-photos:hover,
html body a.hp-more-photos:hover,
html body .hp-more-photos-btn:hover,
body .hp-modal button.hp-more-photos:hover,
body .hp-modal a.hp-more-photos:hover,
body .hp-modal .hp-more-photos-btn:hover,
html body .hp-modal button.hp-more-photos:hover,
html body .hp-modal a.hp-more-photos:hover,
html body .hp-modal .hp-more-photos-btn:hover {
    background: #135e96 !important;
    color: white !important;
}

/* Image wrapper caption fallback */
.hp-image-wrapper .hp-caption,
.hp-photo-wrapper .hp-caption,
.hp-gallery-item .hp-caption,
body .hp-image-wrapper .hp-caption,
body .hp-photo-wrapper .hp-caption,
body .hp-gallery-item .hp-caption,
html body .hp-image-wrapper .hp-caption,
html body .hp-photo-wrapper .hp-caption,
html body .hp-gallery-item .hp-caption,
.hp-modal .hp-image-wrapper .hp-caption,
.hp-modal .hp-photo-wrapper .hp-caption,
.hp-modal .hp-gallery-item .hp-caption,
body .hp-modal .hp-image-wrapper .hp-caption,
body .hp-modal .hp-photo-wrapper .hp-caption,
body .hp-modal .hp-gallery-item .hp-caption {
    color: white !important;
    background: rgba(0, 0, 0, 0.7) !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
}

/* Generic figcaption for galleries */
.hp-gallery-modal figcaption,
.hp-photo-modal figcaption,
.hp-modal figcaption,
body .hp-gallery-modal figcaption,
body .hp-photo-modal figcaption,
body .hp-modal figcaption,
html body .hp-gallery-modal figcaption,
html body .hp-photo-modal figcaption,
html body .hp-modal figcaption {
    color: white !important;
    background: rgba(0, 0, 0, 0.7) !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
}

/* All text inside photo galleries should be white */
.hp-gallery-modal,
.hp-photo-modal,
body .hp-gallery-modal,
body .hp-photo-modal,
html body .hp-gallery-modal,
html body .hp-photo-modal {
    color: white !important;
}

.hp-gallery-modal *:not(button):not(.hp-close),
.hp-photo-modal *:not(button):not(.hp-close),
body .hp-gallery-modal *:not(button):not(.hp-close),
body .hp-photo-modal *:not(button):not(.hp-close),
html body .hp-gallery-modal *:not(button):not(.hp-close),
html body .hp-photo-modal *:not(button):not(.hp-close) {
    color: white !important;
}

/* ======================================
   HIDE PHOTO CAPTIONS IN GALLERY
   Removes the black bars at bottom of photos
   ====================================== */

/* Hide all photo captions */
.hp-photo-caption,
.hp-caption,
.hp-image-caption,
.hp-gallery-caption,
div.hp-photo-caption,
span.hp-photo-caption,
p.hp-photo-caption,
[class*="photo-caption"],
[class*="image-caption"],
[class*="gallery-caption"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
}

/* Hide captions in modals */
.hp-modal .hp-photo-caption,
.hp-modal .hp-caption,
.hp-modal .hp-image-caption,
.hp-gallery-modal .hp-photo-caption,
.hp-gallery-modal .hp-caption,
.hp-photo-modal .hp-photo-caption,
.hp-photo-modal .hp-caption,
body .hp-modal .hp-photo-caption,
body .hp-modal .hp-caption {
    display: none !important;
    visibility: hidden !important;
}

/* Hide figcaptions */
.hp-gallery-modal figcaption,
.hp-photo-modal figcaption,
.hp-modal figcaption,
figure figcaption {
    display: none !important;
    visibility: hidden !important;
}

/* HP-MORE-PHOTOS BUTTON - WHITE TEXT (keeping your button fix) */
.hp-more-photos,
button.hp-more-photos,
a.hp-more-photos,
.hp-more-photos-btn,
body .hp-more-photos,
body button.hp-more-photos,
body a.hp-more-photos,
html body .hp-more-photos,
html body button.hp-more-photos,
html body a.hp-more-photos,
.hp-modal .hp-more-photos,
.hp-modal button.hp-more-photos,
.hp-modal a.hp-more-photos,
[class*="hp-more-photos"] {
    background: #2271b1 !important;
    background-color: #2271b1 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.hp-more-photos:hover,
button.hp-more-photos:hover,
a.hp-more-photos:hover,
[class*="hp-more-photos"]:hover {
    background: #135e96 !important;
    background-color: #135e96 !important;
    color: #ffffff !important;
}

/* Force any text inside the button to be white */
.hp-more-photos *,
button.hp-more-photos *,
a.hp-more-photos *,
[class*="hp-more-photos"] * {
    color: #ffffff !important;
}

/* ======================================
   ULTRA AGGRESSIVE HP-MORE-PHOTOS FIX
   Adding even more specific selectors
   ====================================== */

/* See photos button - all variations */
.hp-more-photos,
button.hp-more-photos,
a.hp-more-photos,
.hp-more-photos-btn,
.hp-see-photos,
button.hp-see-photos,
a.hp-see-photos,
[class*="more-photos"],
[class*="see-photos"],
[class*="view-photos"],
div.hp-more-photos button,
div.hp-more-photos a,
body .hp-more-photos,
body button.hp-more-photos,
body a.hp-more-photos,
html body .hp-more-photos,
html body button.hp-more-photos,
html body a.hp-more-photos,
body div.hp-more-photos button,
body div.hp-more-photos a,
.hp-modal .hp-more-photos,
.hp-modal button.hp-more-photos,
.hp-modal a.hp-more-photos,
.hp-modal .hp-see-photos,
.hp-modal button.hp-see-photos {
    background: #2271b1 !important;
    background-color: #2271b1 !important;
    color: white !important;
    border: none !important;
    border-color: #2271b1 !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.hp-more-photos:hover,
button.hp-more-photos:hover,
a.hp-more-photos:hover,
[class*="more-photos"]:hover,
[class*="see-photos"]:hover {
    background: #135e96 !important;
    background-color: #135e96 !important;
    color: white !important;
}

/* Force all text and icons inside to be white */
.hp-more-photos *,
button.hp-more-photos *,
a.hp-more-photos *,
.hp-see-photos *,
button.hp-see-photos *,
a.hp-see-photos *,
[class*="more-photos"] *,
[class*="see-photos"] *,
body .hp-more-photos *,
body button.hp-more-photos *,
body a.hp-more-photos * {
    color: white !important;
}

/* Target the specific button structure shown in screenshot */
.hp-modal-body .hp-more-photos,
.hp-modal-body button.hp-more-photos,
.hp-modal-body a.hp-more-photos,
body .hp-modal-body .hp-more-photos,
body .hp-modal-body button.hp-more-photos,
body .hp-modal-body a.hp-more-photos {
    background: #2271b1 !important;
    color: white !important;
}

/* PAGINATION DISABLED - HIDE ALL PAGINATION CONTROLS */
.hp-pagination,
.hp-pagination-container,
.hp-pagination-top,
.hp-load-more,
.pagination {
    display: none !important;
}