@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Lato:wght@400;700;900&family=Montserrat:wght@400;500;600;700;800;900&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700;6..12,800;6..12,900&family=Open+Sans:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;600;700;800;900&display=swap');

/* =========================================================
   TTB Partners - Customer shell
   Shared sidebar geometry. Loaded after every page's own CSS.
   This prevents individual pages (Wallet, Requests, Upload, etc.)
   from changing the navigation layout.
   ========================================================= */

body.layout-modern-sidebar .layout{
    display:grid!important;
    grid-template-columns:320px minmax(0,1fr)!important;
    min-height:100vh!important;
}

body.layout-modern-sidebar .sidebar{
    position:sticky!important;
    top:0!important;
    width:320px!important;
    height:100vh!important;
    min-height:100vh!important;
    padding:28px 22px!important;
    display:flex!important;
    flex-direction:column!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
}

body.layout-modern-sidebar .sidebar .logo{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
    padding:4px 14px 34px!important;
    margin:0!important;
    box-sizing:border-box!important;
}

body.layout-modern-sidebar .sidebar .nav-title{
    display:none!important;
}

body.layout-modern-sidebar .sidebar .nav{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    gap:8px!important;
    margin:0!important;
    padding:0!important;
}

body.layout-modern-sidebar .sidebar .nav a{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    margin:0!important;
    padding:0 20px!important;
    box-sizing:border-box!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-decoration:none!important;
}

body.layout-modern-sidebar .sidebar .nav-icon{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:22px!important;
    min-width:22px!important;
    max-width:22px!important;
    height:22px!important;
    margin:0!important;
    padding:0!important;
    line-height:1!important;
    flex:0 0 22px!important;
}

body.layout-modern-sidebar .modern-sidebar-bottom,
body.layout-modern-sidebar .sidebar-bottom{
    margin-top:auto!important;
    width:100%!important;
}

body.layout-modern-sidebar .content{
    min-width:0!important;
    width:100%!important;
}

@media(max-width:820px){
    body.layout-modern-sidebar .layout{
        display:block!important;
    }
    body.layout-modern-sidebar .sidebar{
        display:none!important;
    }
}


/* =========================================================
   CUSTOMER FONT OVERRIDES
   No portal-font-* class exists while font_key="default".
   Therefore existing layout typography remains untouched.
   ========================================================= */
body.portal-font-inter,body.portal-font-inter button,body.portal-font-inter input,body.portal-font-inter select,body.portal-font-inter textarea{font-family:Inter,Arial,Helvetica,sans-serif!important}
body.portal-font-poppins,body.portal-font-poppins button,body.portal-font-poppins input,body.portal-font-poppins select,body.portal-font-poppins textarea{font-family:Poppins,Arial,Helvetica,sans-serif!important}
body.portal-font-roboto,body.portal-font-roboto button,body.portal-font-roboto input,body.portal-font-roboto select,body.portal-font-roboto textarea{font-family:Roboto,Arial,Helvetica,sans-serif!important}
body.portal-font-montserrat,body.portal-font-montserrat button,body.portal-font-montserrat input,body.portal-font-montserrat select,body.portal-font-montserrat textarea{font-family:Montserrat,Arial,Helvetica,sans-serif!important}
body.portal-font-open-sans,body.portal-font-open-sans button,body.portal-font-open-sans input,body.portal-font-open-sans select,body.portal-font-open-sans textarea{font-family:'Open Sans',Arial,Helvetica,sans-serif!important}
body.portal-font-lato,body.portal-font-lato button,body.portal-font-lato input,body.portal-font-lato select,body.portal-font-lato textarea{font-family:Lato,Arial,Helvetica,sans-serif!important}
body.portal-font-nunito-sans,body.portal-font-nunito-sans button,body.portal-font-nunito-sans input,body.portal-font-nunito-sans select,body.portal-font-nunito-sans textarea{font-family:'Nunito Sans',Arial,Helvetica,sans-serif!important}

/* =========================================================
   CUSTOMER PORTAL FOOTER
   Shared structure only. Colours are supplied by each theme.
   ========================================================= */
.customer-portal-footer{
    margin-top:28px;
    padding:28px 4px 6px;
    background:var(--footer-bg,transparent);
    color:var(--footer-text,inherit);
    font-size:12px;
    line-height:1.6;
}
.customer-portal-footer-card{
    border-top:1px solid var(--footer-border,currentColor);
    padding-top:24px;
}
.customer-portal-footer-grid{
    display:grid;
    grid-template-columns:minmax(180px,1.35fr) repeat(3,minmax(145px,1fr));
    gap:28px;
    text-align:left;
}
.customer-portal-footer h4{
    margin:0 0 10px;
    color:var(--footer-heading,inherit);
    font-size:12px;
    font-weight:900;
    letter-spacing:.02em;
}
.customer-portal-footer-company{
    color:var(--footer-heading,inherit);
    font-size:14px;
    font-weight:900;
    margin-bottom:8px;
}
.customer-portal-footer-text,
.customer-portal-footer-address{
    color:var(--footer-muted,var(--footer-text,inherit));
    white-space:pre-line;
}
.customer-portal-footer-list{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
}
.customer-portal-footer a{
    color:var(--footer-link,var(--footer-text,inherit));
    font-weight:700;
    text-decoration:none;
    overflow-wrap:anywhere;
}
.customer-portal-footer a:hover{
    color:var(--footer-link-hover,var(--footer-heading,inherit));
    text-decoration:underline;
}
.customer-portal-footer-bottom{
    margin-top:22px;
    padding-top:14px;
    border-top:1px solid var(--footer-border-soft,var(--footer-border,currentColor));
    display:flex;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    color:var(--footer-muted,var(--footer-text,inherit));
}
.customer-portal-footer-legal{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
@media(max-width:900px){
    .customer-portal-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
    .customer-portal-footer-grid{grid-template-columns:1fr;gap:20px}
    .customer-portal-footer-bottom{flex-direction:column}
}

/* =========================================================
   CUSTOMER META PILLS
   Shared structure only. Colours are supplied by each theme.
   ========================================================= */
.file-meta{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.file-meta .pill{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:7px 10px;
    border:1px solid;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    line-height:1;
}

/* =========================================================
   IDENTIFICATION RESULT / DTC CANDIDATE CONTROLS
   Shared geometry only. Theme files provide all colours.
   ========================================================= */
.customer-identification-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:18px 22px 0;
}
.customer-identification-tile{
    min-width:0;
    padding:16px 18px;
    border:1px solid;
    border-radius:12px;
}
.customer-identification-tile .v{
    overflow-wrap:anywhere;
    word-break:break-word;
}
@media(max-width:680px){
    .customer-identification-grid{grid-template-columns:1fr;margin:16px 16px 0}
}


/* ECU candidate cards are interactive selections. */
.candidate[role="button"]{cursor:pointer}

/* =========================================================
   CUSTOMER DTC RESULTS
   Shared structure only. Theme files provide all visual colours.
   ========================================================= */
.dtc-results-card{overflow:hidden}
.dtc-results-form{padding:18px 22px 22px}
.dtc-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px;align-items:center;margin-bottom:12px}
.dtc-search-wrap{min-width:0}
.dtc-search,.dtc-status-filter{width:100%;height:42px;border:1px solid;border-radius:10px;padding:0 12px;font:inherit;outline:none}
.dtc-status-filter{width:auto;min-width:135px}
.dtc-visible-count{font-size:12px;white-space:nowrap;text-align:right}
.dtc-actions-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.dtc-actions-left{display:flex;gap:8px;flex-wrap:wrap}
.dtc-secondary-btn,.dtc-submit-btn{border:1px solid;border-radius:9px;min-height:38px;padding:0 13px;font:inherit;font-size:11px;font-weight:900;cursor:pointer}
.dtc-secondary-btn{text-transform:uppercase;letter-spacing:.02em}
.dtc-selected-summary{font-size:12px;white-space:nowrap}
.dtc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:9px}
.dtc-choice{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:12px;border:1px solid;border-radius:11px;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.dtc-choice:hover{transform:translateY(-1px)}
.dtc-choice[hidden]{display:none!important}
.dtc-choice>input{width:17px;height:17px;margin:2px 0 0;flex:0 0 auto}
.dtc-choice.is-off{cursor:not-allowed;opacity:.72}
.dtc-choice-content{display:flex;flex-direction:column;gap:5px;min-width:0}
.dtc-code-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.dtc-code{font-size:13px;font-weight:900}
.dtc-label{font-size:11px;font-weight:700;overflow-wrap:anywhere}
.dtc-status{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border-radius:999px;font-size:9px;font-weight:900;line-height:1}
.dtc-description{font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.dtc-off-note{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.dtc-submit-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;padding:14px;border:1px solid;border-radius:12px}
.dtc-submit-copy{min-width:0}
.dtc-submit-title{font-size:13px;font-weight:900}
.dtc-submit-text{margin-top:4px;font-size:11px;line-height:1.45}
.dtc-submit-btn{min-width:175px;flex:0 0 auto}
.dtc-submit-btn:disabled{cursor:not-allowed;opacity:.55}
.dtc-state{margin:18px 22px 22px;padding:18px;border:1px solid;border-radius:12px}
.dtc-state-title{font-size:13px;font-weight:900}
.dtc-state-text{margin-top:5px;font-size:11px;line-height:1.5}
@media(max-width:760px){
  .dtc-toolbar{grid-template-columns:1fr}
  .dtc-status-filter{width:100%}
  .dtc-visible-count{text-align:left}
  .dtc-grid{grid-template-columns:1fr}
  .dtc-submit-panel{align-items:stretch;flex-direction:column}
  .dtc-submit-btn{width:100%;min-width:0}
}

/* =========================================================
   CUSTOMER AUTH / PASSWORD RESET
   Shared structure only. Theme files provide all visual colours.
   ========================================================= */
.customer-auth-page{min-height:100vh;margin:0}
.customer-auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;box-sizing:border-box}
.customer-auth-card{width:min(100%,540px);padding:36px;border:1px solid;border-radius:18px;box-sizing:border-box}
.customer-auth-logo-wrap{margin-bottom:28px}
.customer-auth-logo{display:block;max-width:180px;max-height:52px;width:auto;height:auto;object-fit:contain;object-position:left center}
.customer-auth-brand{margin-bottom:28px;font-size:20px;font-weight:900;letter-spacing:-.02em}
.customer-auth-kicker{margin-bottom:10px;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.customer-auth-title{margin:0;font-size:30px;line-height:1.15;letter-spacing:-.03em}
.customer-auth-text{margin:14px 0 0;font-size:14px;line-height:1.6}
.customer-auth-link,.customer-auth-back{font-weight:800;text-decoration:none}
.customer-auth-link:hover,.customer-auth-back:hover{text-decoration:underline}
.customer-auth-divider{height:1px;margin:28px 0 20px}
.customer-auth-back{display:inline-flex;align-items:center;gap:6px;font-size:14px}
@media(max-width:600px){
    .customer-auth-wrap{padding:24px 14px}
    .customer-auth-card{padding:26px 22px;border-radius:16px}
    .customer-auth-title{font-size:26px}
    .customer-auth-logo-wrap{margin-bottom:22px}
}
/* =========================================================
   CUSTOMER MOBILE MENU — CLEAN ISOLATED IMPLEMENTATION
   Desktop navigation remains untouched.
   Shared geometry only; colours inherit Partner theme variables.
   ========================================================= */
.customer-mobile-shell{display:none}

@media(max-width:820px){
    body{
        padding-top:64px!important;
    }

    body.customer-mobile-menu-open{
        overflow:hidden!important;
    }

    /* Hide every legacy/page-local mobile bar and the desktop navigations.
       The customer mobile shell below becomes the single mobile navigation. */
    body .mobile-top{
        display:none!important;
    }
    html body.layout-modern-topbar .customer-modern-topbar,
    html body.layout-modern-topbar .customer-modern-nav,
    html body.layout-modern-topbar .customer-modern-account{
        display:none!important;
    }

    body .sidebar,
    body.layout-modern-sidebar .sidebar,
    body.layout-classic .sidebar{
        display:none!important;
    }

    .customer-mobile-shell{
        display:block!important;
    }

    .customer-mobile-bar,
    .customer-mobile-drawer,
    .customer-mobile-overlay{
        box-sizing:border-box;
    }

    body .customer-mobile-bar{
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:2147483000;
        width:100%;
        height:64px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:0 16px;
        background:var(--brand-card)!important;
        color:inherit!important;
        border-bottom:1px solid var(--border,currentColor)!important;
    }

    .customer-mobile-brand{
        display:flex;
        align-items:center;
        min-width:0;
        max-width:calc(100% - 60px);
        color:inherit;
        text-decoration:none;
    }

    .customer-mobile-brand-logo{
        display:block;
        width:auto;
        height:auto;
        max-width:160px;
        max-height:42px;
        object-fit:contain;
        object-position:left center;
    }

    .customer-mobile-brand-text{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:15px;
        font-weight:900;
    }

    body .customer-mobile-toggle,
    body .customer-mobile-close{
        width:42px;
        min-width:42px;
        height:42px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:0;
        border:1px solid var(--border,currentColor);
        border-radius:10px;
        background:var(--brand-card)!important;
        color:inherit!important;
        border-color:var(--border,currentColor)!important;
        cursor:pointer;
        box-sizing:border-box;
    }

    body .customer-mobile-toggle{
        flex-direction:column;
        gap:4px;
        background:var(--brand-card)!important;
        color:inherit!important;
        border-color:var(--border,currentColor)!important;
    }

    body .customer-mobile-toggle>span{
        display:block;
        width:18px;
        height:2px;
        border-radius:999px;
        background:currentColor;
    }

    body .customer-mobile-close{
        font-size:28px;
        line-height:1;
        font-weight:400;
        background:var(--brand-card)!important;
        color:inherit!important;
        border-color:var(--border,currentColor)!important;
    }

    body .customer-mobile-overlay{
        position:fixed;
        inset:0;
        z-index:2147483001;
        display:block;
        width:100%;
        height:100%;
        padding:0;
        border:0;
        border-radius:0;
        background:var(--mobile-overlay-bg,color-mix(in srgb,var(--brand-background) 55%,transparent))!important;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .18s ease,visibility .18s ease;
    }

    body .customer-mobile-drawer{
        position:fixed;
        z-index:2147483002;
        top:0;
        bottom:0;
        left:0;
        width:min(84vw,310px);
        max-width:310px;
        height:100dvh;
        display:flex;
        flex-direction:column;
        padding:18px 16px;
        margin:0;
        overflow-y:auto;
        overscroll-behavior:contain;
        background:var(--brand-card)!important;
        color:inherit!important;
        border:0;
        border-radius:0;
        transform:translate3d(-102%,0,0);
        visibility:hidden;
        pointer-events:none;
        transition:transform .22s ease,visibility .22s ease;
    }

    body.customer-mobile-menu-open .customer-mobile-overlay{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    body.customer-mobile-menu-open .customer-mobile-drawer{
        transform:translate3d(0,0,0);
        visibility:visible;
        pointer-events:auto;
    }

    .customer-mobile-drawer-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding-bottom:14px;
        border-bottom:1px solid var(--border,currentColor);
    }

    .customer-mobile-drawer-title{
        font-size:15px;
        font-weight:900;
    }

    .customer-mobile-nav{
        display:flex;
        flex-direction:column;
        gap:6px;
        padding:14px 0;
    }

    .customer-mobile-nav a{
        display:flex;
        align-items:center;
        gap:12px;
        width:100%;
        min-height:48px;
        padding:0 14px;
        box-sizing:border-box;
        border-radius:10px;
        color:inherit;
        text-decoration:none;
        font-size:13px;
        font-weight:800;
    }

    .customer-mobile-nav a.active{
        background:var(--brand-primary);
        color:var(--mt-text,var(--brand-card));
    }

    .customer-mobile-nav-icon{
        width:22px;
        min-width:22px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .customer-mobile-nav .customer-support-unread-badge{
        margin-left:auto;
    }

    .customer-support-unread-badge.is-hidden{
        display:none!important;
    }

    .customer-mobile-drawer-bottom{
        margin-top:auto;
        padding-top:14px;
        border-top:1px solid var(--border,currentColor);
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .customer-mobile-balance{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        font-size:13px;
    }

    .customer-mobile-account-copy{
        display:flex;
        flex-direction:column;
        gap:2px;
    }

    .customer-mobile-account-name{
        font-size:13px;
        font-weight:900;
        overflow-wrap:anywhere;
    }

    .customer-mobile-account-role{
        font-size:11px;
        opacity:.72;
    }

    .customer-mobile-logout{
        min-height:42px;
        display:flex;
        align-items:center;
        color:inherit;
        text-decoration:none;
        font-size:13px;
        font-weight:800;
    }

    /* Prevent page-local fixed widths from overflowing mobile viewport. */
    body .content{
        min-width:0!important;
        max-width:100%!important;
        width:100%!important;
    }

    body img,
    body video,
    body canvas,
    body svg{
        max-width:100%;
    }
}

@media(max-width:480px){
    body{
        padding-top:60px!important;
    }

    body .customer-mobile-bar{
        height:60px;
        padding:0 13px;
    }

    body .customer-mobile-drawer{
        width:min(88vw,300px);
    }
}

/* =========================================================
   CUSTOMER ANNOUNCEMENTS
   Shared structure only. Theme files supply visual colours.
   ========================================================= */
body.customer-announcements-page{margin:0}
body.customer-announcements-page *{box-sizing:border-box}
body.customer-announcements-page .layout{min-height:100vh;display:grid;grid-template-columns:240px minmax(0,1fr)}
body.customer-announcements-page .content{min-width:0}
body.customer-announcements-page .sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
body.customer-announcements-page .logo{display:flex;align-items:center;gap:10px;padding:5px 8px 22px}
body.customer-announcements-page .logo-text{min-width:0}
body.customer-announcements-page .logo-title{font-weight:900;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.customer-announcements-page .logo-sub,body.customer-announcements-page .logo-subtitle{font-size:11px;margin-top:2px}
body.customer-announcements-page .nav-title{padding:10px 10px 7px;text-transform:uppercase;font-size:10px;font-weight:900;letter-spacing:.08em}
body.customer-announcements-page .nav{display:flex;flex-direction:column;gap:5px}
body.customer-announcements-page .nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;text-decoration:none;border-radius:10px;font-size:14px;font-weight:700}
body.customer-announcements-page .nav-icon{width:20px;text-align:center;font-size:14px;opacity:.9}
body.customer-announcements-page .sidebar-bottom{margin-top:auto;padding-top:18px}
body.customer-announcements-page .balance-box{border:1px solid;border-radius:13px;padding:14px}
body.customer-announcements-page .balance-box-label{font-size:11px;font-weight:700}
body.customer-announcements-page .balance-box-value{font-size:23px;font-weight:900;margin-top:5px;letter-spacing:-.03em}
body.customer-announcements-page .logout-link{margin-top:10px;display:block;text-decoration:none;font-size:13px;font-weight:800;padding:10px 12px;border-radius:9px}
body.customer-announcements-page .topbar{height:76px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid;position:sticky;top:0;z-index:10}
body.customer-announcements-page .page-label{font-size:12px;margin-bottom:4px}
body.customer-announcements-page .page-title{font-size:18px;font-weight:900}
body.customer-announcements-page .customer{font-size:13px;font-weight:800}
body.customer-announcements-page .main{max-width:1100px;margin:0 auto;padding:32px}
body.customer-announcements-page .heading{margin-bottom:20px}
body.customer-announcements-page .heading h1{margin:0;font-size:29px;letter-spacing:-.04em}
body.customer-announcements-page .heading p{margin:8px 0 0;font-size:14px;line-height:1.55;max-width:760px}
body.customer-announcements-page .main>form{display:flex;justify-content:flex-end;margin:0 0 14px}
body.customer-announcements-page .panel{margin-top:16px;border:1px solid;border-radius:16px;overflow:hidden}
body.customer-announcements-page .panel-head{padding:18px 20px 14px;border-bottom:1px solid}
body.customer-announcements-page .panel-head h2{margin:8px 0 0;font-size:18px}
body.customer-announcements-page .panel-head p{margin:5px 0 0;font-size:12px}
body.customer-announcements-page .announcement-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
body.customer-announcements-page .announcement-message{padding:20px;font-size:14px;line-height:1.65;overflow-wrap:anywhere}
body.customer-announcements-page .panel>form{display:flex;justify-content:flex-end;padding:0 20px 18px}
body.customer-announcements-page .btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;border:1px solid;border-radius:9px;font:inherit;font-size:12px;font-weight:850;cursor:pointer;text-decoration:none}
body.customer-announcements-page .status{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900;line-height:1}
@media(max-width:820px){
    body.customer-announcements-page .layout{display:block}
    body.customer-announcements-page .sidebar,body.customer-announcements-page .topbar{display:none!important}
    body.customer-announcements-page .main{padding:24px 16px 38px}
}

/* =========================================================
   CUSTOMER COMMUNICATIONS / DIRECT MESSAGES
   Shared structure only. Theme files supply all visual colours.
   ========================================================= */
body.customer-messages-page .heading{margin-bottom:18px}
.customer-communications-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.customer-communications-tab{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 13px;border:1px solid;border-radius:10px;text-decoration:none;font-size:12px;font-weight:850;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.customer-communications-tab:hover{transform:translateY(-1px)}
.direct-messages-card{margin-top:0!important;border:1px solid;border-radius:18px;overflow:hidden}
.direct-messages-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid}
.direct-messages-head-copy{min-width:0}
.direct-messages-head h2{margin:0;font-size:18px;letter-spacing:-.02em}
.direct-messages-head p{margin:5px 0 0;font-size:12px;line-height:1.5}
.direct-message-thread{display:flex;flex-direction:column;gap:14px;min-height:260px;max-height:560px;overflow-y:auto;padding:22px}
.direct-message-row{display:flex;width:100%}
.direct-message-row.is-partner{justify-content:flex-start}
.direct-message-row.is-customer{justify-content:flex-end}
.direct-message-bubble{width:min(78%,720px);padding:13px 15px;border:1px solid;border-radius:16px;overflow-wrap:anywhere}
.direct-message-row.is-partner .direct-message-bubble{border-bottom-left-radius:5px}
.direct-message-row.is-customer .direct-message-bubble{border-bottom-right-radius:5px}
.direct-message-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:10px;font-weight:800}
.direct-message-sender{font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.direct-message-date{white-space:nowrap;font-weight:700}
.direct-message-text{font-size:14px;line-height:1.6}
.direct-message-empty{display:flex;min-height:220px;align-items:center;justify-content:center;padding:28px;text-align:center}
.direct-message-empty-copy{max-width:520px}
.direct-message-empty-copy strong{display:block;margin-bottom:7px;font-size:15px}
.direct-message-empty-copy span{font-size:12px;line-height:1.55}
.direct-message-composer{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:end!important;padding:18px 22px 22px!important;margin:0!important;border-top:1px solid}
.direct-message-composer .field{display:flex;flex-direction:column;gap:7px;min-width:0}
.direct-message-composer label{font-size:11px;font-weight:850}
.direct-message-composer textarea{display:block;width:100%;min-height:88px;max-height:220px;resize:vertical;border:1px solid;border-radius:12px;padding:12px 13px;font:inherit;font-size:13px;line-height:1.5;outline:none}
.direct-message-composer .btn{min-width:110px;height:44px;margin:0}
.direct-message-feedback{margin:0 0 16px!important}
@media(max-width:700px){
    .direct-message-thread{padding:16px;min-height:220px;max-height:none}
    .direct-message-bubble{width:min(90%,680px)}
    .direct-message-composer{grid-template-columns:1fr!important;padding:16px!important}
    .direct-message-composer .btn{width:100%}
    .direct-messages-head{padding:17px 16px}
}
@media(max-width:480px){
    .direct-message-bubble{width:94%}
    .direct-message-meta{align-items:flex-start;flex-direction:column;gap:3px}
}

/* =========================================================
   CUSTOMER DASHBOARD HERO IMAGE
   Shared geometry only. Theme files supply all visual styling.
   ========================================================= */
.customer-dashboard-hero-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.hero.has-dashboard-hero-image,
.modern-upgrade.has-dashboard-hero-image{
    position:relative;
    overflow:hidden;
}
.hero.has-dashboard-hero-image > :not(.customer-dashboard-hero-image){
    position:relative;
    z-index:2;
}
@media(min-width:821px){
    .hero.has-dashboard-hero-image{
        min-height:260px;
        padding-right:min(48%,560px);
    }
    .hero.has-dashboard-hero-image .customer-dashboard-hero-image{
        position:absolute;
        z-index:1;
        top:0;
        right:0;
        bottom:0;
        width:44%;
        height:100%;
    }
}
@media(max-width:820px){
    .hero.has-dashboard-hero-image{
        display:flex;
        flex-direction:column;
    }
    .hero.has-dashboard-hero-image .customer-dashboard-hero-image{
        order:-1;
        width:100%;
        height:190px;
        margin:0 0 20px;
    }
}
body.layout-modern-sidebar .modern-upgrade.has-dashboard-hero-image{
    min-height:320px;
}
body.layout-modern-sidebar .modern-upgrade.has-dashboard-hero-image .customer-dashboard-hero-image{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
}
body.layout-modern-sidebar .modern-upgrade.has-dashboard-hero-image .modern-upgrade-copy{
    display:none;
}