/**
 * PPFT – MemberDash arculati skin
 *
 * A MemberDash regisztrációs / checkout / fiók űrlapjait a PeopleFirstTeam
 * arculatára húzza (navy + arany, serif címek, kártyás elrendezés).
 * Csak a `.ms-*` és `.memberdash-*` elemekre hat → más oldalt nem érint.
 * Feltételesen töltődik (lásd functions.php → ppft_is_memberdash_page()).
 *
 * A CSS-változók (--navy, --gold stb.) a main.css :root blokkjából jönnek.
 */

/* ── Külső kártya ──────────────────────────────────────────── */
.ms-membership-form-wrapper,
.ms-membership-details-wrapper,
.ms-account-wrapper {
  max-width: 560px;
  margin: 2rem auto 3rem;
  background: var(--navy, #0a1428);
  color: #fff;
  border-radius: 14px;
  padding: 2.75rem 2.5rem;
  box-shadow: 0 20px 56px rgba(10, 20, 40, 0.25);
}

.ms-membership-form-wrapper h2,
.ms-membership-details-wrapper h2,
.ms-account-wrapper h2 {
  font-family: var(--serif-display, Georgia, serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1.6rem;
  line-height: 1.2;
}

/* ── Mezősorok ─────────────────────────────────────────────── */
.ms-form-element,
.ms-extra-fields p {
  margin: 0 0 1.1rem;
}

.memberdash-wrapper.memberdash-input-wrapper,
.ms-extra-fields p {
  display: block;
}

/* ── Címkék ────────────────────────────────────────────────── */
.memberdash-field-label,
.ms-extra-fields label {
  display: block;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.4rem;
}

.ms-extra-fields .required {
  color: var(--gold, #d4af7a);
  margin-left: 0.15rem;
}

/* ── Beviteli mezők ────────────────────────────────────────── */
.ms-membership-form-wrapper .memberdash-field-input,
.ms-membership-form-wrapper input[type="text"],
.ms-membership-form-wrapper input[type="email"],
.ms-membership-form-wrapper input[type="password"],
.ms-extra-fields input[type="text"],
.ms-membership-details-wrapper input[type="text"],
.ms-membership-details-wrapper input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.95rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* a rejtett mezők maradjanak rejtve */
.ms-membership-form-wrapper .memberdash-hidden,
.ms-membership-form-wrapper input[type="hidden"] {
  display: none !important;
}

.ms-membership-form-wrapper .memberdash-field-input::placeholder,
.ms-extra-fields input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.ms-membership-form-wrapper .memberdash-field-input:focus,
.ms-extra-fields input[type="text"]:focus,
.ms-membership-details-wrapper input:focus {
  outline: none;
  border-color: var(--gold, #d4af7a);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(212, 175, 122, 0.18);
}

/* ── Gombok (regisztráció / fizetés indítása) ──────────────── */
.ms-membership-form-wrapper button,
.ms-membership-form-wrapper input[type="submit"],
.ms-membership-form-wrapper .memberdash-field-button,
.ms-membership-details-wrapper button,
.ms-membership-details-wrapper input[type="submit"],
.ms-gateway-button,
.ms-gateway-form button {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-deep, #06101f);
  background: var(--gold, #d4af7a);
  border: none;
  border-radius: var(--radius, 10px);
  padding: 1rem;
  margin-top: 0.5rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ms-membership-form-wrapper button:hover,
.ms-membership-form-wrapper input[type="submit"]:hover,
.ms-membership-form-wrapper .memberdash-field-button:hover,
.ms-membership-details-wrapper button:hover,
.ms-gateway-button:hover {
  background: #e0be8a;
  transform: translateY(-2px);
}

/* ── Linkek a kártyán belül ────────────────────────────────── */
.ms-membership-form-wrapper a,
.ms-membership-details-wrapper a,
.ms-account-wrapper a {
  color: var(--gold, #d4af7a);
  text-decoration: none;
}
.ms-membership-form-wrapper a:hover { text-decoration: underline; }

/* ── Üzenetek / hibák ──────────────────────────────────────── */
.ms-alert-box,
.ms-alert-error,
.ms-alert-success {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.85rem;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}
.ms-alert-error   { background: rgba(220, 70, 70, 0.15);  border: 1px solid rgba(220, 70, 70, 0.4);  color: #ffd9d9; }
.ms-alert-success { background: rgba(80, 180, 120, 0.15); border: 1px solid rgba(80, 180, 120, 0.4); color: #d8ffe8; }

/* ── Fizetési részletek / tagság-összegzés táblázat ────────── */
.ms-membership-details-wrapper table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}
.ms-membership-details-wrapper table td,
.ms-membership-details-wrapper table th {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

/* ── Fizetési / gateway gomb — a MemberDash halványsárga default eltüntetése ──
   A MemberDash `.button-primary` (és a gateway-gombok) saját, halványsárga
   hátteret / gradienst / árnyékot hoznak, ami „kilóg" a mi arany gombunk mögül.
   Itt erőltetjük a tiszta arany gombot, gradiens/árnyék/keret nélkül.
   Magasabb specificitás + !important kell, mert a plugin CSS-e felülírná. */
.ms-membership-form-wrapper .button,
.ms-membership-form-wrapper .button-primary,
.ms-membership-form-wrapper button.button,
.ms-membership-form-wrapper .memberdash-submit,
.ms-membership-form-wrapper input[type="submit"].button-primary,
.ms-membership-details-wrapper .button-primary,
.ms-gateway-form .button,
.ms-gateway-form .button-primary,
.ms-gateway-button {
  background: var(--gold, #d4af7a) !important;
  background-image: none !important;          /* gradiens kikapcsolása */
  color: var(--navy-deep, #06101f) !important;
  border: none !important;
  box-shadow: none !important;                /* a sárgás „halo"/árnyék kikapcsolása */
  text-shadow: none !important;
  border-radius: var(--radius, 10px) !important;
}

.ms-membership-form-wrapper .button:hover,
.ms-membership-form-wrapper .button-primary:hover,
.ms-membership-form-wrapper .memberdash-submit:hover,
.ms-gateway-form .button:hover,
.ms-gateway-button:hover {
  background: #e0be8a !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

/* ── Fizetési részletek / gateway dobozok — világos/sárgás háttér semlegesítése ──
   A tagság-összegző, a gateway-választó és a Stripe-mező konténerei a plugin
   default világos hátterét hozhatják a navy kártyán belül → átlátszóra húzzuk,
   hogy a navy/arany arculatba simuljanak. */
.ms-membership-form-wrapper .ms-gateway-form,
.ms-membership-form-wrapper .ms-gateway,
.ms-membership-form-wrapper .ms-gateways,
.ms-membership-form-wrapper .ms-bottom,
.ms-membership-form-wrapper .ms-top,
.ms-membership-form-wrapper .ms-membership-details,
.ms-membership-form-wrapper .ms-subscription-details,
.ms-membership-form-wrapper .ms-purchase-table,
.ms-membership-form-wrapper fieldset,
.ms-membership-details-wrapper .ms-gateway-form {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 0;
}

/* A gateway-összegző táblázat olvasható maradjon a navy kártyán */
.ms-membership-form-wrapper table,
.ms-membership-form-wrapper table td,
.ms-membership-form-wrapper table th {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9);
}

/* ── Stripe SANDBOX (teszt) mód — a halványsárga (#ffc) háttér eltüntetése ──
   A MemberDash teszt módban a fizetési blokkra `.sandbox-mode` osztályt tesz,
   `background-color:#ffc` halványsárgával + egy „Sandbox” címkével. Ez a sárga
   „lóg ki” a gomb mögül. Élesben (Stripe live) ez magától eltűnik, de teszt
   alatt is a navy/arany arculatba simítjuk. A teszt-jelzést megtartjuk, de
   diszkrét arany „TESZT” címkeként. */
.ms-membership-form-wrapper .sandbox-mode {
  background-color: transparent !important;
}
.ms-membership-form-wrapper .sandbox-mode .ms-buy-now-column::after {
  content: "TESZT" !important;
  color: var(--gold, #d4af7a) !important;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.7;
}

/* ── A maradék világos MemberDash-dobozok a navy kártyán ──
   ms-public.css default világos hátterei (#f9fafb halványkék panel stb.) → teljesen
   ELTÜNTETVE: a Név / Díj / Fizetendő összegző blokk mögé NEM kell háttér-panel,
   olvadjon bele a navy kártyába. */
.ms-membership-form-wrapper .ms-membership-details-wrapper,
.ms-membership-details-wrapper .ms-membership-details-wrapper,
.ms-membership-form-wrapper .ms-purchase-table,
.ms-membership-form-wrapper .ms-purchase-table tr,
.ms-membership-form-wrapper .ms-purchase-table td,
.ms-membership-form-wrapper .status {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
/* Az értesítő (alert) dobozok megtartanak diszkrét hátteret az olvashatóságért. */
.ms-membership-form-wrapper .ms-alert-box {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 10px;
}
.ms-membership-form-wrapper .ms-alert-warning {
  background: rgba(212, 175, 122, 0.14) !important;
  color: #f0e2c8 !important;
}

/* A „Total Today / Fizetendő most” összeg emelt kiemelése */
.ms-membership-form-wrapper .ms-purchase-table .ms-total td,
.ms-membership-form-wrapper .ms-total {
  color: #fff !important;
  font-weight: 700;
}

/* ── /memberships csomagváltó – branded ár-doboz kártyák ───────
   A MemberDash „Membership List" oldal (ahol az előfizető csomagot válthat)
   két ár-dobozt mutat (`.ms-form-price-boxes` > `.ms-membership-details-wrapper`).
   Itt a PPFT-arculatú, egymás melletti kártyákká alakítjuk (navy panel, arany ár
   és gomb), hogy a checkouthoz hasonlóan nézzen ki. */
.ms-membership-form-wrapper:has(.ms-form-price-boxes) {
  max-width: 920px;
}
.ms-form-price-boxes {
  display: grid;
  /* auto-fit: 1 elérhető csomag → teljes szélesség; 2 csomag (vendég) → két oszlop. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.ms-form-price-boxes .ms-membership-details-wrapper {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(212, 175, 122, 0.35) !important;
  border-radius: 14px;
  padding: 1.85rem 1.6rem !important;
  margin: 0 !important;
  width: auto !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
}
.ms-form-price-boxes .ms-top-bar,
.ms-form-price-boxes .ms-top-bar * {
  background: transparent !important;
  color: #fff !important;
}
.ms-form-price-boxes .ms-top-bar {
  font-family: var(--serif-display, Georgia, serif);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.ms-form-price-boxes .ms-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.ms-form-price-boxes .ms-price,
.ms-form-price-boxes .ms-price.price {
  font-family: var(--serif-display, Georgia, serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gold, #d4af7a) !important;
  background: transparent !important;
  margin: 0.4rem 0 1.35rem;
}
.ms-form-price-boxes .ms-bottom-bar {
  margin-top: auto;
  background: transparent !important;
}
.ms-form-price-boxes .ms-bottom-bar .button,
.ms-form-price-boxes .ms-bottom-bar button,
.ms-form-price-boxes .ms-bottom-bar input[type="submit"] {
  width: 100%;
}

/* ── /memberships csomagváltó (BELÉPETT nézet) – jelenlegi + elérhető csomagok ──
   A belépett előfizető nézete NEM ár-dobozos, hanem egymás alatti tétel-dobozok
   (aktuális tagság + elérhető csomagok). Ezeket világos panelekké húzzuk a navy
   kártyán, arany árral/gombbal. */
.ms-membership-form-wrapper {
  max-width: 760px;
}
.ms-membership-form-wrapper .ms-membership-details-wrapper {
  max-width: none;
  width: auto !important;
  margin: 0 0 1.25rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(212, 175, 122, 0.30) !important;
  border-radius: 12px;
  box-shadow: none !important;
  padding: 1.5rem 1.6rem !important;
  color: #fff;
}
.ms-membership-form-wrapper .ms-membership-details-wrapper .ms-title,
.ms-membership-form-wrapper .ms-membership-details-wrapper h3 {
  font-family: var(--serif-display, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff !important;
  background: transparent !important;
  margin-bottom: 0.5rem;
}
.ms-membership-form-wrapper .ms-membership-details-wrapper .ms-price,
.ms-membership-form-wrapper .ms-membership-details-wrapper .price {
  color: var(--gold, #d4af7a) !important;
  background: transparent !important;
  font-weight: 700;
}
/* „Elérhető csomagok" alcím + bevezető szöveg a navy kártyán */
.ms-membership-form-wrapper h2,
.ms-membership-form-wrapper h3 {
  color: #fff;
}
.ms-membership-form-wrapper > p,
.ms-membership-form-wrapper .ms-description,
.ms-membership-form-wrapper .ms-alert-box {
  color: rgba(255, 255, 255, 0.82);
}

/* ── Reszponzív ────────────────────────────────────────────── */
@media (max-width: 700px) {
  .ms-form-price-boxes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ms-membership-form-wrapper,
  .ms-membership-details-wrapper,
  .ms-account-wrapper {
    padding: 1.85rem 1.4rem;
    margin: 1.25rem auto 2rem;
  }
}