/* ============================================================
   WKN AJAX WooCommerce Filter — Frontend Styles
   Widget sidebar + loop container overlay
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
    --wkn-primary   : #e53935;
    --wkn-radius    : 6px;
    --wkn-border    : #e0e0e0;
    --wkn-text      : #333333;
    --wkn-text-sm   : #666666;
    --wkn-bg        : #ffffff;
    --wkn-shadow-sm : 0 2px 8px rgba(0,0,0,.08);
    --wkn-transition: 200ms ease;
}

/* ── Flatsome override: .col-inner ul/ol li adds margin-left: 1.3em ──── */
.wkn-filter-widget-wrap ul li,
.wkn-filter-widget-wrap ol li { margin-left: 0 !important; }

/* ── Utility ───────────────────────────────────────────────────────────── */
/* sr-only: ẩn input gốc nhưng vẫn hoạt động với :checked CSS selector */
.sr-only,
.wkn-filter-widget-wrap input.wkn-term-checkbox {
    position : absolute;
    width    : 1px;
    height   : 1px;
    padding  : 0;
    margin   : -1px;
    overflow : hidden;
    clip     : rect(0,0,0,0);
    white-space: nowrap;
    border   : 0;
}

/* ════════════════════════════════════════════════════════════════════════
   LOADING OVERLAY — fixed, giữa màn hình
   ════════════════════════════════════════════════════════════════════════ */
#wkn-loading-overlay {
    position   : fixed;
    top        : 50%;
    left       : 50%;
    transform  : translate(-50%, -50%);
    z-index    : 99999;
    background : rgba(255, 255, 255, .92);
    padding    : 24px 32px;
    border-radius: 12px;
    box-shadow : 0 8px 32px rgba(0,0,0,.18);
    text-align : center;
    pointer-events: none;
}
.wkn-loading-logo {
    display   : block;
    max-width : 130px;
    max-height: 65px;
    object-fit: contain;
    animation : wkn-pulse 1.1s ease-in-out infinite;
}
@keyframes wkn-pulse {
    0%,100% { opacity:1; }
    50%     { opacity:.35; }
}
.wkn-spinner {
    width        : 38px;
    height       : 38px;
    border       : 3px solid rgba(229,57,53,.2);
    border-top   : 3px solid var(--wkn-primary);
    border-radius: 50%;
    animation    : wkn-spin .65s linear infinite;
}
@keyframes wkn-spin { to { transform:rotate(360deg); } }

/* ── Loop container loading state ─────────────────────────────────────── */
.wkn-loop-container {
    position: relative;
    min-height: 100px;
    transition: opacity .2s;
}
.wkn-loop-container.wkn-is-loading {
    pointer-events: none;
    opacity: .5;
}

/* ════════════════════════════════════════════════════════════════════════
   WIDGET WRAPPER
   ════════════════════════════════════════════════════════════════════════ */
.wkn-filter-widget-wrap {
    /* CSS vars override có thể set từng widget */
}

/* ── Sắp xếp ──────────────────────────────────────────────────────────── */
.wkn-widget-sort {
    margin-bottom: 16px;
}
.wkn-widget-sort select.wkn-sort-select,
.wkn-sort-select {
    width           : 100%;
    height          : 36px;
    padding         : 0 30px 0 10px;
    border          : 1px solid var(--wkn-border);
    border-radius   : var(--wkn-radius);
    font-size       : 13px;
    color           : var(--wkn-text);
    background      : #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    appearance      : none;
    cursor          : pointer;
}
.wkn-sort-select:focus {
    outline     : none;
    border-color: var(--wkn-primary);
}

/* ════════════════════════════════════════════════════════════════════════
   FILTER GROUPS
   ════════════════════════════════════════════════════════════════════════ */
.wkn-filter-group {
    border-bottom: 1px solid var(--wkn-border);
    padding-bottom: 4px;
    margin-bottom : 4px;
}
.wkn-group-title {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    width          : 100%;
    padding        : 11px 0;
    background     : none;
    border         : none;
    font-size      : 13.5px;
    font-weight    : 700;
    color          : var(--wkn-text);
    cursor         : pointer;
    text-align     : left;
    transition     : color var(--wkn-transition);
}
.wkn-group-title:hover { color: var(--wkn-primary); }

.wkn-chevron {
    flex-shrink : 0;
    transition  : transform var(--wkn-transition);
    color       : var(--wkn-text-sm);
}
.wkn-filter-group.is-collapsed .wkn-chevron {
    transform: rotate(-90deg);
}
.wkn-group-body {
    padding-bottom: 12px;
}
.wkn-filter-group.is-collapsed .wkn-group-body {
    display: none;
}

/* ── Checkbox list ─────────────────────────────────────────────────────── */
.wkn-checklist { list-style:none; margin:0; padding:0; }
.wkn-checklist li { margin:0; padding:0; }

.wkn-checkbox-label {
    display    : flex;
    align-items: center;
    gap        : 8px;
    padding    : 4px 0;
    font-size  : 13px;
    color      : var(--wkn-text);
    cursor     : pointer;
    transition : color var(--wkn-transition);
    user-select: none;
}
.wkn-checkbox-label:hover { color: var(--wkn-primary); }

.wkn-checkbox-custom {
    width       : 16px;
    height      : 16px;
    border      : 1.5px solid #bbb;
    border-radius: 3px;
    flex-shrink : 0;
    position    : relative;
    background  : #fff;
    transition  : var(--wkn-transition);
}
.wkn-term-checkbox:checked + .wkn-checkbox-custom {
    background  : var(--wkn-primary);
    border-color: var(--wkn-primary);
}
.wkn-term-checkbox:checked + .wkn-checkbox-custom::after {
    content   : '';
    position  : absolute;
    left:3px; top:1px;
    width:6px; height:9px;
    border    : 2px solid #fff;
    border-top: none;
    border-left:none;
    transform : rotate(45deg);
}
.wkn-term-count {
    margin-left: auto;
    font-size  : 11.5px;
    color      : var(--wkn-text-sm);
}

/* ── Brand Logos ──────────────────────────────────────────────────────── */
.wkn-logos {
    display              : grid;
    grid-template-columns: repeat(var(--wkn-cols, 4), 1fr);
    gap                  : 8px;
}
.wkn-logo-item { cursor:pointer; }
.wkn-logo-inner {
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 5px 9px;
    border         : 1px solid #E5E7EB;
    border-radius  : 4px;
    min-width      : 54px;
    min-height     : 34px;
    background     : #fff;
    transition     : var(--wkn-transition);
}
.wkn-logo-inner img {
    display  : block;
    height   : 22px;
    width    : auto;
    max-width: 64px;
    object-fit: contain;
    filter   : grayscale(1) opacity(.65);
    transition: filter var(--wkn-transition);
}
.wkn-logo-text {
    font-size  : 12px;
    font-weight: 600;
    color      : var(--wkn-text-sm);
    white-space: nowrap;
}
.wkn-logo-item input:checked + .wkn-logo-inner {
    border-color: var(--wkn-primary);
    background  : rgba(229,57,53,.05);
}
.wkn-logo-item input:checked + .wkn-logo-inner img {
    filter: grayscale(0) opacity(1);
}
.wkn-logo-item input:checked + .wkn-logo-inner .wkn-logo-text {
    color: var(--wkn-primary);
}
.wkn-logo-inner:hover {
    border-color: var(--wkn-primary);
    box-shadow  : var(--wkn-shadow-sm);
}

/* ── Color Swatches ───────────────────────────────────────────────────── */
.wkn-swatches {
    display              : grid;
    grid-template-columns: repeat(var(--wkn-cols, 5), 1fr);
    gap                  : 8px;
}
.wkn-swatch-item { cursor:pointer; text-align:center; }
.wkn-swatch-circle {
    display      : block;
    width        : 100%;
    aspect-ratio : 1 / 1;
    border-radius: 50%;
    border       : 1px solid #E5E7EB;
    box-shadow   : 0 0 0 1.5px var(--wkn-border);
    margin       : 0 auto 3px;
    transition   : var(--wkn-transition);
    background   : #ccc;
}
/* Square variant — toggled by .wkn-swatch-square on widget wrapper */
.wkn-swatch-square .wkn-swatch-circle {
    border-radius: 4px;
    aspect-ratio : unset;
    height       : 26px;
}
.wkn-swatch-name {
    display       : block;
    font-size     : 10px;
    color         : var(--wkn-text-sm);
    max-width     : 40px;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}
.wkn-swatch-item input:checked + .wkn-swatch-circle {
    box-shadow: 0 0 0 2px var(--wkn-primary);
    transform : scale(1.1);
}
.wkn-swatch-circle:hover {
    box-shadow: 0 0 0 2px var(--wkn-primary);
}

/* ── Button Swatches ──────────────────────────────────────────────────── */
.wkn-btn-swatches {
    display              : grid;
    grid-template-columns: repeat(var(--wkn-cols, 3), 1fr);
    gap                  : 6px;
}
.wkn-btn-swatch-item { cursor:pointer; }
.wkn-btn-swatch-label {
    display      : block;
    text-align   : center;
    padding      : 4px 11px;
    border       : 1px solid #E5E7EB;
    border-radius: 4px;
    font-size    : 12.5px;
    color        : var(--wkn-text);
    background   : #fff;
    transition   : var(--wkn-transition);
    user-select  : none;
}
.wkn-btn-swatch-item input:checked + .wkn-btn-swatch-label {
    border-color: var(--wkn-primary);
    color       : var(--wkn-primary);
    font-weight : 600;
}
.wkn-btn-swatch-label:hover {
    border-color: var(--wkn-primary);
    color       : var(--wkn-primary);
}

/* ════════════════════════════════════════════════════════════════════════
   PRICE FILTER
   ════════════════════════════════════════════════════════════════════════ */
.wkn-price-presets {
    display              : grid;
    grid-template-columns: repeat(var(--wkn-cols, 1), 1fr);
    gap                  : 3px;
    margin-bottom        : 14px;
}
.wkn-price-preset-label {
    display    : flex;
    align-items: center;
    gap        : 7px;
    font-size  : 13px;
    color      : var(--wkn-text);
    cursor     : pointer;
    padding    : 3px 0;
    transition : color var(--wkn-transition);
    user-select: none;
}
.wkn-price-preset-label:hover { color:var(--wkn-primary); }
.wkn-price-preset-label input[type="radio"] {
    accent-color: var(--wkn-primary);
    width: 14px; height: 14px;
    flex-shrink: 0;
}

/* Dual-range slider */
.wkn-slider-wrap { margin: 4px 0 14px; padding: 0 8px; }
.wkn-slider-track {
    position     : relative;
    height       : 4px;
    background   : var(--wkn-border);
    border-radius: 4px;
    margin-bottom: 8px;
}
.wkn-slider-fill {
    position     : absolute;
    height       : 100%;
    background   : var(--wkn-primary);
    border-radius: 4px;
    left: 0; right: 0;
    pointer-events: none;
}
.wkn-slider-track input[type="range"] {
    position  : absolute;
    top       : -8px;
    left      : -8px;
    right     : -8px;
    width     : calc(100% + 16px);
    -webkit-appearance: none;
    appearance: none;
    height    : 20px;
    background: transparent;
    pointer-events: none;
    outline: none;
    margin: 0; padding: 0;
}
.wkn-slider-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width        : 18px;
    height       : 18px;
    border-radius: 50%;
    background   : #fff;
    border       : 2px solid var(--wkn-primary);
    box-shadow   : 0 1px 4px rgba(0,0,0,.2);
    cursor       : grab;
    pointer-events: all;
    transition   : transform .12s;
}
.wkn-slider-track input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.18);
}
.wkn-slider-track input[type="range"]::-moz-range-thumb {
    width        : 16px;
    height       : 16px;
    border-radius: 50%;
    background   : #fff;
    border       : 2px solid var(--wkn-primary);
    box-shadow   : 0 1px 4px rgba(0,0,0,.2);
    cursor       : grab;
    pointer-events: all;
}
.wkn-slider-labels {
    display        : flex;
    justify-content: space-between;
    font-size      : 11.5px;
    color          : var(--wkn-text-sm);
}

/* Manual price inputs */
.wkn-price-inputs {
    display    : flex;
    align-items: center;
    gap        : 6px;
    margin-top : 10px;
}
.wkn-price-inputs input[type="number"] {
    flex        : 1;
    min-width   : 0;
    height      : 32px;
    padding     : 0 7px;
    border      : 1px solid var(--wkn-border);
    border-radius: var(--wkn-radius);
    font-size   : 12.5px;
    color       : var(--wkn-text);
    text-align  : center;
    -moz-appearance: textfield;
}
.wkn-price-inputs input[type="number"]::-webkit-outer-spin-button,
.wkn-price-inputs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; }
.wkn-price-inputs input:focus {
    outline     : none;
    border-color: var(--wkn-primary);
    box-shadow  : 0 0 0 2px rgba(229,57,53,.12);
}
.wkn-price-sep { color:var(--wkn-text-sm); flex-shrink:0; font-size:13px; }

/* ════════════════════════════════════════════════════════════════════════
   NÚT XÓA BỘ LỌC (compact — thay thế tags bar cũ)
   ════════════════════════════════════════════════════════════════════════ */
.wkn-clear-btn {
 display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 11px;
    border: 1px solid var(--wkn-primary);
    border-radius: 5px;
    background: #fff;
    font-size: 14px;
    color: var(--wkn-primary);
    cursor: pointer;
    font-weight: normal;
    white-space: nowrap;
    transition: var(--wkn-transition);
    line-height: 1;
    text-transform: inherit;
    margin-bottom: 4px;
}
.wkn-clear-btn:hover {
    background: var(--wkn-primary);
    color     : #fff;
}
.wkn-clear-btn svg {
    flex-shrink: 0;
    stroke     : currentColor;
}

/* Badge số lượng filter đang chọn */
.wkn-filter-count {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    min-width      : 18px;
    height         : 18px;
    padding        : 0 4px;
    border-radius  : 50px;
    background     : var(--wkn-primary);
    color          : #fff;
    font-size      : 11px;
    font-weight    : 700;
    line-height    : 1;
}
.wkn-clear-btn:hover .wkn-filter-count {
    background: rgba(255,255,255,.3);
    color     : #fff;
}

/* Sidebar widget — clear wrap ở cuối */
.wkn-filter-widget-wrap > .wkn-clear-wrap {
    margin-top: 10px;
}

/* Option không có sản phẩm nào sau khi lọc → làm mờ */
.wkn-zero-count {
    opacity       : 0.35;
    pointer-events: none;
    cursor        : default;
}

/* ════════════════════════════════════════════════════════════════════════
   PAGINATION (bên trong loop container sau AJAX)
   ════════════════════════════════════════════════════════════════════════ */
.wkn-loop-container .woocommerce-pagination .page-numbers,
.wkn-loop-container nav.woocommerce-pagination ul {
    display  : flex;
    flex-wrap: wrap;
    list-style: none;
    gap      : 4px;
    padding  : 0;
    margin   : 20px 0 0;
    justify-content: center;
}
.wkn-loop-container .woocommerce-pagination .page-numbers li { margin:0; padding:0; }
.wkn-loop-container .woocommerce-pagination a,
.wkn-loop-container .woocommerce-pagination span {
    display        : flex;
    align-items    : center;
    justify-content: center;
    min-width      : 36px;
    height         : 36px;
    padding        : 0 8px;
    border         : 1px solid var(--wkn-border);
    border-radius  : var(--wkn-radius);
    font-size      : 13px;
    color          : var(--wkn-text);
    text-decoration: none;
    transition     : var(--wkn-transition);
    background     : #fff;
}
.wkn-loop-container .woocommerce-pagination a:hover {
    border-color: var(--wkn-primary);
    color       : var(--wkn-primary);
}
.wkn-loop-container .woocommerce-pagination .current {
    background  : var(--wkn-primary);
    border-color: var(--wkn-primary);
    color       : #fff;
    font-weight : 700;
}

/* Result count (thêm bởi AJAX handler) */
.wkn-loop-container .woocommerce-result-count {
    font-size   : 13px;
    color       : var(--wkn-text-sm);
    margin-bottom: 10px;
}

/* ════════════════════════════════════════════════════════════════════════
   TOPBAR FILTER — thanh lọc nằm ngang phía trên vùng sản phẩm
   ════════════════════════════════════════════════════════════════════════ */
.wkn-topbar-filter {
    background   : #fff;
    border       : 1px solid var(--wkn-border);
    border-radius: var(--wkn-radius);
    margin-bottom: 16px;
}

.wkn-topbar-inner {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    gap        : 6px;
    padding    : 10px 14px;
}

/* ── Mỗi filter group trong topbar = dropdown button ─────────────────── */
.wkn-topbar-filter .wkn-filter-group {
    position     : relative;
    border-bottom: none;
    padding      : 0;
    margin       : 0;
}

.wkn-topbar-filter .wkn-group-title {
        margin-bottom: 4px;
     display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 13px;
    font-size: 14px;
    font-weight: normal;
    background: #f5f5f5;
    border: 1px solid var(--wkn-border);
    border-radius: 6px;
    text-transform: initial;
    white-space: nowrap;
    width: auto;
    color: var(--wkn-text);
    transition: var(--wkn-transition);
}

.wkn-topbar-filter .wkn-group-title:hover {
    background  : var(--wkn-primary);
    color       : #fff;
    border-color: var(--wkn-primary);
}
.wkn-topbar-filter .wkn-group-title:hover .wkn-chevron { color: #fff; }

.wkn-topbar-filter .wkn-filter-group.is-open > .wkn-group-title {
    background  : var(--wkn-primary);
    color       : #fff;
    border-color: var(--wkn-primary);
}
.wkn-topbar-filter .wkn-filter-group.is-open > .wkn-group-title .wkn-chevron {
    color    : #fff;
    transform: rotate(180deg);
}

/* ── Dropdown panel ───────────────────────────────────────────────────── */
.wkn-topbar-filter .wkn-group-body {
    display      : none;
    position     : absolute;
    top          : calc(100% + 6px);
    left         : 0;
    min-width    : 190px;
    max-width    : 320px;
    max-height   : 300px;
    overflow-y   : auto;
    background   : #fff;
    border       : 1px solid var(--wkn-border);
    border-radius: var(--wkn-radius);
    box-shadow   : 0 6px 24px rgba(0,0,0,.12);
    padding      : 12px 14px;
    z-index      : 8999;
}

.wkn-topbar-filter .wkn-filter-group.is-open > .wkn-group-body {
    display: block;
}

/* Kéo dropdown về bên phải nếu bị tràn màn hình */
.wkn-topbar-filter .wkn-filter-group.is-open.wkn-drop-right > .wkn-group-body {
    left : auto;
    right: 0;
}

/* ── Tags bar trong topbar ────────────────────────────────────────────── */
.wkn-topbar-filter .wkn-tags-bar {
    margin-top   : 0;
    border-top   : 1px solid var(--wkn-border);
    border-radius: 0 0 var(--wkn-radius) var(--wkn-radius);
    background   : #fafafa;
    padding      : 8px 14px;
}

/* ── Desktop: ẩn các thành phần chỉ dùng cho mobile ─────────────────── */
.wkn-mobile-trigger      { display: none; }
.wkn-mobile-panel-header { display: none; }
.wkn-mobile-panel-footer { display: none; }

/* Trigger count badge */
.wkn-trigger-count {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    min-width      : 18px;
    height         : 18px;
    padding        : 0 4px;
    border-radius  : 50px;
    background     : var(--wkn-primary);
    color          : #fff;
    font-size      : 11px;
    font-weight    : 700;
    line-height    : 1;
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE — popup full-screen cho topbar filter
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Ẩn panel mặc định, chỉ hiện trigger */
    .wkn-topbar-filter .wkn-topbar-panel { display: none; }

    .wkn-mobile-trigger {
        display     : inline-flex;
        align-items : center;
        gap         : 7px;
        padding     : 9px 16px;
        background  : #fff;
        border      : 1px solid var(--wkn-border);
        border-radius: var(--wkn-radius);
        font-size   : 14px;
        font-weight : 500;
        color       : var(--wkn-text);
        cursor      : pointer;
        margin      : 8px 12px;
        transition  : var(--wkn-transition);
    }
    .wkn-mobile-trigger:hover {
        border-color: var(--wkn-primary);
        color       : var(--wkn-primary);
    }

    /* Panel khi mở: fixed full-screen */
    .wkn-topbar-filter .wkn-topbar-panel.is-open {
        display        : flex;
        flex-direction : column;
        position       : fixed;
        inset          : 0;
        z-index        : 99998;
        background     : #fff;
        overflow       : hidden;
    }

    /* Header mobile */
    .wkn-mobile-panel-header {
        display        : flex;
        align-items    : center;
        justify-content: space-between;
        padding        : 14px 16px;
        border-bottom  : 1px solid var(--wkn-border);
        flex-shrink    : 0;
        font-size      : 16px;
        font-weight    : 700;
        color          : var(--wkn-text);
    }

    .wkn-mobile-close-btn {
        display        : flex;
        align-items    : center;
        justify-content: center;
        width          : 32px;
        height         : 32px;
        border         : none;
        background     : #f0f0f0;
        border-radius  : 50%;
        cursor         : pointer;
        color          : var(--wkn-text);
        transition     : var(--wkn-transition);
        flex-shrink    : 0;
    }
    .wkn-mobile-close-btn:hover {
        background: var(--wkn-primary);
        color     : #fff;
    }

    /* Inner: scrollable, stack filter groups vertically */
    .wkn-topbar-filter .wkn-topbar-inner {
        flex          : 1;
        overflow-y    : auto;
        flex-direction: column;
        flex-wrap     : nowrap;
        align-items   : stretch;
        gap           : 0;
        padding       : 0 16px;
    }

    /* Filter groups → accordion style (như sidebar) */
    .wkn-topbar-filter .wkn-filter-group {
        border-bottom: 1px solid var(--wkn-border);
        margin       : 0;
    }

    .wkn-topbar-filter .wkn-group-title {
        display      : flex;
        width        : 100%;
        padding      : 13px 0;
        background   : transparent;
        border       : none;
        border-radius: 0;
        font-size    : 14px;
        font-weight  : 600;
        color        : var(--wkn-text);
        margin       : 0;
    }
    .wkn-topbar-filter .wkn-group-title:hover,
    .wkn-topbar-filter .wkn-filter-group.is-open > .wkn-group-title {
        background  : transparent;
        color       : var(--wkn-primary);
        border-color: transparent;
    }
    .wkn-topbar-filter .wkn-filter-group.is-open > .wkn-group-title .wkn-chevron {
        color    : var(--wkn-primary);
        transform: none;
    }

    /* Tắt dropdown desktop, dùng accordion mobile */
    .wkn-topbar-filter .wkn-filter-group.is-open > .wkn-group-body {
        display: none;
    }
    .wkn-topbar-filter .wkn-filter-group:not(.is-collapsed) > .wkn-group-body {
        display: block;
    }

    /* Group body: static (không absolute) */
    .wkn-topbar-filter .wkn-group-body {
        position    : static !important;
        max-width   : none !important;
        max-height  : none !important;
        box-shadow  : none !important;
        border      : none !important;
        border-radius: 0 !important;
        padding     : 0 0 14px !important;
        overflow    : visible !important;
    }

    /* Clear wrap trên mobile: full width */
    .wkn-topbar-filter .wkn-topbar-inner > .wkn-clear-wrap {
        padding: 12px 0;
    }
    .wkn-topbar-filter .wkn-topbar-inner > .wkn-clear-wrap .wkn-clear-btn {
        width          : 100%;
        justify-content: center;
        border-radius  : var(--wkn-radius);
    }

    /* Footer mobile */
    .wkn-mobile-panel-footer {
        display    : block;
        padding    : 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        border-top : 1px solid var(--wkn-border);
        flex-shrink: 0;
        background : #fff;
    }

    .wkn-mobile-apply-btn {
        display      : block;
        width        : 100%;
        padding      : 14px;
        background   : var(--wkn-primary);
        color        : #fff;
        border       : none;
        border-radius: var(--wkn-radius);
        font-size    : 15px;
        font-weight  : 700;
        cursor       : pointer;
        text-align   : center;
        transition   : opacity var(--wkn-transition);
    }
    .wkn-mobile-apply-btn:hover { opacity: .88; }
}

/* Khóa scroll body khi panel mobile mở */
body.wkn-no-scroll { overflow: hidden !important; }