/* V7: Paramount+ "My account" layout for the member dashboard (my-account.html).
   Based on the Mobbin Paramount+ account screens: slim black top bar with logo + links,
   big "My account" heading on a light gray page, white cards, blue pill buttons.
   Loads after member-dashboard-v6.css and only touches layout, no behavior. */

.wrap{max-width:960px}
body{padding:0 16px 64px}

/* Slim black top bar, full-bleed */
.pp-topbar{position:relative;isolation:isolate;margin:0 0 28px;color:#fff}
.pp-topbar::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--pp-black);z-index:-1;border-bottom:1px solid #1c1c1c}
.pp-topbar-inner{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap}
.pp-brand{display:inline-flex;align-items:center;flex:0 0 auto}
.pp-brand .brand-logo{width:auto;height:30px;display:block}

/* Links sit inside the bar, plain text (Paramount style), no pill border */
.pp-topbar .pp-nav{display:flex;gap:6px;align-items:center;flex:1 1 auto;padding:0;margin:0;border:0}
.pp-topbar .pp-nav::before{display:none}
.pp-topbar .pp-nav a{color:#c5d0da;border:0;border-radius:999px;padding:0 12px;min-height:44px;display:inline-flex;align-items:center;font-weight:600;font-size:14px;background:transparent}
@media (hover:hover) and (pointer:fine){.pp-topbar .pp-nav a:hover{color:#fff;background:#1a1a1a}}
.pp-topbar .pp-nav a:active{background:#262626}

.pp-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.pp-right .user-email{color:#c5d0da;font-size:13px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-topbar #logoutBtn{background:transparent;color:#fff;border:1px solid #444;border-radius:999px;min-height:44px;padding:0 16px;font-size:14px}
@media (hover:hover) and (pointer:fine){.pp-topbar #logoutBtn:hover{border-color:#fff}}
.pp-icon-btn{min-width:44px;min-height:44px;border-radius:999px;border:1px solid #333;background:transparent;color:#c5d0da;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
@media (hover:hover) and (pointer:fine){.pp-icon-btn:hover{border-color:#666;color:#fff}}
.pp-icon-btn:active{background:#262626}

/* Page heading like Paramount's "My account" */
.pp-page-head{margin:0 0 22px}
.pp-page-head .page-title{color:var(--text);font-size:clamp(28px,5vw,40px);margin:0;letter-spacing:-.02em;line-height:1.05}
.pp-page-sub{margin:8px 0 0;color:var(--muted);font-size:15px}

/* Cards: flat white, soft shadow, generous padding */
.card{border-radius:14px;padding:26px 28px;margin-bottom:18px}
.card .eyebrow{color:var(--muted);letter-spacing:.08em;font-size:12px}
.card .title{font-size:1.35rem}
#redeemCodeBox{border-radius:12px}

/* Buttons stay pills, Paramount blue */
.btn{border-radius:999px;min-height:44px}
.btn-sm{min-height:40px}

/* Light theme on page root for dark mode legibility */
[data-theme=dark] .pp-topbar::before{border-bottom-color:#2a2a2a}
[data-theme=dark] .pp-page-head .page-title{color:#fff}

/* Phone: bar wraps into two rows, links scroll sideways */
@media (max-width:640px){
  .pp-topbar{margin-bottom:22px}
  .pp-topbar-inner{min-height:56px;gap:10px;padding:8px 0}
  .pp-brand .brand-logo{height:24px}
  .pp-topbar .pp-nav{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
  .pp-topbar .pp-nav::-webkit-scrollbar{display:none}
  .pp-topbar .pp-nav a{white-space:nowrap;padding:0 10px}
  .pp-right .user-email{display:none}
  .card{padding:20px 18px;border-radius:12px}
}

/* Subscription card layout used by the live account page markup. */
.sub-card{padding:0;overflow:hidden;border-radius:14px}
.sub-card-wrapper{display:flex;align-items:stretch;min-width:0}
.sub-card-stripe{flex:0 0 5px;background:var(--success)}
.sub-card-content{flex:1;min-width:0;padding:24px 26px}
.sub-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.sub-card-left{min-width:0}
.sub-card-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sub-card-details{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:18px 0}
.sub-card-details-col{display:grid;align-content:start;gap:14px}
.sub-card-details .detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:0!important}
.sub-card-details .detail-label{color:var(--muted);font-size:13px}
.sub-card-details .detail-value{font-weight:700;text-align:right}
.sub-card-details small{font-size:12px!important;color:var(--muted)!important}
.sub-card-divider{height:1px;background:var(--line);margin:4px 0 16px}
.sub-card-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sub-card-actions .btn{min-height:44px}
#planActions{border-top:1px solid var(--line);padding-top:18px;margin-top:8px}
@media(max-width:600px){
 .sub-card-content{padding:20px 16px}
 .sub-card-details{grid-template-columns:1fr;gap:14px}
 .sub-card-details-col{gap:12px}
}

/* V7 Paramount+ account-page finishing details. */
.sub-eyebrow{color:var(--success);font-size:12px;letter-spacing:.08em}
.sub-card .sub-title{font-size:1.2rem;line-height:1.3}
.sub-card-subtitle{color:var(--muted);font-size:13px;margin-top:4px}
.sub-card.active{box-shadow:inset 5px 0 0 var(--success),0 1px 2px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.06)}
.sub-card.active .sub-card-stripe{display:none}
[data-theme=dark] .sub-card.active{box-shadow:inset 5px 0 0 var(--success)}
.sub-card.pending{box-shadow:inset 5px 0 0 var(--gold)}
@media(prefers-reduced-motion:reduce){.sub-card,.sub-card-actions .btn{transition:none!important}}

/* Mobile polish 2026-10-22: 12px minimum text, 44px tap target on brand */
.sub-eyebrow,.server-badge,.wiz-pill-sub,.wiz-opt-sub,.wiz-opt-note,.wiz-hint,.wiz-note{font-size:12px!important}
.pp-brand{min-height:44px;min-width:44px;padding:0 6px;margin-left:-6px}
.sub-card-content{min-width:0}
.sub-card-content *,.sub-card-actions *{overflow-wrap:anywhere}


/* Desktop tidy 2026-10-22: more room on the plan card (phones unchanged) */
@media (min-width:901px){
 .sub-card-content{padding:32px 40px}
 .sub-card-header{gap:24px;margin-bottom:28px}
 .sub-card-badges{gap:10px}
 .sub-card-details{gap:20px 72px;padding:24px 0}
 .sub-card-details-col{gap:20px}
 .sub-card-details .detail-row{gap:28px}
 .sub-card-details small{display:block;margin-top:2px;line-height:1.5}
 .sub-card-divider{margin:8px 0 24px}
 .sub-card-actions{gap:14px}
 .sub-card-connections{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
}