/* Page styles: pricing (migrated from inline <style>) */

/*
 * ============================================================
 * PRICING PAGE — Additional styles only
 * Uses style.css design system: same vars, same classes.
 * New classes prefixed rap2- to avoid ANY conflict.
 * ============================================================
 */

/* ── Page loader (matches index.html loader pattern) ── */
#rcl-overlay {
  position:fixed;inset:0;background:rgb(212,212,212);
  display:flex;align-items:center;justify-content:center;z-index:9999;
}
#rcl-box {
  position:relative;width:110px;height:110px;
  display:flex;align-items:center;justify-content:center;
}
#rcl-spinner {
  position:absolute;inset:0;border-radius:50%;
  border:5px solid rgba(190,20,60,0.2);
  border-top-color:#be143c;border-right-color:#8b0000;
  animation:rcl-spin 1.1s linear infinite;
}
#rcl-inner-ring {
  position:absolute;inset:14px;border-radius:50%;
  border:3px solid rgba(190,20,60,0.12);
  border-bottom-color:#d4204f;
  animation:rcl-spin-rev 1.6s linear infinite;
}
@keyframes rcl-spin  { to{transform:rotate(360deg)}  }
@keyframes rcl-spin-rev { to{transform:rotate(-360deg)} }
#rcl-icon-wrap {
  width:52px;height:52px;border-radius:50%;background:#be143c;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px #8b0000;z-index:1;
  animation:rcl-pulse 2s ease-in-out infinite;
}
@keyframes rcl-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
#rcl-icon-wrap img { width:50px;height:50px;object-fit:contain; }
#rcl-label {
  position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);
  font-size:12px;color:#be143c;letter-spacing:2px;white-space:nowrap;
  font-family:sans-serif;animation:rcl-blink 1.4s ease-in-out infinite;
}
@keyframes rcl-blink { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── SEO note inside pricing section ── */
.rap2-seo-note {
  margin-top:12px;
  padding:14px 18px;
  background:rgba(0,87,255,0.05);
  border:1px solid rgba(0,87,255,0.13);
  border-radius:12px;
  font-size:0.8rem;
  color:var(--text-muted,#6B7280);
  line-height:1.6;
}
.rap2-seo-note strong {
  display:block;
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--text,#1A1A2E);
  margin-bottom:3px;
}

/* ── WhatsApp CTA button (extra style on top of .btn) ── */
.rap2-wa-ico {
  width:18px;height:18px;fill:currentColor;flex-shrink:0;display:block;
}
.rap2-wa-ico-lg {
  width:24px;height:24px;fill:#fff;flex-shrink:0;display:block;
}

/* ── Payment Gateway Card ── */
.rap2-pg-section {
  padding:80px 0;
  background:var(--bg-alt,#F4F7FF);
}
.rap2-pg-card {
  background:#fff;
  border:1px solid var(--border,#E5E9F2);
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--cs,0 4px 24px rgba(0,87,255,0.08));
  position:relative;
  margin-top:48px;
}
.rap2-pg-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#0057FF,#00C2FF,#be143c,#0057FF);
  background-size:200%;
  animation:rap2-bflow 3s linear infinite;
}
@keyframes rap2-bflow { 0%{background-position:0%} 100%{background-position:200%} }

.rap2-pg-top {
  padding:36px 40px 28px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}
.rap2-pg-logo {
  width:60px;height:60px;
  background:linear-gradient(135deg,#072654,#1a56db);
  border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;flex-shrink:0;box-shadow:0 4px 16px rgba(7,38,84,0.2);
}
.rap2-pg-info h4 {
  font-family:var(--font-head,'Syne',sans-serif);
  font-size:1.15rem;font-weight:800;color:var(--text,#1A1A2E);
  margin:0 0 5px;line-height:1.3;
}
.rap2-pg-info p {
  font-size:0.82rem;color:var(--text-muted,#6B7280);line-height:1.65;
  max-width:540px;margin:0;
}
.rap2-pg-badges {
  display:flex;flex-direction:column;gap:8px;flex-shrink:0;
}
.rap2-pg-bdg {
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 13px;border-radius:100px;
  font-size:0.7rem;font-weight:700;white-space:nowrap;line-height:1.4;
}
.rap2-pg-bdg--bl { background:rgba(0,87,255,0.08);color:#0057FF;border:1px solid rgba(0,87,255,0.2); }
.rap2-pg-bdg--gr { background:rgba(16,185,129,0.08);color:#059669;border:1px solid rgba(16,185,129,0.2); }
.rap2-pg-bdg--or { background:rgba(190,20,60,0.08);color:#be143c;border:1px solid rgba(190,20,60,0.2); }

.rap2-pg-methods {
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:0 40px 24px;
}
.rap2-pg-method {
  display:flex;align-items:center;gap:6px;
  background:var(--bg-alt,#F4F7FF);border:1px solid var(--border,#E5E9F2);
  border-radius:100px;padding:6px 14px;
  font-size:0.78rem;font-weight:600;color:var(--text,#1A1A2E);
}
.rap2-pg-divider {
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border,#E5E9F2),transparent);
  margin:0 40px;border:none;
}

/* ── Marquee Carousels ── */
.rap2-marquee-section { padding:20px 0; }
.rap2-mrow {
  display:flex;overflow:hidden;padding:6px 0;position:relative;
}
.rap2-mrow::before,.rap2-mrow::after {
  content:'';position:absolute;top:0;bottom:0;width:80px;
  z-index:2;pointer-events:none;
}
.rap2-mrow::before { left:0;background:linear-gradient(90deg,#fff,transparent); }
.rap2-mrow::after  { right:0;background:linear-gradient(-90deg,#fff,transparent); }
.rap2-mtrk {
  display:flex;gap:12px;
  animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform;flex-shrink:0;
}
.rap2-mtrk--ltr { animation-name:rap2-ltr;animation-duration:28s; }
.rap2-mtrk--rtl { animation-name:rap2-rtl;animation-duration:24s; }
.rap2-mtrk--slow { animation-duration:32s!important; }
@keyframes rap2-ltr { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes rap2-rtl { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
.rap2-mrow:hover .rap2-mtrk { animation-play-state:paused; }

.rap2-chip {
  display:flex;align-items:center;gap:8px;
  border-radius:100px;padding:8px 16px 8px 10px;
  white-space:nowrap;transition:all 0.25s ease;cursor:default;flex-shrink:0;
  background:#fff;border:1px solid var(--border,#E5E9F2);
  box-shadow:var(--cs,0 2px 8px rgba(0,87,255,0.06));
}
.rap2-chip:hover {
  border-color:var(--primary,#0057FF);
  box-shadow:var(--csh,0 8px 24px rgba(0,87,255,0.14));
  transform:translateY(-2px);
}
.rap2-chip--social { background:#fff9f7;border-color:rgba(190,20,60,0.1); }
.rap2-chip--social:hover { border-color:rgba(190,20,60,0.35); }
.rap2-chip--pay { background:#f5fff9;border-color:rgba(16,185,129,0.12); }
.rap2-chip--pay:hover { border-color:rgba(16,185,129,0.35); }
.rap2-chip-ico {
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;
}
.rap2-chip-nm {
  font-size:0.78rem;font-weight:600;color:var(--text,#1A1A2E);line-height:1;
}

/* ── WA Contact CTA ── */
.rap2-wa-cta {
  margin-top:72px;
  background:rgba(37,211,102,0.05);
  border:1px solid rgba(37,211,102,0.2);
  border-radius:var(--radius,16px);
  padding:48px 32px;text-align:center;position:relative;overflow:hidden;
}
.rap2-wa-cta::before {
  content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(37,211,102,0.08),transparent 70%);
  pointer-events:none;
}
.rap2-wa-cta h3 {
  font-family:var(--font-head,'Syne',sans-serif);
  font-size:1.6rem;font-weight:800;margin-bottom:10px;
  color:var(--text,#1A1A2E);line-height:1.2;
}
.rap2-wa-cta p {
  font-size:0.9rem;color:var(--text-muted,#6B7280);
  margin:0 auto 28px;max-width:440px;
}
.rap2-wa-btn {
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 40px;
  background:linear-gradient(120deg,#25D366,#128C7E);
  color:#fff;border-radius:100px;
  font-size:1rem;font-weight:700;text-decoration:none;
  box-shadow:0 8px 32px rgba(37,211,102,0.3);
  transition:all var(--tr,0.3s ease);
  font-family:var(--font,'Plus Jakarta Sans',sans-serif);
}
.rap2-wa-btn:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 48px rgba(37,211,102,0.45);
}

/* ── Responsive fixes ── */
@media(max-width:768px) {
  .rap2-pg-top { grid-template-columns:auto 1fr;gap:16px; }
  .rap2-pg-badges { display:none; }
  .rap2-pg-top,.rap2-pg-methods { padding-left:20px;padding-right:20px; }
  .rap2-pg-divider { margin:0 20px; }
  .rap2-wa-cta { padding:36px 24px; }
  .rap2-wa-btn { padding:14px 28px;font-size:0.9rem; }
  .rap2-wa-cta h3 { font-size:1.3rem; }
}