/* ============ Dimah Clinic — Before / After page ============ */

.brand.brand--branch-only{position:relative;padding-bottom:13px;flex:0 0 auto;}
.header .brand__txt{display:none !important;}
.brand--branch-only .brand__logo{height:49px;display:block;}
.brand--branch-only::after{content:attr(data-branch-label);position:absolute;inset-inline:0;bottom:0;text-align:center;font-size:10px;line-height:1;font-weight:700;letter-spacing:.035em;color:var(--gold-deep);white-space:nowrap;}
.header:not(.is-solid) .brand--branch-only::after{color:var(--gold-soft);text-shadow:0 2px 10px rgba(0,0,0,.45);}
@media(max-width:600px){.brand--branch-only{padding-bottom:11px}.brand--branch-only .brand__logo{height:42px}.brand--branch-only::after{font-size:9px}}

/* ---- hero ---- */
.ba-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;margin-top:-126px;padding:168px 0 70px;}
.ba-hero__bg{position:absolute;inset:0;}
.ba-hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.ba-hero__bg image-slot{position:absolute;inset:0;width:100%;height:100%;}
.ba-hero__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(105deg,rgba(28,20,12,.95) 0%,rgba(40,28,16,.82) 52%,rgba(40,28,16,.46) 100%),
  linear-gradient(0deg,rgba(20,14,8,.6),transparent 44%);}
.ba-hero__inner{position:relative;z-index:3;max-width:720px;}
.ba-hero__eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:13px;font-weight:700;color:var(--gold-soft);letter-spacing:.05em;margin-bottom:16px;}
.ba-hero__eyebrow::before{content:"";width:30px;height:1px;background:var(--gold-soft);}
.ba-hero__title{font-size:clamp(32px,4.6vw,54px);line-height:1.08;letter-spacing:-0.02em;text-shadow:0 6px 30px rgba(0,0,0,.4);}
.ba-hero__title em{font-style:normal;color:var(--gold-soft);}
.ba-hero__lead{margin-top:20px;font-size:clamp(15px,1.6vw,18px);color:rgba(255,255,255,.9);max-width:580px;text-wrap:pretty;text-shadow:0 2px 18px rgba(0,0,0,.4);}

/* ---- sticky service filter ---- */
.ba-filter{position:sticky;top:74px;z-index:30;background:rgba(251,247,239,.88);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line-soft);}
.ba-filter__row{display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none;padding:16px 0;}
.ba-filter__row::-webkit-scrollbar{display:none;}
.bafilt{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:10px 19px;cursor:pointer;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);}
.bafilt:hover{transform:translateY(-2px);color:var(--gold-deep);border-color:var(--gold-soft);}
.bafilt__ic{width:24px;height:24px;flex:0 0 auto;color:var(--gold-deep);}
.bafilt__ic svg{width:100%;height:100%;}
.bafilt.is-active{background:linear-gradient(150deg,var(--gold-soft),var(--gold) 60%,var(--gold-deep));color:#fff;border-color:transparent;box-shadow:0 12px 26px -14px rgba(168,123,76,.9);}
.bafilt.is-active .bafilt__ic{color:#fff;}
@media(max-width:820px){.ba-filter{top:64px;}}
@media(max-width:700px){
  .ba-filter{position:relative!important;top:auto!important;z-index:20!important;overflow:hidden!important;}
  .ba-filter .wrap{position:relative!important;padding:0!important;}
  .ba-filter .wrap::before,
  .ba-filter .wrap::after{content:"";position:absolute;top:0;bottom:0;z-index:2;pointer-events:none;}
  .ba-filter .wrap::before{inset-inline-start:0;width:56px;background:linear-gradient(to right,rgba(251,247,239,.98),rgba(251,247,239,0));}
  .ba-filter .wrap::after{inset-inline-end:0;width:34px;background:linear-gradient(to left,rgba(251,247,239,.96),rgba(251,247,239,0));}
  html[dir="rtl"] .ba-filter .wrap::before{width:64px;}
  html[dir="rtl"] .ba-filter .wrap::after{width:26px;}
  .ba-filter__row{flex-wrap:nowrap!important;gap:10px!important;margin:0!important;padding:16px 18px 18px!important;overflow-x:auto!important;scroll-padding-inline:18px!important;scrollbar-width:thin!important;scrollbar-color:rgba(168,123,76,.58) rgba(235,221,202,.62)!important;-webkit-overflow-scrolling:touch!important;}
  .ba-filter__row::-webkit-scrollbar{display:block!important;height:4px!important;}
  .ba-filter__row::-webkit-scrollbar-track{background:rgba(235,221,202,.62)!important;border-radius:999px!important;}
  .ba-filter__row::-webkit-scrollbar-thumb{background:rgba(168,123,76,.58)!important;border-radius:999px!important;}
  .bafilt{min-height:48px!important;padding:10px 16px!important;font-size:15px!important;line-height:1.2!important;max-width:72vw!important;}
  .bafilt__ic{width:20px!important;height:20px!important;}
}

/* ---- service group ---- */
.ba-group{padding:60px 0 8px;}
.ba-group.is-hidden{display:none;}
.ba-group__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px;}
.ba-group__t{display:flex;align-items:center;gap:14px;}
.ba-group__t .ic{width:48px;height:48px;flex:0 0 auto;border-radius:14px;background:linear-gradient(150deg,var(--gold-tint),#f0e0cd);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(168,123,76,.18);}
.ba-group__t .ic svg{width:25px;height:25px;}
.ba-group__t h2{font-size:clamp(22px,2.6vw,30px);line-height:1.1;color:var(--ink);}
.ba-group__t p{font-size:14px;color:var(--ink-soft);margin-top:4px;}
.ba-group__count{font-size:13px;font-weight:700;color:var(--gold-deep);background:var(--gold-tint);padding:8px 16px;border-radius:999px;white-space:nowrap;}
html[dir="ltr"] .ba-hero__inner,
html[dir="ltr"] .ba-group,
html[dir="ltr"] .ba-card__foot{text-align:left;}
html[dir="ltr"] .ba-group__head{direction:ltr;}
@media(max-width:700px){
  .ba-group{padding:54px 0 6px!important;}
  .ba-group .wrap{padding:0 18px!important;}
  .ba-group__head{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:14px!important;margin-bottom:22px!important;}
  .ba-group__t{min-width:0!important;gap:10px!important;}
  .ba-group__t .ic{display:none!important;}
  .ba-group__t h2{font-size:26px!important;line-height:1.25!important;overflow-wrap:anywhere!important;}
  .ba-group__t p{font-size:13px!important;}
  .ba-group__count{justify-self:start!important;font-size:13px!important;padding:8px 14px!important;max-width:96px!important;text-align:center!important;}
}

/* ---- comparison grid ---- */
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:26px;}
@media(max-width:780px){.ba-grid{grid-template-columns:1fr;}}

.ba-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .4s var(--ease),transform .4s var(--ease);}
.ba-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}

/* the compare viewport */
.ba-compare{position:relative;aspect-ratio:19/14;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:none;background:var(--cream-2);--pos:50%;}
.ba-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;}
.ba-compare img.ba-after{clip-path:inset(0 0 0 var(--pos));}
/* labels — fixed to physical left/right so they read the same in both languages */
.ba-tag{position:absolute;top:14px;z-index:4;font-size:12px;font-weight:700;color:#fff;padding:6px 13px;border-radius:999px;backdrop-filter:blur(3px);pointer-events:none;}
.ba-tag--before{left:14px;background:rgba(176,106,74,.86);}
.ba-tag--after{right:14px;left:auto;background:rgba(31,138,91,.92);border-radius:999px;padding:6px 13px;width:auto;height:auto;clip-path:none;}
/* divider + handle — left-based, direction-agnostic */
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.35);z-index:5;transform:translateX(-50%);pointer-events:none;}
.ba-handle{position:absolute;top:50%;left:var(--pos);z-index:6;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.32);display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);color:var(--gold-deep);pointer-events:none;}
.ba-handle{font-size:0;}
.ba-handle::before,.ba-handle::after{content:"";width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;position:absolute;top:50%;}
.ba-handle::before{left:11px;transform:translateY(-50%) rotate(-135deg);}
.ba-handle::after{right:11px;transform:translateY(-50%) rotate(45deg);}
.ba-handle svg{width:24px;height:24px;}

.ba-card__foot{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ba-card__title{font-size:15.5px;font-weight:700;color:var(--ink);}
.ba-card__meta{font-size:12.5px;color:var(--ink-soft);font-weight:600;}
.ba-hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--gold-deep);font-weight:600;}
.ba-hint svg{width:15px;height:15px;}

/* note band */
.ba-note{margin-top:48px;display:flex;align-items:flex-start;gap:12px;font-size:13.5px;color:var(--ink-soft);background:var(--cream-2);border-radius:16px;padding:18px 20px;}
.ba-note svg{width:20px;height:20px;color:var(--gold-deep);flex:0 0 auto;margin-top:1px;}

.ba-empty{display:none;text-align:center;padding:70px 20px;color:var(--ink-soft);}
.ba-empty.show{display:block;}
@media(max-width:700px){
  .ba-grid{grid-template-columns:minmax(0,1fr)!important;gap:24px!important;}
  .ba-card{border-radius:26px!important;}
  .ba-compare{aspect-ratio:1/1!important;}
  .ba-tag{top:14px!important;max-width:82px!important;padding:8px 12px!important;font-size:14px!important;line-height:1!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .ba-tag--before{left:14px!important;right:auto!important;}
  .ba-tag--after{right:14px!important;left:auto!important;}
  .ba-handle{width:48px!important;height:48px!important;}
  .ba-card__foot{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;padding:18px 20px 22px!important;text-align:right!important;}
  html[dir="ltr"] .ba-card__foot{text-align:left!important;}
  .ba-card__title{font-size:18px!important;line-height:1.6!important;overflow-wrap:anywhere!important;}
  .ba-card__meta,.ba-hint{font-size:14px!important;}
}