/* =========================================================================
   SENDPK.COM — Pricing page styles (price.php only)
   -------------------------------------------------------------------------
   Page-specific styling only. Colours, radii, shadows and fonts are read
   from the shared design tokens in theme.css (:root) — nothing here
   redefines or overrides the global stylesheet. Everything is scoped
   under #pricePage so it can never leak onto other pages. Mirrors the
   sidebar/shell structure of assets/css/api-styles.css (api.php) but the
   right panel swaps content on click instead of scrolling (see price-page.js).
   ========================================================================= */

#pricePage {
  --price-header-offset: 96px; /* topbar + sticky navbar, see api-styles.css */
  font-size: 15.5px;
  line-height: 1.7;
  /* Same green glow as .hero on index.php (theme.css --section-glow),
     anchored to this box so it only shows near the page's top, not
     repeated further down as panels get taller. */
  background: var(--section-glow), var(--wa-surface);
}

/* =========================================================================
   LAYOUT — sticky sidebar + swappable content column
   ========================================================================= */
.price-shell { display: flex; align-items: flex-start; max-width: 1320px; margin: 0 auto; }
.price-sidebar {
  width: 300px; flex-shrink: 0;
  position: sticky; top: var(--price-header-offset); align-self: flex-start;
  max-height: calc(100vh - var(--price-header-offset) - 20px);
  overflow-y: auto;
  padding: 1.5rem 1rem 3rem 0;
}
.price-main { flex: 1; min-width: 0; padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem) 5rem; }

.price-sidebar-head { padding: 0 .6rem 1rem; }
.price-sidebar-head h2 { font-size: 1.15rem; font-weight: 800; margin: .4rem 0 0; }

.price-nav { list-style: none; padding: 0; margin: 0; }
.price-nav li a {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .7rem; border-radius: 10px; font-size: .92rem; color: var(--wa-body); font-weight: 600;
  border-left: 2.5px solid transparent; margin-bottom: .25rem;
}
.price-nav li a:hover { background: var(--wa-page); color: var(--wa-ink); }
.price-nav li a.active { background: rgba(34, 197, 94, .12); color: var(--wa-teal-dark); border-left-color: var(--wa-green); font-weight: 700; }
.price-nav li a i { width: 18px; text-align: center; font-size: .95rem; color: #1da851; flex-shrink: 0; }
.price-nav li a .price-nav-sub { display: block; font-size: .74rem; font-weight: 500; color: var(--wa-muted); margin-top: .1rem; }
.price-nav li a.active .price-nav-sub { color: var(--wa-teal); }

.price-sidebar-cta {
  margin-top: 1.2rem; padding: 1.1rem; text-align: center;
  background: var(--wa-page); border: 1px solid var(--wa-line); border-radius: var(--radius-card);
}
.price-sidebar-cta p { font-size: .85rem; color: var(--wa-muted); margin: 0 0 .7rem; font-weight: 600; }

/* =========================================================================
   PANELS — only one visible at a time, toggled by price-page.js
   ========================================================================= */
.price-panel { display: none; }
.price-panel.active { display: block; animation: priceFadeIn .25s ease; }
@keyframes priceFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.price-lead { color: var(--wa-body); font-size: 1.05rem; max-width: 760px; margin: .5rem 0 1.5rem; }

.price-panel h2 { font-size: 1.9rem; margin: .5rem 0 0; }

/* =========================================================================
   PRICING TABLE
   ========================================================================= */
.price-table-wrap { overflow-x: auto; border: 1px solid var(--wa-line); border-radius: var(--radius-card); margin-bottom: 1.75rem; }
table.price-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
table.price-table th {
  background: var(--wa-page); text-align: left; padding: .75rem 1rem; font-weight: 700;
  border-bottom: 2px solid var(--wa-line); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wa-muted);
}
table.price-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--wa-line); vertical-align: middle; color: var(--wa-body); }
table.price-table tbody tr:last-child td { border-bottom: none; }
table.price-table tr.price-row-popular { background: rgba(34, 197, 94, .06); }
table.price-table td.price-pkg-name { font-weight: 700; color: var(--wa-ink); white-space: nowrap; }
table.price-table td.price-pkg-name .price-pop-tag {
  display: inline-block; margin-left: .5rem; background: var(--wa-green); color: var(--wa-ink);
  font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .15rem .5rem; border-radius: 50rem; vertical-align: middle;
}
table.price-table td.price-amount { font-weight: 700; color: var(--wa-teal-dark); white-space: nowrap; }
table.price-table td.price-cta { text-align: right; white-space: nowrap; }

/* =========================================================================
   INFO CARDS — requirements / delivery notes, two-up on desktop
   ========================================================================= */
.price-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.75rem; }

.price-card { background: #fff; border: 1px solid var(--wa-line); border-radius: var(--radius-card); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); height: 100%; }
.price-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .9rem; display: flex; align-items: center; gap: .55rem; }
.price-card h3 i { color: var(--wa-teal); }
.price-card.price-alert h3 i { color: #c07d1f; }

/* Prefixed with .price-card (not just .price-note-list) so this beats theme.css's
   ".price-card ul li" rule (a homepage pricing-card component that happens to
   share the .price-card class name) on CSS specificity instead of losing to it. */
.price-card .price-note-list { list-style: none; padding: 0; margin: 0; }
.price-card .price-note-list li {
  display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; font-size: .88rem; color: var(--wa-body);
  border-bottom: 1px dashed var(--wa-line);
}
.price-note-list li:last-child { border-bottom: none; padding-bottom: 0; }
.price-note-list li i { color: #c07d1f; margin-top: .2rem; flex-shrink: 0; }
/* A positive/reassuring note inside an otherwise cautionary .price-note-list (CSP forbids style="" attributes) */
.price-note-list li i.price-icon-positive { color: var(--wa-green); }

/* Multi-paragraph note content (e.g. the ported-number bullet's "watch why" +
   good-news explanation) nested inside a single .price-note-list <li> */
.price-note-list li > div p { margin: 0 0 .35rem; }
.price-note-list li > div p:last-child { margin-bottom: 0; }
.price-note-list .price-yt-link { color: #FF0000; font-weight: 700; }
.price-note-list .price-yt-link:hover { color: #CC0000; }
/* Extra .price-note-list prefix needed: plain ".price-yt-link i" alone loses
   to the more specific ".price-note-list li i" rule above (1 class + 2
   elements beats 1 class + 1 element) and would render amber instead of red. */
.price-note-list .price-yt-link i { color: #FF0000; margin-right: .3rem; margin-top: 0; }
.price-good-news {
  display: block; margin-top: .4rem; padding: .6rem .75rem;
  background: rgba(34, 197, 94, .07); border-radius: 8px;
  font-size: .82rem; color: var(--wa-body);
}
.price-good-news i { margin-right: .4rem; }
.price-good-news code { background: var(--wa-page); padding: .1rem .35rem; border-radius: 4px; color: var(--wa-teal-dark); font-size: .78rem; }

/* =========================================================================
   VERIFICATION REQUIREMENTS — compact inline pills, some plain, some a
   link, some opening a WhatsApp-bubble-style info popup (price.php only,
   rendered by render_verification_requirements() so every service panel
   stays in sync from one data source).
   ========================================================================= */
.price-verify-intro { color: var(--wa-muted); font-size: .9rem; line-height: 1.6; margin: 0 0 1.1rem; }

/* Same specificity fix as .price-note-list above: .price-card ul(li) in
   theme.css otherwise wins and silently zeroes out this pill's padding. */
.price-card .price-verify-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .7rem;
}
.price-card .price-verify-list .price-verify-item {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--wa-surface); border: 1px solid var(--wa-line);
  border-radius: 50rem; padding: .6rem 1.15rem .6rem 1rem;
  font-size: .95rem; font-weight: 600; color: var(--wa-body);
  box-shadow: var(--shadow-sm);
}
.price-verify-item > i.fa-circle-check { color: var(--wa-green); flex-shrink: 0; font-size: 1.15rem; }
/* Direct-child combinator (>) is required here, not a plain descendant selector:
   the popup's own Download/Upload buttons (.price-verify-popup-actions .btn)
   also live inside this same <li>, several levels deeper, and a bare
   ".price-verify-item a" was wiping out their border/background/padding too. */
.price-verify-item > a,
.price-verify-item > .price-verify-trigger {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.price-verify-item > a:hover,
.price-verify-item > .price-verify-trigger:hover { color: var(--wa-teal-dark); }
.price-verify-item .price-verify-trigger i.fa-circle-info { color: var(--wa-muted); font-size: .85rem; }
.price-verify-item .price-verify-trigger:hover i.fa-circle-info { color: var(--wa-teal); }

/* WhatsApp-bubble-style popover with the info for one requirement item */
.price-verify-popup {
  display: none;
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(320px, calc(100vw - 2.5rem));
  background: var(--wa-bubble); border-radius: var(--radius-bubble); border-top-left-radius: 3px;
  padding: 1rem 1.1rem; box-shadow: var(--shadow-md); z-index: 60;
  text-align: left;
}
.price-verify-popup.show { display: block; }
.price-verify-popup::before {
  content: ""; position: absolute; top: -8px; left: 24px;
  border: 8px solid transparent; border-bottom-color: var(--wa-bubble); border-top: none;
}
.price-verify-popup-close {
  position: absolute; top: .4rem; right: .55rem;
  background: none; border: none; padding: .2rem .4rem; margin: 0;
  font-size: 1.2rem; line-height: 1; color: var(--wa-muted); cursor: pointer;
}
.price-verify-popup-close:hover { color: var(--wa-ink); }
.price-verify-popup-title { font-weight: 700; font-size: .88rem; color: var(--wa-teal-dark); margin: 0 0 .5rem; padding-right: 1.2rem; }
.price-verify-popup-lines { list-style: disc; margin: 0 0 .8rem; padding-left: 1.1rem; }
.price-verify-popup-lines li { font-size: .82rem; line-height: 1.5; color: var(--wa-body); margin-bottom: .3rem; }
.price-verify-popup-lines li:last-child { margin-bottom: 0; }
.price-verify-popup-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
/* The site's default .btn-wa/.btn-wa-outline are green-on-green here (popup bg
   is --wa-bubble, a pale green) and nearly disappear — override with high-
   contrast dark-teal styling scoped to just this popup. */
/* .btn-sm alone doesn't shrink these: theme.css's plain .btn rule (padding
   .7rem 1.5rem) loads after bootstrap's .btn-sm and wins on equal specificity,
   so size must be set explicitly here instead of relying on the btn-sm class. */
.price-verify-popup-actions .btn { box-shadow: none; font-weight: 700; padding: .35rem .8rem; font-size: .78rem; }
.price-verify-popup-actions .btn-wa-outline {
  background: var(--wa-surface); border-color: var(--wa-teal-dark); color: var(--wa-teal-dark);
}
.price-verify-popup-actions .btn-wa-outline:hover {
  background: var(--wa-teal-dark); border-color: var(--wa-teal-dark); color: #fff; transform: none;
}
.price-verify-popup-actions .btn-wa {
  background: var(--wa-teal-dark); border-color: var(--wa-teal-dark); color: #fff;
}
.price-verify-popup-actions .btn-wa:hover {
  background: var(--wa-ink); border-color: var(--wa-ink); color: #fff; transform: none;
}

/* Compliance / restriction callout matching .api-alert-card in api-styles.css */
.price-alert-banner { background: #fff8ee; border: 1px solid #f5d9a8; border-radius: var(--radius-card); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.price-alert-banner p { color: #8a5a12; font-size: .88rem; margin: 0; }
.price-alert-banner i { color: #c07d1f; }

/* Meta / secondary pricing table (e.g. WhatsApp conversation charges) */
.price-subhead { font-size: 1.05rem; font-weight: 700; margin: 0 0 .3rem; }
.price-subnote { color: var(--wa-muted); font-size: .88rem; margin: 0 0 .9rem; }

/* CTA buttons inside table rows / cards */
.price-panel .btn { white-space: nowrap; }

.price-support {
  background: linear-gradient(135deg, var(--wa-teal-dark), var(--wa-teal)); color: #fff;
  border-radius: var(--radius-card); padding: 1.75rem 2rem; margin-top: .5rem;
}
.price-support p { color: rgba(255, 255, 255, .88); margin: 0; }
.price-support h3 { color: #fff; margin: 0 0 .4rem; }

/* Mobile floating sidebar toggle — mirrors .api-mobile-toggle so both docs
   pages behave identically; kept below the site's sticky navbar (z-index 1020). */
.price-mobile-toggle {
  display: none; position: fixed; top: calc(var(--price-header-offset) + 10px); left: 14px; z-index: 1000;
  width: 44px; height: 44px; border-radius: 50%; background: var(--wa-green); color: #fff; border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2); align-items: center; justify-content: center; font-size: 1.1rem;
}
.price-backdrop {
  display: none; position: fixed; top: var(--price-header-offset); left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .4); z-index: 990;
}
.price-backdrop.show { display: block; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991.98px) {
  .price-sidebar {
    position: fixed; top: var(--price-header-offset); left: 0;
    height: calc(100vh - var(--price-header-offset)); max-height: calc(100vh - var(--price-header-offset));
    width: 300px; background: #fff; z-index: 1000;
    transform: translateX(-100%); transition: transform .25s ease; padding: 1.5rem 1rem 3rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
  }
  .price-sidebar.show { transform: translateX(0); box-shadow: 0 0 30px rgba(0, 0, 0, .25); }
  .price-mobile-toggle { display: flex; }
  /* Top padding must clear the fixed toggle button's own footprint (44px
     tall, starting 10px below the header) — otherwise it overlaps the
     panel's eyebrow/title instead of sitting in its own clear space. */
  .price-main { padding: 4.5rem 1.1rem 4rem; }
  .price-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  #pricePage { font-size: 14.5px; }
  .price-panel h2 { font-size: 1.5rem; }
  .price-support { padding: 1.4rem; text-align: center; }
  table.price-table td.price-cta { text-align: left; }
}