/* =========================================================================
   HOME PRICING — WhatsApp rate chooser modal
   Loaded on index.php via theme_head()'s $extraCss. All colors come from
   theme.css's :root tokens. No inline styles/scripts (site CSP is
   style-src/script-src 'self' — see README): the modal is toggled purely by
   class + the [hidden] attribute from assets/js/home-pricing.js.
   ========================================================================= */

.pc-modal {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  opacity: 0; transition: opacity .25s var(--wa-ease);
}
.pc-modal[hidden] { display: none; }
.pc-modal.is-open { opacity: 1; }

.pc-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 40, 24, .55);
  cursor: pointer;
}

.pc-modal-dialog {
  position: relative; width: 100%; max-width: 440px;
  background: var(--wa-surface); border: 1px solid var(--wa-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  padding: 2rem 1.6rem 1.6rem;
  transform: translateY(16px) scale(.97);
  transition: transform .28s var(--wa-ease);
}
.pc-modal.is-open .pc-modal-dialog { transform: translateY(0) scale(1); }

.pc-modal-close {
  position: absolute; top: .75rem; right: .75rem;
  width: 34px; height: 34px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--wa-soft); color: var(--wa-muted);
  font-size: .95rem; transition: background .2s ease, color .2s ease;
}
.pc-modal-close:hover { background: var(--wa-line); color: var(--wa-ink); }

.pc-modal-head { text-align: center; margin-bottom: 1.4rem; }
.pc-modal-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-bottom: .7rem;
  border-radius: 50%; font-size: 1.5rem;
  background: rgba(34, 197, 94, .12); color: var(--wa-teal);
}
.pc-modal-head h3 { font-size: 1.25rem; margin: 0 0 .3rem; }
.pc-modal-head p { color: var(--wa-muted); font-size: .93rem; margin: 0; }

.pc-modal-options { display: flex; flex-direction: column; gap: .75rem; }

.pc-option {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.1rem; text-align: start;
  border: 1px solid var(--wa-line); border-radius: var(--radius-bubble);
  background: var(--wa-surface); color: var(--wa-body);
  transition: border-color .2s var(--wa-ease), box-shadow .2s var(--wa-ease),
              transform .2s var(--wa-ease), background-color .2s var(--wa-ease);
}
.pc-option:hover, .pc-option:focus-visible {
  border-color: var(--wa-green); background: #F3FBF6;
  box-shadow: var(--shadow-sm); transform: translateY(-2px);
  color: var(--wa-body); outline: none;
}

.pc-option-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(34, 197, 94, .12); color: var(--wa-teal); font-size: 1.15rem;
}
.pc-option-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.pc-option-text strong { color: var(--wa-ink); font-size: 1rem; font-weight: 700; }
.pc-option-text span { color: var(--wa-muted); font-size: .84rem; }
.pc-option-arrow { flex: 0 0 auto; color: var(--wa-muted); transition: transform .2s var(--wa-ease), color .2s var(--wa-ease); }
.pc-option:hover .pc-option-arrow, .pc-option:focus-visible .pc-option-arrow {
  color: var(--wa-teal); transform: translateX(3px);
}

body.pc-modal-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pc-modal, .pc-modal-dialog, .pc-option, .pc-option-arrow { transition: none; }
  .pc-modal-dialog { transform: none; }
}

/* Service icon in the pricing-card titles */
.price-card h3 .pc-title-icon { color: var(--wa-teal); margin-right: .15rem; }