/* ================================================================
   Base
   ================================================================ */

* {

    box-sizing: border-box;

}


body {

    margin: 0;

    background: #f6f7fb;

    color: #20242d;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


/* ================================================================
   Header
   ================================================================ */

.sales-header {

    background: #ffffff;

    border-bottom: 1px solid #e4e7ee;

}


.sales-header-inner {

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.sales-brand {

    color: #293241;

    font-size: 1.25rem;

    font-weight: 800;

    text-decoration: none;

}


.sales-nav {

    display: flex;

    align-items: center;

    gap: 10px;

}


.sales-nav a {

    padding: 10px 14px;

    color: #555d6c;

    text-decoration: none;

    border-radius: 9px;

}


.sales-nav a:hover {

    color: #20242d;

    background: #f0f2f7;

}

/* ================================================================
   Active Navigation
   ================================================================ */

.sales-nav a.active {

    color: #20242d;

    background: #eef2fb;

    font-weight: 700;

}


/* ================================================================
   Django Flash Messages
   ================================================================ */

.sales-messages {

    width: min(1100px, calc(100% - 40px));

    margin: 24px auto 0;

}


.sales-message {

    padding: 13px 16px;

    margin-bottom: 10px;

    background: #ffffff;

    border: 1px solid #dfe3ea;

    border-radius: 10px;

    color: #404754;

    font-size: 0.88rem;

}


.sales-message-success {

    background: #eef8f2;

    border-color: #b9ddc7;

    color: #326b49;

}


.sales-message-error {

    background: #fff1f1;

    border-color: #e5b9b9;

    color: #963737;

}


.sales-message-warning {

    background: #fff8e7;

    border-color: #ead79d;

    color: #765d17;

}


.sales-message-info {

    background: #eef3ff;

    border-color: #c4d1f3;

    color: #3d579f;

}



/* ================================================================
   Main Layout
   ================================================================ */

.sales-container {

    width: min(1100px, calc(100% - 40px));

    margin: 0 auto;

    padding: 48px 0 80px;

}


/* ================================================================
   Page Heading
   ================================================================ */

.page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    margin-bottom: 28px;

}


.page-header h1 {

    margin: 0 0 8px;

    font-size: 2rem;

}


.page-description {

    margin: 0;

    color: #6d7482;

}


/* ================================================================
   Cards
   ================================================================ */

.card {

    background: #ffffff;

    border: 1px solid #e3e6ed;

    border-radius: 16px;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.04);

    margin-bottom: 24px;

}


.card-body {

    padding: 28px;

}


.account-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px, 1fr)
        );

    gap: 20px;

}


.account-card {

    display: block;

    padding: 26px;

    background: #ffffff;

    border: 1px solid #e3e6ed;

    border-radius: 16px;

    color: inherit;

    text-decoration: none;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;

}


.account-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.08);

}


.account-card h2 {

    margin: 0 0 8px;

    font-size: 1.1rem;

}


.account-card p {

    margin: 0;

    color: #707786;

}


/* ================================================================
   Forms
   ================================================================ */

.form-group {

    margin-bottom: 20px;

}


.form-group label {

    display: block;

    margin-bottom: 7px;

    font-weight: 650;

}


.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 12px 14px;

    border: 1px solid #ccd1dc;

    border-radius: 10px;

    background: #ffffff;

    color: #20242d;

    font: inherit;

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    outline: none;

    border-color: #5878d8;

    box-shadow:
        0 0 0 3px rgba(88, 120, 216, 0.12);

}


.form-error {

    margin-top: 6px;

    color: #b52c2c;

    font-size: 0.9rem;

}


/* ================================================================
   Buttons
   ================================================================ */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 11px 17px;

    border: 1px solid transparent;

    border-radius: 10px;

    font: inherit;

    font-weight: 650;

    cursor: pointer;

    text-decoration: none;

}


.button-primary {

    color: #ffffff;

    background: #4869cf;

}


.button-primary:hover {

    background: #3858bc;

}


.button-secondary {

    color: #303744;

    background: #ffffff;

    border-color: #ccd1dc;

}


.actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


/* ================================================================
   Addresses
   ================================================================ */

.address-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 20px;

}


.address-card {

    padding: 24px;

    background: #ffffff;

    border: 1px solid #e3e6ed;

    border-radius: 16px;

}


.address-card h3 {

    margin-top: 0;

}


.default-badge {

    display: inline-block;

    padding: 4px 9px;

    margin-left: 8px;

    border-radius: 20px;

    background: #e8eefc;

    color: #3657b3;

    font-size: 0.75rem;

    font-weight: 700;

}


/* ================================================================
   Utility
   ================================================================ */

.muted {

    color: #737b89;

}


.auth-container {

    width: min(460px, calc(100% - 40px));

    margin: 70px auto;

}


.auth-heading {

    text-align: center;

    margin-bottom: 28px;

}


.auth-heading h1 {

    margin-bottom: 8px;

}


/* ================================================================
   Mobile
   ================================================================ */

@media (max-width: 700px) {

    .sales-header-inner {

        width: calc(100% - 24px);

    }


    .sales-container {

        width: calc(100% - 24px);

        padding-top: 30px;

    }


    .page-header {

        align-items: flex-start;

        flex-direction: column;

    }

}

/* ================================================================
   Detail Lists
   ================================================================ */

.detail-list {

    margin-top: 20px;

}


.detail-row {

    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 20px;

    padding: 15px 0;

    border-bottom: 1px solid #edf0f4;

}


.detail-row:last-child {

    border-bottom: none;

}


.detail-label {

    color: #737b89;

    font-weight: 600;

}


.detail-value {

    color: #20242d;

    font-weight: 500;

}


/* ================================================================
   Danger Button
   ================================================================ */

.button-danger {

    color: #ffffff;

    background: #b83a3a;

    border-color: #b83a3a;

}


.button-danger:hover {

    background: #9f2f2f;

    border-color: #9f2f2f;

}


/* ================================================================
   Checkbox Fields
   ================================================================ */

.form-group input[type="checkbox"] {

    width: auto;

    margin-right: 8px;

}


/* ================================================================
   Mobile Details
   ================================================================ */

@media (max-width: 600px) {

    .detail-row {

        grid-template-columns: 1fr;

        gap: 5px;

    }

}

/* ==========================================================================
   ORDER HISTORY
   ========================================================================== */

.order-history-page {
    width: 100%;
}


.order-history-header {
    margin-bottom: 26px;
}


.order-history-header h1 {
    margin: 0 0 7px;

    color: #20242d;

    font-size: 2.15rem;
    font-weight: 800;

    letter-spacing: -0.035em;
}


.order-history-header p {
    margin: 0;

    color: #747c89;

    font-size: 0.95rem;
}



/* ==========================================================================
   Search
   ========================================================================== */

.order-search-bar {
    display: grid;

    grid-template-columns:
        minmax(260px, 1fr)
        190px
        auto;

    align-items: end;

    gap: 12px;

    margin-bottom: 24px;
    padding: 18px 20px;

    background: #ffffff;

    border: 1px solid #e1e4eb;
    border-radius: 12px;
}


.order-search-bar label {
    display: block;

    margin-bottom: 6px;

    color: #6f7784;

    font-size: 0.72rem;
    font-weight: 700;
}


.order-search-bar input,
.order-search-bar select {
    width: 100%;
    height: 44px;

    padding: 0 13px;

    background: #ffffff;

    border: 1px solid #ccd2dc;
    border-radius: 8px;

    color: #252a33;

    font: inherit;
}


.order-search-bar input:focus,
.order-search-bar select:focus {
    outline: none;

    border-color: #5878d8;

    box-shadow:
        0 0 0 3px rgba(88, 120, 216, 0.09);
}


.order-search-submit {
    height: 44px;

    padding: 0 20px;

    background: #4869cf;

    border: 0;
    border-radius: 8px;

    color: #ffffff;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}



/* ==========================================================================
   Purchase Accordion
   ========================================================================== */

.order-history-list {
    display: flex;
    flex-direction: column;

    gap: 11px;
}


.purchase-accordion {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe3ea;
    border-radius: 12px;

    box-shadow:
        0 2px 8px rgba(25, 32, 45, 0.025);
}


.purchase-accordion[open] {
    border-color: #cfd5e0;

    box-shadow:
        0 6px 20px rgba(25, 32, 45, 0.055);
}


/* Remove native disclosure graphics */

.purchase-summary,
.seller-order-summary {
    list-style: none;
}


.purchase-summary::-webkit-details-marker,
.seller-order-summary::-webkit-details-marker {
    display: none;
}


.purchase-summary::marker,
.seller-order-summary::marker {
    display: none;
    content: "";
}


.purchase-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 18px 20px;

    cursor: pointer;

    user-select: none;
}


.purchase-summary:hover {
    background: #fafbfc;
}


.purchase-summary-main {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.purchase-summary-label,
.purchase-summary-field span {
    color: #969da8;

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.purchase-summary-number {
    color: #282e38;

    font-size: 0.95rem;
}


.purchase-summary-data {
    display: flex;
    align-items: center;

    gap: 30px;
}


.purchase-summary-field {
    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 90px;
}


.purchase-summary-field strong {
    color: #444b57;

    font-size: 0.82rem;
}


.purchase-summary-status,
.seller-summary-status {
    padding: 5px 10px;

    background: #eef2fb;

    border-radius: 999px;

    color: #536db9;

    font-size: 0.69rem;
    font-weight: 700;
}


.purchase-summary-arrow,
.seller-summary-arrow {
    color: #9198a4;

    font-size: 1rem;

    transition:
        transform 0.18s ease;
}


.purchase-accordion[open]
> .purchase-summary
.purchase-summary-arrow {
    transform: rotate(180deg);
}



/* ==========================================================================
   Purchase Content
   ========================================================================== */

.purchase-content {
    padding: 22px;

    background: #f8f9fb;

    border-top: 1px solid #e5e8ee;
}


.purchase-content-heading {
    margin-bottom: 15px;
}


.purchase-content-heading h2 {
    margin: 0 0 3px;

    color: #363d48;

    font-size: 0.93rem;
}


.purchase-content-heading p {
    margin: 0;

    color: #8b929e;

    font-size: 0.75rem;
}



/* ==========================================================================
   Seller Accordion
   ========================================================================== */

.seller-order-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.seller-order-accordion {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e0e4ea;
    border-radius: 9px;
}


.seller-order-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 13px 15px;

    cursor: pointer;

    user-select: none;
}


.seller-order-summary:hover {
    background: #fbfcfd;
}


.seller-summary-main {
    display: flex;
    align-items: center;

    gap: 11px;
}


.seller-letter {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    background: #edf1fa;

    border-radius: 50%;

    color: #536db9;

    font-size: 0.8rem;
    font-weight: 800;
}


.seller-summary-main > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 1px;
}


.seller-summary-main span,
.seller-summary-total span {
    color: #969da8;

    font-size: 0.61rem;
    font-weight: 700;

    text-transform: uppercase;
}


.seller-summary-main strong {
    color: #373e49;

    font-size: 0.85rem;
}


.seller-summary-right {
    display: flex;
    align-items: center;

    gap: 22px;
}


.seller-summary-total {
    display: flex;
    flex-direction: column;

    min-width: 80px;
}


.seller-summary-total strong {
    color: #3e4550;

    font-size: 0.79rem;
}


.seller-order-accordion[open]
> .seller-order-summary
.seller-summary-arrow {
    transform: rotate(180deg);
}



/* ==========================================================================
   Seller Content
   ========================================================================== */

.seller-order-content {
    padding: 16px;

    background: #fcfcfd;

    border-top: 1px solid #e7e9ee;
}


.seller-order-items {
    overflow: hidden;

    border: 1px solid #e7e9ee;
    border-radius: 7px;
}


.seller-order-item {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        90px
        110px;

    align-items: center;

    gap: 15px;

    padding: 11px 13px;

    background: #ffffff;

    border-bottom: 1px solid #eceef2;
}


.seller-order-item:last-child {
    border-bottom: 0;
}


.seller-order-item-name {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.seller-order-item-name strong {
    color: #3d4450;

    font-size: 0.8rem;
}


.seller-order-item-name span {
    margin-top: 2px;

    color: #939aa5;

    font-size: 0.68rem;
}


.seller-order-item-quantity,
.seller-order-item-price {
    display: flex;
    flex-direction: column;
}


.seller-order-item-quantity span,
.seller-order-item-price span {
    color: #a0a6b0;

    font-size: 0.59rem;
    font-weight: 700;

    text-transform: uppercase;
}


.seller-order-item-quantity strong,
.seller-order-item-price strong {
    color: #464d58;

    font-size: 0.77rem;
}


.seller-order-item-price {
    text-align: right;
}



/* ==========================================================================
   Seller Totals
   ========================================================================== */

.seller-order-totals {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 13px;

    border-top: 1px solid #e8eaef;
    border-bottom: 1px solid #e8eaef;
}


.seller-order-totals > div {
    display: flex;
    flex-direction: column;

    gap: 2px;

    padding: 11px 10px;
}


.seller-order-totals span {
    color: #9ba1ab;

    font-size: 0.59rem;
    font-weight: 700;

    text-transform: uppercase;
}


.seller-order-totals strong {
    color: #4a515c;

    font-size: 0.76rem;
}


.seller-order-grand-total {
    background: #f5f7fb;
}



/* ==========================================================================
   Seller Footer
   ========================================================================== */

.seller-order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 14px;
}


.seller-shipping-future {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.seller-shipping-future strong {
    color: #717986;

    font-size: 0.69rem;
}


.seller-shipping-future span {
    color: #a0a6b0;

    font-size: 0.65rem;
}


.seller-rate-button {
    padding: 8px 12px;

    background: #fff8e5;

    border: 1px solid #ead795;
    border-radius: 7px;

    color: #725a12;

    font-size: 0.72rem;
    font-weight: 700;

    text-decoration: none;
}


.seller-rate-button:hover {
    background: #fff2c7;
}


.seller-rating-complete {
    display: flex;
    align-items: center;

    gap: 8px;
}


.seller-rating-complete div {
    color: #e7ac18;

    letter-spacing: 1px;
}


.seller-rating-complete span {
    color: #8c939e;

    font-size: 0.68rem;
}



/* ==========================================================================
   REVIEW PAGE
   ========================================================================== */

.seller-review-page {
    width: min(800px, 100%);

    margin: 0 auto;
}


.seller-review-back {
    display: inline-block;

    margin-bottom: 18px;

    color: #6074b1;

    font-size: 0.78rem;
    font-weight: 700;

    text-decoration: none;
}


.seller-review-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dde1e8;
    border-radius: 15px;

    box-shadow:
        0 10px 32px rgba(24, 31, 45, 0.065);
}



/* ==========================================================================
   Review Header
   ========================================================================== */

.seller-review-header {
    padding: 38px 45px 31px;

    text-align: center;

    border-bottom: 1px solid #e8eaef;
}


.seller-review-kicker {
    display: block;

    margin-bottom: 7px;

    color: #5878d8;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.seller-review-header h1 {
    margin: 0;

    color: #20242d;

    font-size: 2rem;

    letter-spacing: -0.035em;
}


.seller-review-header > p {
    margin: 10px auto 0;

    color: #747c89;

    font-size: 0.9rem;
}


.seller-review-order-reference {
    display: inline-flex;

    gap: 5px;

    margin-top: 13px;
    padding: 5px 10px;

    background: #f4f6fa;

    border-radius: 6px;

    color: #8a919d;

    font-size: 0.67rem;
}


.seller-review-order-reference strong {
    color: #606875;
}



/* ==========================================================================
   Review Sections
   ========================================================================== */

.seller-review-rating,
.seller-review-writing,
.seller-review-products {
    padding: 30px 45px;

    border-bottom: 1px solid #e8eaef;
}


.seller-review-rating {
    text-align: center;
}


.seller-review-rating h2,
.seller-review-writing h2,
.seller-review-products h2 {
    margin: 0;

    color: #303743;

    font-size: 1rem;
}


.seller-review-rating > p,
.seller-review-section-title p {
    margin: 6px 0 18px;

    color: #858c98;

    font-size: 0.77rem;
}



/* ==========================================================================
   Stars
   ========================================================================== */

.seller-review-stars {
    display: inline-flex;

    gap: 3px;

    padding: 8px 12px;
}


.seller-review-stars button {
    width: 52px;
    height: 52px;

    padding: 0;

    background: transparent;

    border: 0;

    color: #d9dde4;

    font-size: 3.15rem;

    line-height: 1;

    cursor: pointer;

    transition:
        color 0.1s ease,
        transform 0.1s ease;
}


.seller-review-stars button:hover {
    transform: translateY(-2px);
}


.seller-review-stars button:focus {
    outline: 2px solid #7891dc;
    outline-offset: 2px;

    border-radius: 4px;
}


.seller-review-stars button.selected {
    color: #efb21c;
}


.seller-review-rating-label {
    min-height: 20px;

    margin-top: 6px;

    color: #9aa0aa;

    font-size: 0.75rem;
}


.seller-review-rating-label.has-rating {
    color: #5d6470;

    font-weight: 700;
}



/* ==========================================================================
   Review Writing
   ========================================================================== */

.seller-review-section-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


.seller-review-section-title p {
    margin-bottom: 15px;
}


.seller-review-section-title > span {
    padding: 3px 7px;

    background: #f1f3f6;

    border-radius: 5px;

    color: #9299a4;

    font-size: 0.59rem;
    font-weight: 700;

    text-transform: uppercase;
}


.seller-review-textarea {
    overflow: hidden;

    background: #fafbfc;

    border: 1px solid #d5dae3;
    border-radius: 9px;
}


.seller-review-textarea:focus-within {
    background: #ffffff;

    border-color: #5878d8;

    box-shadow:
        0 0 0 3px rgba(88, 120, 216, 0.08);
}


.seller-review-textarea textarea {
    display: block;

    width: 100%;
    min-height: 170px;

    padding: 16px;

    background: transparent;

    border: 0;

    color: #333a45;

    font: inherit;
    font-size: 0.84rem;

    line-height: 1.55;

    resize: vertical;
}


.seller-review-textarea textarea:focus {
    outline: none;
}


.seller-review-textarea-footer {
    padding: 9px 15px;

    background: #f4f5f8;

    border-top: 1px solid #e3e6ec;

    color: #999fa9;

    font-size: 0.65rem;
}



/* ==========================================================================
   Review Products
   ========================================================================== */

.seller-review-products-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 12px;
}


.seller-review-products-heading > span {
    color: #999fa9;

    font-size: 0.65rem;
}


.seller-review-product-list {
    border-top: 1px solid #eceef2;
}


.seller-review-product {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 11px 2px;

    border-bottom: 1px solid #eceef2;
}


.seller-review-product > div:first-child {
    display: flex;
    flex-direction: column;
}


.seller-review-product strong {
    color: #444b56;

    font-size: 0.76rem;
}


.seller-review-product span {
    color: #969da8;

    font-size: 0.66rem;
}


.seller-review-product > div:last-child {
    color: #737b87;

    font-size: 0.72rem;
}



/* ==========================================================================
   Review Actions
   ========================================================================== */

.seller-review-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;

    padding: 20px 45px;

    background: #fafbfc;
}


.seller-review-cancel {
    padding: 9px 13px;

    color: #7d8591;

    font-size: 0.75rem;
    font-weight: 700;

    text-decoration: none;
}


.seller-review-submit {
    padding: 10px 18px;

    background: #4869cf;

    border: 0;
    border-radius: 7px;

    color: #ffffff;

    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;

    cursor: pointer;
}


.seller-review-submit:hover {
    background: #3858bc;
}


.seller-review-errors {
    margin-top: 9px;

    color: #b52c2c;

    font-size: 0.72rem;
}



/* ==========================================================================
   Empty State
   ========================================================================== */

.order-history-empty {
    padding: 55px 25px;

    background: #ffffff;

    border: 1px solid #dfe3ea;
    border-radius: 12px;

    text-align: center;
}


.order-history-empty h2 {
    margin: 0 0 5px;

    font-size: 1rem;
}


.order-history-empty p {
    margin: 0;

    color: #8b929d;

    font-size: 0.78rem;
}



/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 700px) {

    .order-search-bar {
        grid-template-columns: 1fr;
    }


    .purchase-summary-data {
        gap: 12px;
    }


    .purchase-summary-field:first-child {
        display: none;
    }


    .purchase-summary-status {
        display: none;
    }


    .seller-summary-total {
        display: none;
    }


    .seller-order-totals {
        grid-template-columns: 1fr 1fr;
    }


    .seller-order-footer {
        align-items: stretch;
        flex-direction: column;
    }


    .seller-rate-button {
        text-align: center;
    }


    .seller-review-header,
    .seller-review-rating,
    .seller-review-writing,
    .seller-review-products {
        padding-right: 24px;
        padding-left: 24px;
    }


    .seller-review-actions {
        padding-right: 24px;
        padding-left: 24px;
    }

}


@media (max-width: 500px) {

    .seller-order-item {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }


    .seller-order-item-price {
        grid-column: 1 / -1;

        padding-top: 7px;

        border-top: 1px solid #eceef2;
    }


    .seller-review-stars button {
        width: 41px;
        height: 44px;

        font-size: 2.55rem;
    }


    .seller-review-products-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 4px;
    }

}



/* ==========================================================================
   MESSAGING SYSTEM
   ========================================================================== */


/* ==========================================================================
   Messaging Theme Compatibility

   This section allows the same messaging CSS to operate in:

   - Customer light theme
   - Business dark teal theme
   - Management dark purple theme
   ========================================================================== */

.message-page,
.message-compose-page {

    --message-bg:
        var(
            --bg-card,
            #ffffff
        );

    --message-bg-secondary:
        var(
            --bg-secondary,
            #f6f7fb
        );

    --message-bg-input:
        var(
            --bg-input,
            #ffffff
        );

    --message-bg-hover:
        var(
            --bg-card-hover,
            #f8f9fc
        );

    --message-border:
        var(
            --border,
            #e1e5ec
        );

    --message-border-strong:
        var(
            --border-light,
            #ccd2dc
        );

    --message-text:
        var(
            --text-main,
            #20242d
        );

    --message-text-secondary:
        var(
            --text-secondary,
            #68717e
        );

    --message-text-muted:
        var(
            --text-muted,
            #9299a5
        );

    --message-accent:
        var(
            --accent,
            var(
                --purple,
                #4869cf
            )
        );

    --message-accent-hover:
        var(
            --accent-hover,
            var(
                --purple-hover,
                #3858bc
            )
        );

    --message-success:
        var(
            --success,
            #4f9b70
        );

    --message-danger:
        var(
            --danger,
            #c3545e
        );

}


/* ==========================================================================
   Message Page
   ========================================================================== */

.message-page,
.message-compose-page {
    width: 100%;
}


.message-back-link {
    display: inline-flex;
    align-items: center;

    margin-bottom: 18px;

    color: var(--message-accent);

    font-size: 0.84rem;
    font-weight: 700;

    text-decoration: none;
}


.message-back-link:hover {
    color: var(--message-accent-hover);
}


/* ==========================================================================
   Inbox Container
   ========================================================================== */

.message-inbox {
    overflow: hidden;

    background: var(--message-bg);

    border: 1px solid var(--message-border);
    border-radius: 12px;

    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.06);
}


/* ==========================================================================
   Inbox Rows
   ========================================================================== */

.message-inbox-row {
    display: grid;

    grid-template-columns:
        44px
        minmax(0, 1fr)
        auto
        24px;

    align-items: center;

    gap: 16px;

    min-height: 82px;

    padding: 16px 18px;

    border-bottom:
        1px solid var(--message-border);

    color: var(--message-text);

    text-decoration: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.message-inbox-row:last-child {
    border-bottom: none;
}


.message-inbox-row:hover {
    background: var(--message-bg-hover);

    color: var(--message-text);
}


/* ==========================================================================
   Inbox Icon
   ========================================================================== */

.message-inbox-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    background:
        color-mix(
            in srgb,
            var(--message-accent) 13%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--message-accent) 28%,
            transparent
        );

    border-radius: 50%;

    color: var(--message-accent);

    font-size: 0.78rem;
    font-weight: 800;
}


/* ==========================================================================
   Inbox Main Information
   ========================================================================== */

.message-inbox-main {
    min-width: 0;
}


.message-inbox-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 5px;
}


.message-inbox-title {
    overflow: hidden;

    color: var(--message-text);

    font-size: 0.92rem;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.message-inbox-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    color: var(--message-text-muted);

    font-size: 0.72rem;
}


.message-meta-separator {
    opacity: 0.65;
}


.message-unassigned {
    color: var(--message-danger);

    font-weight: 700;
}


/* ==========================================================================
   Inbox Activity
   ========================================================================== */

.message-inbox-activity {
    display: flex;
    flex-direction: column;

    min-width: 100px;

    color: var(--message-text-muted);

    font-size: 0.68rem;

    text-align: right;
}


.message-inbox-activity-label {
    margin-bottom: 2px;

    font-size: 0.58rem;
    font-weight: 700;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


.message-inbox-activity strong {
    color: var(--message-text-secondary);

    font-size: 0.72rem;
}


.message-inbox-arrow {
    color: var(--message-text-muted);

    font-size: 1.5rem;
    line-height: 1;

    transition:
        color 0.15s ease,
        transform 0.15s ease;
}


.message-inbox-row:hover
.message-inbox-arrow {
    color: var(--message-accent);

    transform: translateX(2px);
}


/* ==========================================================================
   Message Status
   ========================================================================== */

.message-status {
    display: inline-flex;
    align-items: center;

    padding: 3px 8px;

    border-radius: 999px;

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.025em;

    text-transform: uppercase;
}


.message-status-open {
    background:
        color-mix(
            in srgb,
            var(--message-success) 13%,
            transparent
        );

    color: var(--message-success);
}


.message-status-closed {
    background:
        color-mix(
            in srgb,
            var(--message-text-muted) 13%,
            transparent
        );

    color: var(--message-text-muted);
}


/* ==========================================================================
   Empty State
   ========================================================================== */

.message-empty-state {
    padding: 55px 25px;

    color: var(--message-text-secondary);

    text-align: center;
}


.message-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin: 0 auto 16px;

    background:
        color-mix(
            in srgb,
            var(--message-accent) 10%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--message-accent) 20%,
            transparent
        );

    border-radius: 50%;

    color: var(--message-accent);

    font-size: 1.25rem;
}


.message-empty-state h2 {
    margin:
        0
        0
        7px;

    color: var(--message-text);

    font-size: 1rem;
}


.message-empty-state p {
    max-width: 520px;

    margin:
        0
        auto
        18px;

    color: var(--message-text-secondary);

    font-size: 0.82rem;
}


/* ==========================================================================
   Conversation Header
   ========================================================================== */

.message-thread-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 20px;
}


.message-thread-heading {
    min-width: 0;
}


.message-thread-heading h1 {
    margin:
        3px
        0
        5px;

    color: var(--message-text);

    font-size: 1.65rem;
}


.message-thread-type {
    color: var(--message-accent);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}


.message-thread-meta {
    color: var(--message-text-muted);

    font-size: 0.74rem;
}


.message-thread-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}


.message-thread-header-actions form {
    margin: 0;
}


.message-assignment {
    padding: 6px 10px;

    background: var(--message-bg);

    border: 1px solid var(--message-border);
    border-radius: 7px;

    color: var(--message-text-secondary);

    font-size: 0.7rem;
}


/* ==========================================================================
   Conversation Context
   ========================================================================== */

.message-context-card {
    display: grid;

    grid-template-columns:
        minmax(160px, 1.2fr)
        repeat(
            auto-fit,
            minmax(130px, 1fr)
        );

    gap: 1px;

    overflow: hidden;

    margin-bottom: 24px;

    background: var(--message-border);

    border: 1px solid var(--message-border);
    border-radius: 10px;
}


.message-context-main,
.message-context-field {
    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 14px 16px;

    background: var(--message-bg);
}


.message-context-label,
.message-context-field span {
    color: var(--message-text-muted);

    font-size: 0.59rem;
    font-weight: 800;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.message-context-main strong,
.message-context-field strong {
    color: var(--message-text);

    font-size: 0.78rem;
}


/* ==========================================================================
   Message Thread
   ========================================================================== */

.message-thread {
    display: flex;
    flex-direction: column;

    gap: 13px;

    margin-bottom: 24px;
    padding: 22px;

    background: var(--message-bg-secondary);

    border: 1px solid var(--message-border);
    border-radius: 12px;
}


.message-bubble-row {
    display: flex;

    justify-content: flex-start;
}


.message-bubble-row-own {
    justify-content: flex-end;
}


.message-bubble {
    width:
        min(
            720px,
            82%
        );

    overflow: hidden;

    background: var(--message-bg);

    border: 1px solid var(--message-border);
    border-radius: 11px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.035);
}


.message-bubble-row-own
.message-bubble {
    background:
        color-mix(
            in srgb,
            var(--message-accent) 9%,
            var(--message-bg)
        );

    border-color:
        color-mix(
            in srgb,
            var(--message-accent) 30%,
            var(--message-border)
        );
}


.message-bubble-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        10px
        13px
        8px;

    border-bottom:
        1px solid var(--message-border);
}


.message-bubble-header strong {
    color: var(--message-text);

    font-size: 0.7rem;
}


.message-bubble-header span {
    color: var(--message-text-muted);

    font-size: 0.61rem;
}


.message-bubble-body {
    padding: 13px;

    color: var(--message-text-secondary);

    font-size: 0.8rem;
    line-height: 1.65;

    overflow-wrap: anywhere;
}


/* ==========================================================================
   Reply Card
   ========================================================================== */

.message-reply-card {
    padding: 20px;

    background: var(--message-bg);

    border: 1px solid var(--message-border);
    border-radius: 12px;

    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.035);
}


.message-reply-heading {
    margin-bottom: 14px;
}


.message-reply-heading h2 {
    margin:
        0
        0
        3px;

    color: var(--message-text);

    font-size: 0.95rem;
}


.message-reply-heading p {
    margin: 0;

    color: var(--message-text-muted);

    font-size: 0.72rem;
}


.message-reply-input {
    width: 100%;

    min-height: 135px;

    padding: 12px 13px;

    background: var(--message-bg-input);

    border: 1px solid var(--message-border-strong);
    border-radius: 8px;

    color: var(--message-text);

    font: inherit;
    font-size: 0.82rem;

    resize: vertical;
}


.message-reply-input:focus {
    outline: none;

    border-color: var(--message-accent);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--message-accent) 14%,
            transparent
        );
}


.message-reply-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 12px;
}


/* ==========================================================================
   Closed Conversation
   ========================================================================== */

.message-closed-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 16px 18px;

    background: var(--message-bg-secondary);

    border: 1px solid var(--message-border);
    border-radius: 9px;

    color: var(--message-text-secondary);
}


.message-closed-notice strong {
    color: var(--message-text);
}


.message-closed-notice span {
    color: var(--message-text-muted);

    font-size: 0.75rem;
}


/* ==========================================================================
   Compose Card
   ========================================================================== */

.message-compose-card {
    overflow: hidden;

    background: var(--message-bg);

    border: 1px solid var(--message-border);
    border-radius: 12px;

    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.055);
}


.message-compose-notice {
    margin-bottom: 20px;
    padding: 16px 18px;

    background:
        color-mix(
            in srgb,
            var(--message-accent) 8%,
            var(--message-bg)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--message-accent) 25%,
            var(--message-border)
        );

    border-radius: 10px;
}


.message-compose-notice strong {
    color: var(--message-text);
}


.message-compose-notice p {
    margin:
        5px
        0
        0;

    color: var(--message-text-secondary);

    font-size: 0.78rem;
    line-height: 1.55;
}


.message-compose-card > form {
    padding: 24px;
}


/* ==========================================================================
   Compose Sections
   ========================================================================== */

.message-compose-section {
    padding: 22px;

    border-bottom:
        1px solid var(--message-border);
}


.message-compose-section:last-child {
    border-bottom: none;
}


.message-compose-section-heading {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    margin-bottom: 17px;
}


.message-compose-step {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 30px;
    height: 30px;

    background: var(--message-accent);

    border-radius: 50%;

    color:
        var(
            --bg-main,
            #ffffff
        );

    font-size: 0.72rem;
    font-weight: 800;
}


.message-compose-section-heading h2 {
    margin: 0;

    color: var(--message-text);

    font-size: 0.95rem;
}


.message-compose-section-heading p {
    margin:
        3px
        0
        0;

    color: var(--message-text-muted);

    font-size: 0.72rem;
}


/* ==========================================================================
   Recipient Search
   ========================================================================== */

.message-recipient-search {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 9px;
}


.message-recipient-search input {
    width: 100%;

    min-height: 42px;

    padding: 9px 12px;

    background: var(--message-bg-input);

    border: 1px solid var(--message-border-strong);
    border-radius: 7px;

    color: var(--message-text);

    font: inherit;
}


.message-recipient-search input:focus {
    outline: none;

    border-color: var(--message-accent);
}


/* ==========================================================================
   Recipient Results
   ========================================================================== */

.message-recipient-results {
    border-bottom:
        1px solid var(--message-border);
}


.message-recipient-row {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px;

    padding: 12px 22px;

    border-bottom:
        1px solid var(--message-border);
}


.message-recipient-row:last-child {
    border-bottom: none;
}


.message-recipient-row:hover {
    background: var(--message-bg-hover);
}


.message-recipient-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    background:
        color-mix(
            in srgb,
            var(--message-accent) 12%,
            transparent
        );

    border-radius: 50%;

    color: var(--message-accent);

    font-size: 0.75rem;
    font-weight: 800;
}


.message-recipient-info {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.message-recipient-info strong {
    color: var(--message-text);

    font-size: 0.78rem;
}


.message-recipient-info span {
    overflow: hidden;

    color: var(--message-text-muted);

    font-size: 0.67rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================================
   Compose Message Form
   ========================================================================== */

.message-compose-message[hidden] {
    display: none;
}


.message-compose-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 20px;
}


/* ==========================================================================
   Responsive Messaging
   ========================================================================== */

@media (max-width: 800px) {

    .message-inbox-row {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            20px;
    }


    .message-inbox-activity {
        display: none;
    }


    .message-thread-header {
        flex-direction: column;
    }


    .message-thread-header-actions {
        width: 100%;
    }


    .message-context-card {
        grid-template-columns: 1fr;
    }


    .message-bubble {
        width: 90%;
    }

}


@media (max-width: 600px) {

    .message-inbox-row {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap: 11px;

        padding: 14px 12px;
    }


    .message-inbox-icon {
        width: 34px;
        height: 34px;
    }


    .message-inbox-arrow {
        display: none;
    }


    .message-inbox-title {
        white-space: normal;
    }


    .message-thread {
        padding: 12px;
    }


    .message-bubble {
        width: 96%;
    }


    .message-bubble-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 2px;
    }


    .message-recipient-search {
        grid-template-columns: 1fr;
    }


    .message-recipient-row {
        grid-template-columns:
            36px
            minmax(0, 1fr);
    }


    .message-recipient-row .button {
        grid-column:
            1
            /
            -1;

        width: 100%;
    }


    .message-compose-actions,
    .message-reply-actions {
        align-items: stretch;
        flex-direction: column;
    }


    .message-compose-actions .button,
    .message-reply-actions .button {
        width: 100%;
    }


    .message-closed-notice {
        align-items: flex-start;
        flex-direction: column;

        gap: 4px;
    }

}


/* ==========================================================================
   CUSTOMER MESSAGE INBOX
   ========================================================================== */


/* ==========================================================================
   Page Header
   ========================================================================== */

.message-inbox-page-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 24px;

}


.message-inbox-page-heading {

    min-width: 0;

}


.message-page-kicker {

    display: block;

    margin-bottom: 6px;

    color: #5878d8;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.message-inbox-page-heading h1 {

    margin: 0;

    color: #20242d;

    font-size: 2.1rem;

    font-weight: 800;

    letter-spacing: -0.035em;

}


.message-inbox-page-heading p {

    max-width: 650px;

    margin: 8px 0 0;

    color: #747c89;

    font-size: 0.9rem;

    line-height: 1.5;

}


.message-inbox-page-actions {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}



/* ==========================================================================
   Inbox Toolbar
   ========================================================================== */

.message-inbox-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 12px 17px;

    background: #f8f9fb;

    border:
        1px solid
        #e1e5ec;

    border-bottom: 0;

    border-radius:
        12px
        12px
        0
        0;

}


.message-inbox-toolbar-left {

    display: flex;

    align-items: center;

    gap: 10px;

}


.message-inbox-toolbar-left strong {

    color: #353c47;

    font-size: 0.8rem;

}


.message-inbox-toolbar-left span {

    padding: 3px 8px;

    background: #e9edf7;

    border-radius: 999px;

    color: #65718f;

    font-size: 0.65rem;

    font-weight: 700;

}


.message-inbox-toolbar-right {

    display: flex;

    align-items: center;

}


.message-inbox-toolbar-hint {

    color: #979da8;

    font-size: 0.68rem;

}



/* ==========================================================================
   Integrate Inbox With Toolbar
   ========================================================================== */

.message-inbox-toolbar + .message-inbox {

    border-top-left-radius: 0;

    border-top-right-radius: 0;

}



/* ==========================================================================
   Customer Inbox Rows
   ========================================================================== */

.message-page .message-inbox-row {

    min-height: 88px;

    padding:
        17px
        19px;

}


.message-page .message-inbox-row:hover {

    background: #f8f9fc;

}


.message-page .message-inbox-title {

    color: #303641;

    font-size: 0.94rem;

    font-weight: 750;

}


.message-page .message-inbox-meta {

    margin-top: 1px;

    color: #8a919d;

}



/* ==========================================================================
   Last Activity Time
   ========================================================================== */

.message-inbox-time {

    display: block;

    margin-top: 2px;

    color: #9ca2ac;

    font-size: 0.64rem;

    font-weight: 500;

}



/* ==========================================================================
   Customer Message Type Icon
   ========================================================================== */

.message-page .message-inbox-icon {

    background: #edf1fb;

    border-color: #d7dff4;

    color: #536fbe;

}



/* ==========================================================================
   Customer Status Badges
   ========================================================================== */

.message-page .message-status-open {

    background: #edf7f1;

    color: #458161;

}


.message-page .message-status-closed {

    background: #f0f1f4;

    color: #858b95;

}



/* ==========================================================================
   Inbox Empty State
   ========================================================================== */

.message-page .message-empty-state {

    min-height: 300px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}


.message-page .message-empty-state .button {

    margin-top: 2px;

}



/* ==========================================================================
   Responsive Customer Inbox
   ========================================================================== */

@media (max-width: 800px) {

    .message-inbox-page-header {

        align-items: stretch;

        flex-direction: column;

        gap: 18px;

    }


    .message-inbox-page-actions {

        width: 100%;

    }


    .message-inbox-page-actions .button {

        width: 100%;

    }


    .message-inbox-toolbar-right {

        display: none;

    }

}



@media (max-width: 600px) {

    .message-inbox-toolbar {

        padding:
            11px
            13px;

    }


    .message-page .message-inbox-row {

        grid-template-columns:
            38px
            minmax(0, 1fr)
            18px;

        gap: 11px;

        padding:
            14px
            13px;

    }


    .message-page .message-inbox-icon {

        width: 36px;

        height: 36px;

    }


    .message-page .message-inbox-title-row {

        gap: 6px;

    }


    .message-page .message-inbox-title {

        max-width: 100%;

        font-size: 0.86rem;

    }


    .message-page .message-inbox-meta {

        gap: 4px;

        font-size: 0.66rem;

    }

}



/* ==========================================================================
   SELLER ORDER ACTIONS
   ========================================================================== */


/* ==========================================================================
   Action Group
   ========================================================================== */

.seller-order-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 9px;

}



/* ==========================================================================
   Contact Seller
   ========================================================================== */

.seller-contact-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding:
        8px
        13px;

    background: #ffffff;

    border:
        1px solid
        #cbd3e3;

    border-radius: 7px;

    color: #536db9;

    font-size: 0.72rem;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;

}


.seller-contact-button:hover {

    background: #f2f5fc;

    border-color: #aebce0;

    color: #3f5aa9;

}


.seller-contact-button:focus {

    outline: none;

    border-color: #5878d8;

    box-shadow:
        0 0 0 3px
        rgba(88, 120, 216, 0.10);

}



/* ==========================================================================
   Normalize Seller Action Heights
   ========================================================================== */

.seller-order-actions .seller-rate-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    line-height: 1;

}



/* ==========================================================================
   Completed Rating Inside Action Group
   ========================================================================== */

.seller-order-actions .seller-rating-complete {

    min-height: 34px;

    padding:
        5px
        10px;

    background: #fffaf0;

    border:
        1px solid
        #eee0b3;

    border-radius: 7px;

}



/* ==========================================================================
   Responsive Seller Actions
   ========================================================================== */

@media (max-width: 700px) {

    .seller-order-actions {

        width: 100%;

        justify-content: flex-start;

    }


    .seller-contact-button,
    .seller-order-actions .seller-rate-button {

        flex:
            1
            1
            150px;

        text-align: center;

    }


    .seller-order-actions .seller-rating-complete {

        flex:
            1
            1
            150px;

        justify-content: center;

    }

}



@media (max-width: 480px) {

    .seller-order-actions {

        align-items: stretch;

        flex-direction: column;

    }


    .seller-contact-button,
    .seller-order-actions .seller-rate-button,
    .seller-order-actions .seller-rating-complete {

        width: 100%;

        flex: none;

    }


    .seller-order-actions .seller-rating-complete {

        justify-content: center;

    }

}

/* ==========================================================================
   CUSTOMER MESSAGE CONVERSATION
   ========================================================================== */


.customer-message-thread-page {

    width: min(900px, 100%);

    margin: 0 auto;

}



/* ==========================================================================
   Conversation Header
   ========================================================================== */

.customer-message-header {

    margin-bottom: 20px;

}


.customer-message-header-main h1 {

    margin:
        4px
        0
        8px;

    color: #20242d;

    font-size: 1.9rem;

    font-weight: 800;

    letter-spacing: -0.035em;

}


.customer-message-header-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    color: #7b828e;

    font-size: 0.76rem;

}


.customer-message-header-meta strong {

    color: #515966;

}



/* ==========================================================================
   Order Context
   ========================================================================== */

.customer-message-order-context {

    display: grid;

    grid-template-columns:
        42px
        minmax(160px, 1.2fr)
        minmax(140px, 1fr)
        minmax(110px, auto);

    align-items: center;

    gap: 15px;

    margin-bottom: 18px;

    padding:
        13px
        16px;

    background: #ffffff;

    border: 1px solid #dfe3ea;

    border-radius: 10px;

}


.customer-message-order-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    background: #edf1fb;

    border: 1px solid #d7dff4;

    border-radius: 50%;

    color: #536fbe;

    font-size: 0.72rem;

    font-weight: 800;

}


.customer-message-order-main,
.customer-message-order-field {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.customer-message-order-main span,
.customer-message-order-field span {

    color: #969da8;

    font-size: 0.59rem;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}


.customer-message-order-main strong,
.customer-message-order-field strong {

    color: #3d4450;

    font-size: 0.76rem;

}



/* ==========================================================================
   Conversation Panel
   ========================================================================== */

.customer-conversation-panel {

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dce1e9;

    border-radius: 14px;

    box-shadow:
        0 5px 20px
        rgba(30, 38, 55, 0.045);

}



/* ==========================================================================
   Conversation Bar
   ========================================================================== */

.customer-conversation-bar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 54px;

    padding:
        12px
        18px;

    background: #ffffff;

    border-bottom: 1px solid #e2e5eb;

}


.customer-conversation-bar > div:first-child {

    display: flex;

    align-items: center;

    gap: 9px;

}


.customer-conversation-bar strong {

    color: #353c47;

    font-size: 0.8rem;

}


.customer-conversation-bar > div:first-child > span {

    padding:
        3px
        8px;

    background: #f0f2f6;

    border-radius: 999px;

    color: #828996;

    font-size: 0.63rem;

    font-weight: 700;

}



/* ==========================================================================
   Conversation Legend
   ========================================================================== */

.customer-conversation-legend {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #969da8;

    font-size: 0.64rem;

}


.customer-conversation-legend span {

    display: inline-flex;

    align-items: center;

    gap: 5px;

}


.customer-conversation-legend span::before {

    content: "";

    width: 8px;

    height: 8px;

    border-radius: 50%;

}


.conversation-legend-other::before {

    background: #d9dee7;

}


.conversation-legend-you::before {

    background: #5878d8;

}



/* ==========================================================================
   Message Thread Area
   ========================================================================== */

.customer-message-thread {

    display: flex;

    flex-direction: column;

    gap: 24px;

    min-height: 280px;

    padding:
        30px
        26px
        34px;

    background:
        linear-gradient(
            180deg,
            #f8f9fb 0%,
            #f5f7fa 100%
        );

}



/* ==========================================================================
   Message Row
   ========================================================================== */

.customer-message-row {

    display: flex;

    align-items: flex-end;

    justify-content: flex-start;

    gap: 10px;

}


.customer-message-row-own {

    justify-content: flex-end;

}



/* ==========================================================================
   Sender Avatar
   ========================================================================== */

.customer-message-avatar {

    display: flex;

    align-items: center;

    justify-content: center;

    flex:
        0
        0
        34px;

    width: 34px;

    height: 34px;

    margin-bottom: 2px;

    background: #ffffff;

    border: 1px solid #d8dde6;

    border-radius: 50%;

    color: #68717f;

    font-size: 0.7rem;

    font-weight: 800;

    box-shadow:
        0 2px 5px
        rgba(25, 32, 45, 0.04);

}


.customer-message-avatar-own {

    background: #5878d8;

    border-color: #5878d8;

    color: #ffffff;

}



/* ==========================================================================
   Message Group
   ========================================================================== */

.customer-message-group {

    display: flex;

    flex-direction: column;

    width:
        min(
            650px,
            76%
        );

}


.customer-message-row-own
.customer-message-group {

    align-items: flex-end;

}



/* ==========================================================================
   Sender / Timestamp
   ========================================================================== */

.customer-message-sender {

    display: flex;

    align-items: center;

    gap: 8px;

    margin:
        0
        4px
        6px;

}


.customer-message-sender-own {

    justify-content: flex-end;

}


.customer-message-sender span {

    color: #4c5460;

    font-size: 0.7rem;

    font-weight: 750;

}


.customer-message-sender time {

    color: #9ba1ab;

    font-size: 0.6rem;

}



/* ==========================================================================
   Message Bubble
   ========================================================================== */

.customer-message-bubble {

    position: relative;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #d9dee6;

    border-radius:
        4px
        14px
        14px
        14px;

    box-shadow:
        0 2px 7px
        rgba(25, 32, 45, 0.035);

}


.customer-message-bubble-own {

    background: #526fca;

    border-color: #526fca;

    border-radius:
        14px
        4px
        14px
        14px;

    box-shadow:
        0 3px 9px
        rgba(72, 105, 207, 0.13);

}



/* ==========================================================================
   Message Body
   ========================================================================== */

.customer-message-body {

    padding:
        13px
        16px;

    color: #424955;

    font-size: 0.82rem;

    line-height: 1.65;

    overflow-wrap: anywhere;

}


.customer-message-bubble-own
.customer-message-body {

    color: #ffffff;

}



/* ==========================================================================
   Empty Thread
   ========================================================================== */

.customer-message-thread-empty {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    min-height: 220px;

    color: #9097a2;

    text-align: center;

}


.customer-message-thread-empty strong {

    margin-bottom: 4px;

    color: #555d69;

    font-size: 0.85rem;

}


.customer-message-thread-empty span {

    font-size: 0.72rem;

}



/* ==========================================================================
   Reply Composer
   ========================================================================== */

.customer-message-composer {

    overflow: hidden;

    margin-top: 18px;

    background: #ffffff;

    border: 1px solid #dce1e9;

    border-radius: 14px;

    box-shadow:
        0 5px 20px
        rgba(30, 38, 55, 0.04);

}



/* ==========================================================================
   Composer Header
   ========================================================================== */

.customer-message-composer-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        14px
        18px;

    background: #fafbfc;

    border-bottom: 1px solid #e3e6ec;

}


.customer-message-composer-header > div {

    display: flex;

    align-items: baseline;

    gap: 9px;

}


.customer-message-composer-header strong {

    color: #353c47;

    font-size: 0.8rem;

}


.customer-message-composer-header span {

    color: #969da8;

    font-size: 0.66rem;

}



/* ==========================================================================
   Composer Form
   ========================================================================== */

.customer-message-composer form {

    padding:
        18px;

}



/* ==========================================================================
   Composer Text Area Container
   ========================================================================== */

.customer-message-compose-field {

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #cbd2dd;

    border-radius: 10px;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;

}


.customer-message-compose-field:focus-within {

    border-color: #5878d8;

    box-shadow:
        0 0 0 3px
        rgba(88, 120, 216, 0.10);

}



/* ==========================================================================
   Composer Text Area
   ========================================================================== */

.customer-message-compose-field textarea {

    display: block;

    width: 100%;

    min-height: 150px;

    padding:
        15px
        16px;

    background: #ffffff;

    border: 0;

    color: #303743;

    font-family: inherit;

    font-size: 0.84rem;

    line-height: 1.6;

    resize: vertical;

}


.customer-message-compose-field textarea::placeholder {

    color: #a0a6b0;

}


.customer-message-compose-field textarea:focus {

    outline: none;

}



/* ==========================================================================
   Composer Footer
   ========================================================================== */

.customer-message-composer-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 12px;

}


.customer-message-compose-help {

    color: #969da8;

    font-size: 0.64rem;

}



/* ==========================================================================
   Send Button
   ========================================================================== */

.customer-message-send-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 39px;

    padding:
        9px
        15px;

    background: #4869cf;

    border: 1px solid #4869cf;

    border-radius: 8px;

    color: #ffffff;

    font: inherit;

    font-size: 0.75rem;

    font-weight: 750;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease;

}


.customer-message-send-button:hover {

    background: #3858bc;

    border-color: #3858bc;

}


.customer-message-send-button:active {

    transform: translateY(1px);

}


.customer-message-send-arrow {

    font-size: 1rem;

    line-height: 1;

}



/* ==========================================================================
   Closed Conversation
   ========================================================================== */

.customer-message-closed {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 18px;

    padding:
        16px
        18px;

    background: #f7f8fa;

    border: 1px solid #dfe3e9;

    border-radius: 11px;

}


.customer-message-closed-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 32px;

    height: 32px;

    background: #e9edf2;

    border-radius: 50%;

    color: #6f7783;

    font-size: 0.8rem;

    font-weight: 800;

}


.customer-message-closed > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.customer-message-closed strong {

    color: #4d5561;

    font-size: 0.77rem;

}


.customer-message-closed span {

    color: #8b929d;

    font-size: 0.68rem;

}



/* ==========================================================================
   Responsive Conversation
   ========================================================================== */

@media (max-width: 700px) {

    .customer-message-order-context {

        grid-template-columns:
            38px
            1fr;

    }


    .customer-message-order-field {

        grid-column: 2;

    }


    .customer-message-thread {

        gap: 20px;

        padding:
            22px
            14px
            26px;

    }


    .customer-message-group {

        width: 84%;

    }


    .customer-message-composer-footer {

        align-items: stretch;

        flex-direction: column;

    }


    .customer-message-send-button {

        width: 100%;

    }

}



@media (max-width: 500px) {

    .customer-message-header-main h1 {

        font-size: 1.55rem;

    }


    .customer-conversation-legend {

        display: none;

    }


    .customer-message-avatar {

        flex-basis: 30px;

        width: 30px;

        height: 30px;

    }


    .customer-message-group {

        width: calc(100% - 40px);

    }


    .customer-message-sender {

        align-items: flex-start;

        flex-direction: column;

        gap: 1px;

    }


    .customer-message-sender-own {

        align-items: flex-end;

    }


    .customer-message-body {

        padding:
            12px
            14px;

    }


    .customer-message-composer-header > div {

        align-items: flex-start;

        flex-direction: column;

        gap: 2px;

    }

}

/* ==========================================================================
   Marketplace Support
   ========================================================================== */

.message-compose-page {
    display: flex;
    flex-direction: column;

    gap: 20px;
}


/* ==========================================================================
   Support Information
   ========================================================================== */

.support-information {
    display: grid;

    grid-template-columns:
        44px
        minmax(0, 1fr);

    gap: 16px;

    align-items: start;
}

.support-information-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: #eef3f8;

    color: #34495e;

    font-size: 1.15rem;

    font-weight: 800;
}

.support-information-content h2 {
    margin:
        0
        0
        8px;

    font-size: 1rem;
}

.support-information-content p {
    margin:
        0
        0
        8px;

    line-height: 1.55;
}

.support-information-content p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   Order Context
   ========================================================================== */

.support-order-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 10px;
}

.support-order-label {
    margin-bottom: 4px;

    color: #727b87;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.support-order-heading h2 {
    margin: 0;

    font-size: 1.05rem;
}

.support-order-number {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 2px;
}

.support-order-number span {
    color: #727b87;

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;
}

.support-order-number strong {
    font-size: 0.9rem;
}


/* ==========================================================================
   Support Form
   ========================================================================== */

.support-form-heading {
    margin-bottom: 22px;
}

.support-form-heading h2 {
    margin:
        0
        0
        5px;

    font-size: 1.05rem;
}

.form-help {
    margin-top: 6px;

    color: #7a828d;

    font-size: 0.74rem;

    line-height: 1.4;
}


/* ==========================================================================
   Responsive Support Page
   ========================================================================== */

@media (max-width: 640px) {

    .support-order-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .support-order-number {
        align-items: flex-start;
    }

}


/* ==========================================================================
   Account Dashboard
   ========================================================================== */

.account-dashboard {
    display: flex;
    flex-direction: column;

    gap: 28px;
}


/* ==========================================================================
   Account Overview
   ========================================================================== */

.account-overview-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe3e9;
    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(28, 34, 44, 0.04);
}

.account-overview-heading {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 16px;

    padding: 22px 24px;
}

.account-avatar {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background: #20242c;

    color: #ffffff;

    font-size: 1.15rem;
    font-weight: 800;
}

.account-overview-label {
    margin-bottom: 4px;

    color: #747d89;

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.account-overview-identity h2 {
    margin: 0;

    color: #20242c;

    font-size: 1.15rem;
}

.account-overview-contact {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 5px;

    color: #68717d;

    font-size: 0.82rem;
}

.account-contact-separator {
    color: #a2a8b0;
}


/* ==========================================================================
   Primary Address
   ========================================================================== */

.account-primary-address {
    padding: 20px 24px 22px;

    background: #f8f9fb;

    border-top: 1px solid #e4e7eb;
}

.account-primary-address-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 13px;
}

.account-primary-address-heading h3 {
    margin: 0;

    color: #252a32;

    font-size: 0.95rem;
}

.account-inline-link {
    color: #315f95;

    font-size: 0.78rem;
    font-weight: 700;

    text-decoration: none;
}

.account-inline-link:hover {
    text-decoration: underline;
}

.account-address-content {
    display: flex;
    flex-direction: column;

    gap: 3px;

    color: #555f6d;

    font-size: 0.82rem;

    line-height: 1.45;
}

.account-address-content strong {
    color: #252a32;
}

.account-address-phone {
    margin-top: 4px;
}

.account-empty-address p {
    margin:
        0
        0
        12px;

    color: #68717d;
}


/* ==========================================================================
   Account Statistics
   ========================================================================== */

.account-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.account-stat-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 18px 20px;

    background: #ffffff;

    border: 1px solid #dfe3e9;
    border-radius: 12px;

    color: inherit;

    text-decoration: none;
}

.account-stat-link {
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.account-stat-link:hover {
    border-color: #bfc6cf;

    box-shadow:
        0 4px 12px rgba(28, 34, 44, 0.06);

    transform: translateY(-1px);
}

.account-stat-label {
    color: #747d89;

    font-size: 0.72rem;
    font-weight: 700;

    text-transform: uppercase;
}

.account-stat-value {
    margin:
        7px
        0
        3px;

    color: #20242c;

    font-size: 1.7rem;
    font-weight: 800;
}

.account-stat-description {
    color: #747d89;

    font-size: 0.76rem;
}

.account-stat-status {
    display: flex;

    align-items: center;

    gap: 7px;

    min-height: 41px;

    color: #2f855a;

    font-size: 1rem;
    font-weight: 800;
}

.account-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: currentColor;
}


/* ==========================================================================
   Account Sections
   ========================================================================== */

.account-recent-orders,
.account-management-section {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.account-section-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}

.account-section-heading h2 {
    margin: 0;

    color: #20242c;

    font-size: 1.15rem;
}


/* ==========================================================================
   Recent Orders
   ========================================================================== */

.account-order-list {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe3e9;
    border-radius: 12px;
}

.account-order-row {
    display: grid;

    grid-template-columns:
        minmax(160px, 1.2fr)
        minmax(140px, 1fr)
        minmax(110px, 0.8fr)
        minmax(100px, 0.7fr);

    align-items: center;

    gap: 18px;

    padding: 16px 18px;

    border-bottom: 1px solid #e6e9ed;
}

.account-order-row:last-child {
    border-bottom: 0;
}

.account-order-number {
    color: #20242c;

    font-size: 0.84rem;
    font-weight: 800;
}

.account-order-date {
    margin-top: 3px;

    color: #7a828d;

    font-size: 0.73rem;
}

.account-order-summary {
    display: flex;
    flex-direction: column;

    gap: 2px;

    font-size: 0.78rem;
}

.account-order-summary strong {
    color: #303640;
}

.account-order-summary span {
    color: #7a828d;
}

.account-order-status-badge {
    display: inline-flex;

    align-items: center;

    padding:
        5px
        9px;

    border-radius: 999px;

    background: #eef1f5;

    color: #555f6d;

    font-size: 0.7rem;
    font-weight: 800;
}

.account-order-status-paid,
.account-order-status-processing {
    background: #edf3fb;

    color: #315f95;
}

.account-order-status-completed {
    background: #e8f5ed;

    color: #28734a;
}

.account-order-status-cancelled,
.account-order-status-refunded {
    background: #f6eeee;

    color: #9a3838;
}

.account-order-total {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 2px;
}

.account-order-total span {
    color: #7a828d;

    font-size: 0.68rem;

    text-transform: uppercase;
}

.account-order-total strong {
    color: #20242c;

    font-size: 0.9rem;
}

.account-orders-footer {
    padding:
        10px
        2px
        0;

    font-size: 0.76rem;
}


/* ==========================================================================
   Empty Orders
   ========================================================================== */

.account-empty-orders {
    display: flex;
    flex-direction: column;

    align-items: center;

    padding:
        42px
        20px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #dfe3e9;
    border-radius: 12px;
}

.account-empty-orders-icon {
    margin-bottom: 10px;

    font-size: 1.7rem;
}

.account-empty-orders h3 {
    margin:
        0
        0
        6px;
}

.account-empty-orders p {
    max-width: 440px;

    margin:
        0
        0
        16px;

    color: #747d89;

    font-size: 0.82rem;

    line-height: 1.5;
}


/* ==========================================================================
   Account Management
   ========================================================================== */

.account-management-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.account-management-card {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 18px 20px;

    background: #ffffff;

    border: 1px solid #dfe3e9;
    border-radius: 12px;

    color: inherit;

    text-decoration: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.account-management-card:hover {
    border-color: #bfc6cf;

    box-shadow:
        0 4px 12px rgba(28, 34, 44, 0.06);

    transform: translateY(-1px);
}

.account-management-card h3 {
    margin:
        0
        0
        5px;

    color: #252a32;

    font-size: 0.92rem;
}

.account-management-card p {
    margin: 0;

    color: #747d89;

    font-size: 0.76rem;

    line-height: 1.45;
}

.account-management-arrow {
    flex: 0 0 auto;

    color: #747d89;

    font-size: 1.15rem;
}


/* ==========================================================================
   Responsive Account Dashboard
   ========================================================================== */

@media (max-width: 850px) {

    .account-stat-grid {
        grid-template-columns:
            1fr;
    }

    .account-order-row {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .account-order-summary {
        grid-column: 1;
    }

    .account-order-status {
        grid-column: 2;
        grid-row: 1;
    }

    .account-order-total {
        grid-column: 2;
        grid-row: 2;
    }

}


@media (max-width: 640px) {

    .account-overview-heading {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .account-overview-actions {
        grid-column:
            1
            /
            -1;
    }

    .account-primary-address-heading {
        flex-direction: column;

        gap: 8px;
    }

    .account-management-grid {
        grid-template-columns:
            1fr;
    }

    .account-order-row {
        display: flex;
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }

    .account-order-total {
        align-items: flex-start;
    }

}


/* ========================================================================
   WarWeb Launch: Customer Shipment Tracking
   Append to sales_clients/static/sales_clients/css/sales_clients.css
   ======================================================================== */

.customer-shipment-stack {
    display: grid;
    gap: 10px;
    flex: 1;
}

.customer-shipment-card {
    padding: 14px 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #ffffff;
}

.customer-shipment-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.customer-shipment-head > div {
    display: grid;
    gap: 3px;
}

.customer-shipment-head span,
.customer-shipment-meta {
    font-size: 0.88rem;
}

.customer-shipment-status {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.07);
    font-weight: 700;
    white-space: nowrap;
}

.customer-shipment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
    opacity: 0.72;
}

.customer-track-button {
    display: inline-flex;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid #111111;
    border-radius: 8px;
    color: #111111;
    text-decoration: none;
    font-weight: 800;
}

.customer-track-button:hover {
    background: #111111;
    color: #ffffff;
}

@media (max-width: 620px) {
    .customer-shipment-head {
        flex-direction: column;
    }
}