/* JESS customer studio: a shared sidebar and topbar for genuinely separate PHP pages. */
.customer-pages {
    min-height: 100vh;
    color: #623b50;
    background: radial-gradient(circle at 2% 3%,#fce5ef 0,transparent 32%),radial-gradient(circle at 98% 70%,#ffe9f3 0,transparent 40%),#fff9fc;
    --deep: #aa4777;
    --muted: #98778a
}

.customer-pages .customer-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    min-height: 76px;
    padding: 12px clamp(16px,3vw,38px);
    background-color: #fff9fc;
    background-image: radial-gradient(circle at 10% 10%, rgba(247,202,201,.50) 5%, transparent 5%),radial-gradient(circle at 90% 10%, rgba(247,202,201,.50) 5%, transparent 5%),radial-gradient(circle at 90% 90%, rgba(247,202,201,.50) 5%, transparent 5%),radial-gradient(circle at 10% 90%, rgba(247,202,201,.50) 5%, transparent 5%),linear-gradient(180deg, rgba(255,252,254,.97), rgba(255,248,251,.94));
    background-size: 20px 20px,20px 20px,20px 20px,20px 20px,auto;
    border-bottom: 1px solid #efd9e4;
    box-shadow: 0 4px 20px #c27b9712
}

.customer-topbar-left,.customer-topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0
}

.customer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #984069;
    text-decoration: none;
    min-width: 0;
    line-height: 1.2
}

.customer-brand-flower {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: #fce4ef;
    color: #af5281;
    border-radius: 14px;
    font-size: 25px;
    flex-shrink: 0
}

.customer-brand strong {
    font-size: 14px;
    letter-spacing: .35px;
    white-space: nowrap
}

.customer-brand small {
    font-size: 11px;
    color: #ae7891;
    margin-top: 4px;
    display: block;
    letter-spacing: .4px
}

.customer-topbar-welcome {
    font-size: 12px;
    color: #98758b
}

.customer-topbar-welcome strong {
    color: #7a3c5e
}

.customer-top-link {
    font-size: 12px;
    font-weight: 700;
    color: #a34e7a;
    text-decoration: none;
    background: #fbe5ef;
    padding: 9px 12px;
    border-radius: 99px
}

.customer-avatar {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f8ddeb;
    color: #993e6b;
    text-decoration: none;
    font-size: 20px
}

.customer-menu-toggle {
    display: none;
    border: 1px solid #e8c0d3;
    background: #fff6fa;
    padding: 8px 12px;
    font-size: 21px
}

.customer-shell {
    display: grid;
    grid-template-columns: 246px minmax(0,1fr);
    max-width: 1680px;
    margin: 0 auto;
    min-height: calc(100vh - 77px)
}

.customer-sidebar {
    position: sticky;
    top: 76px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 11px;
    height: calc(100vh - 76px);
    padding: 31px 17px 22px 20px;
    border-right: 1px solid #f0dce6;
    background-color: #fff8fb;
    background-image: radial-gradient(circle at 10% 10%, rgba(247,202,201,.58) 5%, transparent 5%),radial-gradient(circle at 90% 10%, rgba(247,202,201,.58) 5%, transparent 5%),radial-gradient(circle at 90% 90%, rgba(247,202,201,.58) 5%, transparent 5%),radial-gradient(circle at 10% 90%, rgba(247,202,201,.58) 5%, transparent 5%),linear-gradient(180deg, rgba(255,250,252,.98), rgba(255,244,249,.96));
    background-size: 20px 20px,20px 20px,20px 20px,20px 20px,auto
}

.customer-sidebar-title {
    padding: 0 16px;
    color: #b76f94;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px
}

.customer-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.customer-sidebar-nav a,.customer-sidebar-admin {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #805469;
    font-size: 13px;
    font-weight: 700;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: background .15s,border-color .15s,color .15s
}

.customer-sidebar-nav a:hover,.customer-sidebar-nav a.active {
    color: #963d69;
    background: linear-gradient(95deg,#fde0ec,#fef2f7);
    border-color: #f5d4e4
}

.customer-nav-icon {
    font-size: 21px;
    color: #ba668f;
    line-height: 1;
    min-width: 21px;
    text-align: center
}

.customer-sidebar-nav a:focus-visible,.customer-menu-toggle:focus-visible,.customer-topbar a:focus-visible {
    outline: 3px solid #d17fa9;
    outline-offset: 3px
}

.customer-sidebar-admin {
    margin-top: 4px;
    background: #fff8fc;
    border-color: #edd4df;
    justify-content: center
}

.customer-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding: 16px;
    color: #bc8ba4;
    font-size: 11px;
    background: #fff5faa8;
    border: 1px dashed #eccadb;
    border-radius: 17px
}

.customer-sidebar-footer strong {
    font-size: 12px;
    color: #91546f
}

.customer-sidebar-stamp {
    font-size: 27px;
    color: #c97a9e
}

.customer-pages .customer-main {
    margin: 0;
    max-width: none;
    width: 100%;
    min-width: 0;
    padding: 26px clamp(16px,3.2vw,52px) 70px
}

.customer-heading {
    margin-bottom: 24px
}

.customer-heading h1 {
    margin: 9px 0 6px;
    max-width: 100%;
    font-size: clamp(30px,3.8vw,43px);
    letter-spacing: -1px;
    line-height: 1.2;
    color: #d52b84c4
}

.customer-heading p {
    margin: 0;
    color: #d52b84c4;
    font-size: 14px
}

.customer-pages .panel {
    border-radius: 22px;
    padding: clamp(18px,2.4vw,28px);
    border: 1px solid #f4dce8;
    box-shadow: 0 9px 32px #a86e8910;
    background: #fffcfe
}

.customer-pages .panel h2 {
    font-size: 24px
}

.customer-pages .panel p {
    line-height: 1.7
}

.customer-pages #alert {
    position: static;
    top: auto;
    margin-bottom: 18px
}

.customer-pages .customer-bottom-footer {
    font-size: 11px;
    padding: 12px 16px 27px;
    background: #fffafc
}


.customer-welcome-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 26px;

    background-image: url("https://i.pinimg.com/1200x/6b/ab/9f/6bab9fd0f9cdad3b6c137e6164fe3f8e.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 1px solid #efcbdc;
    border-radius: 27px;
    padding: clamp(24px, 3.6vw, 40px);
    margin-bottom: 18px;
    overflow: hidden;
}


.customer-welcome-card h2 {
    font-family: 'Playfair Display',serif;
    max-width: 550px;
    font-size: clamp(27px,3vw,39px);
    line-height: 1.2;
    color: #ff429cbd;
    margin: 12px 0
}

.customer-welcome-card p {
    font-size: 14px;
    color: #ff429c;
    max-width: 514px;
}

.customer-welcome-flower {
    font-size: 150px;
    line-height: 1;
    color: #fff8fcad;
    text-shadow: 0 10px 27px #c77c9c38
}

.customer-cta {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    margin-top: 15px;
    background: #a84976;
    color: white;
    text-decoration: none;
    border-radius: 13px;
    padding: 13px 19px;
    font-weight: 800;
    font-size: 13px
}

.customer-cta:hover {
    background: #8e3363
}

.customer-stats-grid,.customer-quick-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
    margin-bottom: 20px
}

.customer-stat,.customer-quick-grid a {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 19px 22px;
    background: #fffcfe;
    border: 1px solid #efd8e4;
    border-radius: 19px;
    text-decoration: none;
    color: #d1bec8
}

.customer-stat span {
    font-size: 12px;
    color: #a06b86;
    font-weight: 700
}

.customer-stat strong {
    font-size: 30px;
    line-height: 1.25;
    color: #d52b84c4;
}

.customer-stat small,.customer-quick-grid a small {
    color: #a2778e;
    font-size: 12px
}

.customer-stat:hover,.customer-quick-grid a:hover {
    border-color: #dca4bf;
    background: #fff4fa
}

.customer-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px
}

.customer-section-heading h2 {
    margin: 0
}

.customer-section-heading a {
    font-size: 13px;
    font-weight: 800;
    color: #a64b7e;
    text-decoration: none
}

.customer-quick-grid a span {
    font-size: 25px;
    color: #d52b84c4
}

.customer-quick-grid a strong {
    font-size: 15px
}

.customer-shop-grid {
    grid-template-columns: minmax(0,1.2fr) minmax(310px,.85fr)
}

.customer-order-panel {
    align-self: start
}

.customer-pages .services {
    max-height: 650px
}

.customer-pages .service {
    background: #fff8fc;
    border: 1px solid #f1d6e2
}

.customer-pages .service:hover {
    border-color: #d28ba9;
    background: #ffeef6
}

.customer-pages .chips {
    flex-wrap: wrap
}

.customer-pages .chips button {
    border-radius: 999px;
    padding: 8px 12px
}

.customer-pages .total {
    gap: 10px;
    align-items: center
}

.customer-pages .total strong {
    font-size: 21px
}

.customer-wallet-banner {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: linear-gradient(115deg,#e8bed2,#fbe1ee);
    border: 1px solid #e8bad1;
    border-radius: 22px;
    padding: 23px 30px;
    margin-bottom: 20px
}

.customer-wallet-banner span {
    font-size: 13px;
    color: #7e3d5e;
    font-weight: 800
}

.customer-wallet-banner strong {
    font-size: 35px;
    line-height: 1.2;
    color: #762d59
}

.customer-wallet-banner small {
    font-size: 12px;
    color: #955e7a
}

.customer-wallet-grid,.customer-account-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
    align-items: start
}

.customer-pages .customer-wallet-grid .panel,.customer-pages .customer-account-grid .panel {
    height: 100%
}

.customer-pages .payment-qr {
    aspect-ratio: 1
}

.customer-pages .customer-note {
    margin-top: 22px;
    padding: 16px;
    background: #fff3f9;
    border-radius: 14px;
    font-size: 13px;
    color: #94617f
}

.customer-note a {
    color: #a74475;
    font-weight: 800
}

.customer-account-label {
    font-size: 12px;
    color: #aa7893
}

.customer-account-email {
    overflow-wrap: anywhere;
    font-size: 18px;
    font-weight: 800;
    color: #793655
}

.customer-telegram-status {
    font-weight: 800;
    color: #98416f
}

.customer-pages #logout {
    margin-top: 14px;
    border-radius: 13px
}

.customer-pages #connectTelegram {
    margin: 10px 0
}

.customer-pages .customer-order-dialog {
    max-height: 90vh;
    overflow: auto;
    z-index: 80
}

.customer-pages .record .head {
    align-items: start
}

.customer-pages .record .actions a,.customer-pages .record .actions button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 12px;
    padding: 9px 12px;
    color: #974674;
    background: #fff;
    border: 1px solid #eac7d8;
    border-radius: 10px
}

.customer-pages .record .actions .primary {
    color: white
}

.customer-sidebar-backdrop {
    display: none
}

@media(max-width: 1120px) {
    .customer-shell {
        grid-template-columns:210px minmax(0,1fr)
    }

    .customer-sidebar {
        padding-left: 12px;
        padding-right: 12px
    }

    .customer-main {
        padding-left: 20px!important;
        padding-right: 20px!important
    }

    .customer-shop-grid {
        grid-template-columns: 1fr
    }

    .customer-order-panel {
        position: static
    }
}

@media(max-width: 760px) {
    .customer-pages .customer-topbar {
        min-height:66px;
        padding: 10px 14px
    }

    .customer-menu-toggle {
        display: inline-flex
    }

    .customer-brand-flower {
        width: 37px;
        height: 37px;
        font-size: 23px
    }

    .customer-brand strong {
        font-size: 11px
    }

    .customer-brand small {
        font-size: 9px
    }

    .customer-topbar-welcome {
        display: none
    }

    .customer-shell {
        display: block;
        min-height: calc(100vh - 66px)
    }

    .customer-pages .customer-sidebar {
        position: fixed;
        top: 66px;
        bottom: 0;
        left: 0;
        z-index: 55;
        width: min(285px,83vw);
        height: auto;
        overflow-y: auto;
        background-color: #fff8fb;
        background-image: radial-gradient(circle at 10% 10%, rgba(247,202,201,.58) 5%, transparent 5%),radial-gradient(circle at 90% 10%, rgba(247,202,201,.58) 5%, transparent 5%),radial-gradient(circle at 90% 90%, rgba(247,202,201,.58) 5%, transparent 5%),radial-gradient(circle at 10% 90%, rgba(247,202,201,.58) 5%, transparent 5%),linear-gradient(180deg, rgba(255,250,252,.98), rgba(255,244,249,.96));
        background-size: 20px 20px,20px 20px,20px 20px,20px 20px,auto;
        box-shadow: 12px 0 40px #81516528;
        transform: translateX(-110%);
        visibility: hidden;
        transition: transform .2s ease,visibility .2s
    }

    .customer-pages .customer-sidebar.is-open {
        transform: translateX(0);
        visibility: visible
    }

    .customer-sidebar-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 66px 0 0;
        background: #321b2c77;
        z-index: 50
    }

    .customer-pages .customer-main {
        padding: 22px 15px 48px!important
    }

    .customer-heading {
        margin-bottom: 18px
    }

    .customer-heading h1 {
        font-size: 32px
    }

    .customer-stats-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px
    }

    .customer-stats-grid .customer-stat:first-child {
        grid-column: 1/-1
    }

    .customer-quick-grid {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .customer-quick-grid a {
        padding: 14px
    }

    .customer-wallet-grid,.customer-account-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .customer-welcome-flower {
        display: none
    }

    .customer-welcome-card {
        padding: 23px
    }

    .customer-top-link {
        font-size: 11px;
        padding: 8px
    }

    .customer-pages .panel {
        padding: 18px
    }

    .customer-pages .total {
        flex-wrap: wrap
    }
}

@media(max-width: 370px) {
    .customer-brand strong {
        font-size:9px
    }

    .customer-brand small {
        font-size: 8px
    }

    .customer-topbar-actions {
        gap: 5px
    }

    .customer-top-link {
        display: none
    }

    .customer-stat {
        padding: 15px
    }

    .customer-stat strong {
        font-size: 25px
    }
}

@media print {
    .customer-pages .customer-topbar,.customer-pages .customer-sidebar,.customer-pages .customer-sidebar-backdrop,.customer-pages .customer-heading,.customer-pages .customer-bottom-footer,.customer-pages #alert,.customer-pages .panel,.customer-pages .customer-quick-grid,.customer-pages .customer-stats-grid {
        display: none!important
    }

    .customer-pages .customer-main {
        padding: 0!important
    }

    .customer-pages .customer-order-dialog[open] {
        display: block!important;
        position: static!important;
        max-height: none!important;
        box-shadow: none;
        border: 0;
        width: 100%;
        max-width: none;
        padding: 0
    }

    .customer-pages .invoice {
        display: block!important;
        border: 0!important
    }

    .customer-pages .customer-order-dialog::backdrop {
        display: none
    }
}

/* Global orders: fully public, privacy-masked, responsive live tracking */
.global-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    gap: 20px;
    padding: 30px 36px;
    margin-bottom: 18px;
    border: 1px solid #f1cddd;
    border-radius: 24px;
    background: linear-gradient(110deg,#fbe1ed 4%,#fff3f9 75%,#fff9fc)
}

.global-intro h2 {
    margin: 10px 0;
    font: 600 clamp(25px,3vw,38px)/1.2 'Playfair Display',serif;
    color: #863b61
}

.global-intro p {
    max-width: 640px;
    color: #986c83;
    font-size: 13px;
    line-height: 1.75;
    margin-bottom: 0
}

.global-intro-flower {
    font-size: 104px;
    color: #e8b0cb;
    opacity: .67;
    line-height: 1
}

.global-refresh-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 5px 4px 18px;
    font-size: 12px;
    color: #97627e
}

.global-refresh-line strong {
    color: #864661
}

.global-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #4eae83;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #daf4e7;
    margin-right: 7px;
    vertical-align: middle
}

.global-stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
    margin-bottom: 18px
}

.global-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 21px 20px;
    border: 1px solid #f1d7e5;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 20px #8e6e7d0b
}

.global-stat span {
    font-size: 12px;
    color: #a2718e;
    font-weight: 800
}

.global-stat strong {
    color: #8d3a65;
    font-size: 30px;
    line-height: 1.2
}

.global-stat small {
    color: #ac8c9d;
    font-size: 11px
}

.customer-pages .global-orders-panel {
    padding: 26px
}

.global-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.global-feed-header h2 {
    margin: 0 0 8px;
    font-size: 24px
}

.global-feed-header p {
    margin: 0;
    color: #987b8a;
    font-size: 13px
}

.global-live-chip {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    color: #785d6b;
    background: #f9edf2;
    border: 1px solid #eed7e1;
    border-radius: 999px;
    padding: 10px 14px
}

.global-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 25px 0 19px
}

.global-filter a {
    padding: 9px 14px;
    border-radius: 99px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    color: #956280;
    background: #fff7fb;
    border: 1px solid #efdae5
}

.global-filter a:hover,.global-filter a.selected {
    background: #ac5281;
    border-color: #ac5281;
    color: #fff
}

.global-filter a:focus-visible,.global-pagination a:focus-visible {
    outline: 3px solid #c472a1;
    outline-offset: 3px
}

.global-table-wrap {
    width: 100%;
    overflow-x: auto
}

.global-orders-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    text-align: left
}

.global-orders-table th {
    font-size: 11px;
    color: #ac7d99;
    text-transform: uppercase;
    letter-spacing: .7px;
    border-bottom: 1px solid #efdee6;
    padding: 14px 11px;
    white-space: nowrap
}

.global-orders-table th:nth-child(1) {
    width: 13%
}

.global-orders-table th:nth-child(2) {
    width: 30%
}

.global-orders-table th:nth-child(3) {
    width: 25%
}

.global-orders-table th:nth-child(4) {
    width: 19%
}

.global-orders-table th:nth-child(5) {
    width: 13%
}

.global-orders-table td {
    padding: 18px 11px;
    border-bottom: 1px solid #f7eaf0;
    font-size: 13px;
    vertical-align: middle;
    overflow-wrap: anywhere
}

.global-orders-table tr:last-child td {
    border-bottom: 0
}

.global-orders-table tbody tr:hover {
    background: #fff8fb
}

.global-order-id {
    color: #a44375;
    font-weight: 800
}

.global-service {
    font-weight: 700;
    color: #653c53;
    line-height: 1.45
}

.global-target {
    color: #896b7c;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: 12px;
    user-select: text;
    overflow-wrap: anywhere;
    cursor: default
}

.global-status {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap
}

.global-status-dot {
    height: 7px;
    width: 7px;
    border-radius: 50%;
    background: currentColor
}

.global-status-pending {
    background: #fff2d9;
    color: #987020
}

.global-status-progress {
    background: #e8efff;
    color: #4d68af
}

.global-status-completed {
    background: #e3f6ea;
    color: #308453
}

.global-status-closed {
    background: #f2edf1;
    color: #806676
}

.global-date {
    color: #ad8499;
    font-size: 11px;
    white-space: nowrap
}

.global-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 21px 4px 0;
    color: #9c7b8d;
    font-size: 12px
}

.global-pagination-links {
    display: flex;
    align-items: center;
    gap: 10px
}

.global-pagination-links a {
    padding: 9px 12px;
    border: 1px solid #eed6e2;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    color: #9e4a74
}

.global-empty {
    text-align: center;
    padding: 48px 15px;
    color: #a87b93
}

.global-empty span {
    font-size: 48px
}

.global-empty h3 {
    font-size: 25px;
    color: #94446d;
    margin: 8px 0
}

@media(max-width: 1200px) {
    .global-stats {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .global-orders-table {
        min-width: 700px
    }
}

@media(max-width: 760px) {
    .global-intro {
        padding:24px
    }

    .global-intro-flower {
        display: none
    }

    .global-stats {
        gap: 9px
    }

    .global-stat {
        padding: 16px
    }

    .global-stat strong {
        font-size: 25px
    }

    .customer-pages .global-orders-panel {
        padding: 18px
    }

    .global-feed-header {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .global-filter a {
        font-size: 11px
    }

    .global-pagination {
        align-items: flex-start;
        flex-direction: column
    }
}

@media(max-width: 360px) {
    .global-stats {
        grid-template-columns:1fr
    }
}

/* Wallet-only order acknowledgement */
.customer-wallet-check {
    padding: 14px 17px;
    margin: 12px 0;
    background: #fff4f8;
    border: 1px solid #f6d2e3;
    border-radius: 16px;
    color: #864260;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.customer-wallet-check strong {
    color: #a52b68;
    font-weight: 800
}

.customer-wallet-check a {
    margin-left: auto;
    font-weight: 700
}

.order-terms {
    display: flex!important;
    align-items: flex-start!important;
    gap: 12px;
    padding: 17px;
    margin: 16px 0;
    background: #fff5f9;
    border: 1px solid #ecbed5;
    border-radius: 15px;
    line-height: 1.55;
    font-weight: 400
}

.order-terms input {
    width: 19px!important;
    min-width: 19px;
    height: 19px!important;
    flex-shrink: 0;
    margin: 3px 0 0;
    accent-color: #c35288
}

.order-terms span {
    flex: 1;
    font-size: .9rem
}

#walletCheckoutHint {
    margin-top: 8px
}

/* Catalog / checkout split (v4): clear search at the top and dedicated order steps. */
.customer-catalog-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    margin-bottom: 19px;
    border-radius: 23px;
    border: 1px solid #efcfe0;
    background: linear-gradient(115deg,#f9e0ec,#fff7fb);
}

.customer-catalog-intro h2 {
    font-family: 'Playfair Display',serif;
    font-size: clamp(25px,3vw,34px);
    margin: 7px 0;
    color: #883b68
}

.customer-catalog-intro p {
    margin: 0;
    font-size: 13px;
    color: #90687e;
    line-height: 1.6
}

.customer-catalog-intro .customer-cta {
    margin-top: 0;
    white-space: nowrap;
    flex-shrink: 0
}

.customer-catalog-search {
    display: block;
    margin: 19px 0 20px
}

.customer-catalog-search span {
    display: block;
    margin-bottom: 8px;
    font-weight: 800;
    font-size: 13px;
    color: #884765
}

.customer-catalog-search input {
    border: 1px solid #e6b6cc;
    border-radius: 16px;
    background: #fff9fc;
    padding: 16px 18px;
    font-size: 15px
}

.customer-catalog-search input:focus-visible,.customer-order-selects select:focus-visible {
    outline: 3px solid #efaccb;
    outline-offset: 2px
}

.customer-filter-group {
    margin: 12px 0
}

.customer-filter-label {
    font-size: 12px;
    font-weight: 800;
    color: #a05b7f
}

.customer-service-count {
    display: inline-block;
    background: #fff0f7;
    color: #9f5278;
    border: 1px solid #f1d2e2;
    border-radius: 25px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700
}

.customer-pages .customer-catalog-results {
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px
}

.customer-catalog-service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 17px 19px;
    border: 1px solid #f0d7e3;
    border-radius: 17px;
    background: #fff9fc
}

.customer-catalog-service:hover {
    border-color: #dfa2be;
    background: #fff2f8
}

.customer-catalog-service-info {
    min-width: 0
}

.customer-service-platform {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #b36d91
}

.customer-catalog-service h3 {
    font-family: 'DM Sans',sans-serif;
    font-size: 15px;
    color: #753e5b;
    margin: 7px 0
}

.customer-service-id {
    font-size: 11px;
    color: #a2778e;
    line-height: 1.6;
    overflow-wrap: anywhere
}

.customer-catalog-service-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex-shrink: 0
}

.customer-catalog-price {
    font-size: 19px;
    color: #a44474;
    text-align: right;
    font-weight: 800;
    white-space: nowrap
}

.customer-catalog-price small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #a97990
}

.customer-order-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #a84c7b;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    padding: 11px 15px;
    border-radius: 12px;
    white-space: nowrap
}

.customer-order-link:hover {
    background: #8f3562
}

.customer-order-link:focus-visible,.customer-catalog-intro a:focus-visible {
    outline: 3px solid #d18aa9;
    outline-offset: 3px
}

.customer-no-services {
    border: 1px dashed #e4b4cb;
    border-radius: 16px;
    background: #fff7fb;
    padding: 25px;
    text-align: center;
    color: #966785;
    font-weight: 700;
    font-size: 14px
}

.customer-order-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    font-size: 13px;
    color: #ac7191
}

.customer-order-breadcrumb a {
    color: #d52b84c4;
    font-weight: 800;
    text-decoration: none
}

.customer-order-grid {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(295px,.8fr);
    gap: 20px;
    align-items: start
}

.customer-order-grid .customer-order-panel,.customer-order-grid .customer-order-summary {
    margin-bottom: 0
}

.customer-order-summary {
    position: sticky;
    top: 97px
}

.customer-step-pill {
    font-size: 11px;
    font-weight: 800;
    background: #fde6f1;
    color: #a64c7b;
    border-radius: 30px;
    padding: 8px 11px
}

.customer-order-selects {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    column-gap: 14px
}

.customer-order-selects label:last-child {
    grid-column: 1/-1
}

.customer-order-selects label {
    color: #864763
}

.customer-order-selects select:disabled {
    background: #f8f2f5;
    color: #ad96a1;
    cursor: not-allowed
}

.customer-selected-service {
    padding: 14px 16px;
    margin: 12px 0 6px;
    background: #fff2f8;
    border: 1px dashed #e9b7ce;
    border-radius: 14px;
    color: #9b6382;
    font-size: 12px;
    line-height: 1.6
}

.customer-qty-hint {
    margin: -8px 0 8px
}

.customer-pages .order-terms {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px;
    border-radius: 15px;
    background: #fff5fa;
    border: 1px solid #edc9dc;
    font-weight: 500;
    line-height: 1.65
}

.customer-pages .order-terms input {
    margin: 5px 0 0;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    accent-color: #af5682
}

.customer-place-order-button {
    width: 100%;
    margin-top: 13px;
    min-height: 48px
}

.customer-checkout-mobile-summary,.customer-checkout-mobile-total {
    display: none
}

.customer-order-summary-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid #f5e1eb;
    font-size: 12px;
    color: #996e84
}

.customer-order-summary-line strong {
    color: #74405d;
    text-align: right;
    max-width: 58%;
    overflow-wrap: anywhere
}

.customer-order-balance strong {
    color: #a34474
}

.customer-order-summary .total {
    margin-top: 20px;
    align-items: center
}

.customer-order-summary .total span {
    font-size: 13px
}

.customer-summary-wallet-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: #a04678;
    font-weight: 800;
    font-size: 12px;
    text-decoration: none
}

.customer-quick-order {
    display: inline-block;
    margin-left: 12px;
    margin-top: 13px;
    color: #ff429c;
    font-weight: 800;
    font-size: 12px;
    text-decoration: none
}

@media(max-width: 1200px) {
    .customer-order-grid {
        grid-template-columns:minmax(0,1fr)
    }

    .customer-order-summary {
        position: static
    }

    .customer-catalog-intro {
        align-items: flex-start
    }
}

@media(max-width: 760px) {
    .customer-catalog-intro {
        flex-direction:column;
        padding: 22px;
        gap: 14px
    }

    .customer-catalog-intro .customer-cta {
        width: 100%;
        justify-content: space-between
    }

    .customer-catalog-service {
        flex-direction: column;
        align-items: stretch;
        gap: 13px;
        padding: 15px
    }

    .customer-catalog-service-actions {
        justify-content: space-between
    }

    .customer-catalog-price {
        text-align: left
    }

    .customer-order-selects {
        display: block
    }

    .customer-order-selects label {
        margin: 14px 0
    }

    .customer-order-breadcrumb span {
        display: none
    }

    .customer-quick-order {
        display: block;
        margin-left: 0
    }

    .customer-order-summary .total {
        flex-wrap: wrap
    }
}

@media(max-width: 370px) {
    .customer-catalog-service-actions {
        align-items:flex-start;
        flex-direction: column;
        gap: 10px
    }

    .customer-order-link {
        width: 100%
    }
}

@media(max-width: 760px) {
    .customer-checkout-mobile-summary {
        display:flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        margin: 16px 0 10px;
        padding: 13px 15px;
        background: #fff6fa;
        border: 1px solid #f1d6e3;
        border-radius: 14px;
        font-size: 12px;
        color: #8d5576
    }

    .customer-checkout-mobile-summary strong {
        color: #8b3868
    }

    .customer-checkout-mobile-summary a {
        color: #a33e72;
        font-weight: 800
    }

    .customer-order-panel .customer-checkout-mobile-total {
        display: flex;
        gap: 8px;
        padding: 13px 16px;
        margin-bottom: 18px
    }

    .customer-checkout-mobile-total strong {
        font-size: 19px
    }
}

/* Wallet recheck: show updated credits without refreshing the entire order form. */
.customer-refresh-wallet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1px solid #eab7d0;
    background: #fff9fc;
    color: #a14b76;
    font-size: .9rem;
    font-weight: 700;
    padding: .65rem .9rem;
    border-radius: 999px;
    cursor: pointer;
    margin: .6rem 0 1rem;
    transition: background .2s,transform .2s
}

.customer-refresh-wallet:hover {
    background: #ffedf6;
    transform: translateY(-1px)
}

.customer-refresh-wallet:disabled {
    opacity: .5;
    cursor: wait
}

/* Per-account service discount */
.customer-pages .customer-discount-note {
    padding: 14px 18px;
    border: 1px solid #eeb5cf;
    border-radius: 16px;
    background: #fff1f7;
    color: #953a69;
    font-weight: 700;
    margin: 10px 0 22px
}

.customer-pages .customer-catalog-price .customer-old-price {
    display: inline-block;
    font-size: .85em;
    font-weight: 400;
    color: #947988;
    margin-right: 6px
}

.customer-pages .customer-catalog-price b {
    color: #b52d70
}

/* Responsive customer refinement v7: fluid grids, accessible drawer, narrow viewport safety. */
.customer-pages {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

.customer-pages *, .customer-pages *::before, .customer-pages *::after {
    box-sizing: border-box;
}

.customer-pages img, .customer-pages svg, .customer-pages video, .customer-pages iframe {
    max-width: 100%;
}

.customer-pages img, .customer-pages video {
    height: auto;
}

.customer-pages .customer-shell {
    width: 100%;
}

.customer-pages .customer-main, .customer-pages .panel, .customer-pages .record, .customer-pages .service, .customer-pages .customer-catalog-service, .customer-pages .customer-order-summary, .customer-pages .customer-orders-panel {
    min-width: 0;
    max-width: 100%;
}

.customer-pages .customer-topbar-left {
    flex: 1 1 auto;
}

.customer-pages .customer-topbar-actions {
    flex: 0 0 auto;
}

.customer-pages .customer-brand {
    overflow: hidden;
}

.customer-pages .customer-brand > span:last-child {
    min-width: 0;
}

.customer-pages .customer-brand strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-pages .customer-topbar-welcome {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-pages button, .customer-pages a, .customer-pages select {
    touch-action: manipulation;
}

.customer-pages input, .customer-pages select, .customer-pages textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: max(16px, 1rem);
}

.customer-pages input[type="checkbox"], .customer-pages input[type="radio"] {
    width: auto;
    min-width: auto;
}

.customer-pages .payment-method-grid, .customer-pages .customer-stats-grid, .customer-pages .customer-quick-grid, .customer-pages .customer-wallet-grid, .customer-pages .customer-account-grid, .customer-pages .customer-order-grid, .customer-pages .customer-order-selects {
    min-width: 0;
}

.customer-pages .payment-method-grid, .customer-pages .customer-stats-grid, .customer-pages .customer-quick-grid {
    grid-template-columns: repeat(auto-fit,minmax(min(210px,100%),1fr));
}

.customer-pages .customer-wallet-grid, .customer-pages .customer-account-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.customer-pages .customer-catalog-intro, .customer-pages .customer-catalog-service, .customer-pages .customer-catalog-service-actions {
    min-width: 0;
}

.customer-pages .customer-catalog-service-info, .customer-pages .customer-catalog-service-actions, .customer-pages .customer-catalog-price {
    min-width: 0;
    overflow-wrap: anywhere;
}

.customer-pages .record, .customer-pages .customer-selected-service, .customer-pages .customer-note, .customer-pages .customer-order-summary-line, .customer-pages .customer-account-email {
    overflow-wrap: anywhere;
}

.customer-pages .table-scroll, .customer-pages .global-orders-table-wrap, .customer-pages .global-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.customer-pages .global-orders-table {
    width: 100%;
}

.customer-pages .customer-order-dialog {
    width: min(650px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    padding: clamp(14px,3vw,28px);
}

.customer-pages .customer-menu-toggle {
    flex: 0 0 auto;
}

.customer-pages .customer-menu-open {
    overflow: hidden;
}

@media (max-width: 1200px) {
    .customer-pages .customer-main {
        padding-inline: clamp(17px,2.4vw,28px);
    }

    .customer-pages .customer-shop-grid, .customer-pages .customer-order-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .customer-pages .customer-order-summary {
        position: static;
    }
}

@media (max-width: 900px) and (min-width: 761px) {
    .customer-pages .customer-shell {
        grid-template-columns: 198px minmax(0,1fr);
    }

    .customer-pages .customer-sidebar {
        padding-inline: 10px; }

    .customer-pages .customer-sidebar-nav a {
        padding: 11px 10px;
        font-size: 12px;
    }

    .customer-pages .customer-main {
        padding-inline: 17px !important; }

    .customer-pages .customer-topbar-welcome {
        display: none;
    }

    .customer-pages .customer-wallet-grid, .customer-pages .customer-account-grid {
        grid-template-columns: minmax(0,1fr);
    }
}

@media (max-width: 760px) {
    .customer-pages.customer-menu-open {
        overflow: hidden;
    }

    .customer-pages .customer-topbar {
        min-height: 66px;
        gap: 9px;
        padding: 10px max(12px, env(safe-area-inset-right));
    }

    .customer-pages .customer-topbar-left, .customer-pages .customer-topbar-actions {
        gap: 9px;
    }

    .customer-pages .customer-main {
        padding: 22px clamp(12px,4vw,22px) 45px !important;
    }

    .customer-pages .customer-sidebar {
        padding-bottom: max(22px,env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }

    .customer-pages .customer-stats-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .customer-pages .customer-quick-grid, .customer-pages .customer-wallet-grid, .customer-pages .customer-account-grid, .customer-pages .customer-order-grid, .customer-pages .customer-order-selects {
        grid-template-columns: minmax(0,1fr);
    }

    .customer-pages .customer-order-selects label:last-child {
        grid-column: auto;
    }

    .customer-pages .customer-order-selects label {
        min-width: 0;
    }

    .customer-pages .panel {
        padding: clamp(15px,4vw,22px);
    }

    .customer-pages .customer-heading h1 {
        font-size: clamp(26px,7vw,36px);
    }

    .customer-pages .customer-heading p {
        font-size: 13px;
    }

    .customer-pages .customer-catalog-intro {
        flex-direction: column;
        gap: 13px;
    }

    .customer-pages .customer-catalog-service {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-pages .customer-catalog-service-actions {
        flex-wrap: wrap;
        gap: 11px;
    }

    .customer-pages .customer-catalog-price {
        text-align: left;
    }

    .customer-pages .customer-order-summary-line strong {
        max-width: 65%;
    }

    .customer-pages .global-orders-table {
        min-width: 630px;
    }

    .customer-pages .customer-wallet-check {
        align-items: flex-start;
    }

    .customer-pages .copy-line {
        flex-wrap: wrap;
    }

    .customer-pages .copy-line code {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .customer-pages .record .head {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 430px) {
    .customer-pages .customer-brand-flower {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 21px;
    }

    .customer-pages .customer-brand {
        gap: 7px;
    }

    .customer-pages .customer-brand strong {
        font-size: 10px;
        letter-spacing: 0;
    }

    .customer-pages .customer-brand small {
        font-size: 9px;
    }

    .customer-pages .customer-topbar-actions {
        gap: 6px;
    }

    .customer-pages .customer-avatar {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .customer-pages .customer-cta, .customer-pages .customer-order-link {
        justify-content: space-between;
        max-width: 100%;
    }

    .customer-pages .customer-welcome-card {
        padding: 20px;
    }

    .customer-pages .customer-stat {
        padding: 13px;
    }

    .customer-pages .customer-stat strong {
        font-size: clamp(20px,6vw,27px);
    }

    .customer-pages .customer-stats-grid {
        gap: 10px;
    }

    .customer-pages .customer-heading {
        margin-bottom: 18px;
    }

    .customer-pages .customer-order-dialog {
        padding: 15px;
    }
}

@media (max-width: 350px) {
    .customer-pages .customer-topbar {
        padding-inline: 9px;
    }

    .customer-pages .customer-brand small {
        display: none;
    }

    .customer-pages .customer-brand strong {
        font-size: 9px;
    }

    .customer-pages .customer-menu-toggle {
        padding: 7px 9px;
    }

    .customer-pages .customer-topbar-actions > a.customer-top-link {
        font-size: 10px;
    }

    .customer-pages .customer-main {
        padding-inline: 10px !important; }

    .customer-pages .customer-stat strong {
        font-size: 21px;
    }

    .customer-pages .global-stat strong {
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-pages .customer-sidebar, .customer-pages button {
        transition: none;
    }
}

/* Customer identity cards & accessible avatar dropdown — pink UI only */
.customer-pages .customer-sidebar-user {
    margin-top: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 13px 12px 12px;
    text-decoration: none;
    border: 1px solid #edccdc;
    border-radius: 18px;
    background: linear-gradient(135deg,#fffafd,#ffe9f3);
    box-shadow: 0 8px 22px #9f577114;
    color: #743954;
    transition: transform .15s,border-color .15s
}

.customer-pages .customer-sidebar-user:hover {
    transform: translateY(-1px);
    border-color: #d997b8
}

.customer-pages .customer-sidebar-user-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0
}

.customer-pages .customer-profile-avatar {
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e9c0d3;
    display: block;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 50%;
    background: #f9e0ea
}

.customer-pages .customer-sidebar-user .customer-profile-avatar {
    width: 43px;
    height: 43px
}

.customer-pages .customer-sidebar-user-identity,.customer-pages .customer-profile-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto
}

.customer-pages .customer-sidebar-user-identity strong,.customer-pages .customer-profile-identity strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #742e52
}

.customer-pages .customer-sidebar-user-identity small,.customer-pages .customer-profile-identity span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #9c7289;
    font-size: 11px
}

.customer-pages .customer-sidebar-user-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #f4d7e4;
    font-size: 11px;
    color: #96617b
}

.customer-pages .customer-sidebar-user-balance strong {
    font-size: 13px;
    color: #8a315e;
    white-space: nowrap
}

.customer-pages .customer-profile-menu {
    position: relative;
    display: flex;
    align-items: center
}

.customer-pages .customer-profile-trigger {
    width: auto;
    min-width: 56px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 3px 7px 3px 4px;
    border: 1px solid #efd0df;
    border-radius: 999px;
    background: #fff5fa;
    color: #975277;
    cursor: pointer;
    transition: background .15s,border-color .15s
}

.customer-pages .customer-profile-trigger:hover,.customer-pages .customer-profile-trigger[aria-expanded="true"] {
    background: #ffe6f1;
    border-color: #dfabc5
}

.customer-pages .customer-profile-trigger .customer-profile-avatar {
    width: 36px;
    height: 36px
}

.customer-pages .customer-profile-trigger .customer-profile-chevron {
    flex-shrink: 0;
    transition: transform .15s
}

.customer-pages .customer-profile-trigger[aria-expanded="true"] .customer-profile-chevron {
    transform: rotate(180deg)
}

.customer-pages .customer-profile-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 100;
    width: min(316px,calc(100vw - 20px));
    padding: 15px;
    background: #fff;
    border: 1px solid #eed2e0;
    border-radius: 19px;
    box-shadow: 0 20px 60px #7741602d;
    color: #743954;
    text-align: left
}

.customer-pages .customer-profile-dropdown[hidden] {
    display: none!important
}

.customer-pages .customer-profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 3px 2px 12px
}

.customer-pages .customer-profile-avatar-large {
    width: 54px;
    height: 54px
}

.customer-pages .customer-profile-identity strong {
    font-size: 16px
}

.customer-pages .customer-profile-identity span {
    font-size: 12px
}

.customer-pages .customer-profile-wallet {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 13px;
    background: #fff0f7;
    border: 1px solid #f5d9e6
}

.customer-pages .customer-profile-wallet span {
    font-size: 11px;
    color: #95657e;
    font-weight: 700
}

.customer-pages .customer-profile-wallet strong {
    font-size: 24px;
    line-height: 1.2;
    color: #d52b84c4
}

.customer-pages .customer-profile-links {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 11px
}

.customer-pages .customer-profile-links a,.customer-pages .customer-profile-links button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    color: #75465f;
    font: 700 13px 'DM Sans',sans-serif;
    text-decoration: none;
    cursor: pointer
}

.customer-pages .customer-profile-links a:hover,.customer-pages .customer-profile-links button:hover {
    background: #fff0f7
}

.customer-pages .customer-profile-links button {
    color: #a14169
}

.customer-pages .customer-profile-links button:disabled {
    opacity: .5;
    cursor: wait
}

.customer-pages .customer-profile-links a span,.customer-pages .customer-profile-links button span {
    min-width: 20px;
    font-size: 19px;
    text-align: center
}

.customer-pages .customer-profile-message {
    font-size: 11px;
    line-height: 1.5;
    color: #a13d63;
    padding: 6px 10px;
    margin: 0
}

.customer-pages .customer-profile-trigger:focus-visible,.customer-pages .customer-sidebar-user:focus-visible,.customer-pages .customer-profile-links a:focus-visible,.customer-pages .customer-profile-links button:focus-visible {
    outline: 3px solid #c25e92;
    outline-offset: 3px
}

@media(max-width: 760px) {
    .customer-pages .customer-profile-trigger {
        min-height:40px;
        min-width: 49px;
        padding: 2px 5px 2px 2px
    }

    .customer-pages .customer-profile-trigger .customer-profile-avatar {
        height: 33px;
        width: 33px
    }

    .customer-pages .customer-profile-dropdown {
        top: calc(100% + 10px)
    }
}

@media(max-width: 350px) {
    .customer-pages .customer-profile-trigger {
        min-width:39px;
        padding: 2px
    }

    .customer-pages .customer-profile-trigger .customer-profile-chevron {
        display: none
    }

    .customer-pages .customer-profile-dropdown {
        right: -3px
    }
}

@media(prefers-reduced-motion:reduce) {
    .customer-pages .customer-sidebar-user,.customer-pages .customer-profile-trigger .customer-profile-chevron {
        transition: none
    }
}

/* Mobile drawer v9: full viewport height, with its own scrollable menu and a pinned profile.
   Explicit height avoids fixed+auto-height shrinking to the content (~598px). */
@media (max-width: 760px) {
    .customer-pages {
        --customer-mobile-topbar-height: 72px;
    }

    .customer-pages .customer-topbar {
        height: var(--customer-mobile-topbar-height);
        min-height: var(--customer-mobile-topbar-height);
        max-height: var(--customer-mobile-topbar-height);
        padding-block: 7px; }

    .customer-pages .customer-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 7px 10px;
        line-height: 1;
        align-items: center;
        justify-content: center;
    }

    .customer-pages .customer-sidebar {
        position: fixed;
        inset: var(--customer-mobile-topbar-height) auto auto 0;
        z-index: 55;
        width: min(285px, 87vw);
        height: calc(100vh - var(--customer-mobile-topbar-height));
        height: calc(100dvh - var(--customer-mobile-topbar-height));
        max-height: calc(100vh - var(--customer-mobile-topbar-height));
        max-height: calc(100dvh - var(--customer-mobile-topbar-height));
        display: flex;
        flex-direction: column;
        align-self: auto;
        overflow: hidden;
        padding: 19px 12px max(13px, env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }

    .customer-pages .customer-sidebar-title {
        flex: 0 0 auto;
        padding: 0 12px 9px;
    }

    .customer-pages .customer-sidebar-nav {
        flex: 1 1 auto;
        min-height: 0;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding: 3px 3px 6px 0;
    }

    .customer-pages .customer-sidebar-nav a {
        flex: 0 0 auto;
    }

    .customer-pages .customer-sidebar-user, .customer-pages .customer-sidebar-footer {
        flex: 0 0 auto;
        margin-top: 8px;
    }

    .customer-pages .customer-sidebar-backdrop:not([hidden]) {
        inset: var(--customer-mobile-topbar-height) 0 0;
    }
}

/* Customer main-card HEADER accents only — keep card bodies and smaller tiles plain.
   The four-corner #F7CAC9 motif repeats every 20px but fades out before
   any order forms, payment details, or service lists. No admin styles change. */
.customer-pages {
    --customer-header-dot-pattern: radial-gradient(circle at 10% 10%, rgb(247 202 201 / 65%) 5%, transparent 5%), radial-gradient(circle at 90% 10%, rgb(247 202 201 / 65%) 5%, transparent 5%), radial-gradient(circle at 90% 90%, rgb(247 202 201 / 65%) 5%, transparent 5%), radial-gradient(circle at 10% 90%, rgb(247 202 201 / 65%) 5%, transparent 5%);
}

/* Main content panels and the four full-width feature/intro cards only. */
.customer-pages .customer-main :is( .panel, .customer-welcome-card, .customer-catalog-intro, .customer-wallet-banner, .global-intro ) {
    position: relative;
    isolation: isolate;
}

/* The dots occupy just the top header strip; the fade avoids a hard seam. */
.customer-pages .customer-main :is( .panel, .customer-welcome-card, .customer-catalog-intro, .customer-wallet-banner, .global-intro )::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 105px;
    border-radius: 22px 22px 0 0;
    background-image: var(--customer-header-dot-pattern);
    background-size: 20px 20px;
    background-repeat: repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure content (including interactive controls) is above the decoration. */
.customer-pages .customer-main :is( .panel, .customer-welcome-card, .customer-catalog-intro, .customer-wallet-banner, .global-intro ) > * {
    position: relative;
    z-index: 1;
}

/* Small statistic cards, services, invoices, and profile cards use their original
   clean fills; the texture is deliberately NOT applied to them. */