/* =========================
   ORDER PAGE (Light Theme)
   Colors:
   --brand: rgb(17,119,255)
   --soft:  rgb(233,254,255)
   ========================= */

/* Hero */
.order-hero{
  padding: 4.2rem 0 2.2rem;
  text-align:left;
}

.order-title{
  margin: .9rem 0 0;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.order-sub{
  margin-top: .9rem;
  color: #334155;
  max-width: 85ch;
  line-height: 1.6;
}

.order-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.45rem .8rem;
  border-radius:999px;
  background: rgba(233,254,255,.88);
  border: 1px solid rgba(17,119,255,.20);
  color: #0f172a;
  font-size: .9rem;
}

/* Pricing section */
.pricing{ padding: 2.2rem 0 3.6rem; }

.pricing .section-header h2{ color:#0f172a; }
.pricing .section-header p{ color:#334155; }

.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.plan-card{
  position: relative;
  background: rgba(233,254,255,.70);
  border: 1px solid rgba(17,119,255,.22);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(2,6,23,.10);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.plan-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(700px 240px at 10% 0%, rgba(17,119,255,.10), transparent 60%),
    radial-gradient(700px 240px at 95% 10%, rgba(233,254,255,.95), transparent 55%);
  pointer-events:none;
  z-index:0;
}

.plan-card > *{ position:relative; z-index:1; }

.plan-card:hover{
  transform: translateY(-2px);
  border-color: rgba(17,119,255,.32);
  box-shadow: 0 22px 60px rgba(2,6,23,.14);
}

.plan-top{ margin-bottom: 12px; }

.plan-name{
  font-weight: 900;
  font-size: 1.25rem;
  color:#0f172a;
}

.plan-desc{
  margin-top: .45rem;
  color:#334155;
  line-height: 1.55;
}

/* list */
.plan-list{
  margin: 14px 0 0;
  padding-left: 1.1rem;
  color:#0f172a;
}

.plan-list li{
  margin: .52rem 0;
  color:#334155;
}

/* validity */
.plan-validity{
  margin-top: 14px;
  font-weight: 700;
  color:#0f172a;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(17,119,255,.08);
  border: 1px solid rgba(17,119,255,.16);
}

.plan-validity.highlight{
  background: rgba(17,119,255,.10);
  border-color: rgba(17,119,255,.22);
}

/* Popular plan highlight */
.plan-popular{
  border-color: rgba(17,119,255,.45);
  box-shadow: 0 24px 70px rgba(17,119,255,.18);
}

.popular-pill{
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(17,119,255,.14);
  border: 1px solid rgba(17,119,255,.28);
  color:#0f172a;
}

/* Buttons: make sure secondary isn't dark */
.plan-card .btn{
  margin-top: 14px;
}

/* Footnote links */
.pricing-footnote{
  margin-top: 18px;
  color:#334155;
  text-align:center;
}

.pricing-footnote a{
  color: rgb(17,119,255);
  text-decoration: underline;
}

/* Order now section */
.order-form-section{ padding: 2.2rem 0 4rem; }

.order-now-simple{
  max-width: 820px;
  text-align:center;
}

.order-form-title{
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  color:#0f172a;
}

.order-form-sub{
  margin-top: .7rem;
  color:#334155;
}

.order-now-actions{
  margin-top: 1.2rem;
  display:flex;
  justify-content:center;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* Razorpay embed container fix */
.razorpay-embed-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 56px;
}

/* Note */
.order-now-note{
  margin-top: 1rem;
  color:#334155;
}

/* FAQ cards inside order page (if using .faq-card) */
.faq-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.faq-card{
  background: rgba(233,254,255,.70);
  border: 1px solid rgba(17,119,255,.22);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 40px rgba(2,6,23,.08);
}

.faq-card h3{ margin: 0 0 6px; color:#0f172a; }
.faq-card p{ margin: 0; color:#334155; line-height: 1.6; }

/* Responsive */
@media (max-width: 980px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .faq-grid{ grid-template-columns: 1fr; }
}


.btn-whatsapp{
  background: linear-gradient(180deg,#25D366,#1ebe5d);
  color:#fff;
  border: none;
  box-shadow: 0 10px 28px rgba(37,211,102,.35);
}

.btn-whatsapp:hover{
  filter: brightness(1.05);
}


/* =========================
   ORDER PAGE: Button Fix (Razorpay + WhatsApp)
   ========================= */

/* layout */
.order-now-actions{
  display:flex;
  gap: 16px;
  justify-content:center;
  align-items:center;
  flex-wrap: wrap;
}

/* make both buttons same height + radius */
.order-now-actions .btn,
.order-now-actions .razorpay-embed-btn{
  height: 56px;
  border-radius: 999px !important;
}

/* wrapper sizing */
.order-now-actions .razorpay-embed-btn{
  min-width: 280px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Razorpay injected button should fill wrapper */
.order-now-actions .razorpay-embed-btn *{
  font-family: inherit !important;
}

.order-now-actions .razorpay-embed-btn button,
.order-now-actions .razorpay-embed-btn a{
  width: 100% !important;
  height: 56px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

/* WhatsApp button width similar to Razorpay */
.order-now-actions .btn.btn-ghost{
  min-width: 280px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: 16px;
}

/* OPTIONAL: if you want WhatsApp green (still matching theme) */
.order-now-actions .btn-whatsapp{
  background: #22c55e !important;
  border: 1px solid rgba(34,197,94,.35) !important;
  color: #fff !important;
  box-shadow: 0 16px 40px rgba(34,197,94,.18) !important;
}
.order-now-actions .btn-whatsapp:hover{
  filter: brightness(0.98);
}