/* TigerHost — Buy Subpages (one-time) */
.sp-wrap{max-width:920px;margin:0 auto}
.sp-hero-note{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;padding:8px 14px;border-radius:999px;
  background:rgba(18,191,166,.10);border:1px solid rgba(18,191,166,.22);
  color:var(--teal-600);font-size:13px;font-weight:800;
}
.sp-steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin:18px 0 0;
}
.sp-step{
  padding:14px 16px;border-radius:var(--radius-md);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-xs);
}
.sp-step b{
  display:flex;align-items:center;gap:8px;
  margin-bottom:6px;font-size:13.5px;font-weight:900;color:var(--ink);
}
.sp-step b span.num{
  width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue-600);font-size:12px;
}
.sp-step p{margin:0;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.75}

.sp-field{display:grid;gap:8px;margin-top:4px}
.sp-field label{font-size:13.5px;font-weight:800;color:var(--ink)}
.sp-field input,.sp-field .dx-input{
  width:100%;padding:13px 14px;border-radius:14px;
  border:1px solid var(--line);background:#fff;
  font-family:var(--font-ui);font-size:14.5px;font-weight:700;color:var(--ink);
  outline:none;transition:border-color .2s ease,box-shadow .2s ease;
}
.sp-field input:focus{
  border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,107,255,.12);
}
.sp-hint{margin:6px 0 0;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.75}
.sp-example{
  margin-top:12px;padding:12px 14px;border-radius:14px;
  background:var(--bg-soft);border:1px dashed var(--line);
  font-size:13px;font-weight:600;color:var(--ink-soft);line-height:1.85;
}

.sp-plans{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;margin-top:6px;
}
.sp-plan{
  position:relative;display:flex;flex-direction:column;gap:8px;
  padding:16px 14px;border-radius:18px;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.sp-plan:hover{border-color:rgba(47,107,255,.35);transform:translateY(-2px)}
.sp-plan:has(input:checked),
.sp-plan.is-selected{
  border-color:var(--blue);
  box-shadow:0 0 0 1px var(--blue),0 12px 28px rgba(47,107,255,.14);
  background:linear-gradient(160deg,rgba(47,107,255,.06),#fff 55%);
}
.sp-plan input{position:absolute;opacity:0;pointer-events:none}
.sp-plan-name{font-size:14px;font-weight:900;color:var(--ink)}
.sp-plan-pages{font-size:13px;font-weight:800;color:var(--blue-600)}
.sp-plan-price{
  display:flex;flex-direction:column;gap:4px;margin-top:4px;
  font-family:var(--font-ui);
}
.sp-plan-price .usd{font-size:22px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.sp-plan-price .sar{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:800;color:var(--muted);
}
.sp-plan-price .sar img{width:16px;height:11px;border-radius:2px;object-fit:cover}
.sp-plan-once{
  margin-top:auto;padding-top:8px;
  font-size:11.5px;font-weight:800;color:var(--teal-600);
}
.sp-plan-btn{
  margin-top:6px;width:100%;justify-content:center;
  padding:10px 12px;font-size:13px;border-radius:12px;
}
.sp-badge{
  position:absolute;top:10px;inset-inline-end:10px;
  padding:3px 8px;border-radius:999px;
  background:linear-gradient(110deg,var(--blue),#4F8CFF);
  color:#fff;font-size:10px;font-weight:800;
  box-shadow:0 4px 10px rgba(47,107,255,.22);
}
.sp-badge.value{
  background:linear-gradient(110deg,var(--teal),#2DD4BF);
  box-shadow:0 4px 10px rgba(18,191,166,.22);
}

.sp-pay-box{
  display:grid;gap:14px;
}
.sp-total{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-radius:16px;
  background:linear-gradient(145deg,var(--blue-050),#fff);
  border:1px solid var(--blue-100);
}
.sp-total .lbl{font-size:13px;font-weight:800;color:var(--muted)}
.sp-total .amt{font-family:var(--font-ui);font-size:20px;font-weight:900;color:var(--ink)}
.sp-total .amt small{display:block;margin-top:2px;font-size:12px;font-weight:800;color:var(--muted)}
.sp-pay-methods{display:grid;gap:10px}
.sp-pay-note{
  margin:0;padding:12px 14px;border-radius:14px;
  background:#FFF8EB;border:1px solid rgba(245,158,11,.25);
  font-size:13px;font-weight:700;color:#8A5A00;line-height:1.75;
}
.sp-success{
  display:none;text-align:center;padding:28px 20px;
  border-radius:var(--radius-lg);background:#fff;
  border:1px solid rgba(18,191,166,.25);box-shadow:var(--shadow-sm);
}
.sp-success.show{display:block}
.sp-success .ico{
  width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;background:rgba(18,191,166,.12);color:var(--teal-600);font-size:28px;
}
.sp-success h2{margin:0 0 8px;font-size:22px;font-weight:900;color:var(--ink)}
.sp-success p{margin:0 0 10px;font-size:14.5px;font-weight:600;color:var(--muted);line-height:1.85}
.sp-success .actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
#card-element{
  padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff;margin-top:4px;
}
#error-message{margin-top:8px;color:#b3261e;font-size:13px;font-weight:700;min-height:1.2em}

/* Match subscribe Apple Pay / Payment Request visibility */
.payment-stack{
  display:grid;gap:12px;margin-top:8px;
  padding:16px 14px;
  border-radius:var(--radius-md);
  background:linear-gradient(160deg,rgba(47,107,255,.12),rgba(18,191,166,.10));
  border:1px solid rgba(47,107,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.payment-stack::before{
  content:"طرق الدفع";
  display:block;margin-bottom:2px;
  font-size:12px;font-weight:900;letter-spacing:.02em;color:var(--blue-700);
}
body.is-en .payment-stack::before{content:"Payment methods"}
.payment-button-wrapper{width:100%;overflow:visible}
#payment-request-wrap[hidden]{display:none !important}
#payment-request-wrap{display:block;width:100%;direction:ltr}
#payment-request-button{
  display:block;width:100%;min-height:48px;overflow:visible;direction:ltr;
}
#payment-request-button iframe{
  width:100% !important;min-width:100% !important;
}
#paypal-button-container{min-height:45px;width:100%;direction:ltr}
#payment-form{
  display:none;margin-top:12px;padding:16px;border-radius:var(--radius-md);
  background:var(--bg-soft);border:1px solid var(--line);
}

.pay-brands{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0}
.pay-brands img{height:26px;width:auto;display:block}
.pay-brands .pay-apple{height:24px;padding:2px 4px;object-fit:contain;background:#fff;border-radius:6px}
.secure-msg{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:800;color:var(--teal-600);
}

@media (max-width:900px){
  .sp-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-steps{grid-template-columns:1fr}
}
@media (max-width:520px){
  .sp-plans{grid-template-columns:1fr}
}