/* Member "Attendance & Belt" tab. Inherits the theme's fonts and colours. */
.panda-att { display: grid; gap: 28px; }
.panda-att-card {
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 14px;
  padding: 24px;
  background: #fff;
  color: #151515;
}
.panda-att-name { margin: 0 0 16px; }
.panda-att-rank { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.panda-att-rank-text { margin: 0; font-size: 1.05em; }
.panda-att-rank-text strong { margin-right: 6px; }

.panda-belt {
  --belt: #f4f4f4; --belt2: #f4f4f4; --tab: #151515;
  position: relative;
  width: 240px; max-width: 100%; height: 30px;
  border-radius: 5px;
  background: linear-gradient(to bottom, var(--belt) 0 38%, var(--belt2) 38% 62%, var(--belt) 62% 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.panda-belt-tab {
  position: absolute; top: 0; bottom: 0; right: 18%; width: 34%;
  background: var(--tab);
  display: flex; gap: 5px; padding-left: 8px; align-items: stretch;
}
.panda-belt-tab i { width: 6px; background: #fff; display: block; }

.panda-att-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 18px; }
.panda-att-stats > div { background: #f6f6f4; border-radius: 10px; padding: 14px 16px; }
.panda-num { display: block; font-size: 2em; font-weight: 800; line-height: 1.1; }
.panda-lbl { display: block; font-size: .85em; color: #5c5b57; margin-top: 4px; }

.panda-bar { height: 10px; border-radius: 99px; background: #ecebe7; overflow: hidden; }
.panda-bar span { display: block; height: 100%; background: #151515; border-radius: 99px; }
.panda-att-note { color: #5c5b57; font-size: .9em; margin: 8px 0 0; }

.panda-att-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; }
.panda-att-cols h4 { margin: 0 0 8px; }
.panda-list { list-style: none; margin: 0; padding: 0; }
.panda-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eeede9; font-size: .95em; }
.panda-list li span:last-child { color: #5c5b57; white-space: nowrap; }

@media (max-width: 640px) {
  .panda-att-card { padding: 18px; }
  .panda-att-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .panda-num { font-size: 1.5em; }
  .panda-att-cols { grid-template-columns: 1fr; }
}

.panda-list li span:first-child { min-width: 0; }

/* Request to cancel (My Membership › subscription) */
.panda-cancel { margin-top: 32px; padding: 20px 22px; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; }
.panda-cancel h2 { margin-top: 0; }
.panda-cancel-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.panda-cancel-form input[type="checkbox"] { margin-right: 6px; }
.panda-cancel-form select, .panda-cancel-form textarea { width: 100%; max-width: 480px; }
.panda-cancel-other { color: #5c5b57; font-size: .95em; }