/* ===== Paid module – Hindi friendly ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial}
a{color:inherit;text-decoration:none}

.container{max-width:1100px;margin:0 auto;padding:24px 16px}

/* Page background */
.paid-gradient-bg{
  background: linear-gradient(135deg,#1cc79b,#0ea5a3 60%, #0ea6ff);
  padding-top: 24px;
  padding-bottom: 40px;
}

.title{color:#fff;text-align:center;margin:8px 0 6px;font-size:36px;font-weight:800}
.subtitle{color:#e2f2ff;text-align:center;margin:0 0 20px}

.toggle-wrap{display:flex;justify-content:center;gap:10px;margin:8px 0 22px}
.toggle{border:0;padding:10px 18px;border-radius:999px;background:#e5e7eb;cursor:pointer;font-weight:700}
.toggle.active{background:#22c55e;color:#fff}

/* Grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:1024px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* Card */
.u-card{
  background:#fff;border-radius:18px;overflow:hidden;position:relative;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.12);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.u-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(0,0,0,.20);border-color:#22c55e}

/* Top thumbnail like your sample */
.u-thumb{
  width:100%;
  height:250px;                 /* Thumbnail height */
  padding:12px 12px 0 12px;     /* inner margin so image not edge-to-edge */
}
.u-thumb img{
  width:100%;height:100%;
  object-fit:cover;             /* crop nicely */
  border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  display:block;
}
@media (max-width:640px){ .u-thumb{height:250px} }

.u-head{padding:12px 16px 0 16px}
.u-title{margin:0;font-weight:800;font-size:18px;color:#0f172a}
.u-sub{opacity:.9;font-size:13px;margin-top:2px;color:#14532d}

.u-body{padding:12px 16px 0 16px}
.u-price{font-size:30px;font-weight:900;margin:0 0 8px;color:#0f172a}
.u-price .cur{font-size:18px;vertical-align:top;margin-right:2px}
.u-list{list-style:none;padding:0;margin:8px 0 4px;color:#1f2937}
.u-list li{margin:8px 0;position:relative;padding-left:18px;line-height:1.35}
.u-list li:before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:#22c55e}

.u-actions{display:flex;gap:10px;padding:14px 16px 18px}

/* Buttons */
.btn-grad,.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;font-weight:800}
.btn-grad{
  background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:1px solid #0ea34a;
  box-shadow:0 6px 16px rgba(34,197,94,.35)
}
.btn-grad:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(34,197,94,.45)}
.btn-outline{border:1px solid #111;background:#fff;color:#111}
.btn-outline:hover{transform:translateY(-1px)}

.recommended{border:2px solid #22c55e}
.badge{
  position:absolute;top:10px;right:10px;background:#f59e0b;color:#fff;font-weight:800;
  font-size:12px;padding:6px 10px;border-radius:10px
}



/* ===== Paid Top Navigation – fully responsive ===== */
.paid-topnav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; background:#222; color:#fff;
  border-radius:14px; padding:10px 12px; margin:8px 0 18px 0;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  position:relative; z-index:3;
}

/* left side: links (horizontally scrollable on small screens) */
.paid-topnav__track{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  flex:1 1 auto; min-width:0;  /* <<< allow shrink */
}

/* ==== Desktop default (जैसा अभी है) ==== */
.paid-topnav__track{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  flex:1 1 auto; min-width:0;
}
.paid-topnav__track::-webkit-scrollbar{display:none}

/* ---------- मोबाइल पर बिना स्क्रोल के सब दिखाएँ ---------- */
/* Tablet-ish */
@media (max-width: 720px){
  /* 3 कॉलम ग्रिड: सारे लिंक दो/तीन पंक्तियों में दिखेंगे */
  .paid-topnav__track{
    overflow-x:visible;           /* स्क्रोल हटाएँ */
    display:grid;                 /* flex → grid */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:8px 10px;
    justify-items:center;
    width:100%;
  }
  .paid-topnav .item{
    padding:8px 6px;
    width:100%;
    justify-content:center;
  }
  .paid-topnav .item svg{ width:14px; height:14px }
  .paid-topnav .item span{ font-size:12px }
  /* बटन नीचे रहें */
  .paid-topnav{ flex-wrap:wrap; row-gap:10px }
  .paid-topnav__actions{ order:2; width:100%; justify-content:flex-end }
}

/* Small mobile (≤ 400–560px): 2 कॉलम ताकि सब बड़ा और साफ़ दिखे */
@media (max-width: 560px){
  .paid-topnav__track{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 कॉलम */
    gap:8px;
  }
  .paid-topnav .item span{ font-size:11.5px }
  .btn-nav{ padding:6px 10px; font-size:12px }
}

.paid-topnav__track::-webkit-scrollbar{ display:none; }

.paid-topnav .item{
  display:flex; align-items:center; gap:8px;
  color:#e5e7eb; text-decoration:none;
  padding:6px 10px; border-radius:10px;
  white-space:nowrap; flex:0 0 auto;         /* don’t wrap */
  transition:background .2s,color .2s, transform .2s;
}
.paid-topnav .item:hover{ background:#3b3b3b; color:#fff; transform:translateY(-1px) }
.paid-topnav .item.active{ background:#16a34a; color:#fff }

.paid-topnav .item svg{ width:14px; height:14px; flex-shrink:0; }
.paid-topnav .item span{ font-size:13px; line-height:1; }

/* right side: buttons */
.paid-topnav__actions{ display:flex; gap:8px; flex:0 0 auto; }
.btn-nav{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:10px; font-weight:800; text-decoration:none;
  border:1px solid transparent; font-size:13px; white-space:nowrap;
}
.btn-nav--primary{
  background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff;
  box-shadow:0 6px 14px rgba(34,197,94,.35);
}
.btn-nav--primary:hover{ transform:translateY(-1px) }
.btn-nav--ghost{ background:transparent; color:#fff; border-color:#fff; }
.btn-nav--ghost:hover{ background:#fff; color:#111; }

/* ---------- Breakpoints ---------- */
/* Tablet */
@media (max-width: 1024px){
  .paid-topnav{ padding:8px 10px; gap:10px; }
  .paid-topnav .item span{ font-size:12.5px; }
  .btn-nav{ padding:7px 12px; font-size:12.5px; }
}

/* Mobile */
@media (max-width: 720px){
  .paid-topnav{
    flex-wrap:wrap;            /* actions नीचे आ जाएँ */
    row-gap:8px;
  }
  .paid-topnav__track{
    order:1; width:100%;
  }
  .paid-topnav__actions{
    order:2; width:100%;
    justify-content:flex-end;  /* दाईं ओर */
  }
}

/* Small Mobile (320–400px) */
@media (max-width: 560px){
  .paid-topnav{ padding:8px; border-radius:12px; }
  .paid-topnav .item{ padding:6px 8px; }
  .paid-topnav .item svg{ width:13px; height:13px; }
  .paid-topnav .item span{ font-size:12px; }
  .btn-nav{ padding:6px 10px; font-size:12px; }
  /* अगर चाहें तो बटन फुल‑विथ कर दें: */
  /* .paid-topnav__actions{ justify-content:stretch; gap:6px; }
     .btn-nav{ flex:1; } */
}

/* ==== User dropdown on topnav ==== */
.user-menu{ position:relative }
.user-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#111; color:#fff; border:1px solid #333;
  padding:8px 12px; border-radius:10px; font-weight:800; cursor:pointer;
}
.user-btn .caret{ width:14px; height:14px; opacity:.8 }
.user-btn svg{ width:16px; height:16px }

.user-dd{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:200px; background:#fff; color:#111;
  border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.2);
  border:1px solid #e5e7eb; padding:8px; display:none; z-index:10;
}
.user-dd.open{ display:block }
.dd-item{
  display:block; padding:10px 12px; border-radius:8px; text-decoration:none;
  color:#111; font-weight:600;
}
.dd-item:hover{ background:#f3f4f6 }
.dd-sep{ height:1px; background:#eee; margin:6px 0 }
.dd-logout{ color:#b91c1c }
.dd-logout:hover{ background:#fee2e2; color:#7f1d1d }

/* छोटा स्क्रीन */
@media (max-width:560px){
  .user-btn{ padding:7px 10px; font-size:12.5px }
  .user-dd{ min-width:180px }
}