/* =============================================================
   enola.css — MDS BKK re-skin (2026-08-24)
   Additive layer. Loaded LAST, after the theme's style.css /
   responsive.css, so it wins without editing them. Removing the
   <link> in view_header.php restores the old look exactly.
   No PHP / markup logic depends on this file.
   ============================================================= */

:root{
  --e-mocha:#a2907f;      /* page surround */
  --e-cream:#f4f1ea;      /* the sheet everything sits on */
  --e-ink:#2f2a25;
  --e-muted:#7d7267;
  --e-olive:#4a4a3d;      /* pill button */
  --e-line:#e3ddd2;
  --e-serif:'Noto Serif Thai','Cormorant Garamond',Georgia,serif;
  --e-sans:'IBM Plex Sans Thai','Noto Sans Thai',system-ui,sans-serif;
}

/* -------------------------------------------------------------------
   2026-08-24 — DESKTOP ONLY (>= 992px).
   The re-skin left the phone layout blank, so everything below is gated
   behind a min-width query: on phones and small tablets the site falls
   back to the theme's own responsive CSS exactly as before. Re-open the
   mobile styling deliberately, one section at a time, after testing on a
   real device.
   ------------------------------------------------------------------- */
@media (min-width: 992px) {

  /* ---------- the rounded sheet on a mocha field ---------- */
  body{
    background:var(--e-mocha) !important;
    font-family:var(--e-sans);
    color:var(--e-ink);
    padding:22px 18px 34px !important;
  }
  .enola-frame{
    max-width:1340px;margin:0 auto;background:var(--e-cream);
    border-radius:26px;overflow:hidden;
    box-shadow:0 30px 70px rgba(60,45,35,.28);
  }
  /* the fixed mobile action bar must stay edge-to-edge, not inside the sheet */
  .mds-actionbar{border-radius:0}

  /* ---------- typography ---------- */
  h1,h2,h3,h4,.headline h2,.headline h3{font-family:var(--e-serif) !important;font-weight:400 !important}
  .headline h2{letter-spacing:.14em;color:var(--e-ink) !important}
  .headline h3{letter-spacing:.02em;color:var(--e-muted) !important;font-size:1rem !important;line-height:1.9}
  p,li,td,th,label,input,textarea,select,.services-text p{font-family:var(--e-sans)}

  /* ---------- header ----------
     view_header.php prints an inline <style> with the brand colour + !important AFTER
     this file, so every rule here needs higher specificity to win. */
  body .header-area{background:#efe9df !important;border-bottom:1px solid var(--e-line) !important}
  body .header-info li,body .header-info a,body .header-info i,body .header-info span,
  body .lang-right,body .lang-right a{color:var(--e-muted) !important}
  body .header-info ul.first li:before{background:var(--e-line) !important}
  .mainmenu ul li a{font-family:var(--e-sans);letter-spacing:.08em}

  /* ---------- hero ---------- */
  .slider .slider-item{position:relative}
  .slider .slider-item .row > [class*="col-"]{
    flex:0 0 100% !important;max-width:100% !important;margin-left:0 !important
  }
  .slider .bg-slider{background:linear-gradient(180deg,rgba(58,46,36,.42) 0%,rgba(58,46,36,.18) 40%,rgba(58,46,36,.42) 100%) !important}
  .slider .slider-text{text-align:center}
  .slider .slider-text h1{
    font-family:'Cormorant Garamond',var(--e-serif) !important;
    font-weight:300 !important;color:#fff !important;
    font-size:clamp(2.3rem,6.4vw,5.4rem) !important;line-height:1.05 !important;
    letter-spacing:.05em;text-shadow:0 4px 40px rgba(50,38,28,.35)
  }
  .slider .slider-text p{color:#f4ece1 !important;letter-spacing:.06em}
  .slider .slider-text ul{justify-content:center;display:flex;gap:12px;flex-wrap:wrap;padding-left:0}
  .slider .slider-text ul li{list-style:none}
  .slider .slider-text ul li a,
  .slider .slider-text ul li a:link,
  .slider .slider-text ul li a:visited{
    background:var(--e-olive) !important;border:0 !important;color:#f7f3ea !important;
    border-radius:999px !important;padding:12px 26px !important;letter-spacing:.04em;
    font-family:var(--e-sans);font-weight:500
  }
  .slider .slider-text ul li a:hover{filter:brightness(1.12);color:#fff !important}

  /* ---------- section rhythm + cards ---------- */
  .services-item,.testimonial-item,.blog-item,.choose-item,.feature-item{
    background:#fff;border:1px solid var(--e-line);border-radius:16px;overflow:hidden
  }
  .services-photo img,.blog-photo img{border-radius:0}
  .services-text{padding:16px 18px 20px}
  .services-text h3{font-size:1.02rem !important;letter-spacing:.02em}
  .button-bn a,.button-bn a:link,.button-bn a:visited{
    color:var(--e-olive) !important;letter-spacing:.06em;font-size:.82rem
  }

  /* ---------- therapist strip: one rounded rectangle, own perspective each ----------
     The frames are identical rectangles; each is seen through its OWN perspective()
     with two rotations, so every photo has its own vanishing points (two-point) —
     not one camera rotating the whole row. */
  .team-area{background:var(--e-cream)}
  .team-carousel .team-item{
    background:transparent;border:0;text-align:center;
    transition:transform .5s cubic-bezier(.2,.7,.3,1)
  }
  .team-carousel .team-photo{
    border-radius:16px;overflow:hidden;background:#ded6c9;
    box-shadow:0 22px 45px rgba(66,50,38,.20);
    aspect-ratio:8/9            /* identical frames, and no collapse while a lazy photo loads */
  }
  .team-carousel .team-photo img{
    width:100%;height:100%;object-fit:cover;object-position:center top;
    display:block;border-radius:16px
  }
  .team-carousel .team-item{border:0 !important}
  body .team-carousel .team-text{
    background:transparent !important;color:var(--e-ink) !important;
    padding:14px 0 0 !important;text-align:center
  }
  body .team-carousel .team-text p{color:var(--e-muted) !important}
  .team-carousel .team-text a,
  .team-carousel .team-text a:link,
  .team-carousel .team-text a:visited{
    color:var(--e-ink) !important;font-family:var(--e-sans);letter-spacing:.16em;
    font-size:.82rem;text-transform:uppercase
  }
  /* own camera per frame — repeats every 7 items so any team size stays varied */
  .team-carousel .owl-item:nth-child(7n+1) .team-item{transform:perspective(520px)  rotateY(19deg)  rotateX(3.5deg)}
  .team-carousel .owl-item:nth-child(7n+2) .team-item{transform:perspective(760px)  rotateY(9deg)   rotateX(-2.5deg)}
  .team-carousel .owl-item:nth-child(7n+3) .team-item{transform:perspective(600px)  rotateY(-6deg)  rotateX(4deg)}
  .team-carousel .owl-item:nth-child(7n+4) .team-item{transform:perspective(1100px) rotateY(2deg)   rotateX(-1.5deg)}
  .team-carousel .owl-item:nth-child(7n+5) .team-item{transform:perspective(640px)  rotateY(8deg)   rotateX(-3.5deg)}
  .team-carousel .owl-item:nth-child(7n+6) .team-item{transform:perspective(700px)  rotateY(-11deg) rotateX(2.5deg)}
  .team-carousel .owl-item:nth-child(7n+7) .team-item{transform:perspective(500px)  rotateY(-20deg) rotateX(-3deg)}
  .team-carousel .team-item:hover{transform:perspective(2000px)}
  .team-carousel .team-social{display:none}   /* the reference keeps the strip clean */


  /* ---------- news / blog article ----------
     The autoposted articles reuse a small pool of cover photos, some of which are
     square (900x900). Un-styled they render as a huge dark block that fills the
     column. Crop them to a normal article banner instead. */
  .single-blog img,.blog-detail img,.news-detail img{
    width:100%;height:auto;max-height:430px;object-fit:cover;object-position:center;
    border-radius:16px;display:block
  }
  .single-blog{background:#fff;border:1px solid var(--e-line);border-radius:18px;padding:18px 20px 24px}
  .single-blog h1,.single-blog h2{letter-spacing:.02em}
  .single-blog p{line-height:1.95;color:#3b332c}
  .sidebar-item,.widget{background:#fff;border:1px solid var(--e-line);border-radius:16px}

  /* ---------- price table ---------- */
  .price-table,.table{background:#fff;border-radius:16px;overflow:hidden}

  /* ---------- booking / faq ---------- */
  .booking-area{background:#efe9df}
  .accordion .card,.panel{border-radius:14px !important;border:1px solid var(--e-line) !important}

  /* ---------- footer ---------- */
  .footer-area{background:#efe9df !important;color:var(--e-muted)}
  .footer-area h3,.footer-area h4{color:var(--e-ink) !important}
  .footer-area a,.footer-area a:link,.footer-area a:visited{color:var(--e-muted) !important}
  .footer-area a:hover{color:var(--e-ink) !important}


}

/* ===================================================================
   MOBILE / SMALL TABLET (<= 991px) — added 2026-08-24, step by step.
   NOTE: no `overflow:hidden` on the sheet here. The first attempt at a
   phone layout used it and the page came out blank, so the frame stays
   unclipped on small screens; the rounded corners come from the sheet's
   own background only.
   =================================================================== */
@media (max-width: 991px) {

  /* --- step 1: colours + type --- */
  body{
    background:var(--e-mocha) !important;
    font-family:var(--e-sans);
    color:var(--e-ink);
    padding:10px 8px 0 !important;
  }
  .enola-frame{
    background:var(--e-cream);
    border-radius:18px;
    overflow:visible;
    box-shadow:0 14px 34px rgba(60,45,35,.25);
  }
  h1,h2,h3,h4,.headline h2,.headline h3{font-family:var(--e-serif) !important;font-weight:400 !important}
  .headline h2{letter-spacing:.08em;color:var(--e-ink) !important}
  .headline h3{letter-spacing:.01em;color:var(--e-muted) !important;font-size:.95rem !important;line-height:1.85}
  p,li,td,th,label,input,textarea,select{font-family:var(--e-sans)}

  /* --- step 2: header --- */
  body .header-area{background:#efe9df !important;border-bottom:1px solid var(--e-line) !important}
  body .header-info li,body .header-info a,body .header-info i,body .header-info span,
  body .lang-right,body .lang-right a{color:var(--e-muted) !important}

  /* --- step 3: hero --- */
  .slider .bg-slider{background:linear-gradient(180deg,rgba(58,46,36,.44) 0%,rgba(58,46,36,.22) 45%,rgba(58,46,36,.46) 100%) !important}
  .slider .slider-text{text-align:center}
  .slider .slider-text h1{
    font-family:'Cormorant Garamond',var(--e-serif) !important;
    font-weight:300 !important;color:#fff !important;
    font-size:clamp(1.8rem,7.4vw,2.6rem) !important;line-height:1.15 !important;letter-spacing:.03em
  }
  .slider .slider-text p{color:#f4ece1 !important}
  .slider .slider-text ul{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding-left:0}
  .slider .slider-text ul li{list-style:none}
  .slider .slider-text ul li a,
  .slider .slider-text ul li a:link,
  .slider .slider-text ul li a:visited{
    background:var(--e-olive) !important;border:0 !important;color:#f7f3ea !important;
    border-radius:999px !important;padding:11px 22px !important;font-family:var(--e-sans);font-weight:500
  }

  /* --- step 4: cards + article --- */
  .services-item,.blog-item,.testimonial-item{
    background:#fff;border:1px solid var(--e-line);border-radius:16px;overflow:hidden
  }
  .single-blog img,.blog-detail img,.news-detail img{
    width:100%;height:auto;max-height:260px;object-fit:cover;border-radius:14px;display:block
  }
  .single-blog{background:#fff;border:1px solid var(--e-line);border-radius:16px;padding:14px 14px 18px}
  .sidebar-item,.widget{background:#fff;border:1px solid var(--e-line);border-radius:14px}
  .booking-area{background:#efe9df}
  .footer-area{background:#efe9df !important}
  .footer-area h3,.footer-area h4{color:var(--e-ink) !important}
  .footer-area a,.footer-area a:link,.footer-area a:visited{color:var(--e-muted) !important}

  /* --- step 5: therapist strip — flat frames, no 3D on a phone --- */
  .team-carousel .team-item{background:transparent;border:0 !important;text-align:center}
  .team-carousel .team-photo{
    border-radius:14px;overflow:hidden;background:#ded6c9;aspect-ratio:8/9;
    box-shadow:0 12px 26px rgba(66,50,38,.18)
  }
  .team-carousel .team-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
  body .team-carousel .team-text{background:transparent !important;padding:12px 0 0 !important}
  .team-carousel .team-text a,
  .team-carousel .team-text a:link,
  .team-carousel .team-text a:visited{
    color:var(--e-ink) !important;font-family:var(--e-sans);letter-spacing:.12em;
    font-size:.78rem;text-transform:uppercase
  }
  .team-carousel .team-social{display:none}

  /* the sticky call/LINE/book bar stays edge-to-edge outside the sheet */
  .mds-actionbar{border-radius:0}
  body{padding-bottom:56px !important}
}