/*
Theme Name: Mobile Facial Spa — Community Care v1.0.53 BOOK SERVICE SELECTION GOLD TABS
Author: Mobile Facial Spa
Version: 1.0.58
*/
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden}
img{max-width:100%}

/* Exact approved homepage header */
.mfs-homepage{width:100%;max-width:875px;margin:0 auto;background:#fff}
.mfs-header{height:52px;background:#050505;display:flex;align-items:center;padding:0 12px;position:relative;z-index:30}
.mfs-brand{width:49%;max-width:180px;min-width:140px;height:52px;display:flex;align-items:center;justify-content:center;position:relative;z-index:32;margin-left:3px;padding-top:4px}
.mfs-brand img{display:block;width:100%;height:auto;max-height:48px;object-fit:contain;object-position:center center}
.mfs-logo-scoop{position:absolute;left:25px;top:45px;width:150px;height:16px;background:#050505;border-radius:0 0 50% 50% / 0 0 100% 100%;z-index:31;pointer-events:none}
.mfs-primary-nav{display:none;margin-left:auto;align-items:center;gap:18px;z-index:32}
.mfs-primary-nav a{color:#fff;text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap}
.mfs-hamburger{margin-left:auto;width:28px;height:22px;padding:0;border:0;background:transparent;display:flex;flex-direction:column;justify-content:space-between;z-index:32;cursor:pointer}
.mfs-hamburger span{display:block;width:100%;height:2px;background:#f4007d;border-radius:3px}
@media (orientation:landscape) and (min-width:600px){
 .mfs-primary-nav{display:flex}
 .mfs-hamburger{margin-left:18px}
}

/* LOCKED APPROVED HOMEPAGE — single-image delivery to prevent section-by-section loading */
.mfs-approved-home{max-width:875px;margin:0 auto;background:#fff}
.mfs-home-section{position:relative;line-height:0;margin:0;padding:0}
.mfs-home-section>img{display:block;width:100%;height:auto;margin:0;padding:0}
.mfs-hotspot{position:absolute;display:block;z-index:5;cursor:pointer}
.mfs-hotspot:focus-visible{outline:2px solid #f4007d;outline-offset:2px}
.mfs-book{left:7%;top:18.318579%;width:30%;height:2.954610%}
.loc-home{left:2%;top:56.218776%;width:23%;height:17.781787%}
.loc-events{left:26%;top:56.218776%;width:23%;height:17.781787%}
.loc-hotels{left:50%;top:56.218776%;width:23%;height:17.781787%}
.loc-care{left:74%;top:56.218776%;width:24%;height:17.781787%}
.mfs-provider-link{left:5%;top:94.313786%;width:38%;height:3.159008%}

/* Approved right-side menu */
.mfs-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;visibility:hidden;transition:.2s;z-index:90}
.mfs-overlay.open{opacity:1;visibility:visible}
.mfs-drawer{position:fixed;right:-330px;top:0;width:min(330px,88vw);height:100vh;background:#0b0b0b;color:#fff;z-index:100;padding:18px 18px 28px;overflow-y:auto;transition:right .25s ease;box-shadow:-10px 0 30px rgba(0,0,0,.3)}
.mfs-drawer.open{right:0}
.mfs-menu-head{display:flex;justify-content:space-between;align-items:center;padding:4px 2px 13px;border-bottom:1px solid #333;color:#f4007d;letter-spacing:1.4px}
.mfs-menu-head button{border:0;background:transparent;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.mfs-drawer>a,.mfs-drop-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;color:#fff;background:none;border:0;border-bottom:1px solid #2c2c2c;text-decoration:none;text-align:left;padding:14px 3px;font-size:14px;cursor:pointer}
.mfs-drawer>a:hover,.mfs-drop-toggle:hover{color:#f4007d}
.mfs-submenu{display:none;background:#111;padding:2px 0 5px}
.mfs-submenu.open{display:block}
.mfs-submenu a{display:block;color:#ddd;text-decoration:none;padding:11px 13px;border-bottom:1px solid #252525;font-size:13px}

/* Approved balanced compact footer */
.mfs-footer{max-width:875px;margin:0 auto;background:#050505;color:#fff;text-align:center;padding:20px 18px 14px}
.mfs-footer-logo{display:flex;justify-content:center;align-items:center;width:100%;margin:0 auto 10px}
.mfs-footer-logo img{display:block;width:auto;max-width:180px;max-height:48px;margin:0 auto}
.mfs-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 12px;margin:8px auto;line-height:1.25}
.mfs-footer-links a{color:#fff;text-decoration:none;font-size:12px;padding:2px 0}
.mfs-footer-links a:hover{color:#f4007d}
.mfs-social-icons{display:flex;justify-content:center;align-items:center;gap:11px;margin:9px auto}
.mfs-social-icons span{width:25px;height:25px;border:1px solid #f4007d;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.mfs-copy{font-size:10px;color:#d6d6d6;margin:8px auto 0;line-height:1.25}

/* Simple safe styling for non-home pages; custom templates may add their own markup. */
.mfs-page{max-width:875px;margin:0 auto;padding:24px 18px}

/* v1.0.27 responsive delivery — exact approved artwork, one fast body image */
html,body{overflow-x:hidden}
.mfs-approved-home{width:100%;margin:0 auto}
.mfs-home-section>img{display:block;width:100%;height:auto;object-fit:contain}
@media (min-width:600px) and (max-width:1023px){.mfs-approved-home{max-width:820px}}
@media (min-width:1024px) and (max-width:1439px){.mfs-approved-home{max-width:1100px}}
@media (min-width:1440px){.mfs-approved-home{max-width:1180px}}
\n/* v1.0.42: mobile internal-page title safety. Keeps long hero titles inside viewport. */
@media (max-width: 699px){
  body:not(.home) .hero h1,
  body:not(.home) .cc-hero h1{
    font-size:clamp(34px,10.5vw,44px)!important;
    line-height:1.04!important;
    max-width:100%!important;
    width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    hyphens:auto;
  }
}


/* v1.0.50 — Client Account active-tab + mobile tab-strip correction */
.mfs-ca-tabswrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mfs-ca-tabswrap::-webkit-scrollbar{display:none}
.mfs-ca-tabs{width:max-content;min-width:100%;display:flex;flex-wrap:nowrap}
.mfs-ca-tab{flex:0 0 auto;white-space:nowrap}
@media(max-width:640px){
  .mfs-ca-tabswrap{padding-right:14px}
  .mfs-ca-tabs{padding-right:14px}
}

/* v1.0.55 — MFS enhancement guide; names are supplied by the active MFS service system. */
.mfs-client-account .mfs-ca-enhancement-guide{margin:0 12px 18px;padding:18px;border:1px solid #eadfc9;border-radius:14px;background:#fffaf6;text-align:center}
.mfs-client-account .mfs-ca-enhancement-guide h3{margin:0 0 6px;font-family:Georgia,serif;font-size:21px;color:#181824}
.mfs-client-account .mfs-ca-enhancement-guide p{margin:0 0 13px;color:#5d5457;font-size:14px}
.mfs-client-account .mfs-ca-enhancement-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 12px}
.mfs-client-account .mfs-ca-enhancement-list span{display:inline-block;padding:7px 10px;border:1px solid #e6c9d4;border-radius:999px;background:#fff;color:#292326;font-size:12px;font-weight:700}
.mfs-client-account .mfs-ca-enhancement-guide small{display:block;color:#766c70;font-size:11px}


/* v1.0.56 — booking first-open scroll + compact enhancement placement */
.mfs-client-account .mfs-ca-booking-body{padding-bottom:0!important;}
.mfs-client-account .mfs-ca-booking-body .el-select-dropdown__wrap,
.mfs-client-account .mfs-ca-booking-body .el-scrollbar__wrap,
.mfs-client-account .mfs-ca-booking-body [class*="select-dropdown"] [class*="scrollbar__wrap"],
.mfs-client-account .mfs-ca-booking-body [class*="dropdown"] [class*="scroll"]{
  max-height:330px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
}
.mfs-client-account .mfs-ca-booking-body .el-select-dropdown__list,
.mfs-client-account .mfs-ca-booking-body [class*="select-dropdown"] ul{max-height:none!important;}
.mfs-client-account .mfs-ca-enhancement-guide{margin-top:10px!important;clear:both;}
@media(max-width:620px){
 .mfs-client-account .mfs-ca-booking-body .el-select-dropdown__wrap,
 .mfs-client-account .mfs-ca-booking-body .el-scrollbar__wrap,
 .mfs-client-account .mfs-ca-booking-body [class*="select-dropdown"] [class*="scrollbar__wrap"]{max-height:310px!important;}
 .mfs-client-account .mfs-ca-enhancement-guide{margin:10px 12px 16px!important;}
}