/* =========================================================
   MATWALE — Design tokens
   ========================================================= */
:root{
  --mw-cream:        #F8F5EF;
  --mw-cream-deep:    #F1ECE1;
  --mw-ink:           #1B2330;
  --mw-ink-soft:      #384254;
  --mw-navy-button:   #12181F;
  --mw-gold:          #AD8A54;
  --mw-gold-light:    #C9AC79;
  --mw-muted:         #6E7280;
  --mw-border:        #E6E0D2;
  --mw-white:         #FFFFFF;
  --mw-shadow:        0 18px 40px -18px rgba(27,35,48,.22);
  --mw-shadow-sm:     0 6px 16px -8px rgba(27,35,48,.18);
  --mw-radius-lg:     18px;
  --mw-radius-md:     10px;
  --mw-radius-full:   999px;
  --mw-max:           1240px;
  --mw-font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --mw-font-label:    'Jost', 'Poppins', Arial, sans-serif;
  --mw-font-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;
}

body.matwale{
  background: var(--mw-cream);
  color: var(--mw-ink);
  font-family: var(--mw-font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.mw-container{ max-width: var(--mw-max); margin: 0 auto; padding: 0 28px; }

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }

/* Visually-hidden (skip link / a11y labels) */
.mw-visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mw-skip-link{ position:absolute; left:-999px; top:0; background:var(--mw-navy-button); color:#fff; padding:12px 18px; z-index:999; border-radius:0 0 8px 0; }
.mw-skip-link:focus{ left:0; }

:focus-visible{ outline: 2px solid var(--mw-gold); outline-offset: 3px; }

/* =========================================================
   SITE HEADER (directory / global nav)
   ========================================================= */
.mw-site-header{
  border-bottom: 1px solid var(--mw-border);
  background: var(--mw-cream);
  position: sticky; top: 0; z-index: 40;
}
.mw-site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 28px;
}
.mw-brand{ display:flex; align-items:center; gap:10px; font-family: var(--mw-font-display); font-size: 1.35rem; letter-spacing:.03em; }
.mw-brand__mark{ width:30px; height:30px; color: var(--mw-gold); }
.mw-nav{ display:flex; gap:28px; flex-wrap:wrap; font-family: var(--mw-font-label); text-transform:uppercase; font-size:.78rem; letter-spacing:.12em; }
.mw-nav a{ opacity:.8; transition:opacity .2s; }
.mw-nav a:hover{ opacity:1; color:var(--mw-gold); }
.mw-menu-toggle{ display:none; background:none; border:1px solid var(--mw-border); border-radius:8px; padding:8px 10px; }
@media (max-width: 640px){
  .mw-site-header__inner{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* =========================================================
   HOTEL HERO (matches reference layout)
   ========================================================= */
.mw-hero{ text-align:center; padding: 64px 28px 40px; }
.mw-hero__crown{ width:46px; height:46px; margin:0 auto 18px; color: var(--mw-gold); }
.mw-hero__name{
  font-family: var(--mw-font-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing:.045em;
  margin: 0 0 10px;
  color: var(--mw-ink);
}
.mw-hero__tagline{
  font-family: var(--mw-font-label);
  text-transform: uppercase;
  letter-spacing:.28em;
  font-size:.9rem;
  color: var(--mw-gold);
  margin: 0 0 18px;
}
.mw-hero__rule{ width:64px; height:1px; background: var(--mw-border); margin: 0 auto 22px; }
.mw-hero__intro{ font-size:1.08rem; color: var(--mw-ink-soft); max-width:640px; margin:0 auto; }

/* =========================================================
   SPACE CARD GRID  (Deluxe Room / Executive Room / Suite ...)
   ========================================================= */
.mw-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  padding: 40px 28px 70px;
  max-width: var(--mw-max);
  margin: 0 auto;
}
@media (max-width: 980px){ .mw-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 660px){ .mw-grid{ grid-template-columns: 1fr; } }

.mw-card{
  background: var(--mw-white);
  border-radius: var(--mw-radius-lg);
  overflow: hidden;
  box-shadow: var(--mw-shadow-sm);
  display:flex; flex-direction:column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.mw-card:hover{ transform: translateY(-4px); box-shadow: var(--mw-shadow); }

.mw-card__media{
  position: relative;
  aspect-ratio: 4 / 3.1;
  background: var(--mw-ink);
  overflow:hidden;
}
.mw-card__media img{ width:100%; height:100%; object-fit:cover; }

.mw-card__badge{
  position:absolute; top:16px; left:16px;
  background: rgba(18,24,31,.82);
  color:#fff;
  font-family: var(--mw-font-label);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding: 8px 14px;
  border-radius: var(--mw-radius-full);
}

.mw-card__tour{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  background: linear-gradient(180deg, rgba(10,14,20,0) 55%, rgba(10,14,20,.35) 100%);
  opacity:0; transition:opacity .25s ease;
}
.mw-card:hover .mw-card__tour,
.mw-card:focus-within .mw-card__tour{ opacity:1; }
.mw-card__tour-ring{
  width:64px; height:64px; border-radius:50%;
  border: 1.5px solid rgba(255,255,255,.85);
  background: rgba(15,20,27,.45);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mw-font-label); font-weight:600; font-size:.8rem;
}
.mw-card__tour-label{
  color:#fff; font-family: var(--mw-font-label); text-transform:uppercase;
  letter-spacing:.14em; font-size:.75rem;
}

.mw-card__body{ padding: 18px 20px 20px; display:flex; flex-direction:column; gap:16px; flex:1; }
.mw-card__meta{ display:flex; flex-wrap:wrap; gap:16px; font-size:.85rem; color: var(--mw-muted); }
.mw-card__meta span{ display:flex; align-items:center; gap:6px; }
.mw-card__meta svg{ width:16px; height:16px; color: var(--mw-gold); flex-shrink:0; }

.mw-btn{
  display:flex; align-items:center; justify-content:center;
  background: var(--mw-navy-button); color:#fff;
  font-family: var(--mw-font-label); text-transform:uppercase; letter-spacing:.14em;
  font-size:.78rem; padding:15px 18px; border-radius: 10px;
  border:none; width:100%; margin-top:auto;
  transition: background .2s ease;
}
.mw-btn:hover{ background:#1f2733; color:#fff; }
.mw-btn--ghost{ background:transparent; border:1px solid var(--mw-navy-button); color:var(--mw-navy-button); }
.mw-btn--ghost:hover{ background: var(--mw-navy-button); color:#fff; }
.mw-btn--gold{ background: var(--mw-gold); }
.mw-btn--gold:hover{ background:#96754a; }

/* =========================================================
   HOTEL DIRECTORY (archive of hotel listings)
   ========================================================= */
.mw-hotel-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 28px;
  padding: 20px 28px 70px; max-width: var(--mw-max); margin:0 auto;
}
@media (max-width: 760px){ .mw-hotel-grid{ grid-template-columns:1fr; } }
.mw-hotel-card{ background:#fff; border-radius: var(--mw-radius-lg); overflow:hidden; box-shadow: var(--mw-shadow-sm); }
.mw-hotel-card__img{ aspect-ratio: 16/9; overflow:hidden; }
.mw-hotel-card__img img{ width:100%; height:100%; object-fit:cover; }
.mw-hotel-card__body{ padding:22px 24px 26px; }
.mw-hotel-card__name{ font-family: var(--mw-font-display); font-size:1.5rem; margin:0 0 6px; }
.mw-hotel-card__loc{ color: var(--mw-muted); font-size:.92rem; margin:0 0 14px; display:flex; gap:8px; align-items:center; }

/* =========================================================
   FOOTER — 3 columns + copyright bottom bar
   ========================================================= */
.mw-footer{ border-top:1px solid var(--mw-border); margin-top:20px; }
.mw-footer__top{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:40px;
  padding: 54px 28px 40px;
}
@media (max-width: 780px){ .mw-footer__top{ grid-template-columns: 1fr; gap:32px; } }

.mw-footer__col h4{
  font-family: var(--mw-font-label); text-transform:uppercase; letter-spacing:.1em;
  font-size:.82rem; color: var(--mw-ink); margin: 0 0 16px;
}
.mw-footer__col--brand .mw-brand{ margin-bottom:14px; }
.mw-footer__text{ color: var(--mw-muted); font-size:.92rem; line-height:1.6; margin:0; }
.mw-footer__col--brand .mw-footer__text{ margin-top:6px; }

.mw-footer__links-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.mw-footer__links-list a{ color: var(--mw-ink-soft); font-size:.94rem; }
.mw-footer__links-list a:hover{ color: var(--mw-gold); }

.mw-footer__col .mw-contact-row{ font-size:.92rem; margin-bottom:12px; }

.mw-footer__social{ display:flex; gap:14px; margin-top:16px; }
.mw-footer__social a{
  font-family: var(--mw-font-label); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--mw-ink-soft); border:1px solid var(--mw-border); border-radius: var(--mw-radius-full); padding:6px 14px;
}
.mw-footer__social a:hover{ color: var(--mw-gold); border-color: var(--mw-gold); }

.mw-footer__bottom{ border-top:1px solid var(--mw-border); background: var(--mw-cream-deep); }
.mw-footer__bottom-inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding: 18px 28px;
}
.mw-footer__copyright{ font-size:.82rem; color: var(--mw-muted); }
.mw-footer__powered{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mw-font-label); text-transform:uppercase; letter-spacing:.12em;
  font-size:.72rem; color: var(--mw-muted);
}
.mw-footer__mark{ width:18px; height:18px; color: var(--mw-ink); }
@media (max-width: 480px){ .mw-footer__bottom-inner{ flex-direction:column; text-align:center; } }

/* =========================================================
   SINGLE SPACE — Virtual tour page
   ========================================================= */
.mw-tour-hero{ background: var(--mw-ink); position:relative; }
.mw-tour-stage{
  width:100%; aspect-ratio: 16/8; background:#0c1015; position:relative; overflow:hidden;
}
.mw-tour-stage iframe, .mw-tour-stage .mw-pano{ width:100%; height:100%; border:0; }
.mw-tour-stage__empty{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color: rgba(255,255,255,.7); gap:10px; font-family: var(--mw-font-label); letter-spacing:.08em;
}
.mw-tour-badge{
  position:absolute; bottom:18px; left:18px; z-index:5;
  background: rgba(12,16,21,.72); color:#fff; padding:8px 14px; border-radius: var(--mw-radius-full);
  font-family: var(--mw-font-label); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  display:flex; align-items:center; gap:8px;
}

.mw-tour-body{ padding: 46px 28px 30px; max-width: var(--mw-max); margin:0 auto; display:grid; grid-template-columns: 2fr 1fr; gap:48px; }
@media (max-width: 900px){ .mw-tour-body{ grid-template-columns:1fr; } }

.mw-space-title{ font-family: var(--mw-font-display); font-size:2.1rem; margin:0 0 6px; }
.mw-space-location{ color: var(--mw-gold); font-family: var(--mw-font-label); letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; margin-bottom:20px; }
.mw-space-meta-row{ display:flex; gap:26px; flex-wrap:wrap; padding:18px 0; border-top:1px solid var(--mw-border); border-bottom:1px solid var(--mw-border); margin:20px 0 26px; }
.mw-space-meta-row span{ display:flex; align-items:center; gap:8px; color: var(--mw-ink-soft); font-size:.92rem; }
.mw-space-meta-row svg{ width:18px; height:18px; color:var(--mw-gold); }
.mw-space-desc{ color: var(--mw-ink-soft); font-size:1.02rem; }
.mw-space-amenities{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.mw-amenity-pill{ border:1px solid var(--mw-border); border-radius: var(--mw-radius-full); padding:7px 14px; font-size:.82rem; color:var(--mw-ink-soft); }

.mw-gallery{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-top:30px; }
.mw-gallery img{ aspect-ratio:1/1; object-fit:cover; border-radius:8px; cursor:zoom-in; transition:opacity .2s; }
.mw-gallery img:hover{ opacity:.85; }
@media (max-width:600px){ .mw-gallery{ grid-template-columns: repeat(3,1fr); } }

.mw-video-wrap{ margin-top:30px; aspect-ratio:16/9; border-radius: var(--mw-radius-md); overflow:hidden; background:#000; }
.mw-video-wrap iframe, .mw-video-wrap video{ width:100%; height:100%; border:0; display:block; }

.mw-side-card{ background:#fff; border:1px solid var(--mw-border); border-radius: var(--mw-radius-lg); padding:24px; margin-bottom:22px; }
.mw-side-card h3{ font-family: var(--mw-font-display); font-size:1.15rem; margin:0 0 14px; }
.mw-contact-row{ display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--mw-ink-soft); margin-bottom:12px; }
.mw-contact-row svg{ width:18px; height:18px; color:var(--mw-gold); flex-shrink:0; margin-top:2px; }
.mw-map-embed{ width:100%; aspect-ratio:4/3; border-radius: var(--mw-radius-md); overflow:hidden; border:1px solid var(--mw-border); }
.mw-map-embed iframe{ width:100%; height:100%; border:0; }

/* Lightbox */
.mw-lightbox{ position:fixed; inset:0; background:rgba(10,14,19,.92); display:none; align-items:center; justify-content:center; z-index:999; padding:30px; }
.mw-lightbox.is-open{ display:flex; }
.mw-lightbox img{ max-width:100%; max-height:88vh; border-radius:8px; }
.mw-lightbox__close{ position:absolute; top:22px; right:28px; color:#fff; background:none; border:0; font-size:1.6rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mw-card, .mw-card__tour, .mw-gallery img{ transition:none; }
}

/* =========================================================
   AUTH — Login / Registration forms
   ========================================================= */
.mw-auth-wrap{ display:flex; justify-content:center; padding: 10px 28px 80px; }
.mw-auth-card{ background:#fff; border:1px solid var(--mw-border); border-radius: var(--mw-radius-lg); padding: 34px 32px; width:100%; max-width:440px; box-shadow: var(--mw-shadow-sm); }
.mw-auth-form{ display:flex; flex-direction:column; gap:14px; }
.mw-auth-form label{ font-family: var(--mw-font-label); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--mw-ink-soft); margin-bottom:-6px; }
.mw-auth-form input[type=text], .mw-auth-form input[type=email], .mw-auth-form input[type=password]{
  padding: 12px 14px; border:1px solid var(--mw-border); border-radius:8px; font-family: var(--mw-font-body); font-size:.95rem;
}
.mw-auth-form input:focus{ outline:2px solid var(--mw-gold); outline-offset:1px; border-color:var(--mw-gold); }
.mw-auth-check{ flex-direction:row !important; align-items:center; gap:8px; text-transform:none !important; letter-spacing:0 !important; font-family:var(--mw-font-body) !important; font-size:.9rem !important; color:var(--mw-ink-soft); }
.mw-auth-form .mw-btn{ margin-top:6px; }
.mw-auth-switch{ text-align:center; margin-top:20px; font-size:.9rem; color: var(--mw-muted); }
.mw-auth-switch a{ color: var(--mw-gold); font-weight:600; }
.mw-auth-notice{ padding:12px 16px; border-radius:8px; font-size:.9rem; margin-bottom:18px; max-width:440px; }
.mw-auth-notice--error{ background:#fbe9e5; color:#8a3324; }
.mw-auth-notice--success{ background:#e9f3ea; color:#2c5f34; }

/* =========================================================
   DASHBOARD — Hotel Owner's front-end hub
   ========================================================= */
.mw-dashboard{ padding-bottom: 80px; max-width: 920px; }
.mw-dashboard__stats{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding: 10px 0 34px; }
.mw-dashboard__stat{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--mw-border); border-radius: var(--mw-radius-md); padding:14px 22px; min-width:100px; }
.mw-dashboard__stat strong{ font-family: var(--mw-font-display); font-size:1.6rem; }
.mw-dashboard__stat span{ font-family: var(--mw-font-label); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color: var(--mw-muted); }
.mw-dashboard__section-title{ font-family: var(--mw-font-display); font-size:1.3rem; margin: 30px 0 14px; }
.mw-dashboard__table{ background:#fff; border:1px solid var(--mw-border); border-radius: var(--mw-radius-md); overflow:hidden; }
.mw-dashboard__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--mw-border); flex-wrap:wrap; }
.mw-dashboard__row:last-child{ border-bottom:none; }
.mw-dashboard__title{ font-weight:600; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mw-dashboard__type{ font-style:normal; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--mw-gold); }
.mw-dashboard__hotel{ font-size:.8rem; color: var(--mw-muted); }
.mw-dashboard__status{ font-family: var(--mw-font-label); text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; padding:5px 10px; border-radius: var(--mw-radius-full); background: var(--mw-cream-deep); color: var(--mw-ink-soft); }
.mw-dashboard__status--publish{ background:#e9f3ea; color:#2c5f34; }
.mw-dashboard__status--draft{ background:#f3ecd8; color:#8a6d2e; }
.mw-dashboard__actions a{ color: var(--mw-ink-soft); font-size:.88rem; }
.mw-dashboard__actions a:hover{ color: var(--mw-gold); }