.onepack { font-family:  sans-serif; color:#0f172a; }
.onepack .op-muted{ color:#000000;  }
.onepack .op-muteds{ color: #4300df;  }
.onepack .op-strong{ font-weight:600; }
.onepack .op-center{ text-align:center; }
.onepack .op-right{ text-align:right; }
.onepack .op-w100{ width:100%; }
.onepack .op-gap{ gap:.5rem; }
.onepack .op-mt{ margin-top:.75rem; }
.onepack .op-h2{ font-size:clamp(22px, 3.4vw, 30px); font-weight:700; background:#000000; -webkit-background-clip:text; background-clip:text; color:transparent; margin:6px 0 10px ;   /* top/bottom gap kam */
  line-height: 1.15 ;     /* compact line-height */
  letter-spacing: -0.2px;}
.onepack .op-h5{ font-size:18px; font-weight:800; background:#000000; -webkit-background-clip:text; background-clip:text; color:transparent; margin-top:1rem; }
.onepack .op-h6{ font-weight:700; background:#ffffff; font-size:18px;}
.onepack .op-small{ font-size:12px; color:#475569; }
.onepack .op-sub{ font-size:12px; color:#000000; margin-bottom:.5rem; }
.op-subs{ font-size:12px; color:#ffffff; margin-bottom:.5rem; }
.op-nav{ position:sticky; top:0; z-index:10; background:rgba(255,255,255,.8); backdrop-filter:saturate(1.1) blur(6px);  padding:.6rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.op-brand{ display:flex; align-items:center; gap:.6rem; padding:0 .75rem; }
.op-logo{ width:100px; height:100px; border-radius:50%; display:grid;  }
.op-title{ font-weight:700; }
.op-sub{ margin:0; }

.op-tabs button{ background:none; border:none; padding:.4rem .7rem; border-radius:.5rem; cursor:pointer; }
.op-tabs button.is-active{ background:#eef2ff; color:#4338ca; }
/* Expands with screen but stops at 90rem (~1440px) */
.op-container{
  width: min(92vw, 73rem);
  margin: 0 auto;
  padding: .25rem 1rem;
}

.op-card{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:1.25rem; display: flex; flex-direction: column;justify-content:space-between; height: 100%;}
.op-sticky{ position:sticky; top:90px; }

.op-grid{ display:grid; gap:.6rem; margin-top:10px; }
.op-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.op-grid-3{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; align-items: stretch; margin-top:3px;}
@media (max-width: 1200px) {
  .op-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .op-grid-2, .op-grid-3 {
    grid-template-columns: 1fr;
  }
}
.op-grid-4{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items: stretch; margin-top:-10px;}
@media (max-width: 1200px) {
  .op-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
   .op-grid-4 {
    grid-template-columns: 1fr;
  }
}
.op-grid-5{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; align-items: stretch; margin-top:20px;}
@media (max-width: 1200px) {
  .op-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
   .op-grid-5 {
    grid-template-columns: 1fr;
  }
}
.op-pill{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid #e5e7eb; padding:.2rem .6rem; border-radius:999px; color:#3730a3; background:#eef2ff; margin-bottom:.5rem; }

.op-chip{ border:1px solid #e5e7eb; padding:.5rem .6rem; border-radius:12px; text-align:left; background:#fff; cursor:pointer; }
.op-chip:hover{ background:#eef2ff; }


.op-icons{ display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; text-align:center; margin:.6rem 0; }
.op-icon{ display:flex; flex-direction:column; align-items:center; gap:.2rem; font-size:12px; }
.op-ico{ width:20px; height:20px; }
.op-ico-fallback{ display:inline-block; width:18px; text-align:center; }

.op-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
}

.op-stat-title {
  font-size: 12px;
  color: #000000;   /* light grey */
}

.op-stat-value {
  font-weight: 800;
  color: #000000 ;   /* bright white for visibility */
}

.op-stat-note {
  font-size: 12px;
  color:#000000;   /* light grey */
}


.op-divider{ height:1px; background:#ccc; margin:1rem 0; }
.op-line{ display:flex; align-items:center; justify-content:space-between; padding:.2rem 0;}
.op-lines{ display:flex; align-items:center; justify-content:space-between; padding:.2rem 0; color: #EB1C01;}
.op-total{ font-size:18px; font-weight:700; }

.op-badge{ display:inline-flex; align-items:center; gap:.25rem; background:linear-gradient(90deg,#db2777,#ef4444); color:#fff; padding:.25rem .5rem; border-radius:10px; font-size:12px; }
.op-badge--line{ background:#fff; color:#4338ca; border:1px solid #c7d2fe; }

.op-ul{ margin:.5rem 0; padding-left:1.1rem; }
.op-ul li{ margin:.25rem 0; }

.op-flex-gap{ display:inline-flex; align-items:center; gap:.5rem; }
.op-flex-between{ display:flex; align-items:center; justify-content:space-between; }

.op-pack{ overflow:hidden; }
.op-pack__img{ width:100%; height:140px; object-fit:cover; border-radius:12px; }
.op-pack.is-active{ border-color:#ccc; }
.op-pack__head{ display:flex; align-items:flex-start; justify-content:space-between; margin-top:.5rem; }
.op-pack__title{ display:flex; gap:.5rem; }
.op-pack__foot{ margin-top:.6rem; }

.op-button{ border:1px solid #e5e7eb; background:#f8fafc; padding:.55rem .8rem; border-radius:10px; cursor:pointer; }
.op-button:hover{ background:#eef2ff; }
.op-button--primary{ background:linear-gradient(90deg,#4f46e5,#ec4899); color:#fff; border:none; }
.op-button--secondary{ background:linear-gradient(90deg,#4f46e5,#ec4899); color:#fff; border:none; }
.op-btn-link{ background:linear-gradient(90deg,#db2777,#ef4444); border:1px solid #c7d2fe; cursor:pointer; font-size:16px; }

.op-list{ display:grid; gap:.5rem; }
.op-list__row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem; padding:.55rem .6rem; border:1px solid #e5e7eb; border-radius:12px; }
.op-list__row:hover{ background:#f8fafc; }
.op-list__title{ font-weight:600; }
.op-hint{ font-weight:600; margin:.4rem 0; }

.op-note-box{ border:1px solid #e5e7eb; background:linear-gradient(180deg,#fff,#f8fafc); padding:.6rem; border-radius:12px; }
.op-box{ border:1px solid #e5e7eb; border-radius:12px; padding:.6rem; }

.op-progress{ height:8px; background:#eef2ff; border-radius:999px; overflow:hidden; }
.op-progress > div{ height:100%; background:#22c55e; }

.op-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:.4rem; font-size:12px; margin-top:.4rem; }
.op-step{ border:1px solid #e5e7eb; border-radius:10px; padding:.35rem .4rem; }
.op-avatar{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#e2e8f0; font-weight:700; }

.op-modal{ position:fixed; inset:0; background:rgba(15,23,42,.35); display:grid; place-items:center; padding:1rem; }
.op-modal__content{ background:#FFf; border-radius:16px; width:min(640px, 92vw); border:1px solid #e5e7eb; }
.op-modal__header{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid #e5e7eb; }
.op-modal__body{ padding:1rem; }
.op-grid-2 label{ display:grid; gap:.25rem; font-size:14px; }
.op-grid-2 input{ border:1px solid #e5e7eb; border-radius:10px; padding:.5rem .6rem; }
.op-note{ font-size:12px; color:#6b7280; text-align:center; margin-top:.4rem; }

.op-like{ border:1px solid #e5e7eb; background:#f1f5f9; padding:.25rem .5rem; border-radius:999px; display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }
.op-like.is-liked{ background:#FF0000; color:#FF0000; border:none; }

.op-toast{ position:fixed; bottom:14px; left:50%; transform:translateX(-50%); background:#111827; color:#fff; padding:.5rem .8rem; border-radius:10px; }

.op-modal[hidden] { display: none; }
.op-modal { z-index: 9999; }
/* ---------- Palette (easy to tweak) ---------- */
:root{
  --op-primary:#4f46e5; 
  --op-secondary:#4f46e5;  /* indigo */
  --op-primary-2:#ec4899;    /* pink */
  --op-bg:#ffffff;
  --op-text:#0f172a;         /* slate-900 */
  --op-muted:#64748b;        /* slate-500 */
  --op-border:#e5e7eb;
  --op-tab-bg:#eef2ff;       /* indigo-50 */
  --op-tab-text:#4338ca;     /* indigo-700 */
}

/* Make sure our area never inherits dim/dark styles from theme */
.onepack, .onepack {
  color: #fffff;
  -webkit-font-smoothing: antialiased;
}

/* ---------- NAV TABS (top menu) ---------- */
.onepack .op-tabs button{
  color: #64748b;
  background: #f8fafc ;
  border: 1px solid #e5e7eb ;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.onepack .op-tabs button:hover{
  background: #f1f5f9 ;
  color: #0f172a ;
}
.onepack .op-tabs button.is-active{
  background: #eef2ff ;
  color: #4338ca;
  border-color: #c7d2fe;
  font-weight: 700;
}

/* ---------- Trigger pills (Home page buttons) ---------- */
.onepack .op-chip{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .55rem .7rem;
  font-size: 14px;
  font-weight:500;
  line-height: 1.2;
  color: #0f172a ;
  background: #ffffff ;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.onepack .op-chip:hover{
  background: #eef2ff ;
  border-color: #c7d2fe ;
  color: #4338ca;
}

/* ---------- “pill” at the top of hero ---------- */
.onepack .op-pill{
  color: #4338ca ;
  background: #eef2ff;
  border-color: #c7d2fe t;
}

/* ---------- Badges/buttons stronger contrast ---------- */
.onepack .op-badge{
  background: linear-gradient(90deg,#4f46e5, #ec4899) ;
  color:#fff ;
}
.onepack .op-button{
  color: #0f172a;
  background:#f8fafc;
  border:1px solid #e5e7eb;
}
.onepack .op-button--primary{
  background: linear-gradient(90deg, #4f46e5, #ec4899) ;
  color:#fff ;
  border:none ;
}
.onepack .op-button--secondary{
  background: linear-gradient(90deg, #4f46e5, #ec4899) ;
  color:#fff ;
  border:none ;
}

/* ---------- Ensure container on white (theme dark modes) ---------- */
.onepack .op-card{ background:#ffffff ; }
.onepack .op-nav{ background: rgba(255,255,255,.9) ; }

/* ---------- Lucide icons visible even if theme sets fill ---------- */
.onepack .op-ico, .onepack .op-ico *{
  stroke: currentColor ;
}
.svc-picker{--ring:#6b46c1; --ink:#ffffff;}
.svc-row{display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-start}
.svc{display:flex; flex-direction:column; align-items:center}
.svc input{position:absolute; opacity:0; pointer-events:none}
.svc-chip{display:flex; flex-direction:column; align-items:center; gap:8px;
  font-weight:600; font-size:13px; color:#000000; cursor:pointer; transition:transform .18s; padding-bottom:35px;}
.svc-img{width:96px;height:96px;border-radius:50%;border:6px solid #eee;
  background:#ddd center/cover no-repeat;background-image:var(--img);
  animation: spin 8s linear infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.svc:hover .svc-chip{transform:translateY(-2px)}
.svc input:checked + .svc-chip .svc-img{border-color:#000000;
  box-shadow:0 0 0 3px rgba(0,0,0,.06),0 0 0 6px var(--ring);transform:scale(1.05)}
@media (max-width:640px){.svc-img{width:84px;height:84px}.svc-chip{font-size:12px}}
@media (max-width:400px){.svc-row{gap:12px}.svc-img{width:72px;height:72px}.svc-chip{font-size:11px}}

/* ❌ remove/disable this (yehi sab jagah lag raha tha) */
/* .onepack .op-card:first-of-type { ... } */

/* ✅ sirf hero card par BG image/video */
.onepack .op-hero-card{
  position: relative;
  padding: 28px ;
  border-radius: 16px;
  overflow: hidden;
  /* Image or video background */
  --hero:url('YOUR-HERO-IMAGE.jpg');          /* image path (optional) */
  background-image: linear-gradient(to bottom right, rgba(255,255,255,.94), rgba(255,255,255,.88)) ,
   linear-gradient(to bottom right, rgba(255,255,255,.94), rgba(255,255,255,.88)),
    var(--hero);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Agar aap <video> ko background ki tarah use kar rahe ho: */
.onepack .op-hero-card .bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; opacity:.28; pointer-events:none;
}
/* Content upar rahe */
.onepack .op-hero-card > * { position: relative; z-index:1; }

/* Hero layout tweaks */
.onepack .op-hero-card .op-grid-2{
  display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:center;
}
.onepack .op-hero-card .op-h2{ margin:6px 0 10px ; line-height:1.06; }

/* Right side ki internal image ko optionally fade karo */
@media (min-width:768px){
  .onepack .op-hero-card img.op-hero{ opacity:.12; pointer-events:none; }
}
@media (max-width:768px){
  .onepack .op-hero-card{ padding:18px ; }
  .onepack .op-hero-card .op-grid-2{ grid-template-columns:1fr; }
}

/* ✅ safety reset: kisi aur card par BG apply na ho */
.onepack .op-card:not(.op-hero-card){
  background-image: none ;
}

/* sirf hero card me video visible ho */
.op-hero-card {
  position: relative;
  overflow: hidden;
}
.op-hero-card .op-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.op-hero-card > *:not(.op-hero-video) {
  position: relative;
  z-index: 2;
}


/* Kill any full-page video/overlay if still present */
.op-bg-video,
.op-bg-overlay { display: none ; }

/* Packages cards ke bullets me jo icons aa rahe hain unhe hide karo */
.op-pack .op-pack__body li svg,
.op-pack .op-pack__body li svg[data-lucide],
.op-pack .op-pack__body li .op-ico,
.op-pack .op-pack__body li i,
.op-pack .op-pack__body li .li-icon {
  display: none ;
}
/* icon hatne ke baad text thoda align रहे */
.op-pack .op-pack__body li {
  display: list-item ;
  list-style: disc inside;
  gap: 0 ;
}


/* 1) In two-column sections, stop stretching rows */
.onepack .op-grid-5 {
align-items: flex-start;
}

/* 2) Let cards grow to their own content; remove extra vertical spacing */
.onepack .op-grid-5 > .op-card {
  height: auto ;               /* instead of 100% */
  justify-content: flex-start ;/* instead of space-between */
}

/* 3) Keep the 3 package cards equal height ONLY in the 3-column row */
.onepack .op-grid-3 > .op-card {
  height: 100%; /* still align those three cards nicely */
}

/* 4) Compact the sticky summary card so it looks tighter */
.onepack .op-sticky .op-h6      { margin-bottom: 4px; }
.onepack .op-sticky .op-sub     { margin-bottom: 8px; }
.onepack .op-sticky .op-line    { padding: 2px 0 ; }
.onepack .op-sticky .op-divider { margin: 8px 0 ; }
.onepack .op-sticky .op-total   { margin-top: 6px ; }

/* 5) Mobile tweaks */
@media (max-width: 768px){
  .onepack .op-sticky { position: static; } /* avoid jumpy sticky on small screens */
  .onepack .op-grid-2 { gap: .75rem; }      /* slightly tighter gap */
}

/* Make all pack images the same height */
.onepack .op-pack__img{
  display:block;
  width:100% ;
  height:180px ;    /* ← set the uniform height you want */
  object-fit:cover;
  border-radius:12px;
  max-width:100% ;  /* kill any 104% rules from theme */
} /* 1) Layout */
.onepack .op-like {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .25rem .5rem;
  color: inherit; /* don't force one color */
}

/* 2) Icon (SVG) default = black */
.onepack .op-like .op-ico,
.onepack .op-like .op-ico * {
  color: #0f172a ;   /* black */
  stroke: #0f172a ;
  fill: none ;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}


/* 4) Liked (clicked) state */
.onepack .op-like.is-liked {
  background: #fff ;   /* keep plain background */
  border: 1px solid #e5e7eb ;
  color: inherit ;
}

/* 5) When liked → icon red, count red */
.onepack .op-like.is-liked .op-ico,
.onepack .op-like.is-liked .op-ico * {
  stroke: #ff0000 ;  /* red heart outline */
  color: #ff0000 ;
  background-color: #ff0000;
}

/* Keep count black even when liked */
.onepack .op-like.is-liked .op-like-count,
.onepack .op-like.is-liked > span {
  color: #000000 ;   /* stay black */
 
}  



.onepack .op-like.is-liked .op-ico,
.onepack .op-like.is-liked .op-ico * {
  stroke: #ff0000;      /* red outline */
  fill: #ff0000;        /* fills inside red */
  background-color: transparent; /* no square background */
}
/* Desktop/tablet: tabs in one line */
.onepack .op-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:96px;
}
.onepack .op-brand{ flex:0 0 auto; }
.onepack .op-tabs{
  display:flex ;
  flex:1 1 auto;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow-x:auto;                 /* swipe/scroll on small widths */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.onepack .op-tabs::-webkit-scrollbar{ display:none; }

/* Mobile: drop tabs under brand so they are always visible */
@media (max-width: 768px){
  .onepack .op-nav{ flex-wrap:wrap; }          /* allow second row */
  .onepack .op-brand{ flex:1 1 100%; }         /* full width first row */
  .onepack .op-tabs{
    flex:1 1 100%;                             /* full width second row */
    order:2;
    margin-top:6px;
    padding-bottom:4px;
  }
}

/* Ensure buttons don’t shrink out of view */
.onepack .op-tabs button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
}
/* Mobile overrides: tighten nav + tabs spacing */
@media (max-width: 768px){
  .onepack .op-nav{
    flex-wrap: wrap;            /* two rows */
    justify-content: flex-start;/* no big space between items */
    gap: 6px;                   /* smaller than desktop 16px */
    padding: .5rem .75rem;      /* tighter padding */
  }

  .onepack .op-brand{
    flex: 1 1 100%;             /* first row full width */
    margin: 0;                  /* in case theme adds margins */
  }

  .onepack .op-tabs{
    flex: 1 1 100%;             /* second row full width */
    order: 2;
    margin-top: 4px;
    padding-bottom: 2px;
    gap: 6px;                   /* smaller gap between buttons */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .onepack .op-tabs button{
    flex: 0 0 auto;             /* keep on one line */
    padding: 6px 10px;          /* smaller pills on mobile */
    font-size: 13px;
  }
}

/* If your theme forces grid, kill it */
.onepack .op-tabs{ grid-template-columns: none ; }
/* --- Fix package card alignment & equal height --- */

/* Auto-fit 2–3 columns; stretch all items to equal row height */
.onepack .op-grid-3{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.5rem;
  align-items: stretch;            /* equal height per row */
}

/* Make each package card a column flexbox and push footer to bottom */
.onepack .op-grid-3 > .op-card,
.onepack .op-pack{
  display:flex;
  flex-direction:column;
  height:100%;
}
.onepack .op-pack__body{ flex: 1 1 auto; } /* body fills the space */
.onepack .op-pack__foot{ margin-top: auto; }/* footer sits at bottom */

/* Keep images same height so headers align */
.onepack .op-pack__img{
  height: 200px;                   /* pick your value (180–220) */
  object-fit: cover;
}

/* Normalize inner spacing so both cards measure similarly */
.onepack .op-pack__head{ margin-top:.5rem; }
.onepack .op-pack__body p{ margin:.5rem 0 .75rem; }
.onepack .op-ul{ margin:.5rem 0 1rem; }

/* Responsive: go to 1 column on small screens */
@media (max-width: 768px){
  .onepack .op-grid-3{ grid-template-columns: 1fr; }
}
.onepack .op-pack__foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.6rem}
.onepack .op-pack__meta{display:inline-flex;align-items:center;gap:.5rem}
.onepack .op-pack{display:flex;flex-direction:column}
.onepack .op-pack__body{flex:1 1 auto}

/* --- Fix pack bullets: clean indent + better wrapping --- */
.onepack .op-pack__body .op-ul{
  margin: .5rem 0;
  padding-left: 1.25rem;     /* indent for outside bullets */
  list-style: disc;
}

.onepack .op-pack__body .op-ul li{
  display: list-item;
  list-style: disc;
  list-style-position: outside; /* override the previous 'inside' */
  margin: .35rem 0;
  line-height: 1.5;
  overflow: visible;
  word-break: normal;          /* avoid ugly mid-word breaks */
  hyphens: auto;
}

/* If any global theme rule forces break-all, neutralize it here */
.onepack .op-pack__body p,
.onepack .op-pack__body li {
  word-wrap: normal;
  overflow-wrap: anywhere; /* lets long words wrap nicely without breaking every word */
}
.op-pack .op-pack__body li { list-style: disc inside; }

/* Make sure no clipping happens on the card */
.onepack .op-pack,
.onepack .op-card { overflow: visible; }


/* Bold/colored head inside bullets */
.onepack .op-bullet-head{
  font-weight: 700;
  color: #000000;
}

/* Keep the pack footer on one line */
.onepack .op-pack__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-top:.6rem;
}
.onepack .op-pack__meta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap; /* allows wrap on very narrow screens */
}
.onepack-video {
  margin-top: 3rem;
  flex: 1 1 40%;     /* take 40% of width */
  display: flex;
  justify-content: center;  /* center horizontally */
  align-items: center;      /* center vertically */
}

.onepack-video video {
  width: 100%; 
  max-width: 500px;  /* keep it from getting too big */
  height: 330px;      /* maintain aspect ratio */
  border-radius: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  
}
@media (max-width: 768px) {
.onepack-video {
      margin-top: 0rem;
  }
}
.onepack-btn {
  padding: 0.75rem 1.5rem;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  background: linear-gradient(#FF8B01, #EB1C01);
  border:1px solid #e5e7eb ;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  width: 180px;           /* fixed width */
  align-self: flex-end;   /* 🔥 only this button moves right */
  text-align: center;     /* keep text centered inside */
}


@media (max-width: 768px) {
  .onepack-btn {
    align-self: center; 
      margin-top: 1rem;
  }
}
/* --- Stats (desktop) --- */
.onepack .op-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  align-items: stretch;
}
.onepack .op-stats > div{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:2px;
}

/* Make sure text colors are readable */
.onepack .op-stat-title{ font-size:12px; color:#00000; }
.onepack .op-stat-value{ font-weight:800; color:#0f172a; }
.onepack .op-stat-note { font-size:12px; color:#00000; }

/* --- Mobile (≤ 768px): 2 columns, centered, equal look --- */
@media (max-width: 768px){
  .onepack .op-stats{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:10px;
  }
  .onepack .op-stats > div{
    text-align:center;
    border:1px solid #e5e7eb;
    background:#fff;
    border-radius:12px;
    padding:.6rem .7rem;
    min-height:84px;            /* same visual height for each card */
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .onepack .op-stat-value{ font-size:18px; margin:2px 0; }
  .onepack .op-stat-title{ margin-bottom:2px; }
  .onepack .op-stat-note{ line-height:1.2; }
}

/* --- Very small phones (≤ 380px): single column --- */
@media (max-width: 380px){
  .onepack .op-stats{ grid-template-columns: 1fr; }
}
/* —— Line spacing & gaps inside the package bullets —— */

/* ===== Global line-height bump (safe) ===== */

/* 1) Default body text line-height */
.onepack { line-height: 1.7; }           /* baseline for everything inside */
.onepack p,
.onepack li,
.onepack a,
.onepack span,
.onepack label,
.onepack .op-sub,
.onepack .op-small,
.onepack .op-stat-title,
.onepack .op-stat-note {
  line-height: 1.7;           /* readable body copy */
}

/* 2) Headings — increase but not too loose */
.onepack .op-h2 { line-height: 1.28 ; }
.onepack .op-h5,
.onepack .op-h6 { line-height: 3.38 ; }

/* 3) Lists – add a little space between items */
.onepack .op-ul li + li { margin-top: .45rem; }

/* 4) Keep UI controls compact (don’t stretch pills/buttons) */
.onepack .op-button,
.onepack .op-badge,
.onepack .op-like,
.onepack .op-chip,
.onepack .op-pill,
.onepack .op-tabs button {
  line-height: 1.2 ;
}
/* Mobile-only: decrease line-height for body text and headings */
@media (max-width: 768px) {
  .onepack {
    line-height: 1.4; /* default body text line-height on mobile */
  }
  .onepack p,
  .onepack li,
  .onepack a,
  .onepack span,
  .onepack label,
  .onepack .op-sub,
  .onepack .op-small,
  .onepack .op-stat-title,
  .onepack .op-stat-note {
    line-height: 1.4;  /* tighter text on mobile */
  }

  /* Optional: headings tighter on mobile */
  .onepack .op-h2 { line-height: 1.1; }
  .onepack .op-h5,
  .onepack .op-h6 { line-height: 1.2; }
}
/* Modal wrapper */
.op-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.op-modal__content {
  background: #fff;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  padding: 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.op-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.op-modal__body {
  font-family: system-ui, sans-serif;
}

/* Grid layout for inputs */
.op-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

label {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
}

input, textarea {
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
}

textarea {
  min-height: 80px;
  resize: vertical;
}

.op-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 1rem 0;
}

.op-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.op-h5 {
  font-size: 18px;
  font-weight: 600;
}

.op-h6 {
  font-size: 16px;
  font-weight: 600;
}

/* Buttons */
.op-button {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.op-button--primary {
  background: #2563eb;
  color: #fff;
}

.op-button--secondary {
  background: #e2e8f0;
  color: #0f172a;
}

.op-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

/* Toggle buttons row */
[data-op-toggle] {
  flex: 1;
  text-align: center;
}

[data-op-toggle].active {
  background: #2563eb;
  color: #fff;
}

/* Note text */
.op-note {
  font-size: 12px;
  color: #64748b;
  margin-top: 0.75rem;
  text-align: center;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .op-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Logo container */
.op-logo {
  line-height: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo image sizing */


/* Align brand text vertically */
.op-brand {
  display: flex;
  align-items: center;
          /* spacing between logo and text */
}

/* Title & subtitle */
.op-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}
.op-sub {
  font-size: 14px;
  color: #555;
  margin: 2px 0 0;
}
.op-logo img {
  display: block;
  height: 80px;        /* make it large enough */
  width: auto;         
  max-height: 90px;    
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast; /* makes lines sharper */
}
/* ---- Reset-ish bits ---- */
* { box-sizing: border-box; }
:root{
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --primary: #7c3aed;      /* violet */
  --primary-100: #ede9fe;
  --danger: #be123c;
  --danger-100:#ffe4e6;
}
html,body{ height:100%; }
body{
  margin:0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
}

/* ---- Card ---- */
.login-container{
  max-width: 460px;
  margin: 6vh auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}
.login-container h2{
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.2;
}

/* ---- Form ---- */
.form-group{ margin: 14px 0; }
.form-group label{
  display:block;
  font-size: 13px;
  color: #334155;
  margin: 0 0 6px;
}
.form-group input{
  width: 100%;
  height: 46px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(124,58,237,.15);
}

/* Inline error below inputs */
.form-group .error-msg{
  margin-top: 6px;
  font-size: 13px;
  color: var(--danger);
  background: var(--danger-100);
  border: 1px solid #fecdd3;
  padding: 6px 8px;
  border-radius: 8px;
}

/* ---- Button ---- */
button[type="submit"]{
  width: 100%;
  height: 46px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  margin-top: 6px;
}
button[type="submit"]:hover{ filter: brightness(1.03); }
button[type="submit"][disabled]{ opacity:.65; cursor: not-allowed; }

/* ---- Footer link ---- */
.signup-link{
  margin: 12px 2px 0;
  font-size: 14px;
  color: var(--muted);
}
.signup-link a{
  color: var(--primary);
  text-underline-offset: 3px;
}

/* ---- Small screens ---- */
@media (max-width: 520px){
  .login-container{ margin: 3vh 12px; padding: 18px; }
}
/* --- Like button: simple & consistent --- */
.onepack .op-like{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .5rem;
  border:1px solid #e5e7eb;
  border-radius:999px;
  background:#f1f5f9;
  color:#0f172a;                /* default color (heart + count) */
}

/* Make the SVG follow the text color */
.onepack .op-like .op-ico,
.onepack .op-like .op-ico *{
  stroke: currentColor !important;
  fill: none;
}

/* Liked state = turn red (heart + count) */
.onepack .op-like.is-liked{
  background:#fff;
  border-color:#fecaca;
  color:#e11d48;                /* red */
}

/* If you want a filled red heart when liked */
.onepack .op-like.is-liked .op-ico *{
  fill: currentColor;
}

.op-login-box{
  max-width:520px;
  margin:16px auto;
  background:#F8FAFC;
  border:1px solid #E5E7EB;
  border-radius:12px;
  padding:16px;
}
.op-login-box h2{ margin:4px 0 12px; font-size:22px; line-height:1.25; }
.op-label{ display:block; margin:8px 0 6px; font-weight:600; }
.op-input{
  width:100%; padding:10px 12px;
  border:1px solid #D1D5DB; border-radius:8px;
}
.op-row{ display:flex; gap:10px; flex-wrap:wrap; }
.op-btn{
  padding:10px 16px; border:none; border-radius:8px;
  background:#0B5A52; color:#fff; cursor:pointer;
}
.op-btn[disabled]{ opacity:.65; cursor:not-allowed; }
.op-note{ margin-top:10px; font-size:14px; color:#555; }
@media (max-width:480px){ .op-btn{ flex:1 1 auto; } }