/* =========================================
   Profile — Pro CSS
   (plug-and-play for your existing markup)
   ========================================= */

/* ---------- Brand + design tokens ---------- */
:root{
  /* palette */
  --brand-maroon:        #7D1935;
  --brand-maroon-600:    #6A162E;
  --brand-maroon-700:    #5A1227;
  --ink-950:             #121317;
  --ink-900:             #1E2026;
  --ink-700:             #3D414B;
  --ink-500:             #6C7280;
  --ink-300:             #A7AABC;
  --line-soft:           rgba(17, 24, 39, .08);
  --surface:             #FFFFFF;
  --surface-2:           #FAFAFB;
  --surface-3:           #F5F6F8;
  --success-600:         #178948;
  --danger-600:          #B42318;
  --warn-600:            #A36400;

  /* type */
  --fs-2xl: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  --fs-xl:  clamp(1rem, .96rem + .3vw, 1.125rem);
  --fs-md:  .95rem;
  --fs-sm:  .84rem;

  /* spacing */
  --r: 1.1rem; /* card radius */
  --gap-1: .5rem;
  --gap-2: .75rem;
  --gap-3: 1rem;
  --gap-4: 1.25rem;
  --pad-1: .75rem 1rem;
  --pad-2: 1rem 1.25rem;
  --pad-3: 1.25rem 1.5rem;

  /* elevation */
  --elev-1: 0 6px 16px rgba(17, 24, 39, .08);
  --elev-2: 0 10px 28px rgba(17, 24, 39, .12);

  /* transitions */
  --t-fast: 140ms cubic-bezier(.2,.7,.3,1);
}

/* ---------- Shell / container polish ---------- */
.profile-page{
  container-type: inline-size; /* for container queries if needed later */
}
.profile-page .container{
  max-width: 920px;
}

/* ---------- Card ---------- */
.profile-card{
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
  overflow: clip;
}
.profile-card:hover{
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
  border-color: rgba(17,24,39,.12);
}
.pc-body{ padding: var(--pad-2); }
@media (min-width: 576px){ .pc-body{ padding: var(--pad-3); }}

/* section dividers */
.hr-soft{
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
}

/* ---------- Avatar ---------- */
.avatar-wrap{
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--brand-maroon) 12%, white);
  color: var(--brand-maroon-700);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  flex: 0 0 auto;
}

/* ---------- Headings / text ---------- */
.pc-title{
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--ink-900);
  line-height: 1.2;
  margin: 0;
}
.profile-page .small, .profile-page small{ font-size: var(--fs-sm); }
.profile-page .text-muted{ color: var(--ink-500) !important; }

/* ---------- Pills / badges ---------- */
.pill{
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  padding: .4rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--surface-3);
  color: var(--ink-700);
  user-select: none;
}
.pill-ok{
  background: color-mix(in oklab, #0EC072 20%, white);
  border-color: color-mix(in oklab, #0EC072 30%, white);
  color: var(--success-600);
}
.pill-warn{
  background: color-mix(in oklab, #FFDAD6 45%, white);
  border-color: color-mix(in oklab, #FFDAD6 55%, white);
  color: var(--danger-600);
}
.pill-role{
  background: linear-gradient(90deg, var(--brand-maroon) 0%, var(--brand-maroon-700) 100%);
  color: #fff; border: 0;
}

/* ---------- Section chip ---------- */
.section-title{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .3px;
  color: var(--ink-900);
  background: var(--surface-2);
  padding: .5rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

/* ---------- Key–Value layout ---------- */
.kv-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem; /* tight vertical rhythm */
  margin-top: .5rem;
}
.kv-item{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .75rem;
  padding: .625rem .25rem;
  border-bottom: 1px dashed var(--line-soft);
}
.kv-item:last-child{ border-bottom: none; }

.kv-key{
  color: var(--ink-700);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-md);
}
.kv-val{
  color: var(--ink-900);
  text-align: right;
  font-weight: 700;
  font-size: var(--fs-md);
  word-break: break-word;
}
@media (min-width: 640px){
  .kv-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 992px){
  .kv-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* mobile stack key above value cleanly */
@media (max-width: 575.98px){
  .kv-item{ grid-template-columns: 1fr; }
  .kv-val{ text-align: left; }
}

/* ---------- Ends-in panel ---------- */
.ends-box{
  min-width: 10.5rem;
  border-radius: .9rem;
  padding: .6rem .8rem;
  background: color-mix(in oklab, var(--brand-maroon) 12%, white);
  border: 1px solid color-mix(in oklab, var(--brand-maroon) 28%, white);
  text-align: right;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  translate: 0 0;
  transition: translate var(--t-fast);
}
.ends-box:hover{ translate: 0 -1px; }
.ends-box .ends-label{
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--brand-maroon-600);
  opacity: .95;
  display: inline-flex; align-items: center; gap: .35rem;
}
.ends-box .ends-value{
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--brand-maroon-700);
  letter-spacing: .1px;
}
.ends-box.expired{
  background: color-mix(in oklab, #FFDAD6 50%, white);
  border-color: color-mix(in oklab, #FFDAD6 65%, white);
}
.ends-box.expired .ends-label,
.ends-box.expired .ends-value{ color: var(--danger-600); }

/* ---------- Buttons (Bootstrap-aware) ---------- */
.btn-maroon{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-maroon);
  --bs-btn-border-color: var(--brand-maroon);
  --bs-btn-hover-bg: var(--brand-maroon-600);
  --bs-btn-hover-border-color: var(--brand-maroon-600);
  --bs-btn-active-bg: var(--brand-maroon-700);
  --bs-btn-active-border-color: var(--brand-maroon-700);
  --bs-btn-focus-shadow-rgb: 125,25,53;
}
.btn-outline-maroon{
  --bs-btn-color: var(--brand-maroon);
  --bs-btn-border-color: var(--brand-maroon);
  --bs-btn-hover-bg: var(--brand-maroon);
  --bs-btn-hover-border-color: var(--brand-maroon);
  --bs-btn-hover-color: #fff;
}

/* ---------- Links / interactions ---------- */
.profile-page a{ text-decoration: none; transition: color var(--t-fast); }
.profile-page a:hover{ text-decoration: underline; }
.profile-page .alert{
  border-color: var(--line-soft) !important;
  background: var(--surface-2);
  color: var(--ink-700);
}

/* ---------- Promo redeem section ---------- */
.promo-redeem .form-label{
  font-weight: 700;
  color: var(--ink-900);
}
.promo-redeem input#promo_code{
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 800;
}
.promo-redeem .form-text{
  color: var(--ink-500);
}
.promo-redeem .btn{
  padding-inline: 1.25rem;
}
@media (min-width: 768px){
  .promo-redeem form{ column-gap: 1rem; }
}
@media (prefers-color-scheme: dark){
  .promo-redeem .form-label{ color: var(--ink-900); }
  .promo-redeem .form-text{ color: var(--ink-500); }
}

/* ---------- Focus visibility (accessibility) ---------- */
.profile-page :where(a, button, .btn, [tabindex]):focus-visible{
  outline: 3px solid color-mix(in oklab, var(--brand-maroon) 35%, #fff);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --surface: #121417;
    --surface-2: #0D0F12;
    --surface-3: #14171C;
    --ink-950: #F5F6F8;
    --ink-900: #ECEFF5;
    --ink-700: #C7CBD3;
    --ink-500: #AEB4C2;
    --line-soft: rgba(255,255,255,.12);
  }
  .profile-card{ box-shadow: none; }
  .section-title{ box-shadow: none; }
  .pill{ border-color: var(--line-soft); background: #1A1E24; color: var(--ink-700); }
  .profile-page .alert{ background: #151920; color: var(--ink-700); }
  .ends-box{
    background: color-mix(in oklab, var(--brand-maroon) 20%, #0F1216);
    border-color: color-mix(in oklab, var(--brand-maroon) 35%, #0F1216);
  }
}