/*
Theme Name: MK Developer Theme
Theme URI: https://developer.developer.developer
Author: MK Developer
Author URI: https://developer.developer.developer
Description: A premium, modern, highly advanced WordPress hotel and vacation rental booking theme. Fully Elementor-based with MotoPress Hotel Booking integration. Inspired by Airbnb, Booking.com, and luxury property rental platforms. Features advanced booking system, calendar sync, payment integrations, AJAX search, wishlists, compare system, dark mode, RTL support, and 17+ custom Elementor widgets.
Version: 1.0.0
Tested up to: 6.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mk-developer
Domain Path: /languages
Tags: hotel, booking, vacation-rental, elementor, property, airbnb, luxury, dark-mode, rtl-language-support, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, theme-options, translation-ready, one-column, two-columns, three-columns, grid-layout
*/

/* ==========================================================================
   MK DEVELOPER THEME — Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */

:root {
  /* ── Primary Brand ── */
  --mk-primary:            #C4976D;
  --mk-primary-rgb:        196, 151, 109;
  --mk-primary-hover:      #B08456;
  --mk-primary-light:      #D4AC82;
  --mk-primary-ultra-light:#FFF2DE;
  --mk-primary-10:         rgba(196, 151, 109, 0.1);
  --mk-primary-20:         rgba(196, 151, 109, 0.2);
  --mk-primary-50:         rgba(196, 151, 109, 0.5);

  /* ── Accent ── */
  --mk-accent:             #D98600;
  --mk-accent-hover:       #C07700;
  --mk-accent-light:       #FFAA33;

  /* ── Neutrals ── */
  --mk-black:              #000000;
  --mk-dark:               #1A1A1A;
  --mk-gray-900:           #2D2D2D;
  --mk-gray-800:           #3D3D3D;
  --mk-gray-700:           #4A4A4A;
  --mk-gray-600:           #636363;
  --mk-gray-500:           #7A7A7A;
  --mk-gray-400:           #9A9A9A;
  --mk-gray-300:           #B0B0B0;
  --mk-gray-200:           #D4D4D4;
  --mk-gray-100:           #E5E5E5;
  --mk-gray-50:            #F5F5F5;
  --mk-white:              #FFFFFF;

  /* ── Semantic ── */
  --mk-success:            #22C55E;
  --mk-success-light:      #DCFCE7;
  --mk-warning:            #F59E0B;
  --mk-warning-light:      #FEF3C7;
  --mk-error:              #EF4444;
  --mk-error-light:        #FEE2E2;
  --mk-info:               #3B82F6;
  --mk-info-light:         #DBEAFE;

  /* ── Surface Colors ── */
  --mk-bg:                 #FFFFFF;
  --mk-bg-alt:             #F5F5F5;
  --mk-bg-warm:            #FFF2DE;
  --mk-surface:            #FFFFFF;
  --mk-surface-hover:      #F9F9F9;
  --mk-border:             #E5E5E5;
  --mk-border-light:       #F0F0F0;
  --mk-text:               #1A1A1A;
  --mk-text-secondary:     #7A7A7A;
  --mk-text-muted:         #B0B0B0;

  /* ── Typography ── */
  --mk-font-display:       'Gilda Display', Georgia, 'Times New Roman', serif;
  --mk-font-body:          'Barlow', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mk-font-accent:        'Homemade Apple', cursive;
  --mk-font-mono:          'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* ── Font Sizes (Major Third — 1.250) ── */
  --mk-text-xs:            0.75rem;
  --mk-text-sm:            0.875rem;
  --mk-text-base:          1rem;
  --mk-text-lg:            1.125rem;
  --mk-text-xl:            1.25rem;
  --mk-text-2xl:           1.5rem;
  --mk-text-3xl:           1.875rem;
  --mk-text-4xl:           2.25rem;
  --mk-text-5xl:           3rem;
  --mk-text-6xl:           3.75rem;
  --mk-text-hero:          5rem;

  /* ── Font Weights ── */
  --mk-weight-light:       300;
  --mk-weight-regular:     400;
  --mk-weight-medium:      500;
  --mk-weight-semibold:    600;
  --mk-weight-bold:        700;

  /* ── Line Heights ── */
  --mk-leading-tight:      1.2;
  --mk-leading-snug:       1.35;
  --mk-leading-normal:     1.5;
  --mk-leading-relaxed:    1.65;
  --mk-leading-loose:      1.8;

  /* ── Letter Spacing ── */
  --mk-tracking-tight:     -0.025em;
  --mk-tracking-normal:    0;
  --mk-tracking-wide:      0.05em;
  --mk-tracking-wider:     0.1em;
  --mk-tracking-widest:    0.2em;

  /* ── Spacing Scale ── */
  --mk-space-1:            0.25rem;
  --mk-space-2:            0.5rem;
  --mk-space-3:            0.75rem;
  --mk-space-4:            1rem;
  --mk-space-5:            1.25rem;
  --mk-space-6:            1.5rem;
  --mk-space-8:            2rem;
  --mk-space-10:           2.5rem;
  --mk-space-12:           3rem;
  --mk-space-14:           3.5rem;
  --mk-space-16:           4rem;
  --mk-space-20:           5rem;
  --mk-space-24:           6rem;
  --mk-space-32:           8rem;
  --mk-space-40:           10rem;

  /* ── Section Spacing ── */
  --mk-section-sm:         3.75rem;
  --mk-section-md:         6.875rem;
  --mk-section-lg:         7.5rem;
  --mk-section-xl:         11.25rem;

  /* ── Container ── */
  --mk-container-sm:       640px;
  --mk-container-md:       768px;
  --mk-container-lg:       1024px;
  --mk-container-xl:       1140px;
  --mk-container-2xl:      1350px;
  --mk-container-padding:  1.25rem;

  /* ── Borders ── */
  --mk-radius-sm:          4px;
  --mk-radius-md:          8px;
  --mk-radius-lg:          12px;
  --mk-radius-xl:          16px;
  --mk-radius-2xl:         24px;
  --mk-radius-full:        9999px;

  /* ── Shadows ── */
  --mk-shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.05);
  --mk-shadow-md:          0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --mk-shadow-lg:          0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --mk-shadow-xl:          0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --mk-shadow-2xl:         0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --mk-shadow-card:        0 2px 16px rgba(0, 0, 0, 0.06);
  --mk-shadow-card-hover:  0 8px 32px rgba(0, 0, 0, 0.12);
  --mk-shadow-sticky:      0 4px 20px rgba(0, 0, 0, 0.08);
  --mk-shadow-booking:     0 0px 10px 0px rgba(0, 0, 0, 0.38);

  /* ── Transitions ── */
  --mk-transition-fast:    150ms ease;
  --mk-transition:         300ms ease;
  --mk-transition-slow:    500ms ease;
  --mk-transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --mk-z-dropdown:         100;
  --mk-z-sticky:           200;
  --mk-z-fixed:            300;
  --mk-z-modal-backdrop:   400;
  --mk-z-modal:            500;
  --mk-z-popover:          600;
  --mk-z-tooltip:          700;
  --mk-z-toast:            800;

  /* ── Header ── */
  --mk-header-height:      80px;
  --mk-header-height-mobile: 64px;
}

/* --------------------------------------------------------------------------
   2. Dark Mode Variables
   -------------------------------------------------------------------------- */

[data-theme="dark"],
.mk-dark-mode {
  --mk-bg:                 #0F172A;
  --mk-bg-alt:             #1E293B;
  --mk-bg-warm:            #1E293B;
  --mk-surface:            #1E293B;
  --mk-surface-hover:      #334155;
  --mk-border:             #334155;
  --mk-border-light:       #1E293B;
  --mk-text:               #E2E8F0;
  --mk-text-secondary:     #94A3B8;
  --mk-text-muted:         #64748B;
  --mk-white:              #0F172A;
  --mk-black:              #F8FAFC;
  --mk-gray-50:            #1E293B;
  --mk-gray-100:           #334155;
  --mk-shadow-card:        0 2px 16px rgba(0, 0, 0, 0.3);
  --mk-shadow-card-hover:  0 8px 32px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   3. Base Reset & Defaults
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--mk-font-body);
  font-size: var(--mk-text-base);
  font-weight: var(--mk-weight-regular);
  line-height: var(--mk-leading-relaxed);
  color: var(--mk-text);
  background-color: var(--mk-bg);
  overflow-x: hidden;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mk-font-display);
  font-weight: var(--mk-weight-regular);
  line-height: var(--mk-leading-tight);
  color: var(--mk-text);
  margin-bottom: var(--mk-space-4);
}

h1 { font-size: var(--mk-text-5xl); }
h2 { font-size: var(--mk-text-4xl); }
h3 { font-size: var(--mk-text-3xl); }
h4 { font-size: var(--mk-text-2xl); }
h5 { font-size: var(--mk-text-xl); }
h6 { font-size: var(--mk-text-lg); }

/* ── Paragraphs & Text ── */
p {
  margin-bottom: var(--mk-space-4);
  color: var(--mk-text-secondary);
  line-height: var(--mk-leading-relaxed);
}

a {
  color: var(--mk-primary);
  text-decoration: none;
  transition: color var(--mk-transition);
}

a:hover,
a:focus {
  color: var(--mk-primary-hover);
}

strong, b { font-weight: var(--mk-weight-semibold); }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  padding-left: var(--mk-space-6);
}

/* ── Selection ── */
::selection {
  background-color: var(--mk-primary);
  color: var(--mk-white);
}

/* --------------------------------------------------------------------------
   4. Layout System
   -------------------------------------------------------------------------- */

.mk-container {
  width: 100%;
  max-width: var(--mk-container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mk-container-padding);
  padding-right: var(--mk-container-padding);
}

.mk-container--wide {
  max-width: var(--mk-container-2xl);
}

.mk-container--narrow {
  max-width: var(--mk-container-md);
}

/* ── Grid ── */
.mk-grid {
  display: grid;
  gap: var(--mk-space-8);
}

.mk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mk-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Flex ── */
.mk-flex       { display: flex; }
.mk-flex-col   { flex-direction: column; }
.mk-flex-wrap  { flex-wrap: wrap; }
.mk-flex-center { align-items: center; justify-content: center; }
.mk-flex-between { justify-content: space-between; align-items: center; }

/* ── Section Spacing ── */
.mk-section {
  padding-top: var(--mk-section-lg);
  padding-bottom: var(--mk-section-lg);
}

.mk-section--sm {
  padding-top: var(--mk-section-sm);
  padding-bottom: var(--mk-section-sm);
}

.mk-section--xl {
  padding-top: var(--mk-section-xl);
  padding-bottom: var(--mk-section-xl);
}

.mk-section--dark {
  background-color: var(--mk-dark);
  color: var(--mk-white);
}

.mk-section--warm {
  background-color: var(--mk-bg-warm);
}

.mk-section--alt {
  background-color: var(--mk-bg-alt);
}

/* --------------------------------------------------------------------------
   5. Component Styles
   -------------------------------------------------------------------------- */

/* ── Buttons ── */
.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-space-2);
  font-family: var(--mk-font-body);
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mk-tracking-wide);
  line-height: 1.5;
  padding: 0.625rem 1.875rem;
  border: 2px solid transparent;
  border-radius: var(--mk-radius-sm);
  cursor: pointer;
  transition: all var(--mk-transition);
  text-decoration: none;
  white-space: nowrap;
}

.mk-btn--primary {
  background-color: var(--mk-primary);
  border-color: var(--mk-primary);
  color: #FFFFFF;
}

.mk-btn--primary:hover,
.mk-btn--primary:focus {
  background-color: transparent;
  color: var(--mk-primary);
}

.mk-btn--outline {
  background-color: transparent;
  border-color: var(--mk-primary);
  color: var(--mk-primary);
}

.mk-btn--outline:hover,
.mk-btn--outline:focus {
  background-color: var(--mk-primary);
  color: #FFFFFF;
}

.mk-btn--dark {
  background-color: var(--mk-dark);
  border-color: var(--mk-dark);
  color: #FFFFFF;
}

.mk-btn--dark:hover,
.mk-btn--dark:focus {
  background-color: transparent;
  color: var(--mk-dark);
}

.mk-btn--white {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--mk-dark);
}

.mk-btn--white:hover,
.mk-btn--white:focus {
  background-color: transparent;
  color: #FFFFFF;
}

.mk-btn--sm {
  font-size: var(--mk-text-xs);
  padding: 0.375rem 1rem;
}

.mk-btn--lg {
  font-size: var(--mk-text-base);
  padding: 0.875rem 2.5rem;
}

.mk-btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--mk-radius-md);
}

/* ── Cards ── */
.mk-card {
  background-color: var(--mk-surface);
  border-radius: var(--mk-radius-xl);
  overflow: hidden;
  transition: all var(--mk-transition);
  box-shadow: var(--mk-shadow-card);
}

.mk-card:hover {
  box-shadow: var(--mk-shadow-card-hover);
  transform: translateY(-2px);
}

.mk-card__image {
  position: relative;
  overflow: hidden;
}

.mk-card__image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform var(--mk-transition-slow);
}

.mk-card:hover .mk-card__image img {
  transform: scale(1.05);
}

.mk-card__badge {
  position: absolute;
  top: var(--mk-space-4);
  left: var(--mk-space-4);
  padding: var(--mk-space-1) var(--mk-space-3);
  background-color: var(--mk-dark);
  color: #FFFFFF;
  font-size: var(--mk-text-xs);
  font-weight: var(--mk-weight-semibold);
  border-radius: var(--mk-radius-sm);
  z-index: 2;
}

.mk-card__wishlist {
  position: absolute;
  top: var(--mk-space-4);
  right: var(--mk-space-4);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: var(--mk-radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--mk-transition);
  z-index: 2;
}

.mk-card__wishlist:hover {
  background-color: #FFFFFF;
  transform: scale(1.1);
}

.mk-card__wishlist.is-active svg {
  fill: var(--mk-error);
  color: var(--mk-error);
}

.mk-card__content {
  padding: var(--mk-space-6);
}

.mk-card__location {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  font-size: var(--mk-text-xs);
  font-weight: var(--mk-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--mk-tracking-wider);
  color: var(--mk-text-secondary);
  margin-bottom: var(--mk-space-2);
}

.mk-card__title {
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-xl);
  font-weight: var(--mk-weight-regular);
  color: var(--mk-text);
  margin-bottom: var(--mk-space-2);
  line-height: var(--mk-leading-snug);
}

.mk-card__title a {
  color: inherit;
  transition: color var(--mk-transition);
}

.mk-card__title a:hover {
  color: var(--mk-primary);
}

.mk-card__rating {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  margin-bottom: var(--mk-space-3);
}

.mk-card__stars {
  display: flex;
  gap: 2px;
  color: var(--mk-accent);
}

.mk-card__rating-text {
  font-size: var(--mk-text-sm);
  color: var(--mk-text-secondary);
}

.mk-card__description {
  font-size: var(--mk-text-sm);
  color: var(--mk-text-secondary);
  line-height: var(--mk-leading-relaxed);
  margin-bottom: var(--mk-space-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mk-card__meta {
  display: flex;
  align-items: center;
  gap: var(--mk-space-6);
  padding-top: var(--mk-space-4);
  border-top: 1px solid var(--mk-border-light);
  margin-bottom: var(--mk-space-4);
}

.mk-card__meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mk-space-1);
}

.mk-card__meta-icon {
  width: 24px;
  height: 24px;
  color: var(--mk-gray-600);
}

.mk-card__meta-text {
  font-size: var(--mk-text-xs);
  color: var(--mk-text-secondary);
}

.mk-card__savings {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  padding: var(--mk-space-2) var(--mk-space-4);
  background-color: var(--mk-bg-alt);
  border-radius: var(--mk-radius-md);
  font-size: var(--mk-text-sm);
  color: var(--mk-text-secondary);
  margin-bottom: var(--mk-space-4);
}

.mk-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mk-card__price {
  display: flex;
  flex-direction: column;
}

.mk-card__price-from {
  font-size: var(--mk-text-xs);
  color: var(--mk-text-muted);
}

.mk-card__price-amount {
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-2xl);
  font-weight: var(--mk-weight-regular);
  color: var(--mk-text);
}

.mk-card__price-period {
  font-size: var(--mk-text-sm);
  color: var(--mk-text-secondary);
  font-family: var(--mk-font-body);
}

/* ── Property Card Horizontal (XJ Stays / WhatsApp concept style) ── */
.mk-card--horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--mk-radius-xl);
  overflow: hidden;
  border: 1px solid var(--mk-border-light);
}

.mk-card--horizontal .mk-card__image img {
  height: 100%;
  min-height: 340px;
}

.mk-card--horizontal .mk-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--mk-space-8);
}

/* ── Property Card Overlay (Dark bg, inside carousel) ── */
.mk-card--overlay {
  position: relative;
  border: 1px solid var(--mk-primary);
  border-radius: var(--mk-radius-xl);
  padding: var(--mk-space-5);
  background-color: transparent;
  transition: background-color var(--mk-transition);
}

.mk-card--overlay:hover {
  background-color: var(--mk-primary);
}

.mk-card--overlay .mk-card__image img {
  border-radius: var(--mk-radius-lg);
}

.mk-card--overlay .mk-card__title {
  color: var(--mk-primary);
  text-align: center;
}

.mk-card--overlay .mk-card__description {
  text-align: center;
  color: #FFFFFF;
}

.mk-card--overlay:hover .mk-card__title {
  color: #FFFFFF;
}

/* ── Input Fields ── */
.mk-input {
  width: 100%;
  padding: var(--mk-space-3) var(--mk-space-4);
  font-family: var(--mk-font-body);
  font-size: var(--mk-text-base);
  color: var(--mk-text);
  background-color: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  transition: all var(--mk-transition);
  outline: none;
}

.mk-input:focus {
  border-color: var(--mk-primary);
  box-shadow: 0 0 0 3px var(--mk-primary-10);
}

.mk-input::placeholder {
  color: var(--mk-text-muted);
}

.mk-label {
  display: block;
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-medium);
  color: var(--mk-text);
  margin-bottom: var(--mk-space-2);
}

.mk-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237A7A7A' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.763L10.825 4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--mk-space-4) center;
  padding-right: var(--mk-space-10);
}

/* ── Booking Widget (Sticky Sidebar) ── */
.mk-booking-widget {
  background-color: var(--mk-surface);
  border-radius: var(--mk-radius-xl);
  padding: var(--mk-space-8);
  box-shadow: var(--mk-shadow-booking);
  position: sticky;
  top: calc(var(--mk-header-height) + var(--mk-space-8));
}

.mk-booking-widget__icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--mk-space-6);
}

.mk-booking-widget__field {
  margin-bottom: var(--mk-space-5);
}

.mk-booking-widget .mk-btn {
  width: 100%;
  margin-top: var(--mk-space-4);
}

/* ── Search Bar (Horizontal - Homepage) ── */
.mk-search-bar {
  display: flex;
  background-color: var(--mk-surface);
  border-radius: var(--mk-radius-xl);
  box-shadow: var(--mk-shadow-xl);
  overflow: hidden;
}

.mk-search-bar__field {
  flex: 1;
  padding: var(--mk-space-5) var(--mk-space-6);
  border: none;
  border-right: 1px solid var(--mk-border-light);
}

.mk-search-bar__field:last-of-type {
  border-right: none;
}

.mk-search-bar__field label {
  display: block;
  font-size: var(--mk-text-xs);
  font-weight: var(--mk-weight-semibold);
  color: var(--mk-text);
  margin-bottom: var(--mk-space-1);
}

.mk-search-bar__field input,
.mk-search-bar__field select {
  width: 100%;
  border: none;
  font-family: var(--mk-font-body);
  font-size: var(--mk-text-sm);
  color: var(--mk-text-secondary);
  background: transparent;
  outline: none;
}

.mk-search-bar__submit {
  display: flex;
  align-items: center;
}

.mk-search-bar__submit .mk-btn {
  border-radius: 0 var(--mk-radius-xl) var(--mk-radius-xl) 0;
  height: 100%;
  padding: var(--mk-space-5) var(--mk-space-10);
}

/* ── Gallery Grid (Airbnb 5-photo style) ── */
.mk-gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--mk-space-2);
  border-radius: var(--mk-radius-xl);
  overflow: hidden;
  max-height: 480px;
}

.mk-gallery-grid__item {
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.mk-gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mk-transition-slow);
}

.mk-gallery-grid__item:hover img {
  transform: scale(1.05);
}

.mk-gallery-grid__item:first-child {
  grid-row: 1 / 3;
}

.mk-gallery-grid__show-all {
  position: absolute;
  bottom: var(--mk-space-4);
  right: var(--mk-space-4);
  padding: var(--mk-space-2) var(--mk-space-4);
  background-color: var(--mk-surface);
  border: 1px solid var(--mk-dark);
  border-radius: var(--mk-radius-md);
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-medium);
  cursor: pointer;
  transition: all var(--mk-transition);
  z-index: 2;
}

.mk-gallery-grid__show-all:hover {
  background-color: var(--mk-dark);
  color: #FFFFFF;
}

/* ── Amenities Grid ── */
.mk-amenities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mk-space-4);
}

.mk-amenity {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  padding: var(--mk-space-2) 0;
}

.mk-amenity__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--mk-text);
}

.mk-amenity__name {
  font-size: var(--mk-text-base);
  color: var(--mk-text);
}

.mk-amenity--unavailable .mk-amenity__name {
  text-decoration: line-through;
  color: var(--mk-text-muted);
}

/* ── Feature / Icon Box ── */
.mk-feature-box {
  padding: var(--mk-space-8);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-sm);
  transition: all var(--mk-transition);
  display: flex;
  align-items: flex-end;
  gap: var(--mk-space-5);
}

.mk-feature-box:hover {
  transform: scale(1.019);
  background-color: var(--mk-primary-10);
}

.mk-feature-box__icon {
  font-size: 52px;
  color: var(--mk-primary);
  flex-shrink: 0;
}

.mk-feature-box__title {
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-3xl);
  font-weight: var(--mk-weight-regular);
  line-height: var(--mk-leading-tight);
  margin-bottom: var(--mk-space-3);
}

.mk-feature-box__text {
  font-size: var(--mk-text-base);
  color: var(--mk-text-secondary);
  margin: 0;
}

/* ── Testimonial Card ── */
.mk-testimonial {
  padding: var(--mk-space-8);
  background-color: var(--mk-bg-alt);
  border-radius: var(--mk-radius-lg);
}

.mk-testimonial__stars {
  display: flex;
  gap: 2px;
  color: var(--mk-accent);
  margin-bottom: var(--mk-space-4);
}

.mk-testimonial__text {
  font-size: var(--mk-text-base);
  line-height: var(--mk-leading-relaxed);
  color: var(--mk-text);
  margin-bottom: var(--mk-space-6);
}

.mk-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
}

.mk-testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--mk-radius-full);
  object-fit: cover;
}

.mk-testimonial__name {
  font-weight: var(--mk-weight-semibold);
  font-size: var(--mk-text-base);
  color: var(--mk-text);
  margin: 0;
}

.mk-testimonial__location {
  font-size: var(--mk-text-sm);
  color: var(--mk-primary);
  margin: 0;
}

.mk-testimonial__quote {
  margin-left: auto;
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-4xl);
  color: var(--mk-primary-20);
  line-height: 1;
}

/* ── Host Info Section ── */
.mk-host-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mk-space-10);
  padding: var(--mk-space-10) 0;
  border-top: 1px solid var(--mk-border);
}

.mk-host-info__card {
  display: flex;
  gap: var(--mk-space-6);
}

.mk-host-info__avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--mk-radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.mk-host-info__stats {
  display: flex;
  flex-direction: column;
  gap: var(--mk-space-2);
}

.mk-host-info__stat {
  text-align: center;
}

.mk-host-info__stat-value {
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-2xl);
  font-weight: var(--mk-weight-bold);
  color: var(--mk-text);
}

.mk-host-info__stat-label {
  font-size: var(--mk-text-xs);
  color: var(--mk-text-secondary);
}

/* ── Counter / Stats ── */
.mk-counter {
  text-align: center;
}

.mk-counter__number {
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-5xl);
  font-weight: var(--mk-weight-regular);
  color: var(--mk-primary);
  line-height: 1;
}

.mk-counter__suffix {
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-3xl);
  color: var(--mk-primary);
}

.mk-counter__title {
  font-size: var(--mk-text-base);
  color: var(--mk-text-secondary);
  margin-top: var(--mk-space-2);
}

/* ── Breadcrumbs ── */
.mk-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  font-size: var(--mk-text-sm);
  color: var(--mk-text-secondary);
  padding: var(--mk-space-4) 0;
}

.mk-breadcrumbs a {
  color: var(--mk-text-secondary);
  transition: color var(--mk-transition);
}

.mk-breadcrumbs a:hover {
  color: var(--mk-primary);
}

.mk-breadcrumbs__separator {
  color: var(--mk-text-muted);
}

/* ── Page Hero Banner ── */
.mk-page-hero {
  position: relative;
  padding: var(--mk-space-20) 0;
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow: hidden;
}

.mk-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

.mk-page-hero__content {
  position: relative;
  z-index: 2;
}

.mk-page-hero__title {
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-5xl);
  color: #FFFFFF;
  margin-bottom: var(--mk-space-2);
}

.mk-page-hero__breadcrumbs {
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
}

.mk-page-hero__breadcrumbs a {
  color: rgba(255, 255, 255, 0.7);
}

.mk-page-hero__breadcrumbs a:hover {
  color: #FFFFFF;
}

/* ── Things to Know ── */
.mk-things-to-know {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mk-space-8);
  padding: var(--mk-space-10) 0;
  border-top: 1px solid var(--mk-border);
}

.mk-things-to-know__item h4 {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-lg);
  margin-bottom: var(--mk-space-4);
}

.mk-things-to-know__item p {
  font-size: var(--mk-text-sm);
  line-height: var(--mk-leading-relaxed);
}

/* --------------------------------------------------------------------------
   6. Header Styles
   -------------------------------------------------------------------------- */

.mk-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--mk-z-sticky);
  transition: all var(--mk-transition);
  height: var(--mk-header-height);
}

.mk-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--mk-space-10);
}

.mk-header--transparent {
  background-color: transparent;
}

.mk-header--scrolled,
.mk-header--solid {
  background-color: var(--mk-surface);
  box-shadow: var(--mk-shadow-sticky);
}

.mk-header--scrolled .mk-nav__link {
  color: var(--mk-text);
}

.mk-header__logo img {
  height: 48px;
  width: auto;
}

/* ── Navigation ── */
.mk-nav {
  display: flex;
  align-items: center;
  gap: var(--mk-space-1);
}

.mk-nav__link {
  font-family: var(--mk-font-body);
  font-size: var(--mk-text-sm);
  font-weight: var(--mk-weight-medium);
  color: #FFFFFF;
  padding: var(--mk-space-2) var(--mk-space-4);
  border-radius: var(--mk-radius-md);
  transition: all var(--mk-transition);
  text-decoration: none;
  white-space: nowrap;
}

.mk-header--solid .mk-nav__link,
.mk-header--scrolled .mk-nav__link {
  color: var(--mk-text);
}

.mk-nav__link:hover,
.mk-nav__link--active {
  color: var(--mk-primary) !important;
}

.mk-nav__dropdown {
  position: relative;
}

.mk-nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: var(--mk-space-2);
  background-color: var(--mk-surface);
  border-radius: var(--mk-radius-lg);
  box-shadow: var(--mk-shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--mk-transition);
  list-style: none;
  margin: 0;
}

.mk-nav__dropdown:hover .mk-nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mk-nav__dropdown-menu a {
  display: block;
  padding: var(--mk-space-2) var(--mk-space-4);
  font-size: var(--mk-text-sm);
  color: var(--mk-text);
  border-radius: var(--mk-radius-md);
  transition: all var(--mk-transition-fast);
}

.mk-nav__dropdown-menu a:hover {
  background-color: var(--mk-bg-alt);
  color: var(--mk-primary);
}

.mk-header__cta .mk-btn {
  text-transform: uppercase;
}

/* ── Mobile Menu ── */
.mk-mobile-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: calc(var(--mk-z-modal) + 1);
}

.mk-mobile-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--mk-text);
  transition: all var(--mk-transition);
  position: relative;
}

.mk-mobile-toggle__bar::before,
.mk-mobile-toggle__bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--mk-text);
  transition: all var(--mk-transition);
}

.mk-mobile-toggle__bar::before { top: -7px; }
.mk-mobile-toggle__bar::after  { bottom: -7px; }

.mk-header--transparent .mk-mobile-toggle__bar,
.mk-header--transparent .mk-mobile-toggle__bar::before,
.mk-header--transparent .mk-mobile-toggle__bar::after {
  background-color: #FFFFFF;
}

.mk-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--mk-surface);
  z-index: var(--mk-z-modal);
  padding: calc(var(--mk-header-height) + var(--mk-space-8)) var(--mk-space-8) var(--mk-space-8);
  overflow-y: auto;
}

.mk-mobile-menu.is-open {
  display: block;
  animation: mkFadeIn 0.3s ease-out;
}

.mk-mobile-menu__nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mk-mobile-menu__nav a {
  display: block;
  padding: var(--mk-space-4) 0;
  font-size: var(--mk-text-lg);
  font-weight: var(--mk-weight-medium);
  color: var(--mk-text);
  border-bottom: 1px solid var(--mk-border-light);
  transition: color var(--mk-transition);
}

.mk-mobile-menu__nav a:hover {
  color: var(--mk-primary);
}

/* --------------------------------------------------------------------------
   7. Footer Styles
   -------------------------------------------------------------------------- */

.mk-footer {
  background-color: var(--mk-dark);
  color: #FFFFFF;
  padding-top: var(--mk-section-lg);
}

.mk-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--mk-space-10);
  padding-bottom: var(--mk-space-12);
}

.mk-footer__brand-desc {
  color: var(--mk-gray-400);
  font-size: var(--mk-text-sm);
  line-height: var(--mk-leading-relaxed);
  margin-top: var(--mk-space-4);
}

.mk-footer__logo img {
  height: 48px;
  width: auto;
}

.mk-footer__heading {
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-xl);
  color: #FFFFFF;
  margin-bottom: var(--mk-space-6);
}

.mk-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mk-footer__links li {
  margin-bottom: var(--mk-space-3);
}

.mk-footer__links a {
  color: var(--mk-gray-400);
  font-size: var(--mk-text-sm);
  transition: color var(--mk-transition);
}

.mk-footer__links a:hover {
  color: var(--mk-primary);
}

.mk-footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  margin-bottom: var(--mk-space-3);
}

.mk-footer__contact-icon {
  width: 20px;
  height: 20px;
  color: var(--mk-primary);
}

.mk-footer__contact-text {
  color: var(--mk-gray-400);
  font-size: var(--mk-text-sm);
}

.mk-footer__contact-text a {
  color: var(--mk-primary);
}

.mk-footer__social {
  display: flex;
  gap: var(--mk-space-3);
  margin-top: var(--mk-space-4);
}

.mk-footer__social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mk-gray-800);
  border-radius: var(--mk-radius-full);
  color: #FFFFFF;
  transition: all var(--mk-transition);
}

.mk-footer__social a:hover {
  background-color: var(--mk-primary);
}

.mk-footer__bottom {
  border-top: 1px solid var(--mk-gray-800);
  padding: var(--mk-space-6) 0;
  text-align: center;
}

.mk-footer__copyright {
  font-size: var(--mk-text-sm);
  color: var(--mk-gray-500);
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. Skeleton Loading
   -------------------------------------------------------------------------- */

.mk-skeleton {
  background: linear-gradient(90deg, var(--mk-gray-100) 25%, var(--mk-gray-50) 50%, var(--mk-gray-100) 75%);
  background-size: 200% 100%;
  animation: mkSkeleton 1.5s ease-in-out infinite;
  border-radius: var(--mk-radius-md);
}

.mk-skeleton--text {
  height: 1em;
  width: 100%;
  margin-bottom: var(--mk-space-2);
}

.mk-skeleton--title {
  height: 1.5em;
  width: 60%;
  margin-bottom: var(--mk-space-4);
}

.mk-skeleton--image {
  height: 200px;
  width: 100%;
  border-radius: var(--mk-radius-xl);
}

.mk-skeleton--card {
  height: 380px;
  width: 100%;
  border-radius: var(--mk-radius-xl);
}

/* --------------------------------------------------------------------------
   9. Animations
   -------------------------------------------------------------------------- */

/* ── Entrance Animations ── */
@keyframes mkFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mkFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mkFadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mkSlideRight {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mkSlideLeft {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mkScaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes mkPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes mkBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes mkSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Animation Utility Classes ── */
.mk-animate {
  opacity: 0;
}

.mk-animate--visible {
  opacity: 1;
}

.mk-fade-up          { animation: mkFadeUp 0.6s ease-out forwards; }
.mk-fade-in          { animation: mkFadeIn 0.5s ease-out forwards; }
.mk-fade-down        { animation: mkFadeDown 0.5s ease-out forwards; }
.mk-slide-right      { animation: mkSlideRight 0.6s ease-out forwards; }
.mk-slide-left       { animation: mkSlideLeft 0.6s ease-out forwards; }
.mk-scale-in         { animation: mkScaleIn 0.4s ease-out forwards; }

/* ── Stagger Delays ── */
.mk-delay-1 { animation-delay: 100ms; }
.mk-delay-2 { animation-delay: 200ms; }
.mk-delay-3 { animation-delay: 300ms; }
.mk-delay-4 { animation-delay: 400ms; }
.mk-delay-5 { animation-delay: 500ms; }
.mk-delay-6 { animation-delay: 600ms; }

/* ── Hover Utilities ── */
.mk-hover-lift {
  transition: transform var(--mk-transition), box-shadow var(--mk-transition);
}
.mk-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--mk-shadow-xl);
}

.mk-hover-scale {
  transition: transform var(--mk-transition);
}
.mk-hover-scale:hover {
  transform: scale(1.019);
}

.mk-hover-glow {
  transition: box-shadow var(--mk-transition);
}
.mk-hover-glow:hover {
  box-shadow: 0 0 30px var(--mk-primary-20);
}

/* --------------------------------------------------------------------------
   10. Preloader
   -------------------------------------------------------------------------- */

.mk-preloader {
  position: fixed;
  inset: 0;
  background-color: var(--mk-bg);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.mk-preloader.is-loaded {
  opacity: 0;
  visibility: hidden;
}

.mk-preloader__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--mk-border);
  border-top-color: var(--mk-primary);
  border-radius: 50%;
  animation: mkSpin 0.8s linear infinite;
}

/* --------------------------------------------------------------------------
   11. Back to Top
   -------------------------------------------------------------------------- */

.mk-back-to-top {
  position: fixed;
  bottom: var(--mk-space-8);
  right: var(--mk-space-8);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mk-primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--mk-radius-full);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--mk-transition);
  z-index: var(--mk-z-fixed);
  box-shadow: var(--mk-shadow-lg);
}

.mk-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mk-back-to-top:hover {
  background-color: var(--mk-primary-hover);
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   12. Utility Classes
   -------------------------------------------------------------------------- */

.mk-text-center   { text-align: center; }
.mk-text-left     { text-align: left; }
.mk-text-right    { text-align: right; }

.mk-text-primary  { color: var(--mk-primary); }
.mk-text-white    { color: #FFFFFF; }
.mk-text-dark     { color: var(--mk-dark); }
.mk-text-muted    { color: var(--mk-text-muted); }

.mk-bg-primary    { background-color: var(--mk-primary); }
.mk-bg-dark       { background-color: var(--mk-dark); }
.mk-bg-warm       { background-color: var(--mk-bg-warm); }
.mk-bg-alt        { background-color: var(--mk-bg-alt); }

.mk-font-display  { font-family: var(--mk-font-display); }
.mk-font-body     { font-family: var(--mk-font-body); }
.mk-font-accent   { font-family: var(--mk-font-accent); }

.mk-uppercase     { text-transform: uppercase; letter-spacing: var(--mk-tracking-wider); }

.mk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.mk-relative { position: relative; }
.mk-overflow-hidden { overflow: hidden; }

/* --------------------------------------------------------------------------
   13. Responsive Breakpoints
   -------------------------------------------------------------------------- */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  :root {
    --mk-text-hero:        3.5rem;
    --mk-text-6xl:         3rem;
    --mk-text-5xl:         2.5rem;
    --mk-section-lg:       5rem;
    --mk-section-xl:       7.5rem;
    --mk-header-height:    70px;
  }

  .mk-grid--3,
  .mk-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .mk-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mk-space-8);
  }

  .mk-things-to-know {
    grid-template-columns: 1fr;
  }

  .mk-card--horizontal {
    grid-template-columns: 1fr;
  }

  .mk-nav,
  .mk-header__cta {
    display: none;
  }

  .mk-mobile-toggle {
    display: flex;
  }

  .mk-gallery-grid {
    grid-template-columns: 1fr 1fr;
    max-height: 360px;
  }

  .mk-gallery-grid__item:first-child {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .mk-host-info {
    grid-template-columns: 1fr;
    gap: var(--mk-space-6);
  }
}

/* Mobile (max-width: 640px) */
@media (max-width: 640px) {
  :root {
    --mk-text-hero:        2.5rem;
    --mk-text-6xl:         2.25rem;
    --mk-text-5xl:         2rem;
    --mk-text-4xl:         1.75rem;
    --mk-text-3xl:         1.5rem;
    --mk-section-lg:       3.75rem;
    --mk-section-xl:       5rem;
    --mk-container-padding: 1rem;
    --mk-header-height:    var(--mk-header-height-mobile);
  }

  .mk-grid--2,
  .mk-grid--3,
  .mk-grid--4 {
    grid-template-columns: 1fr;
  }

  .mk-footer__grid {
    grid-template-columns: 1fr;
  }

  .mk-search-bar {
    flex-direction: column;
    border-radius: var(--mk-radius-xl);
  }

  .mk-search-bar__field {
    border-right: none;
    border-bottom: 1px solid var(--mk-border-light);
  }

  .mk-search-bar__submit .mk-btn {
    border-radius: 0 0 var(--mk-radius-xl) var(--mk-radius-xl);
    width: 100%;
  }

  .mk-gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    max-height: none;
  }

  .mk-gallery-grid__item:first-child {
    grid-column: auto;
  }

  .mk-gallery-grid__item:nth-child(n+4) {
    display: none;
  }

  .mk-amenities {
    grid-template-columns: 1fr;
  }

  .mk-feature-box {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .mk-booking-widget {
    position: static;
    border-radius: var(--mk-radius-xl);
    margin-top: var(--mk-space-8);
  }

  .mk-back-to-top {
    bottom: var(--mk-space-4);
    right: var(--mk-space-4);
    width: 40px;
    height: 40px;
  }
}

/* --------------------------------------------------------------------------
   14. WordPress Core Overrides
   -------------------------------------------------------------------------- */

/* ── WordPress Alignment ── */
.alignwide {
  max-width: var(--mk-container-2xl);
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
  margin-right: var(--mk-space-6);
  margin-bottom: var(--mk-space-4);
}

.alignright {
  float: right;
  margin-left: var(--mk-space-6);
  margin-bottom: var(--mk-space-4);
}

/* ── WordPress Gallery ── */
.gallery {
  display: grid;
  gap: var(--mk-space-4);
}

.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }

.gallery-item img {
  border-radius: var(--mk-radius-md);
}

/* ── WordPress Forms ── */
.wp-block-search__input,
.wp-block-search__button,
.comment-form input,
.comment-form textarea {
  font-family: var(--mk-font-body);
}

/* ── WordPress Navigation ── */
.wp-block-navigation a {
  font-family: var(--mk-font-body);
}

/* ── Sticky Post ── */
.sticky .mk-card {
  border-left: 3px solid var(--mk-primary);
}

/* ── Screen Reader Text (WP compat) ── */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --------------------------------------------------------------------------
   15. Print Styles
   -------------------------------------------------------------------------- */

@media print {
  .mk-header,
  .mk-footer,
  .mk-back-to-top,
  .mk-preloader,
  .mk-booking-widget {
    display: none !important;
  }

  body {
    color: #000 !important;
    background: #fff !important;
  }

  a { color: #000 !important; }

  .mk-container { max-width: 100%; }
}