/* =========================================================
   assets/css/pricing.css  (ABSOLUTE FINAL - COMPLETE SOLUTION)
   Drugvigil - Pricing Page
   ✅ WORKS WITH CORRECTED HTML STRUCTURE
   - Buttons are NOW definitely in same row on desktop
   - Clean responsive behavior
   - All spacing and styling perfected
========================================================= */

/* ✅ WOW Fix */
.wow { visibility: visible !important; opacity: 1 !important; }

/* ---------- Variables ---------- */
:root{
  --dv-pr-bg:#f6fbfa;
  --dv-pr-white:#ffffff;
  --dv-pr-ink:#132a2a;
  --dv-pr-muted:#5b6f6f;
  --dv-pr-brand:#29b88b;
  --dv-pr-brand2:#16a57a;

  --dv-pr-line: rgba(16,80,68,.14);
  --dv-pr-border:#e7eceb;

  --dv-pr-shadow: 0 18px 50px rgba(16,80,68,.14);
  --dv-pr-shadow-soft: 0 10px 30px rgba(16,80,68,.10);

  --dv-pr-radius: 18px;
  --dv-pr-radius-sm: 12px;

  /* Small buttons */
  --dv-pr-btn-h: 38px;
  --dv-pr-btn-fs: 13px;
  --dv-pr-btn-pad: 0 16px;
}

/* ---------- Base ---------- */
html, body{ width:100%; overflow-x:hidden; }
body.body-bg-color{
  background: var(--dv-pr-bg) !important;
  color: var(--dv-pr-ink) !important;
}

/* Dark Mode Variables */
body.theme-dark {
  --dv-pr-bg: #f6fbfa;
  --dv-pr-white: #ffffff;
  --dv-pr-ink: #132a2a;
  --dv-pr-muted: #5b6f6f;
  --dv-pr-border: #e7eceb;
  --dv-pr-shadow: 0 18px 50px rgba(16,80,68,.14);
  --dv-pr-shadow-soft: 0 10px 30px rgba(16,80,68,.10);
}

img{ max-width:100%; height:auto; }
a{ text-decoration:none; }
.container{ max-width: 1200px; }

/* =========================================================
   HERO (Page Title Area)
========================================================= */
.page-title-area{
  position: relative;
  overflow: hidden;
  margin-top: 0 !important;

  min-height: 420px !important;
  padding: 0 !important;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(rgba(0,0,0,.48), rgba(0,0,0,.48)),
    url("../images/pricing-header.webp") center/cover no-repeat !important;
}

.page-title-area::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 260px at 22% 0%, rgba(255,255,255,0.16), transparent 58%),
    radial-gradient(700px 220px at 88% 0%, rgba(255,255,255,0.10), transparent 60%);
  pointer-events:none;
}

.page-title-content{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
  margin: 0 auto !important;
  padding: 0 15px;
}

.page-title-content h2{
  color:#fff !important;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  margin: 0 0 10px !important;
  text-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.page-title-content ul{
  display:inline-flex;
  gap: 10px;
  align-items:center;
  list-style:none;
  padding: 8px 18px;
  margin: 0 !important;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
}

.page-title-content ul li,
.page-title-content ul li a{
  color: rgba(255,255,255,0.95) !important;
  font-weight: 800;
  font-size: .95rem;
}

.page-title-content ul li.active{ color: #dffdf4 !important; }

@media (max-width: 991px){ .page-title-area{ min-height: 340px !important; } }
@media (max-width: 575px){ .page-title-area{ min-height: 290px !important; } }

/* =========================================================
   CONTENT SECTION SPACING
========================================================= */
.services-details-content{ background: var(--dv-pr-bg) !important; }
.pt-100{ padding-top: 72px !important; }
.pb-70{ padding-bottom: 58px !important; }
.mg-top-30{ margin-top: 24px !important; }

/* =========================================================
   SUPERCHARGE SECTION
========================================================= */
.dv-pr-hero-row{
  align-items: center;
  row-gap: 18px;
  flex-wrap: nowrap;
}

/* ---------- LEFT TITLE ---------- */
.pricing-title{
  margin-bottom: 16px;
}
.pricing-title h2{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.45rem, 2.2vw, 2.25rem);
  color: var(--dv-pr-ink);
  margin: 0 0 8px;
}
.pricing-title h3{
  font-weight: 800;
  color: var(--dv-pr-muted);
  font-size: clamp(1.02rem, 1.35vw, 1.25rem);
  margin: 0;
}

/* LEFT IMAGE */
.dvx-hero-shape{
  width: 92% !important;
  max-width: 520px !important;
  max-height: 280px !important;
  height: 280px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16,80,68,.12);
  box-shadow: 0 14px 34px rgba(16,80,68,.14);
  display:block;
  margin-top: 16px;
}

@media (max-width: 575px){
  .dvx-hero-shape{
    width:100% !important;
    max-width: 100% !important;
    height: 220px !important;
    max-height: 220px !important;
  }
}

/* ---------- RIGHT SIDE ---------- */
.banner-content{
  display:flex;
  align-items:center;
  width: 100%;
}
@media (max-width: 991px){
  .dv-pr-hero-row {
    flex-wrap: wrap;
  }
  .banner-content{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .pricing-label {
    margin-bottom: 32px !important;
  }
}

@media (max-width: 575px){
  .banner-content{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .pricing-label {
    margin-bottom: 48px !important;
  }
}

/* ✅ RIGHT BOX - Container for all content */
.pricing-label{
  width:100%;
  margin: 0 !important;
  padding: 24px !important;
  border-radius: 16px;
  box-sizing:border-box;

  /* Column layout */
  display:flex !important;
  flex-direction: column !important;
  gap: 14px;

  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(16,80,68,.12);
  box-shadow: 0 12px 30px rgba(16,80,68,.10);
}

.pricing-label > p{
  color: var(--dv-pr-muted);
  font-size: .98rem;
  line-height: 1.75;
  margin: 0 !important;
  width: 100%;
}

/* =========================================================
   ✅✅✅ BUTTONS - THE MAIN FIX ✅✅✅
========================================================= */

/* ✅ BUTTON CONTAINER - This is the key */
.banner-btn{
  /* FORCE horizontal row */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  
  /* Spacing between buttons */
  gap: 24px !important;
  
  /* Alignment */
  align-items: center !important;
  justify-content: flex-start !important;
  
  /* Full width of parent */
  width: 100% !important;
  
  /* Remove any default spacing */
  margin: 0 !important;
  padding: 0 !important;
}

/* ✅ Individual button styling */
.banner-btn .default-btn,
.default-btn.safeguard-btn,
.default-btn.currency-btn,
.default-btn.faq-btn{
  /* Size — box-sizing ensures height includes padding */
  box-sizing: border-box !important;
  height: var(--dv-pr-btn-h) !important;
  padding: var(--dv-pr-btn-pad) !important;
  min-width: 170px !important;

  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;

  /* Typography */
  font-size: var(--dv-pr-btn-fs) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  /* Styling */
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  box-shadow: 0 10px 22px rgba(16,80,68,.12);

  /* Colors */
  background: var(--dv-pr-brand) !important;
  color: #ffffff !important;

  /* Remove defaults */
  margin: 0 !important;
  text-decoration: none !important;
  cursor: pointer;

  /* Transition */
  transition: all 0.2s ease !important;
}

/* Hover effect */
.banner-btn .default-btn:hover,
.default-btn.safeguard-btn:hover,
.default-btn.currency-btn:hover,
.default-btn.faq-btn:hover{
  background: var(--dv-pr-brand2) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(16,80,68,.18);
}

/* =========================================================
   CURRENCY CALCULATOR
========================================================= */
.dv-currency-wrap{
  width: 100%;
  display: none;
  margin: 0 !important;
  background: rgba(41,184,139,0.10);
  border: 1px solid rgba(41,184,139,0.26);
  border-radius: 14px;
  padding: 12px;
  box-sizing: border-box;
}

.dv-currency-wrap.is-open{
  display: block !important;
  margin-top: 30px !important;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Price Converter button inside wrapper */
.currency_convertor{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: var(--dv-pr-btn-h);
  padding: var(--dv-pr-btn-pad);
}

.currency_convertor:hover{
  background: rgba(41,184,139,0.22) !important;
  border-color: rgba(41,184,139,0.65);
}

@media (max-width: 575px){
  .currency_convertor{
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* Widget safety */
.dv-currency-wrap .lwcc,
.dv-currency-wrap .lwcc *{
  background: transparent !important;
  float: none !important;
  margin: 0 !important;
  width: 100% !important;
}

.dv-currency-wrap iframe{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* =========================================================
   PRICING CARDS (homec-psingle)
========================================================= */
.homec-psingle{
  background: var(--dv-pr-white);
  border: 1px solid var(--dv-pr-border);
  border-radius: var(--dv-pr-radius);
  overflow: hidden;
  box-shadow: var(--dv-pr-shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.homec-psingle:hover{
  transform: translateY(-6px);
  box-shadow: var(--dv-pr-shadow);
  border-color: rgba(41,184,139,.35);
}

.homec-psingle__head{
  padding: 18px 18px 14px;
  background:
    radial-gradient(600px 200px at 15% 0%, rgba(41,184,139,0.12), transparent 60%),
    radial-gradient(500px 180px at 92% 0%, rgba(41,184,139,0.10), transparent 55%),
    #ffffff;
  border-bottom: 1px solid var(--dv-pr-border);
}

.homec-psingle__title{
  margin: 0 0 10px;
  font-weight: 900;
  color: var(--dv-pr-ink);
  letter-spacing: -0.01em;
  font-size: 1.15rem;
}

.homec-psingle__amount{
  display:flex;
  align-items:baseline;
  gap: 6px;
  color: var(--dv-pr-ink);
  font-weight: 900;
  font-size: 3rem;
  line-height: 1.1;
}

.homec-psingle__currency{
  font-size: 1.2rem;
  color: var(--dv-pr-brand2);
  font-weight: 900;
}

.homec-psingle__amount span{
  font-size: .9rem;
  font-weight: 800;
  color: var(--dv-pr-muted);
  margin-left: 4px;
}

.terms-conditions{
  margin-left: auto;
  font-size: .82rem;
  font-weight: 900;
  color: var(--dv-pr-brand2);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(41,184,139,.35);
  background: rgba(41,184,139,.08);
}
.terms-conditions:hover{
  background: rgba(41,184,139,.14);
  color: var(--dv-pr-brand2);
}

.homec-psingle__active{
  border-color: rgba(41,184,139,.45);
  box-shadow: var(--dv-pr-shadow);
}

.homec-psingle__body{ padding: 16px 18px 18px; }

.homec-psingle__list{
  list-style:none;
  padding:0;
  margin:0 0 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.homec-psingle__list li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: var(--dv-pr-ink);
  font-size: .96rem;
  line-height: 1.4;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(16,80,68,.12);
}
.homec-psingle__list li:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.homec-psingle__icon{
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  margin-top: 2px;
}

.homec-check-color{
  background: rgba(41,184,139,.14);
  color: var(--dv-pr-brand2);
}
.homec-remove-color{
  background: rgba(244,67,54,.10);
  color: #e53935;
}

.homec-psingle__button{ padding-top: 8px; }
.homec-btn.homec-btn__thrid{
  display:flex;
  width:100%;
  height: 42px;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: var(--dv-pr-ink);
  color: #fff;
  font-weight: 900;
  border: 2px solid transparent;
  transition: .2s ease;
}
.homec-btn.homec-btn__thrid:hover{
  background: var(--dv-pr-brand2);
  color:#fff;
}

/* Tooltip */
.tooltip-inner{
  max-width: 280px;
  font-size: 12px;
  font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 991px){
  .banner-content{ 
    margin-top: 8px; 
  }
  .homec-psingle__head{ padding: 16px; }
  .homec-psingle__body{ padding: 14px 16px 16px; }
}

/* MARKETPLACE button spacing */
/* .services-details-content{
  padding-right: 170px !important;
} */

@media (max-width: 991px){
  .services-details-content{
    padding-right: 0 !important;
  }
}

/* =========================================================
   BREADCRUMB STYLES (Moved from inline)
========================================================= */
.pricing-title-breadcrumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pricing-title-breadcrumb ul {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  list-style: none !important;
}

.pricing-title-breadcrumb ul li,
.pricing-title-breadcrumb ul li a {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #bfe7dc !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.pricing-title-breadcrumb ul li.active,
.pricing-title-breadcrumb ul li.separator {
  color: #29b88b !important;
  font-weight: 700 !important;
}

.pricing-title-breadcrumb ul li::before {
  content: none !important;
}

/* Force Dark Mode Text to match Light Mode (Override Global Dark Theme) */
body.theme-dark .pricing-title h2,
body.theme-dark .pricing-title h3,
body.theme-dark .homec-psingle__title,
body.theme-dark .homec-psingle__amount,
body.theme-dark .homec-psingle__list li {
  color: var(--dv-pr-ink) !important;
}

body.theme-dark .pricing-label > p,
body.theme-dark .homec-psingle__amount span {
  color: #3a5050 !important;
}

.pricing-label > p {
  color: #3a5050 !important;
}