/* ============================================================
   Dinh Đá H'Mông — VikBooking Widget & Room Listing Styling
   ============================================================
   SETUP (one-time, in Elementor — no code needed):
   1. Select the widget/section wrapping the search bar
      (likely in Theme Builder → Header, since it's global)
      → Advanced tab → CSS Classes → add: hotel-booking-widget
   2. On "Our Rooms", select the widget/container wrapping the
      room list → same field → add: hotel-rooms-list
   If either isn't inside an Elementor widget (i.e. rendered by
   a raw VikBooking template), send me the page's HTML and I'll
   re-target this — just let me know.
   ============================================================ */

:root {
	--hotel-terracotta:      #B5502E;  /* primary accent — buttons, price, focus states */
	--hotel-terracotta-dark: #954023;  /* hover state */
	--hotel-stone:           #6B6459;  /* muted text, labels, borders */
	--hotel-stone-light:     #D9D3C7;  /* input borders, dividers */
	--hotel-moss:            #4B5D45;  /* secondary accent — text links */
	--hotel-cream:           #FAF6EE;  /* light backgrounds */
	--hotel-charcoal:        #2B2620;  /* body text, dark button */
	--hotel-radius:          6px;
	--hotel-radius-lg:       12px;
	--hotel-shadow:          0 4px 16px rgba(43, 38, 32, 0.10);
}
/* ^ Placeholder palette pulled from your site photography (stone,
     timber, terracotta, moss). Swap these for exact hex codes if
     you already have brand colors set under Elementor → Site
     Settings → Global Colors — everything below inherits from here. */


/* ============================================================
   1. BOOKING SEARCH WIDGET
   Check-in / check-out / guests / rooms bar in the header.
   ============================================================ */

.hotel-booking-widget {
	background: var(--hotel-cream);
	border-radius: var(--hotel-radius-lg);
	box-shadow: var(--hotel-shadow);
	padding: 24px;
}

.hotel-booking-widget label {
	color: var(--hotel-stone);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.hotel-booking-widget input[type="text"],
.hotel-booking-widget input[type="date"],
.hotel-booking-widget input[type="number"],
.hotel-booking-widget select {
	border: 1px solid var(--hotel-stone-light);
	border-radius: var(--hotel-radius);
	background: #fff;
	color: var(--hotel-charcoal);
	padding: 10px 12px;
}

.hotel-booking-widget input:focus,
.hotel-booking-widget select:focus {
	border-color: var(--hotel-terracotta);
	outline: none;
	box-shadow: 0 0 0 3px rgba(181, 80, 46, 0.15);
}

.hotel-booking-widget button,
.hotel-booking-widget input[type="submit"] {
	background: var(--hotel-terracotta);
	color: #fff;
	border: none;
	border-radius: var(--hotel-radius);
	padding: 12px 28px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
}

.hotel-booking-widget button:hover,
.hotel-booking-widget input[type="submit"]:hover {
	background: var(--hotel-terracotta-dark);
	transform: translateY(-1px);
}


/* ============================================================
   2. ROOM LISTING CARDS
   "Our Rooms" page: gallery thumbnail, name, description,
   price, Details link — repeated per room type.
   ============================================================ */

.hotel-rooms-list {
	display: grid;
	gap: 32px;
}

.hotel-rooms-list img {
	border-radius: var(--hotel-radius-lg);
	object-fit: cover;
}

.hotel-rooms-list h3,
.hotel-rooms-list h4 {
	color: var(--hotel-charcoal);
	font-size: 1.3rem;
	margin: 16px 0 8px;
}

.hotel-rooms-list p {
	color: var(--hotel-stone);
	line-height: 1.6;
}

/* Price line — VikBooking may or may not wrap this in its own
   class depending on version. This is a soft attempt; if it
   doesn't visibly apply, paste me one room card's HTML and I'll
   swap in the exact selector. */
.hotel-rooms-list .price,
.hotel-rooms-list .vikbooking-room-price {
	color: var(--hotel-terracotta);
	font-weight: 700;
	font-size: 1.15rem;
}

.hotel-rooms-list a {
	color: var(--hotel-moss);
}

/* "Details" button — targets the last link in each room block,
   which in your current markup is the Details CTA. */
.hotel-rooms-list a:last-of-type {
	display: inline-block;
	background: var(--hotel-charcoal);
	color: #fff !important;
	border-radius: var(--hotel-radius);
	padding: 10px 24px;
	margin-top: 8px;
	text-decoration: none;
	font-weight: 600;
	transition: background 0.2s ease;
}

.hotel-rooms-list a:last-of-type:hover {
	background: var(--hotel-terracotta);
}


/* ============================================================
   3. MOBILE
   ============================================================ */
@media (max-width: 767px) {
	.hotel-booking-widget {
		padding: 16px;
	}
	.hotel-rooms-list {
		gap: 24px;
	}
}