/* P3.5 Subscriptions luxury */

.plans-page { padding-block: var(--sp-9); }
.plans-page__head { text-align: center; max-width: 720px; margin: 0 auto var(--sp-9); }
.plans-page__head .eyebrow { color: var(--color-gold); margin-block-end: var(--sp-2); }
.plans-page__head .display-l { margin-block-end: var(--sp-4); }
.plans-page__intro { font-size: var(--type-body-l, 18px); color: var(--color-ink-soft); margin-block-end: var(--sp-6); line-height: 1.6; }

.plans-tier,
.plans-period {
  display: inline-flex;
  gap: 0;
  padding: 0;
  border: 1px solid var(--color-hairline);
  margin-block-end: var(--sp-3);
  background: var(--color-parchment);
}

.plans-tier__btn,
.plans-period__btn {
  background: transparent;
  border: none;
  padding: 10px 22px;
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background var(--dur-fast, 200ms) var(--ease-luxury), color var(--dur-fast, 200ms) var(--ease-luxury);
}

.plans-tier__btn.is-active,
.plans-period__btn.is-active {
  background: var(--color-ink);
  color: var(--color-parchment);
}

.plans-period__save {
  color: var(--color-gold);
  margin-inline-start: 6px;
  font-size: var(--type-eyebrow);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
  margin-block-start: var(--sp-6);
}

.plan-card {
  background: var(--color-mist);
  padding: var(--sp-7) var(--sp-5);
  border: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-luxury), transform var(--dur-base) var(--ease-luxury), box-shadow var(--dur-base) var(--ease-luxury);
}

.plan-card[data-tier="broker"] { display: none; }
.plans-grid[data-active-tier="broker"] .plan-card[data-tier="broker"] { display: flex; }
.plans-grid[data-active-tier="broker"] .plan-card[data-tier="owner"] { display: none; }

.plan-card--popular {
  background: var(--color-parchment);
  border-color: var(--color-gold);
  transform: translateY(-12px);
  box-shadow: var(--shadow-3, 0 24px 48px -16px rgba(15, 20, 25, 0.18));
}

.plan-card__badge {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--color-gold);
  color: var(--color-ink);
  padding: 4px 14px;
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.plan-card__name { color: var(--color-gold); margin-block-end: var(--sp-3); }

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-block-end: var(--sp-3);
  flex-wrap: wrap;
}

.plan-card__currency {
  font-size: var(--type-h3);
  color: var(--color-ink-soft);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-family: var(--font-sans);
}

.plan-card__price-amount {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  font-weight: 400;
  color: var(--color-ink);
}

.plan-card__per {
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.plan-card__desc {
  font-size: var(--type-body-s, 14px);
  color: var(--color-ink-soft);
  line-height: 1.6;
  margin-block-end: var(--sp-5);
}

.plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.plan-feature {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--type-body-s, 14px);
  color: var(--color-ink);
  line-height: 1.5;
}

.plan-feature__icon {
  flex-shrink: 0;
  color: var(--color-emerald-deep);
  margin-block-start: 4px;
}

.plan-feature--off { color: var(--color-ink-mute); }
.plan-feature--off .plan-feature__icon { color: var(--color-ink-mute); }

.plan-card__cta { width: 100%; margin-block-start: auto; }

.plans-page__faq {
  text-align: center;
  margin-block-start: var(--sp-9);
  color: var(--color-ink-soft);
  font-size: var(--type-body-s, 14px);
}

.plans-page__faq a {
  color: var(--color-emerald-deep);
  border-block-end: 1px solid currentColor;
  text-decoration: none;
  padding-block-end: 1px;
}

.plans-page__faq a:hover { color: var(--color-gold-2, var(--color-gold)); }

/* Payment drawer */
.payment-drawer[hidden] { display: none; }
.payment-drawer { position: fixed; inset: 0; z-index: 1000; }
.payment-drawer__backdrop { position: absolute; inset: 0; background: rgba(15, 20, 25, 0.4); }

.payment-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(460px, 100vw);
  background: var(--color-parchment);
  padding: var(--sp-7);
  overflow-y: auto;
  animation: drawer-in 300ms var(--ease-luxury);
  box-shadow: -16px 0 48px rgba(15, 20, 25, 0.18);
}

@keyframes drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

[dir="rtl"] .payment-drawer__panel { animation-name: drawer-in-rtl; }
@keyframes drawer-in-rtl {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.payment-drawer__close {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-ink);
}

.payment-summary {
  padding: var(--sp-4);
  background: var(--color-mist);
  margin-block: var(--sp-4);
  border: 1px solid var(--color-hairline);
}

.payment-summary .eyebrow { color: var(--color-gold); }
.payment-summary__plan { font-family: var(--font-display); font-size: var(--type-h3); margin: 0; }
.payment-summary__amount { font-family: var(--font-display); font-size: var(--type-display-s); margin: var(--sp-2) 0 0; }

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block-start: var(--sp-4);
}

.payment-method {
  padding: 14px 18px;
  border: 1px solid var(--color-hairline);
  background: transparent;
  text-align: start;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-body, 16px);
  color: var(--color-ink);
  transition: border-color var(--dur-fast, 200ms) var(--ease-luxury);
}

.payment-method:hover,
.payment-method:focus-visible { border-color: var(--color-emerald-deep); }

/* Luxury form */
.luxury-field { display: flex; flex-direction: column; gap: 6px; margin-block-end: var(--sp-3); }
.luxury-field .help-text { font-size: var(--type-eyebrow); color: var(--color-ink-soft); margin: 0; }

/* Arrival pages */
.arrival { padding-block: var(--sp-9); text-align: center; max-width: 640px; margin: 0 auto; }
.arrival__mark { display: inline-flex; padding: var(--sp-3); margin-block-end: var(--sp-5); color: var(--color-emerald-deep); }
.arrival--warn .arrival__mark { color: var(--color-gold); }
.arrival .eyebrow { color: var(--color-gold); margin-block-end: var(--sp-2); }
.arrival__title { margin-block-end: var(--sp-4); }
.arrival__desc { font-size: var(--type-body-l, 18px); color: var(--color-ink-soft); line-height: 1.6; margin-block-end: var(--sp-7); }

.arrival__summary {
  border: 1px solid var(--color-hairline);
  background: var(--color-mist);
  padding: var(--sp-5);
  text-align: start;
  margin-block-end: var(--sp-7);
  display: grid;
  gap: var(--sp-2);
}

.arrival__summary .eyebrow { color: var(--color-gold); margin: 0; }
.arrival__summary dt { font-family: var(--font-sans); font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-ink-soft); }
.arrival__summary dd { margin: 0 0 var(--sp-2) 0; font-family: var(--font-display); font-size: var(--type-h3); color: var(--color-ink); }

.arrival__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.arrival-card {
  padding: var(--sp-4);
  border: 1px solid var(--color-hairline);
  background: var(--color-parchment);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color var(--dur-fast, 200ms) var(--ease-luxury);
  display: block;
  text-align: start;
}
.arrival-card:hover { border-color: var(--color-emerald-deep); }
.arrival-card__title { font-family: var(--font-display); font-size: var(--type-h3); margin: 0 0 var(--sp-2); color: var(--color-ink); }
.arrival-card__desc { font-size: var(--type-body-s, 14px); color: var(--color-ink-soft); margin: 0; line-height: 1.5; }

/* My Subscription */
.my-sub { padding-block: var(--sp-9); }
.my-sub__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin-block-end: var(--sp-7); }
.my-sub__head h1 { margin: 0; }

.my-sub__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--sp-6);
}

@media (max-width: 920px) { .my-sub__layout { grid-template-columns: 1fr; } }

.my-sub__panel {
  border: 1px solid var(--color-hairline);
  background: var(--color-mist);
  padding: var(--sp-6);
  margin-block-end: var(--sp-5);
}

.my-sub__panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-hairline);
  padding-bottom: var(--sp-3);
  margin-block-end: var(--sp-4);
}

.my-sub__panel-head .eyebrow { color: var(--color-gold); margin: 0; }

.status-pill {
  display: inline-block;
  padding: 4px 12px;
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.status-pill--active { background: var(--color-emerald-deep); color: var(--color-parchment); }
.status-pill--warn   { background: var(--color-gold); color: var(--color-ink); }
.status-pill--quiet  { background: var(--color-hairline); color: var(--color-ink-soft); }

.my-sub__plan-title { font-family: var(--font-display); font-size: var(--type-display-s); margin: 0 0 var(--sp-2); color: var(--color-ink); }
.my-sub__plan-desc { color: var(--color-ink-soft); margin-block-end: var(--sp-4); line-height: 1.6; font-size: var(--type-body-s, 14px); }

.my-sub__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
  border-top: 1px solid var(--color-hairline);
  padding-block-start: var(--sp-4);
}

.my-sub__meta dt { font-family: var(--font-sans); font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-ink-soft); margin-block-end: 4px; }
.my-sub__meta dd { margin: 0; font-family: var(--font-display); font-size: var(--type-h3); color: var(--color-ink); }

.my-sub__actions { display: flex; gap: var(--sp-3); margin-block-start: var(--sp-5); flex-wrap: wrap; }
.my-sub__actions form { margin: 0; }

.usage-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--color-hairline);
}
.usage-row:last-child { border-bottom: none; }
.usage-row__label { font-family: var(--font-sans); font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-ink-soft); }
.usage-row__bar { position: relative; height: 4px; background: var(--color-hairline); overflow: hidden; }
.usage-row__fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--color-emerald-deep); transition: inline-size var(--dur-base) var(--ease-luxury); }
.usage-row__count { font-family: var(--font-display); font-size: var(--type-h3); color: var(--color-ink); white-space: nowrap; }

.billing-list { list-style: none; padding: 0; margin: 0; }
.billing-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) minmax(110px, auto) minmax(110px, auto);
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--color-hairline);
  align-items: center;
}
.billing-row:last-child { border-bottom: none; }
.billing-row__date { font-family: var(--font-sans); font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); color: var(--color-ink-soft); text-transform: uppercase; }
.billing-row__desc { color: var(--color-ink); }
.billing-row__amount { font-family: var(--font-display); font-size: var(--type-h3); color: var(--color-ink); text-align: end; }

@media (max-width: 640px) {
  .billing-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .billing-row__date { grid-column: 1 / 2; }
  .billing-row__amount { grid-column: 2 / 3; text-align: end; }
  .billing-row__desc { grid-column: 1 / -1; }
}

.empty-state { text-align: center; padding: var(--sp-7) var(--sp-5); color: var(--color-ink-soft); }

/* Cancel-flow modal */
.cancel-flow[hidden] { display: none; }
.cancel-flow { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.cancel-flow__backdrop { position: absolute; inset: 0; background: rgba(15, 20, 25, 0.4); }
.cancel-flow__panel {
  position: relative;
  background: var(--color-parchment);
  border: 1px solid var(--color-hairline);
  padding: var(--sp-7);
  max-width: 520px;
  width: 100%;
}
.cancel-flow__close { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); background: none; border: none; font-size: 24px; cursor: pointer; color: var(--color-ink); }
.cancel-flow__step { display: none; }
.cancel-flow__step.is-active { display: block; }
.cancel-flow__actions { display: flex; gap: var(--sp-3); margin-block-start: var(--sp-5); flex-wrap: wrap; }

/* Upgrade aside */
.upgrade-aside {
  border: 1px solid var(--color-gold);
  background: var(--color-gold-tint, var(--color-mist));
  padding: var(--sp-5);
  text-align: center;
}
.upgrade-aside .eyebrow { color: var(--color-gold-2, var(--color-gold)); margin-block-end: var(--sp-2); }
.upgrade-aside h3 { font-family: var(--font-display); font-size: var(--type-display-s); margin: 0 0 var(--sp-3); color: var(--color-ink); }
.upgrade-aside p { color: var(--color-ink-soft); margin-block-end: var(--sp-4); font-size: var(--type-body-s, 14px); line-height: 1.5; }