/* ALH Page Protect Pro - Front */
:root{
  --alh-bg1:#070A16;
  --alh-bg2:#0A0F24;
  --alh-purple:#7b3cff;
  --alh-purple-soft: rgba(123,60,255,.35);
  --alh-border: rgba(123,60,255,.28);
  --alh-text: rgba(255,255,255,.92);
  --alh-muted: rgba(255,255,255,.72);
  /* Card background used across subscription/account cards (slightly brighter than page) */
  --alh-card-bg: radial-gradient(900px 520px at 8% 12%, rgba(123,60,255,.14), transparent 55%),
                 linear-gradient(180deg, rgba(20,24,55,.80), rgba(9,12,26,.80));
}

.alh-pp3-protect-wrap{position:relative}
.alh-pp3-blur{filter: blur(3px); opacity:.65; pointer-events:none; user-select:none}

.alh-pp3-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:24px; z-index:20;
}
.alh-pp3-overlay__card{
  width:min(760px,100%);
  background: radial-gradient(1200px 600px at 10% 10%, rgba(123,60,255,.18), transparent 55%),
              linear-gradient(180deg, rgba(12,16,36,.92), rgba(8,10,22,.92));
  border:1px solid var(--alh-border);
  border-radius:22px;
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  padding:22px 22px 18px;
  text-align:center;
}
.alh-pp3-overlay__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(123,60,255,.38);
  background: rgba(123,60,255,.08);
  color: var(--alh-text);
  font-weight:700;
  font-size:13px;
}
.alh-pp3-overlay__title{margin-top:14px; font-size:22px; font-weight:800; color:var(--alh-text)}
.alh-pp3-overlay__text{margin-top:8px; font-size:14px; color:var(--alh-muted); line-height:1.7}
.alh-pp3-overlay__actions{margin-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

.alh-pp3-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px;
  text-decoration:none !important;
  border:1px solid transparent;
  font-weight:800;
}
.alh-pp3-btn--primary{background: var(--alh-purple); color:white; border-color: rgba(255,255,255,.12)}
.alh-pp3-btn--ghost{background: rgba(255,255,255,.04); color:var(--alh-text); border-color: rgba(255,255,255,.12)}
.alh-pp3-btn:hover{transform: translateY(-1px)}
.alh-pp3-btn:active{transform: translateY(0px)}

.alh-pp3-subbar{
  margin: 12px 0 16px;
  border-radius:18px;
  border:1px solid var(--alh-border);
  background: radial-gradient(900px 300px at 10% 0%, rgba(123,60,255,.20), transparent 60%),
              rgba(8,10,22,.72);
  box-shadow: 0 12px 45px rgba(0,0,0,.35);
}
.alh-pp3-subbar__inner{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:12px 14px;
}
.alh-pp3-subbar__left{display:flex; align-items:center; gap:10px}
.alh-pp3-subbar__dot{width:10px; height:10px; border-radius:99px; background: var(--alh-purple); box-shadow: 0 0 0 4px rgba(123,60,255,.18)}
.alh-pp3-subbar__label{color:var(--alh-text); font-weight:800}
.alh-pp3-subbar__text{color:var(--alh-muted); font-weight:700}

.alh-pp3-account{
  background: radial-gradient(1400px 600px at 5% 10%, rgba(123,60,255,.22), transparent 52%),
              linear-gradient(180deg, rgba(7,10,22,.92), rgba(5,7,16,.92));
  border:1px solid var(--alh-border);
  border-radius:24px;
  padding:18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
}
.alh-pp3-account__head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.alh-pp3-account__title{margin:0; font-size:22px; font-weight:900; color:var(--alh-text)}
.alh-pp3-link{color: rgba(180,160,255,.95); text-decoration:none; font-weight:800}
.alh-pp3-link:hover{text-decoration:underline}

.alh-pp3-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
}
@media (max-width: 820px){
  .alh-pp3-grid{grid-template-columns: 1fr;}
}

.alh-pp3-card{
  border:1px solid rgba(123,60,255,.22);
  background: var(--alh-card-bg);
  border-radius:22px;
  padding:14px;
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  min-height: 150px;
}
@media (max-width: 820px){
  .alh-pp3-card{grid-template-columns:1fr;}
}

/*
  Subscription account cards layout tweaks
  - Keep calculator/bundle name in one line
  - Move status badge to the top corner
  - Color code status: active=green, inactive=red, none=yellow
*/
/*
  New, more stable layout (keeps links intact):
  - RTL: info on the RIGHT, actions on the LEFT
  - LTR: info on the LEFT, actions on the RIGHT
  - Prevent title overflow outside the card
*/
.alh-pp3-card{
  display:flex;
  gap:16px;
  align-items:stretch;
}
[dir="rtl"] .alh-pp3-card{flex-direction:row-reverse;}

@media (max-width: 820px){
  .alh-pp3-card{flex-direction:column !important;}
  .alh-pp3-card__left{min-width:0;}
}

.alh-pp3-card__left{
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:flex-end;
  align-items:stretch;
  padding-top:38px; /* space for the badge */
  min-width: 260px;
}

.alh-pp3-card__right{
  flex:1;
  min-width:0; /* IMPORTANT: allows ellipsis to work */
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:38px; /* space for the badge */
}

[dir="rtl"] .alh-pp3-card__right{ text-align:right; align-items:flex-start; }
[dir="ltr"] .alh-pp3-card__right{ text-align:left;  align-items:flex-start; }


.alh-pp3-card__name{
  font-weight:900;
  font-size:18px;
  color:var(--alh-text);
  /* keep the title on a single line (avoid wrapping to two lines) */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
  unicode-bidi: plaintext;
}

.alh-pp3-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#e9e9ff;
  /* place the badge at the card corner */
  position:absolute;
  top:14px;
  z-index: 2;
}

/* RTL: top-right, LTR: top-left */
[dir="rtl"] .alh-pp3-pill{right:14px; left:auto;}
[dir="ltr"] .alh-pp3-pill{left:14px; right:auto;}
.alh-pp3-pill.is-active{
  background: rgba(46, 204, 113, .12);
  border-color: rgba(46, 204, 113, .35);
  color: rgba(220,255,235,.98);
}
.alh-pp3-pill.is-inactive{
  background: rgba(231, 76, 60, .12);
  border-color: rgba(231, 76, 60, .35);
  color: rgba(255,220,220,.98);
}
.alh-pp3-pill.is-none{
  /* Not subscribed = yellow */
  background: rgba(241, 196, 15, .14);
  border-color: rgba(241, 196, 15, .38);
  color: rgba(255, 246, 210, .98);
}

.alh-pp3-meta{color:var(--alh-muted); font-weight:700; line-height:1.9; font-size:13px}

.alh-pp3-renew__label{color: rgba(255,255,255,.70); font-weight:800; font-size:12px}
.alh-pp3-renew__btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-start;}
[dir="rtl"] .alh-pp3-renew__btns{justify-content:flex-end;}
.alh-pp3-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* keep "365 يوم" in one line */
  white-space:nowrap !important;
  line-height:1;
  min-width:88px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(123,60,255,.28);
  background: rgba(123,60,255,.08);
  color: rgba(235,235,255,.95);
  text-decoration:none !important;
  font-weight:900;
  font-size:12px;
}

/* if a theme forces spans to be block, neutralize inside mini buttons */
.alh-pp3-mini span{display:inline !important; white-space:nowrap !important;}
.alh-pp3-mini:hover{border-color: rgba(123,60,255,.50); transform: translateY(-1px)}
.alh-pp3-mini:active{transform:none}

.alh-pp3-note{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--alh-text);
  font-weight:800;
}

.alh-pp3-plans{
  background: radial-gradient(1400px 600px at 5% 10%, rgba(123,60,255,.22), transparent 52%),
              linear-gradient(180deg, rgba(7,10,22,.92), rgba(5,7,16,.92));
  border:1px solid var(--alh-border);
  border-radius:24px;
  padding:18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
}
.alh-pp3-plans__hint{color:var(--alh-muted); font-weight:700}
.alh-pp3-plan-group{
  margin-top:16px;
  padding:18px 18px 22px;
  border-radius:18px;
  border:1px solid rgba(162,126,255,.20);
  background:rgba(10,12,18,.35);
  box-shadow:0 12px 32px rgba(0,0,0,.25);
}

/* تمييز واضح لخلفية كل مجموعة باقات (بدون كسر هوية الألوان) */
.alh-pp3-plan-group:nth-of-type(odd){
  background:
    radial-gradient(900px 220px at 15% 0%, rgba(140,92,255,.18), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, rgba(140,92,255,.08), rgba(0,0,0,0));
}

.alh-pp3-plan-group:nth-of-type(even){
  background:
    radial-gradient(900px 220px at 85% 0%, rgba(140,92,255,.14), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, rgba(140,92,255,.05), rgba(0,0,0,0));
}
.alh-pp3-plan-group__title{font-weight:900; color:var(--alh-text); font-size:16px; margin-bottom:10px}
.alh-pp3-plan-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.alh-pp3-plan-grid.is-four .alh-pp3-plan-card:nth-child(4){grid-column:2;}
@media (max-width: 900px){ .alh-pp3-plan-grid{grid-template-columns: 1fr;} }
.alh-pp3-plan-card{
  border:1px solid rgba(123,60,255,.22);
  background: var(--alh-card-bg);
  border-radius:20px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.alh-pp3-plan-card__title{font-weight:900; color:var(--alh-text); text-align:center; font-size:15px; letter-spacing:.2px}
.alh-pp3-plan-card__row{display:flex; align-items:center; justify-content:space-between; gap:10px; white-space:nowrap}
.alh-pp3-plan-card__price{color:rgba(255,255,255,.82); font-weight:900; font-size:14px}
.alh-pp3-plan-card__dur{color: rgba(255,255,255,.74); font-weight:900; font-size:13px}

.alh-pp3-sd-toast{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; z-index:99999; background: rgba(0,0,0,.35)}
.alh-pp3-sd-toast__card{
  width:min(560px,100%);
  border-radius:22px;
  border:1px solid rgba(123,60,255,.28);
  background: radial-gradient(1100px 600px at 10% 10%, rgba(123,60,255,.20), transparent 55%),
              rgba(8,10,22,.92);
  padding:18px;
  box-shadow:0 20px 70px rgba(0,0,0,.45);
  text-align:center;
}
.alh-pp3-sd-toast__title{font-weight:900; color:var(--alh-text); font-size:18px}
.alh-pp3-sd-toast__text{margin-top:8px; color:var(--alh-muted); font-weight:700; line-height:1.7}


/* Premium Pricing UI (v3.5.x) */
.alh-pp3-pricing{
  background: radial-gradient(1400px 600px at 5% 10%, rgba(123,60,255,.22), transparent 52%),
              linear-gradient(180deg, rgba(7,10,22,.92), rgba(5,7,16,.92));
  border:1px solid var(--alh-border);
  border-radius:24px;
  padding:18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
}
.alh-pp3-pricing__head{text-align:center; margin-bottom:14px}
.alh-pp3-pricing__hint{color:var(--alh-muted); font-weight:700; font-size:13px}

.alh-pp3-pricing__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 980px){
  .alh-pp3-pricing__grid{grid-template-columns: 1fr;}
}

.alh-pp3-pricing-card{
  border:1px solid rgba(123,60,255,.24);
  background:
    radial-gradient(900px 260px at 15% 0%, rgba(123,60,255,.14), transparent 55%),
    rgba(8,10,22,.55);
  border-radius:22px;
  padding:16px 16px 14px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}
.alh-pp3-pricing-card__title{
  font-weight:900;
  font-size:16px;
  color:var(--alh-text);
  margin-top:2px;
}
.alh-pp3-desc{
  list-style:none;
  padding:0;
  margin:0;
  color: rgba(255,255,255,.72);
  font-weight:700;
  font-size:12.5px;
  line-height:1.7;
}
.alh-pp3-desc li{margin:2px 0}

.alh-pp3-pricing-card__rows{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.alh-pp3-row-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none !important;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.88);
  font-weight:900;
  font-size:13px;
  letter-spacing:.2px;
}
.alh-pp3-row-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(123,60,255,.40);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.alh-pp3-row-btn__text{white-space:nowrap}

.alh-pp3-tag{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;background:rgba(78,255,193,.18);border:1px solid rgba(78,255,193,.35);color:#bfffe9;}
.alh-pp3-tag.is-best{
  background: rgba(46, 204, 113, .12);
  border-color: rgba(46, 204, 113, .35);
  color: rgba(220,255,235,.98);
}
.alh-pp3-tag.is-pop{
  background: rgba(123,60,255,.14);
  border-color: rgba(123,60,255,.38);
}

.alh-pp3-pricing-card.is-theme-gold{
  border-color: rgba(255, 210, 120, .30);
  background:
    radial-gradient(900px 260px at 15% 0%, rgba(255, 210, 120, .14), transparent 55%),
    rgba(8,10,22,.55);
}
.alh-pp3-pricing-card.is-theme-gold .alh-pp3-row-btn:hover{
  border-color: rgba(255, 210, 120, .40);
}
.alh-pp3-pricing__empty{color:var(--alh-muted); font-weight:800; padding:10px}

@media (max-width:520px){.alh-pp3-renew__btns{flex-wrap:wrap;justify-content:flex-start;overflow-x:visible}}

.alh-pp3-pill--active{border-color:rgba(80,255,160,.35);background:rgba(80,255,160,.10);color:#bfffe2}
.alh-pp3-pill--inactive{border-color:rgba(255,90,90,.40);background:rgba(255,90,90,.10);color:#ffd0d0}


/* === ALH PP3 Account Cards - Header alignment fix (2025-12-19) === */
.alh-pp3-card{
  position:relative;
}

/* Put status pill at top-right of the whole card (RTL friendly) */
.alh-pp3-card__left > .alh-pp3-pill{
  position:absolute;
  top:14px;
  right:14px;
  left:auto;
  z-index:3;
  margin:0 !important;
}

/* Put calculator name on the same top row, opposite side (top-left) */
.alh-pp3-card__right .alh-pp3-card__name{
  position:absolute;
  top:14px;
  left:14px;
  right:auto;
  z-index:2;
  max-width:calc(100% - 160px); /* leave room for the status pill */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0;
  margin:0;
}

/* Give content room under the absolute header row */
.alh-pp3-card__left,
.alh-pp3-card__right{
  padding-top:54px;
}

/* On narrow screens, allow a bit more room for the name */
@media (max-width: 520px){
  .alh-pp3-card__right .alh-pp3-card__name{
    max-width:calc(100% - 130px);
  }
}