/*
 * ARABOO LMS — Membership Levels page (Araboo-PMPro-Membership-Levels, "apml")
 *
 * Adapted from the soft-pricing-cards mockup. Everything is scoped
 * under .apml so the bundled PMPro fallback styles + theme chrome on
 * other pages stay untouched. Funcare's catch-all button rule paints
 * any bare <button>, so the .apml-btn-* rules are !important on the
 * properties the catch-all hijacks (background, color, text-transform,
 * letter-spacing, font-size, font-weight, line-height).
 */

.apml{
  --apml-teal:        var(--teal-primary, #1F9F94);
  --apml-teal-dark:   var(--teal-deep, #16363B);
  --apml-orange:      var(--accent-coral, #E97A4F);
  --apml-orange-deep: var(--accent-burnt, #C65A30);
  --apml-ink:         var(--ink, #355157);
  --apml-muted:       var(--ink-soft, #5E7A7E);

  --apml-t-teal:   var(--surface-sage, #E0EAE9);
  --apml-t-orange: #FBE3D6;
  --apml-t-yellow: var(--surface-warm, #FDF8EE);
  --apml-t-blue:   #D6ECEA;

  --apml-paper:    var(--surface-mint, #EDF7F6);
  --apml-card:     var(--surface, #FFFFFF);
  --apml-line:     #DCE7E5;
  --apml-line-soft:#E8F0EF;

  --apml-shadow-sm: 0 2px 10px rgba(31,159,148,0.08);
  --apml-shadow-md: 0 14px 34px rgba(31,159,148,0.12), 0 3px 10px rgba(53,81,87,0.05);
  --apml-shadow-pop:0 22px 48px rgba(233,122,79,0.22), 0 6px 16px rgba(53,81,87,0.08);

  font-family: 'Poppins', sans-serif;
  color: var(--apml-ink);
}
.apml *{ box-sizing:border-box; }

/* Arabic baseline — Cairo at the same px metric as the surrounding
 * Latin (Poppins / JetBrains Mono) reads ~20% smaller because its
 * x-height + descender envelope is more compact. Scale every Arabic
 * span up so the bilingual treatment lands at parity, plus a touch
 * more weight so the strokes hold their own next to Poppins 600/800. */
.apml-ar{
  font-family: 'Cairo', sans-serif;
  font-size: 1.2em;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0;
}

.apml-page{
  max-width:1160px; margin:0 auto; padding:44px 28px 80px;
  background:
    radial-gradient(circle at 12% 8%,  rgba(214,236,234,0.55), transparent 42%),
    radial-gradient(circle at 88% 0%,  rgba(251,227,214,0.45), transparent 38%),
    radial-gradient(circle at 50% 120%,rgba(224,234,233,0.6),  transparent 55%);
}

.apml-brandbar{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:22px; margin-bottom:14px;
  border-bottom:1px solid var(--apml-line);
}
.apml-brandbar .apml-wm{
  font-weight:800; font-style:italic; font-size:22px; letter-spacing:-0.02em;
  color:var(--apml-teal);
}
.apml-brandbar .apml-wm .apml-dot{ color:var(--apml-orange); }
.apml-brandbar .apml-crumb{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--apml-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
/* Crumb Arabic — the parent's 11px + uppercase + 0.22em tracking are
 * Latin-only treatments and starve Cairo of legibility. Reset both
 * and pull the Arabic up to a comfortable absolute size. */
.apml-brandbar .apml-crumb .apml-ar{
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--apml-ink);
  font-weight: 600;
}

.apml-mock{ background:transparent; border-radius:24px; }
.apml-mock-head{
  display:flex; align-items:center; gap:22px; margin-bottom:30px;
}
.apml-mock-head .apml-eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--apml-teal); margin:0 0 10px;
  display:flex; align-items:center; gap:10px;
}
.apml-mock-head .apml-eyebrow .apml-ar{
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--apml-muted);
  font-weight: 500;
}
.apml-mock-head h2{
  font-weight:800; font-size:40px; letter-spacing:-0.025em; margin:0; color:var(--apml-ink);
  line-height:1;
}
.apml-mock-head h2 .apml-soft{ color:var(--apml-teal); }
.apml-mock-head .apml-spacer{ flex:1; }

/* Mascot — bundled tessellation pattern on a teal disc.
 * pattern-tessellation.png is white-on-transparent so layering it on
 * a coloured background gives a clean white motif. */
.apml-mascot{
  width:84px; height:84px; border-radius:50%; flex-shrink:0;
  border:3px solid #fff; box-shadow:var(--apml-shadow-sm);
  background-color: var(--apml-teal);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 130%;
}

.apml-group-bar{
  display:flex; align-items:baseline; gap:14px; margin:0 0 18px;
}
.apml-group-bar .apml-gname{
  font-weight:700; font-size:21px; letter-spacing:-0.01em; color:var(--apml-ink);
}
.apml-group-bar .apml-gar{
  font-size: 20px;
  color: var(--apml-muted);
  font-weight: 500;
  line-height: 1.4;
}
.apml-group-bar .apml-gnote{
  margin-left:auto; font-size:13px; color:var(--apml-muted);
  display:inline-flex; align-items:center; gap:8px;
}
.apml-group-bar .apml-gnote::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--apml-orange);
}

.apml-plan-group + .apml-plan-group{ margin-top:38px; }
.apml-cards2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

.apml-pcard{
  position:relative; background:var(--apml-card); border-radius:20px;
  border:1px solid var(--apml-line-soft); padding:0 0 26px; overflow:hidden;
  box-shadow:var(--apml-shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
}
.apml-pcard:hover{ transform:translateY(-4px); box-shadow:var(--apml-shadow-md); }
.apml-pcard .apml-band{
  height:84px; padding:18px 24px 0;
  display:flex; align-items:flex-start; justify-content:space-between;
}
.apml-pcard.apml-tint-blue   .apml-band{ background:var(--apml-t-blue); }
.apml-pcard.apml-tint-teal   .apml-band{ background:var(--apml-t-teal); }
.apml-pcard.apml-tint-yellow .apml-band{ background:var(--apml-t-yellow); }
.apml-pcard.apml-tint-orange .apml-band{ background:var(--apml-t-orange); }
.apml-pcard .apml-tag{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; font-weight:600; color:var(--apml-teal-dark);
  background:rgba(255,255,255,0.7); padding:6px 11px 5px; border-radius:20px;
}
.apml-pcard .apml-gly{
  width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,0.7);
  display:flex; align-items:center; justify-content:center; color:var(--apml-teal-dark);
  font-size:18px;
}
.apml-pcard .apml-body{ padding:20px 24px 0; flex:1; display:flex; flex-direction:column; }
.apml-pcard .apml-pname{
  font-weight:700; font-size:22px; letter-spacing:-0.01em; margin:0; color:var(--apml-ink);
}
.apml-pcard .apml-pdesc{ font-size:13.5px; color:var(--apml-muted); margin:7px 0 0; }
/* Card-description Arabic — 13.5px parent gives Cairo ~11px optical;
 * bump to 16px so the sibling translation reads at parity. */
.apml-pcard .apml-pdesc .apml-ar{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}
.apml-pcard .apml-price{
  margin:20px 0 4px; display:flex; align-items:baseline; gap:2px; color:var(--apml-ink);
}
.apml-pcard .apml-price .apml-cur{ font-size:24px; font-weight:600; align-self:flex-start; margin-top:8px; }
.apml-pcard .apml-price .apml-amt{ font-size:54px; font-weight:800; letter-spacing:-0.03em; line-height:1; }
.apml-pcard .apml-price .apml-per{ font-size:15px; color:var(--apml-muted); font-weight:500; margin-left:4px; }
.apml-pcard .apml-save{
  font-size:12.5px; font-weight:600; color:var(--apml-orange-deep);
  background:var(--apml-t-orange); border-radius:20px; padding:5px 11px; align-self:flex-start;
  margin-bottom:4px;
}
.apml-pcard .apml-save.apml-save-placeholder{ visibility:hidden; }

/* Seats chip — short summary of who the plan covers. For group
 * levels (L5 / L6) the value is read live from the Group Accounts
 * settings PMPro stores in wp_pmpro_membership_levelmeta, so editing
 * seats in the admin reflects on the card without a template edit. */
.apml-pcard .apml-seats{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 5px 11px;
  background: var(--apml-t-teal);
  color: var(--apml-teal-dark);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.apml-pcard .apml-seats i{ font-size: 14px; line-height: 1; }

/* Feature list — short benefit bullets under the save pill. Phosphor
 * check icon left, ink-coloured copy right. Limit to ~4 items per
 * card so the grid stays balanced. */
.apml-pcard .apml-features{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.apml-pcard .apml-features li{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--apml-ink);
}
.apml-pcard .apml-features li i{
  flex-shrink: 0;
  color: var(--apml-teal);
  font-size: 16px;
  margin-top: 1px;
}
.apml-pcard.apml-popular .apml-features li i{ color: var(--apml-orange); }

.apml-btn-select{
  margin:22px 24px 0 !important; padding:14px 18px !important;
  border:none !important; border-radius:13px !important; cursor:pointer;
  font-family:'Poppins', sans-serif !important;
  font-weight:600 !important; font-size:15px !important; line-height:1.2 !important;
  letter-spacing:normal !important; text-transform:none !important;
  color:#fff !important; background:var(--apml-teal) !important;
  display:flex !important; align-items:center; justify-content:center; gap:9px;
  text-decoration:none;
  transition:background .18s ease, transform .18s ease;
}
.apml-btn-select:hover{
  background:var(--apml-teal-dark) !important;
  transform:translateY(-1px); color:#fff !important; text-decoration:none;
}
.apml-btn-select i{ font-size:16px; }

/* Popular variant */
.apml-pcard.apml-popular{ border:2px solid var(--apml-orange); box-shadow:var(--apml-shadow-pop); }
.apml-pcard.apml-popular .apml-ribbon{
  position:absolute; top:18px; right:0; background:var(--apml-orange); color:#fff;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.16em;
  text-transform:uppercase; font-weight:600; padding:6px 14px 5px;
  border-radius:20px 0 0 20px;
}
.apml-pcard.apml-popular .apml-btn-select{ background:var(--apml-orange) !important; }
.apml-pcard.apml-popular .apml-btn-select:hover{ background:var(--apml-orange-deep) !important; }
.apml-pcard.apml-popular .apml-gly,
.apml-pcard.apml-popular .apml-tag{ color:var(--apml-orange-deep); }

/* "You already hold this level" state */
.apml-pcard.apml-current{ outline:1px solid var(--apml-teal); }
.apml-current-pill{
  display:inline-flex; align-items:center; gap:6px;
  margin:22px 24px 0;
  padding:10px 14px;
  border-radius:13px;
  background:var(--apml-t-teal); color:var(--apml-teal-dark);
  font-weight:600; font-size:14px;
  justify-content:center;
}

/* Inherited PMPro message banner (errors / status) */
.apml-msg{
  margin:0 0 22px; padding:14px 18px; border-radius:13px;
  background:#fff7e6; border:1px solid #f6d7a8; color:#7a4d11;
  font-size:14px;
}
.apml-msg.apml-msg-error{ background:#fdecec; border-color:#f5c2c2; color:#8b2f2f; }
.apml-msg.apml-msg-success{ background:#e9f7ef; border-color:#bce0c8; color:#1f6a36; }
.apml-msg.apml-msg-pause{ display:flex; align-items:center; gap:10px; }
.apml-msg.apml-msg-pause i{ font-size:18px; flex:0 0 auto; }

/* Signups paused — checkout temporarily closed for launch polish */
.apml-btn-select.apml-btn-paused{
  background:var(--apml-t-teal) !important; color:var(--apml-teal-dark) !important;
  cursor:default; pointer-events:none;
}
.apml-pcard.apml-popular .apml-btn-select.apml-btn-paused{
  background:var(--apml-t-teal) !important; color:var(--apml-teal-dark) !important;
}


/* Narrow viewports — drop to single column. The viewport meta on the
 * template still pins the layout to 1100px on phones; this kicks in on
 * tablets / small laptops. */
@media (max-width: 820px){
  .apml-cards2{ grid-template-columns:1fr; }
  .apml-mock-head h2{ font-size:32px; }
  .apml-mascot{ width:64px; height:64px; }
}