:root {
    --dns-bg: #f3f4f6;
    --dns-card-bg: #ffffff;
    --dns-accent: #2563eb;
    --dns-accent-soft: rgba(37, 99, 235, 0.06);
    --dns-border-subtle: #e5e7eb;
    --dns-text-main: #111827;
    --dns-text-muted: #6b7280;
    --dns-radius-lg: 18px;
    --dns-radius-pill: 999px;
    --dns-shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08);
}

/* Layout wrapper */
.dns-wrap {
    /*min-height: 100vh;*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at top, #e5e7eb 0, #f9fafb 45%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", sans-serif;
}

/* Card */
.dns-card {
    width: 100%;
    max-width: 780px;
    background: var(--dns-card-bg);
    border-radius: var(--dns-radius-lg);
    box-shadow: var(--dns-shadow-soft);
    border: 1px solid var(--dns-border-subtle);
    padding: 24px 24px 20px;
    color: var(--dns-text-main);
}

/* Title + subtitle */
.dns-title {
    margin: 0 0 4px;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--dns-text-main);
}

.dns-sub {
    margin: 0 0 18px;
    font-size: 0.9rem;
    color: var(--dns-text-muted);
}

/* Tabs container */
.dns-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: var(--dns-radius-pill);
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    margin-bottom: 18px;
    overflow: hidden;
}

/* Individual tab buttons */
.dns-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--dns-text-muted);
    font-size: 0.83rem;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: calc(var(--dns-radius-pill) - 4px);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease;
    white-space: nowrap;
}

.dns-tab:hover {
    color: var(--dns-text-main);
    background: #e5e7eb;
    transform: translateY(-1px);
}

/* Active tab state – add this class via JS */
.dns-tab.is-active,
.dns-tab.active {
    background: var(--dns-accent);
    color: #ffffff;
}

/* Tab content area */
.dns-tab-content {
    display: none; /* hide by default, show active via JS */
    /* padding-top: 8px; */
}

/* Visible content – add .is-active or .active to the current tab panel */
.dns-tab-content.is-active,
.dns-tab-content.active {
    display: block;
}

/* Search box */
.dns-search-box {
    position: relative;
    margin-bottom: 12px;
}

.dns-search-box input[type="text"] {
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: var(--dns-text-main);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.dns-search-box input[type="text"]::placeholder {
    color: #9ca3af;
}

.dns-search-box input[type="text"]:focus {
    border-color: var(--dns-accent);
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
}

/* Lists (locations / listings) */
.dns-location-list,
.dns-listing-list {
    max-height: 260px;
    padding-right: 4px;
    overflow-y: auto;
    margin-top: 4px;
}

/* Custom scrollbar (WebKit) */
.dns-location-list::-webkit-scrollbar,
.dns-listing-list::-webkit-scrollbar {
    width: 6px;
}

.dns-location-list::-webkit-scrollbar-thumb,
.dns-listing-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
}

/* Checkbox row */
.dns-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 10px;
    font-size: 0.86rem;
    color: var(--dns-text-main);
    cursor: pointer;
    transition: background 0.18s ease, transform 0.08s ease;
}

.dns-checkbox:hover {
    background: #f3f4f6;
    transform: translateY(-0.5px);
}

/* Hide native checkbox, rebuild */
.dns-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

/* Checkmark */
.dns-checkbox input[type="checkbox"]::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: transparent;
    transform: scale(0.4);
    transition: background 0.18s ease, transform 0.18s ease;
}

/* Checked state */
.dns-checkbox input[type="checkbox"]:checked {
    border-color: transparent;
    background: var(--dns-accent);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.4);
}

.dns-checkbox input[type="checkbox"]:checked::after {
    background: #ffffff;
    transform: scale(1);
}

/* Focus outline for accessibility */
.dns-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--dns-accent);
    outline-offset: 2px;
}

/* Actions */
.dns-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

/* Primary button */
.dns-btn {
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 9px 16px;
    border-radius: var(--dns-radius-pill);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.18s ease, background 0.18s ease,
        color 0.18s ease;
    white-space: nowrap;
}

.dns-btn--primary {
    background: linear-gradient(135deg, #2563eb, #22c55e);
    color: #ffffff;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.25);
    margin-right: 10px;
}

.dns-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(37, 99, 235, 0.35);
}

.dns-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 9px 18px rgba(37, 99, 235, 0.3);
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .dns-card {
        padding: 18px 16px 16px;
        border-radius: 16px;
    }

    .dns-title {
        font-size: 1.1rem;
    }

    .dns-tabs {
        gap: 4px;
        padding: 3px;
    }

    .dns-tab {
        font-size: 0.78rem;
        padding: 7px 6px;
    }

    .dns-actions {
        margin-top: 18px;
    }

    .dns-btn--primary {
        width: 100%;
        justify-content: center;
    }
}


.dns-subscribe-button {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: #2271b1;
    color: #fff;
    padding: 12px 20px;
    border-radius: 4px 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background 0.3s;
}
.dns-subscribe-button:hover {
    background-color: #145a86;
}

.dns-btn--secondary {
    background: linear-gradient(135deg, #ef4444, #f87171); /* red gradient */
    color: #ffffff;
    box-shadow: 0 12px 22px rgba(239, 68, 68, 0.25); /* matching shadow */
    margin-left: 10px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.dns-btn--secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(239, 68, 68, 0.35);
}

.dns-btn--secondary:active {
    transform: translateY(1px);
    box-shadow: 0 8px 16px rgba(239, 68, 68, 0.2);
}

/* Search + Button Wrapper */
.dns-search-wrapper {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

/* Search input */
#dns-location-search {
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#dns-location-search:focus {
    border-color: #0073aa; /* WordPress blue */
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.3);
    outline: none;
}

/* Show Selected button */
/*#dns-show-selected-locations {
    padding: 8px 12px;
    font-size: 14px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}*/

#dns-show-selected-locations:hover, 
#dns-select-all-locations:hover, 
#dns-deselect-all-locations:hover {
    background-color: #005177;
    color: white;
}

/* Responsive: stack on small screens */
@media (max-width: 480px) {
    .dns-search-wrapper {
        flex-direction: column;
    }

    #dns-show-selected-locations {
        width: 100%;
    }
}
/* Container for the market checkboxes */
#tab-market {
    /* min-height: 200px; */        /* minimum height */
    /* max-height: 300px; */        /* maximum height before scroll */
    /* overflow-y: auto; */         /* vertical scrollbar */
    /* padding: 10px; */
}

/* Style for each checkbox label */
#tab-market .dns-checkbox {
    display: block;          /* each checkbox on its own line */
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.5;
}

/* Container for the job checkboxes */
#tab-job {
    /* min-height: 200px; */        /* minimum height */
    /* max-height: 300px; */        /* maximum height before scroll appears */
    /* overflow-y: auto; */         /* vertical scrollbar */
    /* padding: 10px; */
}

/* Style for each checkbox label */
#tab-job .dns-checkbox {
    display: block;          /* each checkbox on its own line */
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.5;
}

/* --- Search Input --- */
.dns-search-wrapper input.dns-search-input {
    /*width: 100%;*/
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 25px; /* rounded */
    outline: none;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    max-width: 50%;
}

.dns-search-wrapper input.dns-search-input:focus {
    border-color: #0073aa;
    box-shadow: 0 0 6px rgba(0, 115, 170, 0.3);
}

/* --- Search Buttons --- */
.dns-search-wrapper .dns-btn {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.2s;
}

.dns-search-wrapper .dns-btn.dns-select-all {
    background-color: #28a745;
    color: #fff;
}

.dns-search-wrapper .dns-btn.dns-select-all:hover {
    background-color: #218838;
}

.dns-search-wrapper .dns-btn.dns-deselect-all {
    background-color: #dc3545;
    color: #fff;
}

.dns-search-wrapper .dns-btn.dns-deselect-all:hover {
    background-color: #c82333;
}

.dns-search-wrapper .dns-btn.dns-show-selected {
    background-color: #0073aa;
    color: #fff;
}

.dns-search-wrapper .dns-btn.dns-show-selected:hover {
    background-color: #005177;
}

/* --- Checkbox List --- */
/*.dns-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}*/

.dns-checkbox {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.dns-checkbox input[type="checkbox"] {
    margin-right: 10px;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.dns-checkbox:hover {
    background: #f0f8ff;
    border-color: #91d5ff;
}

.dns-checkbox.dns-checked {
    background: #e6f7ff66;
    border-color: #1890ff66;
    margin-bottom: 5px;
}

/* --- Smooth hiding/showing for filtered items --- */
.dns-checkbox {
    display: flex;
    transition: all 0.2s;
    margin-bottom: 5px;
}
/* --- Location, Job, and Market checkbox list scroll --- */
#tab-locations .dns-checkbox-list,
#tab-job .dns-checkbox-list,
#tab-market .dns-checkbox-list {
    max-height: 300px; /* Adjust as needed */
    overflow-y: auto;
    padding-right: 6px; /* For scrollbar spacing */
    /* border: 1px solid #eee; */
    border-radius: 8px;
}

/* Optional: Custom scrollbar for modern look (Webkit browsers) */
#tab-locations .dns-checkbox-list::-webkit-scrollbar,
#tab-job .dns-checkbox-list::-webkit-scrollbar,
#tab-market .dns-checkbox-list::-webkit-scrollbar {
    width: 8px;
}

#tab-locations .dns-checkbox-list::-webkit-scrollbar-track,
#tab-job .dns-checkbox-list::-webkit-scrollbar-track,
#tab-market .dns-checkbox-list::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

#tab-locations .dns-checkbox-list::-webkit-scrollbar-thumb,
#tab-job .dns-checkbox-list::-webkit-scrollbar-thumb,
#tab-market .dns-checkbox-list::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 4px;
}

#tab-locations .dns-checkbox-list::-webkit-scrollbar-thumb:hover,
#tab-job .dns-checkbox-list::-webkit-scrollbar-thumb:hover,
#tab-market .dns-checkbox-list::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}
.dns-btn.dns-show-selected {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* space between emoji and text */
}

/* Floating Subscribe Button – neon border, compact pill */
.dns-subscribe-button {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 9999;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 14px;
    min-width: 56px;
    border-radius: 999px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;

    color: #e5f0ff;
    background: #020617; /* dark slate */
    border: 1px solid rgba(59, 130, 246, 0.7);
    box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.5),
        0 14px 35px rgba(15, 23, 42, 0.65);

    cursor: pointer;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        color 0.16s ease;
}

/* Icon + subtle badge */
.dns-subscribe-button::before {
    content: "🔔";
    font-size: 16px;
}

/* Tiny notification dot */
.dns-subscribe-button::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f97316; /* orange */
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.9);
}

/* Hover / active */
.dns-subscribe-button:hover {
    transform: translateY(-50%) translateX(-3px);
    border-color: rgba(96, 165, 250, 1);
    box-shadow:
        0 0 0 1px rgba(96, 165, 250, 0.8),
        0 18px 40px rgba(15, 23, 42, 0.85);
    background: radial-gradient(circle at top left, #0f172a 0, #020617 55%);
    color: #f9fafb;
}

.dns-subscribe-button:active {
    transform: translateY(-50%) translateX(-1px) scale(0.97);
    box-shadow:
        0 0 0 1px rgba(96, 165, 250, 0.8),
        0 10px 24px rgba(15, 23, 42, 0.7);
}

/* Keyboard focus */
.dns-subscribe-button:focus-visible {
    outline: 2px solid #facc15;
    outline-offset: 4px;
}

/* Soft breathing glow animation */
/*@keyframes dns-glow {
    0% { box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.5), 0 14px 35px rgba(15, 23, 42, 0.65); }
    50% { box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.9), 0 18px 45px rgba(15, 23, 42, 0.9); }
    100% { box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.5), 0 14px 35px rgba(15, 23, 42, 0.65); }
}*/

.dns-subscribe-button {
    animation: dns-glow 3s ease-in-out infinite;
}

/* ========== Responsive tweaks ========== */

/* Tablets & small screens: move lower and a bit inward */
@media (max-width: 992px) {
    .dns-subscribe-button {
        right: 12px;
        top: auto;
        bottom: 80px;
        transform: translateY(0);
        animation-duration: 3.5s;
    }
}

/* Phones: bottom center, text more readable */
@media (max-width: 768px) {
    .dns-subscribe-button {
        left: 50%;
        right: auto;
        bottom: 18px;
        transform: translateX(-50%);
        padding: 10px 18px;
        font-size: 12px;
        text-transform: none;
    }

    .dns-subscribe-button:hover {
        transform: translateX(-50%) translateY(-2px);
    }

    .dns-subscribe-button:active {
        transform: translateX(-50%) translateY(0) scale(0.97);
    }
}

/* Very small phones: almost full width */
@media (max-width: 480px) {
    .dns-subscribe-button {
        width: calc(100% - 40px);
        justify-content: center;
        bottom: 14px;
    }
}