/* Customer visual layer v5: compact imagery, richer empty states and restrained motion. */
.client-shell .cp-page .cp-hero {
    min-height:148px;
    background-image:url('/images/cloud-infrastructure-v3.png');
    background-position:right 48%;
    background-size:min(58%,700px) auto;
}
.client-shell .cp-page .cp-hero::after { background:rgba(16,47,61,.22); }

.client-shell .catalog-config .order-header,
.client-shell .catalog-config .order-header-inner { min-height:184px!important; }
.client-shell .catalog-config .order-header-inner { padding:22px clamp(20px,2.5vw,34px)!important; }
.client-shell .catalog-config .order-header .cw-cloud-art { opacity:.5!important; object-position:right 48%!important; }
.client-shell.cloud-console .catalog-config .order-header :is(.order-breadcrumb,.order-breadcrumb a,.order-product-heading h1,.order-header-copy,.order-header-price-label,.order-header-price strong,.order-header-price small,.order-back-link) { color:#f7fcfd!important; }
.client-shell.cloud-console .catalog-config .order-header .order-service-type { color:#74e4c8!important; }
.client-shell.cloud-console .catalog-config .order-header .order-breadcrumb i { color:#9ec4ce!important; }
.client-shell.cloud-console .catalog-config .order-header .order-product-mark { background:#fff!important; color:#2563eb!important; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.client-shell .catalog-config .cloud-order-strip { margin-top:-13px!important; }
.client-shell .catalog-plans .plans-hero { min-height:232px!important; }
.client-shell .order-catalog .oc-heading { min-height:148px; }
.client-shell .cloud-instance .ci-heading { min-height:188px!important; }
.client-shell .dashboard-v2 .db-welcome { min-height:210px!important; }

.client-shell .cp-empty {
    position:relative; min-height:180px; display:flex; flex-direction:column; justify-content:center;
    padding-right:min(34%,300px)!important; overflow:hidden; isolation:isolate;
}
.client-shell .cp-empty::after {
    position:absolute; z-index:-1; right:-20px; bottom:-22px; width:min(34%,300px); height:170px;
    content:""; background:url('/images/cloud-infrastructure-v3.png') 72% 56%/cover no-repeat; opacity:.42; pointer-events:none;
}
.client-shell .cp-card-head>i,.client-shell .cp-card-title>i {
    color:#2563eb; transition:transform .2s ease,color .2s ease;
}
.client-shell .cp-card:hover .cp-card-head>i,.client-shell .cp-card:hover .cp-card-title>i { color:#087c6d; transform:translateY(-2px) scale(1.05); }
.client-shell .wallet-workspace .ww-balance { background-image:url('/images/cloud-infrastructure-v3.png'); background-position:82% 54%; background-size:cover; }
.client-shell .wallet-workspace .ww-balance::before { position:absolute; inset:0; content:""; background:rgba(7,134,117,.82); pointer-events:none; }
.client-shell .wallet-workspace .ww-balance>* { position:relative; z-index:1; }
.client-shell .support-workspace .cp-stat>i { transition:transform .2s ease; }
.client-shell .support-workspace .cp-stat:hover>i { transform:translateY(-3px) rotate(-3deg); }

@media(prefers-reduced-motion:no-preference) {
    .client-shell[data-motion=on] .cp-page .cp-hero { animation:visual-rise .48s ease both; }
    .client-shell[data-motion=on] .cp-empty::after { animation:visual-float 7s ease-in-out infinite alternate; }
    .client-shell[data-motion=on] :is(.cp-stat,.cp-card,.ww-method,.ci-metric) { transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
    .client-shell[data-motion=on] :is(.cp-stat,.cp-card,.ww-method,.ci-metric):hover { transform:translateY(-3px); }
    @keyframes visual-rise { from { opacity:.65; transform:translateY(8px); } to { opacity:1; transform:none; } }
    @keyframes visual-float { from { transform:translateY(5px); } to { transform:translateY(-5px); } }
}
@media(max-width:767px) {
    .client-shell .catalog-config .order-header,.client-shell .catalog-config .order-header-inner { min-height:0!important; }
    .client-shell .catalog-config .order-header-inner { padding:19px 17px!important; }
    .client-shell.cloud-console .catalog-config .order-header-price {
        display:flex!important; flex-flow:row wrap!important; align-items:baseline; gap:3px 10px;
        padding-top:12px!important;
    }
    .client-shell.cloud-console .catalog-config .order-header-price-label { flex-basis:100%; }
    .client-shell.cloud-console .catalog-config .order-header-price strong { font-size:24px!important; }
    .client-shell.cloud-console .catalog-config .order-back-link { margin:0 0 0 auto!important; }
    .client-shell .catalog-plans .plans-hero { min-height:190px!important; }
    .client-shell .dashboard-v2 .db-welcome { min-height:190px!important; }
    .client-shell .cp-empty { padding-right:18px!important; }
    .client-shell .cp-empty::after { width:170px; opacity:.14; }
    .client-shell .experience-page.catalog-config .config-section-nav {
        display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;
        overflow:visible!important;
    }
    .client-shell .experience-page.catalog-config .config-section-nav a {
        min-width:0; justify-content:center; padding:8px 5px; text-align:center; white-space:normal;
    }
}
@media(prefers-reduced-motion:reduce) {
    .client-shell .cp-page .cp-hero,.client-shell .cp-empty::after,.client-shell :is(.cp-stat,.cp-card,.ww-method,.ci-metric) { animation:none!important; transition:none!important; }
}