/* ==========================================================================
   9wickets Pro — Inner page premium components (page hero + content zones)
   Loaded on all pages (with premium-home.css component classes available).
   ========================================================================== */

/* ---- Page hero band ---- */
.pp-page-hero {
  position: relative; background: var(--pp-grad-maroon); color: #fff;
  padding: clamp(28px, 3.6vw, 52px) 0; overflow: hidden; text-align: center;
}
.pp-page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 60% at 10% 0%, rgba(212, 175, 55, 0.16), transparent 60%),
    radial-gradient(46% 60% at 100% 100%, rgba(146, 33, 63, 0.35), transparent 62%);
}
.pp-page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);
}
.pp-page-hero > .pp-container { position: relative; z-index: 1; }
.pp-page-hero__crumb {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  font-size: 0.82rem; color: rgba(247, 241, 230, 0.68); margin-bottom: 12px;
  padding: 6px 15px; border-radius: 999px; background: rgba(212, 175, 55, 0.1); border: 1px solid rgba(212, 175, 55, 0.28);
}
.pp-page-hero__crumb a { color: var(--pp-gold-300); text-decoration: none; }
.pp-page-hero__crumb i { font-style: normal; opacity: 0.45; }
.pp-page-hero h1 { font-weight: 800; font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.7rem); margin: 0 0 10px; color: #fff; line-height: 1.2; }
.pp-page-hero h1 .pp-gold { color: var(--pp-gold-300); }
.pp-page-hero p { color: rgba(247, 241, 230, 0.82); max-width: 60ch; margin: 0 auto; line-height: 1.65; font-size: clamp(0.98rem, 0.95rem + 0.3vw, 1.08rem); }

/* ---- Content zones (full-width band, centered boxed content via Elementor) ---- */
.pp-zone { padding: clamp(30px, 4vw, 56px) 0; position: relative; }
.pp-zone--cream { background: var(--pp-cream); }
.pp-zone--white { background: #fff; }
.pp-zone--plum { background: var(--pp-grad-plum); color: var(--pp-on-dark); }
.pp-zone__head { text-align: center; max-width: 720px; margin: 0 auto clamp(20px, 3vw, 34px); }
.pp-zone__head .pp-eyebrow { justify-content: center; }
.pp-zone__head .pp-subtitle { margin-inline: auto; }

/* ---- Premium wrapper for theme shortcode output (agent list / faq) ---- */
.pp-zone .velki-agent-list-nav,
.pp-zone .agents-nav,
.pp-zone .agent-category-nav { justify-content: center !important; }

/* Center agent cards: full rows fill left-to-right, short/partial rows center */
.pp-zone .velki-agent-list-container {
  display: flex !important; flex-wrap: wrap; justify-content: center; align-items: stretch;
}
.pp-zone .velki-agent-card { flex: 0 1 368px; max-width: 100%; }

/* Search results page: the agent list sits inside the Bootstrap .container
   (~738px at tablet), which is a few px too narrow for the default centered
   two-up 368px layout, so it collapses to a lone centered card and the
   full-width search header appears to "stick out" past it. Let the cards grow
   to fill the results width so they stay aligned with the header at every width.
   Scoped to .velki-agent-search-results → the standalone agent-list page is unaffected. */
.velki-agent-search-results .velki-agent-list-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.velki-agent-search-results .velki-agent-card { flex: initial; max-width: none; }

/* ==========================================================================
   PREMIUM AGENT CARD PILLS + AGENT-DETAILS MODAL
   Overrides the theme's inline card/modal CSS (functions.php <style>).
   Scoped via .pp-zone so specificity (and !important where the theme uses it)
   wins over the later-in-source inline rules.
   ========================================================================== */

/* ---------- Card shell ---------- */
.pp-zone .velki-agent-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 46%),
    linear-gradient(105deg, #54244f 0%, #431d42 52%, #2c1430 100%);
  border: 1px solid rgba(246, 215, 122, 0.28);
  border-radius: 16px;
  padding: 15px 18px 15px 22px;
  gap: 14px;
  box-shadow: 0 10px 26px rgba(20, 9, 24, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
/* gold accent stripe on the left edge */
.pp-zone .velki-agent-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #f6d77a, #d4af37 55%, #b8860b);
  opacity: 0.92; z-index: 3;
}
/* diagonal shine sweep on hover */
.pp-zone .velki-agent-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-18deg); pointer-events: none; z-index: 2;
  transition: left 0.6s ease;
}
body:not(.modal-open) .pp-zone .velki-agent-card:hover {
  transform: translateY(-3px);
  border-color: rgba(246, 215, 122, 0.6);
  box-shadow: 0 16px 34px rgba(20, 9, 24, 0.46), 0 0 0 1px rgba(246, 215, 122, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body:not(.modal-open) .pp-zone .velki-agent-card:hover::after { left: 130%; }

/* photo with gold ring */
.pp-zone .velki-agent-card .agent-photo-wrapper { position: relative; z-index: 4; }
.pp-zone .velki-agent-card .agent-photo-wrapper::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: linear-gradient(135deg, #f6d77a, #d4af37 55%, #b8860b); z-index: 0;
}
.pp-zone .velki-agent-card .agent-photo,
.pp-zone .velki-agent-card .agent-photo-placeholder {
  position: relative; z-index: 1;
  width: 50px; height: 50px;
  border: 2px solid #3a1838;
}
.pp-zone .velki-agent-card .agent-verified-badge {
  background: linear-gradient(180deg, #f6d77a, #d4af37) !important;
  color: #431d42 !important; border: 2px solid #431d42 !important;
  width: 18px !important; height: 18px !important; z-index: 2 !important;
}
.pp-zone .velki-agent-card .agent-verified-badge svg { width: 10px !important; height: 10px !important; }

/* name + crown */
.pp-zone .velki-agent-card .agent-name { font-size: 17px; font-weight: 800; letter-spacing: 0.2px; }
.pp-zone .velki-agent-card .agent-premium-crown {
  font-size: 13px;
  filter: drop-shadow(0 1px 2px rgba(184, 134, 11, 0.5));
}

/* right cluster: ID chip + gold toggle */
.pp-zone .velki-agent-card .agent-right { gap: 10px; }
.pp-zone .velki-agent-card .agent-id-section {
  gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: rgba(246, 215, 122, 0.12);
  border: 1px solid rgba(246, 215, 122, 0.34);
}
.pp-zone .velki-agent-card .agent-id-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #f6d77a; font-weight: 700;
}
.pp-zone .velki-agent-card .agent-id-value { color: #fff; font-size: 15px; font-weight: 800; }

.pp-zone .velki-agent-card .agent-contact-toggle {
  background: linear-gradient(135deg, #f6d77a, #d4af37 60%, #b8860b);
  border: none; color: #431d42; width: 34px; height: 34px;
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.4);
}
.pp-zone .velki-agent-card .agent-contact-toggle:hover { transform: scale(1.08); color: #2c1430; }
.pp-zone .velki-agent-card .agent-contact-toggle.active {
  background: linear-gradient(135deg, #f6d77a, #d4af37 60%, #b8860b);
  border: none; color: #431d42;
}

/* ---------- Modal backdrop ---------- */
.agent-modal-backdrop {
  background: rgba(24, 10, 26, 0.72) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}

/* ---------- Modal shell ---------- */
.pp-zone .agent-contact-section {
  border-radius: 22px;
  border: 1px solid rgba(246, 215, 122, 0.4);
  box-shadow: 0 40px 90px rgba(20, 9, 24, 0.66), 0 0 0 1px rgba(246, 215, 122, 0.12);
  max-width: 452px;
  background: #fbf9f4;
}
/* gold accent line across the very top */
.pp-zone .agent-contact-section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 6;
  background: linear-gradient(90deg, #b8860b, #f6d77a 50%, #b8860b);
}
@keyframes ppModalIn {
  from { opacity: 0; transform: translate(-50%, -44%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.pp-zone .agent-contact-section:not(.agent-contact-hidden) {
  animation: ppModalIn 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* modal header: plum band with gold glow + dot texture + gold hairline base */
.pp-zone .agent-contact-section .modal-header {
  position: relative; overflow: hidden;
  padding: 26px 24px 24px; gap: 16px;
  background: linear-gradient(135deg, #5c2856 0%, #431d42 48%, #260f28 100%);
  box-shadow: inset 0 -3px 0 0 rgba(246, 215, 122, 0.55);
}
.pp-zone .agent-contact-section .modal-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 85% at 14% -5%, rgba(246, 215, 122, 0.28), transparent 60%),
    radial-gradient(60% 90% at 108% 120%, rgba(212, 175, 55, 0.16), transparent 62%),
    radial-gradient(50% 80% at 100% 120%, rgba(146, 33, 63, 0.4), transparent 60%);
}
.pp-zone .agent-contact-section .modal-header::after {
  content: ""; position: absolute; inset: 0; opacity: 0.55; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent 80%);
  mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent 80%);
}
.pp-zone .agent-contact-section .modal-header > * { position: relative; z-index: 1; }

/* modal photo: double gold ring + soft halo */
.pp-zone .agent-contact-section .modal-photo { width: 64px; height: 64px; }
.pp-zone .agent-contact-section .modal-photo::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 210deg, #b8860b, #f6d77a, #d4af37, #f6d77a, #b8860b);
}
.pp-zone .agent-contact-section .modal-photo-img {
  position: relative; z-index: 1; width: 64px; height: 64px; border: 3px solid #2c1430;
  box-shadow: 0 0 0 6px rgba(246, 215, 122, 0.12);
}
.pp-zone .agent-contact-section .modal-verified-badge {
  background: linear-gradient(180deg, #f6d77a, #d4af37); color: #431d42; z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* modal title + group + ID medallion */
.pp-zone .agent-contact-section .modal-title {
  font-size: 22px; font-weight: 800; letter-spacing: 0.2px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}
.pp-zone .agent-contact-section .modal-group {
  display: inline-flex; align-self: flex-start; margin-top: 3px;
  color: #f6d77a; font-weight: 700; font-size: 12px; letter-spacing: 0.02em;
  padding: 3px 11px; border-radius: 999px;
  background: rgba(246, 215, 122, 0.13); border: 1px solid rgba(246, 215, 122, 0.32);
}
.pp-zone .agent-contact-section .modal-agent-id {
  margin-left: auto; align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 20px; font-weight: 800; color: #fff; line-height: 1.05;
  padding: 9px 16px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(246, 215, 122, 0.24), rgba(212, 175, 55, 0.08));
  border: 1px solid rgba(246, 215, 122, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(0, 0, 0, 0.22);
}
.pp-zone .agent-contact-section .modal-agent-id::before {
  content: "ID"; font-size: 9px; letter-spacing: 0.14em; color: #f6d77a; font-weight: 700; opacity: 0.95;
}

/* modal body */
.pp-zone .agent-contact-section .modal-body { padding: 22px 22px 12px; background: #fbf9f4; }
.pp-zone .agent-contact-section .contact-column { margin-bottom: 20px; }

/* section header: brand-tinted icon tile + short gold underline */
.pp-zone .agent-contact-section .contact-header {
  position: relative; gap: 11px;
  color: #2c1430 !important; font-size: 15px; font-weight: 800;
  padding-bottom: 13px; margin-bottom: 13px;
  border-bottom: 1px solid #efe6d4;
}
.pp-zone .agent-contact-section .contact-header::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 54px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #d4af37, #f6d77a);
}
.pp-zone .agent-contact-section .contact-header svg {
  width: 22px !important; height: 22px !important;
  padding: 7px; box-sizing: content-box; border-radius: 11px;
}
.pp-zone .agent-contact-section .whatsapp-column .contact-header svg { background: rgba(37, 211, 102, 0.14); }
.pp-zone .agent-contact-section .messenger-column .contact-header svg { background: rgba(0, 132, 255, 0.12); }

/* contact rows: white cards with a color-coded left accent bar */
.pp-zone .agent-contact-section .contact-item {
  position: relative; overflow: hidden;
  background: #fff !important;
  border: 1px solid #ece3d0;
  border-radius: 14px;
  padding: 12px 14px 12px 20px !important;
  margin-bottom: 10px;
  box-shadow: 0 6px 16px rgba(67, 29, 66, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pp-zone .agent-contact-section .contact-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #f6d77a, #d4af37);
}
.pp-zone .agent-contact-section .whatsapp-column .contact-item::before { background: linear-gradient(180deg, #34e07a, #1da851); }
.pp-zone .agent-contact-section .messenger-column .contact-item::before { background: linear-gradient(180deg, #37a0ff, #0066d6); }
.pp-zone .agent-contact-section .contact-item:hover {
  transform: translateY(-1px);
  border-color: #e9c46a; box-shadow: 0 10px 22px rgba(184, 134, 11, 0.16);
}
.pp-zone .agent-contact-section .contact-number {
  color: #2c1430 !important; font-weight: 800; font-size: 15.5px; letter-spacing: 0.3px;
}

/* Copy = outlined gold chip, Message = solid action pill */
.pp-zone .agent-contact-section .action-sep { display: none; }
.pp-zone .agent-contact-section .copy-btn {
  background: #fffdf7 !important; border: 1px solid #dccba0 !important; border-radius: 9px !important;
  padding: 7px 13px !important; color: #7a5b12 !important; font-size: 12.5px !important; font-weight: 800 !important;
  gap: 5px; transition: all 0.18s ease;
}
.pp-zone .agent-contact-section .copy-btn:hover {
  background: #fbf1d8 !important; border-color: #e9c46a !important; color: #8a6a12 !important;
}
.pp-zone .agent-contact-section .copy-btn.copied {
  background: #e8f7ec !important; border-color: #86d19b !important; color: #16a34a !important;
}
.pp-zone .agent-contact-section .message-btn {
  border-radius: 9px !important; padding: 8px 17px !important;
  font-size: 12.5px !important; font-weight: 800 !important; color: #fff !important;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.pp-zone .agent-contact-section .whatsapp-message-btn {
  background: linear-gradient(135deg, #25d366, #1da851) !important;
  box-shadow: 0 6px 16px rgba(29, 168, 81, 0.34);
}
.pp-zone .agent-contact-section .messenger-message-btn {
  background: linear-gradient(135deg, #0084ff, #0066d6) !important;
  box-shadow: 0 6px 16px rgba(0, 102, 214, 0.34);
}
.pp-zone .agent-contact-section .message-btn:hover { filter: brightness(1.07); transform: translateY(-1px); color: #fff !important; }

/* close: refined footer — red + bold */
.pp-zone .agent-contact-section .modal-close {
  padding: 16px 0 !important; color: #e11d48 !important; font-weight: 800;
  background: #f7f2e8 !important; border-top: 1px solid #eee2cd !important;
  transition: color 0.2s ease, background 0.2s ease;
}
.pp-zone .agent-contact-section .modal-close svg { stroke-width: 3 !important; }
.pp-zone .agent-contact-section .modal-close:hover { color: #be123c !important; background: #fdeef1 !important; }

/* Responsive */
@media (max-width: 600px) {
  .pp-page-hero { padding: 24px 0 26px; }
  .pp-page-hero h1 { font-size: clamp(1.45rem, 1rem + 3vw, 2rem); }
  .pp-zone { padding: 28px 0; }
  .pp-zone__head { margin-bottom: 20px; }
  .pp-zone .velki-agent-card { padding: 14px 16px 14px 19px; }
  .pp-zone .agent-contact-section .modal-header { padding: 20px 18px; gap: 12px; }
  .pp-zone .agent-contact-section .modal-body { padding: 16px 16px 8px; }
}

/* At ≤500px the theme flips the container to flex-direction:column, which would
   turn our 368px width-basis into a HEIGHT basis (giant tall cards). Reset it. */
@media (max-width: 500px) {
  .pp-zone .velki-agent-card { flex: 0 0 auto !important; }
}

/* ---- Agent pages: premium mobile polish ---- */
.pp-zone .agent-nav-pill { box-shadow: 0 2px 8px rgba(67, 29, 66, 0.08); }
.pp-zone .agent-nav-pill.active {
  background: linear-gradient(135deg, #f6d77a, #e9c46a) !important;
  color: #3a2a00 !important; border-color: #e9c46a !important;
  box-shadow: 0 6px 16px rgba(184, 134, 11, 0.28) !important;
}
@media (max-width: 500px) {
  /* left-align the agent name for a tighter, cleaner premium row */
  .pp-zone .velki-agent-card .agent-info { align-items: flex-start !important; }
  .pp-zone .velki-agent-card .agent-name { text-align: left; }
}