/* ==========================================================================
   Modern Wedding Istanbul - Floating contact button (DESKTOP ONLY)
   Loaded site-wide from its own hook at priority 31 in mwi-motion-loader.php,
   then gated to >=1025px here and in mwi-contact.js.

   WHY IT IS NOT IN THE HEADER
   This started as a phone number inside the header and was reverted. On
   desktop the extra control widened the actions column until the header
   wrapped and the language switch lost its shape; on mobile a 375px row has
   no space for a fourth control at all, and the first build squeezed the
   language card until its TR link overlapped the account icon (measured).
   The header is now byte-for-byte what it was, and the contact lives outside
   it where it cannot compete for width. Do not move it back in.

   DESKTOP ONLY, BY INSTRUCTION (2026-08-10)
   Nothing is built or shown below 1025px. The mobile header and the existing
   green WhatsApp button are left exactly as they are.

   RELATIONSHIP TO THE EXISTING WhatsApp BUTTON
   The footer templates already carry a fixed green WhatsApp icon (`.mwi-wa`,
   widget e866487 in footer 18 / 85d81d6 in footer 19, styled by
   mwi-whatsapp.css). This button offers WhatsApp as one of its two actions,
   so on DESKTOP ONLY the green one is hidden to avoid two stacked circles in
   the same corner. Below 1025px it is untouched and remains the only contact
   affordance. Deleting the rule below brings it back on desktop.

   TECHNIQUE CREDIT
   The ringing-handset motion and the skewed shine are carried over from
   "Book A Call Button" by @jatin-yadav05 on 21st.dev, used earlier at the
   client's request, restyled here in the site's gold.
   ========================================================================== */

.mwi-fab{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:900;                 /* same layer the footer WhatsApp button used */
  display:none;                /* desktop-only; switched on below */
  flex-direction:column;
  align-items:flex-end;
  gap:12px;

  --fab-size:58px;
  --fab-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.6 21 3 12.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
  --fab-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E");
  --fab-wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.7 6.4L3 29l6.8-1.8c1.9 1 4 1.6 6.2 1.6 7.2 0 13-5.8 13-13S23.2 3 16 3zm0 23.6c-2 0-3.9-.5-5.6-1.5l-.4-.2-4 1.1 1.1-3.9-.3-.4c-1.1-1.7-1.6-3.7-1.6-5.7C5.2 10 10 5.2 16 5.2S26.8 10 26.8 16 22 26.6 16 26.6zm5.9-7.9c-.3-.2-1.9-.9-2.2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.7.1c-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.3s0-.5.2-.7l.5-.6c.2-.2.2-.3.3-.5s0-.4 0-.6c-.1-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.7s1.2 3.1 1.3 3.3c.2.2 2.4 3.7 5.8 5.1.8.4 1.4.6 1.9.7.8.3 1.5.2 2.1.1.6-.1 1.9-.8 2.2-1.6.3-.8.3-1.4.2-1.6-.1-.1-.3-.2-.6-.4z'/%3E%3C/svg%3E");
}

@media (min-width:1025px){
  .mwi-fab{ display:flex; }
  /* One circle in this corner, not two. See the note above. */
  .mwi-wa{ display:none !important; }
}

/* --------------------------------------------------------------------------
   1. The toggle: a gold disc with a ringing handset.
   -------------------------------------------------------------------------- */
.mwi-fab-toggle{
  position:relative;
  width:var(--fab-size);
  height:var(--fab-size);
  padding:0;
  border:0;
  border-radius:50%;
  cursor:pointer;
  overflow:hidden;                       /* clips the shine */
  background:linear-gradient(145deg, #E3CB96 0%, var(--mwi-gold, #B9924E) 58%, #9A7639 100%);
  /* espresso, never pure black - design system */
  box-shadow:0 14px 34px -14px rgba(36,26,18,.65),
             inset 0 0 0 1px rgba(255,250,235,.42);
  transition:transform .5s var(--mwi-ease-silk, ease),
             box-shadow .5s var(--mwi-ease-silk, ease);
  -webkit-tap-highlight-color:transparent;
}
.mwi-fab-toggle:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 44px -16px rgba(36,26,18,.7),
             inset 0 0 0 1px rgba(255,250,235,.6);
}
.mwi-fab-toggle:focus-visible{
  outline:2px solid var(--mwi-gold-soft, #DCC48F);
  outline-offset:4px;
}

/* The handset and the close mark are two masked layers on the same button,
   cross-faded, so there is no icon font and no second element to keep in
   sync. */
.mwi-fab-glyph,
.mwi-fab-glyph::after{
  position:absolute;
  left:50%; top:50%;
  width:23px; height:23px;
  margin:-11.5px 0 0 -11.5px;
  background-color:#2B2118;              /* espresso on gold, not white */
  transition:opacity .4s var(--mwi-ease-silk, ease),
             transform .5s var(--mwi-ease-silk, ease);
}
.mwi-fab-glyph{
  -webkit-mask:var(--fab-glyph) center / contain no-repeat;
          mask:var(--fab-glyph) center / contain no-repeat;
  animation:mwiFabRing 5.2s var(--mwi-ease-soft, ease) infinite;
}
.mwi-fab-glyph::after{
  content:'';
  margin:0; left:0; top:0; width:100%; height:100%;
  -webkit-mask:var(--fab-close) center / contain no-repeat;
          mask:var(--fab-close) center / contain no-repeat;
  opacity:0;
  transform:rotate(-90deg);
}
.mwi-fab[data-open="true"] .mwi-fab-glyph{
  animation:none;
  opacity:0;
  transform:rotate(90deg);
}
.mwi-fab[data-open="true"] .mwi-fab-glyph::after{
  opacity:1;
  transform:rotate(0deg);
}

/* A handset that tips as if it were ringing, then rests. */
@keyframes mwiFabRing{
  0%, 66%, 100% { transform:rotate(0deg); }
  70%  { transform:rotate(-12deg); }
  74%  { transform:rotate(10deg); }
  78%  { transform:rotate(-8deg); }
  82%  { transform:rotate(6deg); }
  86%  { transform:rotate(-3deg); }
  90%  { transform:rotate(0deg); }
}

/* The shine, from the 21st component. */
.mwi-fab-toggle::after{
  content:'';
  position:absolute;
  top:-40%; bottom:-40%; left:-60%;
  width:40%;
  background:linear-gradient(90deg, transparent, rgba(255,252,244,.55), transparent);
  transform:skewX(-18deg) translateX(-160%);
  pointer-events:none;
}
.mwi-fab-toggle:hover::after{
  animation:mwiFabShine 1.05s var(--mwi-ease-silk, ease);
}
@keyframes mwiFabShine{
  from{ transform:skewX(-18deg) translateX(-160%); }
  to  { transform:skewX(-18deg) translateX(520%); }
}

/* Two rings leaving the disc, the call-signal read. Only while closed, so an
   open panel is calm. */
.mwi-fab::before,
.mwi-fab::after{
  content:'';
  position:absolute;
  right:0; bottom:0;
  width:var(--fab-size); height:var(--fab-size);
  border:1px solid rgba(185,146,78,.6);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  animation:mwiFabPulse 5.2s var(--mwi-ease-soft, ease) infinite;
}
.mwi-fab::after{ animation-delay:.6s; }
.mwi-fab[data-open="true"]::before,
.mwi-fab[data-open="true"]::after{ animation:none; opacity:0; }

@keyframes mwiFabPulse{
  0%   { transform:scale(1);   opacity:0; }
  6%   { opacity:.7; }
  34%  { transform:scale(1.7); opacity:0; }
  100% { transform:scale(1.7); opacity:0; }
}

/* --------------------------------------------------------------------------
   2. The two actions. Closed by default, and inert when closed so keyboard
   focus cannot land on a hidden link.
   -------------------------------------------------------------------------- */
.mwi-fab-menu{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.mwi-fab-item{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:9px 10px 9px 18px;
  border-radius:999px;                   /* pill, per the two-radius rule */
  text-decoration:none;
  white-space:nowrap;
  font-family:var(--mwi-font-body, 'Frank Ruhl Libre', Georgia, serif);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:#F6F1E7;
  background:rgba(36,26,18,.86);
  border:1px solid rgba(220,196,143,.4);
  box-shadow:0 12px 30px -18px rgba(36,26,18,.8);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  /* Closed state. */
  opacity:0;
  transform:translateY(10px) scale(.96);
  pointer-events:none;
  transition:opacity .45s var(--mwi-ease-soft, ease),
             transform .45s var(--mwi-ease-soft, ease),
             border-color .45s var(--mwi-ease-soft, ease),
             background .45s var(--mwi-ease-soft, ease);
}
.mwi-fab[data-open="true"] .mwi-fab-item{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
/* The nearer action arrives first. */
.mwi-fab[data-open="true"] .mwi-fab-item:nth-child(2){ transition-delay:.06s; }
.mwi-fab[data-open="true"] .mwi-fab-item:nth-child(1){ transition-delay:.12s; }

.mwi-fab-item:hover{
  background:rgba(36,26,18,.95);
  border-color:rgba(220,196,143,.75);
}
.mwi-fab-item:focus-visible{
  outline:2px solid var(--mwi-gold-soft, #DCC48F);
  outline-offset:3px;
}

/* Each action carries its own small disc, so the row reads as a control and
   not as a floating label. */
.mwi-fab-ico{
  flex:0 0 auto;
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(220,196,143,.16);
  border:1px solid rgba(220,196,143,.42);
  position:relative;
}
.mwi-fab-ico::before{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:15px; height:15px;
  margin:-7.5px 0 0 -7.5px;
  background-color:var(--mwi-gold-soft, #DCC48F);
}
.mwi-fab-call .mwi-fab-ico::before{
  -webkit-mask:var(--fab-glyph) center / contain no-repeat;
          mask:var(--fab-glyph) center / contain no-repeat;
}
.mwi-fab-wa .mwi-fab-ico::before{
  width:17px; height:17px;
  margin:-8.5px 0 0 -8.5px;
  -webkit-mask:var(--fab-wa) center / contain no-repeat;
          mask:var(--fab-wa) center / contain no-repeat;
}
/* WhatsApp keeps its own green so it is recognisable at a glance, held as a
   tint rather than the full brand fill so it still belongs on this site. */
.mwi-fab-wa .mwi-fab-ico{
  background:rgba(37,211,102,.16);
  border-color:rgba(37,211,102,.45);
}
.mwi-fab-wa .mwi-fab-ico::before{ background-color:#4ADE80; }

/* --------------------------------------------------------------------------
   3. Reduced motion: the control keeps its shape, the ringing stops.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mwi-fab-glyph,
  .mwi-fab::before,
  .mwi-fab::after{ animation:none !important; }
  .mwi-fab-toggle::after{ display:none; }
  .mwi-fab-item{ transition:opacity .2s linear; transform:none; }
  .mwi-fab[data-open="true"] .mwi-fab-item{ transform:none; }
}