/* ======================================================
   RoneeWeb — package.css (Gradient + Glass Hybrid Final)
   ====================================================== */

:root{
  --rw-blue: #0d3b8f;
  --rw-green: #00b386;
  --rw-accent: #17c2b2;
  --rw-dark: #071028;
  --rw-white-strong: #f7f9fc;
  --rw-white-card: #ffffff;
  --rw-muted: #94a3b8;
  --rw-radius-lg: 20px;
  --rw-radius-md: 14px;
  --rw-ease: cubic-bezier(.16,.84,.28,1);
}

/* GLOBAL FONT FIX */
.rw-package-page, .rw-package-page *{
  font-family: "Inter", sans-serif !important;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

/* ACTIVE PACKAGE uses POPPINS */
.rw-package-card.active,
.rw-package-card.active *{
  font-family: "Poppins", sans-serif !important;
}

/* REMOVE HERO BACKGROUND */
.rw-package-page.rw-with-hero::before,
.rw-package-page.rw-with-hero::after{
    display:none !important;
}

/* BASIC LAYOUT */
.rw-package-page{
  max-width:1180px;
  margin:0 auto;
  padding:50px 22px 100px;
  position:relative;
}

/* BREADCRUMBS */
.rw-breadcrumbs{
  font-size:13px;
  margin-bottom:10px;
  color:#6e7a89;
}
.rw-breadcrumbs a{
  color:#1d3557;
  text-decoration:none;
}

/* HEADER */
.rw-package-header h1{
  font-size:34px;
  font-weight:900;
  margin:5px 0 4px;
  color:#0b1f36;
}
.rw-tagline{
  max-width:640px;
  font-size:15px;
  color:#4f6377;
}

/* PACKAGE GRID */
.rw-package-row{
  margin-top:25px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

/* CARD BASE */
.rw-package-card{
  padding:24px;
  background:var(--rw-white-card);
  border-radius:var(--rw-radius-lg);
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:
    0 10px 25px rgba(0,0,0,0.06),
    0 5px 12px rgba(0,0,0,0.05);
  transition:0.4s var(--rw-ease);
}

/* DARKER CARD FEEL */
.rw-package-card{
  background:linear-gradient(180deg,#ffffff,#f4f7fa);
}

/* CARD HEADER */
.rw-card-eyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#6b7c92;
}
.rw-package-card h3{
  font-size:20px;
  margin-top:4px;
  font-weight:800;
  color:#0e2239;
}
.rw-package-price{
  display:inline-block;
  margin:6px 0 12px;
  padding:7px 12px;
  background:rgba(13,59,143,0.07);
  border-radius:10px;
  font-weight:900;
  font-size:21px;
  color:var(--rw-blue);
}

/* ACTIVE PACKAGE — POPPINS + BIGGER + STRONGER */
.rw-package-card.active{
  transform:scale(1.07);
  border:1px solid rgba(13,59,143,0.25);
  background:linear-gradient(180deg,#ffffff,#eef7fb);
  box-shadow:
    0 20px 45px rgba(13,59,143,0.25),
    0 10px 25px rgba(0,179,134,0.18);
}
.rw-package-card.active h3{
  font-size:22px;
  font-weight:900;
}
.rw-package-card.active .rw-package-price{
  font-size:25px;
}

/* DIMMED CARDS */
.rw-package-card.dimmed{
  opacity:0.88;
  transform:scale(0.97);
}
.rw-package-card.dimmed:hover{
  opacity:1;
  transform:scale(1);
}

/* FEATURES */
.rw-package-features{
  margin:0;
  padding:0;
  list-style:none;
  font-size:14px;
  color:#2b3a4a;
}
.rw-package-features li{
  margin-bottom:10px;
  padding-left:20px;
  position:relative;
}
.rw-package-features li::before{
  content:"";
  width:10px;
  height:10px;
  background:linear-gradient(90deg,var(--rw-blue),var(--rw-green));
  border-radius:2px;
  box-shadow:0 2px 6px rgba(0,179,134,0.2);
  position:absolute;
  left:0;
  top:5px;
}

/* new shadow effect */
/* ============================================
   ACTIVE PACKAGE — BREATHING SHADOW ANIMATION
   ============================================ */

@keyframes rw-active-breath {
  0% {
    box-shadow: 
      0 20px 45px rgba(13,59,143,0.25),
      0 10px 25px rgba(0,179,134,0.18);
  }
  50% {
    box-shadow: 
      0 26px 58px rgba(13,59,143,0.32),
      0 16px 34px rgba(0,179,134,0.22);
  }
  100% {
    box-shadow: 
      0 20px 45px rgba(13,59,143,0.25),
      0 10px 25px rgba(0,179,134,0.18);
  }
}

.rw-package-card.active {
  animation: rw-active-breath 2s ease-in-out infinite;
}


/* BUTTONS */
.rw-btn{
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
  display:inline-flex;
  justify-content:center;
  font-weight:800;
  transition:0.25s var(--rw-ease);
}

.rw-btn-simple{
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  color:#0d3b8f;
}

.rw-btn-upgrade{
  background:rgba(0,179,134,0.12);
  border:1px solid rgba(0,179,134,0.25);
  color:#003b28;
}

.rw-btn-pay{
  background:linear-gradient(90deg,var(--rw-blue),var(--rw-green));
  color:white;
  box-shadow:0 8px 20px rgba(13,59,143,0.22);
  padding-bottom: 13px;
}

.rw-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,0.12);
}

/* COMPARE TABLE WRAPPER */
.rw-compare-wrapper{
  margin-top:40px;
  overflow-x:auto;
  padding-bottom:8px;
}

@media(max-width:700px){
  .rw-compare-table{
    min-width:700px;
  }
}

/* COMPARE TABLE */
.rw-compare-title{
  font-size:20px;
  font-weight:900;
  color:#0b1f36;
  margin-bottom:10px;
}

.rw-compare-table{
  width:100%;
  border-collapse:collapse;
  background:white;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,0.1);
}

.rw-compare-table thead{
  background:linear-gradient(90deg,var(--rw-blue),var(--rw-green));
  color:white;
}

.rw-compare-table th,
.rw-compare-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,0.07);
  font-size:14px;
}

.rw-dash{
  color:#a6b1bf;
}

/* PAYMENT BOX */
.rw-payment-box{
  margin-top:40px;
  padding:22px;
  background:white;
  border-radius:16px;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 14px 38px rgba(0,0,0,0.08);
}
.rw-payment-options{
  display:flex;
  gap:16px;
}
.rw-payment-btn{
  flex:1;
  padding:14px;
  border-radius:12px;
  text-align:center;
  background:linear-gradient(180deg,#fff,#f5f9fb);
  border:1px solid rgba(13,59,143,0.08);
  cursor:pointer;
  font-weight:800;
}
.rw-payment-btn:hover{
  background:linear-gradient(180deg,#e6f3ff,#dff5f8);
  border-color:var(--rw-blue);
}

/* new payment small screen  */

/* ============================================
   PAYMENT OPTIONS — VERTICAL ON MOBILE
   ============================================ */
@media (max-width: 740px){
  .rw-payment-options{
    flex-direction: column;
  }
  .rw-payment-btn{
    width: 90%;
  }
}

/* TRUST BADGES */
.rw-trust-strip{
  margin-top:35px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.rw-trust-badge{
  padding:8px 14px;
  border-radius:999px;
  background:white;
  font-size:13px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}
.rw-trust-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle,var(--rw-green),var(--rw-blue));
  margin-right:6px;
  display:inline-block;
}

/* WHY CHOOSE US */
.rw-why-wrapper{
  margin-top:40px;
}
.rw-why-title{
  font-size:22px;
  font-weight:900;
  margin-bottom:14px;
}
.rw-why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.rw-why-card{
  padding:16px;
  border-radius:16px;
  background:#071423;
  border:1px solid rgba(124,252,219,0.1);
  color:white;
  box-shadow:0 16px 40px rgba(0,0,0,0.4);
}
.rw-why-card h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:800;
}
.rw-why-card p{
  margin:0;
  color:#cfe8ff;
  font-size:13px;
}

/* DETAILS BOX */
.rw-details-box{
  margin-top:40px;
  padding:24px;
  background:white;
  border-radius:16px;
  box-shadow:0 14px 40px rgba(0,0,0,0.08);
}
.rw-details-box h2{
  font-size:20px;
  font-weight:900;
  color:#0b1f36;
  margin-bottom:10px;
}

/* FAQ */
.rw-faq-section{
  margin-top:40px;
  padding:24px;
  background:white;
  border-radius:16px;
  box-shadow:0 14px 40px rgba(0,0,0,0.08);
}
.rw-faq-section h2{
  font-size:20px;
  font-weight:900;
  margin-bottom:14px;
}
.rw-faq-q{
  font-weight:800;
  font-size:15px;
  margin-bottom:4px;
}
.rw-faq-a{
  color:#415365;
  font-size:14px;
  margin-bottom:14px;
}

/* STICKY CTA */
.rw-sticky-cta{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:100;
  background:linear-gradient(90deg,#0b1f36,#071628);
  padding:12px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.rw-sticky-cta *{
  font-family:"Inter",sans-serif !important;
}
.rw-sticky-name{
  font-size:14px;
  font-weight:900;
  color:white;
}
.rw-sticky-price{
  font-size:13px;
  color:#9ee4ff;
}
.rw-sticky-actions{
  display:flex;
  gap:10px;
}

/* RESPONSIVE */
@media(max-width:1000px){
  .rw-package-row{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:650px){
  .rw-package-row{ grid-template-columns:1fr; }
  .rw-why-grid{ grid-template-columns:1fr; }
  .rw-sticky-cta{
    border-radius:0;
  }
}

/* ============================================
   STICKY CTA — IMPROVED MOBILE VERSION
   ============================================ */

.rw-sticky-cta{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:100;
  background:linear-gradient(90deg,#0b1f36,#071628);
  padding:12px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 -6px 20px rgba(0,0,0,0.4);
}

/* sticky spacing fix */
.rw-sticky-cta *{
  font-family:"Inter",sans-serif !important;
}

/* text */
.rw-sticky-name{
  font-size:14px;
  font-weight:900;
  color:white;
  line-height:1.2;
}
.rw-sticky-price{
  font-size:12px;
  color:#9ee4ff;
  line-height:1.2;
}

/* actions */
.rw-sticky-actions{
  display:flex;
  gap:10px;
}

/* Buttons inside sticky CTA */
.rw-sticky-actions .rw-btn{
  padding:8px 12px !important;
  font-size:13px !important;
  border-radius:10px;
}

/* ============================================
   MOBILE OPTIMIZATION
   ============================================ */
@media (max-width: 650px){

  .rw-sticky-cta{
    padding:8px 12px;
    flex-direction:row;
    align-items:center;
    gap:10px;
  }

  .rw-sticky-left{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0;
    max-width:60%;
  }

  .rw-sticky-name{
    font-size:13px;
  }
  .rw-sticky-price{
    font-size:11px;
  }

  /* Make buttons smaller */
  .rw-sticky-actions .rw-btn{
    padding:6px 10px !important;
    font-size:12px !important;
    border-radius:8px;
    white-space:nowrap;
  }

  /* If too tight, stack buttons vertically */
  @media (max-width: 420px){
    .rw-sticky-cta{
      flex-direction:column;
      align-items:flex-start;
      padding:10px;
    }
    .rw-sticky-actions{
      width:100%;
      justify-content:flex-start;
    }
    .rw-sticky-actions .rw-btn{
      width:auto;
      margin-right:6px;
    }
  }
}

/* ============================================
   Detect ONLY WhatsApp Buttons That Are Floating
   (position: fixed) — Safe Patch
   ============================================ */

@media (min-width: 992px) {
  a[href*="wa.me"][style*="fixed"],
  a[href*="whatsapp"][style*="fixed"],
  .whatsapp-float[style*="fixed"],
  .whatsapp_float[style*="fixed"],
  .wa-float[style*="fixed"] {
      bottom: 120px !important; /* adjust height up */
      right: 28px !important;
  }

  /* Version for classes that use fixed in CSS, not inline */
  a[href*="wa.me"],
  a[href*="whatsapp"],
  .whatsapp-float,
  .whatsapp_float,
  .wa-float {
      position: fixed !important;
      bottom: 120px !important;
      right: 200px !important;
      z-index: 999999 !important;
  }
}

/* DO NOT touch icons in footer */
footer a[href*="whatsapp"],
footer a[href*="wa.me"] {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
}

/* Leave space for bottom CTA on mobile (package pages) */
/* ============================================
   GLOBAL: PACKAGE PAGES CTA BAR SPACING
   Sticky CTA visible on ALL devices
============================================ */

/* EXTRA SMALL PHONES — < 400px */
@media (max-width: 399px) {
    body {
        padding-bottom: 65px !important; 
    }
}

/* SMALL PHONES — 400px to 600px */
@media (min-width: 400px) and (max-width: 600px) {
    body {
        padding-bottom: 29px !important;
    }
}

/* TABLETS (PORTRAIT) — 600px to 800px */
@media (min-width: 600px) and (max-width: 800px) {
    body {
        padding-bottom: 26px !important;
    }
}

/* TABLETS (LANDSCAPE) — 800px to 1024px */
@media (min-width: 800px) and (max-width: 1024px) {
    body {
        padding-bottom: 26px !important;
    }
}

/* SMALL LAPTOPS — 1024px to 1280px */
@media (min-width: 1024px) and (max-width: 1280px) {
    body {
        padding-bottom: 26px !important;
    }
}

/* STANDARD DESKTOP — 1280px to 1600px */
@media (min-width: 1280px) and (max-width: 1600px) {
    body {
        padding-bottom: 26px !important;
    }
}

/* LARGE DESKTOPS — 1600px+ */
@media (min-width: 1600px) {
    body {
        padding-bottom: 26px !important;
    }
}