/* =========================================================
   Witch WiFi — Calendly Popup Styling
   Global override stylesheet loaded after Calendly widget.css.
   Calendly's iframe is cross-origin; this styles the parent
   overlay, popup shell, iframe frame, close button, and mobile fit.
   ========================================================= */

:root {
  --ww-ink: #252238;
  --ww-ink-soft: rgba(37, 34, 56, 0.72);
  --ww-rust: #A84E3F;
  --ww-paper: #F7F0E3;
  --ww-paper-soft: #FBF6EA;
  --ww-border: rgba(37, 34, 56, 0.16);
  --ww-shadow: rgba(18, 12, 10, 0.34);
}

body .calendly-overlay,
.calendly-overlay {
  background:
    radial-gradient(circle at 16% 18%, rgba(168, 78, 63, 0.20), transparent 34%),
    radial-gradient(circle at 84% 30%, rgba(219, 178, 111, 0.15), transparent 32%),
    radial-gradient(circle at 70% 88%, rgba(98, 143, 153, 0.17), transparent 38%),
    rgba(34, 27, 25, 0.70) !important;
  backdrop-filter: blur(5px) saturate(0.86) !important;
  -webkit-backdrop-filter: blur(5px) saturate(0.86) !important;
  padding: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.calendly-overlay .calendly-popup,
body .calendly-popup {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(620px, calc(100vw - 28px)) !important;
  height: min(760px, calc(100vh - 44px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: calc(100vh - 44px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 10% 6%, rgba(168, 78, 63, 0.12), transparent 30%),
    radial-gradient(circle at 92% 16%, rgba(219, 178, 111, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(251, 246, 234, 0.98), rgba(242, 230, 207, 0.96)) !important;
  border: 1px solid var(--ww-border) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow:
    0 30px 90px var(--ww-shadow),
    0 0 0 1px rgba(255, 251, 242, 0.52) inset !important;
}

.calendly-overlay .calendly-popup::before,
body .calendly-popup::before,
.calendly-overlay .calendly-popup::after,
body .calendly-popup::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
}

.calendly-overlay .calendly-popup::before,
body .calendly-popup::before {
  background:
    radial-gradient(circle at 12% 10%, rgba(168, 78, 63, 0.10), transparent 30%),
    radial-gradient(circle at 78% 92%, rgba(92, 138, 148, 0.11), transparent 34%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 244, 0.42),
    inset 0 18px 50px rgba(168, 78, 63, 0.04),
    inset 0 -18px 60px rgba(37, 34, 56, 0.05);
}

.calendly-overlay .calendly-popup::after,
body .calendly-popup::after {
  background-image: radial-gradient(rgba(37, 34, 56, 0.07) 0.55px, transparent 0.55px);
  background-size: 5px 5px;
  opacity: 0.14;
  mix-blend-mode: multiply;
}

.calendly-overlay .calendly-popup-content,
body .calendly-popup-content {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  background: var(--ww-paper-soft) !important;
  border: 1px solid rgba(37, 34, 56, 0.10) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 252, 244, 0.52) !important;
}

.calendly-overlay .calendly-popup-content iframe,
body .calendly-popup-content iframe,
.calendly-overlay iframe,
body > iframe[title*="Calendly"] {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border: 0 !important;
  display: block !important;
  background: var(--ww-paper-soft) !important;
  border-radius: 14px !important;
}

.calendly-overlay .calendly-popup-close,
body .calendly-popup-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 42px !important;
  height: 42px !important;
  background-color: rgba(251, 246, 234, 0.96) !important;
  border: 1px solid rgba(37, 34, 56, 0.22) !important;
  border-radius: 999px !important;
  box-shadow:
    0 8px 22px rgba(18, 12, 10, 0.18),
    0 0 0 1px rgba(255, 252, 244, 0.42) inset !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 20 !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23252238' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

.calendly-overlay .calendly-popup-close:hover,
.calendly-overlay .calendly-popup-close:focus,
body .calendly-popup-close:hover,
body .calendly-popup-close:focus {
  background-color: #F1E5D2 !important;
  border-color: rgba(168, 78, 63, 0.32) !important;
  transform: scale(1.04) !important;
  box-shadow:
    0 10px 26px rgba(18, 12, 10, 0.24),
    0 0 0 1px rgba(255, 252, 244, 0.5) inset !important;
}

@media (max-width: 640px) {
  body .calendly-overlay,
  .calendly-overlay {
    padding: 10px !important;
    align-items: center !important;
  }

  .calendly-overlay .calendly-popup,
  body .calendly-popup {
    width: calc(100vw - 20px) !important;
    height: calc(100dvh - 34px) !important;
    max-height: calc(100dvh - 34px) !important;
    border-radius: 18px !important;
    padding: 8px !important;
  }

  .calendly-overlay .calendly-popup-content,
  body .calendly-popup-content,
  .calendly-overlay .calendly-popup-content iframe,
  body .calendly-popup-content iframe {
    border-radius: 12px !important;
  }

  .calendly-overlay .calendly-popup-close,
  body .calendly-popup-close {
    top: 10px !important;
    right: 10px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 390px) {
  body .calendly-overlay,
  .calendly-overlay {
    padding: 6px !important;
  }

  .calendly-overlay .calendly-popup,
  body .calendly-popup {
    width: calc(100vw - 12px) !important;
    height: calc(100dvh - 22px) !important;
    max-height: calc(100dvh - 22px) !important;
    border-radius: 16px !important;
    padding: 6px !important;
  }
}