/* ==========================================================================
   Member Profile Page Refresh — "Modern Card" direction
   Scope: body.account-banner-bg-color-mps-1 (Member-Profile.aspx) only.
   Source: design_handoff_member_profile_refresh/reference-design-modern-card.dc.html
   Selectors verified against real page source in docs/Rise.html (2026-07-09).
   Style-only: no display/grid overrides on shared classes that carry real
   iMIS data (.panel-body-container is reused by every panel — do not touch
   its display/layout, only padding).
   ========================================================================== */

/* Real DOM order confirmed from Rise.html:
   .account-banner-short
     > .banner-top-bar   (ciRenewalButton left, ciContactProperties right)
     > .banner-content   (ciMiniProfile hero)
   The design wants the stat/join row visually overlapping the BOTTOM of the
   hero, but it renders BEFORE the hero in markup. Reversing visual order
   with flex on the shared parent, then pulling it up to overlap — no DOM
   changes needed. */
body.account-banner-bg-color-mps-1 .account-banner-short {
    display: flex;
    flex-direction: column-reverse;
}

body.account-banner-bg-color-mps-1 .banner-top-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: -22px;
    padding: 0 32px;
    position: relative;
    z-index: 1;
    background: transparent;
    border-bottom: none;
}

body.account-banner-bg-color-mps-1 .banner-top-bar .area-top-bar-left,
body.account-banner-bg-color-mps-1 .banner-top-bar .area-top-bar-right {
    padding: 0;
}

/* ---------- Hero band ---------- */
body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large {
    background: linear-gradient(120deg, #00A2E5 0%, #646569 55%, #FF8300 115%);
    border-radius: 14px;
    padding: 36px 32px;
    min-height: 160px;
    display: flex;
    align-items: center;
    color: #fff;
    box-sizing: border-box;
}

body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-picture-section,
body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-name-section,
body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-address-section,
body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-status-section,
body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .panel-heading {
    background: transparent;
}

body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-picture-section .profile-picture-container {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    border: 3px solid rgba(255, 255, 255, .6);
    box-shadow: none;
    padding: 0;
    overflow: hidden;
}

body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-picture-section .profile-picture-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-name-section-inner,
body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-name-section .SectionLabel {
    color: #fff;
    font-size: 27px;
    font-weight: 800;
}

body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-address-section,
body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-status-section {
    color: rgba(255, 255, 255, .85);
    font-size: 14.5px;
}

body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large a {
    color: #fff;
    text-decoration: underline;
}

/* ---------- JOIN NOW button (ciRenewalButton, sits in banner-top-bar) ---------- */
body.account-banner-bg-color-mps-1 #ste_container_ciRenewalButton .TextButton {
    background: #fff;
    color: #FF8300;
    font-weight: 800;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    padding: 14px 28px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

body.account-banner-bg-color-mps-1 #ste_container_ciRenewalButton .TextButton:hover {
    background: #F4F6F7;
    color: #FF8300;
}

/* ---------- Stat row (ciContactProperties: ID / Status / Type / Member since / Paid through) ---------- */
body.account-banner-bg-color-mps-1 #ste_container_ciContactProperties .summary-display {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

body.account-banner-bg-color-mps-1 #ste_container_ciContactProperties .summary-display-item {
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    padding: 14px 20px;
    min-width: 130px;
}

body.account-banner-bg-color-mps-1 #ste_container_ciContactProperties .Label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #646569;
}

body.account-banner-bg-color-mps-1 #ste_container_ciContactProperties .PanelFieldValue {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #646569;
    margin-top: 3px;
}

/* ---------- Alerts ---------- */
body.account-banner-bg-color-mps-1 .AlertSet {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0 32px;
}

body.account-banner-bg-color-mps-1 .AlertSet .AlertItem {
    box-sizing: border-box;
    flex: 1;
    min-width: 280px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 0;
}

/* ---------- Tabbed detail panel (ciAccountpagetabs) ----------
   Layout is intentionally left native (Telerik RadTabStrip/RadMultiPage —
   JS-driven show/hide; reflowing it previously broke real iMIS data).
   `tab-content-bg` is different: it's the iPart's own configurable
   "CSS class" field (see Manage Content > Configure > CSS class), an
   intended styling hook, not an internal Telerik/JS class — safe to style.
   Below: color/background only on the tab links, using official AGD hex.
   No display/float/width changes. */
body.account-banner-bg-color-mps-1 .tab-content-bg {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

body.account-banner-bg-color-mps-1 #ste_container_ciAccountpagetabs .rtsLink {
    color: #646569;
}

body.account-banner-bg-color-mps-1 #ste_container_ciAccountpagetabs .rtsLink:hover {
    color: #00A2E5;
}

/* ---------- Panel polish (opt-in) ----------
   Targets .agd-panel-card only — a class YOU add per-panel via iMIS's own
   "CSS class" field in Manage Content > Configure > Panel Editor (same
   intended-hook pattern as tab-content-bg). Nothing here is applied unless
   that class is present, so it can't affect panels you haven't opted in,
   and it never touches display/grid on the shared .panel-body-container. */
body.account-banner-bg-color-mps-1 .agd-panel-card .panel-heading {
    background: transparent;
    border: none;
    padding: 22px 30px 0;
}

body.account-banner-bg-color-mps-1 .agd-panel-card .panel-heading,
body.account-banner-bg-color-mps-1 .agd-panel-card .panel-title {
    font-size: 19px;
    font-weight: 800;
    color: #646569;
}

body.account-banner-bg-color-mps-1 .agd-panel-card .panel-body-container {
    padding: 16px 30px 30px;
}

body.account-banner-bg-color-mps-1 .agd-panel-card .PanelField {
    box-sizing: border-box;
    width: 100%;
    background: #FAFBFB;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
}

body.account-banner-bg-color-mps-1 .agd-panel-card .Label {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    color: #646569;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Edit-mode form controls (select/input/textarea) have no width of their
   own — they render at native content width unless told to fill their
   tile. Long option text (e.g. dental school/residency names) is what was
   pushing past the tile edge and out of the page. */
body.account-banner-bg-color-mps-1 .agd-panel-card .PanelFieldValue select,
body.account-banner-bg-color-mps-1 .agd-panel-card .PanelFieldValue input[type="text"],
body.account-banner-bg-color-mps-1 .agd-panel-card .PanelFieldValue textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

body.account-banner-bg-color-mps-1 .agd-panel-card .PanelFieldValue {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #33343a;
    margin-top: 4px;
}

body.account-banner-bg-color-mps-1 #ste_container_ciAccountpagetabs .rtsLink.rtsSelected {
    background: #00A2E5;
    color: #fff;
}

/* ---------- Mobile (≤768px) ---------- */
@media (max-width: 768px) {
    body.account-banner-bg-color-mps-1 .banner-top-bar {
        margin-top: -26px;
        padding: 0 16px;
    }

    body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large {
        padding: 20px 16px 40px;
    }

    body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-picture-section .profile-picture-container {
        width: 56px;
        height: 56px;
    }

    body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-name-section-inner,
    body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-name-section .SectionLabel {
        font-size: 16px;
    }

    body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-address-section,
    body.account-banner-bg-color-mps-1 #ste_container_ciMiniProfile .mini-profile-banner-large .mini-profile-status-section {
        font-size: 12px;
    }

    body.account-banner-bg-color-mps-1 #ste_container_ciContactProperties .summary-display {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    body.account-banner-bg-color-mps-1 #ste_container_ciContactProperties .summary-display-item {
        min-width: 80px;
        flex-shrink: 0;
    }

    body.account-banner-bg-color-mps-1 .AlertSet {
        padding: 0 16px;
        flex-direction: column;
    }

    body.account-banner-bg-color-mps-1 .AlertSet .AlertItem {
        padding: 9px 12px;
        font-size: 12.5px;
    }
}