/**
 * Calendly Popup Widget CSS Overrides
 * Best practices implementation for optimal UX
 */

/* Calendly overlay/backdrop - semi-transparent dark background */
.calendly-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
  background: rgba(0, 0, 0, 0.85) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  animation: none !important; /* Remove animation from overlay */
}

/* Desktop: Optimized modal size for Calendly widget */
@media (min-width: 769px) {
  .calendly-popup-content,
  .calendly-overlay .calendly-popup-content,
  div.calendly-popup-content {
    position: relative !important;
    width: 900px !important;
    max-width: 90vw !important;
    height: 750px !important;
    max-height: 90vh !important;
    z-index: 10000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    animation: calendlyContentFadeIn 0.2s ease-out !important;
  }
  
  .calendly-popup-content iframe,
  .calendly-overlay .calendly-popup-content iframe,
  div.calendly-popup-content iframe {
    width: 100% !important;
    height: 100% !important;
    min-width: 320px !important;
    min-height: 630px !important;
    border: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
  }
  
  /* Remove background from any nested divs Calendly creates */
  .calendly-popup-content > div,
  .calendly-overlay .calendly-popup-content > div {
    background: transparent !important;
  }
}

/* Mobile: Fullscreen experience - properly constrained for Safari */
@media (max-width: 768px) {
  .calendly-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  
  .calendly-popup-content,
  .calendly-overlay .calendly-popup-content,
  div.calendly-popup-content {
    position: relative !important;
    width: 100vw !important;
    /* Use dynamic viewport height for better mobile support */
    height: 100dvh !important;
    /* Fallback for older browsers */
    height: calc(100vh - env(safe-area-inset-bottom)) !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    z-index: 10000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    background: white !important;
    border-radius: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    animation: calendlyContentFadeIn 0.2s ease-out !important;
    /* Add padding for Safari's bottom bar */
    padding-bottom: env(safe-area-inset-bottom, 60px) !important;
    box-sizing: border-box !important;
  }
  
  .calendly-popup-content iframe,
  .calendly-overlay .calendly-popup-content iframe,
  div.calendly-popup-content iframe {
    width: 100% !important;
    /* Adjust height to account for bottom padding */
    height: calc(100% - env(safe-area-inset-bottom, 60px)) !important;
    min-height: auto !important;
    border: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 0 !important;
  }
}

/* Calendly close button - Enhanced visibility and UX */
.calendly-close-overlay,
.calendly-overlay .calendly-close-overlay {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  z-index: 10001 !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.8) !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

/* Mobile: Move close button to bottom-left */
@media (max-width: 768px) {
  .calendly-close-overlay,
  .calendly-overlay .calendly-close-overlay {
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 20px) + 15px) !important;
    left: 15px !important;
    right: auto !important;
  }
}

.calendly-close-overlay:hover,
.calendly-overlay .calendly-close-overlay:hover {
  background: rgba(0, 0, 0, 0.95) !important;
  transform: scale(1.1) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
}

/* Close button - Create X if SVG doesn't render */
.calendly-close-overlay::before,
.calendly-overlay .calendly-close-overlay::before {
  content: '×' !important;
  color: white !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  display: block !important;
}

/* Close button SVG styling (if it exists) */
.calendly-close-overlay svg,
.calendly-overlay .calendly-close-overlay svg {
  width: 22px !important;
  height: 22px !important;
  stroke: white !important;
  stroke-width: 2.5 !important;
  fill: none !important;
  position: absolute !important;
}

/* Spinner/loading state */
.calendly-spinner {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Prevent body scroll when popup is open */
body.calendly-popup-open,
html.calendly-popup-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* Smooth fade-in animation - ONLY for content, not overlay */
@keyframes calendlyContentFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accessibility: Focus outline for close button */
.calendly-close-overlay:focus {
  outline: 3px solid #4d90fe !important;
  outline-offset: 2px !important;
}