/* ==========================================================================
   Massage Dubai Marina — brand layer for Elementor
   Brand Guidelines v1.0 (August 2026).

   Elementor owns layout: containers, flex, spacing, responsive. This file only
   supplies what Elementor cannot express as controls — the brand tokens, a few
   utility classes to drop into a widget's "CSS Classes" field, and the styling
   for the three custom widgets.

   THE RULE (Guidelines p.13): "Petrol carries information. Copper creates
   emphasis." Copper is 2.83:1 on ivory and 2.36:1 on petrol — both fail for
   text — so it is used here only for hairlines, icon strokes, indicator dots
   and decorative facets. Never for live copy.
   ========================================================================== */

:root{
  --mdm-petrol:#225365;
  --mdm-harbour:#0A1F26;
  --mdm-copper:#C2744A;
  --mdm-copper-light:#D48C64;
  --mdm-ivory:#EFE3DA;
  --mdm-sand:#D9C6B7;
  --mdm-white:#FFFFFF;
  --mdm-sand-soft:#E7DAD0;
  --mdm-ink-soft:#3F6675;                  /* 4.9:1 on ivory, 6.2:1 on white */
  --mdm-line:rgba(194,116,74,.42);         /* copper hairline */
  --mdm-line-soft:rgba(34,83,101,.16);     /* petrol hairline */
  --mdm-line-ondark:rgba(239,227,218,.20);
  --mdm-display:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --mdm-body:Manrope,"Avenir Next",Arial,sans-serif;
  --mdm-radius:8px;
  --mdm-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Utility classes for native Elementor widgets ---------- */

/* Eyebrow label: 12px semibold, 0.12em tracking, with a copper rule */
.mdm-eyebrow{
  font-family:var(--mdm-body);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mdm-petrol);
  display:flex;align-items:center;gap:12px;
}
.mdm-eyebrow::before{content:"";width:28px;height:1px;background:var(--mdm-copper);flex:none}
.mdm-eyebrow.mdm-center{justify-content:center}
.mdm-on-dark .mdm-eyebrow,.mdm-eyebrow.mdm-on-dark{color:var(--mdm-sand)}

/* Small caps tag pill */
.mdm-tag{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mdm-petrol);border:1px solid var(--mdm-line);border-radius:999px;padding:4px 12px;
  margin:0 6px 6px 0;
}

/* A hairline that closes a row (treatment rows, list rows) */
.mdm-hairline{border-bottom:1px solid var(--mdm-line-soft)}
.mdm-hairline-top{border-top:1px solid var(--mdm-line-soft)}

/* Row hover wash — put on the treatment/guide row container */
.mdm-row{transition:background .3s var(--mdm-ease)}
.mdm-row:hover{background:rgba(217,198,183,.30)}

/* Decorative serif numeral (01, 02 …) */
.mdm-num{font-family:var(--mdm-display);font-size:26px;color:var(--mdm-ink-soft);line-height:1}

/* Price */
.mdm-price{font-family:var(--mdm-display);font-size:23px;font-weight:500;color:var(--mdm-harbour)}
.mdm-price-note{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mdm-ink-soft)}

/* Card surface */
.mdm-card{background:var(--mdm-white);border:1px solid var(--mdm-line-soft);border-radius:var(--mdm-radius)}
.mdm-card-lift{transition:transform .4s var(--mdm-ease),border-color .4s var(--mdm-ease)}
.mdm-card-lift:hover{transform:translateY(-5px);border-color:var(--mdm-line)}

/* The arch image frame used in the hero. Elementor's own image-widget rules
   are more specific than a bare class, so match its structure. */
.elementor-widget-image.mdm-arch img,
.mdm-arch .elementor-widget-container img,
.mdm-arch img{border-radius:999px 999px 8px 8px !important}

/* Therapist card portrait treatment */
.mdm-portrait img{border-radius:2px}

/* ---------- Custom widget: Booking Builder ---------- */
.mdm-builder{
  background:var(--mdm-white);border:1px solid var(--mdm-line);border-radius:var(--mdm-radius);
  overflow:hidden;display:grid;font-family:var(--mdm-body);
}
@media(min-width:960px){.mdm-builder{grid-template-columns:1.35fr .95fr}}
.mdm-builder-form{padding:clamp(26px,4vw,44px)}
.mdm-bfield{margin-bottom:30px;border:0;padding:0}
.mdm-bfield:last-child{margin-bottom:0}
.mdm-bfield legend,.mdm-bfield .mdm-lbl{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mdm-ink-soft);
  margin-bottom:14px;display:flex;align-items:center;gap:9px;padding:0;
}
.mdm-bfield legend b,.mdm-bfield .mdm-lbl b{
  width:18px;height:18px;border-radius:50%;background:var(--mdm-petrol);color:#fff;
  font-size:10px;font-weight:600;display:grid;place-items:center;letter-spacing:0;
}
.mdm-opts{display:flex;flex-wrap:wrap;gap:9px}
.mdm-opt{position:relative;margin:0}
.mdm-opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.mdm-opt span{
  display:flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;
  border:1px solid var(--mdm-line-soft);border-radius:999px;font-size:13.5px;color:var(--mdm-petrol);
  transition:border-color .2s var(--mdm-ease),background .2s var(--mdm-ease),color .2s var(--mdm-ease),transform .2s var(--mdm-ease);
}
.mdm-opt:hover span{border-color:var(--mdm-copper);transform:translateY(-1px)}
.mdm-opt input:checked + span{background:var(--mdm-petrol);border-color:var(--mdm-petrol);color:var(--mdm-ivory)}
.mdm-opt input:focus-visible + span{outline:2px solid var(--mdm-petrol);outline-offset:3px}
.mdm-binputs{display:grid;gap:12px}
@media(min-width:560px){.mdm-binputs{grid-template-columns:1fr 1fr}}
.mdm-binput.full{grid-column:1/-1}
.mdm-binput input{
  width:100%;min-height:52px;padding:14px 16px;background:var(--mdm-ivory);color:var(--mdm-petrol);
  border:1px solid var(--mdm-line-soft);border-radius:var(--mdm-radius);
  font-family:var(--mdm-body);font-size:15px;
}
.mdm-binput input:hover{border-color:var(--mdm-line)}

.mdm-summary{background:var(--mdm-petrol);color:var(--mdm-ivory);padding:clamp(26px,4vw,40px);display:flex;flex-direction:column}
.mdm-summary h3{font-family:var(--mdm-display);font-size:26px;font-weight:500;color:var(--mdm-ivory);margin:0 0 6px}
.mdm-summary .mdm-sub{font-size:13px;color:var(--mdm-sand);margin:0 0 26px}
.mdm-sum-list{display:grid;margin:0 0 24px}
.mdm-sum-list > div{display:flex;justify-content:space-between;gap:18px;padding-block:13px;border-bottom:1px solid var(--mdm-line-ondark);font-size:14px}
.mdm-sum-list dt{color:var(--mdm-sand);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding-top:2px}
.mdm-sum-list dd{margin:0;text-align:end;max-width:60%}
.mdm-sum-total{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-block:20px;margin-bottom:22px}
.mdm-sum-total > span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mdm-sand)}
.mdm-sum-total b{font-family:var(--mdm-display);font-size:42px;font-weight:500;line-height:1;transition:opacity .25s var(--mdm-ease)}
.mdm-sum-total b em{font-style:normal;font-family:var(--mdm-body);font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--mdm-sand);margin-inline-end:6px}
.mdm-sum-total.is-flash b{opacity:.35}
.mdm-send{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:auto;
  min-height:52px;padding:14px 30px;border-radius:var(--mdm-radius);
  background:var(--mdm-ivory);color:var(--mdm-petrol);border:1px solid var(--mdm-ivory);
  font-size:14px;font-weight:600;text-decoration:none;
  transition:background .2s var(--mdm-ease),transform .2s var(--mdm-ease);
}
.mdm-send:hover{background:var(--mdm-white);border-color:var(--mdm-white);transform:translateY(-2px);color:var(--mdm-petrol)}
.mdm-summary .mdm-fine{font-size:11.5px;color:rgba(217,198,183,.8);margin:16px 0 0;line-height:1.6;text-align:center}

/* ---------- Custom widget: Tower Finder ---------- */
.mdm-finder{font-family:var(--mdm-body);display:grid;gap:14px}
@media(min-width:700px){.mdm-finder{grid-template-columns:1fr auto;align-items:center}}
.mdm-field{position:relative;display:flex;align-items:center;margin:0}
.mdm-field svg{position:absolute;inset-inline-start:18px;color:var(--mdm-sand);pointer-events:none}
.mdm-field input{
  width:100%;min-height:56px;background:transparent;color:var(--mdm-ivory);
  border:1px solid var(--mdm-line-ondark);border-radius:var(--mdm-radius);
  padding:14px 20px 14px 52px;font-family:var(--mdm-body);font-size:15px;
}
.mdm-field input::placeholder{color:var(--mdm-sand)}
.mdm-field input:focus{border-color:var(--mdm-sand);outline-offset:2px}
.mdm-finder .mdm-count{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mdm-sand);white-space:nowrap;margin:0}
/* light variant for use on ivory sections */
.mdm-finder.is-light .mdm-field input{color:var(--mdm-petrol);border-color:var(--mdm-line-soft)}
.mdm-finder.is-light .mdm-field input::placeholder,
.mdm-finder.is-light .mdm-field svg,
.mdm-finder.is-light .mdm-count{color:var(--mdm-ink-soft)}

/* Tower chips are a native Elementor Icon List, so every building stays an
   individually editable list item. These rules turn the list into pills. */
.mdm-chips .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.mdm-chips .elementor-icon-list-item{margin:0}
.mdm-chips .elementor-icon-list-item[hidden]{display:none}
.mdm-chips .elementor-icon-list-item > a,
.mdm-chips .elementor-icon-list-text{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 17px;
  border:1px solid var(--mdm-line-ondark);border-radius:999px;font-size:13.5px;
  color:var(--mdm-ivory);text-decoration:none;
  transition:background .25s var(--mdm-ease),border-color .25s var(--mdm-ease),color .25s var(--mdm-ease),transform .25s var(--mdm-ease);
}
.mdm-chips .elementor-icon-list-item > a:hover{background:var(--mdm-sand);border-color:var(--mdm-sand);color:var(--mdm-harbour);transform:translateY(-2px)}
.mdm-chips .elementor-icon-list-icon{display:none}

.mdm-chip{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 17px;
  border:1px solid var(--mdm-line-ondark);border-radius:999px;font-size:13.5px;
  color:var(--mdm-ivory);text-decoration:none;
  transition:background .25s var(--mdm-ease),border-color .25s var(--mdm-ease),color .25s var(--mdm-ease),transform .25s var(--mdm-ease);
}
.mdm-chip:hover{background:var(--mdm-sand);border-color:var(--mdm-sand);color:var(--mdm-harbour);transform:translateY(-2px)}
.mdm-chip[hidden]{display:none}
.mdm-no-results{color:var(--mdm-sand);font-size:15px;padding:24px 0}

/* ---------- Custom widget: Therapist Filters ---------- */
.mdm-filters{display:flex;flex-wrap:wrap;gap:9px;font-family:var(--mdm-body);margin:0}
.mdm-filters button{
  min-height:44px;padding:10px 19px;border:1px solid var(--mdm-line-soft);border-radius:999px;
  background:none;cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--mdm-ink-soft);
  transition:background .25s var(--mdm-ease),color .25s var(--mdm-ease),border-color .25s var(--mdm-ease);
}
.mdm-filters button:hover{border-color:var(--mdm-copper);color:var(--mdm-petrol)}
.mdm-filters button[aria-pressed="true"]{background:var(--mdm-petrol);border-color:var(--mdm-petrol);color:var(--mdm-ivory)}
/* Elementor containers we filter — hide via attribute so the editor stays sane */
.elementor-element[data-mdm-hidden="1"]{display:none !important}

/* ---------- Toast ---------- */
.mdm-toast{
  position:fixed;z-index:1200;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:var(--mdm-petrol);color:var(--mdm-ivory);padding:14px 24px;border-radius:999px;
  font-family:var(--mdm-body);font-size:13.5px;opacity:0;visibility:hidden;
  transition:opacity .3s var(--mdm-ease),transform .3s var(--mdm-ease),visibility .3s;
  box-shadow:0 18px 40px -20px rgba(10,31,38,.7);max-width:calc(100vw - 40px);text-align:center;
}
.mdm-toast.is-shown{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- Focus, never removed ---------- */
.mdm-builder a:focus-visible,.mdm-builder input:focus-visible,
.mdm-filters button:focus-visible,.mdm-chip:focus-visible,.mdm-field input:focus-visible{
  outline:2px solid var(--mdm-copper);outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .mdm-opt span,.mdm-chip,.mdm-card-lift,.mdm-send,.mdm-toast{transition:none}
}

/* ---------- Pricing table (lives inside a native Text Editor widget) ---------- */
.mdm-ptable{width:100%;border-collapse:collapse;font-family:var(--mdm-body);font-size:15px}
.mdm-ptable thead th{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mdm-ink-soft);
  text-align:end;padding:0 14px 14px;border-bottom:1px solid var(--mdm-line);
}
.mdm-ptable thead th:first-child{text-align:start}
.mdm-ptable th[scope="row"]{
  text-align:start;font-family:var(--mdm-display);font-size:20px;font-weight:500;color:var(--mdm-harbour);
  padding:18px 14px;border-bottom:1px solid var(--mdm-line-soft);
}
.mdm-ptable th[scope="row"] small{
  display:block;font-family:var(--mdm-body);font-size:12px;font-weight:400;
  color:var(--mdm-ink-soft);margin-top:3px;letter-spacing:0;
}
.mdm-ptable td{
  text-align:end;padding:18px 14px;border-bottom:1px solid var(--mdm-line-soft);
  font-family:var(--mdm-display);font-size:20px;color:var(--mdm-harbour);
}
.mdm-ptable tbody tr{transition:background .3s var(--mdm-ease)}
.mdm-ptable tbody tr:hover{background:rgba(217,198,183,.3)}
@media(max-width:800px){
  .mdm-ptable,.mdm-ptable tbody,.mdm-ptable tr,.mdm-ptable td,.mdm-ptable th{display:block;text-align:start}
  .mdm-ptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mdm-ptable tr{border:1px solid var(--mdm-line-soft);border-radius:var(--mdm-radius);padding:20px;margin-bottom:14px;background:var(--mdm-ivory)}
  .mdm-ptable th,.mdm-ptable td{border:0;padding:0}
  .mdm-ptable th[scope="row"]{margin-bottom:12px}
  .mdm-ptable td{display:flex;justify-content:space-between;align-items:baseline;padding-block:9px;border-top:1px solid var(--mdm-line-soft)}
  .mdm-ptable td::before{
    content:attr(data-label);font-family:var(--mdm-body);font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--mdm-ink-soft);
  }
}

/* Hero arch + image polish */
.mdm-arch img{box-shadow:0 40px 80px -50px rgba(10,31,38,.45)}
.mdm-card img,.mdm-portrait img{border-radius:var(--mdm-radius)}