/* ==========================================================================
   MyExamRevision: Ad Landing Pages Stylesheet
   ========================================================================== */

/* Scoped base rules */
html.scroll-smooth {
  scroll-behavior: smooth;
}

body.mer-ad-landing-page {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: #0b1727;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* Hide standard theme elements if inadvertently rendered */
body.mer-ad-landing-page #desktop-nav,
body.mer-ad-landing-page #mobile-nav,
body.mer-ad-landing-page .site-footer,
body.mer-ad-landing-page .mer-mobile-search-overlay {
  display: none !important;
}

/* Transitions */
.transition-all-200 {
  transition: all 0.2s ease-in-out;
}

/* Video overlay smooth fade */
#video-overlay {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#video-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Multi-step Progress Bar */
#progress-bar-fill {
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading spinner for submit button */
.mer-btn-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: merSpin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 0.5rem;
}

@keyframes merSpin {
  to { transform: rotate(360deg); }
}

/* FAQ Accordion icon rotation */
.faq-icon-rotated {
  transform: rotate(180deg);
}

/* Sticky Bottom Bar shadow & backdrop */
.mer-sticky-bottom-bar {
  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.08), 0 -8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* Pulse animation utility fallback */
@keyframes merPulseSlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.mer-pulse {
  animation: merPulseSlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Cross-Browser Pure White Dropdowns (Safari macOS & iOS, Chrome, Edge, Firefox) */
#multistep-booking-form select,
select.clean-white-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  padding-right: 42px !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

#multistep-booking-form select:focus,
select.clean-white-select:focus {
  background-color: #ffffff !important;
  border-color: #00b074 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 176, 116, 0.2) !important;
}

#multistep-booking-form select option,
select.clean-white-select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
  padding: 8px 12px !important;
}

/* Prevent Safari/WebKit native shading on form inputs */
#multistep-booking-form input[type="text"],
#multistep-booking-form input[type="tel"],
#multistep-booking-form input[type="email"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}