/**
 * The Business Directory v4.2.15 — Modern UI
 * Font: Outfit (geometric sans)
 * 4.2.15: Hardened PayPal verification, blocked coupons on recurring, is_recurring admin UI.
 * 4.2.14: Recurring Stripe subscriptions, PayPal, webhooks, cancel UI.
 * 4.2.13: Full Stripe Elements integration, coupon schema fix.
 * 4.2.12: Stronger contrast on quick category tiles, kill theme underlines.
 * 4.2.11: Hero headline + subtitle + frosted-glass quick category tiles.
 * 4.2.10: Dark blue hero with glowing accent blobs.
 * 4.2.9:  Map cluster tuning, /category/{slug}/ pretty URLs.
 * 4.2.8:  Self-healing directory page, clean-URL form submit.
 * 4.2.7:  Slug-based URLs, dynamic form action.
 * 4.2.6:  Amenities meta migration.
 * 4.2.5:  Robust amenity name resolution + one-time repair of corrupt option.
 * 4.2.4:  Color hero, color-coded category pills, brighter accents.
 * 4.2.3:  GPS pin map markers, plugin rename, page-title migration.
 * 4.2.2:  WCAG AA contrast fixes, visible focus rings, reduced-motion support.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ===== VARIABLES ===== */
:root {
    --ddp-primary: #4f46e5;
    --ddp-primary-dark: #4338ca;
    --ddp-primary-light: #eef2ff;
    --ddp-primary-glow: rgba(79, 70, 229, 0.12);
    --ddp-secondary: #64748b;
    --ddp-accent: #06b6d4;
    --ddp-success: #047857; /* emerald-700: 5.48:1 white-on / on-white, WCAG AA */
    --ddp-success-light: #d1fae5;
    --ddp-warning: #f59e0b;
    --ddp-warning-light: #fef3c7;
    --ddp-danger: #dc2626; /* red-600: 4.83:1 white-on / on-white, WCAG AA */
    --ddp-danger-light: #fee2e2;
    --ddp-gray-50: #f8fafc;
    --ddp-gray-100: #f1f5f9;
    --ddp-gray-200: #e2e8f0;
    --ddp-gray-300: #cbd5e1;
    --ddp-gray-400: #94a3b8;
    --ddp-gray-500: #64748b;
    --ddp-gray-600: #475569;
    --ddp-gray-700: #334155;
    --ddp-gray-800: #1e293b;
    --ddp-gray-900: #0f172a;
    --ddp-radius: 10px;
    --ddp-radius-lg: 16px;
    --ddp-radius-xl: 20px;
    --ddp-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --ddp-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --ddp-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --ddp-shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    --ddp-shadow-xl: 0 20px 40px -8px rgba(0,0,0,0.1);
    --ddp-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ddp-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== BASE ===== */
.ddp-directory, .ddp-dashboard, .ddp-form-page, .ddp-single-listing,
.ddp-manage-page, .ddp-auth-page, .ddp-pricing-page, .ddp-analytics, .ddp-account-page {
    font-family: var(--ddp-font);
    color: var(--ddp-gray-800);
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    -webkit-font-smoothing: antialiased;
}

/* ===== BUTTONS ===== */
.ddp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--ddp-radius);
    font-family: var(--ddp-font);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all var(--ddp-transition);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.ddp-btn-primary {
    background: var(--ddp-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(79,70,229,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.ddp-btn-primary:hover {
    background: var(--ddp-primary-dark);
    color: #fff;
    box-shadow: 0 4px 12px rgba(79,70,229,0.35);
    transform: translateY(-1px);
}
.ddp-btn-secondary { background: var(--ddp-gray-600); color: #fff; }
.ddp-btn-secondary:hover { background: var(--ddp-gray-700); color: #fff; }
.ddp-btn-outline {
    background: #fff;
    border: 1.5px solid var(--ddp-gray-200);
    color: var(--ddp-gray-700);
}
.ddp-btn-outline:hover {
    border-color: var(--ddp-primary);
    color: var(--ddp-primary);
    background: var(--ddp-primary-light);
}
.ddp-btn-danger { background: var(--ddp-danger); color: #fff; }
.ddp-btn-lg { padding: 14px 30px; font-size: 16px; border-radius: 12px; }
.ddp-btn-sm { padding: 6px 14px; font-size: 13px; }
.ddp-btn-block { width: 100%; }
.ddp-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.ddp-btn-success { background: var(--ddp-success); color: #fff; }

/* ===== FORMS ===== */
.ddp-form { max-width: 800px; }
.ddp-field { margin-bottom: 20px; }
.ddp-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ddp-gray-700);
    font-size: 14px;
}
.ddp-input, .ddp-select, .ddp-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--ddp-gray-200);
    border-radius: var(--ddp-radius);
    font-family: var(--ddp-font);
    font-size: 15px;
    color: var(--ddp-gray-800);
    background: #fff;
    transition: all var(--ddp-transition);
    box-sizing: border-box;
}
.ddp-input:focus, .ddp-select:focus, .ddp-textarea:focus {
    outline: none;
    border-color: var(--ddp-primary);
    /* Solid 3px ring at ~50% alpha — meets 3:1 contrast against white. */
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.45);
}
.ddp-input::placeholder, .ddp-select::placeholder, .ddp-textarea::placeholder {
    color: var(--ddp-gray-500); /* 4.78:1 on white, meets WCAG AA */
    opacity: 1; /* Firefox lowers placeholder opacity by default */
}
.ddp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ddp-field-row-3 { grid-template-columns: repeat(3, 1fr); }
.ddp-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.required { color: var(--ddp-danger); }

/* ===== MESSAGES ===== */
.ddp-message { padding: 14px 18px; border-radius: var(--ddp-radius); margin-top: 16px; font-size: 14px; font-weight: 500; }
.ddp-success { background: var(--ddp-success-light); color: #065f46; border: 1px solid #a7f3d0; }
.ddp-error { background: var(--ddp-danger-light); color: #991b1b; border: 1px solid #fecaca; }
.ddp-notice { padding: 40px; text-align: center; background: var(--ddp-gray-50); border-radius: var(--ddp-radius-lg); }

/* =============================================
   HERO — dark blue gradient frame around the search header
   ============================================= */
.ddp-hero {
    position: relative;
    margin: -8px -8px 32px;
    padding: 36px 20px 28px;
    border-radius: calc(var(--ddp-radius-xl) + 8px);
    /* Deep navy → indigo with cyan/azure highlights at the edges */
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(56, 189, 248, 0.35), transparent 70%),
        radial-gradient(ellipse 70% 50% at 85% 10%, rgba(99, 102, 241, 0.45), transparent 65%),
        radial-gradient(ellipse 90% 60% at 50% 110%, rgba(14, 165, 233, 0.25), transparent 60%),
        linear-gradient(135deg, #0b1d3a 0%, #102a52 35%, #1e3a8a 70%, #0c4a6e 100%);
    overflow: hidden;
    isolation: isolate;
}
/* Subtle starfield/grain texture for depth */
.ddp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
    background-image:
        radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
        radial-gradient(rgba(56,189,248,0.06) 1px, transparent 1px);
    background-size: 32px 32px, 24px 24px;
    background-position: 0 0, 16px 16px;
    mix-blend-mode: screen;
}
/* Top highlight line — gives it the polished glass-card feel */
.ddp-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    z-index: 2;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.4) 50%,
        transparent 100%);
}
.ddp-hero .ddp-search-header {
    position: relative;
    z-index: 3;
    background: #fff;
    /* Strong shadow + tinted ring to lift the card off the dark hero */
    box-shadow:
        0 24px 50px -12px rgba(0, 0, 0, 0.5),
        0 10px 20px -8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.95);
    margin-bottom: 0;
}
.ddp-hero-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.ddp-hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.65;
    animation: ddp-blob-drift 20s ease-in-out infinite;
    mix-blend-mode: screen;
}
.ddp-hero-blob-1 {
    width: 280px;
    height: 280px;
    top: -100px;
    left: -60px;
    background: radial-gradient(circle, #38bdf8 0%, #0ea5e9 60%, transparent 100%);
}
.ddp-hero-blob-2 {
    width: 320px;
    height: 320px;
    top: -120px;
    right: -80px;
    background: radial-gradient(circle, #818cf8 0%, #6366f1 55%, transparent 100%);
    animation-delay: -7s;
}
.ddp-hero-blob-3 {
    width: 240px;
    height: 240px;
    bottom: -90px;
    left: 35%;
    background: radial-gradient(circle, #22d3ee 0%, #06b6d4 55%, transparent 100%);
    animation-delay: -14s;
}
@keyframes ddp-blob-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(25px, 15px) scale(1.08); }
    66%      { transform: translate(-20px, 10px) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
    .ddp-hero-blob { animation: none; }
    .ddp-hero::after { animation: none; }
}
@media (max-width: 600px) {
    .ddp-hero { padding: 24px 12px 20px; }
    .ddp-hero-blob { filter: blur(40px); }
}

/* Hero text + quick-category tiles */
.ddp-hero-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.ddp-hero-title {
    margin: 0 0 10px;
    padding: 0 12px;
    color: #fff;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.ddp-hero-subtitle {
    margin: 0 0 24px;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: 400;
    line-height: 1.5;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}
.ddp-hero-quick-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    padding: 0 4px;
}
.ddp-quick-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    /* Frosted-glass look: tinted white over the dark hero. Bumped opacity
       so tiles read clearly even before hover. */
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff !important;
    text-decoration: none !important;
    /* Boost edge against busy backgrounds without making the text fuzzy */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    font-weight: 600;
    font-size: 14px;
    transition: all var(--ddp-transition);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.ddp-quick-cat:hover,
.ddp-quick-cat:focus {
    background: #fff;
    color: #0b1d3a !important;
    border-color: #fff;
    text-shadow: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}
.ddp-quick-cat:hover .ddp-quick-cat-label,
.ddp-quick-cat:focus .ddp-quick-cat-label {
    text-decoration: none !important;
}
.ddp-quick-cat-icon {
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    transition: filter var(--ddp-transition);
}
.ddp-quick-cat:hover .ddp-quick-cat-icon {
    filter: none;
}
.ddp-quick-cat-label {
    line-height: 1.2;
    text-decoration: none !important;
    border-bottom: 0 !important;
}
.ddp-quick-cat,
.ddp-quick-cat * {
    text-decoration: none !important;
}
.ddp-quick-cat:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    background: rgba(255, 255, 255, 0.2);
}
@media (max-width: 600px) {
    .ddp-hero-quick-cats { gap: 8px; }
    .ddp-quick-cat { padding: 8px 12px; font-size: 13px; }
    .ddp-quick-cat-icon { font-size: 16px; }
}

/* =============================================
   SEARCH HEADER
   ============================================= */
.ddp-search-header {
    background: #fff;
    padding: 28px;
    border-radius: var(--ddp-radius-xl);
    box-shadow: var(--ddp-shadow-md);
    margin-bottom: 24px;
    border: 1px solid var(--ddp-gray-100);
}
.ddp-search-main {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    align-items: stretch;
}
.ddp-search-input-wrap {
    flex: 1;
    position: relative;
}
.ddp-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ddp-gray-500); /* 4.6:1 on gray-50, meets 3:1 for UI */
    pointer-events: none;
    z-index: 2;
}
.ddp-search-input {
    width: 100%;
    padding: 14px 16px 14px 48px !important;
    border: 1.5px solid var(--ddp-gray-200);
    border-radius: 12px;
    font-family: var(--ddp-font);
    font-size: 16px;
    color: var(--ddp-gray-800);
    background: var(--ddp-gray-50);
    transition: all var(--ddp-transition);
    box-sizing: border-box;
    height: 100%;
}
.ddp-search-input:focus {
    outline: none;
    border-color: var(--ddp-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.45);
    background: #fff;
}
.ddp-search-input::placeholder { color: var(--ddp-gray-500); opacity: 1; }

/* Near Me + Search buttons match search bar height */
.ddp-search-main .ddp-btn {
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 15px;
    align-self: stretch;
}
.ddp-search-main .ddp-btn-primary { min-width: 100px; }

/* Autocomplete */
.ddp-autocomplete {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--ddp-gray-200);
    border-radius: 12px;
    box-shadow: var(--ddp-shadow-lg);
    z-index: 100;
    display: none;
    overflow: hidden;
}
.ddp-autocomplete-item {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--ddp-gray-800);
    border-bottom: 1px solid var(--ddp-gray-100);
    transition: background var(--ddp-transition);
}
.ddp-autocomplete-item:last-child { border-bottom: none; }
.ddp-autocomplete-item:hover { background: var(--ddp-primary-light); }
.ddp-autocomplete-item span { display: block; font-size: 12px; color: var(--ddp-gray-500); }

/* ===== FILTER ROW ===== */
.ddp-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.ddp-filters-row .ddp-select {
    width: auto;
    min-width: 160px;
    padding: 10px 36px 10px 14px;
    border: 1.5px solid var(--ddp-gray-200);
    border-radius: 10px;
    font-family: var(--ddp-font);
    font-size: 14px;
    color: var(--ddp-gray-700);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center no-repeat;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: all var(--ddp-transition);
}
.ddp-filters-row .ddp-select:hover { border-color: var(--ddp-gray-300); }
.ddp-filters-row .ddp-select:focus {
    border-color: var(--ddp-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.45);
    outline: none;
}

/* ===== MORE FILTERS ===== */
.ddp-more-filters { padding-top: 18px; border-top: 1px solid var(--ddp-gray-200); margin-top: 18px; }
.ddp-amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }

/* ===== CARDS ===== */
.ddp-card {
    background: #fff;
    border-radius: var(--ddp-radius-lg);
    box-shadow: var(--ddp-shadow);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid var(--ddp-gray-100);
}
.ddp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ddp-shadow-xl);
    border-color: var(--ddp-gray-200);
}
.ddp-card-featured {
    border: 2px solid #f59e0b;
    box-shadow:
        0 10px 25px -8px rgba(245, 158, 11, 0.35),
        0 0 0 4px rgba(245, 158, 11, 0.08);
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 18%);
}
.ddp-card-image {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, var(--ddp-gray-100), var(--ddp-gray-50));
}
.ddp-card-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.ddp-card:hover .ddp-card-image img { transform: scale(1.05); }
.ddp-card-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ddp-gray-400); }
.ddp-card-body { padding: 18px; }
.ddp-card-category {
    display: inline-block;
    font-size: 11px; color: var(--ddp-primary);
    text-transform: uppercase; font-weight: 700;
    text-decoration: none; letter-spacing: 0.05em;
    background: var(--ddp-primary-light);
    padding: 3px 10px; border-radius: 6px;
}
.ddp-card-category:hover { background: var(--ddp-primary); color: #fff; }

/* Color-coded category pills (cards + single-listing badge). Each
   category gets a consistent color based on term_id % 8. Light bg +
   dark text combinations all meet WCAG AA 4.5:1.
   Palette: indigo, pink, teal, amber, emerald, sky, violet, rose. */
.ddp-card-category[data-cat-color="0"], .ddp-badge-category[data-cat-color="0"] { background: #eef2ff; color: #3730a3; }
.ddp-card-category[data-cat-color="1"], .ddp-badge-category[data-cat-color="1"] { background: #fce7f3; color: #9d174d; }
.ddp-card-category[data-cat-color="2"], .ddp-badge-category[data-cat-color="2"] { background: #ccfbf1; color: #115e59; }
.ddp-card-category[data-cat-color="3"], .ddp-badge-category[data-cat-color="3"] { background: #fef3c7; color: #92400e; }
.ddp-card-category[data-cat-color="4"], .ddp-badge-category[data-cat-color="4"] { background: #d1fae5; color: #065f46; }
.ddp-card-category[data-cat-color="5"], .ddp-badge-category[data-cat-color="5"] { background: #e0f2fe; color: #075985; }
.ddp-card-category[data-cat-color="6"], .ddp-badge-category[data-cat-color="6"] { background: #ede9fe; color: #5b21b6; }
.ddp-card-category[data-cat-color="7"], .ddp-badge-category[data-cat-color="7"] { background: #ffe4e6; color: #9f1239; }
.ddp-card-category[data-cat-color]:hover { filter: brightness(0.95); }
.ddp-card-title { margin: 10px 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.ddp-card-title a { color: inherit; text-decoration: none; }
.ddp-card-title a:hover { color: var(--ddp-primary); }
.ddp-card-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ddp-stars { color: #f59e0b; letter-spacing: 0; font-size: 14px; text-shadow: 0 1px 0 rgba(245, 158, 11, 0.15); }
.ddp-rating-text { font-size: 13px; color: var(--ddp-gray-500); font-weight: 500; }
.ddp-card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--ddp-gray-500); }
.ddp-card-meta svg { vertical-align: -2px; }
.ddp-card-footer {
    padding: 14px 18px; border-top: 1px solid var(--ddp-gray-100);
    display: flex; justify-content: space-between; align-items: center; font-size: 14px;
}
.ddp-card-phone { color: var(--ddp-gray-600); text-decoration: none; display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; transition: color var(--ddp-transition); }
.ddp-card-phone:hover { color: var(--ddp-primary); }
.ddp-card-link { color: var(--ddp-primary); text-decoration: none; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; transition: gap var(--ddp-transition); }
.ddp-card-link:hover { gap: 8px; }

/* ===== BADGES ===== */
.ddp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; border-radius: 8px; letter-spacing: 0.04em; }
.ddp-badge-featured { background: linear-gradient(135deg,#f59e0b,#d97706); color: #1e293b; position: absolute; top: 12px; left: 12px; box-shadow: 0 2px 8px rgba(245,158,11,0.4); }
.ddp-badge-verified { background: var(--ddp-primary); color: #fff; }
.ddp-badge-category { background: var(--ddp-gray-100); color: var(--ddp-gray-700); text-decoration: none; }
.ddp-verified-icon { color: var(--ddp-primary); vertical-align: middle; }

/* ===== GRID ===== */
.ddp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.ddp-view-list .ddp-card { display: grid; grid-template-columns: 220px 1fr auto; }
.ddp-view-list .ddp-card-image { aspect-ratio: 1; }

/* ===== MAP ===== */
.ddp-map { height: 420px; border-radius: var(--ddp-radius-xl); z-index: 1; border: 1px solid var(--ddp-gray-200); }
#ddp-single-map { height: 300px; margin-bottom: 16px; border-radius: var(--ddp-radius-lg); }
.ddp-map-section { margin-bottom: 24px; position: relative; }
.ddp-map-info { padding: 12px 18px; background: #fff; border-radius: 0 0 var(--ddp-radius-xl) var(--ddp-radius-xl); font-size: 14px; color: var(--ddp-gray-600); border: 1px solid var(--ddp-gray-200); border-top: none; font-weight: 500; }
.ddp-clear-filters {
    margin-left: 16px;
    color: #86198f; /* 7.08:1 on #fae8ff, WCAG AAA */
    font-weight: 700;
    text-decoration: none;
    background: #fae8ff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    transition: all var(--ddp-transition);
}
.ddp-clear-filters:hover { background: #c026d3; color: #fff; }
.ddp-map-overlay-controls { display: flex; gap: 0; margin-top: -1px; }
.ddp-map-type-btn { padding: 8px 18px; background: #fff; border: 1px solid var(--ddp-gray-200); cursor: pointer; font-family: var(--ddp-font); font-size: 13px; font-weight: 600; color: var(--ddp-gray-600); transition: all var(--ddp-transition); }
.ddp-map-type-btn:first-child { border-radius: 0 0 0 12px; }
.ddp-map-type-btn:last-child { border-radius: 0 0 12px 0; border-left: none; }
.ddp-map-type-btn.active { background: var(--ddp-primary); color: #fff; border-color: var(--ddp-primary); }

/* ===== RESULTS BAR ===== */
.ddp-results-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.ddp-results-count { font-size: 15px; font-weight: 600; color: var(--ddp-gray-700); }
.ddp-results-controls { display: flex; align-items: center; gap: 10px; }
.ddp-sort-select {
    padding: 9px 36px 9px 14px; border: 1.5px solid var(--ddp-gray-200); border-radius: 10px;
    font-family: var(--ddp-font); font-size: 14px; font-weight: 500;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center no-repeat;
    -webkit-appearance: none; appearance: none; cursor: pointer;
}
.ddp-view-toggle { display: flex; border: 1.5px solid var(--ddp-gray-200); border-radius: 10px; overflow: hidden; }
.ddp-view-btn { padding: 9px 14px; background: #fff; border: none; cursor: pointer; color: var(--ddp-gray-600); transition: all var(--ddp-transition); display: flex; align-items: center; }
.ddp-view-btn + .ddp-view-btn { border-left: 1.5px solid var(--ddp-gray-200); }
.ddp-view-btn.active { background: var(--ddp-primary-light); color: var(--ddp-primary); }
.ddp-view-btn:hover { color: var(--ddp-primary); }

/* ===== STATS ===== */
.ddp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.ddp-stats-4 { grid-template-columns: repeat(4, 1fr); }
.ddp-stat-card { background: #fff; padding: 22px; border-radius: var(--ddp-radius-lg); box-shadow: var(--ddp-shadow); text-align: center; border: 1px solid var(--ddp-gray-100); transition: all var(--ddp-transition); }
.ddp-stat-card:hover { box-shadow: var(--ddp-shadow-md); }
.ddp-stat-number { display: block; font-size: 36px; font-weight: 800; color: var(--ddp-gray-900); letter-spacing: -0.03em; }
.ddp-stat-label { font-size: 13px; color: var(--ddp-gray-500); font-weight: 500; margin-top: 2px; }
.ddp-stat-green { border-left: 4px solid var(--ddp-success); }
.ddp-stat-orange { border-left: 4px solid var(--ddp-warning); }
.ddp-stat-blue { border-left: 4px solid var(--ddp-primary); }

/* ===== DASHBOARD ===== */
.ddp-dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.ddp-user-info { display: flex; align-items: center; gap: 16px; }
.ddp-user-info img { border-radius: 50%; border: 3px solid var(--ddp-gray-100); }
.ddp-user-info h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.ddp-user-info p { margin: 4px 0 0; color: var(--ddp-gray-500); font-size: 14px; }
.ddp-header-actions { display: flex; gap: 10px; }

/* ===== SECTION ===== */
.ddp-section { background: #fff; padding: 24px; border-radius: var(--ddp-radius-lg); box-shadow: var(--ddp-shadow); margin-bottom: 24px; border: 1px solid var(--ddp-gray-100); }
.ddp-section h2 { margin: 0 0 20px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }

/* ===== TABLES ===== */
.ddp-listings-table table, .ddp-table { width: 100%; border-collapse: collapse; }
.ddp-listings-table th, .ddp-listings-table td, .ddp-table th, .ddp-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--ddp-gray-100); }
.ddp-listings-table th, .ddp-table th { font-weight: 700; color: var(--ddp-gray-500); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.ddp-listings-table tr:hover, .ddp-table tr:hover { background: var(--ddp-gray-50); }
.ddp-listing-cell { display: flex; align-items: center; gap: 12px; }
.ddp-listing-thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.ddp-status { padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.ddp-status-publish { background: var(--ddp-success-light); color: #065f46; }
.ddp-status-pending { background: var(--ddp-warning-light); color: #92400e; }
.ddp-status-draft { background: var(--ddp-gray-100); color: var(--ddp-gray-600); }
.ddp-actions { display: flex; gap: 6px; }

/* ===== AUTH PAGES ===== */
.ddp-auth-page { display: flex; gap: 40px; justify-content: center; align-items: flex-start; min-height: 60vh; padding-top: 40px; }
.ddp-auth-card { background: #fff; padding: 40px; border-radius: var(--ddp-radius-xl); box-shadow: var(--ddp-shadow-lg); width: 100%; max-width: 420px; border: 1px solid var(--ddp-gray-100); }
.ddp-auth-card h1 { margin: 0 0 8px; font-weight: 700; letter-spacing: -0.02em; }
.ddp-auth-card > p { color: var(--ddp-gray-500); margin-bottom: 24px; }
.ddp-auth-footer { text-align: center; margin-top: 24px; color: var(--ddp-gray-500); font-size: 14px; }
.ddp-auth-footer a { color: var(--ddp-primary); font-weight: 600; text-decoration: none; }
.ddp-auth-benefits { background: var(--ddp-gray-50); padding: 32px; border-radius: var(--ddp-radius-xl); border: 1px solid var(--ddp-gray-100); }
.ddp-auth-benefits h3 { margin: 0 0 16px; font-weight: 700; }
.ddp-auth-benefits ul { list-style: none; padding: 0; margin: 0; }
.ddp-auth-benefits li { padding: 10px 0; font-size: 15px; color: var(--ddp-gray-600); }

/* ===== LOGIN PROMPT ===== */
.ddp-login-prompt { display: flex; justify-content: center; padding: 60px 20px; }
.ddp-login-prompt-card { background: #fff; padding: 48px; border-radius: var(--ddp-radius-xl); box-shadow: var(--ddp-shadow-lg); text-align: center; max-width: 500px; border: 1px solid var(--ddp-gray-100); }
.ddp-login-icon { color: var(--ddp-primary); margin-bottom: 20px; }
.ddp-login-buttons { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }

/* ===== FORM PAGE ===== */
.ddp-form-page { max-width: 900px; }
.ddp-form-header { margin-bottom: 24px; }
.ddp-form-header h1 { margin: 0 0 8px; font-weight: 700; letter-spacing: -0.02em; }
.ddp-back-link { color: var(--ddp-primary); text-decoration: none; font-weight: 600; font-size: 14px; }
.ddp-form-section { background: #fff; padding: 28px; border-radius: var(--ddp-radius-lg); box-shadow: var(--ddp-shadow); margin-bottom: 20px; border: 1px solid var(--ddp-gray-100); }
.ddp-form-section h2 { margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--ddp-gray-100); font-weight: 700; }
.ddp-form-actions { margin-top: 24px; display: flex; gap: 12px; }

/* ===== STEPS ===== */
.ddp-steps { display: flex; justify-content: center; gap: 0; margin-bottom: 30px; background: #fff; padding: 20px 24px; border-radius: var(--ddp-radius-xl); box-shadow: var(--ddp-shadow); border: 1px solid var(--ddp-gray-100); }
.ddp-step { display: flex; align-items: center; gap: 10px; padding: 10px 28px; color: var(--ddp-gray-600); position: relative; font-weight: 500; font-size: 14px; }
.ddp-step:not(:last-child)::after { content: ''; position: absolute; right: -20px; width: 40px; height: 2px; background: var(--ddp-gray-200); }
.ddp-step.active { color: var(--ddp-primary); }
.ddp-step.completed { color: var(--ddp-success); }
.ddp-step-num { width: 34px; height: 34px; border-radius: 10px; background: var(--ddp-gray-100); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; transition: all var(--ddp-transition); }
.ddp-step.active .ddp-step-num { background: var(--ddp-primary); color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,0.3); }
.ddp-step.completed .ddp-step-num { background: var(--ddp-success); color: #fff; }
.ddp-step-actions { display: flex; gap: 12px; justify-content: center; padding-top: 20px; border-top: 1px solid var(--ddp-gray-100); margin-top: 20px; }

/* ===== PACKAGES ===== */
.ddp-package-select { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.ddp-package-option { cursor: pointer; }
.ddp-package-option input { display: none; }
.ddp-package-option.ddp-package-owned {
    cursor: not-allowed;
    opacity: 0.65;
}
.ddp-package-option.ddp-package-owned:hover .ddp-package-card {
    border-color: var(--ddp-gray-200);
    box-shadow: none;
    transform: none;
}
.ddp-package-owned-note {
    margin: 12px 0 0;
    padding: 8px 12px;
    background: #ecfdf5;
    border-left: 3px solid #16a34a;
    color: #065f46;
    font-size: 13px;
    border-radius: 4px;
}
.ddp-package-card { background: #fff; border: 2px solid var(--ddp-gray-200); border-radius: var(--ddp-radius-lg); padding: 24px; transition: all 0.25s cubic-bezier(0.4,0,0.2,1); position: relative; height: 100%; }
.ddp-package-option:hover .ddp-package-card { border-color: var(--ddp-primary); box-shadow: var(--ddp-shadow-md); }
.ddp-package-option input:checked + .ddp-package-card { border-color: var(--ddp-primary); background: var(--ddp-primary-light); box-shadow: 0 0 0 4px var(--ddp-primary-glow); }
.ddp-popular-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,#f59e0b,#d97706); color: #1e293b; padding: 4px 16px; border-radius: 20px; font-size: 11px; font-weight: 700; box-shadow: 0 2px 6px rgba(245,158,11,0.3); }
.ddp-package-card h3 { margin: 0 0 12px; font-weight: 700; }
.ddp-package-price { margin-bottom: 12px; }
.ddp-price-amount { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.ddp-price-period { color: var(--ddp-gray-500); font-size: 14px; }
.ddp-package-features { list-style: none; padding: 0; margin: 16px 0 0; }
.ddp-package-features li { padding: 7px 0; padding-left: 22px; position: relative; font-size: 14px; color: var(--ddp-gray-600); }
.ddp-package-features li::before { content: '✓'; position: absolute; left: 0; color: var(--ddp-success); font-weight: 700; }

/* ===== ORDER SUMMARY ===== */
.ddp-order-summary { background: var(--ddp-gray-50); padding: 20px; border-radius: var(--ddp-radius); margin-bottom: 24px; border: 1px solid var(--ddp-gray-100); }
.ddp-order-line { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; }
.ddp-order-total { border-top: 2px solid var(--ddp-gray-200); margin-top: 8px; padding-top: 12px; font-size: 18px; font-weight: 700; }

/* ===== PAYMENT ===== */
.ddp-free-notice { text-align: center; padding: 40px; background: var(--ddp-success-light); border-radius: var(--ddp-radius); color: #065f46; border: 1px solid #a7f3d0; }
.ddp-payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.ddp-payment-method { cursor: pointer; }
.ddp-payment-method input { display: none; }
.ddp-payment-method-card { border: 2px solid var(--ddp-gray-200); border-radius: var(--ddp-radius); padding: 20px; text-align: center; transition: all var(--ddp-transition); font-weight: 600; }
.ddp-payment-method input:checked + .ddp-payment-method-card { border-color: var(--ddp-primary); background: var(--ddp-primary-light); }
.ddp-card-element {
    padding: 14px 16px;
    border: 1.5px solid var(--ddp-gray-200);
    border-radius: var(--ddp-radius);
    background: #fff;
    transition: border-color var(--ddp-transition), box-shadow var(--ddp-transition);
    min-height: 22px;
}
.ddp-card-element.StripeElement--focus {
    border-color: var(--ddp-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.45);
}
.ddp-card-element.StripeElement--invalid {
    border-color: var(--ddp-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.ddp-card-errors { color: var(--ddp-danger); font-size: 14px; margin-top: 8px; min-height: 18px; }
.ddp-payment-form { margin-top: 8px; }

/* Subscription cards on user dashboard */
.ddp-subscriptions { display: grid; gap: 12px; }
.ddp-sub-card {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--ddp-gray-200);
    border-radius: var(--ddp-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ddp-sub-card.ddp-sub-past-due {
    border-color: #f59e0b;
    background: #fffbeb;
}
.ddp-sub-info h3 {
    margin: 0 0 6px;
    font-size: 17px;
    color: var(--ddp-gray-900);
}
.ddp-sub-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 14px;
    color: var(--ddp-gray-700);
}
.ddp-sub-meta strong { color: var(--ddp-gray-900); }
.ddp-sub-provider {
    color: var(--ddp-gray-500);
    font-size: 13px;
}
.ddp-sub-actions { flex-shrink: 0; }
.ddp-sub-cancelled-note {
    font-size: 13px;
    color: var(--ddp-gray-500);
    font-style: italic;
}

/* ===== IMAGE UPLOAD ===== */
.ddp-image-row { display: grid; grid-template-columns: 120px 1fr; gap: 20px; margin-bottom: 20px; }
.ddp-image-upload { border: 2px dashed var(--ddp-gray-200); border-radius: var(--ddp-radius); overflow: hidden; position: relative; transition: border-color var(--ddp-transition); }
.ddp-image-upload:hover { border-color: var(--ddp-primary); }
.ddp-upload-area { padding: 40px; text-align: center; cursor: pointer; color: var(--ddp-gray-500); }
.ddp-upload-area input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ddp-upload-small .ddp-upload-area { padding: 20px; }
.ddp-upload-preview { position: relative; }
.ddp-upload-preview img { width: 100%; height: 150px; object-fit: cover; display: block; }
.ddp-remove-img { position: absolute; line-height: 1; }
.ddp-gallery-upload { display: flex; flex-wrap: wrap; gap: 12px; }
.ddp-gallery-grid { display: contents; }
.ddp-gallery-item { width: 100px; height: 100px; position: relative; border-radius: 10px; overflow: hidden; }
.ddp-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.ddp-gallery-remove { position: absolute; line-height: 1; }
.ddp-gallery-add { width: 100px; height: 100px; border: 2px dashed var(--ddp-gray-300); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; color: var(--ddp-gray-600); font-size: 13px; transition: border-color var(--ddp-transition); }
.ddp-gallery-add:hover { border-color: var(--ddp-primary); color: var(--ddp-primary); }
.ddp-gallery-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ===== COLLAPSIBLE ===== */
.ddp-collapsible-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.ddp-collapse-icon { font-size: 20px; color: var(--ddp-gray-600); }

/* ===== SINGLE LISTING ===== */
/* Breadcrumb: separators use gray-500 (4.78:1 on white, meets AA),
   links use gray-700 (10:1, AAA), current page uses gray-600 (7.27:1, AAA). */
.ddp-breadcrumb { margin-bottom: 20px; font-size: 14px; color: var(--ddp-gray-500); }
.ddp-breadcrumb a { color: var(--ddp-gray-700); text-decoration: none; font-weight: 500; }
.ddp-breadcrumb a:hover { color: var(--ddp-primary); text-decoration: underline; }
.ddp-breadcrumb a:focus-visible { outline: 2px solid var(--ddp-primary); outline-offset: 2px; border-radius: 2px; }
.ddp-breadcrumb-current { color: var(--ddp-gray-600); font-weight: 500; }
.ddp-listing-header { background: #fff; padding: 28px; border-radius: var(--ddp-radius-xl); box-shadow: var(--ddp-shadow); margin-bottom: 24px; border: 1px solid var(--ddp-gray-100); }
.ddp-listing-header-main { display: flex; gap: 20px; align-items: flex-start; }
.ddp-listing-logo { width: 80px; height: 80px; border-radius: 14px; overflow: hidden; flex-shrink: 0; border: 2px solid var(--ddp-gray-100); }
.ddp-listing-logo img { width: 100%; height: 100%; object-fit: cover; }
.ddp-listing-header-info { flex: 1; }
.ddp-listing-badges { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ddp-listing-title { margin: 0 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.ddp-listing-tagline { color: var(--ddp-gray-500); margin: 0 0 12px; font-size: 16px; }
.ddp-listing-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ddp-listing-rating { display: flex; align-items: center; gap: 8px; }
.ddp-stars-large { font-size: 20px; color: #f59e0b; text-shadow: 0 1px 0 rgba(245, 158, 11, 0.15); }
.ddp-rating-value { font-weight: 700; }
.ddp-rating-count { color: var(--ddp-primary); font-weight: 600; }
.ddp-listing-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ddp-action-btn { width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--ddp-gray-200); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ddp-gray-500); transition: all var(--ddp-transition); font-size: 16px; padding: 0; }
.ddp-action-btn:hover { border-color: var(--ddp-primary); color: var(--ddp-primary); background: var(--ddp-primary-light); }
.ddp-action-btn.active { background: var(--ddp-danger); border-color: var(--ddp-danger); color: #fff; }

/* ===== GALLERY ===== */
.ddp-gallery-section { margin-bottom: 24px; }
.ddp-gallery-main { border-radius: var(--ddp-radius-xl); overflow: hidden; margin-bottom: 12px; }
.ddp-gallery-main img { width: 100%; max-height: 500px; object-fit: cover; display: block; }
.ddp-gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; }
.ddp-gallery-thumb { width: 80px; height: 80px; border-radius: 10px; overflow: hidden; cursor: pointer; opacity: 0.6; transition: all var(--ddp-transition); border: 2px solid transparent; }
.ddp-gallery-thumb:hover, .ddp-gallery-thumb.active { opacity: 1; border-color: var(--ddp-primary); }
.ddp-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ===== SINGLE CONTENT ===== */
.ddp-single-content { display: grid; grid-template-columns: 1fr 350px; gap: 24px; }
.ddp-content-main .ddp-section { margin-bottom: 24px; }
.ddp-content-main h2 { margin: 0 0 16px; font-size: 20px; font-weight: 700; }
.ddp-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ddp-section-header h2 { margin: 0; }

/* ===== SERVICES & AMENITIES ===== */
.ddp-services-list, .ddp-amenities-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ddp-service-tag, .ddp-amenity-tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--ddp-gray-50); border: 1px solid var(--ddp-gray-100); border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ddp-gray-700); }
.ddp-service-tag svg, .ddp-amenity-tag svg { color: var(--ddp-success); }
.ddp-amenity-icon { font-size: 16px; line-height: 1; display: inline-flex; align-items: center; }

/* ===== COUPONS ===== */
.ddp-coupons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.ddp-coupon-card { border: 2px dashed var(--ddp-warning); border-radius: var(--ddp-radius-lg); padding: 20px; position: relative; background: #fffbeb; }
.ddp-coupon-badge { position: absolute; top: -12px; right: 16px; background: linear-gradient(135deg,#f59e0b,#d97706); color: #1e293b; padding: 4px 14px; border-radius: 8px; font-weight: 700; font-size: 14px; }
.ddp-coupon-card h4 { margin: 8px 0; font-weight: 700; }
.ddp-coupon-code { background: #fff; padding: 10px 14px; border-radius: var(--ddp-radius); margin-top: 12px; font-family: monospace; font-weight: 600; border: 1px solid var(--ddp-gray-200); }
.ddp-coupon-expires { font-size: 12px; color: var(--ddp-gray-500); margin-top: 8px; }

/* ===== REVIEWS ===== */
.ddp-reviews-summary { display: grid; grid-template-columns: auto 1fr; gap: 30px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--ddp-gray-100); }
.ddp-reviews-overall { text-align: center; }
.ddp-overall-rating { font-size: 52px; font-weight: 800; display: block; letter-spacing: -0.04em; color: var(--ddp-gray-900); }
.ddp-overall-count { display: block; color: var(--ddp-gray-500); font-size: 14px; }
.ddp-rating-breakdown { display: flex; flex-direction: column; gap: 8px; }
.ddp-rating-bar { display: flex; align-items: center; gap: 12px; }
.ddp-bar-label { width: 30px; font-size: 14px; font-weight: 600; }
.ddp-bar-track { flex: 1; height: 8px; background: var(--ddp-gray-100); border-radius: 4px; overflow: hidden; }
.ddp-bar-fill { height: 100%; background: linear-gradient(90deg,#f59e0b,#fbbf24); border-radius: 4px; }
.ddp-bar-count { width: 30px; font-size: 13px; color: var(--ddp-gray-500); text-align: right; }
.ddp-review-form-wrap { background: var(--ddp-gray-50); padding: 24px; border-radius: var(--ddp-radius-lg); margin-bottom: 24px; border: 1px solid var(--ddp-gray-100); }
.ddp-star-input { display: flex; gap: 4px; }
.ddp-star-label { cursor: pointer; }
.ddp-star-label input { display: none; }
.ddp-star-label svg { color: var(--ddp-gray-300); transition: color var(--ddp-transition); }
.ddp-star-label:hover svg, .ddp-star-label input:checked ~ svg { color: var(--ddp-warning); fill: var(--ddp-warning); }
.ddp-review-card { padding: 20px 0; border-bottom: 1px solid var(--ddp-gray-100); }
.ddp-review-header { display: flex; gap: 12px; margin-bottom: 12px; }
.ddp-review-avatar img { width: 48px; height: 48px; border-radius: 12px; }
.ddp-review-meta { flex: 1; }
.ddp-review-date { font-size: 13px; color: var(--ddp-gray-400); margin-left: 12px; }
.ddp-review-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.ddp-review-content { color: var(--ddp-gray-600); line-height: 1.7; }
.ddp-owner-reply { background: var(--ddp-gray-50); padding: 16px; border-radius: var(--ddp-radius); margin-top: 16px; border-left: 4px solid var(--ddp-primary); }
.ddp-reply-btn { background: none; border: none; color: var(--ddp-primary); cursor: pointer; font-size: 14px; margin-top: 12px; font-weight: 600; font-family: var(--ddp-font); }
.ddp-reply-form { margin-top: 12px; }
.ddp-review-report { background: none; border: none; cursor: pointer; color: var(--ddp-gray-400); }
.ddp-no-reviews { text-align: center; padding: 40px; color: var(--ddp-gray-400); }

/* ===== SIDEBAR ===== */
.ddp-sidebar-card { background: #fff; padding: 22px; border-radius: var(--ddp-radius-lg); box-shadow: var(--ddp-shadow); margin-bottom: 20px; border: 1px solid var(--ddp-gray-100); }
.ddp-sidebar-card h3 { margin: 0 0 16px; font-size: 16px; font-weight: 700; }
.ddp-contact-btn { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--ddp-gray-50); border-radius: var(--ddp-radius); margin-bottom: 10px; text-decoration: none; color: var(--ddp-gray-700); transition: all var(--ddp-transition); font-weight: 500; border: 1px solid transparent; }
.ddp-contact-btn:hover { background: var(--ddp-gray-100); border-color: var(--ddp-gray-200); }
.ddp-contact-phone { background: var(--ddp-primary); color: #fff; border-color: transparent; }
.ddp-contact-phone:hover { background: var(--ddp-primary-dark); color: #fff; }
.ddp-social-links { display: flex; gap: 8px; }
.ddp-social-link { width: 42px; height: 42px; border-radius: 12px; background: var(--ddp-gray-50); display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ddp-gray-600); font-weight: 700; font-size: 14px; border: 1px solid var(--ddp-gray-100); transition: all var(--ddp-transition); }
.ddp-social-facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.ddp-social-instagram:hover { background: #e4405f; color: #fff; border-color: #e4405f; }
.ddp-social-twitter:hover { background: #000; color: #fff; border-color: #000; }
.ddp-social-linkedin:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.ddp-hours { white-space: pre-line; font-size: 14px; color: var(--ddp-gray-600); line-height: 1.8; }
.ddp-contact-form .ddp-field { margin-bottom: 12px; }
.ddp-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.ddp-mini-stat { text-align: center; padding: 14px; background: var(--ddp-gray-50); border-radius: var(--ddp-radius); border: 1px solid var(--ddp-gray-100); }
.ddp-mini-stat-value { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.ddp-mini-stat-label { font-size: 11px; color: var(--ddp-gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* ===== MODAL ===== */
.ddp-modal { position: fixed; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.ddp-modal-content { background: #fff; padding: 32px; border-radius: var(--ddp-radius-xl); max-width: 420px; width: 90%; position: relative; box-shadow: var(--ddp-shadow-xl); }
.ddp-modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--ddp-gray-400); }
.ddp-share-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.ddp-share-btn { padding: 12px; border-radius: var(--ddp-radius); text-align: center; text-decoration: none; color: #fff; font-weight: 600; font-size: 14px; }
.ddp-share-facebook { background: #1877f2; }
.ddp-share-twitter { background: #000; }
.ddp-share-linkedin { background: #0a66c2; }
.ddp-share-email { background: var(--ddp-gray-600); }
.ddp-share-link { display: flex; gap: 8px; }
.ddp-share-link input { flex: 1; padding: 10px; border: 1.5px solid var(--ddp-gray-200); border-radius: var(--ddp-radius); font-family: var(--ddp-font); }
.ddp-share-link button { padding: 10px 18px; background: var(--ddp-primary); color: #fff; border: none; border-radius: var(--ddp-radius); cursor: pointer; font-weight: 600; }

/* ===== MANAGE PAGES ===== */
.ddp-manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ddp-manage-panel { background: #fff; padding: 24px; border-radius: var(--ddp-radius-lg); box-shadow: var(--ddp-shadow); border: 1px solid var(--ddp-gray-100); }
.ddp-manage-panel h2 { margin: 0 0 20px; font-weight: 700; }
.ddp-term-list { max-height: 500px; overflow-y: auto; }
.ddp-term-item { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--ddp-gray-100); border-radius: 8px; transition: background var(--ddp-transition); }
.ddp-term-item:hover { background: var(--ddp-gray-50); }
.ddp-term-child { padding-left: 28px; }
.ddp-term-icon { font-size: 20px; }
.ddp-term-name { flex: 1; font-weight: 500; }
.ddp-term-count { color: var(--ddp-gray-400); font-size: 13px; font-weight: 600; }
.ddp-term-edit, .ddp-term-delete { background: none; border: none; cursor: pointer; color: var(--ddp-gray-400); font-size: 13px; font-family: var(--ddp-font); font-weight: 500; }
.ddp-term-delete:hover { color: var(--ddp-danger); }
.ddp-term-edit:hover { color: var(--ddp-primary); }

/* ===== ADMIN DASHBOARD ===== */
.ddp-admin-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.ddp-admin-panel { background: #fff; padding: 24px; border-radius: var(--ddp-radius-lg); box-shadow: var(--ddp-shadow); border: 1px solid var(--ddp-gray-100); }
.ddp-admin-panel h2 { margin: 0 0 16px; font-weight: 700; }
.ddp-pending-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--ddp-gray-100); }
.ddp-pending-info strong { display: block; font-weight: 600; }
.ddp-pending-info small { color: var(--ddp-gray-400); font-size: 13px; }
.ddp-pending-actions { display: flex; gap: 8px; }
.ddp-quick-links { display: grid; gap: 8px; }
.ddp-quick-link { display: block; padding: 14px; background: var(--ddp-gray-50); border-radius: var(--ddp-radius); text-decoration: none; color: var(--ddp-gray-700); transition: all var(--ddp-transition); font-weight: 500; border: 1px solid transparent; }
.ddp-quick-link:hover { background: var(--ddp-primary-light); color: var(--ddp-primary); border-color: var(--ddp-primary-glow); }

/* ===== PRICING PAGE ===== */
.ddp-pricing-header { text-align: center; margin-bottom: 40px; }
.ddp-pricing-header h1 { font-size: 38px; margin-bottom: 8px; font-weight: 800; letter-spacing: -0.03em; }
.ddp-pricing-header p { color: var(--ddp-gray-500); font-size: 17px; }
.ddp-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.ddp-pricing-card { background: #fff; padding: 36px; border-radius: var(--ddp-radius-xl); box-shadow: var(--ddp-shadow); text-align: center; position: relative; border: 1.5px solid var(--ddp-gray-100); transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.ddp-pricing-card:hover { box-shadow: var(--ddp-shadow-lg); }
.ddp-pricing-featured { border: 2px solid var(--ddp-primary); transform: scale(1.04); box-shadow: var(--ddp-shadow-lg), 0 0 0 4px var(--ddp-primary-glow); }
.ddp-pricing-card h2 { margin: 0 0 16px; font-weight: 700; }
.ddp-pricing-price { margin-bottom: 16px; }
.ddp-pricing-features { list-style: none; padding: 0; margin: 0 0 28px; text-align: left; }
.ddp-pricing-features li { padding: 10px 0; padding-left: 28px; position: relative; border-bottom: 1px solid var(--ddp-gray-50); font-size: 15px; color: var(--ddp-gray-600); }
.ddp-pricing-features li::before { content: '✓'; position: absolute; left: 0; color: var(--ddp-success); font-weight: 700; }

/* ===== ANALYTICS ===== */
.ddp-analytics-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.ddp-chart-container { height: 250px; }

/* ===== ACCOUNT PAGE ===== */
.ddp-account-header { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.ddp-account-header img { border-radius: 50%; border: 3px solid var(--ddp-gray-100); }
.ddp-account-header h1 { margin: 0; font-weight: 700; }
.ddp-account-header small { color: var(--ddp-gray-500); }
.ddp-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ddp-favorites-list { display: flex; flex-direction: column; gap: 10px; }
.ddp-favorite-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--ddp-gray-50); border-radius: var(--ddp-radius); border: 1px solid var(--ddp-gray-100); }
.ddp-favorite-item img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.ddp-remove-favorite { margin-left: auto; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--ddp-gray-400); }
.ddp-account-links { margin-top: 24px; display: flex; gap: 12px; }

/* ===== EMPTY STATES ===== */
.ddp-empty, .ddp-empty-state { text-align: center; padding: 60px 40px; color: var(--ddp-gray-500); }
.ddp-empty-state svg, .ddp-empty svg { margin-bottom: 16px; color: var(--ddp-gray-300); }
.ddp-empty-state h3, .ddp-empty h3 { margin: 0 0 8px; color: var(--ddp-gray-700); font-weight: 700; }
.ddp-empty p { margin-bottom: 20px; }

/* ===== PAGINATION ===== */
.ddp-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 36px; }
.ddp-pagination a, .ddp-pagination span { padding: 10px 16px; border: 1.5px solid var(--ddp-gray-200); border-radius: 10px; text-decoration: none; color: var(--ddp-gray-700); font-weight: 600; font-size: 14px; transition: all var(--ddp-transition); }
.ddp-pagination a:hover { border-color: var(--ddp-primary); color: var(--ddp-primary); background: var(--ddp-primary-light); }
.ddp-pagination .current { background: var(--ddp-primary); border-color: var(--ddp-primary); color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,0.3); }

/* ===== SPINNER ===== */
.ddp-spin { animation: ddp-spin 1s linear infinite; }
@keyframes ddp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .ddp-single-content { grid-template-columns: 1fr; }
    .ddp-admin-grid { grid-template-columns: 1fr; }
    .ddp-manage-grid { grid-template-columns: 1fr; }
    .ddp-account-grid { grid-template-columns: 1fr; }
    .ddp-stats-4 { grid-template-columns: repeat(2, 1fr); }
    .ddp-auth-page { flex-direction: column; }
    .ddp-steps { flex-wrap: wrap; justify-content: flex-start; }
    .ddp-step:not(:last-child)::after { display: none; }
    .ddp-listing-header-main { flex-direction: column; }
    .ddp-listing-header-actions { width: 100%; justify-content: flex-start; }
    .ddp-reviews-summary { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .ddp-grid { grid-template-columns: 1fr; }
    .ddp-field-row, .ddp-field-row-3 { grid-template-columns: 1fr; }
    .ddp-stats { grid-template-columns: 1fr 1fr; }
    .ddp-search-main { flex-direction: column; }
    .ddp-search-main .ddp-btn { width: 100%; }
    .ddp-filters-row { flex-direction: column; }
    .ddp-filters-row .ddp-select { width: 100%; }
    .ddp-dashboard-header { flex-direction: column; align-items: flex-start; }
    .ddp-image-row { grid-template-columns: 1fr; }
    .ddp-payment-methods { grid-template-columns: 1fr; }
    .ddp-pricing-featured { transform: none; }
    .ddp-results-bar { flex-direction: column; align-items: flex-start; }
    .ddp-results-controls { width: 100%; justify-content: space-between; }
}

/* =============================================
   MAP MARKERS — GPS pin style
   ============================================= */
.ddp-marker {
    background: transparent !important;
    border: none !important;
}
.ddp-marker-inner {
    width: 28px;
    height: 36px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: transform 0.15s ease-out;
    cursor: pointer;
}
.ddp-marker-inner svg {
    width: 100%;
    height: 100%;
    display: block;
    /* Pin teardrop fill: primary indigo for normal listings */
    fill: var(--ddp-primary);
}
.ddp-marker:hover .ddp-marker-inner {
    transform: scale(1.15) translateY(-2px);
}
.ddp-marker-featured .ddp-marker-inner svg {
    /* Featured listings: warning gold */
    fill: #d97706;
}
.ddp-marker-single .ddp-marker-inner svg {
    fill: var(--ddp-primary);
}

/* Marker clusters — override leaflet.markercluster defaults */
.ddp-cluster {
    background: transparent !important;
    border: none !important;
}
.ddp-cluster .ddp-cluster-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-family: var(--ddp-font);
    background: var(--ddp-primary);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 4px rgba(79,70,229,0.25);
    transition: transform 0.15s ease-out;
}
.ddp-cluster:hover .ddp-cluster-inner {
    transform: scale(1.08);
}
.ddp-cluster-sm .ddp-cluster-inner { font-size: 13px; background: var(--ddp-primary); }
.ddp-cluster-md .ddp-cluster-inner { font-size: 14px; background: #7c3aed; box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 4px rgba(124,58,237,0.25); }
.ddp-cluster-lg .ddp-cluster-inner { font-size: 15px; background: #ec4899; box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 4px rgba(236,72,153,0.25); }
.ddp-cluster-count { line-height: 1; }
/* Spiderfy lines and leg endpoints */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
    transition: transform 0.25s ease-out, opacity 0.25s ease-in;
}

/* =============================================
   ACCESSIBILITY — keyboard focus visibility
   Applies a visible focus ring to every interactive control. Uses
   :focus-visible so the ring only appears for keyboard users, not mouse
   clicks, on browsers that support it. Required for WCAG 2.4.7.
   ============================================= */
.ddp-btn:focus-visible,
.ddp-card-category:focus-visible,
.ddp-card-link:focus-visible,
.ddp-card-phone:focus-visible,
.ddp-card-title a:focus-visible,
.ddp-action-btn:focus-visible,
.ddp-view-btn:focus-visible,
.ddp-map-type-btn:focus-visible,
.ddp-clear-filters:focus-visible,
.ddp-back-link:focus-visible,
.ddp-auth-footer a:focus-visible,
.ddp-pagination a:focus-visible {
    outline: 2px solid var(--ddp-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.25);
    border-radius: var(--ddp-radius);
}

/* Honor user's motion preferences (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    .ddp-card:hover { transform: none; }
    .ddp-btn-primary:hover { transform: none; }
}

/* Screen-reader-only utility — for visually hidden labels */
.ddp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Near Me / radius controls ─────────────────────────────────────────── */
.ddp-near-active {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .85rem;
    padding: .65rem .9rem;
    background: rgba(255, 255, 255, .92);
    border-radius: 10px;
}
.ddp-near-label {
    font-size: .9rem;
    color: #003b49;
    font-weight: 600;
}
.ddp-radius-select {
    min-width: 6.5rem;
}
.ddp-near-clear {
    border: 0;
    background: none;
    padding: .25rem .4rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: underline;
}
.ddp-near-clear:link,
.ddp-near-clear:visited { color: #1d4289; background: transparent; }
.ddp-near-clear:hover,
.ddp-near-clear:active { color: #fff; background: #1d4289; text-decoration: none; }
.ddp-near-clear:focus-visible { outline: 3px solid #ffc845; outline-offset: 2px; }

#ddp-locate-me.active { color: #fff; background: #1d4289; border-color: #1d4289; }
#ddp-locate-me.active:hover,
#ddp-locate-me.active:focus { color: #fff; background: #1b365d; }

/* Fallback image sits where a real photo would, same crop behaviour. */
.ddp-card-image .ddp-default-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* "You are here" marker for radius searches */
.ddp-you-are-here { background: none; border: 0; }
.ddp-you-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* White glyph on navy, with a white ring so it stays legible over both
       street tiles and the darker satellite layer. */
    color: #fff;
    background: #1d4289;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

/* ==================== Directory Users (v4.16.0) ==================== */
.ddp-manage-users .ddp-stats { margin: 20px 0 24px; }
.ddp-user-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.ddp-user-filters .ddp-input { flex: 1 1 220px; min-width: 180px; }
.ddp-user-filters .ddp-select { flex: 0 1 180px; }
.ddp-check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ddp-gray-700); }
.ddp-table-wrap { overflow-x: auto; }
.ddp-users-table { min-width: 760px; }
.ddp-user-cell { display: flex; align-items: center; gap: 12px; }
.ddp-user-avatar { border-radius: 50%; flex-shrink: 0; }
.ddp-user-cell strong { display: block; line-height: 1.3; }
.ddp-user-cell small { display: block; color: var(--ddp-gray-500); font-size: 12px; }
.ddp-count-breakdown { display: block; color: var(--ddp-gray-500); font-size: 12px; }
.ddp-muted { color: var(--ddp-gray-500); }
.ddp-badge-claim { background: #fef3c7; color: #92400e; margin-top: 4px; }
.ddp-badge-locked { background: var(--ddp-gray-100); color: var(--ddp-gray-700); }
.ddp-user-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ddp-role-select { max-width: 170px; }
.ddp-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.ddp-page-num { display: inline-block; padding: 6px 12px; border-radius: var(--ddp-radius); border: 1px solid var(--ddp-gray-100); font-size: 14px; font-weight: 600; }
.ddp-page-num:link, .ddp-page-num:visited { color: var(--ddp-primary); background: #fff; text-decoration: none; }
.ddp-page-num:hover, .ddp-page-num:focus, .ddp-page-num:active { color: #fff; background: var(--ddp-primary); }
.ddp-page-current { color: #fff; background: var(--ddp-primary); border-color: var(--ddp-primary); }
.ddp-ql-icon { vertical-align: -3px; }
@media (max-width: 640px) {
  .ddp-user-filters { flex-direction: column; align-items: stretch; }
  .ddp-user-filters .ddp-select, .ddp-user-filters .ddp-input { flex: 1 1 auto; }
}

/* ============ Plugin page title suppression (v4.18.0) ============
   The plugin's own pages render their own headings inside the shortcode,
   so the theme's page title is a duplicate. Selectors cover the common
   theme families plus Elementor and the block theme title block.
   Scoped to .ddp-hide-page-title so nothing else on the site is touched. */
.ddp-hide-page-title .entry-title,
.ddp-hide-page-title .page-title,
.ddp-hide-page-title .page-header .entry-title,
.ddp-hide-page-title .entry-header .entry-title,
.ddp-hide-page-title header.entry-header > .entry-title,
.ddp-hide-page-title .wp-block-post-title,
.ddp-hide-page-title .elementor-page-title,
.ddp-hide-page-title .elementor-heading-title.elementor-page-title,
.ddp-hide-page-title .ast-single-post-order .entry-title,
.ddp-hide-page-title .site-main > article > .entry-header,
.ddp-hide-page-title .hentry > .entry-header > .entry-title,
.ddp-hide-page-title .single-featured-image-header,
.ddp-hide-page-title .td-page-title,
.ddp-hide-page-title .page-hero-title {
    display: none !important;
}
/* Some themes reserve vertical space in the header wrapper even once the
   heading itself is gone, leaving a visible gap above the content. */
.ddp-hide-page-title .page-header:empty,
.ddp-hide-page-title .entry-header:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===================================================================
   NEARBY CITIES
   Sits above the results on a place page. Entries with listings are
   links; curated entries with none are plain text, so nobody taps
   through to an empty result set.
   =================================================================== */
.ddp-nearby {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--ddp-primary-light, #eef1f7);
    border-radius: 0.75rem;
}

.ddp-nearby-title {
    margin: 0 0 0.875rem;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--ddp-primary-dark, #1b365d);
}

.ddp-nearby-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ddp-nearby-item { margin: 0; }

.ddp-nearby-link {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.875rem;
    min-height: 2.75rem;          /* 44px tap target */
    justify-content: center;
    background: #ffffff;
    border: 0.0625rem solid var(--dir-mist, #d0d3d4);
    border-radius: 0.5rem;
    text-decoration: none;
}

.ddp-nearby-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1b365d;
}

.ddp-nearby-meta {
    font-size: 0.8125rem;
    color: #003b49;
}

/* LVHA — :link, :visited, :hover, :active, in that order. Every state
   declares background AND text together; a rule that sets only one
   inherits the other from whichever state fired last. */
a.ddp-nearby-link:link    { background: #ffffff; color: #1b365d; }
a.ddp-nearby-link:visited { background: #ffffff; color: #1b365d; }
a.ddp-nearby-link:hover   { background: #1d4289; color: #ffffff; }
a.ddp-nearby-link:active  { background: #1b365d; color: #ffffff; }

a.ddp-nearby-link:hover .ddp-nearby-name,
a.ddp-nearby-link:hover .ddp-nearby-meta,
a.ddp-nearby-link:active .ddp-nearby-name,
a.ddp-nearby-link:active .ddp-nearby-meta { color: #ffffff; }

a.ddp-nearby-link:focus-visible {
    outline: 0.1875rem solid #1d4289;
    outline-offset: 0.125rem;
}

/* Named but not yet linkable. Muted, not greyed into illegibility —
   #003b49 on #d6d2c4 clears AAA. */
.ddp-nearby-item.is-empty .ddp-nearby-link {
    background: var(--dir-sand, #d6d2c4);
    border-style: dashed;
    cursor: default;
}
.ddp-nearby-item.is-empty .ddp-nearby-name,
.ddp-nearby-item.is-empty .ddp-nearby-meta { color: #003b49; }

/* The two location selects read as one control. */
.ddp-select-state { min-width: 9rem; }
.ddp-select-place { min-width: 11rem; }

@media (max-width: 40rem) {
    .ddp-select-state,
    .ddp-select-place { min-width: 0; flex: 1 1 100%; }
    .ddp-nearby { padding: 1rem; }
}

/* ===================================================================
   BASE DISTANCE + LOCATIONS INSTALLER
   =================================================================== */
.ddp-base-distance {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background: #1b365d;
    color: #ffffff;              /* AAA on #1b365d */
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.ddp-base-distance svg { flex: 0 0 auto; }

.ddp-field-hint {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #003b49;
}

.ddp-bases-install .ddp-bases-progress { margin-top: 1rem; }

.ddp-bases-bar {
    height: 0.75rem;
    background: #d0d3d4;
    border-radius: 999px;
    overflow: hidden;
}

.ddp-bases-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: #1d4289;
    transition: width 0.25s ease;
}

#ddp-bases-status {
    margin: 0.6rem 0 0;
    font-size: 0.875rem;
    color: #003b49;
}

/* ===================================================================
   PHOTO REMOVE BUTTONS + RICH TEXT DESCRIPTION
   =================================================================== */

/* Remove buttons sit on top of a photo, so they need their own solid
   background rather than inheriting whatever the image is. #5d3754
   with white clears AAA; the previous --ddp-danger red does not. */
.ddp-remove-img,
.ddp-gallery-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5d3754;
    color: #ffffff;
    border: 0.125rem solid #ffffff;
    cursor: pointer;
    padding: 0;
}

.ddp-remove-img {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    top: 0.5rem;
    right: 0.5rem;
}

.ddp-gallery-remove {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.4375rem;
    top: 0.25rem;
    right: 0.25rem;
}

.ddp-remove-img:hover,
.ddp-gallery-remove:hover,
.ddp-remove-img:focus-visible,
.ddp-gallery-remove:focus-visible {
    background: #000000;
    color: #ffffff;
}

.ddp-remove-img:focus-visible,
.ddp-gallery-remove:focus-visible {
    outline: 0.1875rem solid #ffc845;
    outline-offset: 0.125rem;
}

/* The buttons were previously only discoverable by hovering the photo on
   a mouse. Keep them visible always — on a phone there is no hover. */
.ddp-gallery-item .ddp-gallery-remove,
.ddp-upload-preview .ddp-remove-img { opacity: 1; }

/* wp_editor drops its own chrome in; keep it inside the form's width and
   stop the admin stylesheet's margins from breaking the field rhythm. */
.ddp-field-editor .wp-editor-wrap { margin-top: 0.375rem; }
.ddp-field-editor .wp-editor-container { border-radius: 0.5rem; overflow: hidden; }
.ddp-field-editor .wp-editor-area { border: 0; }
.ddp-field-editor .mce-panel { border-color: var(--dir-mist, #d0d3d4); }
.ddp-field-editor .quicktags-toolbar { background: #f2f2f2; }

/* TinyMCE renders at a fixed pixel width if the form is narrow on load. */
.ddp-field-editor .wp-editor-wrap,
.ddp-field-editor .mce-tinymce { max-width: 100%; }

/* ===================================================================
   [base_search] — standalone State -> Base block
   =================================================================== */
.ddp-base-search { width: 100%; }

.ddp-base-search-title {
    margin: 0 0 0.75rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.25;
}

.ddp-base-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
}

.ddp-base-search-field { flex: 1 1 14rem; min-width: 0; }

.ddp-base-search-field .ddp-select {
    width: 100%;
    min-height: 2.75rem;          /* 44px tap target */
}

.ddp-base-search-btn {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding-inline: 1.5rem;
}

/* Both states declare background AND text together — a rule that sets only
   one inherits the other from whichever state fired last. */
.ddp-base-search-btn:link,
.ddp-base-search-btn:visited { background: #1d4289; color: #ffffff; }
.ddp-base-search-btn:hover,
.ddp-base-search-btn:active  { background: #1b365d; color: #ffffff; }

.ddp-base-search-btn:focus-visible {
    outline: 0.1875rem solid #ffc845;
    outline-offset: 0.125rem;
}

@media (max-width: 40rem) {
    .ddp-base-search-field,
    .ddp-base-search-btn { flex: 1 1 100%; }
}

/* ===================================================================
   MORE FILTERS PANEL — contrast
   -------------------------------------------------------------------
   The heading and the amenity labels declared no colour, so they
   inherited whatever the surrounding section used. That is fine on the
   light page this was designed against and invisible on a dark hero:
   navy text on a navy panel.

   Fixed by giving the panel its own surface rather than by forcing the
   text white. Forcing white would only move the problem — it would then
   fail on every light-background site the plugin ships to. An explicit
   surface plus explicit text is correct on any background.

   Pairs used, both AAA:
     #1b365d on #ffffff   headings, labels
     #003b49 on #ffffff   secondary text
   =================================================================== */
.ddp-more-filters {
    background: #ffffff;
    color: #1b365d;
    padding: 1.25rem;
    margin-top: 1.125rem;
    border: 0.0625rem solid #d0d3d4;
    border-top: 0.0625rem solid #d0d3d4;   /* was the only border; keep the box closed */
    border-radius: 0.75rem;
}

.ddp-more-filters .ddp-filter-section + .ddp-filter-section { margin-top: 1.25rem; }

.ddp-more-filters h4,
.ddp-filter-section h4 {
    margin: 0 0 0.75rem;
    color: #1b365d;
    font-size: 1rem;
    line-height: 1.3;
}

/* Each label is its own row: the grid was overlapping two-line labels
   ("Accepts Credit Cards" sat on top of "Open Now") because nothing
   reserved height for a wrapped second line. */
.ddp-more-filters .ddp-checkbox-label,
.ddp-amenities-grid .ddp-checkbox-label {
    align-items: flex-start;
    gap: 0.5rem;
    min-height: 1.75rem;
    line-height: 1.35;
    color: #1b365d;
}

.ddp-amenities-grid {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.625rem 1rem;
    align-items: start;
}

.ddp-more-filters .ddp-checkbox-label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.0625rem 0 0;      /* nudge onto the first text line */
    accent-color: #1d4289;
}

.ddp-more-filters .ddp-checkbox-label input[type="checkbox"]:focus-visible {
    outline: 0.1875rem solid #1d4289;
    outline-offset: 0.125rem;
}

/* Any secondary copy inside the panel — price hints, counts, ranges. */
.ddp-more-filters .description,
.ddp-more-filters small,
.ddp-more-filters .ddp-filter-hint { color: #003b49; }

/* Inputs inside the panel must not inherit a dark-section text colour. */
.ddp-more-filters input[type="text"],
.ddp-more-filters input[type="number"],
.ddp-more-filters select {
    color: #1b365d;
    background: #ffffff;
    border: 0.09375rem solid #d0d3d4;
}

@media (max-width: 30rem) {
    .ddp-amenities-grid { grid-template-columns: 1fr 1fr; }
}