/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
body {
    font-family: sans-serif;
}

.text-success {
    color: green;
}

.text-danger {
    color: red;
}

#page-header .page-header__content {
    background-color: #386c61;
    border-radius: 5px;
    color: #fff;
    padding: 1rem;
    margin-top: 0.75rem;
}

#page-header .page-header__content .page-header__title,
#page-header .page-header__content .page-header__description {
    color: #fff;
}

.dokan-razorpay-modals.iziModal,
.dokan-razorpay-modals.iziModal h2.dokan-popup-title.dokan-razorpay-account-title {
    color: #040404;
}

.dokan-razorpay-modals.iziModal .dokan-form-group #dokan_razorpay_vendor_register_button {
    background-color: #0D94FB;
}

.dokan-label.pending {
    background-color: #F9B326 !important;
}

/* Not on the Products pages, whose dropdowns attach to their box; see tt-products-skin.css. */
body:not(.tt-productsSkin) .select2-container--open .select2-dropdown--below {
    margin-top: 0.5rem !important;
}

input[type="submit"].dokan-btn-theme.dokan-btn-danger,
a.dokan-btn-theme.dokan-btn-danger,
.dokan-btn-theme.dokan-btn-danger {
    color: #fff !important;
    background-color: #d9534f !important;
    border-color: #d43f3a !important;
}

.woocommerce-ellipsis-menu button:hover,
.woocommerce-ellipsis-menu button:focus {
    background-color: transparent;
}

.woocommerce-filters-date__tabs button:hover,
.woocommerce-filters-date__tabs button:focus {
    background-color: transparent;
}

.woocommerce-filters-filter .woocommerce-filters-date__text {
    color: #040404;
    font-weight: 700;
}

.woocommerce-filters-date__tabs .woocommerce-segmented-selection__container {
    background-color: #fff;
}

.woocommerce-filters-date__tabs .woocommerce-segmented-selection__container .woocommerce-segmented-selection__item {
    height: 2.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.woocommerce-filters-date__tabs .woocommerce-segmented-selection__container .woocommerce-segmented-selection__item label span.woocommerce-segmented-selection__label {
    background-color: #fff;
    padding: 0;
    height: unset;
    display: inline-block;
}

.woocommerce-filters-date__tabs .woocommerce-calendar .woocommerce-calendar__inputs .woocommerce-calendar__input svg.calendar-icon {
    display: none;
}

/* Tweak Dokan permalink edit buttons layout */
.product-edit-container #edit-slug-box {
    display: block;
}

.product-edit-container #edit-slug-box #edit-slug-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.product-edit-container #edit-slug-box #edit-slug-buttons button.button {
    margin: 0;
    line-height: 1.4 !important;
    padding: 4px 12px;
}

.product-edit-container #edit-slug-box #edit-slug-buttons button.button.save {
    background-color: var(--dokan-button-background-color, #7047EB);
    border-color: var(--dokan-button-background-color, #7047EB);
    color: #fff;
}

/*
 * The product gallery's tiles are drawn by the Tapper Brews product form now,
 * in vendor/dokan_dashboard_products/css/tt-product-form.css. The purple
 * dashed tiles that were here outranked those rules from every page on the
 * site, and on Dokan's own form (the fork's fallback) Dokan's tiles are fine.
 */

.tapper-tea-rma-requests .rma-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Quick view modal backdrop */
.quick-view-modal .modal__backdrop {
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 1;
}

.quick-view-modal .modal__quickview {
    border-radius: 12px;
    overflow: hidden;
}

.tapper-tea-rma-requests .rma-actions .button {
    font-size: small;
    line-height: 1.5;
    padding: 5px 12px;
    min-width: unset;
    border-radius: 4px;
}

.tapper-tea-rma-requests .tapper-tea-rma-delete-form {
    display: inline-flex;
    margin: 0;
}

.tapper-tea-rma-requests .tapper-tea-rma-delete-form .button {
    background-color: #d9534f;
}

.tappertea-rma-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.tappertea-rma-status-actions .tt-status-action-button {
    font-size: 13px;
    padding: 7px 12px;
    background: #f4f8ff;
    color: #1b3350;
    border-color: transparent;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.tappertea-rma-status-actions .tt-status-action-button[data-status="processing"],
.tappertea-rma-status-actions .tt-status-action-button[data-status="reviewing"] {
    background: #1f5ba6;
    color: #fff;
}

.tappertea-rma-status-actions .tt-status-action-button[data-status="rejected"] {
    background: #cf3d3d;
    color: #fff;
}

.tappertea-rma-status-actions .tt-status-action-button[data-status="completed"] {
    background: #389c4b;
    color: #fff;
}

.tappertea-rma-status-actions .tt-status-action-button[data-status="new"] {
    background: #f8c145;
    color: #1b3350;
}

.dokan-status-update-panel {
    border-color: rgba(35, 54, 85, 0.2);
    box-shadow: 0 24px 45px rgba(15, 40, 80, 0.08);
    background: linear-gradient(180deg, #fff, #f8fbff);
}

.dokan-status-update-panel .dokan-panel-heading {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.tappertea-rma-status-actions .tt-status-action-button {
    box-shadow: 0 4px 10px rgba(35, 54, 85, 0.08);
    border-radius: 999px;
}

.tappertea-rma-status-actions .tt-status-action-button:hover {
    background: var(--dokan-button-background-color, #386c61);
    color: #fff;
    border-color: var(--dokan-button-background-color, #386c61);
    transform: translateY(-2px);
}

.tappertea-rma-status-actions .tt-status-action-button:disabled,
.tappertea-rma-status-actions .tt-status-action-button.tt-status-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    background: #d8dae8;
    color: #9ca4bb;
}

.tappertea-rma-current-status {
    font-weight: 600;
    margin: 0;
    padding: 0 0 4px;
    color: rgba(14, 32, 63, 0.85);
}

.tappertea-rma-refund-panel {
    margin-top: 10px;
}

.tappertea-rma-refund-panel .dokan-panel-body {
    padding: 15px;
    background: #fff;
}

.tappertea-rma-refund-actions {
    display: flex;
    gap: 8px;
}

.tappertea-rma-refund-actions .dokan-btn {
    background: #fffbf0;
    color: #7c4f14;
    border-color: #f8dab3;
}

.tappertea-rma-refund-actions .dokan-btn.dokan-send-refund-request:hover,
.tappertea-rma-refund-actions .dokan-btn.tappertea-send-full-refund:hover {
    background: #7c4f14;
    color: #fff;
    border-color: #7c4f14;
}

.tappertea-rma-refund-actions .dokan-btn[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

.tt-rma-status-label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.tt-rma-status-new {
    background: #f8c145;
    color: #1b3350;
}

.tt-rma-status-processing,
.tt-rma-status-reviewing {
    background: #1f5ba6;
    color: #fff;
}

.tt-rma-status-rejected {
    background: #cf3d3d;
    color: #fff;
}

.tt-rma-status-completed {
    background: #389c4b;
    color: #fff;
}

.tt-rma-type-label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.tt-rma-type-refund {
    background: #ffe4e4;
    color: #a83232;
}

.tt-rma-type-replace {
    background: #e8f5ff;
    color: #1f5ba6;
}

.tt-rma-type-coupon {
    background: #fff4e0;
    color: #a85b00;
}

.tappertea-rma-refund-message {
    margin-top: 10px;
}

input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
input[type="checkbox"]:checked:focus,
input[type="checkbox"]:checked:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    --tw-ring-offset-width: 0 !important;
    --tw-ring-color: transparent !important;
}

.tt-dokan-update-customer-to-vendor input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/*
 * Customer order action buttons.
 *
 * Every .button in the customer's order lists and on an order's own page:
 * WooCommerce's orders table and Dokan's two (the sub-orders of a split order,
 * and /my-orders/, which has no woocommerce-account body class -- hence the
 * table.my_account_orders.table-striped selector in each group), the buttons
 * under an order's details, and Order again.
 *
 * They were blue (Pay), teal (View) and red (Cancel) slabs. In the storefront
 * look a button is the small quiet pill unless it is the row's next step: Pay
 * and View are the green pill, Cancel -- WooCommerce's and the Tea order's
 * (.tt-cancel, TT_Tea_Customer_Cancel) -- the quiet pill in the danger colour.
 *
 * The !importants are the ones this block always had, on colour: the theme's
 * assets/flow.css sizes a .button at (0,4,1) and leaves it to this block to
 * say which is which, and Motta paints its own fills on hover and focus. The
 * fill, the edge and the words are forced together, so no pair of them can be
 * split by another sheet into white on white. Size is not forced: flow.css
 * and the per-table rules below it set that.
 */
.woocommerce-account .my_account_orders .button,
.woocommerce-account .woocommerce-order-details .button,
.woocommerce-account .woocommerce-order-overview .button,
.woocommerce-account .order-again .button,
table.my_account_orders.table-striped .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: auto;
    min-height: 40px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--tc-line-strong, rgba(18, 17, 17, 0.2)) !important;
    background-color: #FFFFFF !important;
    color: var(--tc-ink, #121111) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    box-shadow: var(--tc-shadow-chip, 0 1px 2px rgba(18, 17, 17, 0.06), 0 2px 6px rgba(18, 17, 17, 0.08));
}

.woocommerce-account .my_account_orders .button:hover,
.woocommerce-account .my_account_orders .button:focus,
.woocommerce-account .woocommerce-order-details .button:hover,
.woocommerce-account .woocommerce-order-details .button:focus,
.woocommerce-account .woocommerce-order-overview .button:hover,
.woocommerce-account .woocommerce-order-overview .button:focus,
.woocommerce-account .order-again .button:hover,
.woocommerce-account .order-again .button:focus,
table.my_account_orders.table-striped .button:hover,
table.my_account_orders.table-striped .button:focus {
    border-color: var(--tc-line-strong, rgba(18, 17, 17, 0.2)) !important;
    background-color: var(--tc-band, #F5EFE3) !important;
    color: var(--tc-ink, #121111) !important;
}

/* The row's next step: Pay, and View. */
.woocommerce-account .my_account_orders .button.pay,
.woocommerce-account .woocommerce-order-details .button.pay,
.woocommerce-account .woocommerce-order-overview .button.pay,
table.my_account_orders.table-striped .button.pay,
.woocommerce-account .my_account_orders .button.view,
.woocommerce-account .woocommerce-order-details .button.view,
.woocommerce-account .woocommerce-order-overview .button.view,
table.my_account_orders.table-striped .button.view {
    background-color: var(--tc-green, #29594B) !important;
    border-color: var(--tc-green, #29594B) !important;
    color: #FFFFFF !important;
    font-weight: 700;
    box-shadow: var(--tc-shadow-go, 0 2px 6px rgba(41, 89, 75, 0.28));
}

.woocommerce-account .my_account_orders .button.pay:hover,
.woocommerce-account .my_account_orders .button.pay:focus,
.woocommerce-account .woocommerce-order-details .button.pay:hover,
.woocommerce-account .woocommerce-order-details .button.pay:focus,
.woocommerce-account .woocommerce-order-overview .button.pay:hover,
.woocommerce-account .woocommerce-order-overview .button.pay:focus,
table.my_account_orders.table-striped .button.pay:hover,
table.my_account_orders.table-striped .button.pay:focus,
.woocommerce-account .my_account_orders .button.view:hover,
.woocommerce-account .my_account_orders .button.view:focus,
.woocommerce-account .woocommerce-order-details .button.view:hover,
.woocommerce-account .woocommerce-order-details .button.view:focus,
.woocommerce-account .woocommerce-order-overview .button.view:hover,
.woocommerce-account .woocommerce-order-overview .button.view:focus,
table.my_account_orders.table-striped .button.view:hover,
table.my_account_orders.table-striped .button.view:focus {
    background-color: var(--tc-green-dark, #1F463B) !important;
    border-color: var(--tc-green-dark, #1F463B) !important;
    color: #FFFFFF !important;
}

/* The one a customer should mean. Quiet until it is under the pointer. */
.woocommerce-account .my_account_orders .button.cancel,
.woocommerce-account .woocommerce-order-details .button.cancel,
.woocommerce-account .woocommerce-order-overview .button.cancel,
table.my_account_orders.table-striped .button.cancel,
.woocommerce-account .my_account_orders .button.tt-cancel,
.woocommerce-account .woocommerce-order-details .button.tt-cancel,
.woocommerce-account .woocommerce-order-overview .button.tt-cancel,
table.my_account_orders.table-striped .button.tt-cancel {
    background-color: #FFFFFF !important;
    border-color: var(--tc-line-strong, rgba(18, 17, 17, 0.2)) !important;
    color: var(--tc-danger, #9B2C1F) !important;
}

.woocommerce-account .my_account_orders .button.cancel:hover,
.woocommerce-account .my_account_orders .button.cancel:focus,
.woocommerce-account .woocommerce-order-details .button.cancel:hover,
.woocommerce-account .woocommerce-order-details .button.cancel:focus,
.woocommerce-account .woocommerce-order-overview .button.cancel:hover,
.woocommerce-account .woocommerce-order-overview .button.cancel:focus,
table.my_account_orders.table-striped .button.cancel:hover,
table.my_account_orders.table-striped .button.cancel:focus,
.woocommerce-account .my_account_orders .button.tt-cancel:hover,
.woocommerce-account .my_account_orders .button.tt-cancel:focus,
.woocommerce-account .woocommerce-order-details .button.tt-cancel:hover,
.woocommerce-account .woocommerce-order-details .button.tt-cancel:focus,
.woocommerce-account .woocommerce-order-overview .button.tt-cancel:hover,
.woocommerce-account .woocommerce-order-overview .button.tt-cancel:focus,
table.my_account_orders.table-striped .button.tt-cancel:hover,
table.my_account_orders.table-striped .button.tt-cancel:focus {
    background-color: var(--tc-danger-soft, #FBEDEB) !important;
    border-color: var(--tc-danger, #9B2C1F) !important;
    color: var(--tc-danger, #9B2C1F) !important;
}

/* It was 40% white: nothing at all on the cream these pages stand on. */
.woocommerce-account .my_account_orders .button:focus-visible,
.woocommerce-account .woocommerce-order-details .button:focus-visible,
.woocommerce-account .woocommerce-order-overview .button:focus-visible,
.woocommerce-account .order-again .button:focus-visible,
table.my_account_orders.table-striped .button:focus-visible {
    outline: 2px solid var(--tc-green, #29594B) !important;
    outline-offset: 2px;
}


/* Vendor order page */
.dokan-panel .dokan-panel-body .wc-order-data-row table.wc-order-totals {
    float: none;
}

.shippments-tracking-header .shippments-statuses {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0;
}

.shipping-status-tracking-shippments-inner .shippments-tracking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shippments-tracking-header .shippments-tracking-title {
    font-size: medium;
}

.shippments-tracking-status strong {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.shippments-tracking-header .shippments-statuses .shippments-tracking-status {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee;
    padding: 8px 20px;
    border-radius: 35px;
    text-align: center;
    font-size: 13px;
}

.shippments-tracking-header .shippments-tracking-via {
    text-align: right;
}

.shippments-tracking-note {
    padding: 0 20px 10px;
    font-size: small;
    text-align: center;
}

.dokan-panel .dokan-panel-body .wc-order-data-row .add-items,
.dokan-panel .dokan-panel-body .wc-order-data-row .refund-actions {
    float: none;
    display: flex;
    justify-content: right;
    gap: 5px;
}

/*
 * Customer orders page. Not a fixed 2rem any more: a pill's words must be able
 * to wrap, and 40px is the least a thumb should be asked to hit. The 2rem line
 * went with the fixed height it centred the words in.
 */
.woocommerce-account .woocommerce-MyAccount-orders .woocommerce-orders-table__cell .woocommerce-button {
    min-width: unset;
    margin: 2px;
    height: auto;
    min-height: 40px;
}

.dokan-warranty-request-wrap .warranty-form-row select {
    height: unset;
}

/* Customer checkout page */
form.checkout .col-2 {
    padding: 0;
    border: none;
}

form.checkout .col-1 {
    padding: 0 31px 25px;
    border: 1px solid #ecf0f4;
    border-top: 0;
}

form.checkout h3 {
    margin-top: revert;
}

form.checkout .select2 {
    width: 100% !important;
}

.product-summary-wrapper .single-product-extra-content {
    display: none !important;
}

.catalog-top-categories__wrapper.swiper-container {
    overflow-x: scroll;
}

.tt-product-video__player {
    width: 100%;
    height: auto;
    display: block;
}

.woocommerce-product-gallery .tt-product-video {
    position: relative;
}

/* Product listing guidelines (vendor add/edit product) */
.tt-product-guidelines {
    margin: 0 0 18px;
}

.tt-product-guidelines__details {
    border: 1px solid #f59e0b;
    background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 8px 20px rgba(180, 83, 9, 0.12);
    position: relative;
}

.tt-product-guidelines__details>summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7c2d12;
    position: relative;
    padding-right: 26px;
    font-size: 15px;
}

.tt-product-guidelines__details>summary::-webkit-details-marker {
    display: none;
}

.tt-product-guidelines__details>summary::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
    flex: 0 0 12px;
}

.tt-product-guidelines__details>summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #9a3412;
    border-bottom: 2px solid #9a3412;
    transform: translateY(-60%) rotate(45deg);
    transition: transform 0.2s ease;
}

.tt-product-guidelines__details[open]>summary::after {
    transform: translateY(-40%) rotate(-135deg);
}

.tt-product-guidelines__content {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(124, 45, 18, 0.2);
    color: #4c2415;
}

.dokan-dashboard .dokan-dashboard-content .tt-product-guidelines__content ul li {
    margin: 0 0 0 18px;
    list-style: disc;
}

.dokan-dashboard .dokan-dashboard-content .tt-product-guidelines__content ul ul li {
    margin-top: 6px;
    list-style: circle;
}

.tt-product-guidelines__content li {
    margin-bottom: 6px;
    line-height: 1.5;
}

.tt-product-guidelines__examples {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tt-product-guidelines__example {
    background: #fffbf5;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 8px;
}

.tt-product-guidelines__example-label {
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 6px;
    color: #7c2d12;
}

.tt-product-guidelines__example img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

@media (max-width: 640px) {
    .tt-product-guidelines__examples {
        grid-template-columns: 1fr;
    }
}

/* Payout onboarding do's and don'ts (vendor payment settings + setup wizard).
   Lives here rather than in razorpay-vendor-register.css because that stylesheet is scoped to the
   connect modal, while this panel renders on the page itself. */
.tt-payout-guidelines {
    margin: 0 0 18px;
}

.tt-payout-guidelines__details {
    border: 1px solid #0ea5e9;
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.12);
    position: relative;
}

.tt-payout-guidelines__details>summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0c4a6e;
    position: relative;
    padding-right: 26px;
    font-size: 15px;
}

.tt-payout-guidelines__details>summary::-webkit-details-marker {
    display: none;
}

.tt-payout-guidelines__details>summary::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
    flex: 0 0 12px;
}

.tt-payout-guidelines__details>summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #075985;
    border-bottom: 2px solid #075985;
    transform: translateY(-60%) rotate(45deg);
    transition: transform 0.2s ease;
}

.tt-payout-guidelines__details[open]>summary::after {
    transform: translateY(-40%) rotate(-135deg);
}

.tt-payout-guidelines__content {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(12, 74, 110, 0.2);
    color: #1e293b;
}

.tt-payout-guidelines__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tt-payout-guidelines__column {
    border-radius: 8px;
    padding: 10px 12px;
}

.tt-payout-guidelines__column--do {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.tt-payout-guidelines__column--dont {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.tt-payout-guidelines__label {
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 6px;
}

.tt-payout-guidelines__column--do .tt-payout-guidelines__label {
    color: #166534;
}

.tt-payout-guidelines__column--dont .tt-payout-guidelines__label {
    color: #991b1b;
}

/* Unscoped on purpose: the setup wizard renders this panel outside .dokan-dashboard, so the
   dashboard-scoped list reset does not apply there and a scoped override would miss it. */
.tt-payout-guidelines__content ul {
    margin: 0;
    padding: 0;
}

.tt-payout-guidelines__content ul li {
    margin: 0 0 6px 18px;
    padding: 0;
    list-style: disc;
    line-height: 1.5;
    font-size: 13px;
}

.tt-payout-guidelines__content ul li:last-child {
    margin-bottom: 0;
}

.tt-payout-guidelines__permanent {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .tt-payout-guidelines__columns {
        grid-template-columns: 1fr;
    }
}

.tt-shipment-label-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e4e7;
}

.tt-shipment-label-actions__title {
    text-align: left;
    font-weight: 600;
    margin-bottom: 6px;
}

.tt-shipment-label-actions__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.tt-shipment-label-actions__label {
    min-width: 140px;
    font-size: 13px;
    color: #50575e;
}

/*
 * The label preview, in the look every overlay wears (tapper-cafe-core's
 * tc-ui.css): the root carries tc-ui, and each token is read with its literal
 * fallback. 100002 rather than 9999, which was under the dashboard's own
 * drawer (100000) and level with nothing; it matches the category picker.
 */
.tt-shipment-label-modal {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: none;
}

.tt-shipment-label-modal.is-open {
    display: block;
}

.tt-shipment-label-modal__overlay {
    position: absolute;
    inset: 0;
    background: var(--tc-scrim, rgba(18, 17, 17, 0.55));
}

.tt-shipment-label-modal__content {
    position: relative;
    background: #fff;
    color: var(--tc-body, #413E3C);
    width: min(90vw, 620px);
    max-height: 90vh;
    overflow: auto;
    margin: 5vh auto;
    border-radius: var(--tc-radius-sm, 14px);
    box-shadow: var(--tc-shadow-modal, 0 0 0 1px rgba(18, 17, 17, 0.12), 0 4px 10px rgba(18, 17, 17, 0.14), 0 24px 60px rgba(18, 17, 17, 0.32));
    padding: 16px 20px 20px;
}

/*
 * The head band (owner, 2026-10-02: the popups read as one flat white sheet):
 * out to the edges through the content's 16/20 padding, deep cream, a rule
 * under it. The content clips, so it follows the rounded corners.
 */
.tt-shipment-label-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 36px;
    border-bottom: 1px solid var(--tc-band-line, rgba(18, 17, 17, 0.12));
    padding: 12px 64px 12px 20px;
    margin: -16px -20px 16px;
    background: var(--tc-band, #F5EFE3);
    position: relative;
}

.tt-shipment-label-modal__title {
    color: var(--tc-ink, #121111);
    font-size: 18px;
    font-weight: 600;
}

.tt-shipment-label-modal__close,
.tt-shipment-label-modal__close:hover,
.tt-shipment-label-modal__close:focus,
.tt-shipment-label-modal__close:active {
    padding: 0;
    min-width: unset;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 14px;
    color: var(--tc-ink, #121111);
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    /* White and raised: a cream disc would vanish into the band it sits on. */
    border: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: var(--tc-shadow-chip, 0 1px 2px rgba(18, 17, 17, 0.06), 0 2px 6px rgba(18, 17, 17, 0.08));
    outline: none;
}

.tt-shipment-label-modal__close:hover {
    background: var(--tc-cream, #FFFDF8);
}

.tt-shipment-label-modal__close:active {
    box-shadow: none;
}

.tt-shipment-label-modal__close:focus-visible {
    outline: 2px solid var(--tc-green, #29594B);
    outline-offset: 2px;
}

.tt-label {
    border: 1px solid #1d2327;
    border-radius: 6px;
    padding: 16px;
    font-size: 13px;
}

.tt-label__brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
}

.tt-label__brand-title {
    font-size: 18px;
    font-weight: 700;
}

.tt-label__brand-logo {
    /* width: 40px; */
    height: 60px;
    object-fit: contain;
    vertical-align: middle;
}

.tt-label__brand-site {
    font-weight: 400;
}

.tt-label__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.tt-label__title {
    font-weight: 700;
    font-size: 16px;
}

.tt-label__meta {
    font-size: 12px;
    color: #50575e;
}

.tt-label__section {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
}

.tt-label__block {
    flex: 1;
}

.tt-label__block strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: #50575e;
}

.tt-label__list {
    margin: 0;
    padding-left: 16px;
}

.tt-label__tracking {
    border-top: 1px solid #e2e4e7;
    padding-top: 10px;
}

.woocommerce-badge.upcoming-launch-badge {
    background-color: #040404;
    letter-spacing: 1px;
    font-weight: bold;
    line-height: 1rem;
}

.woocommerce-badges .onsale.woocommerce-badge {
    font-weight: bolder;
    font-size: medium;
}

ins .woocommerce-Price-amount.amount {
    font-weight: bolder;
}

@media (max-width: 640px) {
    .tt-shipment-label-actions__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .tt-shipment-label-actions__label {
        min-width: 0;
    }

    .tt-shipment-label-modal__content {
        width: calc(100% - 24px);
        margin: 12px auto;
        max-height: calc(100vh - 24px);
    }

    .tt-label__section {
        flex-direction: column;
        gap: 12px;
    }

    .tt-label__brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .woocommerce-badges .onsale.woocommerce-badge {
        font-weight: bolder;
        font-size: 0.70rem;
        letter-spacing: 1px;
    }

    .woocommerce-badge.upcoming-launch-badge {
        font-size: x-small;
        letter-spacing: normal;
        line-height: normal;
    }
}
/* --------------------------------------------------------------------------
 * Tapper Brews rows in the Dokan order list.
 *
 * The badge sits beside the status label rather than in a column of its own:
 * on a phone this table stacks into label/value pairs, and a column carrying
 * one word for some rows and nothing for the rest is a row of empty cells.
 * -------------------------------------------------------------------------- */
.dokan-order-status .tt-cafe-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 3px;
	background: #8b5e34;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Cancelling a Tea order.
 *
 * The customer's form sits under the order on My Account → View order (and
 * the thank-you page for guests); the seller's reason dialog opens from the
 * Cancel button in the Dokan order list. Both ask for a reason before
 * anything is cancelled.
 *
 * The form is a section card in the storefront look (the theme's
 * assets/flow.css carries it through these pages and declares the --tc-*
 * tokens on body.tt-flow; each is read here with its literal fallback). The
 * refund line is a neutral panel and stays above the form: it is a sibling of
 * the <form>, so it cannot be moved under the reasons without display:contents
 * on a form. The reason is a <select> and stays one; flow.css draws it, and
 * what is here for it is its width.
 * -------------------------------------------------------------------------- */
.tt-customer-cancel {
	margin: 24px 0 0;
	padding: 16px;
	border: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
	border-radius: var(--tc-radius, 18px);
	background-color: #FFFFFF;
	box-shadow: var(--tc-shadow, 0 18px 40px rgba(18, 17, 17, 0.08));
}

@media (min-width: 48em) {
	.tt-customer-cancel {
		padding: 22px;
	}
}

.tt-customer-cancel__title {
	margin: 0 0 8px;
	color: var(--tc-ink, #121111);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.tt-customer-cancel__text,
.tt-customer-cancel__only {
	margin: 0 0 16px;
}

/*
 * What happens to the money: the neutral panel. From .woocommerce down,
 * because flow.css sets every paragraph in My Account at (0,3,2) -- body
 * colour, 15px -- and a panel's words are ink at 14px.
 */
.woocommerce .woocommerce-order-details .tt-customer-cancel .tt-customer-cancel__text {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background-color: var(--tc-band, #F5EFE3);
	color: var(--tc-ink, #121111);
	font-size: 14px;
	line-height: 1.45;
}

/* The one part there is to cancel, named: a fact, not a choice. */
.woocommerce .woocommerce-order-details .tt-customer-cancel .tt-customer-cancel__only {
	color: var(--tc-ink, #121111);
	font-size: 15px;
	font-weight: 500;
}

/* The parts, then a hairline, then why: two sections of one card. */
.tt-customer-cancel__parts {
	margin: 0 0 16px;
	padding: 0 0 8px;
	border: 0;
	border-bottom: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
}

.tt-customer-cancel__parts legend {
	margin-bottom: 4px;
	padding: 0;
	color: var(--tc-muted, #6B6660);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* A row a thumb can hit: the whole label, 44px tall. */
.tt-customer-cancel__part {
	display: flex;
	gap: 2px;
	align-items: flex-start;
	min-height: 44px;
	margin: 0;
	padding: 10px 0;
	color: var(--tc-ink, #121111);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	cursor: pointer;
}

.tt-customer-cancel__part input {
	flex: none;
	margin-top: 4px;
	accent-color: #29594B;
}

/*
 * Motta draws its own 20px box over every checkbox (input::before, #ecf0f4,
 * filled #1d2128 when ticked) and greys the <span> after one until it is
 * hovered. The same box, in the storefront's colours.
 */
.tt-customer-cancel__part input[type="checkbox"]::before {
	border-color: var(--tc-line-strong, rgba(18, 17, 17, 0.2));
	border-radius: 4px;
}

.tt-customer-cancel__part input[type="checkbox"]:hover::before {
	border-color: var(--tc-green, #29594B);
}

.tt-customer-cancel__part input[type="checkbox"]:checked::before {
	border-color: var(--tc-green, #29594B);
	background-color: var(--tc-green, #29594B);
}

.tt-customer-cancel__part input[type="checkbox"] + span,
.tt-customer-cancel__part input[type="checkbox"]:hover + span {
	color: var(--tc-ink, #121111);
}

/*
 * The focus is shown on the label. It cannot be shown on the box: this file
 * removes every checkbox's outline site-wide, with !important (see
 * input[type="checkbox"]:focus above).
 */
.tt-customer-cancel__part:has(input:focus-visible) {
	border-radius: 6px;
	outline: 2px solid var(--tc-green, #29594B);
	outline-offset: 2px;
}

/* WooCommerce: .woocommerce form .form-row { padding: 3px; margin: 0 0 6px }. */
.tt-customer-cancel .tt-customer-cancel__form .form-row {
	float: none;
	width: auto;
	margin: 0 0 16px;
	padding: 0;
}

.tt-customer-cancel .form-row select {
	width: 100%;
	max-width: 420px;
}

/*
 * "Cancel this order": the quiet pill in the danger colour, red-edged on a
 * pale red once it is under the pointer.
 *
 * Every property in every state. It is a <button class="button">, so Motta's
 * bare button rule reaches it (160px minimum, a 60px line, a coloured shadow,
 * its own hover and pressed fills) and flow.css's quiet pill at (0,4,2), with
 * its hover at (0,5,2); hence the length of the selector. And it sits inside
 * .woocommerce-order-details, where "Customer order action buttons" above
 * forces the fill, the edge and the words with !important -- so these three
 * carry !important too, from a longer selector.
 */
.woocommerce .tt-customer-cancel .tt-customer-cancel__form button.button.tt-customer-cancel__submit,
.woocommerce .tt-customer-cancel .tt-customer-cancel__form button.button.tt-customer-cancel__submit:hover,
.woocommerce .tt-customer-cancel .tt-customer-cancel__form button.button.tt-customer-cancel__submit:focus,
.woocommerce .tt-customer-cancel .tt-customer-cancel__form button.button.tt-customer-cancel__submit:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 0 22px;
	border: 1px solid;
	border-color: var(--tc-line-strong, rgba(18, 17, 17, 0.2)) !important;
	border-radius: 999px;
	background-color: #FFFFFF !important;
	color: var(--tc-danger, #9B2C1F) !important;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	box-shadow: var(--tc-shadow-chip, 0 1px 2px rgba(18, 17, 17, 0.06), 0 2px 6px rgba(18, 17, 17, 0.08));
	cursor: pointer;
}

.woocommerce .tt-customer-cancel .tt-customer-cancel__form button.button.tt-customer-cancel__submit:hover,
.woocommerce .tt-customer-cancel .tt-customer-cancel__form button.button.tt-customer-cancel__submit:focus,
.woocommerce .tt-customer-cancel .tt-customer-cancel__form button.button.tt-customer-cancel__submit:active {
	border-color: var(--tc-danger, #9B2C1F) !important;
	background-color: var(--tc-danger-soft, #FBEDEB) !important;
	color: var(--tc-danger, #9B2C1F) !important;
}

.woocommerce .tt-customer-cancel .tt-customer-cancel__form button.button.tt-customer-cancel__submit:active {
	box-shadow: none;
}

/* Green, like every button's: the action-button block above says so with !important. */
.woocommerce .tt-customer-cancel .tt-customer-cancel__form button.button.tt-customer-cancel__submit:focus-visible {
	outline: 2px solid var(--tc-green, #29594B);
	outline-offset: 2px;
}

/*
 * The seller's "Cancel order" dialog. Its look is tapper-cafe-core's
 * tc-ui.css, through the tc-ui* classes on the markup in
 * templates/dokan/orders/listing.php: box, scrim, title, field and the two
 * pills. What is here is only its own width on a desk -- a little wider than
 * the sheet's 26rem, for the reason list -- and the air under its paragraph.
 * On a phone it is the sheet every other dialog is.
 */
@media (min-width: 48em) {
	.tt-cancel-dialog {
		width: min(440px, calc(100vw - 32px));
	}
}

.tt-cancel-dialog .tt-cancel-dialog__text {
	margin: 0 0 16px;
}

/* --------------------------------------------------------------------------
 * The shipments of a Tea order, as the customer sees them.
 *
 * Dokan Pro prints them under the order on My Account → View order and on the
 * thank-you page (orders/shipment/html-customer-shipments-list.php; each one
 * is the theme's dokan/orders/shipment/html-shipment-list.php). A shipment was
 * a grey-ruled box with a pill, a chevron that opened its items and a second
 * chevron inside that for its timeline.
 *
 * Here each is a banded card in the storefront look: "Shipment #1 · seller"
 * and where it stands in the head band, then the courier, what is in the
 * parcel and its timeline -- open, nothing to press -- then the buttons and
 * the note about them.
 *
 * NO MARKUP IS MOVED. dokan-pro.js and tt-mark-not-received.js find their way
 * by .shippments-statuses and its children (.siblings(), .closest()), so the
 * header and that wrapper are display:contents and the card lays their
 * children out by `order`. The DOM, and so those scripts, are untouched.
 *
 * Every rule is scoped to .dokan-customer-shipment-list-area. The seller's
 * order page uses the same inner class names, and the unscoped rules under
 * "Vendor order page" above are for it; these outrank them here.
 * -------------------------------------------------------------------------- */
.dokan-customer-shipment-list-area {
	margin: 24px 0 0;
}

/* Dokan Pro: one bordered box round all of them, 2px at the right and the foot. */
.dokan-customer-shipment-list-area .customer-shipment-list-inner-area {
	margin: 0;
	border: 0;
	border-radius: 0;
}

/* Dokan prints a clearing <div> after each shipment and inside each header. */
.dokan-customer-shipment-list-area .customer-shipment-list-inner-area .clear {
	display: none;
}

/* The card. position: Dokan's "working" overlay (blockUI) is laid over it. */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0 0 12px;
	border: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
	border-radius: var(--tc-radius, 18px);
	background-color: #FFFFFF;
	box-shadow: var(--tc-shadow, 0 18px 40px rgba(18, 17, 17, 0.08));
	overflow: hidden;
}

.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-header,
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-header .shippments-statuses {
	display: contents;
}

/* ---- the head band: the title at the left, where it stands at the right */

/* Dokan Pro: float left at 33%. */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-header .shippments-tracking-title {
	order: 1;
	flex: 1 1 0;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 14px 8px 14px 16px;
	border-bottom: 1px solid var(--tc-band-line, rgba(18, 17, 17, 0.12));
	background-color: var(--tc-band, #F5EFE3);
	color: var(--tc-ink, #121111);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-header .shippments-tracking-title strong {
	font-weight: 600;
}

/* The same band, continued: this cell was the grey pill itself. */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-header .shippments-statuses .shippments-tracking-status {
	order: 2;
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	justify-content: flex-end;
	max-width: 60%;
	margin: 0;
	padding: 14px 16px 14px 8px;
	border-bottom: 1px solid var(--tc-band-line, rgba(18, 17, 17, 0.12));
	border-radius: 0;
	background-color: var(--tc-band, #F5EFE3);
	font-size: 12px;
	text-align: right;
}

/*
 * Where it stands, as a tag. White when it says nothing yet: the neutral tag's
 * own cream is the band's, and would be bold words on nothing.
 */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-status strong {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 3px 9px;
	border: 0;
	border-radius: 6px;
	background-color: #FFFFFF;
	color: var(--tc-ink, #121111);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}

/* On its way, or said not to have come. */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-status .ss_pickedup,
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-status .ss_on_the_way,
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-status .ss_not_received {
	background-color: #FBF0D9;
	color: #8A5A00;
}

/* There. */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-status .ss_delivered,
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-status .ss_mark_received,
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-status .ss_received {
	background-color: var(--tc-green-soft, #E4EEE9);
	color: var(--tc-green-dark, #1F463B);
}

.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-status .ss_cancelled {
	background-color: var(--tc-danger-soft, #FBEDEB);
	color: var(--tc-danger, #9B2C1F);
}

/* The two chevrons: there is nothing left to open. */
.dokan-customer-shipment-list-area .shipment-item-details-tab-toggle,
.dokan-customer-shipment-list-area .shipment-notes-details-tab-toggle {
	display: none;
}

/* ---- the body: the courier, the parcel, the timeline */

/* The courier, and the way to its own tracking page. */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-header .shippments-tracking-via {
	order: 3;
	flex: 1 1 100%;
	margin: 0;
	padding: 14px 16px 0;
	color: var(--tc-muted, #6B6660);
	font-size: 13px;
	line-height: 1.45;
	text-align: left;
}

.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-via strong {
	color: var(--tc-ink, #121111);
	font-weight: 600;
}

/* Dokan Pro: ruled above and below at 2px, 20px of padding, and shut (.dokan-hide). */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-items,
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-items.dokan-hide {
	order: 4;
	display: block;
	flex: 1 1 100%;
	min-width: 0;
	padding: 8px 16px 0;
	border: 0;
}

/* What is in the parcel: small line items. Motta: th, td { padding: 10px 0; border-bottom: 1px solid #ecf0f4 }. */
.dokan-customer-shipment-list-area .shippments-tracking-items table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.dokan-customer-shipment-list-area .shippments-tracking-items table td {
	padding: 8px 0;
	border: 0;
	color: var(--tc-muted, #6B6660);
	font-size: 13px;
	line-height: 1.45;
	vertical-align: middle;
}

.dokan-customer-shipment-list-area .shippments-tracking-items table tr + tr td {
	border-top: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
}

/* Dokan Pro: 15% wide, the picture at 100% of it. */
.dokan-customer-shipment-list-area .shippments-tracking-items table td.thumb {
	width: 56px;
	padding-right: 12px;
}

.dokan-customer-shipment-list-area .shippments-tracking-items table td.thumb img {
	display: block;
	width: 44px;
	height: 44px;
	margin: 0;
	border: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
	border-radius: 10px;
	object-fit: cover;
}

/* From .woocommerce down: flow.css colours every link in the page at (0,3,2). */
.woocommerce .dokan-customer-shipment-list-area .shippments-tracking-items table td a,
.woocommerce .dokan-customer-shipment-list-area .shippments-tracking-items table td a:hover {
	color: var(--tc-ink, #121111);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.dokan-customer-shipment-list-area .shippments-tracking-items table td:last-child {
	padding-left: 12px;
	text-align: right;
	white-space: nowrap;
}

.dokan-customer-shipment-list-area .shippments-tracking-items table td strong {
	font-weight: 400;
}

/* Dokan Pro: a grey panel, 25px down, ruled above. */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .dokan-customer-shipment-notes-list-area {
	position: static;
	margin: 8px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
	background-color: transparent;
}

/* "Shipment Updates Timeline": a section label. */
.dokan-customer-shipment-list-area .dokan-customer-shipment-notes-list-area h5 {
	margin: 0 0 12px;
	padding: 0;
	color: var(--tc-muted, #6B6660);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.dokan-customer-shipment-list-area .dokan-customer-shipment-notes-list-area h5 strong {
	font-weight: 600;
}

/* Shut by .dokan-hide, behind the second chevron. */
.dokan-customer-shipment-list-area .dokan-customer-shipment-notes-list-area .customer-shipment-list-notes-inner-area,
.dokan-customer-shipment-list-area .dokan-customer-shipment-notes-list-area .customer-shipment-list-notes-inner-area.dokan-hide {
	display: block;
	margin: 0;
}

/*
 * The timeline as the stage list the track page uses. Dokan gives the notes
 * newest first, so the first is where the parcel is now -- a white dot in a
 * green ring -- and every one under it is done: a solid dot on a green line.
 * Dokan Pro: an 11px grey dot on a 3px grey line.
 */
.dokan-customer-shipment-list-area .dokan-customer-shipment-notes-list-area .customer-shipment-list-notes-inner-area .dokan-order-updates {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dokan-customer-shipment-list-area .dokan-order-shipment-notes-updates li {
	position: relative;
	margin: 0;
	padding: 0 0 18px 32px;
	border: 0;
}

.dokan-customer-shipment-list-area .dokan-order-shipment-notes-updates li:last-child {
	padding-bottom: 0;
}

.dokan-customer-shipment-list-area .dokan-order-shipment-notes-updates li::before {
	content: "";
	position: absolute;
	top: 20px;
	bottom: 0;
	left: 9px;
	width: 2px;
	background-color: var(--tc-green, #29594B);
}

.dokan-customer-shipment-list-area .dokan-order-shipment-notes-updates li:last-child::before {
	display: none;
}

.dokan-customer-shipment-list-area .dokan-order-shipment-notes-updates li::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 0;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border: 2px solid var(--tc-green, #29594B);
	border-radius: 999px;
	background-color: var(--tc-green, #29594B);
}

.dokan-customer-shipment-list-area .dokan-order-shipment-notes-updates li:first-child::after {
	border-width: 6px;
	background-color: #FFFFFF;
}

/* What happened at the left, when at the right. The markup has them the other way round. */
.dokan-customer-shipment-list-area .dokan-order-shipment-notes-updates .dokan-order-update-text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
}

.dokan-customer-shipment-list-area .dokan-order-shipment-notes-updates .dokan-order-update-description {
	order: 1;
	flex: 1 1 12rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Four classes: flow.css sets every paragraph in My Account at (0,3,2). */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .dokan-order-shipment-notes-updates .dokan-order-update-description p {
	margin: 0;
	color: var(--tc-ink, #121111);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .dokan-order-shipment-notes-updates .dokan-order-update-meta {
	order: 2;
	flex: none;
	margin: 0;
	color: var(--tc-muted, #6B6660);
	font-size: 13px;
	line-height: 1.45;
	white-space: nowrap;
}

/* ---- the foot: a rule, the buttons, the note */

/*
 * The rule between the parcel and what can be done about it. The card's own
 * ::after, because the buttons are loose flex items and none of them is
 * always there to carry a border.
 */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner::after {
	content: "";
	order: 5;
	flex: 1 1 100%;
	height: 0;
	margin: 16px 16px 0;
	border-top: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
}

/*
 * "Order Received": the small green pill. It is a <strong> that dokan-pro.js
 * listens to, not a button, so there is no Motta button rule to fight -- only
 * Dokan Pro's grey-ringed pill, which turns solid grey under the pointer.
 */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-statuses .customer-status,
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-statuses .customer-status:hover {
	order: 6;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	margin: 16px 0 0 16px;
	padding: 0 16px;
	border: 1px solid var(--tc-green, #29594B);
	border-radius: 999px;
	background: var(--tc-green, #29594B);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: var(--tc-shadow-go, 0 2px 6px rgba(41, 89, 75, 0.28));
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-statuses .customer-status:hover {
	border-color: var(--tc-green-dark, #1F463B);
	background: var(--tc-green-dark, #1F463B);
}

/* "Report Not Received": its look is tapper-tea-product-statuses' own sheet; this is its place in the card. */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-statuses .tt-mark-not-received {
	order: 6;
	flex: none;
	margin: 16px 0 0 16px;
}

.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-statuses .customer-status + .tt-mark-not-received {
	margin-left: 8px;
}

/* "Mark Order Received to enable Return/Replacement". It was centred, small. */
.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-note {
	order: 7;
	flex: 1 1 100%;
	padding: 10px 16px 16px;
	color: var(--tc-muted, #6B6660);
	font-size: 13px;
	line-height: 1.45;
	text-align: left;
}

.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-note b {
	font-weight: 600;
}

@media (min-width: 48em) {
	.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-header .shippments-tracking-title {
		padding: 16px 8px 16px 22px;
	}

	.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-header .shippments-statuses .shippments-tracking-status {
		padding: 16px 22px 16px 8px;
	}

	.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-header .shippments-tracking-via {
		padding: 18px 22px 0;
	}

	.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-items,
	.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-items.dokan-hide {
		padding: 8px 22px 0;
	}

	.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner::after {
		margin: 16px 22px 0;
	}

	.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-statuses .customer-status,
	.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-statuses .customer-status:hover,
	.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-statuses .tt-mark-not-received {
		margin-left: 22px;
	}

	.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-statuses .customer-status + .tt-mark-not-received {
		margin-left: 8px;
	}

	.dokan-customer-shipment-list-area .shipping-status-tracking-shippments-inner .shippments-tracking-note {
		padding: 10px 22px 20px;
	}
}

/* --------------------------------------------------------------------------
 * Dokan's two order tables, as the customer sees them: the parts of a split
 * order under "Sub Orders" on My Account → View order (sub-orders.php), and
 * /my-orders/ (my-orders.php).
 *
 * table-striped is what tells them from WooCommerce's own orders table, which
 * the theme's flow.css lays out as row cards. These two stay lists -- the
 * first sits inside the order's own card -- on hairlines, without the
 * zebra stripes and the box.
 *
 * What CSS cannot reach: Dokan prints the order's status as bare words in
 * td.order-status, with no class saying which status it is. So it cannot be
 * coloured by status. From 48em, where these are real table cells, it is ink
 * words; below, where each row is laid on a grid, the cell is drawn as the
 * neutral tag. Colouring it needs a fork of both templates.
 * -------------------------------------------------------------------------- */
table.shop_table.my_account_orders.table-striped {
	width: 100%;
	margin: 0 0 16px;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	background-color: transparent;
	color: var(--tc-body, #413E3C);
	font-size: 15px;
}

/* The section label, as flow.css gives every other table's head on these pages. */
table.shop_table.my_account_orders.table-striped thead th {
	padding: 0 12px 8px 0;
	border: 0;
	border-bottom: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
	background-color: transparent;
	color: var(--tc-muted, #6B6660);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-align: left;
	text-transform: uppercase;
}

/* No stripes: Dokan shades every other row. */
table.shop_table.my_account_orders.table-striped tbody tr td {
	padding: 12px 12px 12px 0;
	border: 0;
	border-bottom: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
	background-color: transparent;
	color: var(--tc-body, #413E3C);
	font-size: 15px;
	line-height: 1.45;
	vertical-align: middle;
}

/* Four classes: flow.css colours every link in the page at (0,3,2), and its hover at (0,4,2). */
table.shop_table.my_account_orders.table-striped td.order-number a,
table.shop_table.my_account_orders.table-striped td.order-number a:hover {
	color: var(--tc-ink, #121111);
	font-weight: 600;
	text-decoration: none;
}

/* Dokan sets this cell left and unwrapped inline; here it is where the order stands. */
table.shop_table.my_account_orders.table-striped td.order-status {
	color: var(--tc-ink, #121111);
	font-weight: 600;
}

table.shop_table.my_account_orders.table-striped th.order-total,
table.shop_table.my_account_orders.table-striped tbody tr td.order-total {
	text-align: right;
}

/* /my-orders/ gives its Vendor column the same class as its Total: the second one is words. */
table.shop_table.my_account_orders.table-striped th.order-total ~ th.order-total,
table.shop_table.my_account_orders.table-striped tbody tr td.order-total ~ td.order-total {
	text-align: left;
}

table.shop_table.my_account_orders.table-striped tbody tr td.order-total .amount {
	color: var(--tc-ink, #121111);
	font-weight: 600;
}

table.shop_table.my_account_orders.table-striped thead th:last-child,
table.shop_table.my_account_orders.table-striped tbody tr td:last-child {
	padding-right: 0;
}

/*
 * The buttons. Dokan prints them with nothing between them, not even a space,
 * so the air is a margin; flow.css zeroes a .button's margin at (0,4,1).
 * Their colours are "Customer order action buttons", above.
 */
table.shop_table.my_account_orders.table-striped td.order-actions {
	text-align: right;
	white-space: nowrap;
}

table.shop_table.my_account_orders.table-striped td.order-actions .button {
	min-height: 40px;
	margin: 2px 0 2px 8px;
	padding: 0 14px;
	white-space: nowrap;
}

/*
 * The parcel's state (dokan_get_order_shipment_current_status()): a tag.
 * Dokan: a white-on-colour label; Dokan Pro repaints three of them pastel.
 */
table.shop_table.my_account_orders.table-striped .dokan-label {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 3px 9px;
	border-radius: 6px;
	background-color: var(--tc-band, #F5EFE3);
	color: var(--tc-ink, #121111);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	white-space: normal;
}

table.shop_table.my_account_orders.table-striped .dokan-label.dokan-label-success {
	background-color: var(--tc-green-soft, #E4EEE9);
	color: var(--tc-green-dark, #1F463B);
}

table.shop_table.my_account_orders.table-striped .dokan-label.dokan-label-info,
table.shop_table.my_account_orders.table-striped .dokan-label.dokan-label-warning {
	background-color: #FBF0D9;
	color: #8A5A00;
}

table.shop_table.my_account_orders.table-striped .dokan-label.dokan-label-danger {
	background-color: var(--tc-danger-soft, #FBEDEB);
	color: var(--tc-danger, #9B2C1F);
}

/* A phone: each order a small block -- number and status, date and parcel, total, buttons. */
@media (max-width: 47.99em) {
	table.shop_table.my_account_orders.table-striped,
	table.shop_table.my_account_orders.table-striped tbody {
		display: block;
	}

	/* Clipped, not removed: the column names are still read out. */
	table.shop_table.my_account_orders.table-striped thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	table.shop_table.my_account_orders.table-striped tbody tr.order {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 6px 12px;
		padding: 14px 0;
		border-bottom: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
	}

	table.shop_table.my_account_orders.table-striped tbody tr.order td {
		display: block;
		grid-column: 1 / -1;
		min-width: 0;
		padding: 0;
		border: 0;
		color: var(--tc-muted, #6B6660);
		font-size: 13px;
		text-align: left;
		white-space: normal;
	}

	/* Where a responsive table would print the column's name in front of the cell. */
	table.shop_table.my_account_orders.table-striped tbody tr.order td::before {
		display: none;
	}

	table.shop_table.my_account_orders.table-striped tbody tr.order td.order-number {
		grid-column: 1;
		grid-row: 1;
		font-size: 18px;
		line-height: 1.3;
	}

	/* The neutral tag. The !important answers Dokan's inline white-space:nowrap on this cell. */
	table.shop_table.my_account_orders.table-striped tbody tr.order td.order-status {
		grid-column: 2;
		grid-row: 1;
		display: inline-flex;
		align-items: center;
		justify-self: end;
		min-height: 24px;
		padding: 3px 9px;
		border-radius: 6px;
		background-color: var(--tc-band, #F5EFE3);
		color: var(--tc-ink, #121111);
		font-size: 12px;
		font-weight: 700;
		line-height: 1.3;
		white-space: normal !important;
	}

	table.shop_table.my_account_orders.table-striped tbody tr.order td.order-date {
		grid-column: 1;
		grid-row: 2;
	}

	table.shop_table.my_account_orders.table-striped tbody tr.order td.dokan-order-shipping-status {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
	}

	table.shop_table.my_account_orders.table-striped tbody tr.order td.order-total {
		color: var(--tc-body, #413E3C);
		font-size: 15px;
	}

	table.shop_table.my_account_orders.table-striped tbody tr.order td.order-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 6px;
		white-space: normal;
	}

	table.shop_table.my_account_orders.table-striped tbody tr.order td.order-actions .button {
		margin: 0;
	}
}

/* "Sub Orders": air over the heading Dokan prints under the order's own table. */
.woocommerce-order-details > header {
	margin: 24px 0 0;
}

/*
 * Dokan's note ("This order has products from multiple vendors…"): the neutral
 * panel. Dokan: a white box ruled blue across the top, with a blue tab at the
 * left carrying an italic "i".
 */
.woocommerce-order-details .dokan-info,
body.tt-flow .dokan-info {
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 0;
	border-radius: 10px;
	background-color: var(--tc-band, #F5EFE3);
	color: var(--tc-ink, #121111);
	font-size: 14px;
	line-height: 1.45;
}

.woocommerce-order-details .dokan-info::before,
body.tt-flow .dokan-info::before {
	display: none;
}

.woocommerce-order-details .dokan-info strong,
body.tt-flow .dokan-info strong {
	font-weight: 600;
}