/**
 * Hotel Custom Styles
 * Extracted from Blade templates
 * Brand Colors Applied
 *
 * Color System:
 * --brand-blue:    #144E8D (Trust / Structure)
 * --brand-gold:    #CF9336 (Value / CTA)
 * --gold-soft:     #EBC265 (Hover / Accent)
 * --gold-dark:     #8A652B (Borders / Footer)
 * --neutral-gray:  #6C757D (Secondary Text)
 * --white:         #FFFFFF (Space)
 */

/* ========================================
   CSS VARIABLES
======================================== */
:root {
 --brand-blue: #144E8D;
 --brand-gold: #CF9336;
 --gold-soft: #EBC265;
 --gold-dark: #8A652B;
 --neutral-gray: #6C757D;
 --white: #FFFFFF;


 /* New Colors */
 --color-offer: #dc3545;
 /* Red for Offers/Discounts */
 --color-tag-bg: #e9ecef;
 /* Light Gray for default Tags */
 --color-tag-text: #495057;
 /* Dark Gray for Tag Text */


 /* Shadows */
 --shadow-primary: 0 4px 12px rgba(20, 78, 141, 0.15);
 --shadow-hover: 0 8px 24px rgba(20, 78, 141, 0.25);
}

/* ========================================
   ENHANCED ROOM CARDS
======================================== */
.enhanced-room-card {
 background: #fff;
 border: 1px solid rgba(108, 117, 125, 0.15);
 border-radius: 8px;
 padding: 20px;
 margin-bottom: 20px;
 transition: all 0.3s ease;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.enhanced-room-card:hover {
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 transform: translateY(-2px);
 border-color: var(--brand-blue);
}

.enhanced-room-card .room-thumb {
 position: relative;
 overflow: hidden;
 border-radius: 6px;
}

.enhanced-room-card .room-thumb .image {
 cursor: pointer;
 position: relative;
}

.enhanced-room-card .room-thumb .image img {
 transition: transform 0.3s ease;
}

.enhanced-room-card .room-thumb .image:hover img {
 transform: scale(1.05);
}

.enhanced-room-card .count-gallery {
 position: absolute;
 bottom: 10px;
 right: 10px;
 background: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 5px 10px;
 border-radius: 4px;
 font-size: 12px;
}

.enhanced-room-card .room-name {
 color: var(--neutral-gray);
 transition: color 0.25s ease;
}

.enhanced-room-card .room-name:hover {
 color: var(--brand-blue);
}

.enhanced-room-card .room-quick-info .info-item {
 background: #f8fafc;
 padding: 5px 10px;
 border-radius: 4px;
 font-weight: 500;
}

.enhanced-room-card .rate-plan-info .badge {
 font-weight: 600;
 padding: 6px 12px;
 font-size: 12px;
}

.enhanced-room-card .price-book-section {
 position: sticky;
 top: 20px;
}

.enhanced-room-card .price-book-section .price {
 line-height: 1.2;
}

.enhanced-room-card .price-book-section .price-details {
 margin-top: 8px;
 line-height: 1.6;
}

.enhanced-room-card .room-selection select {
 font-size: 14px;
 font-weight: 500;
}

.enhanced-room-card .available-qty {
 padding-top: 10px;
 border-top: 1px solid rgba(108, 117, 125, 0.15);
 margin-top: 15px;
}

/* ========================================
   LOADING STATES
======================================== */
.hotel_list_rooms.loading {
 position: relative;
 min-height: 200px;
}

.hotel_list_rooms.loading::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(255, 255, 255, 0.8);
 z-index: 10;
}

.hotel_list_rooms.loading::after {
 content: 'Loading rooms...';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 z-index: 11;
 font-size: 18px;
 font-weight: 600;
 color: var(--brand-blue);
}

/* Loading Skeleton */
.loading-skeleton {
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.skeleton-card {
 display: flex;
 gap: 20px;
 background: #fff;
 border: 1px solid rgba(108, 117, 125, 0.15);
 border-radius: 8px;
 padding: 20px;
}

.skeleton-image {
 width: 200px;
 height: 200px;
 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
 background-size: 200% 100%;
 animation: loading 1.5s infinite;
 border-radius: 6px;
}

.skeleton-content {
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 10px 0;
}

.skeleton-line {
 height: 16px;
 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
 background-size: 200% 100%;
 animation: loading 1.5s infinite;
 border-radius: 4px;
}

.skeleton-price {
 width: 150px;
 height: 100px;
 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
 background-size: 200% 100%;
 animation: loading 1.5s infinite;
 border-radius: 6px;
}

@keyframes loading {
 0% {
  background-position: 200% 0;
 }

 100% {
  background-position: -200% 0;
 }
}

/* Empty State */
.empty-state {
 text-align: center;
 padding: 60px 20px;
 background: #fff;
 border: 1px solid rgba(108, 117, 125, 0.15);
 border-radius: 8px;
}

.empty-state-icon {
 margin-bottom: 20px;
}

/* ========================================
   ANIMATIONS
======================================== */
.enhanced-room-card {
 animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
 from {
  opacity: 0;
  transform: translateY(20px);
 }

 to {
  opacity: 1;
  transform: translateY(0);
 }
}

.enhanced-room-card:nth-child(1) {
 animation-delay: 0.1s;
}

.enhanced-room-card:nth-child(2) {
 animation-delay: 0.2s;
}

.enhanced-room-card:nth-child(3) {
 animation-delay: 0.3s;
}

.enhanced-room-card:nth-child(4) {
 animation-delay: 0.4s;
}

.enhanced-room-card:nth-child(5) {
 animation-delay: 0.5s;
}

/* Badge Hover Effects */
.rate-plan-info .badge {
 transition: all 0.3s ease;
}

.rate-plan-info .badge:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Price Section Enhancements */
.price-book-section {
 transition: all 0.3s ease;
}

.price-book-section:hover {
 box-shadow: 0 4px 12px rgba(20, 78, 141, 0.15);
}

/* ========================================
   SUGGESTED ROOMS
======================================== */
/* .suggested-room-block styles moved - extends hotel-card-item */

.text-muted {
 font-size: 16px;
}

.text-muted strong {
 text-decoration: line-through;
}

.suggested-room-title {
 color: white;
 margin-bottom: 15px;
 font-size: 1.5em;
 font-weight: 600;
}

.suggested-room-info {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 15px;
 margin-bottom: 15px;
}

.suggested-room-info .info-item {
 background: rgba(255, 255, 255, 0.1);
 padding: 10px 15px;
 border-radius: 8px;
 backdrop-filter: blur(10px);
}

.suggested-room-info .meal-info {
 margin-top: 10px;
 padding: 10px 15px;
 background: rgba(255, 255, 255, 0.15);
 border-radius: 8px;
 backdrop-filter: blur(10px);
}

.suggested-room-price {
 text-align: center;
 padding: 20px;
 background: rgba(255, 255, 255, 0.1);
 border-radius: 12px;
 backdrop-filter: blur(10px);
}

.suggested-room-price .price-label {
 font-size: 0.9em;
 opacity: 0.9;
 margin-bottom: 5px;
}

.suggested-room-price .price-amount {
 font-size: 2em;
 font-weight: bold;
 margin: 10px 0;
}

.suggested-room-price .price-total {
 font-size: 1.2em;
 opacity: 0.9;
 margin: 10px 0;
}

.suggested-room-price .price-nights {
 font-size: 0.85em;
 opacity: 0.8;
 margin-bottom: 15px;
}

.btn-quick-book {
 width: 100%;
 padding: 12px 24px;
 font-size: 1.1em;
 font-weight: 600;
 border: 2px solid white;
 background: white;
 color: var(--brand-blue);
 border-radius: 25px;
 transition: all 0.3s ease;
 margin-top: 10px;
}

.btn-quick-book:hover {
 background: transparent;
 color: white;
 transform: scale(1.05);
 box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

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

/* ========================================
   SEARCH INFO BADGE
======================================== */
.search-info-badge {
 margin-top: 15px;
 padding: 15px 20px;
 background: linear-gradient(135deg, rgba(20, 78, 141, 0.05) 0%, rgba(207, 147, 54, 0.05) 100%);
 border-radius: 10px;
 border-left: 5px solid var(--brand-blue);
 display: inline-block;
 box-shadow: var(--shadow-primary);
}

.search-info-container {
 display: flex;
 gap: 20px;
 flex-wrap: wrap;
 align-items: center;
}

.search-info-item {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 8px 12px;
 background: white;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-info-item i {
 color: var(--brand-blue);
 font-size: 1.2em;
}

.search-info-item strong {
 color: var(--neutral-gray);
 margin-right: 5px;
}

.search-info-item .value {
 color: var(--neutral-gray);
 font-weight: 500;
}

.search-info-item .child-ages {
 color: var(--neutral-gray);
 font-size: 0.9em;
}

.search-info-item.nights-count {
 background: var(--brand-blue);
 color: white;
}

.search-info-item.nights-count i,
.search-info-item.nights-count strong,
.search-info-item.nights-count .value {
 color: white;
}

/* ========================================
   SUGGESTED ROOM WRAPPER
======================================== */
.suggested-room-wrapper {
 margin: 15px 0;
 padding: 15px;
 background: #f8fafc;
 border-radius: 15px;
 border: 1px solid rgba(108, 117, 125, 0.1);
}

.section-title-suggested {
 color: var(--brand-blue);
 margin-bottom: 20px;
 font-size: 1.8em;
 font-weight: bold;
 text-align: center;
 padding-bottom: 15px;
 border-bottom: 3px solid var(--brand-blue);
}

.section-title-suggested i {
 color: var(--brand-gold);
 animation: pulse 2s infinite;
}

@keyframes pulse {

 0%,
 100% {
  transform: scale(1);
 }

 50% {
  transform: scale(1.2);
 }
}

.item-room-suggested {
 position: relative;
 background: white;
 border: 3px solid var(--brand-blue) !important;
 box-shadow: var(--shadow-primary) !important;
}

.item-room-suggested:hover {
 transform: translateY(-8px);
 box-shadow: var(--shadow-hover) !important;
}

/* .suggested-ribbon moved to unified design system below */

.item-room-suggested .availability-badge-room {
 z-index: 15;
}

/* ========================================
   ROOM INFO STYLES
======================================== */
.item-room-suggested .room-info {
 margin: 10px 0;
 padding: 10px;
 background: #f8fafc;
 border-radius: 5px;
}

.item-room-suggested .room-capacity {
 margin: 5px 0;
 font-size: 0.9em;
 color: var(--neutral-gray);
}

.item-room-suggested .rate-plan-info {
 margin: 10px 0;
 padding: 10px;
 background: rgba(20, 78, 141, 0.1);
 border-radius: 5px;
 border-right: 3px solid var(--brand-blue);
}

.item-room-suggested .rate-plan-name {
 margin-bottom: 8px;
 font-size: 0.95em;
}

.item-room-suggested .discount-badge {
 background: var(--brand-blue);
 color: white;
 padding: 2px 8px;
 border-radius: 3px;
 font-size: 0.8em;
 margin-right: 5px;
}

.item-room-suggested .rate-plan-features {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
}

.item-room-suggested .feature-badge {
 padding: 3px 8px;
 border-radius: 3px;
 font-size: 0.8em;
 display: inline-block;
}

.item-room-suggested .feature-badge.refundable {
 background: rgba(20, 78, 141, 0.1);
 color: var(--brand-blue);
}

.item-room-suggested .feature-badge.non-refundable {
 background: rgba(108, 117, 125, 0.1);
 color: var(--neutral-gray);
}

.item-room-suggested .feature-badge.prepayment {
 background: rgba(207, 147, 54, 0.1);
 color: var(--brand-gold);
}

.item-room-suggested .meal-info,
.item-room-suggested .extra-bed-info {
 margin: 8px 0;
 font-size: 0.9em;
 color: var(--neutral-gray);
}

.item-room-suggested .meal-price {
 font-size: 0.85em;
 color: var(--neutral-gray);
}

.item-room-suggested .total-price-info {
 margin-top: 8px;
 padding-top: 8px;
 border-top: 1px solid rgba(108, 117, 125, 0.15);
 font-size: 0.9em;
}

.item-room-suggested .total-label {
 color: var(--neutral-gray);
 margin-left: 5px;
}

.item-room-suggested .total-amount {
 font-weight: bold;
 color: var(--brand-blue);
 font-size: 1.1em;
}

.item-room-suggested .btn-quick-book {
 width: 100%;
 padding: 12px;
 font-weight: bold;
 background: linear-gradient(135deg, var(--brand-blue) 0%, var(--gold-dark) 100%);
 border: none;
 color: white;
 font-size: 1.1em;
 transition: all 0.3s ease;
}

.item-room-suggested .btn-quick-book:hover {
 transform: scale(1.05);
 box-shadow: var(--shadow-hover);
}

/* ========================================
   AVAILABLE ROOMS LIST
======================================== */
.available-rooms-list {
 margin: 30px 0;
}

.available-rooms-list h3 {
 font-size: 24px;
 font-weight: 700;
 margin-bottom: 25px;
 color: var(--neutral-gray);
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */
@media (max-width: 991px) {
 .enhanced-room-card .price-book-section {
  position: relative;
  top: 0;
  margin-top: 20px;
 }

 .skeleton-card {
  flex-direction: column;
 }

 .skeleton-image {
  width: 100%;
 }

 .skeleton-price {
  width: 100%;
 }
}

@media (max-width: 768px) {
 .suggested-room-block {
  padding: 20px;
 }

 .suggested-room-title {
  font-size: 1.2em;
 }

 .suggested-room-info {
  grid-template-columns: 1fr;
  gap: 10px;
 }

 .suggested-room-price .price-amount {
  font-size: 1.5em;
 }

 .search-info-container {
  flex-direction: column;
  gap: 10px;
 }

 .search-info-item {
  width: 100%;
 }

 .section-title-suggested {
  font-size: 1.3em;
 }
}

/* ========================================
   HOTEL SEARCH PAGE (search.blade.php)
======================================== */
.hotel-card-item {
 background: #fff;
 border: 1px solid rgba(108, 117, 125, 0.15);
 border-radius: 8px;
 padding: 20px;
 margin-bottom: 20px;
 transition: all 0.3s ease;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 overflow: hidden;
 position: relative;
}

.hotel-card-item:hover {
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 transform: translateY(-2px);
 border-color: rgba(20, 78, 141, 0.2);
}

.hotel-card-item .row {
 align-items: stretch;
}

.hotel-card-item .hotel-content {
 padding: 0;
 display: flex;
 flex-direction: column;
 height: 100%;
}

.hotel-thumb {
 position: relative;
 border-radius: 5px;
 overflow: hidden;
 height: 100%;
 min-height: 250px;
 background: #f8fafc;
}

.hotel-thumb a {
 display: block;
 height: 100%;
 position: relative;
 overflow: hidden;
}

.hotel-thumb img {
 width: 100%;
 height: 100%;
 min-height: 250px;
 object-fit: cover;
 transition: transform 0.3s ease;
 border-radius: 5px;
}

.hotel-thumb:hover img {
 transform: scale(1.08);
}

.hotel-thumb::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.05) 100%);
 pointer-events: none;
 border-radius: 5px;
 z-index: 1;
}

.badge-rooms-count {
 position: absolute;
 top: 10px;
 right: 10px;
 background: rgba(0, 0, 0, 0.7);
 color: #fff;
 padding: 5px 12px;
 border-radius: 999px;
 font-size: 12px;
 z-index: 10;
}

.hotel-title {
 font-size: 22px;
 font-weight: 600;
 margin-bottom: 10px;
}

.hotel-title a {
 color: var(--brand-blue);
 text-decoration: none;
 transition: color 0.25s ease;
}

.hotel-title a:hover {
 color: var(--gold-soft);
}

.hotel-stars {
 color: var(--brand-gold);
 margin-bottom: 8px;
}

.hotel-stars .fa-star {
 color: var(--brand-gold);
}

.hotel-location {
 color: var(--neutral-gray);
 font-size: 14px;
 margin-bottom: 15px;
}

.suggested-room-info {
 background: #f8fafc;
 border-left: 3px solid var(--brand-blue);
 padding: 15px;
 border-radius: 4px;
 margin-top: 15px;
 margin-bottom: 15px;
}

.suggested-room-info .room-title {
 font-size: 16px;
 font-weight: 600;
 color: var(--brand-blue);
 margin-bottom: 10px;
 display: flex;
 align-items: center;
 gap: 5px;
}

.suggested-room-info .room-title i {
 color: var(--brand-blue);
}

.room-details {
 display: flex;
 flex-wrap: wrap;
 gap: 15px;
 font-size: 13px;
}

.detail-item {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 color: var(--neutral-gray);
 font-size: 0.9em;
}

.detail-item i {
 color: var(--brand-blue);
 margin-right: 5px;
}

.detail-item strong {
 color: var(--brand-blue);
 margin-right: 5px;
}

.detail-item.text-success {
 color: var(--brand-blue);
}

.detail-item.text-muted {
 color: var(--neutral-gray);
}

.rate-plan-badge {
 margin-top: 10px;
 margin-bottom: 10px;
}

.rate-plan-badge .badge {
 font-size: 12px;
 padding: 5px 10px;
 background-color: var(--brand-blue) !important;
 color: #fff;
 font-weight: 600;
}

.more-rooms-link {
 font-size: 14px;
 margin-top: 10px;
}

.more-rooms-link a {
 color: var(--brand-blue);
 text-decoration: none;
 font-weight: 500;
 transition: color 0.25s ease;
 display: inline-flex;
 align-items: center;
 gap: 5px;
}

.more-rooms-link a:hover {
 color: var(--gold-soft);
 text-decoration: underline;
}

.more-rooms-link a i {
 font-size: 16px;
}

.hotel-price-box {
 background: #fefefe;
 padding: 20px;
 border-radius: 5px;
 text-align: center;
 border: 1px solid rgba(20, 78, 141, 0.1);
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

.price-per-night {
 font-size: 13px;
 color: var(--neutral-gray);
 margin-bottom: 5px;
 font-weight: 500;
}

.total-price {
 display: flex;
 flex-direction: revert-layer;
 margin: 10px 0;
 padding: 5px;
 background: rgba(20, 78, 141, 0.05);
 border-radius: 4px;
 border: 1px solid rgba(20, 78, 141, 0.1);
 text-align: center;
}

.total-price .currency {
 font-size: 12px;
 text-transform: uppercase;
 color: var(--neutral-gray);
 font-weight: 500;
 letter-spacing: 0.5px;
}

.total-price .amount {
 font-size: 32px;
 font-weight: 700;
 color: var(--brand-blue);
 line-height: 1.2;
 margin-top: 5px;
}

.nights-count {
 font-size: 12px;
 color: var(--neutral-gray);
 margin-top: 5px;
 font-weight: 500;
}

.btn-book {
 font-weight: 600;
 padding: 15px;
 transition: all 0.3s ease;
 background-color: var(--brand-blue);
 border-color: var(--brand-blue);
 color: #fff;
}

.btn-book:hover {
 background-color: var(--gold-soft);
 border-color: var(--gold-soft);
 transform: translateY(-2px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-book i {
 margin-right: 5px;
}

.hotel-price-box .btn-outline-secondary {
 border-color: var(--brand-blue);
 color: var(--brand-blue);
 transition: all 0.3s ease;
}

.hotel-price-box .btn-outline-secondary:hover {
 background-color: var(--brand-blue);
 color: #fff;
 transform: translateY(-2px);
}

.hotel-price-box .btn-outline-secondary i {
 margin-right: 5px;
}

/* ========================================
   CHECKOUT PAGE (checkout.blade.php)
======================================== */
.bc_checkout_page {
 padding: 50px 0;
 background: #f8fafc;
}

.checkout-room-item {
 background: #f8fafc;
 border-radius: 8px;
 border-left: 4px solid var(--brand-blue);
 padding: 15px;
 margin-bottom: 15px;
}

.checkout-room-title {
 font-weight: 700;
 font-size: 15px;
 margin-bottom: 8px;
 color: var(--brand-blue);
}

/* ========================================
   BOOKING SUMMARY
   Built on hotel-price-box design system
======================================== */
.booking-summary-box {
 position: sticky;
 top: 20px;
 z-index: 100;
}

.booking-summary-box .price-details h5 {
 font-size: 18px;
 font-weight: 600;
 margin-bottom: 20px;
 padding-bottom: 15px;
 border-bottom: 2px solid rgba(108, 117, 125, 0.15);
 color: var(--brand-blue);
}

.booking-summary-box .price-details h6 {
 font-size: 16px;
 font-weight: 600;
 color: var(--neutral-gray);
 margin-bottom: 8px;
}

.booking-summary-box .border-bottom {
 border-color: rgba(108, 117, 125, 0.15);
}

.hotel-info-mini h4 {
 font-size: 18px;
 font-weight: 700;
 margin-bottom: 8px;
}

.hotel-info-mini .stars {
 color: #ffc107;
}

.room-info-mini h5 {
 font-size: 16px;
 font-weight: 600;
}

.booking-details .detail-row {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px 0;
 border-bottom: 1px solid #f0f0f0;
}

.booking-details .detail-row i {
 color: var(--brand-blue);
 width: 20px;
}

.price-breakdown-box {
 background: #f8fafc;
 padding: 15px;
 border-radius: 6px;
}

.price-breakdown-box h5 {
 font-size: 14px;
 text-transform: uppercase;
 margin-bottom: 15px;
}

.price-item {
 display: flex;
 justify-content: space-between;
 padding: 8px 0;
 font-size: 14px;
}

.price-item.total {
 border-top: 2px solid #333;
 margin-top: 10px;
 padding-top: 15px;
 font-weight: 700;
 font-size: 16px;
}

.total-amount {
 color: var(--brand-blue);
 font-size: 20px;
}

.policy-info {
 background: #d4edda;
 padding: 12px;
 border-radius: 6px;
 font-size: 13px;
 display: flex;
 align-items: center;
 gap: 8px;
}

.checkout-section {
 background: #fff;
 border-radius: 10px;
 padding: 30px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 margin-bottom: 20px;
}

.checkout-section h3 {
 font-size: 20px;
 font-weight: 700;
 margin-bottom: 20px;
}

.checkout-section .form-label {
 font-weight: 600;
 font-size: 13px;
 margin-bottom: 8px;
}

.payment-gateways {
 display: flex;
 flex-direction: column;
 gap: 15px;
}

.gateway-option {
 border: 2px solid #e0e0e0;
 border-radius: 8px;
 padding: 15px;
 transition: all 0.3s ease;
}

.gateway-option:has(input:checked) {
 border-color: var(--brand-blue);
 background: #f5f7ff;
}

.gateway-option input[type="radio"] {
 margin-right: 10px;
}

.gateway-option label {
 display: flex;
 align-items: center;
 gap: 10px;
 cursor: pointer;
 margin: 0;
}

.gateway-option i {
 font-size: 24px;
 color: var(--brand-blue);
}

/* ========================================
   CONFIRMATION PAGE (confirmation.blade.php)
======================================== */
.bc_confirmation_page {
 padding: 80px 0;
 min-height: 60vh;
 display: flex;
 align-items: center;
}

.confirmation-box {
 max-width: 600px;
 margin: 0 auto;
 text-align: center;
}

.confirmation-box h1 {
 font-size: 32px;
 font-weight: 700;
 margin-bottom: 15px;
}

.confirmation-box .lead {
 font-size: 18px;
 color: var(--neutral-gray);
}

.confirmation-box .actions {
 display: flex;
 gap: 15px;
 justify-content: center;
 margin-top: 30px;
}

.success-icon {
 font-size: 80px;
 margin-bottom: 20px;
 color: #28a745;
}

.booking-details-summary {
 background: #f8fafc;
 padding: 20px;
 border-radius: 8px;
 margin: 20px 0;
}

/* ========================================
   TEST/SHOW-ROOMS PAGE (show-rooms.blade.php)
======================================== */
.test-page-container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 40px 20px;
}

.test-page-header {
 background: var(--brand-blue);
 color: #fff;
 padding: 30px;
 border-radius: 12px;
 margin-bottom: 30px;
 box-shadow: 0 4px 12px rgba(20, 78, 141, 0.2);
}

.test-page-header h1 {
 margin: 0;
 font-size: 2.5em;
 font-weight: 700;
}

.test-page-header .hotel-info {
 margin-top: 15px;
 opacity: 0.9;
}

.debug-panel {
 background: #fff3cd;
 border: 2px solid #ffc107;
 border-radius: 8px;
 padding: 20px;
 margin-bottom: 30px;
}

.debug-panel h3 {
 color: #856404;
 margin-top: 0;
}

.debug-panel pre {
 background: #fff;
 padding: 15px;
 border-radius: 4px;
 overflow-x: auto;
}

/* ========================================
   ROOM WITH RATE PLANS CARD
   Built on hotel-card-item design system
======================================== */
.room-with-plans-card {
 /* Extends .hotel-card-item - uses same base styles */
}

.room-with-plans-card .room-image-placeholder {
 height: 220px;
 background: #f8fafc;
 border-radius: 5px;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* ========================================
   ROOM IMAGE ASPECT RATIO - show.blade.php ONLY
   Square images (aspect ratio 1:1) in hotel-rooms-show-page
======================================== */
.hotel-rooms-show-page .room-with-plans-card .hotel-thumb {
 height: auto;
 /* aspect-ratio: 1 / 1; */
 min-height: 0;
}

.hotel-rooms-show-page .room-with-plans-card .hotel-thumb img {
 height: auto;
 width: 100%;
 object-fit: cover;
 min-height: 0;
}

.hotel-rooms-show-page .room-with-plans-card .room-image-placeholder {
 aspect-ratio: 1 / 1;
 height: auto;
}

/* ========================================
   ROOMS WITH RATE PLANS
======================================== */
.rooms-rate-plans-section {
 margin-top: 30px;
 padding: 30px;
 background: #f8fafc;
 border-radius: 12px;
 border: 2px solid #e0e0e0;
}

.section-header-primary {
 text-align: center;
 margin-bottom: 40px;
 padding-bottom: 20px;
 border-bottom: 3px solid var(--brand-blue);
}

.section-title-primary {
 font-size: 2.5em;
 font-weight: 700;
 color: var(--brand-blue);
 margin-bottom: 10px;
 text-transform: uppercase;
 letter-spacing: 1px;
}

.section-title-primary i {
 color: var(--brand-gold);
 margin-right: 15px;
 animation: pulse 2s infinite;
}

.section-subtitle {
 font-size: 1.2em;
 color: var(--neutral-gray);
 font-style: italic;
}

/* .room-with-plans-card styles moved above - extends hotel-card-item */









/* ========================================
   ROOM WITH RATE PLANS - ADDITIONAL STYLES
======================================== */
.room-specs .spec-item {
 font-size: 14px;
 color: var(--neutral-gray);
}

.room-specs .spec-item i {
 width: 20px;
 margin-right: 8px;
}

.room-quantity-selector-header {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
}

.room-quantity-selector-header .form-label {
 font-size: 12px;
 margin-bottom: 5px;
}

.room-quantity-selector-header select {
 background-color: white;
 border: 1px solid rgba(255, 255, 255, 0.3);
 color: #333;
 font-weight: 600;
}

.room-quantity-selector-header select:focus {
 border-color: var(--brand-gold);
 box-shadow: 0 0 0 0.2rem rgba(207, 147, 54, 0.25);
}

.room-header-specs .badge {
 font-size: 11px;
 padding: 4px 8px;
}

.room-quantity-selector {
 margin-top: 10px;
}

.room-quantity-selector .form-label {
 font-size: 13px;
 margin-bottom: 5px;
 color: var(--neutral-gray);
 font-weight: 500;
}

.room-quantity-selector .room-quantity-select {
 min-width: 120px;
 max-width: 150px;
}

.room-specs-info {
 display: flex;
 flex-wrap: wrap;
 gap: 15px;
 margin-top: 8px;
}

.rate-plan-item {
 transition: all 0.3s ease;
 border: 1px solid rgba(108, 117, 125, 0.15);
 border-radius: 8px;
 background: #fbfcfc;
}

.rate-plan-item:hover {
 border-color: var(--brand-blue);
 box-shadow: 0 2px 8px rgba(20, 78, 141, 0.15);
 transform: translateY(-2px);
}

.plan-info-wrapper .plan-name {
 font-size: 1.1em;
 color: #333;
}

.plan-info-wrapper .plan-name i {
 color: var(--brand-blue);
 margin-right: 5px;
}

.meal-info {
 padding: 8px 12px;
 background: #f8fafc;
 border-left: 3px solid var(--brand-gold);
 border-radius: 4px;
 margin-top: 8px;
}

.meal-info i {
 color: var(--brand-gold);
 margin-right: 5px;
}

.badge-feature {
 font-size: 11px;
 padding: 5px 10px;
 font-weight: 500;
 margin-right: 5px;
 margin-top: 5px;
 display: inline-block;
}

.badge-feature.badge-refundable {
 background-color: rgba(20, 78, 141, 0.1);
 color: var(--brand-blue);
 border: 1px solid rgba(20, 78, 141, 0.2);
}

.badge-feature.badge-non-refundable {
 background-color: rgba(108, 117, 125, 0.1);
 color: var(--neutral-gray);
 border: 1px solid rgba(108, 117, 125, 0.2);
}

.discount-badge {
 background-color: var(--color-offer);
 color: var(--white);
 font-weight: 600;
}

.plan-price-wrapper .total-price {
 line-height: 1.2;
 color: var(--brand-blue);
}

.plan-price-wrapper .price-label {
 font-size: 12px;
}

.rate-plans-section-header {
 padding-bottom: 15px;
 border-bottom: 2px solid rgba(108, 117, 125, 0.15);
 margin-bottom: 20px;
}

.rate-plans-section-header .room-title {
 color: var(--brand-blue);
 font-weight: 600;
 margin-bottom: 5px;
}

.rate-plans-section-header .room-title i {
 color: var(--brand-blue);
 margin-right: 8px;
}

.rate-plan-item.selected {
 border-color: var(--brand-gold);
 border-width: 2px;
 background: #fff;
 box-shadow: 0 4px 12px rgba(207, 147, 54, 0.2);
 transform: translateY(-2px);
}

.rate-plan-item.selected .select-plan-btn,
.rate-plan-item.card.selected .select-plan-btn,
.card.rate-plan-item.selected .select-plan-btn {
 display: none !important;
}

.rate-plan-item.selected .select-plan-btn {
 background-color: var(--brand-gold) !important;
 border-color: var(--brand-gold) !important;
 color: white !important;
}

.rate-plan-item.selected .select-plan-btn:hover {
 background-color: var(--gold-dark) !important;
 border-color: var(--gold-dark) !important;
}

.book-now-btn {
 display: none !important;
}

.rate-plan-item.selected .book-now-btn,
.rate-plan-item.card.selected .book-now-btn,
.card.rate-plan-item.selected .book-now-btn {
 display: block !important;
 animation: slideIn 0.3s ease;
}

@keyframes slideIn {
 from {
  opacity: 0;
  transform: translateY(-10px);
 }

 to {
  opacity: 1;
  transform: translateY(0);
 }
}

.select-plan-btn {
 background-color: var(--brand-blue);
 border-color: var(--brand-blue);
 color: var(--white);
}

.select-plan-btn:hover {
 background-color: var(--gold-soft);
 border-color: var(--gold-soft);
 color: var(--white);
}

.rate-plan-item.selected .select-plan-btn {
 background-color: var(--brand-gold);
 border-color: var(--brand-gold);
}

.rate-plan-item.selected .select-plan-btn:hover {
 background-color: var(--gold-dark);
 border-color: var(--gold-dark);
}

.plan-price .total-price {
 font-weight: 700;
 color: var(--brand-blue);
}

.plan-badges .badge {
 font-size: 11px;
 padding: 4px 8px;
 margin-right: 5px;
}

.badge-sm {
 font-size: 11px;
 padding: 4px 8px;
}

@media (max-width: 991px) {
 .room-quantity-selector-header {
  align-items: flex-start;
  margin-top: 15px;
  width: 100%;
 }

 .room-header-specs {
  margin-top: 10px;
 }

 .rate-plans-section-header {
  margin-top: 20px;
 }
}

@media (max-width: 768px) {
 .room-with-plans-card .row>div {
  margin-bottom: 20px;
 }

 .plan-price-wrapper {
  text-align: center !important;
  margin: 15px 0;
 }

 .plan-actions {
  margin-top: 15px;
 }

 .section-title-primary {
  font-size: 1.8em !important;
 }

 .plan-info-wrapper,
 .plan-price-wrapper {
  margin-bottom: 15px;
 }

 .room-specs-info {
  gap: 10px;
 }
}

@keyframes animate-pulse {

 0%,
 100% {
  opacity: 1;
 }

 50% {
  opacity: 0.7;
 }
}

.animate-pulse {
 animation: animate-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ========================================
   ROOM GALLERY & SPECS
======================================== */
.room-with-plans-card .count-gallery {
 position: absolute;
 bottom: 10px;
 right: 10px;
 background: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 5px 10px;
 border-radius: 4px;
 font-size: 12px;
 z-index: 10;
}

.room-with-plans-card .image {
 position: relative;
 cursor: pointer;
}

.room-with-plans-card .room-specs-full {
 padding-top: 10px;
 border-top: 1px solid #e9ecef;
}

.room-with-plans-card .room-specs-full .room-meta {
 margin-bottom: 10px;
}

.room-with-plans-card .room-specs-full .room-meta li .item {
 display: flex;
 align-items: center;
 gap: 5px;
 color: var(--neutral-gray);
 font-size: 14px;
}

.room-with-plans-card .room-specs-full .room-meta li .item i {
 color: var(--brand-blue);
}

.room-with-plans-card .room-attribute-item ul {
 margin: 0;
 padding: 0;
}

.room-with-plans-card .room-attribute-item ul li {
 display: inline-block;
 margin-right: 8px;
 margin-bottom: 5px;
}

.room-with-plans-card .room-attribute-item ul li i {
 font-size: 18px;
 color: var(--brand-blue);
 cursor: help;
}

.room-with-plans-card .rate-plans-section-header {
 padding-top: 15px;
 border-top: 1px solid #e9ecef;
}

/* ========================================
   AVAILABILITY BADGE
======================================== */
.item-room-available {
 position: relative;
}

.availability-badge-room {
 position: absolute;
 top: 10px;
 right: 10px;
 z-index: 10;
}

.availability-badge-room .badge {
 padding: 5px 10px;
 font-size: 0.85em;
}

.item-room-available .room-info {
 margin: 10px 0;
 padding: 10px;
 background: #f8fafc;
 border-radius: 5px;
}

.item-room-available .room-info .room-name,
.item-room-available .room-info .room-capacity {
 margin: 5px 0;
 font-size: 0.9em;
 color: var(--neutral-gray);
}

.item-room-available .rate-plan-info {
 margin: 10px 0;
 padding: 10px;
 background: rgba(20, 78, 141, 0.1);
 border-radius: 5px;
 border-right: 3px solid var(--brand-blue);
}

.item-room-available .rate-plan-info .rate-plan-name {
 margin-bottom: 8px;
 font-size: 0.95em;
}

.item-room-available .discount-badge {
 background: var(--brand-blue);
 color: #fff;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 0.8em;
 margin-right: 5px;
}

.item-room-available .rate-plan-features {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
}

.item-room-available .feature-badge {
 padding: 3px 8px;
 border-radius: 4px;
 font-size: 0.8em;
 display: inline-block;
}

.item-room-available .feature-badge.refundable {
 background: rgba(20, 78, 141, 0.1);
 color: var(--brand-blue);
}

.item-room-available .feature-badge.non-refundable {
 background: rgba(108, 117, 125, 0.1);
 color: var(--neutral-gray);
}

.item-room-available .feature-badge.prepayment {
 background: rgba(207, 147, 54, 0.1);
 color: var(--brand-gold);
}

.item-room-available .meal-info,
.item-room-available .extra-bed-info {
 margin: 8px 0;
 font-size: 0.9em;
 color: var(--neutral-gray);
}

.item-room-available .meal-price {
 font-size: 0.85em;
 color: var(--neutral-gray);
}

.item-room-available .total-price-info {
 margin-top: 8px;
 padding-top: 8px;
 border-top: 1px solid rgba(108, 117, 125, 0.15);
 font-size: 0.9em;
}

.item-room-available .total-price-info .total-label {
 color: var(--neutral-gray);
 margin-left: 5px;
}

.item-room-available .total-price-info .total-amount {
 font-weight: bold;
 color: var(--brand-blue);
 font-size: 1.1em;
}

.item-room-available .g-action {
 margin-top: 15px;
}

.item-room-available .btn-view-details {
 width: 100%;
 padding: 10px;
 font-weight: bold;
}

/* ========================================
   ROOMS SELECTION SUMMARY
======================================== */
/* ========================================
   ROOMS SELECTION SUMMARY
   Built on hotel-price-box design system
======================================== */
.rooms-selection-summary {
 position: sticky;
 top: 20px;
 z-index: 100;
}

.rooms-selection-summary.hotel-price-box {
 display: none;
}

.rooms-selection-summary.hotel-price-box:has(#selected-rooms-list .selected-room-item) {
 display: block;
}

.selected-room-item {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 padding: 15px;
 border: 1px solid rgba(108, 117, 125, 0.15);
 border-radius: 6px;
 margin-bottom: 10px;
 background: #f8fafc;
}

.selected-room-item:last-child {
 margin-bottom: 0;
}

.selected-room-item .room-info {
 flex: 1;
}

.selected-room-item .room-info .room-name {
 font-weight: 600;
 font-size: 16px;
 margin-bottom: 5px;
 color: var(--neutral-gray);
}

.selected-room-item .room-info .plan-name {
 color: var(--brand-blue);
 font-size: 14px;
 margin-bottom: 5px;
}

.selected-room-item .room-info .room-details {
 font-size: 12px;
 color: var(--neutral-gray);
 margin-top: 5px;
}

.selected-room-item .room-info .room-details span {
 margin-right: 15px;
}

.selected-room-item .room-price {
 text-align: right;
 margin-left: 15px;
}

.selected-room-item .room-price .price-amount {
 font-size: 18px;
 font-weight: 700;
 color: var(--brand-blue);
 margin-bottom: 5px;
}

.selected-room-item .room-price .price-details {
 font-size: 12px;
 color: var(--neutral-gray);
}

.selected-room-item .remove-room {
 margin-left: 10px;
 padding: 5px 10px;
 background: #dc3545;
 color: #fff;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 font-size: 12px;
}

.selected-room-item .remove-room:hover {
 background: #c82333;
}

.total-price-section {
 padding-top: 15px;
 margin-top: 15px;
}

#proceed-to-checkout-btn:disabled {
 opacity: 0.6;
 cursor: not-allowed;
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */
@media (max-width: 991px) {
 .enhanced-room-card .price-book-section {
  position: relative;
  top: 0;
  margin-top: 20px;
 }

 .skeleton-card {
  flex-direction: column;
 }

 .skeleton-image {
  width: 100%;
 }

 .skeleton-price {
  width: 100%;
 }

 .hotel-price-box {
  margin-top: 20px;
 }

 .hotel-thumb {
  min-height: 200px;
 }

 .hotel-thumb img {
  min-height: 200px;
 }

 .booking-summary-box {
  position: static;
  margin-bottom: 30px;
 }

 .checkout-actions {
  flex-direction: column;
 }

 .hotel-card-item .hotel-content {
  margin-top: 15px;
 }

 .price-section-suggested:hover {
  transform: translateY(0);
 }
}

@media (max-width: 768px) {
 .suggested-room-block {
  padding: 20px;
 }

 .suggested-room-title {
  font-size: 1.2em;
 }

 .suggested-room-info {
  grid-template-columns: 1fr;
  gap: 10px;
 }

 .suggested-room-price .price-amount {
  font-size: 1.5em;
 }

 .search-info-container {
  flex-direction: column;
  gap: 10px;
 }

 .search-info-item {
  width: 100%;
 }

 .section-title-suggested {
  font-size: 1.3em;
 }

 .confirmation-box .actions {
  flex-direction: column;
 }
}

@media (max-width: 767px) {
 .confirmation-box .actions {
  flex-direction: column;
 }
}

/* ========================================
   HOTEL CARD - LAYER BADGES & PRICING
======================================== */
.layer-badge {
 position: absolute;
 top: 10px;
 left: 10px;
 padding: 6px 14px;
 border-radius: 20px;
 font-size: 12px;
 font-weight: 600;
 z-index: 10;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.layer-badge.layer-1 {
 background: linear-gradient(135deg, var(--brand-blue) 0%, var(--gold-dark) 100%);
 color: #fff;
}

.layer-badge.layer-2 {
 background: linear-gradient(135deg, var(--brand-gold) 0%, var(--gold-soft) 100%);
 color: #fff;
}

.layer-badge.layer-3 {
 background: linear-gradient(135deg, var(--gold-soft) 0%, var(--brand-gold) 100%);
 color: #fff;
}

.search-details {
 background: rgba(20, 78, 141, 0.1);
 border-left: 3px solid var(--brand-blue);
 padding: 10px 12px;
 border-radius: 4px;
 margin-bottom: 10px;
}

.search-details .detail-item {
 display: block;
 margin-bottom: 5px;
}

.search-details .detail-item:last-child {
 margin-bottom: 0;
}

.pricing-warning {
 background: rgba(207, 147, 54, 0.1);
 border-left: 3px solid var(--brand-gold);
 padding: 8px 12px;
 border-radius: 4px;
 color: var(--gold-dark);
}

.pricing-warning i {
 color: var(--brand-gold);
}

.pricing-note {
 background: rgba(20, 78, 141, 0.1);
 border-left: 3px solid var(--brand-blue);
 padding: 8px 12px;
 border-radius: 4px;
 color: var(--brand-blue);
}

.pricing-note i {
 color: var(--brand-blue);
}

.price-breakdown-details {
 border: 0;
}

.price-breakdown-details summary {
 cursor: pointer;
 list-style: none;
 font-weight: 600;
}

.price-breakdown-details summary::-webkit-details-marker {
 display: none;
}

.price-breakdown-details summary:hover {
 color: var(--brand-blue);
}

.breakdown-content {
 background: #f8f9fa;
 padding: 10px;
 border-radius: 4px;
}

.breakdown-content .d-flex {
 padding: 4px 0;
}

.breakdown-content hr {
 border-color: #dee2e6;
 margin: 8px 0;
}

/* ========================================
   SUGGESTED ROOM BLOCK
======================================== */
/* .suggested-room-block extends hotel-card-item - gradients removed */

.suggested-room-block .block-header h2 {
 color: #fff;
 margin: 10px 0 0;
 font-weight: 700;
}

.suggested-room-block .badge-suggested {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: rgba(255, 255, 255, 0.15);
 padding: 6px 12px;
 border-radius: 999px;
 font-weight: 600;
 font-size: 13px;
}

.suggested-room-block .price-book-box {
 background: rgba(255, 255, 255, 0.12);
 border-radius: 12px;
 padding: 14px;
}

.suggested-room-block .price-book-box .total-amount {
 font-weight: 800;
}

/* ========================================
   UTILITY CLASSES
======================================== */
#hotel-rooms {
 display: none !important;
}

.hotel_list_rooms,
.hotel_rooms_form {
 display: none !important;
}

/* Hidden input for date range */
.bh-daterange-hidden {
 height: 1px;
 visibility: hidden;
 position: absolute;
 opacity: 0;
}

/* Offer selection summary */
.bh-offer-selection-summary {
 display: none;
}

/* Room search filter input widths */
.form-search-rooms input[type="number"] {
 width: 80px;
}

/* ========================================
   RATE PLANS & SELECTION STYLES (New)
======================================== */
.rate-plans-section-header {
 background-color: rgba(20, 78, 141, 0.04) !important;
 border: 1px solid rgba(20, 78, 141, 0.15) !important;
 border-left: 4px solid var(--brand-blue) !important;
 border-radius: 8px !important;
 transition: all 0.3s ease;
}

.rate-plans-section-header:hover {
 background-color: rgba(20, 78, 141, 0.08) !important;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.rate-plans-section-header .room-title {
 color: var(--brand-blue);
 letter-spacing: -0.5px;
}

.rate-plans-section-header .room-quantity-selector {
 background: white;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 border: 1px solid #e9ecef !important;
}

.plan-actions {
 background-color: #fff;
 padding-top: .1rem !important;
 margin-top: .1rem !important;
}


.book-now-btn {
 background: linear-gradient(135deg, var(--brand-blue) 0%, var(--gold-dark) 100%);
 border: none;
 color: white;
}

.book-now-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 5px 15px rgba(20, 78, 141, 0.3) !important;
}

/* ========================================
   MIGRATED FROM CUSTOM-THEME (Suggested Room)
======================================== */
.suggested-room-card {
 border: 1px solid var(--brand-blue) !important;
 animation: suggested-glow 3s ease-in-out infinite;
 position: relative;
}

@keyframes suggested-glow {

 0%,
 100% {
  box-shadow: 0 8px 25px rgba(20, 78, 141, 0.3);
 }

 50% {
  box-shadow: 0 12px 40px rgba(20, 78, 141, 0.5);
 }
}

.suggested-ribbon {
 position: absolute;
 top: -3px;
 left: -3px;
 background: linear-gradient(135deg, var(--brand-gold) 0%, var(--gold-soft) 100%) !important;
 color: var(--white) !important;
 padding: 10px 24px;
 font-weight: bold;
 font-size: 0.95em;
 z-index: 20;
 box-shadow: 0 4px 15px rgba(207, 147, 54, 0.5);
 border-radius: 0 0 12px 0;
}

.suggested-ribbon i {
 animation: star-pulse 2s ease-in-out infinite;
 color: var(--white);
 margin-right: 5px;
}

@keyframes star-pulse {

 0%,
 100% {
  transform: scale(1);
 }

 50% {
  transform: scale(1.4);
 }
}

/* ========================================
   HOTEL ATTRIBUTES SECTION
======================================== */
.hotel-attributes-section {
 padding: 2rem 0;
}

.attribute-category {
 margin-bottom: 3rem;
}

.category-header {
 position: relative;
 margin-bottom: 2rem;
}

.category-title {
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--brand-blue);
 margin-bottom: 0.5rem;
 display: inline-flex;
 align-items: center;
}

.category-title i {
 color: var(--brand-gold);
}

.category-divider {
 height: 3px;
 width: 60px;
 background: linear-gradient(90deg, var(--brand-blue), var(--brand-gold));
 border-radius: 2px;
}

/* Attribute Cards */
.attribute-card {
 height: 100%;
 background: #fff;
 border: 1px solid rgba(0, 0, 0, 0.08);
 border-radius: 12px;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 overflow: hidden;
}

.attribute-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 border-color: var(--brand-blue);
}

.card-inner {
 padding: 1.5rem 1rem;
 text-align: center;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.75rem;
}

/* Icon/Image Styling */
.attribute-icon {
 width: 50px;
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, rgba(20, 78, 141, 0.1), rgba(207, 147, 54, 0.1));
 border-radius: 50%;
 transition: all 0.3s ease;
}

.attribute-card:hover .attribute-icon {
 transform: scale(1.1);
 background: var(--brand-gold);
}

.attribute-icon i {
 font-size: 1.5rem;
 color: var(--brand-blue);
 transition: color 0.3s ease;
}

.attribute-card:hover .attribute-icon i {
 color: #fff;
}

.attribute-image {
 width: 40px;
 height: 40px;
 object-fit: contain;
 border-radius: 50%;
}

/* Attribute Name */
.attribute-name {
 font-size: 0.875rem;
 font-weight: 500;
 color: #333;
 margin: 0;
 line-height: 1.4;
}

.attribute-card:hover .attribute-name {
 color: var(--brand-blue);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
 .category-title {
  font-size: 1.25rem;
 }

 .attribute-icon {
  width: 40px;
  height: 40px;
 }

 .attribute-icon i {
  font-size: 1.25rem;
 }
}

/* Attribute List View (Right Column) */
.attribute-group {
 background: #fff;
 border: 1px solid rgba(0, 0, 0, 0.08);
 border-radius: 8px;
}

.attribute-group .attribute-title {
 color: var(--brand-blue);
 font-weight: 600;
 margin-bottom: 0.5rem;
}

.attribute-group .term-item {
 margin-bottom: 0.25rem;
}

.attribute-group .term-item:last-child {
 border-bottom: none !important;
}

.attribute-group .term-item .d-flex {
 border-radius: 4px;
 transition: all 0.2s ease;
}

.attribute-group .term-item .d-flex:hover {
 background: #e9ecef !important;
}

.attribute-group .term-name {
 font-size: 0.875rem;
 color: #333;
}

.form-group.form-date-field.form-date-search,
.form-group.bh-guests {
 background: rgba(20, 78, 141, 0.1);
 padding: 0 15px;
 border-radius: 5px;
 border: 1px solid #d1ecf1;
 border-left: 3px solid var(--brand-blue);
}


.form-group.bh-guests .dropdown-toggle:after {
 display: inline-block;
 margin-left: 0.255em;
 vertical-align: 0.255em;
 content: "";
 border-top: 0.3em solid;
 border-right: 0.3em solid transparent;
 border-bottom: 0;
 border-left: 0.3em solid transparent;
 position: absolute;
 right: 20px;
 top: 20px;
}

/* ========================================
   CUSTOM HOTEL GALLERY
   Main Image Left (65%) - Thumbnails Right (35%) in Two Columns
======================================== */

.custom-hotel-gallery {
 display: grid;
 grid-template-columns: 65% 1fr;
 gap: 20px;
 margin: 20px 0;
 align-items: start;
}

/* ===== Main Image Section ===== */
.gallery-main {
 position: relative;
 background: #f8fafc;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 aspect-ratio: 3 / 2;
 /* 9:6 = 3:2 */
}

.gallery-main .main-image {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: opacity 0.3s ease;
}

.gallery-main .fullscreen-btn {
 position: absolute;
 top: 20px;
 right: 20px;
 background: rgba(20, 78, 141, 0.9);
 color: white;
 border: none;
 padding: 12px 15px;
 border-radius: 8px;
 cursor: pointer;
 font-size: 18px;
 z-index: 10;
 transition: all 0.3s ease;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gallery-main .fullscreen-btn:hover {
 background: var(--brand-blue);
 transform: scale(1.1);
}

.gallery-main .image-counter {
 position: absolute;
 bottom: 20px;
 left: 20px;
 background: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 8px 16px;
 border-radius: 20px;
 font-size: 14px;
 font-weight: 500;
 z-index: 10;
}

/* ===== Thumbnails Grid ===== */
.gallery-thumbs {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-auto-rows: min-content;
 gap: 15px;
 max-height: 600px;
 overflow-y: auto;
 padding-right: 5px;
 align-content: start;
}

.gallery-thumbs::-webkit-scrollbar {
 width: 6px;
}

.gallery-thumbs::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 10px;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
 background: var(--brand-blue);
 border-radius: 10px;
}

.gallery-thumbs::-webkit-scrollbar-thumb:hover {
 background: var(--gold-soft);
}

.thumb-item {
 position: relative;
 border-radius: 8px;
 overflow: hidden;
 cursor: pointer;
 width: 100%;
 aspect-ratio: 4 / 3;
 border: 3px solid transparent;
 transition: all 0.3s ease;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 display: block;
}

.thumb-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: transform 0.3s ease;
 position: absolute;
 top: 0;
 left: 0;
}

.thumb-item:hover {
 border-color: var(--brand-gold);
 transform: translateY(-3px);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.thumb-item:hover img {
 transform: scale(1.1);
}

.thumb-item.active {
 border-color: var(--brand-blue);
 box-shadow: 0 4px 12px rgba(20, 78, 141, 0.3);
}

.thumb-item .thumb-overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
 opacity: 0;
 transition: opacity 0.3s ease;
}

.thumb-item:hover .thumb-overlay {
 opacity: 1;
}

/* More Images Overlay - 5th Thumbnail */
.thumb-item-more {
 position: relative;
 cursor: pointer;
}

.more-images-overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.75);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 color: white;
 z-index: 5;
 transition: all 0.3s ease;
}

.more-images-overlay i {
 font-size: 32px;
 margin-bottom: 8px;
 color: white;
}

.more-images-overlay .more-count {
 font-size: 24px;
 font-weight: 700;
 color: white;
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.thumb-item-more:hover .more-images-overlay {
 background: rgba(20, 78, 141, 0.9);
}

.thumb-item-more:hover .more-images-overlay i,
.thumb-item-more:hover .more-images-overlay .more-count {
 transform: scale(1.1);
}

/* ===== Lightbox Modal ===== */
.gallery-lightbox {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.95);
 z-index: 9999;
 display: none;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.gallery-lightbox.active {
 display: flex;
 opacity: 1;
}

.lightbox-content {
 position: relative;
 max-width: 90%;
 max-height: 90%;
 animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
 from {
  transform: scale(0.8);
  opacity: 0;
 }

 to {
  transform: scale(1);
  opacity: 1;
 }
}

.lightbox-image {
 max-width: 100%;
 max-height: 90vh;
 display: block;
 border-radius: 8px;
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
 position: absolute;
 top: -50px;
 right: 0;
 background: rgba(255, 255, 255, 0.2);
 color: white;
 border: none;
 padding: 12px 16px;
 border-radius: 8px;
 cursor: pointer;
 font-size: 24px;
 transition: all 0.3s ease;
}

.lightbox-close:hover {
 background: rgba(255, 255, 255, 0.3);
 transform: scale(1.1);
}

.lightbox-prev,
.lightbox-next {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background: rgba(255, 255, 255, 0.2);
 color: white;
 border: none;
 padding: 20px 15px;
 border-radius: 8px;
 cursor: pointer;
 font-size: 28px;
 transition: all 0.3s ease;
}

.lightbox-prev:hover,
.lightbox-next:hover {
 background: rgba(255, 255, 255, 0.3);
 transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
 left: -80px;
}

.lightbox-next {
 right: -80px;
}

.lightbox-counter {
 position: absolute;
 bottom: -50px;
 left: 50%;
 transform: translateX(-50%);
 background: rgba(255, 255, 255, 0.2);
 color: white;
 padding: 8px 20px;
 border-radius: 20px;
 font-size: 16px;
 font-weight: 500;
}

/* ===== Responsive Design ===== */

/* Tablets */
@media (max-width: 991px) {
 .custom-hotel-gallery {
  grid-template-columns: 1fr;
  gap: 20px;
 }

 .gallery-thumbs {
  grid-template-columns: repeat(3, 1fr);
  max-height: none;
  overflow-y: visible;
 }

 .gallery-main {
  min-height: 400px;
 }
}

/* Mobile */
@media (max-width: 768px) {
 .custom-hotel-gallery {
  gap: 15px;
 }

 .gallery-thumbs {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
 }

 .gallery-main {
  min-height: 300px;
 }

 .gallery-main .fullscreen-btn {
  padding: 10px 12px;
  font-size: 16px;
 }

 .gallery-main .image-counter {
  font-size: 12px;
  padding: 6px 12px;
 }

 .lightbox-prev {
  left: 10px;
 }

 .lightbox-next {
  right: 10px;
 }

 .lightbox-close {
  top: 10px;
  right: 10px;
 }

 .lightbox-counter {
  bottom: 10px;
 }
}

/* Hide original Fotorama gallery when custom gallery is present */
.custom-hotel-gallery~.g-gallery {
 display: none;
}