/* .pf-panel {
    min-height: 95vh !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
} */
/* partner-filter.css */

#cities-village-filter-main .pf-panel {
    display: flex;
    flex-direction: column;
    /* height: 100%; or a fixed height, e.g. 480px */
    /* max-height: 80vh; */

    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* clips children to rounded corners */
}

/* ── Header ── */
#cities-village-filter-main .pf-header {
    flex-shrink: 0;
    /* never squish */
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

/* ── Scrollable body ── */
#cities-village-filter-main .pf-body {
    flex: 1;
    /* takes all remaining space */
    overflow-y: auto;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
}

/* ── Footer ── */
#cities-village-filter-main .pf-footer {
    flex-shrink: 0;
    /* never squish */
    position: sticky;
    bottom: 0;
    z-index: 10;

    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

.rainbow {
    position: relative;
    z-index: 0;

    border-radius: 10px;
    overflow: hidden;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-weight: bold;

    &::before {
        content: "";
        position: absolute;
        z-index: -2;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-color: #399953;
        background-repeat: no-repeat;
        background-size:
            50% 50%,
            50% 50%;
        background-position:
            0 0,
            100% 0,
            100% 100%,
            0 100%;
        background-image:
            linear-gradient(#399953, #399953),
            linear-gradient(#fbb300, #fbb300),
            linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
        animation: rotate 4s linear infinite;
    }

    &::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 6px;
        top: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        background: white;
        border-radius: 5px;
    }
}

/* Heading */
.sm\:p-6 .shadow-sm h3 {
    margin-bottom: 10px !important;
}

/* Heading */
.sm\:p-6 .mt-4 h3 {
    margin-bottom: 10px !important;
}

/* Relative */
.sm\:p-6 .shadow-sm .grid .relative {
    padding-top: 11px !important;
    padding-bottom: 10px !important;
}

/* Grid */
.sm\:p-6 .shadow-sm .grid {
    border-style: none;
    box-shadow: 0px 0px 0px -50px #212529;
}

#cities-village-filter-main .pf-panel .pf-body {
    padding-top: 4px;
}

/* Division */
.pf-panel .pf-body .sm\:p-6 {
    padding-top: 6px !important;
}

/* Relative */
.sm\:p-6 .mt-4 .relative {
    padding-top: 2px !important;
    padding-bottom: 8px !important;
}

/* Hover */
.sm\:p-6 .mt-4 .hover\:shadow-md {
    position: relative;
    top: -1px;
}

/* Relative */
.container #cities-village-filter-main .pf-panel .pf-body .sm\:p-6 div .grid .relative {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
}


/* Items center */
.sm\:p-6>div>.items-center {
    margin-bottom: 10px !important;
}

/* Span Tag */
.sm\:p-6 .justify-between .font-semibold span {
    font-size: 14px;
}

/* Font semibold */
.sm\:p-6 .mt-4 .justify-between .font-semibold {
    background-color: rgba(0, 0, 0, 0);
}

/* Font semibold */
.sm\:p-6 .mt-4 .font-semibold:nth-child(2) {
    background-color: #0757f7;
}

[x-cloak] {
    display: none !important;
}

/* Shadow */
.pf-body .sm\:p-6>.shadow-sm {
    margin-top: 18px !important;
}

.src-tooltip-box {
    display: none;
}

/* Compact styling for tighter tables */
.compact-table th,
.compact-table td {
    padding: 0.25rem 0.125rem !important;
    /* sm padding */
}

.compact-table tr:nth-child(odd) {
    background-color: #f9fafb !important;
    /* subtle stripe */
}

/* ── Stepper ── */
.pf-stepper {
    display: flex;
    width: 100%;
}

.pf-step {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 6px;
    cursor: pointer;
    transition: opacity 0.25s ease, filter 0.25s ease;
    /* inactive by default */
    opacity: 0.45;
    filter: grayscale(0.3);
    /* middle arrow shape */
    clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%, 12% 50%);
    margin-left: -10px;
}

/* First step: no left indent */
.pf-step--first {
    clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
    margin-left: 0;
}

/* Last step: no right point */
.pf-step--last {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 12% 50%);
}

/* Active step */
.pf-step.active {
    opacity: 1;
    filter: none;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}

/* Completed step */
.pf-step.done {
    opacity: 0.75;
    filter: none;
}

.pf-step.done .pf-step__num::before {
    content: '✓';
    font-size: 13px;
}

.pf-step.done .pf-step__num {
    font-size: 0;
    /* hide number, show tick */
}

/* Number circle */
.pf-step__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    color: #fff;
}

/* Label */
.pf-step__label {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
}

@media (max-width: 480px) {
    .pf-step__label {
        font-size: 10px;
    }

    .pf-step__num {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
}

/* ── Color variants ── */
.pf-step--red {
    background-color: #E60000;
    color: #FFFFFF;
}

.pf-step--amber {
    background-color: #FFC000;
    color: #000000;
}

.pf-step--light-green {
    background-color: #92D050;
    color: #000000;
}

.pf-step--dark-green {
    background-color: #00B050;
    color: #FFFFFF;
}

.pf-step--light-blue {
    background-color: #00B0F0;
    color: #FFFFFF;
}

.pf-step--dark-blue {
    background-color: #0070C0;
    color: #FFFFFF;
}

.pf-step--red .pf-step__num,
.pf-step--dark-green .pf-step__num,
.pf-step--light-blue .pf-step__num,
.pf-step--dark-blue .pf-step__num {
    color: #FFFFFF;
}

.pf-step--amber .pf-step__num,
.pf-step--light-green .pf-step__num {
    color: #000000;
}

.pf-step--red .pf-step__label,
.pf-step--dark-green .pf-step__label,
.pf-step--light-blue .pf-step__label,
.pf-step--dark-blue .pf-step__label {
    color: #FFFFFF;
}

.pf-step--amber .pf-step__label,
.pf-step--light-green .pf-step__label {
    color: #000000;
}

/* Shadow */
.pf-body .sm\:p-6>.shadow-sm {
    padding-top: 4px !important;
}

/* Text base */
.sm\:p-6 .flex-col .text-base {
    font-size: 14px;
}

/* Inline flex */
.sm\:p-6 .flex-col .inline-flex {
    color: #020202 !important;
}

/* Font medium */
.compact-table tbody .font-medium {
    text-align: center;
}

/* Items center */
.mt-6 .justify-between .items-center {
    background-color: rgba(0, 0, 0, 0);
}

/* Items center */
.mt-6 .grid .items-center:nth-child(2) {
    background-color: #156fe4;
}

/* Th */
.compact-table tr th {
    text-align: center !important;
}

/* 1. Reset native input styles */
input[type="checkbox"]:disabled {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}



/* 4. Target the custom disabled color states */
input[type="checkbox"]:disabled {
    background-color: #e0e0e0;
    border-color: #a0a0a0;
    cursor: not-allowed;
    border-radius: 50px !important;
}

/* 5. Target the disabled state when it's also checked */
input[type="checkbox"]:disabled:checked {
    background-color: #3668ce;
    border-radius: 50px !important;
    border-color: #2023d6;
}

/* Link */
.pf-header .grid a {
    text-decoration: none;
}

/* Relative */
.container #cities-village-filter-main .pf-panel .pf-body .sm\:p-6 div .grid .relative>.relative {
    padding-top: 0px !important;
}