/* ============================================================
   SINGLE HOTEL DETAIL PAGE REDESIGN STYLESHEET
   Exact pixel-perfect design implementation matching UI specification
   ============================================================ */

/* ── Root Design System Tokens ── */
:root {
	--ms-blue:      #0284c7;
	--ms-blue-d:    #0369a1;
	--ms-blue-l:    #38bdf8;
	--ms-yellow:    #f59e0b;
	--ms-yellow-d:  #d97706;
	--ms-dark:      #0f172a;
	--ms-grey:      #64748b;
	--ms-grey-l:    #cbd5e1;
	--ms-bg-light:  #f8fafc;
	--ms-card-r:    14px;
	--ms-font:      "Vazirmatn", "IRANSans", system-ui, -apple-system, sans-serif;
}

.ms-single-hotel-root {
	font-family: var(--ms-font);
	color: var(--ms-dark);
	background-color: #f1f5f9;
	line-height: 1.6;
	box-sizing: border-box;
}

.ms-single-hotel-root *,
.ms-single-hotel-root *::before,
.ms-single-hotel-root *::after {
	box-sizing: border-box;
}

.ms-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
}

/* ============================================================
   1. BREADCRUMBS & NAVIGATION ACTION STRIP
   ============================================================ */
.ms-hotel-nav-strip {
	background: #fff;
	border-bottom: 1px solid #e2e8f0;
	padding: 12px 0;
}

.ms-nav-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* Left side navigation action buttons */
.ms-nav-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ms-nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--ms-dark);
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	transition: all 0.2s;
}

.ms-nav-btn:hover {
	background: #e2e8f0;
	color: var(--ms-blue-d);
}

.ms-nav-btn.disabled {
	opacity: 0.4;
	pointer-events: none;
}

.ms-btn-back {
	background: #fff;
	border-color: #cbd5e1;
}

/* Right side Breadcrumbs */
.ms-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ms-grey);
}

.ms-breadcrumbs a {
	color: var(--ms-grey);
	text-decoration: none;
	transition: color 0.2s;
	display: inline-flex;
	align-items: center;
}

.ms-breadcrumbs a:hover {
	color: var(--ms-blue);
}

.ms-breadcrumbs .ms-sep {
	color: var(--ms-grey-l);
}

.ms-breadcrumbs .ms-current {
	color: var(--ms-dark);
	font-weight: 700;
}

/* ============================================================
   2. TOP SEARCH BAR (EXACT COMPACT MATCH FROM HOMEPAGE)
   ============================================================ */
.ms-top-search-section {
	padding: 16px 0;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
	margin-bottom: 24px;
}

.ms-inline-search-wrap {
	width: 100%;
}

.ms-inline-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 6px 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.ms-search-field {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 8px 14px;
	position: relative;
	cursor: pointer;
	border-radius: 8px;
	transition: background 0.2s;
}

.ms-search-field:hover,
.ms-search-field.active {
	background: #f8fafc;
}

.ms-field-icon {
	color: var(--ms-grey);
	margin-left: 10px;
	display: flex;
	align-items: center;
}

.ms-field-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	flex: 1;
	min-width: 0;
	text-align: right;
}

.ms-field-label {
	font-size: 11px;
	color: var(--ms-grey);
	margin-bottom: 2px;
}

.ms-city-selector,
.ms-guest-selector {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ms-dark);
	font-size: 13px;
	font-weight: 700;
	width: 100%;
}

.ms-city-value,
.ms-guest-value {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-date-input {
	border: none;
	background: transparent;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--ms-dark);
	font-family: inherit;
	width: 100%;
	outline: none;
	cursor: pointer;
	text-align: right;
}

.ms-date-input::placeholder {
	color: #94a3b8;
}

.ms-field-divider {
	width: 1px;
	height: 36px;
	background: #e2e8f0;
	flex-shrink: 0;
}

/* Dropdowns */
.ms-city-dropdown,
.ms-guest-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	min-width: 220px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all 0.2s;
	z-index: 100;
	border: 1px solid #e2e8f0;
}

.ms-search-field.active .ms-city-dropdown,
.ms-search-field.active .ms-guest-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ms-city-list {
	max-height: 240px;
	overflow-y: auto;
	padding: 6px 0;
}

.ms-city-option {
	padding: 8px 16px;
	font-size: 13px;
	color: var(--ms-dark);
	cursor: pointer;
	transition: background 0.15s;
}

.ms-city-option:hover {
	background: #f1f5f9;
}

.ms-guest-dropdown {
	padding: 16px;
	min-width: 240px;
}

.ms-guest-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

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

.ms-guest-row-label {
	font-size: 13px;
	color: var(--ms-dark);
	font-weight: 600;
}

.ms-guest-counter {
	display: flex;
	align-items: center;
	border: 1px solid var(--ms-grey-l);
	border-radius: 6px;
	overflow: hidden;
}

.ms-guest-counter button {
	background: #f8fafc;
	border: none;
	width: 30px;
	height: 30px;
	font-size: 15px;
	cursor: pointer;
	color: var(--ms-dark);
	transition: background 0.15s;
}

.ms-guest-counter button:hover {
	background: #e2e8f0;
}

.ms-guest-counter input {
	width: 36px;
	height: 30px;
	border: none;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit;
	border-left: 1px solid var(--ms-grey-l);
	border-right: 1px solid var(--ms-grey-l);
	pointer-events: none;
}

/* Submit Button */
.ms-search-submit {
	height: 52px;
	width: 54px;
	background: var(--ms-yellow);
	border: none;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
	flex-shrink: 0;
}

.ms-search-submit:hover {
	background: var(--ms-yellow-d);
}

/* ============================================================
   3. MAIN HOTEL SHOWCASE GRID (4 COLUMNS / 3 PANELS)
   ============================================================ */
.ms-hotel-showcase-section {
	padding: 0 0 32px;
}

/* This grid sits inside a dir="rtl" root, so CSS Grid auto-placement fills
   track 1 at the RIGHT edge (the inline-start side in RTL), not the left.
   The DOM order here is gallery → thumbnails → reviews → info — a sensible
   reading/tab order (image first, booking info last) — but left as plain
   grid-template-columns that DOM order would visually place the gallery on
   the right and the info card on the left: exactly mirrored from the design,
   which wants the big gallery image on the left and the info/booking card on
   the right. `order` re-maps which item lands in which track without
   touching the DOM, so the reading order stays sensible while the visual
   order matches the design. Track sizes below are written for the item that
   now actually lands in each track (order:1 = rightmost = info's 1.8fr, ...
   order:4 = leftmost = gallery's 2.2fr). */
.ms-showcase-grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1.1fr 2.2fr;
	gap: 16px;
	align-items: stretch;
}

.ms-showcase-col {
	display: flex;
	flex-direction: column;
}
.ms-col-info { order: 1; }
.ms-col-reviews { order: 2; }
.ms-col-categories { order: 3; }
.ms-col-gallery { order: 4; }

/* ── COLUMN 1: MAIN PHOTO GALLERY CAROUSEL ── */
.ms-main-gallery-card {
	position: relative;
	background: #000;
	border-radius: var(--ms-card-r);
	overflow: hidden;
	height: 100%;
	min-height: 380px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.ms-gallery-badge-top-left {
	position: absolute;
	top: 14px;
	right: 14px; /* RTL top-left relative */
	z-index: 10;
}

.ms-badge-guarantee {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #0284c7;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

.ms-gallery-badge-top-right {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 10;
}

.ms-gallery-fullscreen-btn {
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s;
}

.ms-gallery-fullscreen-btn:hover {
	background: rgba(0, 0, 0, 0.8);
}

.ms-gallery-viewport {
	width: 100%;
	height: 100%;
	position: relative;
}

.ms-gallery-viewport img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.ms-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	color: var(--ms-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: all 0.2s;
	z-index: 5;
}

.ms-gallery-arrow:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.08);
}

.ms-arrow-prev {
	right: 12px;
}

.ms-arrow-next {
	left: 12px;
}

.ms-gallery-counter-tag {
	position: absolute;
	bottom: 12px;
	right: 14px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
	backdrop-filter: blur(4px);
}

/* ── COLUMN 2: THUMBNAIL STRIP ──
   The design's four fixed category cards (all/rooms/restaurants/recreation)
   are gone — there's no real per-image category in this hotel's data (the
   '_gallery' meta is a flat list, see the PHP), so those counts were always
   fabricated. This column is now just every real gallery image as a
   thumbnail, driven by single-hotel-script.js off #ms-gallery-data. */
.ms-cat-stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
}

.ms-mini-thumbs-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.ms-mini-thumb {
	width: 100%;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	cursor: pointer;
	border: 1.5px solid transparent;
	opacity: 0.8;
	transition: all 0.15s;
}

.ms-mini-thumb.active,
.ms-mini-thumb:hover {
	opacity: 1;
	border-color: var(--ms-blue);
}

.ms-mini-more-btn {
	background: #e2e8f0;
	border: none;
	border-radius: 6px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ms-grey);
	cursor: pointer;
	transition: background 0.2s;
}

.ms-mini-more-btn:hover {
	background: #cbd5e1;
	color: var(--ms-dark);
}

/* ── COLUMN 3: USER REVIEWS CARD ── */
.ms-reviews-card {
	background: #fff;
	border-radius: var(--ms-card-r);
	padding: 16px;
	box-shadow: 0 2px 16px rgba(0,0,0,0.04);
	border: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ms-reviews-head {
	border-bottom: 1px solid #f1f5f9;
	padding-bottom: 10px;
	margin-bottom: 12px;
}

.ms-reviews-title {
	font-size: 14px;
	font-weight: 800;
	color: var(--ms-dark);
	margin: 0;
}

.ms-reviews-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
	overflow-y: auto;
}

.ms-review-item {
	font-size: 12px;
}

.ms-review-user {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

.ms-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e0f2fe;
	color: #0369a1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 11px;
}

.ms-username {
	font-weight: 700;
	color: var(--ms-dark);
}

.ms-user-rating {
	margin-right: auto;
	color: var(--ms-yellow-d);
	font-weight: 700;
	font-size: 11px;
}

.ms-review-text {
	margin: 0;
	color: var(--ms-grey);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Full review text in the "all reviews" popup — not clamped to 3 lines like
   the sidebar preview above. */
.ms-review-item--full .ms-review-text {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}
.ms-review-item--full {
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid #f1f5f9;
}
.ms-review-item--full:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Genuine empty state — shown when a hotel has no real comments yet,
   instead of the two fabricated sample reviews the design mockup had. */
.ms-reviews-empty {
	margin: 0;
	font-size: 12px;
	color: var(--ms-grey);
	text-align: center;
	padding: 20px 0;
}

.ms-reviews-footer {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid #f1f5f9;
}

.ms-all-reviews-link {
	/* Now a <button data-toggle="modal">, not an <a> — reset button defaults
	   so it still looks like the plain link it was. */
	border: none;
	background: none;
	padding: 0;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ms-blue);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s;
}

.ms-all-reviews-link:hover {
	color: var(--ms-blue-d);
}

/* ── COLUMN 4: HOTEL INFO & BOOKING CARD ── */
.ms-hotel-info-card {
	background: #fff;
	border-radius: var(--ms-card-r);
	padding: 20px;
	box-shadow: 0 2px 16px rgba(0,0,0,0.04);
	border: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
}

.ms-info-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ms-info-title-box {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ms-hotel-title {
	font-size: 17px;
	font-weight: 800;
	color: var(--ms-dark);
	margin: 0;
	line-height: 1.3;
}

.ms-hotel-stars-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ms-stars {
	display: flex;
	gap: 2px;
}

.ms-stars-label {
	font-size: 11px;
	color: var(--ms-grey);
}

.ms-info-address {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--ms-grey);
}

.ms-promo-badges {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.ms-badge-purple {
	background: #f3e8ff;
	color: #7e22ce;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ms-badge-green {
	background: #dcfce7;
	color: #15803d;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ms-score-favorite-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ms-rating-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ms-dark);
	background: #f8fafc;
	padding: 4px 10px;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
}

/* Shown instead of the score pill when a hotel has zero real reviews yet —
   deliberately plainer than the scored state, not a fake "good" rating. */
.ms-rating-pill--empty {
	color: var(--ms-grey);
	font-weight: 500;
}

.ms-score-val {
	color: var(--ms-yellow-d);
}

.ms-score-txt {
	color: var(--ms-grey);
}

.ms-favorite-btn {
	background: none;
	border: none;
	color: var(--ms-grey);
	cursor: pointer;
	padding: 4px;
	transition: color 0.2s;
}

.ms-favorite-btn:hover {
	color: #ef4444;
}

.ms-hotel-excerpt {
	font-size: 12px;
	color: var(--ms-grey);
	line-height: 1.6;
}

.ms-hotel-excerpt p {
	margin: 0 0 4px;
}

.ms-more-link {
	/* Now a <button data-toggle="modal">, not an <a> — reset button
	   defaults so it still looks like the plain link it was. */
	border: none;
	background: none;
	padding: 0;
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	color: var(--ms-blue);
	font-weight: 700;
	text-decoration: none;
}

.ms-more-link:hover {
	text-decoration: underline;
}

/* Features Preview Grid */
.ms-features-preview {
	border-top: 1px solid #f1f5f9;
	padding-top: 10px;
}

.ms-features-title {
	font-size: 11px;
	font-weight: 700;
	color: var(--ms-dark);
	display: block;
	margin-bottom: 6px;
}

.ms-features-grid {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.ms-feature-icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 6px 8px;
	font-size: 10px;
	color: var(--ms-grey);
	min-width: 60px;
	/* ms-feature-more (below) is now a real <button data-toggle="modal">,
	   not a <div> — reset the button defaults so it still looks like the
	   other plain items instead of a native button. */
	font-family: inherit;
	text-decoration: none;
}

.ms-feature-more {
	background: #f1f5f9;
	cursor: pointer;
	color: var(--ms-blue);
	font-weight: 700;
}

/* Bottom Action Buttons */
.ms-info-actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
}

.ms-action-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s;
}

.ms-btn-360 {
	background: #0284c7;
	color: #fff;
}

.ms-btn-360:hover {
	background: #0369a1;
}

.ms-btn-map {
	background: #f1f5f9;
	color: var(--ms-dark);
	border: 1px solid #cbd5e1;
}

.ms-btn-map:hover {
	background: #e2e8f0;
}

/* ============================================================
   4. ROOMS & RATES ONLINE BOOKING SECTION
   ============================================================ */
.ms-rooms-section {
	background: #fff;
	padding: 40px 0;
	margin-bottom: 24px;
}

.ms-section-head {
	margin-bottom: 24px;
}

.ms-section-eyebrow {
	font-size: 12px;
	font-weight: 700;
	color: var(--ms-blue);
	display: block;
	margin-bottom: 4px;
}

.ms-section-title {
	font-size: 20px;
	font-weight: 800;
	color: var(--ms-dark);
	margin: 0;
}

.ms-rooms-table-wrap {
	overflow-x: auto;
}

.ms-rooms-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.ms-rooms-table th {
	background: #f8fafc;
	padding: 12px 16px;
	text-align: right;
	font-weight: 700;
	color: var(--ms-dark);
	border-bottom: 2px solid #e2e8f0;
}

.ms-rooms-table td {
	padding: 16px;
	border-bottom: 1px solid #f1f5f9;
	vertical-align: middle;
}

.ms-room-type-cell strong {
	display: block;
	font-size: 14px;
	color: var(--ms-dark);
}

.ms-room-sub {
	font-size: 11px;
	color: var(--ms-grey);
}

.ms-room-price del {
	display: block;
	font-size: 11px;
	color: var(--ms-grey);
}

.ms-room-price strong {
	font-size: 15px;
	color: var(--ms-blue);
}

.ms-book-btn {
	display: inline-block;
	background: var(--ms-yellow);
	color: var(--ms-dark);
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 6px;
	text-decoration: none;
	transition: background 0.2s;
}

.ms-book-btn:hover {
	background: var(--ms-yellow-d);
}

/* ============================================================
   5. DETAILS & AMENITIES
   ============================================================ */
.ms-details-section {
	background: #fff;
	padding: 40px 0;
}

.ms-details-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 32px;
}

.ms-details-title {
	font-size: 18px;
	font-weight: 800;
	margin: 0 0 16px;
}

.ms-details-text {
	font-size: 14px;
	color: var(--ms-grey);
	line-height: 1.8;
}

/* One heading per real 'hotel_feature' parent term (e.g. "امکانات رفاهی"),
   each followed by its own pill grid of the child terms under it. */
.ms-amenity-group-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--ms-dark);
	margin: 16px 0 8px;
}
.ms-amenity-group-title:first-of-type {
	margin-top: 0;
}

.ms-all-amenities-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}

.ms-amenity-pill {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	padding: 8px 14px;
	border-radius: 20px;
	font-size: 13px;
	color: var(--ms-dark);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1200px) {
	.ms-showcase-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.ms-inline-search-form {
		flex-direction: column;
		gap: 10px;
	}
	.ms-field-divider {
		display: none;
	}
	.ms-search-field {
		width: 100%;
		min-height: 44px;
	}
	.ms-search-submit {
		width: 100%;
		height: 48px;
	}
	.ms-showcase-grid {
		grid-template-columns: 1fr;
	}
	/* The desktop `order` values exist to counteract RTL grid placement
	   across 4 side-by-side columns — stacked into one column here, that
	   reasoning no longer applies, and it would otherwise put the booking
	   info card above the actual hotel photos. Reset to plain DOM order. */
	.ms-col-gallery,
	.ms-col-categories,
	.ms-col-reviews,
	.ms-col-info {
		order: initial;
	}
	.ms-details-grid {
		grid-template-columns: 1fr;
	}
	.ms-top-info-card {
		padding: 16px;
	}
	.ms-rooms-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 600px) {
	.ms-single-hotel-root {
		padding: 0 8px;
	}
	.ms-hotel-headline-title {
		font-size: 20px;
	}
	.ms-cat-stack {
		flex-direction: row;
		overflow-x: auto;
		height: auto;
	}
	.ms-mini-thumbs-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
	}
	.ms-mini-thumb,
	.ms-mini-more-btn {
		min-width: 70px;
		height: 70px;
	}
	.ms-booking-cta-bar {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

/* ============================================================
   POPUPS (amenities / reviews) — reuses the theme's own Bootstrap
   ".modal" markup/JS; this only styles the scrollable content area and a
   couple of small RTL-friendly tweaks, not the modal mechanics themselves.
   ============================================================ */
.ms-modal .modal-title {
	font-size: 16px;
	font-weight: 800;
}
.ms-modal .close {
	/* Bootstrap's default .close floats right, which in this RTL root
	   actually lands it on the visual left — the normal spot for a
	   dismiss control in an RTL dialog, so left as-is; just sized up
	   a bit for an easier tap target. */
	font-size: 24px;
	opacity: 0.6;
}
.ms-modal .close:hover {
	opacity: 1;
}
.ms-modal-scroll {
	max-height: 60vh;
	overflow-y: auto;
	padding-left: 4px;
}
@media (max-width: 600px) {
	.ms-modal-scroll {
		max-height: 70vh;
	}
}