/* ════════════════════════════════════════════════════════════
   XDatePicker v1.2 — Component styles
   Import this file alongside xdatepicker.js
   ════════════════════════════════════════════════════════════ */

/* ── CSS variables (override to theme) ── */
:root {
    --xdp-primary: #3b5bdb;
    --xdp-primary-light: #748ffc;
    --xdp-primary-dark: #2f4ac2;
    --xdp-accent: #f03e3e;
    --xdp-surface: #ffffff;
    --xdp-surface-2: #f8f9fe;
    --xdp-surface-3: #eef0fb;
    --xdp-text: #1a1d2e;
    --xdp-text-muted: #868e9c;
    --xdp-text-light: #c1c7d0;
    --xdp-border: #e4e7f0;
    --xdp-range-bg: #eef1ff;
    --xdp-shadow: 0 8px 40px rgba(59,91,219,.18), 0 2px 8px rgba(0,0,0,.08);
    --xdp-shadow-sm: 0 2px 10px rgba(59,91,219,.10);
    --xdp-radius: 16px;
    --xdp-radius-sm: 8px;
    --xdp-font: 'DM Sans', system-ui, sans-serif;
    --xdp-mono: 'DM Mono', monospace;
    --xdp-t: .15s cubic-bezier(.4,0,.2,1);
    --xdp-cell: 36px;
    --xdp-hw: 160px; /* header column width */
}

/* ════════════════════════════
   Overlay (modal backdrop)
════════════════════════════ */
.xdp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,17,30,.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: xov-in .22s ease forwards;
}

    .xdp-overlay.closing {
        animation: xov-out .2s ease forwards;
        pointer-events: none;
    }

@keyframes xov-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes xov-out {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

/* ════════════════════════════
   Popover / dropdown mode
   (when alignTo is provided)
════════════════════════════ */
.xdp-overlay--popover {
    /* Mantiene el fondo oscuro/blur del base, pero cambia flex→block
     para que el wrapper hijo se posicione libremente vía JS (position:fixed) */
    display: block;
    /* El overlay base arranca en opacity:0 animándose a 1 — conservar eso */
}

    .xdp-overlay--popover.closing {
        animation: xov-out .2s ease forwards;
        pointer-events: none;
    }

    /* El picker flota en posición fija calculada por _positionPopover() */
    .xdp-overlay--popover > .xdp-wrapper {
        position: fixed;
        /* top / left — asignados dinámicamente */
        animation: xdp-popover-in .2s cubic-bezier(.34,1.4,.64,1) forwards;
    }

        .xdp-overlay--popover > .xdp-wrapper.closing {
            animation: xdp-popover-out .16s ease forwards;
        }

@keyframes xdp-popover-in {
    from {
        transform: scale(.97) translateY(6px);
        opacity: 0
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1
    }
}

@keyframes xdp-popover-out {
    from {
        transform: scale(1) translateY(0);
        opacity: 1
    }

    to {
        transform: scale(.97) translateY(6px);
        opacity: 0
    }
}

/* ════════════════════════════
   Wrapper — horizontal layout
   header (left) | calendar (right)
════════════════════════════ */
.xdp-wrapper {
    font-family: var(--xdp-font);
    font-size: 14px;
    color: var(--xdp-text);
    background: var(--xdp-surface);
    border-radius: var(--xdp-radius);
    box-shadow: var(--xdp-shadow);
    overflow: hidden;
    display: inline-flex;
    flex-direction: row;
    transform: scale(.95) translateY(8px);
    animation: xpop-in .24s cubic-bezier(.34,1.56,.64,1) forwards;
    user-select: none;
    -webkit-user-select: none;
    max-width: calc(100vw - 24px);

}

    .xdp-wrapper.closing {
        animation: xpop-out .18s ease forwards;
    }

@keyframes xpop-in {
    from {
        transform: scale(.95) translateY(8px);
        opacity: 0
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1
    }
}

@keyframes xpop-out {
    from {
        transform: scale(1) translateY(0);
        opacity: 1
    }

    to {
        transform: scale(.95) translateY(8px);
        opacity: 0
    }
}

.xdp-wrapper:focus {
    outline: none;
}

.xdp-wrapper.xdp-inline {
    box-shadow: var(--xdp-shadow-sm);
    border: 1px solid var(--xdp-border);
    transform: none;
    animation: none;
}

/* ════════════════════════════
   Header — left column
════════════════════════════ */
.xdp-header {
    background: linear-gradient(160deg, var(--xdp-primary) 0%, var(--xdp-primary-light) 100%);
    padding: 24px 18px;
    position: relative;
    overflow: hidden;
    width: var(--xdp-hw);
    min-width: var(--xdp-hw);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .xdp-header::before {
        content: '';
        position: absolute;
        top: -50px;
        right: -30px;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
    }

    .xdp-header::after {
        content: '';
        position: absolute;
        bottom: -30px;
        left: -10px;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: rgba(255,255,255,.05);
    }

    .xdp-header > * {
        position: relative;
        z-index: 1;
    }

.xdp-header-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.6);
    margin-bottom: 10px;
}

/* Custom title — sits above the label/date display */
.xdp-header-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .01em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.18);
    line-height: 1.3;
}

/* Inline skeleton: shown while picker is fading in */
.xdp-skeleton {
    display: inline-flex;
    border-radius: var(--xdp-radius);
    border: 1px solid var(--xdp-border);
    overflow: hidden;
    box-shadow: var(--xdp-shadow-sm);
    background: var(--xdp-surface);
}

.xdp-skeleton-bar {
    width: var(--xdp-hw);
    background: linear-gradient(160deg, var(--xdp-primary) 0%, var(--xdp-primary-light) 100%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xdp-skeleton-body {
    flex: 1;
    min-width: 252px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xdp-skeleton-line {
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--xdp-surface-3) 25%, var(--xdp-border) 50%, var(--xdp-surface-3) 75%);
    background-size: 200% 100%;
    animation: xdp-shimmer 1.4s infinite;
}

    .xdp-skeleton-line.wide {
        width: 70%;
    }

    .xdp-skeleton-line.short {
        width: 40%;
    }

.xdp-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-top: 4px;
}

.xdp-skeleton-cell {
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--xdp-surface-3) 25%, var(--xdp-border) 50%, var(--xdp-surface-3) 75%);
    background-size: 200% 100%;
    animation: xdp-shimmer 1.4s infinite;
}

    .xdp-skeleton-cell:nth-child(2n) {
        animation-delay: .1s;
    }

    .xdp-skeleton-cell:nth-child(3n) {
        animation-delay: .2s;
    }
/* Spinner inside the header bar of the skeleton */
.xdp-skeleton-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: xdp-spin .8s linear infinite;
}

@keyframes xdp-shimmer {
    from {
        background-position: 200% 0
    }

    to {
        background-position: -200% 0
    }
}

@keyframes xdp-spin {
    to {
        transform: rotate(360deg)
    }
}

.xdp-header-weekday {
    font-size: 12px;
    color: rgba(255,255,255,.75);
}

.xdp-header-day {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.xdp-header-month-year {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.9);
    margin-top: 4px;
    line-height: 1.4;
}

/* Range header (two boxes stacked vertically) */
.xdp-header-range {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.xdp-header-range-item {
    background: rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background var(--xdp-t);
}

    .xdp-header-range-item.active {
        background: rgba(255,255,255,.22);
        box-shadow: 0 0 0 2px rgba(255,255,255,.4);
    }

.xdp-header-range-label {
    font-size: 9px;
    color: rgba(255,255,255,.6);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.xdp-header-range-value {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-top: 3px;
    word-break: break-word;
}

.xdp-header-range-arrow {
    color: rgba(255,255,255,.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .xdp-header-range-arrow svg {
        width: 16px;
        height: 16px;
        stroke-width: 2;
        transform: rotate(90deg);
    }

/* ════════════════════════════
   Right column
════════════════════════════ */
.xdp-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* ════════════════════════════
   Body / Panels
════════════════════════════ */
.xdp-body {
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.xdp-panel {
    flex: 0 0 252px;
}

    .xdp-panel + .xdp-panel {
        border-left: 1px solid var(--xdp-border);
        padding-left: 12px;
    }

/* ════════════════════════════
   Navigation
════════════════════════════ */
.xdp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.xdp-nav-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--xdp-text);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--xdp-radius-sm);
    transition: background var(--xdp-t);
}

    .xdp-nav-title:hover {
        background: var(--xdp-surface-3);
    }

.xdp-nav-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--xdp-text-muted);
    transition: background var(--xdp-t), color var(--xdp-t);
    flex-shrink: 0;
}

    .xdp-nav-btn:hover {
        background: var(--xdp-surface-3);
        color: var(--xdp-primary);
    }

    .xdp-nav-btn svg {
        width: 16px;
        height: 16px;
        stroke-width: 2.2;
    }

/* ════════════════════════════
   Weekday headers
════════════════════════════ */
.xdp-weekdays {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    margin-bottom: 4px;
}

.xdp-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--xdp-text-light);
    padding: 4px 0;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ════════════════════════════
   Day grid
════════════════════════════ */
.xdp-days {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 0;
}

.xdp-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--xdp-cell);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    border-radius: 0;
    color: var(--xdp-text);
    transition: color var(--xdp-t);
    z-index: 0;
}
    /* Circle: fixed square, always perfectly centered — never oval */
    .xdp-day::after {
        content: '';
        position: absolute;
        width: var(--xdp-cell);
        height: var(--xdp-cell);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        transition: background var(--xdp-t);
        z-index: -1;
    }

    /* States */
    .xdp-day:hover:not(.xdp-disabled):not(.xdp-other)::after {
        background: var(--xdp-surface-3);
    }

    .xdp-day:hover:not(.xdp-disabled):not(.xdp-other) {
        color: var(--xdp-primary);
        font-weight: 500;
    }

    .xdp-day.xdp-other {
        color: var(--xdp-text-light);
        pointer-events: none;
    }

    .xdp-day.xdp-disabled {
        color: var(--xdp-text-light);
        cursor: not-allowed;
        opacity: .5;
        pointer-events: none;
    }

    /* Today indicator: ring on circle */
    .xdp-day.xdp-today:not(.xdp-sel):not(.xdp-rs):not(.xdp-re) {
        font-weight: 700;
        color: var(--xdp-primary);
    }

        .xdp-day.xdp-today:not(.xdp-sel):not(.xdp-rs):not(.xdp-re)::after {
            box-shadow: inset 0 0 0 1.5px var(--xdp-primary);
        }

    /* Selected (single mode) */
    .xdp-day.xdp-sel {
        color: #fff !important;
        font-weight: 600;
        z-index: 1;
    }

        .xdp-day.xdp-sel::after {
            background: var(--xdp-primary) !important;
            box-shadow: none;
        }

    /* Range endpoints — half-fill background + solid circle */
    .xdp-day.xdp-rs {
        background: linear-gradient(to right, transparent 50%, var(--xdp-range-bg) 50%);
        color: #fff !important;
        font-weight: 600;
        z-index: 1;
    }

    .xdp-day.xdp-re {
        background: linear-gradient(to left, transparent 50%, var(--xdp-range-bg) 50%);
        color: #fff !important;
        font-weight: 600;
        z-index: 1;
    }

        .xdp-day.xdp-rs::after, .xdp-day.xdp-re::after {
            background: var(--xdp-primary) !important;
            box-shadow: none;
        }

    .xdp-day.xdp-rs.xdp-re {
        background: transparent !important;
    }

    /* In-range fill */
    .xdp-day.xdp-in {
        background: var(--xdp-range-bg);
        color: var(--xdp-primary-dark);
    }

    /* Hover preview (toggled via JS, never causes re-render) */
    .xdp-day.xdp-hin {
        background: var(--xdp-range-bg);
    }

    .xdp-day.xdp-hrs {
        background: linear-gradient(to right, transparent 50%, var(--xdp-range-bg) 50%);
        color: var(--xdp-primary) !important;
        font-weight: 500;
    }

    .xdp-day.xdp-hre {
        background: linear-gradient(to left, transparent 50%, var(--xdp-range-bg) 50%);
        color: var(--xdp-primary) !important;
        font-weight: 500;
    }

    .xdp-day.xdp-hrs::after {
        background: rgba(59,91,219,.18) !important;
    }

    .xdp-day.xdp-hre::after {
        background: rgba(59,91,219,.18) !important;
    }

    .xdp-day.xdp-hrs.xdp-hre {
        background: transparent !important;
    }

    /* Marked dot */
    .xdp-day.xdp-marked::before {
        content: '';
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--xdp-accent);
        z-index: 2;
    }

    .xdp-day.xdp-sel.xdp-marked::before,
    .xdp-day.xdp-rs.xdp-marked::before,
    .xdp-day.xdp-re.xdp-marked::before {
        background: rgba(255,255,255,.8);
    }

/* ════════════════════════════
   Month / Year grids
════════════════════════════ */
.xdp-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px;
    padding: 4px 0;
}

.xdp-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border-radius: var(--xdp-radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--xdp-text);
    transition: background var(--xdp-t), color var(--xdp-t);
}

    .xdp-grid-item:hover {
        background: var(--xdp-surface-3);
        color: var(--xdp-primary);
    }

    .xdp-grid-item.active {
        background: var(--xdp-primary);
        color: #fff;
    }

    .xdp-grid-item.disabled {
        color: var(--xdp-text-light);
        cursor: not-allowed;
        opacity: .5;
        pointer-events: none;
    }

/* ════════════════════════════
   Time picker — panel-embedded
════════════════════════════ */

/* Single slot: stacks label → spinners → hint */
.xdp-time {
    border-top: 1px solid var(--xdp-border);
    padding: 10px 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Slot label: "Start" / "End" */
.xdp-time-slot-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--xdp-primary);
    margin-bottom: 4px;
}

/* Spinner + sep + ampm sit in a row */
.xdp-spin {
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.xdp-spin-val {
    font-family: var(--xdp-mono);
    font-size: 24px;
    font-weight: 500;
    color: var(--xdp-text);
    width: 40px;
    text-align: center;
    letter-spacing: -.02em;
    padding: 2px 0;
    border-radius: 6px;
    transition: background var(--xdp-t);
}

    .xdp-spin-val:hover {
        background: var(--xdp-surface-3);
    }

.xdp-time-sep {
    padding: 0 2px;
    color: var(--xdp-text-muted);
    font-family: var(--xdp-mono);
    font-size: 24px;
    margin-bottom: 22px;
}

.xdp-spin-btn {
    width: 28px;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--xdp-text-muted);
    transition: background var(--xdp-t), color var(--xdp-t);
}

    .xdp-spin-btn:hover {
        background: var(--xdp-surface-3);
        color: var(--xdp-primary);
    }

    .xdp-spin-btn svg {
        width: 13px;
        height: 13px;
        stroke-width: 2.5;
    }

.xdp-ampm {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 8px;
}

.xdp-ampm-btn {
    padding: 4px 8px;
    border: 1.5px solid var(--xdp-border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--xdp-font);
    color: var(--xdp-text-muted);
    letter-spacing: .04em;
    transition: all var(--xdp-t);
}

    .xdp-ampm-btn.active {
        background: var(--xdp-primary);
        border-color: var(--xdp-primary);
        color: #fff;
    }

/* The spinners+sep+ampm need a row — .xdp-time children after label */
.xdp-time .xdp-spin,
.xdp-time .xdp-time-sep,
.xdp-time .xdp-ampm { /* flex children of .xdp-time, but we need a row wrapper */
}
/* Wrap spinners in a row via a sibling rule — use flex-direction:row on the .xdp-time when it has children after label */
.xdp-time {
    flex-direction: column;
}
/* Inner spinner row */
.xdp-time-spinners {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Min/max hint */
.xdp-time-hint {
    font-size: 10px;
    color: var(--xdp-text-muted);
    margin-top: 4px;
    text-align: center;
}

/* Pair container: two time slots side-by-side */
.xdp-time-pair {
    border-top: 1px solid var(--xdp-border);
    display: flex;
    align-items: stretch;
}

    .xdp-time-pair > .xdp-time {
        flex: 1;
        border-top: none;
        padding: 10px 6px 12px;
    }
/* Vertical divider */
.xdp-time-pair-div {
    width: 1px;
    background: var(--xdp-border);
    margin: 10px 0;
    flex-shrink: 0;
}


/* ════════════════════════════
   Footer
════════════════════════════ */
.xdp-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 16px;
    gap: 8px;
    border-top: 1px solid var(--xdp-border);
    background: var(--xdp-surface-2);
}

.xdp-btn {
    padding: 7px 18px;
    border-radius: var(--xdp-radius-sm);
    border: none;
    font-family: var(--xdp-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: .02em;
    transition: all var(--xdp-t);
}

.xdp-btn-cancel {
    background: transparent;
    color: var(--xdp-text-muted);
}

    .xdp-btn-cancel:hover {
        background: var(--xdp-surface-3);
        color: var(--xdp-text);
    }

.xdp-btn-clear {
    background: transparent;
    color: var(--xdp-accent);
    margin-right: auto;
}

    .xdp-btn-clear:hover {
        background: #fff0f0;
    }

.xdp-btn-ok {
    background: var(--xdp-primary);
    color: #fff;
    box-shadow: 0 3px 12px rgba(59,91,219,.35);
}

    .xdp-btn-ok:hover {
        background: var(--xdp-primary-dark);
        box-shadow: 0 4px 16px rgba(59,91,219,.45);
        transform: translateY(-1px);
    }

    .xdp-btn-ok:active {
        transform: none;
    }

/* ════════════════════════════
   Responsive
════════════════════════════ */

/* Mobile: bottom sheet, panels stack vertically */
@media (max-width: 600px) {
    .xdp-overlay {
        align-items: flex-end;
    }

    .xdp-wrapper {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        border-radius: 20px;
        max-height: 92vh;
        overflow-y: auto;
    }

    .xdp-header {
        width: 100%;
        min-width: unset;
        padding: 20px 20px 16px;
    }

    .xdp-header-range {
        flex-direction: row;
    }

    .xdp-header-range-arrow svg {
        transform: rotate(0deg);
    }

    .xdp-body {
        flex-direction: column;
        overflow-x: hidden;
    }

    .xdp-panel {
        flex: 0 0 auto;
        min-width: unset;
        width: 100%;
    }

        .xdp-panel + .xdp-panel {
            border-left: none;
            border-top: 1px solid var(--xdp-border);
            padding-left: 0;
            padding-top: 12px;
        }

    /* Skeleton on mobile: header bar on top */
    .xdp-skeleton {
        flex-direction: column;
        width: 100%;
    }

    .xdp-skeleton-bar {
        width: 100%;
        height: 80px;
    }

    .xdp-skeleton-body {
        min-width: unset;
    }

    /* Popover en móvil: por defecto mantiene posicionamiento relativo al anchor.
       Solo fuerza bottom-sheet cuando se añade la clase .xdp-overlay--popover-mobile */
    .xdp-overlay--popover.xdp-overlay--popover-mobile {
        display: flex;
        align-items: flex-end;
    }

        .xdp-overlay--popover.xdp-overlay--popover-mobile > .xdp-wrapper {
            position: static; /* cancela el position:fixed del modo popover */
            animation: xpop-in .24s cubic-bezier(.34,1.56,.64,1) forwards;
        }

            .xdp-overlay--popover.xdp-overlay--popover-mobile > .xdp-wrapper.closing {
                animation: xpop-out .18s ease forwards;
            }

    /* En móvil, cuando NO se fuerza bottom-sheet, el wrapper debe adaptarse */
    .xdp-overlay--popover:not(.xdp-overlay--popover-mobile) > .xdp-wrapper {
        max-width: calc(100vw - 16px);
    }
}

/* Tablet: slightly narrower header */
@media (min-width: 601px) and (max-width: 900px) {
    .xdp-header {
        --xdp-hw: 130px;
    }
}