/* Aruba Taxi Co. — exit-intent popup, redesigned
   Same selectors as the current popup.css — drop-in replacement, no markup/JS changes needed.
   Palette pulled from the business card: Main Black #080808, Aruba Blue #77AADE (deep #376CAE),
   Gold main #C5913E / bright #DCAA56 / deep #8A5E28, Flag Red #C81E25, White #FFFFFF. */

.atc-popup-overlay{
  position: fixed !important; inset: 0 !important; z-index: 999998 !important;
  background: rgba(4,6,10,0.75) !important;
  display: flex !important; align-items: flex-start !important; justify-content: center !important;
  padding: 20px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.atc-popup-overlay.atc-popup-visible{
  opacity: 1 !important; visibility: visible !important;
}

.atc-popup-box{
  background: #0d0d0d !important;
  border: 1px solid #242322 !important;
  border-radius: 16px !important;
  max-width: 440px !important;
  width: 100% !important;
  padding: 26px 26px 24px !important;
  text-align: center !important;
  margin: auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 10px !important;
  position: relative !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(197,145,62,0.08) !important;
  font-family: 'Public Sans', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

.atc-popup-close{
  position: absolute !important; top: 14px !important; right: 14px !important;
  width: 30px !important; height: 30px !important; border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.14) !important; background: rgba(255,255,255,0.06) !important; color: #EAEAEA !important;
  font-size: 0.9rem !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important; line-height: 1 !important; z-index: 2 !important;
}
.atc-popup-close:hover{ background: rgba(255,255,255,0.14) !important; }

.atc-popup-box > *{ grid-column: 1 / -1 !important; }

/* Header band — specified in the handoff README but missing from its CSS.
   Bleeds to the card's top corners; the dashed hairlines echo the
   checkerboard trim on the business card. */
.atc-popup-header{
  margin: -26px -26px 18px !important;
  padding: 18px 20px !important;
  background: #080808 !important;
  border-radius: 16px 16px 0 0 !important;
  border-bottom: 1px solid #242322 !important;
  position: relative !important;
}
.atc-popup-header::before, .atc-popup-header::after{
  content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: repeating-linear-gradient(90deg, #242322 0 20px, transparent 20px 26px) !important;
}
.atc-popup-header::before{ top: 6px !important; }
.atc-popup-header::after{ bottom: 6px !important; }
.atc-popup-header img{
  display: block !important; margin: 0 auto !important;
  max-width: 290px !important; width: 100% !important; height: auto !important;
}

.atc-popup-icon{ font-size: 1.6rem !important; margin-bottom: 2px !important; line-height:1 !important; }

.atc-popup-box h2{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.3rem !important;
  /* metallic blue-to-gold, matching the card's wordmark treatment */
  background: linear-gradient(100deg, #9CC4EF 0%, #77AADE 28%, #376CAE 46%, #FFDD8A 62%, #F4B33C 80%, #D89A2B 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important; line-height: 1.25 !important;
}

.atc-popup-sub{
  font-size: 0.85rem !important; color: #B7BEC9 !important; line-height: 1.55 !important;
  margin: 0 0 16px !important;
}

.atc-popup-contact-btn{
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; gap: 6px !important;
  text-decoration: none !important; border-radius: 12px !important;
  padding: 14px 10px !important; margin-bottom: 0 !important;
  transition: filter 0.15s, transform 0.15s !important; text-align: center !important;
  border: none !important; grid-column: auto !important;
}
.atc-popup-contact-btn:hover{ filter: brightness(1.1) !important; transform: translateY(-1px) !important; }
.atc-popup-contact-btn:last-of-type{ margin-bottom: 0 !important; }

/* deep-blue card tone for call, brand gold for whatsapp — both read as "premium", not generic green */
.atc-popup-call{ background: linear-gradient(160deg, #4C87CE 0%, #10233E 100%) !important; }
.atc-popup-whatsapp{ background: linear-gradient(160deg, #FFDD8A 0%, #D89A2B 100%) !important; }

.atc-popup-contact-icon{
  font-size: 1.05rem !important; flex: 0 0 auto !important; width: 32px !important;
  height: 32px !important; display: flex !important; align-items: center !important;
  justify-content: center !important; background: rgba(255,255,255,0.75) !important;
  border-radius: 9px !important;
}

.atc-popup-contact-text{ display: flex !important; flex-direction: column !important; gap: 1px !important; }
.atc-popup-contact-label{ color: #fff !important; font-weight: 700 !important; font-size: 0.8rem !important; letter-spacing: 0.01em; line-height:1.2 !important; }
.atc-popup-contact-number{
  color: rgba(255,255,255,0.9) !important; font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.76rem !important;
}

/* DEVIATION from the handoff, deliberate: it kept the label white while the
   WhatsApp button became gold. White on #FFDD8A measures 1.32:1 — invisible.
   Ink on the same gold is 15.2:1, and it matches what the handoff already
   specifies for the Continue button on this exact colour. */
.atc-popup-whatsapp .atc-popup-contact-label{ color: #080808 !important; }
.atc-popup-whatsapp .atc-popup-contact-number{ color: rgba(8,8,8,0.78) !important; }
.atc-popup-whatsapp .atc-popup-contact-icon{ background: rgba(8,8,8,0.14) !important; }

.atc-popup-divider{
  display: flex !important; align-items: center !important; gap: 10px !important;
  margin: 16px 0 12px !important; color: #6b7280 !important; font-size: 0.68rem !important;
  text-transform: uppercase !important; letter-spacing: 0.05em !important;
}
.atc-popup-divider::before, .atc-popup-divider::after{
  content: '' !important; flex: 1 !important; height: 1px !important; background: #242322 !important;
}

/* Continue CTA — flat gold, ink text for contrast (4.5:1+) */
.atc-popup-continue-btn{
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  width: 100% !important;
  background: #F4B33C !important;
  color: #080808 !important; border: none !important; border-radius: 12px !important;
  padding: 13px 20px !important; font-weight: 700 !important; font-size: 0.88rem !important;
  cursor: pointer !important; font-family: 'Public Sans', Arial, sans-serif !important;
  transition: background 0.15s !important;
}
.atc-popup-continue-btn:hover{ background: #FFDD8A !important; }

@media (max-width: 480px){
  .atc-popup-box{ padding: 22px 18px 20px !important; grid-template-columns: 1fr !important; }
  .atc-popup-header{ margin: -22px -18px 14px !important; padding: 14px 16px !important; }
  .atc-popup-header img{ max-width: 220px !important; }
  .atc-popup-contact-btn{
    flex-direction: row !important; justify-content: flex-start !important;
    gap: 12px !important; text-align: left !important; padding: 12px 14px !important;
    margin-bottom: 8px !important;
  }
  .atc-popup-contact-label{ font-size: 0.82rem !important; }
  .atc-popup-contact-number{ font-size: 0.78rem !important; }
}