/* ─────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────── */
:root {
  /* Typography */
  --font-persian: inherit;

  /* Status palettes */
  --clr-active-bg:      #e8f5ee;
  --clr-active-mid:     #2da464;
  --clr-active-text:    #1a6b40;
  --clr-active-track:   #b8e2cc;

  --clr-paused-bg:      #f0f0ee;
  --clr-paused-mid:     #888880;
  --clr-paused-text:    #555550;
  --clr-paused-track:   #ccccca;

  --clr-suspended-bg:   #fde8e8;
  --clr-suspended-mid:  #c0392b;
  --clr-suspended-text: #7d1c13;
  --clr-suspended-track:#f0b8b4;

  --clr-orange-bg:      #fff3e0;
  --clr-orange-mid:     #e8890a;
  --clr-orange-text:    #a05e00;
  --clr-orange-track:   #fcd9a0;

  --clr-red-bg:         #fce8e8;
  --clr-red-mid:        #d93025;
  --clr-red-text:       #7c1a11;
  --clr-red-track:      #f4b8b4;

  --clr-deepred-bg:     #2d0808;
  --clr-deepred-mid:    #ff3b2e;
  --clr-deepred-text:   #ffcccc;
  --clr-deepred-track:  #7a1010;

  /* Dynamic (set by JS) */
  --status-bg:     var(--clr-active-bg);
  --status-mid:    var(--clr-active-mid);
  --status-text:   var(--clr-active-text);
  --status-track:  var(--clr-active-track);

  /* Neutral palette */
  --ink-0:    #ffffff;
  --ink-1:    #f7f7f5;
  --ink-2:    #ededea;
  --ink-3:    #d8d8d4;
  --ink-4:    #aaaaaa;
  --ink-5:    #777774;
  --ink-6:    #444442;
  --ink-7:    #1c1c1a;

  /* Plan thumbnail colors */
  --bronze-a: #cd7f32;
  --bronze-b: #7d4a14;
  --silver-a: #bec3c8;
  --silver-b: #5a6068;
  --gold-a:   #f0c040;
  --gold-b:   #8a6200;

  /* Layout */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --shadow-card: 0 2px 16px rgba(0,0,0,.06);
}

/* ─────────────────────────────────────────────
   RESET & BASE
   ───────────────────────────────────────────── */
.papyrus-membership-wrap *,
.papyrus-membership-wrap *::before,
.papyrus-membership-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.papyrus-membership-wrap {
  font-family: var(--font-persian);
  direction: rtl;
  color: var(--ink-7);
  max-width: 720px;
  width: 100%;
}

/* ─────────────────────────────────────────────
   GREETING HEADER
   ───────────────────────────────────────────── */
.pmb-greeting {
  font-size: clamp(13px, 3vw, 15px);
  color: var(--ink-5);
  line-height: 1.7;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ink-2);
  text-align: justify !important;
}

.pmb-greeting strong {
  color: var(--ink-7);
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   ACCORDION — the .yith-wcmbs-my-account-accordion wrapper
   ───────────────────────────────────────────── */
.yith-wcmbs-my-account-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Each membership = one accordion item */
.pmb-accordion-item {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--ink-2);
  overflow: hidden;
  transition: box-shadow .2s ease;
}

.pmb-accordion-item:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
}

/* ── Accordion Header (the <h3>) ── */
.pmb-accordion-item > h3,
.yith-wcmbs-my-account-accordion > h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  border: none;
  background: var(--ink-1);
  transition: background .15s ease;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-7);
  letter-spacing: -.01em;
  border-bottom: 1px solid transparent;
  position: relative;
}

.pmb-accordion-item > h3:hover {
  background: var(--ink-2);
}

.pmb-accordion-item.is-open > h3 {
  background: #fff;
  border-bottom-color: var(--ink-2);
}

/* Arrow indicator */
.pmb-accordion-item > h3::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-left: 2px solid var(--ink-4);
  border-bottom: 2px solid var(--ink-4);
  transform: rotate(-45deg) translateY(-2px);
  transition: transform .22s ease;
  margin-left: 4px;
  flex-shrink: 0;
  order: 99;
}

.pmb-accordion-item.is-open > h3::before {
  transform: rotate(-225deg) translateY(-2px);
}

/* Status dot in header */
.pmb-header-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--status-mid);
  flex-shrink: 0;
}

/* Plan name in header */
.pmb-header-plan-name {
  flex: 1;
  text-align: right;
}

/* Status badge in header */
.pmb-header-status-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--status-bg);
  color: var(--status-text);
  white-space: nowrap;
}

/* ── CSS-ONLY PLAN THUMBNAILS ── */
.pmb-plan-thumb {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Bronze: warm layered rings */
.pmb-plan-thumb--bronze {
  background: var(--bronze-b);
}
.pmb-plan-thumb--bronze::before,
.pmb-plan-thumb--bronze::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 3px solid var(--bronze-a);
}
.pmb-plan-thumb--bronze::before {
  width: 28px; height: 28px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  opacity: .7;
}
.pmb-plan-thumb--bronze::after {
  width: 16px; height: 16px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border-color: #e8a050;
  opacity: 1;
}

/* Silver: cool diagonal stripes */
.pmb-plan-thumb--silver {
  background: var(--silver-b);
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,.18) 4px,
    rgba(255,255,255,.18) 8px
  );
}
.pmb-plan-thumb--silver::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--silver-a);
  opacity: .9;
}

/* Gold: radial burst */
.pmb-plan-thumb--gold {
  background: var(--gold-b);
}
.pmb-plan-thumb--gold::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: conic-gradient(
    from 0deg,
    var(--gold-a) 0deg 30deg,
    var(--gold-b) 30deg 60deg,
    var(--gold-a) 60deg 90deg,
    var(--gold-b) 90deg 120deg,
    var(--gold-a) 120deg 150deg,
    var(--gold-b) 150deg 180deg,
    var(--gold-a) 180deg 210deg,
    var(--gold-b) 210deg 240deg,
    var(--gold-a) 240deg 270deg,
    var(--gold-b) 270deg 300deg,
    var(--gold-a) 300deg 330deg,
    var(--gold-b) 330deg 360deg
  );
  opacity: .85;
}
.pmb-plan-thumb--gold::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--gold-a);
  z-index: 1;
}

/* ─────────────────────────────────────────────
   ACCORDION CONTENT — .yith-wcmbs-my-account-membership-container
   ───────────────────────────────────────────── */
.yith-wcmbs-my-account-membership-container {
  display: none;
  padding: 24px 22px 22px;
  animation: pmb-slidein .22s ease;
}

@keyframes pmb-slidein {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pmb-accordion-item.is-open .yith-wcmbs-my-account-membership-container {
  display: block;
}

/* ─────────────────────────────────────────────
   PROGRESS CIRCLES SECTION
   ───────────────────────────────────────────── */
.pmb-circles-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.pmb-circle-card {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 130px;
  max-width: 200px;
  background: var(--ink-1);
  border-radius: var(--radius-md);
  padding: 20px 16px 16px;
  border: 1px solid var(--ink-2);
}

.pmb-circle-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-5);
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* SVG Circle */
.pmb-svg-circle {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
}

.pmb-svg-circle__track {
  fill: none;
  stroke: var(--status-track);
  stroke-width: 8;
  transition: stroke .4s ease;
}

.pmb-svg-circle__fill {
  fill: none;
  stroke: var(--status-mid);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dashoffset: 0;
  transform-origin: center;
  transform: rotate(-90deg);
  transition: stroke-dasharray .6s cubic-bezier(.4,0,.2,1), stroke .4s ease;
}

.pmb-svg-circle__value {
  font-family: var(--font-persian);
  font-size: 20px;
  font-weight: 700;
  fill: var(--status-text);
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill .4s ease;
}

.pmb-svg-circle__unit {
  font-family: var(--font-persian);
  font-size: 10px;
  fill: var(--ink-4);
  text-anchor: middle;
  dominant-baseline: central;
}

.pmb-circle-sublabel {
  font-size: 11px;
  color: var(--ink-4);
  text-align: center;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   METADATA DETAILS — .yith-wcmbs-membership-details
   ───────────────────────────────────────────── */
.yith-wcmbs-membership-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

/* Each detail block */
.yith-wcmbs-membership-detail {
  background: var(--ink-1);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  border: 1px solid var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.yith-wcmbs-membership-detail__title {
  font-size: 11px;
  color: var(--ink-4);
  font-weight: 500;
  letter-spacing: .03em;
}

.yith-wcmbs-membership-detail__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-6);
  line-height: 1.4;
}

/* Status detail — gets dynamic coloring */
.yith-wcmbs-membership-detail--status .yith-wcmbs-membership-detail__value {
  color: var(--status-text);
}

.yith-wcmbs-membership-detail--status {
  background: var(--status-bg);
  border-color: var(--status-track);
}

/* ─────────────────────────────────────────────
   HISTORY TIMELINE — .yith-wcmbs-membership-history-activities
   ───────────────────────────────────────────── */
.yith-wcmbs-tabs {
  margin-top: 0;
}

/* Hide default tab nav — we show history inline */
.yith-wcmbs-tabs > ul {
  display: none;
}

.yith-wcmbs-membership-history-table-container {
  background: var(--ink-1);
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-2);
  overflow: hidden;
}

/* History section label */
.pmb-history-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-4);
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--ink-2);
  text-transform: uppercase;
}

.yith-wcmbs-membership-history-activities {
  padding: 0px 0;
}

/* Individual event row */
.yith-wcmbs-membership-history-activity {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 18px;
  position: relative;
  font-size: 13px;
  transition: background .12s ease;
}

.yith-wcmbs-membership-history-activity:hover {
  background: var(--ink-2);
}

.yith-wcmbs-membership-history-activity + .yith-wcmbs-membership-history-activity {
  border-top: 1px solid var(--ink-2);
}

/* Timeline dot */
.yith-wcmbs-membership-history-activity::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  flex-shrink: 0;
  margin-top: 2px;
}

.yith-wcmbs-membership-history-activity__date {
  font-size: 12px;
  color: var(--ink-4);
  white-space: nowrap;
  min-width: 80px;
  flex-shrink: 0;
}

.yith-wcmbs-membership-history-activity__note {
  color: var(--ink-6);
  flex: 1;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   EMPTY STATE — .yith-wcmbs-my-account-membership-plans__no-membership
   ───────────────────────────────────────────── */
.pmb-empty-state {
  text-align: center;
  padding: 56px 24px 48px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-2);
  box-shadow: var(--shadow-card);
}

.pmb-empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  position: relative;
}

/* Papyrus scroll CSS illustration */
.pmb-empty-icon::before {
  content: '';
  position: absolute;
  inset: 8px 12px;
  background: var(--ink-2);
  border-radius: 4px;
  border: 1.5px solid var(--ink-3);
}

.pmb-empty-icon::after {
  content: '';
  position: absolute;
  width: 8px;
  top: 0; bottom: 0;
  right: 8px;
  background: var(--ink-3);
  border-radius: 4px;
}

.pmb-empty-icon-inner {
  position: absolute;
  width: 8px;
  top: 0; bottom: 0;
  left: 8px;
  background: var(--ink-3);
  border-radius: 4px;
  z-index: 1;
}

.pmb-empty-title {
  font-size: 20px;
  font-weight: 700;
  color: #e74c3c;
  margin-bottom: 10px;
  letter-spacing: -.02em;
}

.pmb-empty-body {
  font-size: 14px;
  color: var(--ink-5);
  line-height: 1.8;
  max-width: 340px;
  margin: 0 auto 28px;
}

.pmb-empty-cta {
  display: inline-block;
  background: #2c3e50;
  color: #fff;
  font-family: var(--font-persian);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: .01em;
  transition: background .15s ease, transform .1s ease;
  border: none;
  cursor: pointer;
}

.pmb-empty-cta:hover {
  background: #81d742;
  color: #fff;
  transform: translateY(-1px);
}

.pmb-empty-plans {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.pmb-empty-plan-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--ink-1);
  border: 1px solid var(--ink-2);
  border-radius: var(--radius-md);
  min-width: 110px;
  transition: border-color .15s ease;
}

.pmb-empty-plan-pill:hover {
  border-color: var(--ink-4);
}

.pmb-empty-plan-pill .pmb-plan-thumb {
  width: 32px;
  height: 32px;
}

.pmb-empty-plan-pill-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-6);
}

.pmb-empty-plan-pill-desc {
  font-size: 11px;
  color: var(--ink-4);
  text-align: center;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────── */
@media (max-width: 500px) {
  .pmb-circles-row { gap: 10px; }
  .pmb-circle-card { padding: 14px 10px 12px; max-width: 110px; }
  .pmb-svg-circle { width: 90px; height: 90px; }
  .pmb-svg-circle__value { font-size: 17px; }
  .yith-wcmbs-membership-details { grid-template-columns: 1fr 1fr; }
  .yith-wcmbs-my-account-membership-container { padding: 16px 14px 14px; }
  .pmb-accordion-item > h3 { padding: 14px 16px; font-size: 14px; }
}

@media (max-width: 360px) {
  .yith-wcmbs-membership-details { grid-template-columns: 1fr; }
  .pmb-circles-row { flex-direction: column; align-items: center; }
  .pmb-circle-card { width: 90%; max-width: 100%; flex-direction: row; gap: 16px; }
  .pmb-circle-label { text-align: right; }
  .pmb-empty-plans { flex-direction: column; align-items: center; }
}

@media (max-width: 280px) {
  .pmb-accordion-item > h3 { flex-wrap: wrap; }
  .pmb-header-status-badge { display: none; }
}

/* ─────────────────────────────────────────────
   ACCORDION REORDER — smooth transition when
   a card moves to the top position
   ───────────────────────────────────────────── */
.pmb-accordion-item {
  transition: box-shadow .2s ease, order .0s; /* order change is instant; JS handles animation */
}

/* ─────────────────────────────────────────────
   UTILITY
   ───────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}