/**
 * Customer panel layout helpers (Tailwind utilities via compiled kh-customer-panel-tailwind.css).
 * Brand primary: rgb(22,163,74); secondary accent: #fbbc34.
 *
 * @package Khaloghli_Customizations\Modules\Customer_Panel
 */

/* Full-height shell inherits typography from the active theme. */

/*
 * Avoid a global button background reset here: theme stylesheets (e.g. Woodmart)
 * often win over Tailwind utilities on raw <button>. Per-panel controls use
 * scoped selectors with explicit colors (wallet form submit, scores redeem, etc.).
 */


ul{
    list-style: none !important;
}

li{
    margin-bottom: unset !important;
}

body.kh-customer-panel-body {
    direction: rtl;
    background-color: #f1f5f9;
}

/*
 * Woodmart and other theme stylesheets often reset SVG dimensions.
 * Reinforce common Tailwind icon sizes inside the panel shell.
 */
body.kh-customer-panel-body svg.w-4,
body.kh-customer-panel-body svg.h-4 {
    width: 1rem !important;
    height: 1rem !important;
    max-width: 1rem;
    max-height: 1rem;
    flex-shrink: 0;
}

body.kh-customer-panel-body svg.w-5,
body.kh-customer-panel-body svg.h-5 {
    width: 1.25rem !important;
    height: 1.25rem !important;
    max-width: 1.25rem;
    max-height: 1.25rem;
    flex-shrink: 0;
}

body.kh-customer-panel-body svg.w-\[18px\],
body.kh-customer-panel-body svg.h-\[18px\] {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px;
    max-height: 18px;
    flex-shrink: 0;
}

body.kh-customer-panel-body svg.w-\[22px\],
body.kh-customer-panel-body svg.h-\[22px\] {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px;
    max-height: 22px;
    flex-shrink: 0;
}

/* Sidebar slide animation on small screens. */
.kh-panel-sidebar-transition {
    transition: transform 0.3s ease;
}

.kh-panel-nav-item{
    font-size: 13px;
}

/* Pending vendor menu: non-clickable, muted, no hover affordance. */
.kh-panel-nav-item.kh-panel-nav-item-disabled {
    pointer-events: none;
    user-select: none;
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 1023px) {
    #kh-panel-sidebar.kh-panel-sidebar-closed {
        transform: translateX(100%);
    }

    #kh-panel-sidebar.kh-panel-sidebar-open {
        transform: translateX(0);
    }
}

@media (min-width: 1024px) {
    #kh-panel-sidebar {
        transform: translateX(0) !important;
    }

    /* Mobile-only sidebar toggles: hide completely on desktop. */
    #kh-panel-open-sidebar,
    #kh-panel-close-sidebar {
        display: none !important;
    }
}

/* Main content entrance (matches static panel fade). */
@keyframes kh-panel-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.kh-panel-fade-in {
    animation: kh-panel-fade-in 0.3s ease;
}

/* Scrollbar styling aligned with static HTML. */
body.kh-customer-panel-body::-webkit-scrollbar,
#kh-panel-sidebar::-webkit-scrollbar {
    width: 6px;
}

body.kh-customer-panel-body::-webkit-scrollbar-track,
#kh-panel-sidebar::-webkit-scrollbar-track {
    background: #f1f5f9;
}

body.kh-customer-panel-body::-webkit-scrollbar-thumb,
#kh-panel-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

body.kh-customer-panel-body::-webkit-scrollbar-thumb:hover,
#kh-panel-sidebar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Order row thumbnails from WooCommerce. */
.kh-panel-order-thumb {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 0.5rem;
}

.kh-panel-order-thumb-placeholder {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
}

/* Shortcode root: allow Elementor sections to span the banner card. */
.kh-panel-shortcode-root {
    position: relative;
    z-index: 10;
}

.kh-panel-site-logo {
    max-height: 2.5rem;
}

/* Neutralize theme button backgrounds for panel header toggles. */
#kh-panel-open-sidebar,
#kh-panel-close-sidebar {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

#kh-panel-open-sidebar:hover,
#kh-panel-close-sidebar:hover,
#kh-panel-open-sidebar:focus,
#kh-panel-close-sidebar:focus {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Dashboard typography & layout normalization for embedded views. */

.kh-panel-dashboard-root {
    font-size: 16px;
    line-height: 1.7;
}

/*
 * Main title at top of each panel view (امتیازات، کیف پول، …).
 * Themes often set huge h2 on mobile; lock to Tailwind text-xl scale.
 */
body.kh-customer-panel-body .kh-panel-page-heading {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
    font-weight: 700 !important;
    margin: 0;
}

/* Achieved vs convertible loyalty breakdown (scores page header, dashboard stat card). */
body.kh-customer-panel-body .kh-panel-loyalty-score-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

body.kh-customer-panel-body .kh-panel-loyalty-score-summary--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
}

body.kh-customer-panel-body .kh-panel-loyalty-score-summary__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.5rem;
}

body.kh-customer-panel-body .kh-panel-loyalty-score-summary__label {
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: #6b7280;
}

body.kh-customer-panel-body .kh-panel-loyalty-score-summary__value {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: #1f2937;
}

body.kh-customer-panel-body .kh-panel-loyalty-score-summary__value--convertible {
    color: #d97706;
}

body.kh-customer-panel-body .kh-panel-loyalty-score-summary__sep {
    color: #d1d5db;
    font-size: 0.875rem;
    line-height: 1;
}

body.kh-customer-panel-body .kh-panel-scores-heading-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.kh-customer-panel-body .kh-panel-dashboard-score-card .kh-panel-loyalty-score-summary {
    margin-top: 0.5rem;
}

body.kh-customer-panel-body .kh-panel-dashboard-score-card .kh-panel-loyalty-score-summary__label,
body.kh-customer-panel-body .kh-panel-dashboard-score-card .kh-panel-loyalty-score-summary__value {
    font-size: 0.6875rem;
    line-height: 1.125rem;
}

body.kh-customer-panel-body .kh-panel-scores-hero-card .kh-panel-loyalty-score-summary {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

body.kh-customer-panel-body .kh-panel-scores-hero-card .kh-panel-loyalty-score-summary__label {
    color: rgba(255, 255, 255, 0.85);
}

body.kh-customer-panel-body .kh-panel-scores-hero-card .kh-panel-loyalty-score-summary__value {
    color: #fff;
}

body.kh-customer-panel-body .kh-panel-scores-hero-card .kh-panel-loyalty-score-summary__value--convertible {
    color: #fef3c7;
}

/*
 * Card / block section titles (h3) across wallet, scores, history, etc.
 * Without this, Woodmart and similar themes apply 1.5–2rem h3 on small screens while local h4 uses text-sm — inconsistent hierarchy.
 */
body.kh-customer-panel-body .kh-panel-section-heading {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0;
}

/* `.kh-panel-section-title` kept on dashboard blocks for backwards compatibility; font size comes from `.kh-panel-section-heading`. */

.kh-panel-stat-value {
    font-size: 18px;
    line-height: 1.4;
}

.kh-panel-stat-label,
.kh-panel-membership-meta,
.kh-panel-progress-hint,
.kh-panel-progress-meta,
.kh-panel-order-date,
.kh-panel-quick-link-subtitle {
    font-size: 13px;
}

.kh-panel-order-id,
.kh-panel-order-total,
.kh-panel-quick-link-title,
.kh-panel-membership-level {
    font-size: 15px;
}
.kh-panel-membership-level {
    margin-bottom: 10px !important;
}

/* Orders view accordion styling. */
.kh-panel-orders-root .kh-panel-order-card {
    border-radius: 1rem;
}

.kh-panel-order-summary {
    cursor: pointer;
}

.kh-panel-order-summary::-webkit-details-marker {
    display: none;
}

.kh-panel-order-item-thumb .kh-panel-order-thumb {
    width: 2.25rem;
    height: 2.25rem;
}

.kh-panel-order-toggle-icon-svg {
    color: #9ca3af;
    transition: transform 0.2s ease;
}

details[open] .kh-panel-order-toggle-icon-svg {
    transform: rotate(180deg);
}

.kh-panel-orders-root .kh-panel-order-card > div {
    background-color: #f9fafb;
}

.kh-panel-orders-root .kh-panel-order-card > div .kh-panel-order-summary {
    background-color: #ffffff;
}

.kh-panel-orders-root .kh-panel-order-card .kh-panel-order-items-wrapper {
    border-radius: 0 0 1rem 1rem;
}

/*
 * Order item title / thumbnail anchor: keep the in-list visual identity (no underline,
 * inherits the title color) but reveal the brand primary on hover/focus so the item
 * clearly behaves as a link to the product page.
 */
.kh-panel-order-item-name-link {
    display: inline-block;
    text-decoration: none !important;
    color: inherit !important;
    transition: color 0.15s ease;
}

.kh-panel-order-item-name-link:hover,
.kh-panel-order-item-name-link:focus-visible {
    color: rgb(22,163,74) !important;
    text-decoration: none !important;
}

.kh-panel-order-item-thumb-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    line-height: 0;
}

.kh-panel-order-item-thumb-link .kh-panel-order-thumb {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kh-panel-order-item-thumb-link:hover .kh-panel-order-thumb,
.kh-panel-order-item-thumb-link:focus-visible .kh-panel-order-thumb {
    transform: scale(1.04);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

/*
 * Order cancellation control rendered on the dashboard recent-orders block and the orders
 * list. Theme stylesheets (Woodmart) tend to win on raw <button> rules, so the selectors
 * below are explicit and use !important to neutralize global resets.
 */
.kh-panel-order-cancel-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.kh-panel-order-cancel-btn {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 0.5rem !important;
    text-transform: none !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    padding: 0.4rem 0.75rem !important;
    border: 1px solid #fecaca !important;
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.kh-panel-order-cancel-btn:hover:not([aria-disabled="true"]),
.kh-panel-order-cancel-btn:focus-visible:not([aria-disabled="true"]) {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

.kh-panel-order-cancel-btn[aria-disabled="true"],
.kh-panel-order-cancel-btn--busy {
    opacity: 0.65;
    cursor: progress;
}

.kh-panel-order-cancel-btn--compact {
    padding: 0.3rem 0.55rem !important;
    font-size: 0.7rem !important;
}

/* Repeat order: primary-outline CTA aligned with pay / cancel row (theme-neutral). */
.kh-panel-order-repeat-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
}

.kh-panel-order-repeat-link {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 0.5rem !important;
    text-transform: none !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    padding: 0.4rem 0.75rem !important;
    border: 1px solid rgba(140, 188, 103, 0.85) !important;
    background-color: #f4faf0 !important;
    color: rgb(90, 130, 60) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.kh-panel-order-repeat-link:hover,
.kh-panel-order-repeat-link:focus-visible {
    background-color: rgba(140, 188, 103, 0.18) !important;
    border-color: rgb(111, 163, 77) !important;
    color: rgb(55, 88, 38) !important;
}

.kh-panel-order-repeat-link--compact {
    padding: 0.3rem 0.55rem !important;
    font-size: 0.7rem !important;
}

.kh-panel-order-cancel-notice {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.35;
    text-align: left;
}

.kh-panel-order-cancel-notice--success {
    color: #047857;
}

.kh-panel-order-cancel-notice--error {
    color: #b91c1c;
}

/* Wallet quick amount buttons: active state mirrors primary palette. */
.kh-wallet-quick-amount {
    position: static !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: 0.75rem !important;
    text-transform: none !important;
    font-weight: 500 !important;
    min-height: 0 !important;
    padding: 0.625rem 0.75rem !important;
    line-height: 1.4;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #e5e7eb !important;
    background-color: #f9fafb !important;
    color: #4b5563 !important;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.kh-wallet-quick-amount--active {
    background-color: rgb(22,163,74) !important;
    border-color: rgba(140, 188, 103, 0.8) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(140, 188, 103, 0.08), 0 6px 14px rgba(140, 188, 103, 0.25);
}

/* Edit-account submit: same primary CTA as wallet (theme neutralizes Tailwind on buttons). */
.kh-panel-edit-account-form button[type="submit"].kh-panel-edit-account-submit,
#kh-panel-edit-account-submit {
    position: static !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 0.75rem !important;
    text-transform: none !important;
    font-weight: 700 !important;
    min-height: 0 !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
    line-height: 1.4;
    border-width: 0 !important;
    background-color: rgb(22,163,74) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.kh-panel-edit-account-form button[type="submit"].kh-panel-edit-account-submit:hover:not(:disabled),
#kh-panel-edit-account-submit:hover:not(:disabled) {
    background-color: #6fa34d !important;
}

.kh-panel-edit-account-form button[type="submit"].kh-panel-edit-account-submit:focus-visible,
#kh-panel-edit-account-submit:focus-visible {
    outline: 2px solid rgba(140, 188, 103, 0.65);
    outline-offset: 2px;
}

/* Wallet submit button: neutralize theme button preset inside the panel. */
.kh-wallet-topup-form button[type="submit"] {
    position: static !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-radius: 0.75rem !important;
    text-transform: none !important;
    font-weight: 700 !important;
    min-height: 0 !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
    line-height: 1.4;
    border-width: 0 !important;
    background-color: rgb(22,163,74) !important;
    color: #ffffff !important;
    box-shadow: none;
}

/* Become-vendor form submit: same primary CTA treatment as wallet / scores. */
.kh-panel-become-vendor-form button.kh-panel-become-vendor-submit,
.kh-panel-become-vendor-form button[type="submit"] {
    position: static !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem !important;
    text-transform: none !important;
    font-weight: 700 !important;
    min-height: 0 !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
    line-height: 1.4;
    border-width: 0 !important;
    background-color: rgb(22,163,74) !important;
    color: #ffffff !important;
    box-shadow: none;
    cursor: pointer;
}

.kh-panel-become-vendor-form button.kh-panel-become-vendor-submit:hover,
.kh-panel-become-vendor-form button[type="submit"]:hover {
    background-color: rgb(120, 168, 85) !important;
    color: #ffffff !important;
}

/* Scores: «تبدیل به کیف پول» — same primary CTA as wallet submit (theme overrides Tailwind on buttons). */
#kh-scores-redeem-btn {
    position: static !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 0.75rem !important;
    text-transform: none !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
    line-height: 1.4;
    padding: 0.625rem 1rem !important;
    min-height: 0 !important;
    border-width: 0 !important;
    background-color: rgb(22,163,74) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

#kh-scores-redeem-btn:hover:not(:disabled) {
    background-color: #6fa34d !important;
}

#kh-scores-redeem-btn:focus-visible {
    outline: 2px solid rgba(140, 188, 103, 0.65);
    outline-offset: 2px;
}

#kh-scores-redeem-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Remove native number input arrows inside wallet topup field. */
.kh-wallet-topup-form input[type="number"]::-webkit-outer-spin-button,
.kh-wallet-topup-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.kh-wallet-topup-form input[type="number"] {
    -moz-appearance: textfield;
}

@media (max-width: 639px) {
    /*
     * Panel views: Tailwind `text-xs` / `text-sm` map to 12px / 14px; on narrow phones that reads tiny
     * next to theme typography. Nudge minimum sizes only under max-width 639px (tablet keeps utilities as-authored).
     */
    body.kh-customer-panel-body .kh-panel-scores-root,
    body.kh-customer-panel-body .kh-panel-wallet-root,
    body.kh-customer-panel-body .kh-panel-orders-root,
    body.kh-customer-panel-body .kh-panel-dashboard-root,
    body.kh-customer-panel-body .kh-panel-edit-account-root {
        font-size: 1rem;
        line-height: 1.65;
    }

    body.kh-customer-panel-body .kh-panel-scores-root .text-xs,
    body.kh-customer-panel-body .kh-panel-wallet-root .text-xs,
    body.kh-customer-panel-body .kh-panel-orders-root .text-xs,
    body.kh-customer-panel-body .kh-panel-dashboard-root .text-xs,
    body.kh-customer-panel-body .kh-panel-edit-account-root .text-xs {
        font-size: 0.875rem !important;
        line-height: 1.45rem !important;
    }

    body.kh-customer-panel-body .kh-panel-scores-root .text-sm,
    body.kh-customer-panel-body .kh-panel-wallet-root .text-sm,
    body.kh-customer-panel-body .kh-panel-orders-root .text-sm,
    body.kh-customer-panel-body .kh-panel-dashboard-root .text-sm,
    body.kh-customer-panel-body .kh-panel-edit-account-root .text-sm {
        font-size: 0.9375rem !important;
        line-height: 1.5rem !important;
    }

    body.kh-customer-panel-body .kh-panel-dashboard-root .kh-panel-tier-label,
    body.kh-customer-panel-body .kh-panel-dashboard-root .kh-panel-quick-link-subtitle,
    body.kh-customer-panel-body .kh-panel-dashboard-root .kh-panel-progress-hint {
        font-size: 0.8125rem !important;
        line-height: 1.35rem !important;
    }

    body.kh-customer-panel-body .kh-panel-scores-root .kh-panel-scores-tier-threshold {
        font-size: 0.8125rem !important;
    }

    .kh-panel-dashboard-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0.75rem;
    }

    body.kh-customer-panel-body .kh-panel-section-heading {
        font-size: 1.0625rem !important;
    }

    .kh-panel-stat-value {
        font-size: 17px;
    }

    .kh-panel-order-id,
    .kh-panel-order-total {
        font-size: 14px;
    }

    .kh-panel-banner-primary-responsive {
        padding: 1.25rem;
    }

    .kh-panel-footer p{
        font-size: 11px;
    }
    .kh-panel-footer ul{
        padding-right: unset !important;
    }

    .kh-panel-footer li{
        font-size: 9px;
    }

    .kh-panel-header-icon{
        width: 1.6rem;
        height: 1.6rem;
    }

    .kh-panel-dashboard-icon{
        width: 1.6rem;
        height: 1.6rem;
    }

    .kh-panel-dashboard-arrow{
        width: 1.25rem;
        height: 1.25rem;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .kh-panel-dashboard-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.kh-customer-panel-body .kh-panel-section-heading {
        font-size: 1.0625rem !important;
    }

    .kh-panel-stat-value {
        font-size: 1.35rem;
    }
}

/* WooCommerce notices inside the standalone panel */
body.kh-customer-panel-body .kh-panel-wc-notices .woocommerce-message,
body.kh-customer-panel-body .kh-panel-wc-notices .woocommerce-error,
body.kh-customer-panel-body .kh-panel-wc-notices .woocommerce-info {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    list-style: none;
}

body.kh-customer-panel-body .kh-panel-wc-notices .woocommerce-message {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

body.kh-customer-panel-body .kh-panel-wc-notices .woocommerce-error {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

body.kh-customer-panel-body .kh-panel-wc-notices .woocommerce-info {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* Fixed bottom navigation — mobile & tablet only (hidden on lg+ / desktop; sidebar is used there) */
body.kh-customer-panel-body .kh-panel-sticky-toolbar {
    display: none;
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 35;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    gap: 0.375rem;
    min-height: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    padding: 0.5rem 0.625rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.06);
}

body.kh-customer-panel-body .kh-panel-sticky-toolbar__link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.45rem 0.35rem;
    border-radius: 0.65rem;
    text-decoration: none;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.kh-customer-panel-body .kh-panel-sticky-toolbar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

body.kh-customer-panel-body .kh-panel-sticky-toolbar__svg {
    width: 1.375rem;
    height: 1.375rem;
    display: block;
}

body.kh-customer-panel-body .kh-panel-sticky-toolbar__link:hover,
body.kh-customer-panel-body .kh-panel-sticky-toolbar__link:focus-visible {
    background-color: #f8fafc;
    color: #334155;
    outline: none;
}

body.kh-customer-panel-body .kh-panel-sticky-toolbar__link--active {
    color: rgb(22,163,74);
    background-color: rgba(140, 188, 103, 0.12);
}

body.kh-customer-panel-body .kh-panel-sticky-toolbar__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile & tablet: show bottom bar, reserve space, larger tap targets */
@media (max-width: 1023px) {
    body.kh-customer-panel-body .kh-panel-has-bottom-toolbar {
        padding-bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px));
    }

    body.kh-customer-panel-body .kh-panel-sticky-toolbar {
        display: flex;
        min-height: calc(4.25rem + env(safe-area-inset-bottom, 0px));
        padding: 0.65rem 0.5rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
        gap: 0.25rem;
    }

    body.kh-customer-panel-body .kh-panel-sticky-toolbar__link {
        min-height: 3.25rem;
        padding: 0.55rem 0.2rem;
        font-size: 0.875rem;
        line-height: 1.3;
        gap: 0.25rem;
    }

    body.kh-customer-panel-body .kh-panel-sticky-toolbar__svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Desktop (lg+): hide bottom shortcut bar; navigation is in the sidebar */
@media (min-width: 1024px) {
    body.kh-customer-panel-body .kh-panel-sticky-toolbar {
        display: none !important;
    }

    body.kh-customer-panel-body .kh-panel-has-bottom-toolbar {
        padding-bottom: 0;
    }
}

/* Copyright strip above the sticky bar: readable size on phones */
@media (max-width: 1023px) {
    body.kh-customer-panel-body .kh-panel-chrome-footer {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    body.kh-customer-panel-body .kh-panel-chrome-footer .kh-panel-footer {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    body.kh-customer-panel-body .kh-panel-chrome-footer .kh-panel-footer a {
        font-size: inherit;
    }
}

/* ------------------------------------------------------------------ */
/* Active coupons table (dashboard)                                   */
/* ------------------------------------------------------------------ */

body.kh-customer-panel-body .kh-panel-active-coupons__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.kh-customer-panel-body .kh-panel-active-coupons__table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
}

body.kh-customer-panel-body .kh-panel-active-coupons__table thead th {
    padding: 0.65rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
    white-space: nowrap;
}

body.kh-customer-panel-body .kh-panel-active-coupons__table tbody td {
    padding: 0.9rem 1.25rem;
    font-size: 0.875rem;
    color: #374151;
    border-bottom: 1px solid #f9fafb;
    vertical-align: middle;
}

body.kh-customer-panel-body .kh-panel-active-coupons__table tbody tr:last-child td {
    border-bottom: 0;
}

body.kh-customer-panel-body .kh-panel-active-coupons__table tbody tr:hover td {
    background: rgba(249, 250, 251, 0.6);
}

body.kh-customer-panel-body .kh-panel-active-coupons__code-text {
    display: inline-block;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: #1f2937;
    background: #f4f9f0;
    border: 1px solid #d1e7c3;
    border-radius: 0.5rem;
    padding: 0.3rem 0.65rem;
}

body.kh-customer-panel-body .kh-panel-active-coupons__expiry-text {
    color: #6b7280;
    font-size: 0.8125rem;
    white-space: nowrap;
}

body.kh-customer-panel-body .kh-panel-active-coupons__col-action,
body.kh-customer-panel-body .kh-panel-active-coupons__action {
    text-align: left;
    width: 1%;
    white-space: nowrap;
}

body.kh-customer-panel-body .kh-panel-active-coupons__copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.65rem;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: rgb(140, 188, 103);
    box-shadow: 0 1px 2px rgba(87, 127, 61, 0.2);
    transition: background 0.15s ease, transform 0.15s ease;
}

body.kh-customer-panel-body .kh-panel-active-coupons__copy-btn:hover {
    background: #6fa34d;
}

body.kh-customer-panel-body .kh-panel-active-coupons__copy-btn:active {
    transform: scale(0.97);
}

body.kh-customer-panel-body .kh-panel-active-coupons__copy-btn--copied {
    background: #577f3d;
}

body.kh-customer-panel-body .kh-panel-active-coupons__copy-icon {
    display: inline-flex;
    line-height: 0;
}

/* Stack table rows as labeled cards on narrow screens. */
@media (max-width: 639px) {
    body.kh-customer-panel-body .kh-panel-active-coupons__table thead {
        display: none;
    }

    body.kh-customer-panel-body .kh-panel-active-coupons__table,
    body.kh-customer-panel-body .kh-panel-active-coupons__table tbody,
    body.kh-customer-panel-body .kh-panel-active-coupons__table tr,
    body.kh-customer-panel-body .kh-panel-active-coupons__table td {
        display: block;
        width: 100%;
    }

    body.kh-customer-panel-body .kh-panel-active-coupons__table tbody tr {
        padding: 0.85rem 1.25rem 1rem;
        border-bottom: 1px solid #f3f4f6;
    }

    body.kh-customer-panel-body .kh-panel-active-coupons__table tbody tr:last-child {
        border-bottom: 0;
    }

    body.kh-customer-panel-body .kh-panel-active-coupons__table tbody td {
        padding: 0.35rem 0;
        border-bottom: 0;
        text-align: right;
    }

    body.kh-customer-panel-body .kh-panel-active-coupons__table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        color: #9ca3af;
        margin-bottom: 0.2rem;
    }

    body.kh-customer-panel-body .kh-panel-active-coupons__action {
        text-align: right;
        width: 100%;
        margin-top: 0.35rem;
    }

    body.kh-customer-panel-body .kh-panel-active-coupons__expiry-text {
        white-space: normal;
    }
}