/**
 * Express Pay — Conditional 3-step wallet flow
 * Step 3: skeleton -> total + CTAs + Apple Pay / Google Pay
 * Mobile-only. Desktop never sees this.
 *
 * Design language: matches Step 2 price summary card, btn-primary-cta,
 * step2-reserve-btn from booking-instant.css.
 *
 * @since 2026-04-11
 * Feature flag: PCA_BOOKING_FORM_EXPRESS
 */

/* ======================================================
   Step 3 container
   ====================================================== */
.pca-express-step3[hidden] {
  display: none !important;
}
.pca-express-step3 {
  display: none; /* desktop: always hidden */
}

@media (max-width: 768px) {
  .pca-express-step3:not([hidden]) {
    display: block;
    padding: 0 16px 16px;
    animation: pca-ep-fadein 0.35s ease-out both;
  }
}

@keyframes pca-ep-fadein {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ======================================================
   Skeleton loading — Airbnb-style soft pulse
   Slower cycle (1.8s), lower contrast, rounded to match
   the actual content shapes they'll resolve into.
   ====================================================== */
.pca-express-step3-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 8px;
}

.pca-skeleton-row {
  border-radius: 8px;
  background: #f0f0f0;
  animation: pca-ep-pulse 1.8s ease-in-out infinite;
}

/* Price card — matches .pca-express-step3-price height */
.pca-skeleton-row--price {
  height: 54px;
  border-radius: 8px;
  background: #f0f2f0;
}

/* Savings line — narrow, right-aligned */
.pca-skeleton-row--savings {
  height: 14px;
  width: 40%;
  margin-left: auto;
  border-radius: 4px;
  margin-top: -4px;
}

/* Apple Pay button — dark, matches Stripe's 48px black button */
.pca-skeleton-row--wallet {
  height: 48px;
  border-radius: 8px;
  background: #e0e0e0;
}

/* "or" divider placeholder */
.pca-skeleton-row--divider {
  height: 1px;
  background: #ebebeb;
  margin: 6px 30%;
  animation: none;
}

/* Book Now — solid button shape */
.pca-skeleton-row--btn {
  height: 48px;
  border-radius: var(--border-radius-sm, 8px);
}

/* Reserve Now — outline button shape (lighter) */
.pca-skeleton-row--btn-outline {
  height: 48px;
  border-radius: var(--border-radius-sm, 8px);
  background: transparent;
  border: 2px solid #f0f0f0;
  animation: none;
}

/* Airbnb-style subtle pulse instead of harsh shimmer */
@keyframes pca-ep-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Preparing message below skeleton */
.pca-express-step3-preparing {
  text-align: center;
  font-size: 13px;
  color: var(--color-muted, #6b7280);
  padding-top: 4px;
  animation: pca-ep-pulse 1.8s ease-in-out infinite;
}


/* ======================================================
   Skeleton -> Content transition
   Skeleton fades out, content fades + slides in.
   ====================================================== */
.pca-express-step3-skeleton.is-resolving {
  animation: pca-ep-skeleton-out 0.25s ease-out forwards;
}

@keyframes pca-ep-skeleton-out {
  to { opacity: 0; transform: translateY(-4px); }
}

#pca-express-step3-content {
  /* Content starts hidden via inline style; JS removes it.
     When revealed, this animation plays. */
  opacity: 0;
  transform: translateY(8px);
}

#pca-express-step3-content.is-revealed {
  animation: pca-ep-content-in 0.35s ease-out 0.15s forwards;
}

@keyframes pca-ep-content-in {
  to { opacity: 1; transform: translateY(0); }
}


/* ======================================================
   Step 3 price summary — mirrors .step2-price-summary
   ====================================================== */
.pca-express-step3-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 16px;
  background: #f8faf8;
  border: 1px solid #e8f0e8;
  border-radius: 8px;
  margin-bottom: 4px;
}

.pca-express-step3-label {
  font-size: 0.875rem;
  color: var(--color-muted, #6b7280);
  font-weight: var(--weight-medium, 500);
}

.pca-express-step3-amount {
  font-size: 1.25rem;
  font-weight: var(--weight-bold, 700);
  color: var(--color-heading, #111827);
  letter-spacing: -0.01em;
}

/* Savings line */
.pca-express-step3-savings {
  font-size: 0.8125rem;
  color: #059669;
  text-align: right;
  padding: 0 4px 0 0;
  margin-bottom: 12px;
}

.pca-express-step3-savings:empty,
.pca-express-step3-savings[style*="display:none"],
.pca-express-step3-savings[style*="display: none"] {
  margin-bottom: 0;
}

.pca-express-step3-savings s {
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 400;
}


/* ======================================================
   Step 3 CTA stack — clear visual hierarchy
   Apple Pay = primary (Stripe renders), Book Now = secondary,
   Reserve Now = tertiary
   ====================================================== */
.pca-express-step3-ctas {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}

/* ── Apple Pay / Google Pay button container ── */
.pca-express-pay-btn {
  min-height: 48px;
  border-radius: var(--border-radius-sm, 8px);
  overflow: hidden;
  /* Stripe iframe inherits border-radius */
}

.pca-express-pay-btn iframe {
  border-radius: var(--border-radius-sm, 8px) !important;
}


/* ── "or continue to checkout" divider ── */
.pca-express-pay-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0;
  font-size: 0.8125rem;
  color: #9ca3af;
  text-transform: lowercase;
  user-select: none;
}

.pca-express-pay-divider::before,
.pca-express-pay-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    #e5e7eb 20%,
    #e5e7eb 80%,
    transparent
  );
}


/* ── Book Now (secondary CTA in Step 3) ──
   Inherits .btn-primary-cta from booking-instant.css
   but with a slightly softer visual weight so Apple Pay
   reads as the primary action. */
.pca-express-step3-ctas .btn-primary-cta {
  margin-top: 0;
}

/* Micro-label under Book Now */
.pca-express-step3-ctas .step2-cta-micro {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--color-muted, #6b7280);
  margin-top: 4px;
  margin-bottom: 10px;
}

/* Reserve Now — only gets a micro label, no extra spacing needed */
.pca-express-step3-ctas .step2-reserve-btn {
  margin-top: 0;
}

/* Micro-label under Reserve Now */
.pca-express-step3-ctas .step2-cta-micro:last-of-type {
  margin-bottom: 0;
}


/* ======================================================
   Trust signal — secure payment badge
   ====================================================== */
.pca-express-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
}

.pca-express-trust svg {
  flex-shrink: 0;
  color: #9ca3af;
}


/* ======================================================
   Error message — recoverable, not scary
   Friendly color, icon space, clear action
   ====================================================== */
.pca-express-pay-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 12px 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #92400e;
  background: #fffbeb;
  border-radius: 8px;
  border: 1px solid #fde68a;
}

.pca-express-pay-error[hidden] {
  display: none;
}

/* Inline retry button */
.pca-express-retry-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 16px;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  background: transparent;
  color: #92400e;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  -webkit-appearance: none;
}
.pca-express-retry-btn:active {
  background: #fef3c7;
}

/* Warning icon (prepended by JS) */
.pca-express-pay-error::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23d97706'%3E%3Cpath fill-rule='evenodd' d='M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}


/* ======================================================
   #7: Green savings pill badge
   ====================================================== */
.pca-express-savings-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: #ecfdf5;
  color: #059669;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  vertical-align: middle;
  margin-left: 2px;
}


/* ======================================================
   #14: Contextual nudge line
   ====================================================== */
.pca-express-step3-nudge {
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
  margin: 0 0 8px;
  padding: 0;
}
.pca-express-step3-nudge:empty {
  display: none;
}


/* ======================================================
   #4: Processing state — dim secondary CTAs while wallet opens
   ====================================================== */
.pca-express-step3-ctas.is-wallet-processing .btn-primary-cta,
.pca-express-step3-ctas.is-wallet-processing .step2-reserve-btn,
.pca-express-step3-ctas.is-wallet-processing .pca-express-pay-divider,
.pca-express-step3-ctas.is-wallet-processing .step2-cta-micro {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.2s ease;
}


/* ======================================================
   #15: Progress bar — logarithmic advance during AJAX
   ====================================================== */
.pca-express-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: #059669;
  border-radius: 0 1px 1px 0;
  width: 0%;
  transition: width 0.3s ease-out, opacity 0.3s ease;
  z-index: 1;
}


/* ======================================================
   #2: Apple Pay button entrance animation
   Subtle scale+glow draws the eye to the primary CTA
   ====================================================== */
#pca-express-step3-content.is-revealed .pca-express-pay-btn {
  animation: pca-ep-wallet-entrance 0.5s ease-out 0.35s both;
}
@keyframes pca-ep-wallet-entrance {
  0%   { transform: scale(0.97); box-shadow: 0 0 0 0 rgba(0,0,0,0.15); }
  50%  { transform: scale(1.01); box-shadow: 0 0 0 4px rgba(0,0,0,0.06); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}


/* ======================================================
   #3: Animated dot ellipsis on "Preparing your booking"
   CSS-only — communicates activity, not just existence
   ====================================================== */
.pca-express-step3-preparing::after {
  content: '';
  animation: pca-ep-dots 1.4s steps(4, end) infinite;
}
@keyframes pca-ep-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}


/* ======================================================
   #1: Post-payment success overlay
   Animated checkmark + "Booking confirmed!"
   ====================================================== */
.pca-express-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: pca-ep-overlay-in 0.3s ease-out both;
}
.pca-express-success-overlay[hidden] { display: none !important; }

.pca-express-success-content { text-align: center; }

.pca-express-checkmark {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
}
.pca-express-checkmark circle {
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  animation: pca-ep-circle-draw 0.5s ease-out 0.1s forwards;
}
.pca-express-checkmark path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: pca-ep-check-draw 0.35s ease-out 0.45s forwards;
}
@keyframes pca-ep-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pca-ep-circle-draw { to { stroke-dashoffset: 0; } }
@keyframes pca-ep-check-draw  { to { stroke-dashoffset: 0; } }

.pca-express-success-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px;
}
.pca-express-success-sub {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}


/* ======================================================
   #12: Safe area bottom padding (iPhone home indicator)
   ====================================================== */
@media (max-width: 768px) {
  .pca-express-step3:not([hidden]) {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}


/* ======================================================
   Reduced motion
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
  .pca-express-step3:not([hidden]),
  .pca-skeleton-row,
  .pca-express-step3-preparing,
  .pca-express-step3-preparing::after,
  .pca-express-step3-skeleton.is-resolving,
  #pca-express-step3-content.is-revealed,
  #pca-express-step3-content.is-revealed .pca-express-pay-btn,
  .pca-express-success-overlay,
  .pca-express-checkmark circle,
  .pca-express-checkmark path {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .pca-express-step3-preparing::after {
    content: '...' !important;
  }
}