/* ==========================================================================
   Royal Call / WhatsApp buttons — jewel FABs + black-glass gold-ringed CTAs
   Palette: black #0B0B0C, red #D71920, gold #C9A45C / #E9CF8E, WhatsApp #25D366
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Floating jewel buttons
   -------------------------------------------------------------------------- */
.floating-contact { align-items: center; gap: 1rem; }
.floating-contact::before {           /* thin gold hairline joining the two */
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(233, 207, 142, .75) 30%, rgba(233, 207, 142, .75) 70%, transparent);
  transform: translateX(-.5px); pointer-events: none;
}
.fab {
  --fab-size: 56px;
  position: relative; z-index: 1;
  width: var(--fab-size); height: var(--fab-size); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #0B0B0C; color: #E9CF8E;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 0 0 1px rgba(233, 207, 142, .35);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
  animation: fabPop .8s cubic-bezier(.2, .9, .3, 1.25) 2.8s backwards;
  -webkit-tap-highlight-color: transparent;
}
.fab-call { --fab-size: 52px; animation-delay: 3.05s; }
.fab-whatsapp { color: #25D366; }

/* inner black-glass centre + hairline */
.fab::before {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px solid rgba(233, 207, 142, .55);
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .16), transparent 46%),
    radial-gradient(circle at 50% 55%, #1d1d21, #0B0B0C 78%);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .85), inset 0 -2px 6px rgba(201, 164, 92, .16);
}
.fab-call::before {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .14), transparent 46%),
    radial-gradient(circle at 50% 60%, #7d0f14, #2a0507 62%, #0B0B0C 100%);
}
/* outer rotating gold gradient ring */
.fab-ring {
  position: absolute; inset: 0; border-radius: 50%; padding: 3px; pointer-events: none;
  background: conic-gradient(#7a5a22, #F3DFA6, #C9A45C, #6a4c1c, #C9A45C, #FFF1C4, #7a5a22);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fabSpin 6s linear infinite;
}
/* ornamental gold studs at 4 points of the ring */
.fab-dots {
  position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 50% 3.5px, #FFF1C4 0 1.7px, #0B0B0C 2.1px 2.9px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 3.5px) 50%, #FFF1C4 0 1.7px, #0B0B0C 2.1px 2.9px, transparent 3.2px),
    radial-gradient(circle at 50% calc(100% - 3.5px), #FFF1C4 0 1.7px, #0B0B0C 2.1px 2.9px, transparent 3.2px),
    radial-gradient(circle at 3.5px 50%, #FFF1C4 0 1.7px, #0B0B0C 2.1px 2.9px, transparent 3.2px);
}
/* soft halo (WhatsApp breathes green; Call has a faint ruby glow) */
.fab::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 20px 5px rgba(37, 211, 102, .5);
}
.fab-whatsapp::after { animation: fabBreath 4.5s ease-in-out 4s infinite; }
.fab-call::after { opacity: .55; box-shadow: 0 0 16px 3px rgba(215, 25, 32, .38); }

.fab-icon {
  position: relative; z-index: 2; width: 27px; height: 27px;
  filter: drop-shadow(0 0 5px currentColor);
}
.fab-whatsapp .fab-icon { filter: drop-shadow(0 0 6px rgba(37, 211, 102, .65)); }
.fab-call .fab-icon { width: 22px; height: 22px; color: #F3DFA6; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); transform-origin: 50% 60%; animation: fabRing 8s ease-in-out 5s infinite; }

/* label pill (desktop hover / keyboard focus) */
.fab-label {
  position: absolute; right: calc(100% + 14px); top: 50%;
  transform: translate(14px, -50%); opacity: 0; visibility: hidden; pointer-events: none;
  height: 38px; padding: 0 1.05rem; display: flex; align-items: center; white-space: nowrap;
  font: 600 .74rem/1 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase;
  color: #F5F3EF; background: rgba(11, 11, 12, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid #C9A45C; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5), inset 0 0 0 2px #0B0B0C, inset 0 0 0 3px rgba(201, 164, 92, .3);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .3, 1), visibility 0s .35s;
}
.fab:focus-visible { outline: 2px solid #E9CF8E; outline-offset: 4px; }
.fab:focus-visible .fab-label { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
@media (hover: hover) {
  .fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 32px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 241, 196, .7); }
  .fab:hover .fab-label { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
  .fab:hover .fab-ring { animation-duration: 2.5s; }
}
.fab:active { transform: scale(.94); }
/* the flourish ripple would be clipped/overflow the label — FABs use :active instead */
.fab.fl-ripple-host { overflow: visible; }
.fab .fl-ripple { display: none; }

@keyframes fabPop { from { opacity: 0; transform: scale(.3) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fabSpin { to { transform: rotate(360deg); } }
@keyframes fabBreath { 0%, 55%, 100% { opacity: 0; transform: scale(.96); } 25% { opacity: .9; transform: scale(1.06); } }
@keyframes fabRing {
  0%, 84%, 100% { transform: rotate(0); }
  86% { transform: rotate(-16deg); } 88% { transform: rotate(14deg); } 90% { transform: rotate(-12deg); }
  92% { transform: rotate(10deg); } 94% { transform: rotate(-5deg); } 96% { transform: rotate(0); }
}

@media (max-width: 767px) {
  .floating-contact { right: 12px; gap: .85rem; }
  .fab { --fab-size: 52px; }
  .fab-call { --fab-size: 48px; }
  .fab-icon { width: 25px; height: 25px; }
  .fab-call .fab-icon { width: 20px; height: 20px; }
}
@media (hover: none) { .fab-label { display: none; } .fab:focus-visible .fab-label { display: flex; } }

/* --------------------------------------------------------------------------
   2. Black-glass gold-ringed buttons (.btn-whatsapp, .btn-royal-call)
   -------------------------------------------------------------------------- */
.btn-whatsapp, .btn-royal-call, .btn-royal-quote {
  position: relative;
  background: linear-gradient(180deg, #19191c, #0B0B0C);
  color: #F5F3EF;
  border: 1.5px solid #C9A45C;
  font-family: 'Cinzel', serif; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  gap: .75em; padding-inline: 1.1em 1.5em;
  box-shadow: inset 0 0 0 3px #0B0B0C, inset 0 0 0 4px rgba(201, 164, 92, .35), 0 10px 24px rgba(0, 0, 0, .4);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
}
.btn-whatsapp:hover, .btn-royal-call:hover, .btn-royal-quote:hover {
  filter: none; border-color: #E9CF8E; background: linear-gradient(180deg, #202024, #0f0f11);
  box-shadow: inset 0 0 0 3px #0B0B0C, inset 0 0 0 4px rgba(233, 207, 142, .6), 0 12px 28px rgba(0, 0, 0, .5);
}
.btn-whatsapp .icon, .btn-royal-call .icon, .btn-royal-quote .icon {
  width: 32px; height: 32px; padding: 6px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 40%, #232327, #0B0B0C 80%);
  border: 1px solid rgba(233, 207, 142, .7);
}
.btn-whatsapp .icon { color: #25D366; filter: drop-shadow(0 0 4px rgba(37, 211, 102, .55)); }
.btn-royal-call .icon { color: #F3DFA6; background: radial-gradient(circle at 50% 55%, #7d0f14, #2a0507 75%); }
.btn-royal-quote { color: #E9CF8E; }
.btn-royal-quote:hover { color: #FFF1C4; }
.btn-royal-quote .icon { color: #E9CF8E; filter: drop-shadow(0 0 4px rgba(233, 207, 142, .5)); }
.btn-royal-quote:hover .icon { box-shadow: 0 0 12px rgba(233, 207, 142, .45); }
.btn-whatsapp:hover .icon { box-shadow: 0 0 12px rgba(37, 211, 102, .45); }
.btn-royal-call:hover .icon { box-shadow: 0 0 12px rgba(215, 25, 32, .5); }
.hero-actions .btn-royal-call { background: rgba(11, 11, 12, .72); }

/* drawer */
.drawer-contact { gap: .75rem; }
.drawer-contact a.drawer-call, .drawer-contact a.drawer-wa {
  justify-content: center; gap: .75em; min-height: 52px; padding: 0 1rem; border-radius: 999px;
  color: #F5F3EF; font-weight: 700; letter-spacing: .06em;
  background: linear-gradient(180deg, #19191c, #0B0B0C); border: 1.5px solid #C9A45C;
  box-shadow: inset 0 0 0 3px #0B0B0C, inset 0 0 0 4px rgba(201, 164, 92, .3);
}
.drawer-call .icon, .drawer-wa .icon, .footer-call .icon, .footer-wa .icon {
  width: 30px; height: 30px; padding: 6px; border-radius: 50%; flex: none;
  border: 1px solid rgba(233, 207, 142, .65); background: radial-gradient(circle at 50% 45%, #232327, #0B0B0C 80%);
}
.drawer-call .icon, .footer-call .icon { color: #F3DFA6; background: radial-gradient(circle at 50% 55%, #7d0f14, #2a0507 75%); }
.drawer-wa .icon, .footer-wa .icon { color: #25D366; }

/* footer */
.footer-col a.footer-call, .footer-col a.footer-wa { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; }
.footer-col a.footer-call:hover, .footer-col a.footer-wa:hover { color: #E9CF8E; }
.footer-call .icon, .footer-wa .icon { width: 28px; height: 28px; padding: 6px; }

@media (prefers-reduced-motion: reduce) {
  .fab, .fab-ring, .fab::after, .fab-call .fab-icon { animation: none !important; }
  .fab, .fab-label, .btn-whatsapp, .btn-royal-call, .btn-royal-quote { transition: none; }
  .fab:hover { transform: none; }
  .fab-whatsapp::after { opacity: .5; }
}