/**
 * TGV TIERING — Complete Profile popup (sub-brand / File pages)
 *
 * Deliberately themed only via CSS custom properties (--primary, --tier-card,
 * --tier-line, --tier-muted) — the same token names every sub-brand landing
 * page and File page already declares in its own <style> block (see
 * pages/template-tier-*.php). A new sub-brand template needs zero CSS of its
 * own for this popup to match its look; it inherits whatever that page's
 * :root already sets. Fallback values below match the shared reference
 * templates' own defaults, for the rare page that hasn't set the tokens yet.
 */

.tier-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tier-profile-modal.is-open { display: flex; }

.tier-profile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.tier-profile-panel {
  position: relative;
  width: min(460px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--tier-card, #161616);
  border: 1px solid var(--tier-line, #2a2a2a);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  font-family: 'Poppins', sans-serif;
}

.tier-profile-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}
.tier-profile-subtitle {
  margin: -8px 0 0;
  font-size: 0.85rem;
  color: var(--tier-muted, #9a9a9a);
}

.tier-profile-field { display: flex; flex-direction: column; gap: 10px; }
.tier-profile-label { font-size: 0.9rem; font-weight: 700; color: #fff; }

.tier-profile-options { display: flex; flex-wrap: wrap; gap: 8px; }
.tier-profile-option {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--tier-line, #2a2a2a);
  background: transparent;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tier-profile-option:hover,
.tier-profile-option:focus-visible { border-color: var(--primary, #ff0013); }
.tier-profile-option.is-selected {
  background: var(--primary, #ff0013);
  border-color: var(--primary, #ff0013);
}

.tier-profile-date {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--tier-line, #2a2a2a);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 0.9rem;
  font-family: inherit;
  color-scheme: dark;
}
.tier-profile-date:focus-visible { border-color: var(--primary, #ff0013); outline: none; }

.tier-profile-skip {
  align-self: center;
  background: none;
  border: 0;
  color: var(--tier-muted, #9a9a9a);
  font-size: 0.8rem;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.tier-profile-skip:hover,
.tier-profile-skip:focus-visible { color: #fff; }
.tier-profile-skip:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: none; }