/*
 * WARE customer area — shared visual system.
 *
 * This file is deliberately loaded after the individual page styles. It keeps
 * the customer portal consistent while each feature can retain its own layout.
 */

:where(.dmware-service-page, .dmwi-portal, .dmwq-portal) {
    --dmware-portal-bg: #141721;
    --dmware-portal-surface: #1b2434;
    --dmware-portal-surface-soft: #202a3b;
    --dmware-portal-border: #354557;
    --dmware-portal-text: #f7f8fa;
    --dmware-portal-muted: #aebdce;
    --dmware-portal-gradient: linear-gradient(90deg, #437ca4 0%, #4e32a8 37%, #d80b57 70%, #ffb24c 100%);
    --dmware-portal-radius-large: 20px;
    --dmware-portal-radius-medium: 15px;
    --dmware-portal-radius-small: 12px;
}

/* One page heading treatment everywhere: dark panel and a shared soft radius. */
.dmware-service-page .dmware-service-hero,
.dmwi-portal .dmwi-hero,
.dmwq.dmwq-portal {
    border: 1px solid var(--dmware-portal-border) !important;
    border-radius: var(--dmware-portal-radius-large) !important;
    background: var(--dmware-portal-bg) !important;
    box-shadow: none !important;
    overflow: hidden;
    position: relative;
}

.dmware-service-page .dmware-service-hero::before,
.dmwi-portal .dmwi-hero::before,
.dmwq.dmwq-portal::before {
    border: 0 !important;
    border-radius: var(--dmware-portal-radius-large) var(--dmware-portal-radius-large) 0 0 !important;
    background: var(--dmware-portal-gradient) !important;
    content: "";
    display: block;
    height: 4px;
    inset: 0 0 auto 0;
    position: absolute;
    width: auto;
}

/* Remove the old decorative circle: the gradient line is now the common cue. */
.dmware-service-page .dmware-service-hero::after {
    display: none !important;
}

/* Structural surfaces use the same rounded geometry throughout the portal. */
.dmware-portal-login,
.dmware-dashboard-summary a,
.dmware-dashboard-section,
.dmware-dashboard-studio,
.dmware-services-stat,
.dmware-services-notice,
.dmware-service-index-card,
.dmware-services-support article,
.dmware-services-empty,
.dmware-service-card,
.dmware-service-sidebar-card,
.dmware-service-page .wcs-modal .content-wrapper,
.dmware-service-page .prodotto-consigliato,
.dmware-support-form-card,
.dmware-support-sidebar-card,
.dmware-resource-collection,
.dmware-resources-latest,
.dmware-resources-help,
.dmwi-portal .dmwi-empty,
.dmwi-portal .dmwi-table-wrap,
.dmwq.dmwq-portal .dmwq-card,
.dmwq.dmwq-portal .dmwq-table-wrap {
    border-radius: var(--dmware-portal-radius-large) !important;
}

.dmware-dashboard-action,
.dmware-dashboard-resource-grid > a,
.dmware-service-metrics,
.dmware-service-link,
.dmware-support-security-note,
.dmware-support-link,
.dmware-resources-latest-grid > a,
.dmwq.dmwq-portal .dmwq-notice {
    border-radius: var(--dmware-portal-radius-medium) !important;
}

/* The same surface depth and separators across dashboard, services and documents. */
.dmware-dashboard-summary a,
.dmware-dashboard-section,
.dmware-dashboard-studio,
.dmware-services-stat,
.dmware-service-index-card,
.dmware-services-support article,
.dmware-services-empty,
.dmware-service-card,
.dmware-service-sidebar-card,
.dmware-support-form-card,
.dmware-support-sidebar-card,
.dmware-resource-collection,
.dmware-resources-latest,
.dmware-resources-help,
.dmwi-portal .dmwi-empty,
.dmwi-portal .dmwi-table-wrap,
.dmwq.dmwq-portal .dmwq-card,
.dmwq.dmwq-portal .dmwq-table-wrap {
    border-color: var(--dmware-portal-border) !important;
    background-color: var(--dmware-portal-surface) !important;
    box-shadow: none !important;
}

.dmware-dashboard-action,
.dmware-dashboard-resource-grid > a,
.dmware-service-metrics > div,
.dmware-service-link,
.dmware-resources-latest-grid > a {
    background-color: var(--dmware-portal-surface-soft) !important;
}

/* Tables keep continuous separators inside their rounded outer container. */
.dmware-service-page table.shop_table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin-top: 0 !important;
}

.dmware-service-page table.shop_table th,
.dmware-service-page table.shop_table td {
    border-bottom: 1px solid var(--dmware-portal-border) !important;
    border-radius: 0 !important;
}

.dmware-service-page table.shop_table tr:last-child th,
.dmware-service-page table.shop_table tr:last-child td {
    border-bottom: 0 !important;
}

/* Native WooCommerce account screens follow the same square geometry. */
body.woocommerce-account .woocommerce-MyAccount-content table,
body.woocommerce-account .woocommerce-MyAccount-content .shop_table,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address,
body.woocommerce-account .woocommerce-MyAccount-content form,
body.woocommerce-account .woocommerce-MyAccount-content fieldset,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
    border-radius: 0 !important;
}

/* Invoice and quote lists share the same header and row rhythm. */
.dmwi-portal .dmwi-table th,
.dmwi-portal .dmwi-table td,
.dmwq.dmwq-portal .dmwq-table th,
.dmwq.dmwq-portal .dmwq-table td {
    padding: 17px 20px;
}

.dmwi-portal .dmwi-table th,
.dmwq.dmwq-portal .dmwq-table th {
    background: var(--dmware-portal-surface-soft) !important;
    color: var(--dmware-portal-muted) !important;
}

@media (max-width: 760px) {
    /*
     * Kadence adds its own mobile padding around the page content. Remove that
     * extra layer and let every portal screen own one 12px gutter, matching
     * the Orders page.
     */
    body.dmware-customer-area :is(
        .content-area,
        .content-container,
        .content-wrap,
        .entry-content-wrap,
        .entry-content
    ) {
        margin-right: 0 !important;
        margin-left: 0 !important;
        max-width: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }

    body.dmware-customer-area :is(
        .dmware-service-page,
        .dmwi.dmwi-portal,
        .dmwq.dmwq-portal
    ) {
        margin-right: auto !important;
        margin-left: auto !important;
        max-width: none !important;
        width: calc(100% - 24px) !important;
    }

    body.dmware-customer-area.woocommerce-account .woocommerce {
        margin-right: auto !important;
        margin-left: auto !important;
        width: calc(100% - 24px) !important;
    }

    .dmware-service-page .dmware-service-hero,
    .dmwi-portal .dmwi-hero,
    .dmwq.dmwq-portal {
        border-radius: 18px !important;
    }

    .dmware-dashboard-section,
    .dmware-dashboard-studio,
    .dmware-service-index-card,
    .dmware-services-support article,
    .dmware-services-empty,
    .dmware-service-card,
    .dmware-service-sidebar-card,
    .dmwi-portal .dmwi-table-wrap,
    .dmwq.dmwq-portal .dmwq-card,
    .dmwq.dmwq-portal .dmwq-table-wrap {
        border-radius: 16px !important;
    }

    .dmwq.dmwq-portal .dmwq-table tbody tr {
        border-radius: 14px !important;
    }

    .dmwq.dmwq-portal .dmwq-table tbody {
        gap: 10px;
    }
}

/* Orders page — bring the legacy page block into the shared portal system. */
body.page-id-13426 #dmw-orders {
    background: var(--dmware-portal-bg, #141721) !important;
    color: var(--dmware-portal-text, #f7f8fa) !important;
    padding: 24px 0 64px !important;
}

body.page-id-13426 #dmw-orders .orders-shell {
    margin-inline: auto !important;
    width: min(1180px, calc(100% - 40px)) !important;
}

body.page-id-13426 #dmw-orders .orders-hero {
    background: #141721 !important;
    border: 1px solid #354557 !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    margin: 0 0 18px !important;
    overflow: hidden;
    padding: 28px !important;
    position: relative;
}

body.page-id-13426 #dmw-orders .orders-hero::before {
    background: linear-gradient(90deg, #437ca4 0%, #4e32a8 37%, #d80b57 70%, #ffb24c 100%);
    border-radius: 20px 20px 0 0;
    content: "";
    height: 4px;
    inset: 0 0 auto;
    position: absolute;
}

body.page-id-13426 #dmw-orders .orders-kicker {
    color: #dfe5f2 !important;
    margin: 0 0 10px !important;
}

body.page-id-13426 #dmw-orders h1 {
    color: #f7f8fa !important;
    font-size: clamp(30px, 4vw, 43px) !important;
    font-weight: 750 !important;
    line-height: 1.05 !important;
}

body.page-id-13426 #dmw-orders .orders-intro {
    color: #aebdce !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 14px 0 0 !important;
    max-width: 780px;
}

body.page-id-13426 #dmw-orders .orders-tools {
    gap: 10px !important;
    margin-top: 20px !important;
}

body.page-id-13426 #dmw-orders :is(a.orders-button, a.dm-btn) {
    background: #202a3b !important;
    border: 1px solid #526681 !important;
    border-radius: 999px !important;
    color: #f7f8fa !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
}

body.page-id-13426 #dmw-orders :is(a.orders-button, a.dm-btn):hover {
    background: #29364a !important;
    border-color: #6d83a0 !important;
}

body.page-id-13426 #dmw-orders .orders-panel {
    background: #1b2434 !important;
    border: 1px solid #354557 !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    margin-top: 18px !important;
    overflow: hidden;
    padding: 0 !important;
}

body.page-id-13426 #dmw-orders .orders-panel-head {
    border-bottom: 1px solid #354557 !important;
    padding: 22px 24px !important;
}

body.page-id-13426 #dmw-orders h2 {
    color: #f7f8fa !important;
    font-size: 24px !important;
}

body.page-id-13426 #dmw-orders .orders-panel-head p,
body.page-id-13426 #dmw-orders .orders-help p,
body.page-id-13426 #dmw-orders .orders-note p {
    color: #aebdce !important;
}

body.page-id-13426 #dmw-orders .orders-private,
body.page-id-13426 #dmw-orders .dm-status-badge {
    border-color: #42546d !important;
    border-radius: 999px !important;
}

body.page-id-13426 #dmw-orders .dm-orders-wrapper {
    background: #1b2434 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 15px !important;
}

body.page-id-13426 #dmw-orders .dm-orders-header {
    background: #202a3b !important;
    border-bottom-color: #354557 !important;
    color: #aebdce !important;
}

body.page-id-13426 #dmw-orders .dm-orders-row {
    background: #1b2434 !important;
    border-bottom-color: #354557 !important;
    color: #f7f8fa !important;
}

body.page-id-13426 #dmw-orders .dm-orders-row:hover {
    background: #222c3f !important;
}

body.page-id-13426 #dmw-orders .dm-date,
body.page-id-13426 #dmw-orders .dm-total :is(small, .includes_tax) {
    color: #aebdce !important;
}

body.page-id-13426 #dmw-orders .dm-order a {
    color: #f7b0d0 !important;
}

body.page-id-13426 #dmw-orders .dm-pagination {
    border-top-color: #354557 !important;
}

body.page-id-13426 #dmw-orders .page-numbers {
    background: #202a3b !important;
    border-color: #42546d !important;
    border-radius: 999px !important;
    color: #f7f8fa !important;
}

body.page-id-13426 #dmw-orders .page-numbers.current {
    background: #d84789 !important;
    border-color: #d84789 !important;
}

body.page-id-13426 #dmw-orders .dm-no-orders,
body.page-id-13426 #dmw-orders .orders-note,
body.page-id-13426 #dmw-orders .orders-help {
    background: #1b2434 !important;
    border: 1px solid #354557 !important;
    border-radius: 20px !important;
    box-shadow: none !important;
}

body.page-id-13426 #dmw-orders .orders-note {
    margin-top: 18px !important;
    padding: 24px 28px !important;
}

body.page-id-13426 #dmw-orders .orders-help {
    margin-top: 18px !important;
    padding: 22px 24px !important;
}

body.page-id-13426 #dmw-orders .orders-help strong,
body.page-id-13426 #dmw-orders .orders-note summary {
    color: #f7f8fa !important;
}

@media (max-width: 850px) {
    body.page-id-13426 #dmw-orders .orders-panel {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible;
    }

    body.page-id-13426 #dmw-orders .orders-panel-head {
        border: 0 !important;
        padding: 6px 0 18px !important;
    }

    body.page-id-13426 #dmw-orders .dm-orders-row,
    body.page-id-13426 #dmw-orders .dm-orders-row:last-child {
        background: #1b2434 !important;
        border: 1px solid #354557 !important;
        border-radius: 14px !important;
    }

    body.page-id-13426 #dmw-orders .dm-col {
        border-bottom-color: #354557 !important;
    }

    body.page-id-13426 #dmw-orders .dm-col::before {
        color: #aebdce !important;
    }
}

@media (max-width: 700px) {
    body.page-id-13426 #dmw-orders {
        padding: 18px 0 44px !important;
    }

    body.page-id-13426 #dmw-orders .orders-shell {
        width: calc(100% - 24px) !important;
    }

    body.page-id-13426 #dmw-orders .orders-hero {
        border-radius: 18px !important;
        padding: 24px 20px !important;
    }

    body.page-id-13426 #dmw-orders .orders-tools {
        grid-template-columns: 1fr !important;
    }

    body.page-id-13426 #dmw-orders .orders-tools a.orders-button {
        font-size: 13px !important;
        white-space: normal !important;
        width: 100%;
    }

    body.page-id-13426 #dmw-orders .orders-note,
    body.page-id-13426 #dmw-orders .orders-help {
        border-radius: 16px !important;
        padding: 22px 20px !important;
    }
}

/*
 * Assistance page: keep Kadence's mobile off-canvas above the portal content.
 * The support page and Fluent Forms create their own painted layers; on some
 * mobile browsers they could otherwise cover the central part of the drawer.
 */
@media (max-width: 1024px) {
    body.page-id-3637 #wrapper > header.wp-block-kadence-header {
        isolation: isolate;
        position: relative !important;
        z-index: 100000 !important;
    }

    body.page-id-3637 #wrapper header.wp-block-kadence-header .wp-block-kadence-off-canvas {
        height: 100dvh !important;
        inset: 0 !important;
        max-height: none !important;
        position: fixed !important;
        z-index: 100001 !important;
    }

    body.page-id-3637 #wrapper header.wp-block-kadence-header .kb-off-canvas-inner-wrap {
        height: 100dvh !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: fixed !important;
        z-index: 100002 !important;
    }

    body.page-id-3637 #wrapper header.wp-block-kadence-header .kb-off-canvas-inner {
        min-height: 100% !important;
    }
}