/* Maktoob — Plus page additions (Batch 7): the free week, a member's status, the renewal terms */

/* the free week: one wide card above the two plans */
.ptrial {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s5) var(--s6);
  margin-bottom: var(--s6); padding: var(--s6) var(--s7);
  border-radius: var(--r-lg); background: var(--stone-50); box-shadow: var(--e1); color: var(--ink);
}
.ptrial[hidden] { display: none; }
.ptrial__ico { width: 40px; height: 40px; color: var(--blue); }
.ptrial__t { font: 700 24px/1.2 var(--f-ui); letter-spacing: -.01em; }
.ptrial__terms { margin-top: 8px; max-width: 70ch; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.ptrial__terms .link { color: var(--ink); }
.ptrial__go { white-space: nowrap; }

/* a member's own status, at the top of the Plus card */
.plan__status { margin-top: var(--s5); }
.plan__status .pill { white-space: normal; line-height: 1.35; padding-block: 6px; border-radius: 12px; }
.plan__note .link { color: inherit; }
.plan--plus [data-plus-manage] { align-self: flex-start; }
.plan--plus .btn[hidden], .faq__go .btn[hidden] { display: none; }

@media (max-width: 900px) {
  .ptrial { grid-template-columns: auto 1fr; padding: var(--s5); }
  .ptrial__go { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  .ptrial { grid-template-columns: 1fr; gap: var(--s4); }
  .ptrial__ico { width: 32px; height: 32px; }
  .ptrial__t { font-size: 21px; }
  .ptrial__go { width: 100%; min-height: 48px; }
}

/* a failed renewal: the pill stays neutral; the card's red button is the one main action (realism round) */
.plan__status .pill[data-st="failed"] { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }