/*
Theme Name: PārthaOS - WP Theme- Mercury Stay
Theme URI: https://prdigitalsolutions.org/
Author: PR Digital Solutions — MePremJagtap
Author URI: https://prdigitalsolutions.org/
Description: Expert-level luxury single-page WordPress theme. Dark-by-default, glassmorphism, marquee amenities, improved rooms.
Version: 1.2.1
Text Domain: mercury-stays-expert
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");

:root{
  --radius:14px;
  --card-shadow: 0 8px 30px rgba(2,6,23,0.6);
  --bg:#0b0d0f;
  --card:rgba(255,255,255,0.03);
  --glass:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.08);
  --accent:#d43b2a;
  --muted:#9aa1a6;
  --muted-2:rgba(255,255,255,0.72);
  --site-max:1200px;
  --transition-fast:200ms;
  --gallery-gap:0px;
}

/* ----------------------------------------------------
   Reset & Base
   ---------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  margin:0;color:#eee;background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x: hidden;
}
.ms-container{max-width:var(--site-max);margin:0 auto;padding:0 20px}

/* ----------------------------------------------------
   Header
   ---------------------------------------------------- */
.ms-header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  background:transparent;padding:12px 0;backdrop-filter:blur(10px);
  border-bottom: 1px solid transparent;
  transition:background 0.3s ease, border-color 0.3s ease;
}
.ms-header.scrolled{
  background:rgba(6,6,6,0.95);
  border-bottom: 1px solid var(--border);
}
.ms-header-inner{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.ms-logo img{height:42px;object-fit:contain}
.ms-nav{display:flex;gap:12px;align-items:center}

/* ----------------------------------------------------
   Hero (Desktop Default)
   ---------------------------------------------------- */
.ms-hero{
  min-height:75vh;
  background-size:cover; /* Desktop: Cover full area */
  background-position:center;
  display:flex;align-items:center;justify-content:center;
  position:relative;color:#fff;padding-top:80px;
}
.ms-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.8));z-index:1}
.ms-hero-content{
  position:relative;z-index:3;text-align:center;
  padding:40px;max-width:900px;width:100%;
}
.ms-hero-title{font-size:42px;font-weight:700;margin-bottom:10px;line-height:1.1}
.ms-hero-sub{font-size:18px;color:#ddd;margin-bottom:24px;font-weight:400}

/* ----------------------------------------------------
   Buttons
   ---------------------------------------------------- */
.ms-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;border-radius:10px;text-decoration:none;
  font-weight:600;transition:all 0.2s ease;cursor:pointer;
}
.ms-btn:hover{transform:translateY(-2px)}
.ms-btn-primary{background:var(--accent);color:#fff;border:1px solid var(--accent);box-shadow:0 4px 14px rgba(212,59,42,0.3)}
.ms-btn-outline{
  background:transparent;border:1px solid rgba(255,255,255,0.2);color:#fff;
}
.ms-btn-outline:hover{border-color:var(--accent);color:var(--accent)}

/* ----------------------------------------------------
   Amenities (Marquee on Mobile, Grid on Desktop)
   ---------------------------------------------------- */
.ms-section{padding:60px 0}
.ms-section-title{font-size:26px;margin-bottom:24px;text-align:center;font-weight:700}

.ms-amenities-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:16px;
}
.ms-amenity-card{
  background:var(--glass);border:1px solid var(--border);
  padding:20px;border-radius:12px;text-align:center;
  font-size:14px;color:#ddd;font-weight:500;
  transition:transform 0.2s;
}
.ms-amenity-card:hover{background:rgba(255,255,255,0.08);transform:translateY(-3px)}

/* Mobile Marquee Styles */
.ms-marquee-wrap{display:none;overflow:hidden;width:100%;position:relative;mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);}
.ms-marquee-track{
  display:flex;gap:16px;width:max-content;
  animation: ms-scroll 12s linear infinite;
}
.ms-marquee-item{
  flex:0 0 auto;padding:10px 20px;
  background:var(--glass);border:1px solid var(--border);
  border-radius:50px;color:#eee;font-size:13px;white-space:nowrap;
}
@keyframes ms-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  .ms-amenities-desktop { display: none !important; }
  .ms-marquee-wrap { display: block !important; }
}

/* ----------------------------------------------------
   Rooms
   ---------------------------------------------------- */
.ms-rooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ms-room-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:24px;text-align:center;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:border-color 0.3s;
}
.ms-room-card:hover{border-color:var(--accent)}
.ms-room-title{font-size:18px;font-weight:700;margin:0 0 8px;color:#fff}
.ms-room-desc{font-size:14px;color:var(--muted);margin:0 0 20px;flex-grow:1}
.ms-room-btn{width:100%;border:1px solid rgba(255,255,255,0.3); color: white;}

@media (max-width: 900px){
  .ms-rooms-grid{grid-template-columns:1fr; max-width: 400px; margin: 0 auto;}
}

/* ----------------------------------------------------
   Gallery
   ---------------------------------------------------- */
.ms-gallery-wrap{
  overflow:hidden;border-radius:12px;
  position:relative; width: 100%;
}
.ms-gallery-track{
  display:flex;
  width: 100%;
  transform:translateX(0);
  will-change:transform;
  transition: transform 400ms ease-out; 
}
.ms-gallery-item{
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}
.ms-gallery-item img{
  width:100%;
  height:60vh;
  object-fit:cover;
  display:block;
}
@media (max-width: 600px) {
  .ms-gallery-item img{height:45vh}
}

/* ----------------------------------------------------
   Contact
   ---------------------------------------------------- */
.ms-contact-box{
  background:var(--glass);border:1px solid var(--border);
  border-radius:16px;padding:30px;
}
input,textarea{
  width:100%;background:rgba(0,0,0,0.3);border:1px solid var(--border);
  color:#fff;padding:12px;border-radius:8px;margin-bottom:12px;font-family:inherit;
}
input:focus,textarea:focus{border-color:var(--accent);outline:none}
label{font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;display:block;color:var(--muted)}

/* ----------------------------------------------------
   Footer
   ---------------------------------------------------- */
.ms-footer{
  border-top:1px solid var(--border);
  padding:30px 0;
  background:#050505;
  font-size:13px;color:var(--muted);
}
.ms-footer-inner{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.ms-footer-left, .ms-footer-right, .ms-footer-center{flex:1}
.ms-footer-center{text-align:center}
.ms-footer-right{text-align:right; display:flex; gap:15px; justify-content:flex-end}
.ms-footer a{color:inherit;text-decoration:none;transition:color 0.2s}
.ms-footer a:hover{color:#fff}

@media (max-width: 767px){
  .ms-footer-inner{flex-direction:column;text-align:center;gap:15px}
  .ms-footer-right{justify-content:center}
  .ms-mobile-footer{display:flex !important}
  .ms-footer{padding-bottom: 80px;}
}

/* Sticky Mobile Footer */
.ms-mobile-footer{
  display:none;position:fixed;bottom:10px;left:10px;right:10px;
  z-index:999; gap:10px;
}
.ms-mobile-btn{
  flex:1;background:rgba(20,20,20,0.95);backdrop-filter:blur(8px);
  border:1px solid var(--border);color:#fff;padding:12px;
  border-radius:10px;text-align:center;text-decoration:none;font-size:18px;
}
.ms-mobile-btn.highlight{background:var(--accent);border-color:var(--accent)}

/* ----------------------------------------------------
   FIX: Mobile Hero Cropping
   ---------------------------------------------------- */
@media (max-width: 768px) {
  .ms-hero {
    /* Force Full Width Image at Top */
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    
    /* Change layout to stack: Image Top -> Text Bottom */
    display: block !important; /* Disable flex centering */
    height: auto !important;
    min-height: auto !important;
    
    /* Push text down by approx aspect ratio (16:9) of image */
    padding-top: 55vw !important; 
    padding-bottom: 40px !important;
  }

  .ms-hero-overlay {
    /* Gradient to blend image bottom into background */
    background: linear-gradient(to bottom, rgba(11,13,15,0) 30%, var(--bg) 50%) !important;
  }

  .ms-hero-content {
    margin-top: 10px !important;
    padding: 20px !important;
    /* Ensure text is visible on the dark background */
    background: transparent !important; 
  }

  .ms-hero-title {
    font-size: 32px !important;
  }
}