/**
 * InsidePiano — CBSubs: Subscription Cards, Profile Page Hide
 */

/* =====================================================
   CBSubs (cbpaidsubscriptions) — Subscription Plans Page
   ===================================================== */

/* 1. Strip Conca double-wrapper */
.demo-card:has(#cbregSubscr),
.demo-card:has(#cbregSubscr) .demo-card-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2. CB page outer/inner spacing */
.demo-card:has(#cbregSubscr) .cb_template {
  padding: 0 !important;
}

.demo-card:has(#cbregSubscr) .cbPageOuter,
.demo-card:has(#cbregSubscr) .cbPageInner {
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Page header (Mis Suscripciones) */
#cbregSubscr .cb-page-header {
  border-bottom: 1px solid rgba(228,230,252,0.12) !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem !important;
}

#cbregSubscr .cb-page-header-title {
  color: #fff !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
}

/* 4. Hide the "Registrado" (free CB registration) row — not a real subscription */
/* Scoped to Itemid 5184 (Suscripciones page) only — not displayplans page */
.itemid-5184 #cbregSubscr > .cbregPlan:first-child {
  display: none !important;
}

/* 5. Each plan = card */
#cbregSubscr > .cbregPlan {
  background: #1F1F21 !important;
  border: 1px solid rgba(228,230,252,0.12) !important;
  border-radius: 0.75rem !important;
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 6. Plan inner container — make it a column */
#cbregSubscr .cbRegNameDesc {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  /* Override Bootstrap form-check padding */
  padding-left: 0 !important;
}

/* Hide the native tick/cross checkbox area */
#cbregSubscr .cbregTick {
  display: none !important;
}

/* Plan name — styled as card header */
#cbregSubscr .cbregName {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 1.25rem 1.5rem !important;
  border-bottom: 1px solid rgba(228,230,252,0.12) !important;
  order: -1 !important;
}

/* Purple star icon before the plan name */
#cbregSubscr .cbregName::before {
  content: "\F588" !important;   /* bi-star-fill */
  font-family: "bootstrap-icons" !important;
  font-size: 1.2rem !important;
  color: #7367f0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* 7. Plan body area */
#cbregSubscr .cbregParagraph {
  padding: 1.25rem 1.5rem 0 !important;
}

#cbregSubscr .cbregDescription {
  color: #c8c8cd !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* 8. Validity / expiry info — inside .cbregParagraph (flex), full width to break to own line */
#cbregSubscr .cbregValExp {
  width: 100% !important;
  margin-top: 0 !important;
  padding: 0.5rem 0 !important;
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

#cbregSubscr .cbregValidity {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #57575a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

#cbregSubscr .cbregExpiring {
  font-size: 0.875rem !important;
  color: #939397 !important;
}

/* Active plan: expiring = green */
#cbregSubscr .cbregPlanStatus_default .cbregExpiring {
  color: #4ade80 !important;
}

/* Expired plan: expiring = muted red-ish */
#cbregSubscr > .cbregPlan:has(.fa-close) .cbregExpiring {
  color: #f87171 !important;
}

/* 9. Sub-plan selector area — lives inside .cbregParagraph (flex), full width */
#cbregSubscr .cbregSubPlanSelector {
  width: 100% !important;
  padding: 0 0 1.25rem 0 !important;
}

/* 10. Button area — inside cbregSubPlanSelector, no extra left/right padding */
#cbregSubscr .cbregButton {
  padding: 0.5rem 0 0 !important;
}

#cbregSubscr .cbregButton form,
#cbregSubscr .cbregButton .cb_button_wrapper {
  display: block !important;
  width: auto !important;
}

#cbregSubscr .cbregButton button.btn {
  background: rgba(115,103,240,0.15) !important;
  border: 1px solid rgba(115,103,240,0.55) !important;
  color: #7367f0 !important;
  border-radius: 0.375rem !important;
  padding: 0.6rem 1.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
  --bs-btn-bg: rgba(115,103,240,0.15) !important;
  --bs-btn-color: #7367f0 !important;
  --bs-btn-border-color: rgba(115,103,240,0.55) !important;
}

#cbregSubscr .cbregButton button.btn:hover {
  background: rgba(115,103,240,0.28) !important;
  border-color: rgba(115,103,240,0.7) !important;
  color: #9f92fe !important;
  box-shadow: 0 0 0 1px rgba(115,103,240,0.25) !important;
}

/* 11. Price info table (injected via JS) — matches OSM info table style */
#cbregSubscr .cbregParagraph {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.25rem !important;
  align-items: flex-start !important;
}

#cbregSubscr .cbregDescription {
  flex: 1 1 55% !important;
  min-width: 0 !important;
}

#cbregSubscr .cbsubs-info-table {
  flex-shrink: 0 !important;
  background: #161618 !important;
  border: 1px solid rgba(228,230,252,0.12) !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  align-self: flex-start !important;
  min-width: 180px !important;
}

#cbregSubscr .cbsubs-info-row {
  display: flex !important;
  align-items: center !important;
  padding: 0.6rem 1rem !important;
  border-bottom: 1px solid rgba(228,230,252,0.08) !important;
  background: #161618 !important;
}

#cbregSubscr .cbsubs-info-row:nth-child(even) {
  background: #252529 !important;
}

#cbregSubscr .cbsubs-info-row:last-child {
  border-bottom: none !important;
}

#cbregSubscr .cbsubs-info-label {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #c8c8cd !important;
  width: 5rem !important;
  flex-shrink: 0 !important;
}

#cbregSubscr .cbsubs-info-value {
  font-size: 0.875rem !important;
  color: #c8c8cd !important;
}

/* 12. Responsive — stack table below description above 900px content width */
@media (max-width: 900px) {
  #cbregSubscr .cbregParagraph {
    flex-direction: column !important;
  }

  #cbregSubscr .cbregDescription {
    flex: none !important;
    width: 100% !important;
  }

  #cbregSubscr .cbsubs-info-table {
    width: 100% !important;
    min-width: 0 !important;
  }

  #cbregSubscr .cbsubs-info-row {
    justify-content: space-between !important;
  }
}

/* 13a. Reduce gap between expiry date and Reactivar/action button
   .cbregParagraph uses flex with row-gap: 20px — tighten it up.
   Also reduce valExp padding and description p margin. */
#cbregSubscr .cbregParagraph {
  row-gap: 8px !important;
}
#cbregSubscr .cbregDescription p {
  margin-bottom: 4px !important;
}
#cbregSubscr .cbregValExp {
  padding-top: 0 !important;
  padding-bottom: 2px !important;
}
#cbregSubscr .cbregSubPlanSelector {
  margin-top: 0 !important;
}
#cbregSubscr .cbregSubPlanSelector .cbregRenewButtonForm {
  margin-top: 0 !important;
}

/* ============================================================
   displayplans (Itemid 1497) — Vitalicio upgrade card
   Injected via JS in index.php after last .cbregPlan
   ============================================================ */

.ip-vitalicio-upgrade-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1.25rem !important;
  background: linear-gradient(135deg, rgba(95,74,254,0.12) 0%, rgba(95,74,254,0.05) 100%) !important;
  border: 1px solid rgba(115,103,240,0.4) !important;
  border-radius: 0.75rem !important;
  padding: 1.5rem !important;
  margin-top: 1.5rem !important;
}

.ip-vitalicio-icon {
  flex-shrink: 0 !important;
  font-size: 1.75rem !important;
  color: #7367f0 !important;
  line-height: 1 !important;
  margin-top: 0.1rem !important;
}

.ip-vitalicio-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.ip-vitalicio-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.ip-vitalicio-desc {
  font-size: 0.875rem !important;
  color: #939397 !important;
  line-height: 1.55 !important;
}

.ip-vitalicio-price {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-top: 0.25rem !important;
}

.ip-vitalicio-price span {
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  color: #939397 !important;
  margin-left: 0.25rem !important;
}

.ip-vitalicio-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background: rgba(115,103,240,0.15) !important;
  border: 1px solid rgba(115,103,240,0.55) !important;
  color: #7367f0 !important;
  border-radius: 0.375rem !important;
  padding: 0.55rem 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  margin-top: 0.25rem !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
  align-self: flex-start !important;
}

.ip-vitalicio-btn:hover {
  background: rgba(115,103,240,0.28) !important;
  border-color: rgba(115,103,240,0.7) !important;
  color: #9f92fe !important;
  box-shadow: 0 0 0 1px rgba(115,103,240,0.25) !important;
  text-decoration: none !important;
}

/* 13. Button label inner elements ("USD 29.99 por un mes") */
#cbregSubscr .cbregButton .cpregsub_price_amount {
  font-weight: 700 !important;
  color: inherit !important;
}

#cbregSubscr .cbregButton .cpregsub_price_period {
  font-weight: 400 !important;
  color: inherit !important;
  opacity: 0.85 !important;
}

/* ============================================================
   CBSubs card on profile page — hide (redundant with Suscripciones page)
   Scoped to CB profile view via .cb_template parent
   ============================================================ */
/* Hide the entire CBSubs tab pane on profile page — managed via Suscripciones page */
.cb_template #cbtabpane25 {
  display: none !important;
}


/* ============================================================
   Suscripciones page — Dashboard CB My Account (module 1752)
   Itemid 5184 — CB Member active state
   DOM: P[text-align:center] > IMG + SPAN > BR+BR+A > BUTTON
   ============================================================ */

/* Strip Conca demo-card wrapper */
.demo-card:has(#mod-custom1752),
.demo-card:has(#mod-custom1752) .demo-card-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Reset module container alignment */
.itemid-5184 #mod-custom1752 {
  text-align: left !important;
}

/* Hide all empty <p> spacers and the inline style text-align:center on them */
.itemid-5184 #mod-custom1752 p:empty {
  display: none !important;
}

/* Hide the legacy card image entirely */
.itemid-5184 #mod-custom1752 p img {
  display: none !important;
}

/* Hide the <br> spacers inside SPAN */
.itemid-5184 #mod-custom1752 p span br {
  display: none !important;
}

/* The content <p> that wraps IMG+SPAN — turn into a dark info card */
.itemid-5184 #mod-custom1752 p:has(img) {
  background: #1F1F21 !important;
  border: 1px solid rgba(228,230,252,0.12) !important;
  border-radius: 0.75rem !important;
  padding: 1.4rem 1.5rem 1.25rem !important;
  margin: 0 0 0 0 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1rem !important;
}

/* Section title injected via ::before pseudo-element */
.itemid-5184 #mod-custom1752 p:has(img)::before {
  content: "\F292  Suscripción CBSubs" !important; /* bi-clock-history */
  font-family: "bootstrap-icons", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #c8c8cd !important;
  letter-spacing: 0.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid rgba(228,230,252,0.12) !important;
  width: 100% !important;
}

/* The <span> wrapping the button — becomes the action row */
.itemid-5184 #mod-custom1752 p span {
  font-size: inherit !important;
  line-height: inherit !important;
  display: flex !important;
  align-items: center !important;
}

/* Ghost-purple button — matches site-wide standard */
.itemid-5184 #mod-custom1752 p span a,
.itemid-5184 #mod-custom1752 p span a:visited {
  text-decoration: none !important;
}

.itemid-5184 #mod-custom1752 p span button {
  background: rgba(115,103,240,0.15) !important;
  border: 1px solid rgba(115,103,240,0.55) !important;
  color: #7367f0 !important;
  border-radius: 0.375rem !important;
  padding: 0.55rem 1.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: none !important;
  /* Kill any Bootstrap btn tokens */
  --bs-btn-bg: rgba(115,103,240,0.15) !important;
  --bs-btn-color: #7367f0 !important;
  --bs-btn-border-color: rgba(115,103,240,0.55) !important;
}

.itemid-5184 #mod-custom1752 p span button:hover {
  background: rgba(115,103,240,0.28) !important;
  border-color: rgba(115,103,240,0.7) !important;
  color: #9f92fe !important;
  box-shadow: 0 0 0 1px rgba(115,103,240,0.25) !important;
}


/* ============================================================
   Suscripciones page — Subscriptions Module (module 571)
   mod_cbsubscriptions — CB Member active state
   DOM: .modcbsubEncl > .modcbsubCurrent > div (header) + ul > li#modsubCurrentN
   ============================================================ */

/* Strip Conca demo-card wrapper */
.demo-card:has(.modcbsubEncl),
.demo-card:has(.modcbsubEncl) .demo-card-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Outer envelope — card */
.itemid-5184 .modcbsubEncl {
  background: #1F1F21 !important;
  border: 1px solid rgba(228,230,252,0.12) !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  padding: 1.4rem 1.5rem 1.25rem !important;
  margin: 0 !important;
}

/* Inner section wrapper — reset */
.itemid-5184 .modcbsubCurrent {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Header div "TUS SUSCRIPCIONES:" — section title style */
.itemid-5184 .modcbsubCurrent > div {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #939397 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 0 0 0.85rem 0 !important;
  padding: 0 0 0.75rem 0 !important;
  border-bottom: 1px solid rgba(228,230,252,0.12) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  background: transparent !important;
  /* Bootstrap Icons: bi-clock-history unicode \F292 */
}

.itemid-5184 .modcbsubCurrent > div::before {
  content: "\F292" !important; /* bi-clock-history */
  font-family: "bootstrap-icons" !important;
  font-size: 1.2rem !important;
  color: #7367f0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  font-style: normal !important;
  font-weight: normal !important;
}

/* Subscription list */
.itemid-5184 .modcbsubCurrent > ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* Each active subscription plan row */
.itemid-5184 .modcbsubCurrent > ul > li {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #c8c8cd !important;
  padding: 0.6rem 0.75rem !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(228,230,252,0.08) !important;
  border-radius: 0.5rem !important;
  margin: 0 !important;
}

/* Green dot indicator before plan name */
.itemid-5184 .modcbsubCurrent > ul > li::before {
  content: "\F26A" !important; /* bi-check-circle-fill */
  font-family: "bootstrap-icons" !important;
  font-size: 0.9rem !important;
  color: #28c76f !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  font-style: normal !important;
  font-weight: normal !important;
}