/* ==========================================================================
   WILD ROAR SAFARI - FIRST VISIT POPUP MODAL STYLESHEET
   Luxury Glassmorphic & Compact Dual-Column High-Converting Safari Lead Modal
   ========================================================================== */

.first-visit-popup-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 10, 6, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  overflow-y: auto;
}

.first-visit-popup-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.first-visit-popup-container {
  width: 100%;
  max-width: 820px;
  margin: auto;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.first-visit-popup-backdrop.active .first-visit-popup-container {
  transform: scale(1) translateY(0);
}

.first-visit-popup-card {
  position: relative;
  background: #0d1e14;
  border: 1.5px solid rgba(201, 158, 88, 0.45);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 30px rgba(201, 158, 88, 0.2);
}

/* Close Button */
.first-visit-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(8, 18, 13, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
}

.first-visit-close-btn:hover {
  background: #b6893c;
  border-color: #b6893c;
  color: #06110a;
  transform: rotate(90deg) scale(1.08);
}

/* 2-Column Split Layout */
.first-visit-split-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: stretch;
}

/* Left Visual Side */
.first-visit-visual-side {
  position: relative;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.first-visit-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 6s ease-out;
}

.first-visit-popup-backdrop.active .first-visit-bg-img {
  transform: scale(1);
}

.first-visit-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 22, 14, 0.6) 0%, rgba(8, 22, 14, 0.92) 65%, rgba(5, 14, 9, 0.98) 100%);
  z-index: 1;
}

.first-visit-visual-content {
  position: relative;
  z-index: 2;
}

.first-visit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(182, 137, 60, 0.22);
  border: 1px solid rgba(201, 158, 88, 0.5);
  border-radius: 9999px;
  color: #fce2a6;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.first-visit-badge svg {
  color: var(--gold-light, #e6c07b);
}

.first-visit-visual-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.22;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.first-visit-visual-title .highlight-gold {
  background: linear-gradient(135deg, #ffffff 0%, #fce2a6 40%, #e6c07b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.first-visit-visual-desc {
  font-size: 0.8rem;
  color: #d1dfd6;
  line-height: 1.48;
  margin-bottom: 14px;
}

.first-visit-perks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.first-visit-perks-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #f1f7f3;
  font-weight: 500;
}

.first-visit-perks-list li svg {
  color: #25D366;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: rgba(37, 211, 102, 0.15);
  border-radius: 50%;
  padding: 2px;
}

.first-visit-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}

.first-visit-rating-badge .stars {
  color: #f5b041;
  font-size: 0.82rem;
  letter-spacing: 1px;
}

.first-visit-rating-badge .rating-text {
  font-size: 0.7rem;
  color: #e2ede6;
  font-weight: 500;
}

/* Right Form Side */
.first-visit-form-side {
  padding: 24px 28px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.first-visit-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #b6893c;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.first-visit-form-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: #0c2015;
  margin-bottom: 3px;
  line-height: 1.22;
}

.first-visit-form-desc {
  font-size: 0.78rem;
  color: #556b5e;
  margin-bottom: 12px;
  line-height: 1.35;
}

.first-visit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.popup-input-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.popup-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: #1a3325;
}

.popup-label .req {
  color: #d93838;
}

.popup-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.popup-input-icon {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: #7b9485;
  pointer-events: none;
}

.popup-input,
.popup-select {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1.5px solid #d4e0d8;
  border-radius: 7px;
  background: #fbfdfc;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.84rem;
  color: #0a1c12;
  transition: all 0.2s ease;
  outline: none;
}

.popup-input:focus,
.popup-select:focus {
  border-color: #b6893c;
  box-shadow: 0 0 0 2.5px rgba(182, 137, 60, 0.15);
  background: #ffffff;
}

.popup-error {
  font-size: 0.68rem;
  color: #d93838;
  font-weight: 500;
  line-height: 1;
}

.popup-submit-btn {
  height: 40px;
  background: linear-gradient(135deg, #18412c 0%, #0d281a 100%);
  border: 1.5px solid #b6893c;
  border-radius: 7px;
  color: #ffffff;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.86rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(18, 40, 28, 0.2);
  margin-top: 2px;
}

.popup-submit-btn:hover {
  background: linear-gradient(135deg, #b6893c 0%, #926b23 100%);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(182, 137, 60, 0.35);
}

.popup-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 2px 0;
}

.popup-divider::before,
.popup-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e2eae4;
}

.popup-divider span {
  padding: 0 8px;
  font-size: 0.64rem;
  color: #83978b;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.popup-whatsapp-btn {
  height: 38px;
  background: #25D366;
  border: none;
  border-radius: 7px;
  color: #ffffff;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.25);
}

.popup-whatsapp-btn:hover {
  background: #1eb956;
  color: #ffffff;
  transform: translateY(-1.5px);
  box-shadow: 0 5px 14px rgba(37, 211, 102, 0.4);
}

.popup-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.68rem;
  color: #768a7f;
  margin: 2px 0 0 0;
  text-align: center;
}

.popup-security-note svg {
  color: #b6893c;
}

.first-visit-status-box {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.first-visit-status-box.success {
  background: #e8f7ee;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.first-visit-status-box.error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 768px) {
  .first-visit-popup-backdrop {
    padding: 10px 8px !important;
    z-index: 100000 !important;
    align-items: flex-start !important;
  }
  .first-visit-popup-container {
    max-height: none !important;
    height: auto !important;
    margin: auto 0 !important;
  }
  .first-visit-popup-card {
    border-radius: 8px !important;
    max-height: none !important;
  }
  .first-visit-close-btn {
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
  }
  .first-visit-close-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  .first-visit-split-layout {
    grid-template-columns: 1fr !important;
  }
  .first-visit-visual-side {
    padding: 12px 10px 8px 10px !important;
    min-height: auto !important;
    text-align: left !important;
  }
  .first-visit-badge {
    margin-bottom: 4px !important;
    font-size: 0.62rem !important;
    padding: 2px 8px !important;
  }
  .first-visit-visual-title {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }
  .first-visit-rating-badge {
    padding: 2px 8px !important;
    font-size: 0.68rem !important;
  }
  .first-visit-perks-list,
  .first-visit-visual-desc {
    display: none !important;
  }
  .first-visit-form-side {
    padding: 12px 10px 14px 10px !important;
    text-align: left !important;
  }
  .first-visit-eyebrow {
    font-size: 0.64rem !important;
    margin-bottom: 2px !important;
    text-align: left !important;
  }
  .first-visit-form-title {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
    text-align: left !important;
  }
  .first-visit-form-desc {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
    text-align: justify !important;
    text-justify: inter-word;
  }
  .first-visit-form {
    gap: 5px !important;
  }
  .popup-input-group {
    gap: 2px !important;
  }
  .popup-label {
    font-size: 0.72rem !important;
    margin-bottom: 0 !important;
    text-align: left !important;
  }
  .popup-input {
    height: 35px !important;
    padding: 5px 8px 5px 28px !important;
    font-size: 0.80rem !important;
    border-radius: 5px !important;
  }
  .popup-input-icon {
    width: 13px !important;
    height: 13px !important;
    left: 8px !important;
  }
  .popup-submit-btn {
    height: 38px !important;
    font-size: 0.82rem !important;
    margin-top: 2px !important;
    border-radius: 6px !important;
  }
  .popup-divider {
    margin: 2px 0 !important;
  }
  .popup-divider span {
    font-size: 0.60rem !important;
  }
  .popup-whatsapp-btn {
    height: 36px !important;
    font-size: 0.80rem !important;
    border-radius: 6px !important;
  }
  .popup-security-note {
    font-size: 0.64rem !important;
    margin-top: 2px !important;
  }
}

@media (max-width: 480px) {
  .first-visit-popup-backdrop {
    padding: 8px 6px !important;
  }
  .first-visit-popup-card {
    border-radius: 6px !important;
  }
  .first-visit-visual-side {
    padding: 10px 8px 6px 8px !important;
  }
  .first-visit-visual-title {
    font-size: 1.08rem !important;
  }
  .first-visit-form-side {
    padding: 10px 8px 12px 8px !important;
  }
  .first-visit-form-title {
    font-size: 1.08rem !important;
  }
  .first-visit-form-desc {
    font-size: 0.72rem !important;
    margin-bottom: 6px !important;
  }
  .popup-input {
    height: 33px !important;
    font-size: 0.78rem !important;
  }
  .popup-submit-btn {
    height: 36px !important;
    font-size: 0.80rem !important;
  }
}