/* ==============================================================
   MANALI HAVELI — Main Stylesheet
   Inspired by Basilico restaurant template aesthetic
   ============================================================== */

/* ---- Font variables ---- */
:root {
    --font-primary:   'Gilda Display', serif;
    --font-secondary: 'Barlow Condensed', sans-serif;
}

.font-primary   { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); }

/* ---- Button overrides (Basilico-style) ---- */
.darkButton,
.roomsButton {
    font-weight: 400;
    text-transform: uppercase;
    background: var(--CrTe);
    padding: 13px 28px;
    margin: 0;
    font-size: 13px;
    letter-spacing: 3px;
    border: 1px solid rgba(255,255,255,.35);
    font-family: var(--font-secondary);
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.darkButton:after,
.roomsButton:after {
    content: '';
    left: 100%;
    z-index: 1;
    bottom: 0;
    width: 0;
    height: 100%;
    position: absolute;
    transition: width .3s;
}

.roomsButton { color: #fff; }
.roomsButton:after  { background: #fff; }
.roomsButton:hover span { color: #222; }

.darkButton { color: #fff; cursor: pointer; }
.darkButton:after  { background: #000; }
.darkButton:hover span { color: #fff !important; }

.darkButton:hover:after,
.roomsButton:hover:after { width: 100%; left: 0; }

.darkButton span,
.roomsButton span { position: relative; z-index: 2; }

/* ---- Section decoration ---- */
.LineDiv {
    width: 60px;
    height: 2px;
    margin: 14px 0 8px;
    background: var(--CrTe);
    display: block;
    border: none;
}

.section-title {
    font-family: var(--font-primary);
    color: #1a1a1a;
    line-height: 1.2em;
}

.section-subtitle {
    font-family: var(--font-secondary);
    color: var(--CrTe);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 14px;
}

/* ---- Utility aliases ---- */
.LeHt  { line-height: 1.25em; }
.CrOe  { color: #e8a020; }
.CrWe  { color: #ffffff; }
.CrTe  { color: var(--CrTe); }
.CrBk  { color: #222222; }
.CrRd  { color: #e53e3e; }
.CrBdWe { background-color: #ffffff; }
.Mn0   { margin: 0; }
.Pg0   { padding: 0; }
.MnBm5  { margin-bottom: 5px; }
.MnBm8  { margin-bottom: 8px; }
.MnBm10 { margin-bottom: 10px; }
.MnBm12 { margin-bottom: 12px; }
.MnBm15 { margin-bottom: 15px; }
.MnBm20 { margin-bottom: 20px; }
.MnBm25 { margin-bottom: 25px; }
.MnBm30 { margin-bottom: 30px; }
.MnBm40 { margin-bottom: 40px; }
.MnTp40 { margin-top: 40px; }
.MnTpBm10 { margin-top: 10px; margin-bottom: 10px; }
.MnTpBm15 { margin-top: 15px; margin-bottom: 15px; }
.MnTpBm20 { margin-top: 20px; margin-bottom: 20px; }
.MnTp15 { margin-top: 15px; }
.MnTp20 { margin-top: 20px; }

/* ---- Hero slider animations ---- */
.heroSection { animation: 1.5s ease-out heroSection; }

@keyframes heroSection {
    from { transform: translateY(50px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ---- Slide show engine ---- */
.SlideContainer { -ms-overflow-style: none; scrollbar-width: none; }
.SlideContainer::-webkit-scrollbar { display: none; }

/* ---- Restaurant section slide-in ---- */
.restaurantSection .Fx1 {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity .8s ease-out, transform .8s ease-out;
}
.restaurantSection .Fx1.right { transform: translateX(100px); overflow: hidden; }
.restaurantSection .Fx1.show  { opacity: 1; transform: translateX(0); }

/* ---- Facility card wave animation ---- */
.facilityCard { opacity: 0; transform: translateY(100px); }
.facilityCard.visible { animation: wave .8s ease-out forwards; }

@keyframes wave {
    0%   { transform: translateY(100px); opacity: 0; }
    50%  { transform: translateY(-10px); opacity: 1; }
    100% { transform: translateY(0);     opacity: 1; }
}
.cardFirstRow  .facilityCard:nth-child(1).visible,
.cardSecondRow .facilityCard:nth-child(1).visible { animation-delay: 0s; }
.cardFirstRow  .facilityCard:nth-child(2).visible,
.cardSecondRow .facilityCard:nth-child(2).visible { animation-delay: .2s; }
.cardFirstRow  .facilityCard:nth-child(3).visible,
.cardSecondRow .facilityCard:nth-child(3).visible { animation-delay: .4s; }

/* ---- Video button pulse ---- */
#promotionalVideoButton {
    transition: transform .3s ease-in-out, color .3s ease-in-out;
}
#promotionalVideoButton:hover {
    transform: scale(1.2);
    color: #e53e3e;
}

/* ---- Nav book button ---- */
.mhNavBookBtn { padding: 10px 18px !important; font-size: 13px !important; }

/* ---- About badge ---- */
.mhAboutBadge {
    bottom: 16px;
    right: -10px;
    background: var(--CrTe);
    padding: 16px 20px;
    min-width: 100px;
}

/* ---- Why choose us list ---- */
.mhWhyList { list-style: none; padding: 0; margin: 0; }
.mhWhyList li {
    padding: 4px 0 4px 24px;
    position: relative;
    line-height: 1.75;
    color: #8a8070 !important;
    border-bottom: none !important;
    background: transparent !important;
}
.mhWhyList li:hover {
    background: transparent !important;
    color: #a09080 !important;
}
.mhWhyList li::before {
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--CrTe);
}

/* ---- Chef cards ---- */
.mhChefCard { border: 1px solid #ede8e3; transition: box-shadow .3s; }
.mhChefCard:hover { box-shadow: 0 8px 30px rgba(0,0,0,.10); }
.mhChefImgWrap { height: 280px; overflow: hidden; }
.mhChefImg { height: 100%; transition: transform .6s ease; }
.mhChefCard:hover .mhChefImg { transform: scale(1.05); }
.mhChefOverlay { background: rgba(0,0,0,0); transition: background .3s; }
.mhChefCard:hover .mhChefOverlay { background: rgba(0,0,0,.15); }

/* ---- Testimonials ---- */
.mhTestiAvatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

/* ---- Reservation form inputs ---- */
.mhResInput {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e8e3de;
    background: #faf9f7;
    outline: none;
    transition: border-color .25s, box-shadow .25s;
    color: #222;
    font-family: var(--font-secondary);
}
.mhResInput:focus {
    border-color: var(--CrTe);
    box-shadow: 0 0 0 3px rgba(202,208,38,.15);
}

/* ---- Gallery hover overlay ---- */
.mhGalleryImg { transition: transform .6s ease; }
.mhGalleryItem:hover .mhGalleryImg { transform: scale(1.08); }
.mhGalleryHover {
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 60%);
    opacity: 0;
    transition: opacity .35s;
}
.mhGalleryItem:hover .mhGalleryHover { opacity: 1; }

/* ---- Rooms & suites cards ---- */
.roomsAndSuitesCard { position: relative; overflow: hidden; }
.roomsAndSuitesCardImage { transition: transform .7s ease-in-out; }
.roomsAndSuitesCard:hover .roomsAndSuitesCardImage {
    transform: scale(1.05);
    filter: brightness(30%);
}
.roomAndSuitesBottomContent {
    transform: translateY(20%);
    transition: transform .3s ease-in-out;
}
.roomsAndSuitesCard:hover .roomAndSuitesBottomContent { transform: translateY(0); }
.roomAndSuitesBottomContentIcons { opacity: 0; transition: opacity .3s ease-in-out; }
.roomsAndSuitesCard:hover .roomAndSuitesBottomContentIcons { opacity: 1; }
.roomsAndSuitesCardHr { transition: width .7s ease-in-out; }
.roomsAndSuitesCard:hover .roomsAndSuitesCardHr { width: 100%; }

/* ---- News/blog card hover ---- */
.OurNews img, .restaurantSection img { transition: transform .3s ease-in-out; }
.OurNews img:hover, .restaurantSection img:hover {
    transform: scale(1.05);
    transform-origin: center;
}
.OurNews .cardContainer {
    transform: translateY(20%);
    transition: transform .3s ease-in-out;
}
.OurNews .SlideImage:hover .cardContainer { transform: translateY(-50%); }

/* ---- Hover nav link underline effect ---- */
.FrLkCr a { position: relative; }
.FrLkCr a::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background-color: #f8f5f0;
    transition: width .3s;
}
.FrLkCr a:hover::after { width: 100%; }
.FrLkCr a:hover { color: #f8f5f0 !important; }
.FrLkCr a, .JsHrDv:hover * { color: #fff !important; }

/* ---- JsHrDv dropdown item ---- */
.JsHrDv {
    font-family: var(--font-secondary);
    background-color: #fff;
    color: #222;
    transition: .3s;
}
.JsHrDv:hover { background-color: var(--CrTe) !important; }

/* ---- Slide animations ---- */
.SFade   { animation: fade .8s; }
.SLeftIn { animation: SLeftIn .6s; }
.SRightIn{ animation: SRightIn .8s; }
.SZoomOut{ animation: ScaleOut .6s; }
.SZoomIn { animation: ScaleIn .8s; }
.SAngular{ animation: SAngular .9s; }
.SColor  { animation: SColor 2s; }
.slideDownFadeIn { animation: .5s ease-out slideDownFadeIn; }

@keyframes fade {
    from { opacity: .6; }
    to   { opacity: 1; }
}
@keyframes SLeftIn {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
@keyframes SRightIn {
    from { transform: translateX(50%); }
    to   { transform: translateX(0); }
}
@keyframes ScaleOut {
    from { transform: scale(95%); }
    to   { transform: scale(100%); }
}
@keyframes ScaleIn {
    from { transform: scale(120%); }
    to   { transform: scale(100%); }
}
@keyframes SAngular {
    0%   { transform: scale(150%) skew(-8deg,-8deg); opacity: .5; filter: blur(1px) hue-rotate(45deg); }
    100% { transform: scale(100%) skew(0,0);         opacity: 1; filter: blur(0) hue-rotate(0); }
}
@keyframes SColor {
    0%   { filter: grayscale(100%); opacity: .5; }
    100% { filter: grayscale(0%);   opacity: 1; }
}
@keyframes slideDownFadeIn {
    0%   { transform: translateY(-100px); opacity: 0; }
    100% { transform: translateY(0);      opacity: 1; }
}

/* ---- Misc utility ---- */
.InBd {
    font-size: 10px; border: none; border-radius: 100%;
    cursor: pointer; padding: 3px; transition: .4s ease-in-out;
}
.JsAeRwCr:nth-child(odd)  { background-color: #F8F5F0 !important; }
.JsAeRwCr:nth-child(even) { background-color: #ffffff !important; }
.JsSeCr { color: #666; }
.CrBrJsDv { border-color: #f1eeeb !important; margin-top: -1px; }

/* ---- Table strip ---- */
.TeBr td { border: 1px solid #ddd; padding: 8px; }
.TeBr tr:nth-child(odd)  { background-color: hsl(34deg 100% 95.86%); }
.TeBr tr:hover { background-color: hsl(34deg 100% 80.86%); }
.TeStrip { border-collapse: collapse; width: 100%; text-align: left; }
.IccTn, .TeBr th { display: none; }
.icc:hover .IccTn { display: block; }

/* ---- Fancy gradient divider ---- */
.LineThemeFadeDiv {
    display: block;
    height: 1px;
    width: 94%;
    margin: 3px;
    background-image: linear-gradient(to right, rgba(255,0,0,0), var(--CrTe), rgba(255,0,0,0));
}

/* ---- Popup/loader ---- */
#popup, .loader {
    position: fixed; top: 0; left: 0;
    height: 100%; display: flex; width: 100%;
}
.loader {
    background-color: var(--CrBdTt30);
    overflow: hidden;
    align-items: center; justify-content: center;
    z-index: 9999999999;
}
.loader__element {
    border-radius: 100%;
    border: 5px solid var(--CrTe);
    margin: 10px;
}
.loader__element:first-child    { animation: .6s ease-in-out infinite alternate preloader; }
.loader__element:nth-child(2)   { animation: .6s ease-in-out .2s infinite alternate preloader; }
.loader__element:nth-child(3)   { animation: .6s ease-in-out .4s infinite alternate preloader; }

/* ---- Text clamp helpers ---- */
.TtOrFwVeLe1, .TtOrFwVeLe2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.TtOrFwVeLe1 { -webkit-line-clamp: 1; }
.TtOrFwVeLe2 { -webkit-line-clamp: 2; }

/* ==============================================================
   TOP INFO BAR (Basilico-style)
   ============================================================== */
.mhTopBar {
    background-color: #1a1710;
    padding: 9px 0;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100001;
}
.mhTopBarInner { width: 90%; flex-wrap: wrap; gap: 12px; }
.mhTopBarItem  { color: #a09880; font-size: 13px; gap: 8px; white-space: nowrap; }
.mhTopBarItem i { color: var(--CrTe); font-size: 12px; }

/* Push nav down by top-bar height */
header .nav   { top: 37px !important; }

/* Adjust hero section so it starts below topbar + nav */
#mhHero       { padding-top: 0; }

@media (max-width: 768px) {
    .mhTopBar          { display: none !important; }
    header .nav        { top: 0 !important; }
    .mhTopBarHide      { display: none !important; }
}

/* ==============================================================
   HERO SLIDER  (clean stacking, no CTScript conflict)
   ============================================================== */
.mhHeroSlideWrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.mhHeroSlideContainer {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Each slide stacks absolutely so only the visible one shows */
.mhSlideUT {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    display: none;
}
.mhSlideUT:first-child { display: block; }

/* Slide image wrapper — explicit 100vh so children can use % positioning */
.mhSlideImage {
    position: relative;
    width: 100%;
    height: 100vh;
}

/* Hero text overlay — flex-centred so animation doesn't break position */
.mhSlideImage .heroSection {
    position: absolute;
    top: 0; left: 0;
    width: 90%;
    left: 5%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 130px; /* clear fixed topbar (38px) + navbar (90px) */
    transform: none !important;
    animation: 1.5s ease-out mhHeroIn;
}

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

/* ==============================================================
   ABOUT SECTION — single large image (Basilico style)
   ============================================================== */
.mhAboutImgWrap  { min-height: 480px; }
.mhAboutMainImg  { height: 520px; object-fit: cover; display: block; width: 100%; }

/* Small overlay thumbnail image (bottom-right corner) */
.mhAboutSmallImg {
    position: absolute;
    bottom: -30px;
    right: -20px;
    width: 200px;
    height: 160px;
    border: 5px solid #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.mhAboutBadge {
    bottom: 24px;
    left: 24px;
    background: var(--CrTe);
    padding: 18px 22px;
    min-width: 110px;
}

@media (max-width: 768px) {
    .mhAboutImgWrap  { min-height: 300px; margin-bottom: 50px; }
    .mhAboutMainImg  { height: 320px; }
    .mhAboutSmallImg { display: none; }
    .mhAboutBadge    { bottom: 16px; left: 16px; }
    /* Prevent row negative gutters from clipping text on mobile */
    #mhAbout .container { overflow: hidden; padding-left: 20px; padding-right: 20px; }
    #mhAbout .row       { margin-left: 0; margin-right: 0; }
}

/* ==============================================================
   MENU CARDS — larger image (Basilico style)
   ============================================================== */
.mhMenuItemImgLg {
    width: 120px !important;
    height: 120px !important;
    border-radius: 4px;
    flex-shrink: 0;
    object-fit: cover;
}

/* ==============================================================
   FOOTER CONTACT ITEMS
   ============================================================== */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #8a8278;
    line-height: 1.7;
}
.footer-contact-icon {
    color: var(--CrTe);
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}
.fh-open { color: var(--CrTe) !important; }

/* ==============================================================
   FOOTER  (Basilico-inspired multi-column layout)
   ============================================================== */
.mh-footer {
    background-color: #1a1710;
    color: #a09880;
    padding: 70px 0 0;
    font-family: var(--font-secondary);
}

.mh-footer .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Footer logo */
.footer-logo {
    font-family: var(--font-primary);
    font-size: 26px;
    color: #fff;
    letter-spacing: 3px;
    margin-bottom: 16px;
}
.footer-logo span { color: var(--CrTe); }

/* Footer description text */
.footer-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #7a736a;
    margin-bottom: 24px;
}

/* Heading inside footer columns */
.footer-heading {
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 12px;
}
.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 36px; height: 2px;
    background: var(--CrTe);
}

/* Opening hours rows */
.footer-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: 14px;
}
.fh-day  { color: #7a736a; }
.fh-time { color: #c8c0b0; font-weight: 600; }

/* Social links */
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.social-link {
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,.2);
    color: #a09880 !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    transition: background .25s, border-color .25s, color .25s;
    text-decoration: none;
}
.social-link:hover {
    background: var(--CrTe);
    border-color: var(--CrTe);
    color: #111 !important;
}

/* Newsletter */
.newsletter-form {
    display: flex;
    border: 1px solid rgba(255,255,255,.15);
}
.newsletter-input {
    flex: 1;
    background: rgba(255,255,255,.05);
    border: none;
    color: #fff;
    padding: 12px 16px;
    font-family: var(--font-secondary);
    font-size: 14px;
    outline: none;
}
.newsletter-input::placeholder { color: #6a6460; }
.newsletter-btn {
    background: var(--CrTe);
    border: none;
    color: #111;
    width: 48px;
    font-size: 18px;
    cursor: pointer;
    transition: background .25s;
    flex-shrink: 0;
}
.newsletter-btn:hover { background: hsl(62deg 69% 58%); }

/* Footer bottom bar */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 0;
    margin-top: 50px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.footer-copy {
    font-size: 13px;
    color: #5a5450;
    margin: 0;
}
.footer-copy a { color: var(--CrTe) !important; text-decoration: none; }
.footer-copy a:hover { text-decoration: underline; }
.footer-bottom-links {
    display: flex;
    gap: 24px;
}
.footer-bottom-links a {
    font-size: 12px;
    color: #5a5450 !important;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color .25s;
}
.footer-bottom-links a:hover { color: var(--CrTe) !important; }

/* Footer row/grid override — Bootstrap col adjustments inside dark footer */
.mh-footer .row { margin-bottom: 0; }

/* ==============================================================
   RESPONSIVE
   ============================================================== */
@media (max-width: 990px) {
    .mhChefsWrap { flex-wrap: wrap; }
    .mhChefsWrap > div { min-width: calc(50% - 12px); }
}

@media (max-width: 768px) {
    .mhAboutWrap { flex-direction: column !important; }
    .mhAboutWrap > div:first-child { flex-direction: column !important; margin-top: 0 !important; }
    .mhAboutWrap > div:first-child > div { margin: 0 !important; }
    .mhAboutWrap > div:last-child { padding-left: 0 !important; margin-top: 24px; }

    .mhWhyPanelWrap { flex-direction: column !important; }
    .mhWhyPanelWrap > div:last-child { padding-left: 0 !important; margin-top: 20px; }
    .mhWhyImg { width: 100%; height: 260px; }

    .mhChefsWrap { flex-direction: column !important; }

    .mhResWrap  { flex-direction: column !important; }
    .mhResFormGrid { grid-template-columns: 1fr !important; }
    .mhResInfo  { margin-top: 30px; }

    .mhLocationWrap { flex-direction: column !important; }
    .mhMapWrap { width: 100%; }

    #mhTestimonials > div:first-child { width: 95% !important; }

    .mhPhoneCta  { bottom: 80px; right: 16px; }
    .mhHeroArrow { display: none; }

    .heroSection h1 { font-size: clamp(32px, 8vw, 55px) !important; }

    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .mhMenuTabBtn { padding: 8px 12px; font-size: 12px; }
    .mhGallerySmallGrid { grid-template-columns: 1fr !important; }
    .mhGallerySmItem { height: 200px; }
    .footer-bottom-links { gap: 16px; flex-wrap: wrap; }
}