/* ═══════════════════════════════════════════════════════════
   JAGGI CONSULTANT NEWS  v3.0
   All rules use !important to override Elementor / theme CSS
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');




/* ── Variables ─────────────────────────────────────────────── */
#jaggi-app {
  --jn-o:      #E0370E;
  --jn-od:     #b82d08;
  --jn-ol:     #fff3eb;
  --jn-green:  #25d366;
  --jn-text:   #111111;
  --jn-soft:   #444444;
  --jn-muted:  #888888;
  --jn-border: #e4e4e4;
  --jn-bg:     #f0f0ee;
  --jn-white:  #ffffff;
  --jn-r:      10px;
  --jn-sh:     0 1px 8px rgba(0,0,0,.08);
  --jn-sh2:    0 4px 20px rgba(0,0,0,.13);
}

/* ── Hard Reset — fight Elementor ──────────────────────────── */
#jaggi-app,
#jaggi-app * {
  box-sizing: border-box !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
/* Let modal body elements keep their inline background/color from editor */
#jaggi-app .jn-modal-body *,
#jaggi-app .jn-modal-body {
  background-color: revert-layer !important;
  color: revert-layer !important;
}
#jaggi-app {
  color: #111111 !important;
  background: #f0f0ee !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}
#jaggi-app a {
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: none !important;
  border-bottom: none !important;
}
#jaggi-app a:hover {
  text-decoration: none !important;
  color: inherit !important;
}
#jaggi-app button {
  cursor: pointer !important;
  font-family: 'Source Sans 3', sans-serif !important;
  outline: none !important;
}
#jaggi-app img {
  max-width: 100% !important;
  height: auto !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;
}
#jaggi-app h1, #jaggi-app h2, #jaggi-app h3,
#jaggi-app h4, #jaggi-app h5, #jaggi-app h6 {
  font-weight: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  color: inherit !important;
}
/* Exclude modal body headings from the background wipe */
#jaggi-app :not(.jn-modal-body) > h1,
#jaggi-app :not(.jn-modal-body) > h2,
#jaggi-app :not(.jn-modal-body) > h3,
#jaggi-app :not(.jn-modal-body) > h4,
#jaggi-app :not(.jn-modal-body) > h5,
#jaggi-app :not(.jn-modal-body) > h6 {
  background: none !important;
}
#jaggi-app p { margin: 0 !important; padding: 0 !important; }
#jaggi-app :not(.jn-modal-body) > p { background: none !important; }
#jaggi-app ul, #jaggi-app ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#jaggi-app input, #jaggi-app select, #jaggi-app textarea {
  font-family: 'Source Sans 3', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO BANNER
   ══════════════════════════════════════════════════════════════ */
#jaggi-app .jn-hero {
  background: linear-gradient(140deg,#9a2500 0%,#c43400 40%,#E0370E 70%,#f04010 100%) !important;
  padding: 32px 0 28px !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 0 !important;
}
#jaggi-app .jn-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse at 80% 50%,rgba(255,160,80,.15) 0%,transparent 65%) !important;
}
#jaggi-app .jn-hero-inner {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  position: relative !important;
  z-index: 1 !important;
}
#jaggi-app .jn-hero-left {
  flex: 0 0 auto !important;
  max-width: 490px !important;
}
#jaggi-app .jn-hero-title {
  font-family: 'Merriweather', serif !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  font-size: clamp(24px, 3.2vw, 38px) !important;
  line-height: 1.12 !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
#jaggi-app .jn-hero-sub {
  color: rgba(255,255,255,.85) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#jaggi-app .jn-hero-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding-top: 4px !important;
  align-items: flex-start !important;
  flex: 1 !important;
  justify-content: flex-end !important;
}
#jaggi-app .jn-hero-pill {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.7) !important;
  color: #ffffff !important;
  padding: 6px 17px !important;
  border-radius: 50px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: all .18s !important;
  white-space: nowrap !important;
  font-family: 'Source Sans 3', sans-serif !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}
#jaggi-app .jn-hero-pill:hover,
#jaggi-app .jn-hero-pill.active {
  background: #ffffff !important;
  color: #E0370E !important;
  border-color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════
   BODY LAYOUT
   ══════════════════════════════════════════════════════════════ */
#jaggi-app .jn-body {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 30px 28px 50px !important;
  display: grid !important;
  grid-template-columns: 1fr 308px !important;
  gap: 30px !important;
  align-items: start !important;
  background: #f0f0ee !important;
}

/* ══════════════════════════════════════════════════════════════
   FEED TOP
   ══════════════════════════════════════════════════════════════ */
#jaggi-app .jn-feed-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
#jaggi-app .jn-feed-heading {
  font-family: 'Merriweather', serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
#jaggi-app .jn-count-badge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: #888888 !important;
}

/* ── Controls ──────────────────────────────────────────────── */
#jaggi-app .jn-controls {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 18px !important;
  flex-wrap: wrap !important;
}
#jaggi-app .jn-search-box {
  flex: 1 !important;
  min-width: 180px !important;
  position: relative !important;
}
#jaggi-app .jn-search-icon {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #888888 !important;
  pointer-events: none !important;
}
#jaggi-app #jn-search {
  width: 100% !important;
  padding: 10px 14px 10px 40px !important;
  border: 1.5px solid #e4e4e4 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  background: #ffffff !important;
  color: #111111 !important;
  transition: border-color .2s, box-shadow .2s !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important;
}
#jaggi-app #jn-search:focus {
  border-color: #E0370E !important;
  box-shadow: 0 0 0 3px rgba(232,93,4,.1) !important;
  outline: none !important;
}
#jaggi-app .jn-sort-box {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  color: #444444 !important;
  white-space: nowrap !important;
  position: relative !important;
}
#jaggi-app .jn-sort-box svg {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: #888888 !important;
}
#jaggi-app #jn-sort {
  padding: 9px 30px 9px 12px !important;
  border: 1.5px solid #e4e4e4 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  background: #ffffff !important;
  color: #111111 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  height: auto !important;
  box-shadow: none !important;
  outline: none !important;
}
#jaggi-app #jn-sort:focus {
  outline: none !important;
  border-color: #E0370E !important;
}

/* ── Filter Tabs ───────────────────────────────────────────── */
#jaggi-app .jn-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 28px !important;
}
#jaggi-app .jn-ftab {
  padding: 7px 17px !important;
  border: 1.5px solid #e4e4e4 !important;
  border-radius: 50px !important;
  background: #ffffff !important;
  color: #444444 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  font-family: 'Source Sans 3', sans-serif !important;
  transition: all .18s !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  height: auto !important;
}
#jaggi-app .jn-ftab:hover {
  border-color: #E0370E !important;
  color: #E0370E !important;
  background: #ffffff !important;
}
#jaggi-app .jn-ftab.active {
  background: #E0370E !important;
  border-color: #E0370E !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════
   DESTINATION GROUPS
   ══════════════════════════════════════════════════════════════ */
#jaggi-app .jn-group {
  margin-bottom: 42px !important;
}
#jaggi-app .jn-group-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #e4e4e4 !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  background: none !important;
}
#jaggi-app .jn-group-name {
  font-family: 'Merriweather', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
#jaggi-app .jn-group-count {
  font-size: 13px !important;
  color: #888888 !important;
}

/* ── Card Row ──────────────────────────────────────────────── */
#jaggi-app .jn-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
  align-items: start !important;
}
#jaggi-app .jn-row-singles {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO CARD  (large, image fills, text overlay)
   ══════════════════════════════════════════════════════════════ */
#jaggi-app .jn-card-hero {
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
  display: block !important;
  aspect-ratio: 4/3.2 !important;
  background: #d0cbc3 !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.08) !important;
  transition: transform .22s, box-shadow .22s !important;
  text-decoration: none !important;
  width: 100% !important;
}
#jaggi-app .jn-card-hero:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.13) !important;
}
#jaggi-app .jn-card-hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  transition: transform .35s !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  max-width: none !important;
}
#jaggi-app .jn-card-hero:hover img {
  transform: scale(1.04) !important;
}
#jaggi-app .jn-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(transparent 28%, rgba(0,0,0,.72) 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 16px 18px 18px !important;
}
#jaggi-app .jn-hero-badge-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
}
#jaggi-app .jn-dest-badge {
  background: #E0370E !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
}
#jaggi-app .jn-meta-pill {
  color: rgba(255,255,255,.88) !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#jaggi-app .jn-meta-sep {
  color: rgba(255,255,255,.4) !important;
}
#jaggi-app .jn-hero-card-title {
  font-family: 'Merriweather', serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 6px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
#jaggi-app .jn-hero-card-excerpt {
  font-size: 13px !important;
  color: rgba(255,255,255,.82) !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   SMALL CARD (white bg)
   ══════════════════════════════════════════════════════════════ */
#jaggi-app .jn-card-small {
  background: #ffffff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.08) !important;
  transition: transform .22s, box-shadow .22s !important;
  position: relative !important;
  text-decoration: none !important;
  border: none !important;
}
#jaggi-app .jn-card-small:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.13) !important;
}
#jaggi-app .jn-small-img {
  position: relative !important;
  padding-top: 55% !important;
  overflow: hidden !important;
  background: #e0dbd4 !important;
  width: 100% !important;
}
#jaggi-app .jn-small-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .35s !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  max-width: none !important;
}
#jaggi-app .jn-card-small:hover .jn-small-img img {
  transform: scale(1.04) !important;
}
#jaggi-app .jn-small-img .jn-dest-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
}
#jaggi-app .jn-small-body {
  padding: 14px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
#jaggi-app .jn-small-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}
#jaggi-app .jn-small-meta-item {
  font-size: 12px !important;
  color: #888888 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#jaggi-app .jn-small-title {
  font-family: 'Merriweather', serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
  color: #111111 !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  border: none !important;
  background: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
#jaggi-app .jn-small-excerpt {
  font-size: 13px !important;
  color: #444444 !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
#jaggi-app .jn-read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #E0370E !important;
  margin-top: auto !important;
  transition: gap .18s !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}
#jaggi-app .jn-card-small:hover .jn-read-more {
  gap: 9px !important;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════ */
#jaggi-app .jn-sidebar {
  position: sticky !important;
  top: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
#jaggi-app .jn-sidebar-card {
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.08) !important;
  overflow: hidden !important;
  border: none !important;
}
#jaggi-app .jn-trending-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 18px !important;
  border-bottom: 1.5px solid #e4e4e4 !important;
  background: #ffffff !important;
}
#jaggi-app .jn-trend-icon {
  color: #E0370E !important;
  display: flex !important;
  align-items: center !important;
}
#jaggi-app .jn-trending-header strong {
  font-family: 'Merriweather', serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  flex: 1 !important;
  color: #111111 !important;
}
#jaggi-app .jn-most-read {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .9px !important;
  color: #888888 !important;
}
#jaggi-app .jn-trend-item {
  padding: 13px 18px !important;
  border-bottom: 1px solid #e4e4e4 !important;
  cursor: pointer !important;
  transition: background .15s !important;
  display: block !important;
  background: #ffffff !important;
}
#jaggi-app .jn-trend-item:hover {
  background: #fff3eb !important;
}
#jaggi-app .jn-trend-item:last-child {
  border-bottom: none !important;
}
#jaggi-app .jn-trend-meta {
  font-size: 12px !important;
  color: #888888 !important;
  margin-bottom: 5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#jaggi-app .jn-trend-dest {
  color: #E0370E !important;
  font-weight: 600 !important;
}
#jaggi-app .jn-trend-title {
  font-family: 'Merriweather', serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
  color: #111111 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
#jaggi-app .jn-trend-item:hover .jn-trend-title {
  color: #E0370E !important;
}

/* CTA Box */
#jaggi-app .jn-cta-card {
  padding: 18px 18px 20px !important;
}
#jaggi-app .jn-cta-title {
  font-family: 'Merriweather', serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
  line-height: 1.35 !important;
  color: #111111 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
#jaggi-app .jn-cta-desc {
  font-size: 13px !important;
  color: #444444 !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
  margin-top: 0 !important;
  padding: 0 !important;
}
#jaggi-app .jn-cta-contact {
  margin-bottom: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#jaggi-app .jn-contact-row {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-size: 13.5px !important;
  color: #111111 !important;
  transition: color .15s !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}
#jaggi-app .jn-contact-row:hover {
  color: #E0370E !important;
  text-decoration: none !important;
}
#jaggi-app .jn-whatsapp-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  background: #25d366 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  padding: 12px !important;
  border-radius: 8px !important;
  transition: background .18s, transform .18s !important;
  width: 100% !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}
#jaggi-app .jn-whatsapp-btn:hover {
  background: #1eb856 !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════
   SKELETON LOADING
   ══════════════════════════════════════════════════════════════ */
#jaggi-app .jn-skeleton-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
#jaggi-app .jn-skeleton {
  height: 220px !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg,#e8e5e0 25%,#f0ede8 50%,#e8e5e0 75%) !important;
  background-size: 200% 100% !important;
  animation: jn-shimmer 1.4s infinite !important;
  border: none !important;
  box-shadow: none !important;
}
@keyframes jn-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty state */
#jaggi-app .jn-empty {
  text-align: center !important;
  padding: 60px 20px !important;
  color: #888888 !important;
}
#jaggi-app .jn-empty-icon {
  font-size: 52px !important;
  margin-bottom: 14px !important;
  display: block !important;
}
#jaggi-app .jn-empty h3 {
  font-size: 17px !important;
  color: #111111 !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
  font-family: 'Merriweather', serif !important;
}
#jaggi-app .jn-empty p {
  font-size: 14px !important;
  color: #888888 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#jaggi-app .jn-loading-sm {
  padding: 18px !important;
  font-size: 13px !important;
  color: #888888 !important;
}

/* ══════════════════════════════════════════════════════════════
   POPUP MODAL
   ══════════════════════════════════════════════════════════════ */
#jn-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  margin: 0 !important;
}
#jn-modal.open {
  display: flex !important;
}
#jn-modal .jn-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.55) !important;
  animation: jn-fade-in .2s ease !important;
}
@keyframes jn-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#jn-modal .jn-modal-box {
  position: relative !important;
  z-index: 1 !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  width: 100% !important;
  max-width: 780px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.3) !important;
  animation: jn-slide-up .25s ease !important;
  margin: auto !important;
}
@keyframes jn-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
#jn-modal .jn-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 10 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(0,0,0,.45) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
  cursor: pointer !important;
  box-shadow: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}
#jn-modal .jn-modal-close:hover {
  background: rgba(0,0,0,.7) !important;
}
#jn-modal .jn-modal-img-wrap {
  position: relative !important;
  padding-top: 42% !important;
  overflow: hidden !important;
  background: #d5cfc7 !important;
  border-radius: 14px 14px 0 0 !important;
}
#jn-modal .jn-modal-img-wrap img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  max-width: none !important;
}
#jn-modal .jn-modal-dest-badge {
  position: absolute !important;
  bottom: 12px !important;
  left: 16px !important;
  background: #E0370E !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 13px !important;
  border-radius: 50px !important;
  text-transform: capitalize !important;
  font-family: 'Source Sans 3', sans-serif !important;
  border: none !important;
  box-shadow: none !important;
}
#jn-modal .jn-modal-content {
  padding: 22px 26px 26px !important;
}
#jn-modal .jn-modal-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: #888888 !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}
#jn-modal .jn-modal-meta-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
#jn-modal .jn-modal-meta-sep {
  color: #e4e4e4 !important;
}
#jn-modal .jn-modal-source {
  color: #E0370E !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color .15s !important;
  text-decoration: none !important;
}
#jn-modal .jn-modal-source:hover {
  color: #c44b00 !important;
}
#jn-modal .jn-modal-title {
  font-family: 'Merriweather', serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #111111 !important;
  margin-bottom: 14px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
#jn-modal .jn-modal-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-bottom: 16px !important;
}
#jn-modal .jn-modal-tag {
  font-size: 12.5px !important;
  padding: 3px 12px !important;
  border-radius: 50px !important;
  border: 1.5px solid #e4e4e4 !important;
  color: #444444 !important;
  background: #ffffff !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
#jn-modal .jn-modal-body {
  font-size: 15px !important;
  color: #444444 !important;
  line-height: 1.7 !important;
  border-bottom: 1px solid #e4e4e4 !important;
  padding-bottom: 18px !important;
  margin-bottom: 18px !important;
}

/* ── Paragraphs ─────────────────────────────────────────────── */
#jn-modal .jn-modal-body p {
  margin-bottom: 14px !important;
  margin-top: 0 !important;
  color: #444444 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
#jn-modal .jn-modal-body p:last-child {
  margin-bottom: 0 !important;
}

/* ── Headings inside content ────────────────────────────────── */
#jn-modal .jn-modal-body h1,
#jn-modal .jn-modal-body h2,
#jn-modal .jn-modal-body h3,
#jn-modal .jn-modal-body h4,
#jn-modal .jn-modal-body h5,
#jn-modal .jn-modal-body h6 {
  color: #111111 !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 22px !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
#jn-modal .jn-modal-body h1 { font-size: 22px !important; }
#jn-modal .jn-modal-body h2 { font-size: 19px !important; }
#jn-modal .jn-modal-body h3 { font-size: 17px !important; }
#jn-modal .jn-modal-body h4 { font-size: 15.5px !important; }
#jn-modal .jn-modal-body h5,
#jn-modal .jn-modal-body h6 { font-size: 14px !important; }

/* ── Highlighted / coloured heading blocks (like image 1) ───── */
#jn-modal .jn-modal-body h1[style*="background"],
#jn-modal .jn-modal-body h2[style*="background"],
#jn-modal .jn-modal-body h3[style*="background"],
#jn-modal .jn-modal-body h4[style*="background"],
#jn-modal .jn-modal-body p[style*="background"] {
  padding: 12px 16px !important;
  border-radius: 6px !important;
  margin-top: 20px !important;
  margin-bottom: 14px !important;
}

/* ── Links ──────────────────────────────────────────────────── */
#jn-modal .jn-modal-body a {
  color: #E0370E !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color .15s !important;
  font-weight: inherit !important;
}
#jn-modal .jn-modal-body a:hover {
  color: #b82d08 !important;
  text-decoration: underline !important;
}

/* ── Bold and Italic ────────────────────────────────────────── */
#jn-modal .jn-modal-body strong,
#jn-modal .jn-modal-body b {
  font-weight: 700 !important;
  color: inherit !important;
}
#jn-modal .jn-modal-body em,
#jn-modal .jn-modal-body i {
  font-style: italic !important;
}

/* ── Bullet lists ───────────────────────────────────────────── */
#jn-modal .jn-modal-body ul {
  list-style: disc !important;
  padding-left: 22px !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}
#jn-modal .jn-modal-body ul li {
  list-style: disc !important;
  display: list-item !important;
  margin-bottom: 6px !important;
  color: #444444 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  padding-left: 4px !important;
}

/* ── Numbered lists ─────────────────────────────────────────── */
#jn-modal .jn-modal-body ol {
  list-style: decimal !important;
  padding-left: 22px !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}
#jn-modal .jn-modal-body ol li {
  list-style: decimal !important;
  display: list-item !important;
  margin-bottom: 6px !important;
  color: #444444 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  padding-left: 4px !important;
}

/* ── Nested lists ───────────────────────────────────────────── */
#jn-modal .jn-modal-body ul ul,
#jn-modal .jn-modal-body ol ol,
#jn-modal .jn-modal-body ul ol,
#jn-modal .jn-modal-body ol ul {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  padding-left: 20px !important;
}

/* ── Blockquote ─────────────────────────────────────────────── */
#jn-modal .jn-modal-body blockquote {
  border-left: 4px solid #E0370E !important;
  padding: 10px 18px !important;
  margin: 16px 0 !important;
  background: #fff8f5 !important;
  border-radius: 0 6px 6px 0 !important;
  font-style: italic !important;
  color: #555555 !important;
}

/* ── Horizontal rule ────────────────────────────────────────── */
#jn-modal .jn-modal-body hr {
  border: none !important;
  border-top: 1px solid #e4e4e4 !important;
  margin: 20px 0 !important;
}

/* ── Images inside content ──────────────────────────────────── */
#jn-modal .jn-modal-body img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px !important;
  margin: 12px 0 !important;
  display: block !important;
}

/* ── Tables ─────────────────────────────────────────────────── */
#jn-modal .jn-modal-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 16px !important;
  font-size: 14px !important;
}
#jn-modal .jn-modal-body th {
  background: #f5f5f5 !important;
  font-weight: 700 !important;
  padding: 9px 12px !important;
  text-align: left !important;
  border: 1px solid #e4e4e4 !important;
  color: #111111 !important;
}
#jn-modal .jn-modal-body td {
  padding: 8px 12px !important;
  border: 1px solid #e4e4e4 !important;
  color: #444444 !important;
  vertical-align: top !important;
}
#jn-modal .jn-modal-body tr:nth-child(even) td {
  background: #fafafa !important;
}

/* ── WordPress-specific highlight classes ───────────────────── */
#jn-modal .jn-modal-body .has-background {
  padding: 14px 18px !important;
  border-radius: 6px !important;
  margin-bottom: 14px !important;
}
#jn-modal .jn-modal-body .has-text-color {
  color: inherit !important;
}




/* ── WordPress mark / highlight block ───────────────────────── */
#jn-modal .jn-modal-body mark {
  padding: 2px 4px !important;
  border-radius: 3px !important;
}


#jn-modal .jn-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
#jn-modal .jn-modal-cta-text {
  font-size: 13px !important;
  color: #888888 !important;
  line-height: 1.45 !important;
  flex: 1 !important;
  min-width: 160px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#jn-modal .jn-modal-wa-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #25d366 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 20px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  transition: background .18s, transform .18s !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}
#jn-modal .jn-modal-wa-btn:hover {
  background: #1eb856 !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════
   CARD ANIMATION
   ══════════════════════════════════════════════════════════════ */
#jaggi-app .jn-card-hero,
#jaggi-app .jn-card-small {
  animation: jn-card-in .38s ease both !important;
}
@keyframes jn-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1040px) {
  #jaggi-app .jn-body {
    grid-template-columns: 1fr !important;
  }
  #jaggi-app .jn-sidebar {
    position: static !important;
  }
}
@media (max-width: 700px) {
  #jaggi-app .jn-hero-inner {
    flex-direction: column !important;
  }
  #jaggi-app .jn-hero-pills {
    justify-content: flex-start !important;
  }
  #jaggi-app .jn-body {
    padding: 20px 16px 40px !important;
  }
  #jaggi-app .jn-row {
    grid-template-columns: 1fr !important;
  }
  #jaggi-app .jn-controls {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #jaggi-app .jn-sort-box {
    justify-content: flex-end !important;
  }
  #jn-modal .jn-modal-box {
    border-radius: 10px !important;
  }
  #jn-modal .jn-modal-content {
    padding: 16px 18px 20px !important;
  }
  #jn-modal .jn-modal-title {
    font-size: 18px !important;
  }
  #jn-modal .jn-modal-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   UNIFORM 3-COLUMN CARD GRID
   Desktop: 3 col | Tablet ≤900px: 2 col | Mobile ≤580px: 1 col
   ══════════════════════════════════════════════════════════════ */
#jaggi-app .jn-group-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

/* Every card — same size, equal height */
#jaggi-app .jn-group-grid .jn-card-hero,
#jaggi-app .jn-group-grid .jn-card-small {
  grid-column: auto !important;
  grid-row: auto !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  min-height: 0 !important;
}

/* Hero card image area — fixed aspect ratio like small cards */
#jaggi-app .jn-group-grid .jn-card-hero {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.08) !important;
  transition: transform .22s, box-shadow .22s !important;
}
#jaggi-app .jn-group-grid .jn-card-hero:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.14) !important;
}

/* Hero card — hide the dark overlay text, show content below image instead */
#jaggi-app .jn-group-grid .jn-card-hero .jn-hero-overlay {
  position: relative !important;
  inset: auto !important;
  background: none !important;
  padding: 14px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  justify-content: flex-start !important;
}

/* Hero badge row — keep date/time meta but style like small card */
#jaggi-app .jn-group-grid .jn-card-hero .jn-hero-badge-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 9px !important;
  flex-wrap: wrap !important;
}

/* Meta pills — change to dark text since background is now white */
#jaggi-app .jn-group-grid .jn-card-hero .jn-meta-pill {
  color: #888888 !important;
  font-size: 12px !important;
}
#jaggi-app .jn-group-grid .jn-card-hero .jn-meta-pill svg path,
#jaggi-app .jn-group-grid .jn-card-hero .jn-meta-pill svg circle {
  stroke: #888888 !important;
}
#jaggi-app .jn-group-grid .jn-card-hero .jn-meta-sep {
  color: #cccccc !important;
}

/* Hero title — match small card title style */
#jaggi-app .jn-group-grid .jn-card-hero .jn-hero-card-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.42 !important;
  margin-bottom: 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  -webkit-text-fill-color: #111111 !important;
}
#jaggi-app .jn-group-grid .jn-card-hero:hover .jn-hero-card-title {
  color: #E0370E !important;
  -webkit-text-fill-color: #E0370E !important;
}

/* Hero excerpt — match small card excerpt style */
#jaggi-app .jn-group-grid .jn-card-hero .jn-hero-card-excerpt {
  font-size: 13px !important;
  color: #444444 !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  -webkit-text-fill-color: #444444 !important;
}

/* Hero image — fixed height, no absolute positioning */
#jaggi-app .jn-group-grid .jn-card-hero img {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
  #jaggi-app .jn-group-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 580px) {
  #jaggi-app .jn-group-grid {
    grid-template-columns: 1fr !important;
  }
  #jaggi-app .jn-group-grid .jn-card-hero img {
    height: 200px !important;
  }
}
/* ══════════════════════════════════════════════════════════════
   MODAL — AUTHOR + SHARE ROW
   ══════════════════════════════════════════════════════════════ */
#jn-modal .jn-modal-top-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #eeeeee !important;
}
/* Author block */
#jn-modal .jn-modal-author {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
#jn-modal .jn-author-avatar {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 2px solid #f0f0ee !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.1) !important;
}
#jn-modal .jn-author-avatar-initials {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #E0370E !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
#jn-modal .jn-author-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
#jn-modal .jn-author-name {
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: #111111 !important;
  font-family: 'Source Sans 3', sans-serif !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  padding: 0 !important;
}
#jn-modal .jn-author-published {
  font-size: 13px !important;
  color: #888888 !important;
  font-family: 'Source Sans 3', sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
}
#jn-modal .jn-author-published strong {
  font-weight: 400 !important;
  color: #888888 !important;
}
/* Share row */
#jn-modal .jn-modal-share-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
#jn-modal .jn-share-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1.5px solid #e8e8e8 !important;
  background: #fafafa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, transform .15s !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  flex-shrink: 0 !important;
}
/* No hover effect on share icon buttons */
#jn-modal .jn-share-btn:hover {
  background: #fafafa !important;
  border-color: #e8e8e8 !important;
  transform: none !important;
}
/* Share dropdown */
#jn-modal .jn-share-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.15) !important;
  padding: 16px !important;
  min-width: 240px !important;
  z-index: 10 !important;
  display: none !important;
  border: 1px solid #eeeeee !important;
}
#jn-modal .jn-share-dropdown.open {
  display: block !important;
}


#jn-modal .jn-share-dd-copyrow:hover {
  background: #fff !important;
}
#jn-modal .jn-share-dd-icons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-start !important;
	margin-top: 0px !important;
	padding:20px !important;
}

#jn-modal .jn-share-dd-icons .jn-share-btn {
  width: 44px !important;
  height: 44px !important;
}
/* copy toast */
#jn-copy-toast {
  position: fixed !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #111111 !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  z-index: 9999999 !important;
  opacity: 0 !important;
  transition: opacity .25s !important;
  pointer-events: none !important;
}
#jn-copy-toast.show {
  opacity: 1 !important;
}

@media (max-width: 700px) {
 #jaggi-app .jn-group-grid {
    grid-template-columns: 1fr !important;
  }
  #jaggi-app .jn-group-grid .jn-card-hero {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 0 !important;
    aspect-ratio: unset !important;
    height: auto !important;
  }
  #jaggi-app .jn-group-grid .jn-card-small {
    grid-column: 1 / -1 !important;
  }
  #jn-modal .jn-modal-top-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  #jn-modal .jn-modal-share-row {
    align-self: flex-start !important;
  }
  #jn-modal .jn-share-dropdown {
    right: auto !important;
    left: 0 !important;
    min-width: 200px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   v5 UPDATES: Font, Share Row, Hover, Deep-link toast
   ══════════════════════════════════════════════════════════════ */

/* ── System Font Stack (override Google Fonts) ──────────────── */
#jaggi-app,
#jaggi-app *,
#jn-modal,
#jn-modal * {
  font-family: ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji" !important;
}
/* Keep Merriweather only for headings/titles */
#jaggi-app .jn-hero-title,
#jaggi-app .jn-feed-heading,
#jaggi-app .jn-group-name,
#jaggi-app .jn-hero-card-title,
#jaggi-app .jn-small-title,
#jaggi-app .jn-trend-title,
#jaggi-app .jn-cta-title,
#jaggi-app .jn-trending-header strong,
#jn-modal .jn-modal-title,
#jn-modal .jn-author-name {
  font-family: ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji" !important;
}

/* ── Hero gradient updated to E0370E ────────────────────────── */
#jaggi-app .jn-hero {
  background: linear-gradient(140deg, #9a2500 0%, #c43400 40%, #E0370E 70%, #f04010 100%) !important;
}

/* ── Brand color updated everywhere ─────────────────────────── */
#jaggi-app .jn-dest-badge { background: #E0370E !important; }
#jaggi-app .jn-ftab.active { background: #E0370E !important; border-color: #E0370E !important; }
#jaggi-app .jn-ftab:hover { border-color: #E0370E !important; color: #E0370E !important; }
#jaggi-app .jn-hero-pill:hover, #jaggi-app .jn-hero-pill.active { color: #E0370E !important; }
#jaggi-app .jn-read-more { color: #E0370E !important; }
#jaggi-app .jn-trend-dest { color: #E0370E !important; }
#jaggi-app .jn-trend-item:hover .jn-trend-title { color: #E0370E !important; }
#jaggi-app #jn-search:focus { border-color: #E0370E !important; box-shadow: 0 0 0 3px rgba(224,55,14,.1) !important; }
#jaggi-app #jn-sort:focus { border-color: #E0370E !important; }
#jn-modal .jn-modal-source { color: #E0370E !important; }
#jn-modal .jn-modal-dest-badge { background: #E0370E !important; }
#jn-modal .jn-modal-wa-btn { background: #25d366 !important; }
#jn-modal .jn-modal-wa-btn:hover { background: #1eb856 !important; }
#jaggi-app .jn-whatsapp-btn { background: #25d366 !important; }
#jaggi-app .jn-whatsapp-btn:hover { background: #1eb856 !important; }

/* ── Share Row: white bg, #e8e8e8 border ────────────────────── */
#jn-modal .jn-modal-share-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

#jn-modal .jn-share-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 1.5px solid #e8e8e8 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.18s, border-color 0.18s, transform 0.15s !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  flex-shrink: 0 !important;
}

/* No hover effects on share icon buttons — icons keep their original colors */
#jn-modal .jn-share-btn:hover {
  background: #fafafa !important;
  border-color: #e8e8e8 !important;
  transform: none !important;
}
/* Do NOT invert or recolor icons on hover */

/* ── Share Dropdown styled like screenshot ──────────────────── */
#jn-modal .jn-share-dropdown {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.14) !important;
  padding: 0px !important;
  min-width: 260px !important;
  z-index: 100 !important;
  display: none !important;
  border: 1px solid #efefef !important;
}
#jn-modal .jn-share-dropdown.open {
  display: block !important;
}
#jn-modal .jn-share-dd-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 0 0 14px !important;
  padding-top: 20px !important;
  text-align: center !important;
}
#jn-modal .jn-share-dd-divider {
  height: 1px !important;
  background: #efefef !important;
  margin: 0 !important;
}
#jn-modal .jn-share-dd-copyrow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: #333333 !important;
  transition: background .15s !important;
  text-align: left !important;
  box-shadow: none !important;
  outline: none !important;
	justify-content: center !important;
  border: 1px solid #fff !important;
}

#jn-modal .jn-share-dd-icons {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  justify-items: center !important;
}
#jn-modal .jn-dd-btn {
  width: 46px !important;
  height: 46px !important;
}

/* ── Copy Toast ─────────────────────────────────────────────── */
#jn-copy-toast {
  position: fixed !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  background: #111111 !important;
  color: #ffffff !important;
  padding: 10px 22px !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  z-index: 9999999 !important;
  opacity: 0 !important;
  transition: opacity .25s, transform .25s !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  font-family: ui-sans-serif, system-ui, sans-serif !important;
}
#jn-copy-toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* ── Card date/time meta icons (white in overlay) ───────────── */
#jaggi-app .jn-meta-pill svg path,
#jaggi-app .jn-meta-pill svg circle,
#jaggi-app .jn-meta-pill svg rect,
#jaggi-app .jn-meta-pill svg polyline,
#jaggi-app .jn-meta-pill svg line {
  stroke: rgba(255,255,255,.85) !important;
}

@media (max-width: 600px) {
  #jn-modal .jn-share-dropdown {
    right: auto !important;
    left: 0px !important;
    min-width: 240px !important;
  }
  #jn-modal .jn-share-dd-icons {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   v6 ADDITIONS: Newsletter form, author date format, mobile fixes
   ══════════════════════════════════════════════════════════════ */

/* Newsletter subscribe form in sidebar */
#jaggi-app .jn-sidebar-card form input[type=email]:focus {
  border-color: #E0370E !important;
  box-shadow: 0 0 0 3px rgba(224,55,14,.1) !important;
  outline: none !important;
}
#jaggi-app .jn-sidebar-card form button:hover {
  background: #c43400 !important;
  transform: translateY(-1px) !important;
}

/* Author date format: "By Admin • April 9, 2022" */
#jn-modal .jn-author-published {
  font-size: 13px !important;
  color: #888888 !important;
  font-family: ui-sans-serif, system-ui, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile: ensure cards are visible and not clipped */
@media (max-width: 480px) {
  #jaggi-app .jn-hero-inner {
    padding: 0 16px !important;
  }
  #jaggi-app .jn-hero-title {
    font-size: 22px !important;
  }
  #jaggi-app .jn-hero-sub {
    font-size: 13px !important;
  }
  #jaggi-app .jn-group-grid .jn-card-hero {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 0 !important;
    aspect-ratio: unset !important;
    height: auto !important;
  }
  #jaggi-app .jn-card-small,
  #jaggi-app .jn-card-hero {
    /* Ensure visibility — fix overflow hidden clipping on iOS */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }
  #jn-modal .jn-modal-box {
    max-height: 95vh !important;
    border-radius: 12px 12px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #jn-modal {
    align-items: center !important;
    padding: 0 !important;
  }
}

/* Smooth skeleton shimmer on mobile */
@media (prefers-reduced-motion: reduce) {
  #jaggi-app .jn-skeleton {
    animation: none !important;
    background: #e8e5e0 !important;
  }
}
/* ══════════════════════════════════════════════════════════════
   GUTENBERG BLOCK COLOURS — restore inside modal body
   Gutenberg stores background via class, not inline style.
   The global reset wipes these. We restore them here.
   ══════════════════════════════════════════════════════════════ */

/* has-background wrapper */
#jn-modal .jn-modal-body .has-background {
  padding: 12px 18px !important;
  border-radius: 8px !important;
  margin-bottom: 14px !important;
  display: block !important;
}

/* ── All Gutenberg named background colours ── */
#jn-modal .jn-modal-body .has-black-background-color           { background-color: #000000 !important; color: #ffffff !important; }
#jn-modal .jn-modal-body .has-white-background-color           { background-color: #ffffff !important; color: #111111 !important; }
#jn-modal .jn-modal-body .has-pale-pink-background-color       { background-color: #f78da7 !important; }
#jn-modal .jn-modal-body .has-vivid-red-background-color       { background-color: #cf2e2e !important; color: #ffffff !important; }
#jn-modal .jn-modal-body .has-luminous-vivid-orange-background-color { background-color: #ff6900 !important; color: #ffffff !important; }
#jn-modal .jn-modal-body .has-luminous-vivid-amber-background-color  { background-color: #fcb900 !important; color: #111111 !important; }
#jn-modal .jn-modal-body .has-light-green-cyan-background-color      { background-color: #7bdcb5 !important; }
#jn-modal .jn-modal-body .has-vivid-green-cyan-background-color      { background-color: #00d084 !important; color: #ffffff !important; }
#jn-modal .jn-modal-body .has-pale-cyan-blue-background-color        { background-color: #8ed1fc !important; }
#jn-modal .jn-modal-body .has-vivid-cyan-blue-background-color       { background-color: #0693e3 !important; color: #ffffff !important; }
#jn-modal .jn-modal-body .has-vivid-purple-background-color          { background-color: #9b51e0 !important; color: #ffffff !important; }
#jn-modal .jn-modal-body .has-cyan-bluish-gray-background-color      { background-color: #abb8c3 !important; }
#jn-modal .jn-modal-body .has-very-light-gray-background-color       { background-color: #eeeeee !important; color: #111111 !important; }
#jn-modal .jn-modal-body .has-very-dark-gray-background-color        { background-color: #313131 !important; color: #ffffff !important; }

/* ── All Gutenberg named text colours ── */
#jn-modal .jn-modal-body .has-black-color                  { color: #000000 !important; }
#jn-modal .jn-modal-body .has-white-color                  { color: #ffffff !important; }
#jn-modal .jn-modal-body .has-pale-pink-color              { color: #f78da7 !important; }
#jn-modal .jn-modal-body .has-vivid-red-color              { color: #cf2e2e !important; }
#jn-modal .jn-modal-body .has-luminous-vivid-orange-color  { color: #ff6900 !important; }
#jn-modal .jn-modal-body .has-luminous-vivid-amber-color   { color: #fcb900 !important; }
#jn-modal .jn-modal-body .has-light-green-cyan-color       { color: #7bdcb5 !important; }
#jn-modal .jn-modal-body .has-vivid-green-cyan-color       { color: #00d084 !important; }
#jn-modal .jn-modal-body .has-pale-cyan-blue-color         { color: #8ed1fc !important; }
#jn-modal .jn-modal-body .has-vivid-cyan-blue-color        { color: #0693e3 !important; }
#jn-modal .jn-modal-body .has-vivid-purple-color           { color: #9b51e0 !important; }
#jn-modal .jn-modal-body .has-cyan-bluish-gray-color       { color: #abb8c3 !important; }
#jn-modal .jn-modal-body .has-very-light-gray-color        { color: #eeeeee !important; }
#jn-modal .jn-modal-body .has-very-dark-gray-color         { color: #313131 !important; }

/* ── Also restore border-radius from inline style ── */
#jn-modal .jn-modal-body .has-background[style*="border-radius"],
#jn-modal .jn-modal-body .has-background[style*="border-top-left-radius"] {
  border-radius: 10px !important;
}