/* ═══════════════════════════════════════════════════════════════
   Village Portal — Public Stylesheet  v1.3.12
   DS v.3 neumorphic sandy palette.
   Color tokens: lbn-user-portal injects --c-* at priority 100.
   Fonts: lbn-avada-manager injects Zain/Tajawal globally.
   RTL: conditional via [dir="rtl"] / .rtl — never hardcoded.
   ═══════════════════════════════════════════════════════════════ */

/* ── Token aliases ────────────────────────────────────────────── */
:root {
    --vp-sand-base:     var(--c-sand-300,    #ece0c8);
    --vp-sand-light:    var(--c-sand-200,    #f3e8d1);
    --vp-sand-dark:     var(--c-sand-400,    #d9c9ae);
    --vp-teal:          var(--c-sea-800,     #285260);
    --vp-teal-dark:     var(--c-sea-900,     #1a3a47);
    --vp-teal-light:    var(--c-sea-100,     #e0edf0);
    --vp-text:          var(--c-ink-900,     #2a2118);
    --vp-text-muted:    var(--c-ink-600,     #6b5b4e);
    --vp-success:       var(--c-success,     #4f8a6b);
    --vp-success-bg:    var(--c-success-bg,  #e8f5ee);
    --vp-warning:       var(--c-warning,     #b87333);
    --vp-warning-bg:    var(--c-warning-bg,  #fef3e2);
    --vp-danger:        var(--c-danger,      #a93226);
    --vp-shadow-raised:    var(--shadow-raised,    -6px -6px 14px rgba(255,248,232,.85), 6px 6px 14px rgba(122,98,72,.18));
    --vp-shadow-inset:     var(--shadow-inset,     inset 3px 3px 7px rgba(122,98,72,.15), inset -3px -3px 7px rgba(255,248,232,.8));
    --vp-shadow-inset-sm:  var(--shadow-inset-sm,  inset 2px 2px 4px rgba(122,98,72,.16), inset -2px -2px 4px rgba(255,248,232,.8));
    --vp-radius:        var(--r-card,        16px);
    --vp-radius-sm:     var(--r-input,       10px);
    --vp-radius-pill:   var(--r-pill,        999px);
    --vp-font-heading:  var(--lbn-font-heading, 'Zain', sans-serif);
    --vp-font-body:     var(--lbn-font-body,    'Tajawal', sans-serif);
    --vp-max-w:         1140px;
    --vp-gap:           24px;
}

/* ── Reset / base ─────────────────────────────────────────────── */
.vp-wrap *,
.vp-wrap *::before,
.vp-wrap *::after { box-sizing: border-box; }

.vp-wrap {
    font-family: var(--vp-font-body);
    color: var(--vp-text);
    background: var(--vp-sand-base);
    direction: rtl;
}

/* ── Full-width: strip Avada wrapper constraints on village pages ─ */
/* Targets Avada 8 outer containers — keeps header/footer intact.  */
.single-lbn_village #wrapper,
.post-type-archive-lbn_village #wrapper {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
.single-lbn_village #main,
.post-type-archive-lbn_village #main,
.single-lbn_village #content,
.post-type-archive-lbn_village #content,
.single-lbn_village .fusion-row,
.post-type-archive-lbn_village .fusion-row,
.single-lbn_village .post-content,
.post-type-archive-lbn_village .post-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.vp-container {
    max-width: var(--vp-max-w);
    margin: 0 auto;
    padding: 0 var(--vp-gap);
}

/* ── Utility ──────────────────────────────────────────────────── */
.vp-card {
    background: var(--vp-sand-light);
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow-raised);
    padding: 24px;
}

.vp-inset {
    background: var(--vp-sand-base);
    border-radius: var(--vp-radius-sm);
    box-shadow: var(--vp-shadow-inset);
    padding: 12px 16px;
}

.vp-icon-box {
    width: 40px; height: 40px;
    border-radius: var(--vp-radius-sm);
    box-shadow: var(--vp-shadow-inset);
    background: var(--vp-sand-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vp-teal);
    flex-shrink: 0;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.vp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--vp-radius-sm);
    font-family: var(--vp-font-body);
    font-size: .9rem;
    line-height: 1.4;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    min-height: 44px;
    min-width: 44px;
    text-decoration: none;
    transition: box-shadow .2s, transform .15s;
    white-space: nowrap;
}

.vp-btn--primary {
    background: var(--vp-teal);
    color: #fff;
    box-shadow: var(--vp-shadow-raised);
}
.vp-btn--primary:hover {
    background: var(--vp-teal-dark);
    box-shadow: none;
    transform: translateY(1px);
    color: #fff;
    text-decoration: none;
}

.vp-btn--secondary {
    background: var(--vp-sand-light);
    color: var(--vp-teal);
    box-shadow: var(--vp-shadow-raised);
}
.vp-btn--secondary:hover {
    box-shadow: var(--vp-shadow-inset);
    transform: translateY(1px);
    color: var(--vp-teal);
    text-decoration: none;
}

.vp-btn--sm { padding: 7px 16px; font-size: .82rem; min-height: auto; }
.vp-btn-icon {
    display: inline-flex !important;
    align-items: center;
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
}
.vp-btn--danger { background: var(--vp-danger); color: #fff; }

/* ── Badges / Pills ───────────────────────────────────────────── */
.vp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--vp-radius-pill);
    font-size: .78rem;
    font-weight: 600;
}
.vp-badge--verified  { background: var(--vp-success-bg); color: var(--vp-success); }
.vp-badge--region    { background: var(--vp-teal-light);  color: var(--vp-teal); border: 1px solid var(--vp-teal); }
.vp-badge--pending   { background: var(--vp-warning-bg);  color: var(--vp-warning); }
.vp-badge--news      { background: var(--vp-teal-light);  color: var(--vp-teal); }
.vp-badge--claim     { background: var(--vp-sand-light);  color: var(--vp-teal); border: 1.5px solid var(--vp-teal); }

/* ── Notices ──────────────────────────────────────────────────── */
.vp-notice {
    padding: 12px 18px;
    border-radius: var(--vp-radius-sm);
    margin-bottom: 16px;
    font-size: .9rem;
}
.vp-notice--info    { background: var(--vp-teal-light);  color: var(--vp-teal); }
.vp-notice--success { background: var(--vp-success-bg);  color: var(--vp-success); }
.vp-notice--warn    { background: var(--vp-warning-bg);  color: var(--vp-warning); }
.vp-notice--error   { background: var(--c-danger-bg, #fce8e6); color: var(--vp-danger); }

/* ══════════════════════════════════════════════════════════════
   HERO SECTION (single village + archive)
   ══════════════════════════════════════════════════════════════ */
.vp-hero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--vp-teal-dark);
}

.vp-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
}

.vp-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,58,71,.75) 0%, rgba(26,58,71,.2) 55%, transparent 100%);
}

/* Archive hero: full-opacity image replaces teal background */
.vp-archive .vp-hero {
    aspect-ratio: 3 / 1;
    min-height: 260px;
}
.vp-archive .vp-hero__bg {
    opacity: 1;
}
.vp-archive .vp-hero__gradient {
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.15) 100%);
}

.vp-hero__body {
    position: relative;
    z-index: 1;
    padding: 40px 0 32px;
    width: 100%;
    color: #fff;
}

.vp-hero__breadcrumb {
    font-size: .8rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.65);      /* spans / separators */
}
.vp-hero__breadcrumb a {
    color: rgba(255,255,255,.9);
    text-decoration: none;
    transition: color .15s, text-decoration-color .15s;
}
.vp-hero__breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,.6);
}
.vp-hero__breadcrumb i { opacity: .5; font-size: .75em; }

.vp-hero__title {
    font-family: var(--vp-font-heading);
    font-size: 2.6rem;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.2;
    /* Avada overrides h1/h2 color via theme CSS — force white explicitly */
    color: #fff !important;
}
.vp-hero__title i,
.vp-hero__title .fas,
.vp-hero__title .far,
.vp-hero__title .fab {
    color: #fff !important;
}

.vp-hero__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vp-hero__stats {
    display: flex;
    gap: 32px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.vp-hero__stat { text-align: center; }
.vp-hero__stat strong { display: block; font-size: 1.6rem; font-weight: 700; }
.vp-hero__stat span   { font-size: .8rem; opacity: .8; }

/* ══════════════════════════════════════════════════════════════
   SINGLE VILLAGE — 5-TAB LAYOUT
   ══════════════════════════════════════════════════════════════ */
.vp-single { background: var(--vp-sand-base); min-height: 60vh; }

/* Tab nav */
.vp-tabs {
    background: var(--vp-sand-light);
    box-shadow: var(--vp-shadow-raised);
    position: sticky;
    top: 0;
    z-index: 100;
}

.vp-tabs__inner {
    max-width: var(--vp-max-w);
    margin: 0 auto;
    padding: 0 var(--vp-gap);
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.vp-tabs__inner::-webkit-scrollbar { display: none; }

.vp-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 14px 20px;
    font-family: var(--vp-font-body);
    font-size: .9rem;
    font-weight: 600;
    color: var(--vp-text-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.vp-tab:hover { color: var(--vp-teal); text-decoration: none; }
.vp-tab.is-active {
    color: var(--vp-teal);
    border-bottom-color: var(--vp-teal);
}

/* Tab content area */
.vp-tab-content { padding: 40px 0; }

.vp-tab-panel { display: none; }
.vp-tab-panel.is-active { display: block; }

/* Overview two-column layout */
.vp-overview-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--vp-gap);
    align-items: start;
}

@media (max-width: 820px) {
    .vp-overview-grid { grid-template-columns: 1fr; }
}

/* Sidebar cards */
.vp-sidebar { display: flex; flex-direction: column; gap: var(--vp-gap); }

.vp-info-card { }
.vp-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--vp-sand-dark);
}
.vp-info-row:last-child { border-bottom: none; }
.vp-info-label { font-size: .8rem; color: var(--vp-text-muted); flex: 1; }
.vp-info-value { font-weight: 600; font-size: .9rem; }

/* Trusted entity card */
.vp-entity-card {
    background: var(--vp-sand-light);
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow-raised);
    border-top: 4px solid var(--vp-success);
    padding: 20px;
}
.vp-entity-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.vp-entity-card__icon {
    width: 36px; height: 36px;
    background: var(--vp-success-bg);
    border-radius: var(--vp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vp-success);
}
.vp-entity-card__label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vp-success);
}
.vp-entity-card__name {
    font-family: var(--vp-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 6px;
}
.vp-entity-card__type {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--vp-radius-pill);
    box-shadow: var(--vp-shadow-inset);
    font-size: .78rem;
    color: var(--vp-text-muted);
    margin-bottom: 8px;
}
.vp-entity-card__since { font-size: .8rem; color: var(--vp-text-muted); }

/* ── Section headings ─────────────────────────────────────────── */
.vp-section-title {
    font-family: var(--vp-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--vp-text);
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--vp-sand-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}
.vp-section-title i { color: var(--vp-teal); }

/* ══════════════════════════════════════════════════════════════
   NEWS TAB
   ══════════════════════════════════════════════════════════════ */
.vp-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--vp-gap);
}

.vp-news-card {
    background: var(--vp-sand-light);
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow-raised);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    text-decoration: none;
    color: var(--vp-text);
    display: flex;
    flex-direction: column;
}
.vp-news-card:hover {
    box-shadow: none;
    transform: translateY(2px);
    text-decoration: none;
    color: var(--vp-text);
}

.vp-news-card__thumb {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--vp-sand-dark);
}
.vp-news-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.vp-news-card__body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.vp-news-card__date { font-size: .78rem; color: var(--vp-text-muted); margin-bottom: 8px; }
.vp-news-card__title {
    font-family: var(--vp-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.4;
}
.vp-news-card__excerpt { font-size: .88rem; color: var(--vp-text-muted); flex: 1; }
.vp-news-card__read-more {
    margin-top: 14px;
    font-size: .82rem;
    color: var(--vp-teal);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   GALLERY TAB
   ══════════════════════════════════════════════════════════════ */
.vp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.vp-gallery-item {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--vp-radius-sm);
    box-shadow: var(--vp-shadow-raised);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.vp-gallery-item:hover { transform: scale(1.02); box-shadow: none; }
.vp-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.vp-gallery-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--vp-text-muted);
}
.vp-gallery-empty i { font-size: 3rem; margin-bottom: 16px; display: block; }

/* ══════════════════════════════════════════════════════════════
   EVENTS TAB
   ══════════════════════════════════════════════════════════════ */
.vp-events-list { display: flex; flex-direction: column; gap: 16px; }

.vp-event-card {
    background: var(--vp-sand-light);
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow-raised);
    padding: 20px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.vp-event-card__date-box {
    width: 60px;
    flex-shrink: 0;
    background: var(--vp-teal);
    border-radius: var(--vp-radius-sm);
    color: #fff;
    text-align: center;
    padding: 8px 4px;
}
.vp-event-card__day   { font-size: 1.8rem; font-weight: 700; line-height: 1; display: block; }
.vp-event-card__month { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }

.vp-event-card__body { flex: 1; }
.vp-event-card__title {
    font-family: var(--vp-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 6px;
}
.vp-event-card__location { font-size: .85rem; color: var(--vp-text-muted); }

/* ══════════════════════════════════════════════════════════════
   ARCHIVE PAGE (village list)
   ══════════════════════════════════════════════════════════════ */

/*
 * Full-width breakout: Avada wraps shortcode output in a padded column.
 * This technique pulls the archive wrap to 100vw regardless of the parent.
 */
.vp-wrap.vp-archive {
    width:         100vw !important;
    max-width:     100vw !important;
    margin-left:   calc(-50vw + 50%) !important;
    margin-right:  calc(-50vw + 50%) !important;
    margin-top:    0 !important;
    padding-top:   0 !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
    overflow-x:    hidden;
}

.vp-archive { background: var(--vp-sand-base); min-height: 60vh; }

/* Sticky filter bar */
.vp-filter-bar {
    background: var(--vp-sand-light);
    box-shadow: var(--vp-shadow-raised);
    position: sticky;
    top: 0;
    z-index: 90;
    padding: 12px 0;
}
.vp-filter-bar__inner {
    max-width: var(--vp-max-w);
    margin: 0 auto;
    padding: 0 var(--vp-gap);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.vp-filter-pill {
    padding: 6px 16px;
    border-radius: var(--vp-radius-pill);
    border: none;
    font-family: var(--vp-font-body);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--vp-sand-base);
    box-shadow: var(--vp-shadow-inset);
    color: var(--vp-text-muted);
    transition: all .2s;
}
.vp-filter-pill.is-active {
    background: var(--vp-teal);
    color: #fff;
    box-shadow: var(--vp-shadow-raised);
}
.vp-filter-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-right: auto;
    font-size: .85rem;
    font-weight: 600;
    color: var(--vp-teal);
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--vp-font-body);
}
.vp-filter-count {
    font-size: .82rem;
    color: var(--vp-text-muted);
}
.vp-filter-search {
    padding: 6px 14px;
    border-radius: var(--vp-radius-sm) !important;
    border: none !important;
    box-shadow: var(--vp-shadow-inset) !important;
    background: var(--vp-sand-base) !important;
    font-family: var(--vp-font-body);
    font-size: .85rem;
    color: var(--vp-text);
    min-width: 180px;
    -webkit-appearance: none;
    appearance: none;
}
.vp-filter-search:focus { outline: 2px solid var(--vp-teal); }

/* Map panel (toggled) */
.vp-map-panel {
    display: none;
    height: 360px;
    background: var(--vp-sand-dark);
}
.vp-map-panel.is-open { display: block; }
#vp-archive-map { width: 100%; height: 100%; }

/* Region groups */
.vp-region-group { padding: 40px 0 20px; }

.vp-region-title {
    font-family: var(--vp-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vp-teal);
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--vp-sand-dark);
    display: flex;
    align-items: center;
    gap: 12px;
}
/* DS v.3 icon chip: rounded-square inset container, teal icon on sand bg */
.vp-region-title i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vp-sand-base);
    border-radius: 50%;
    box-shadow: var(--vp-shadow-inset-sm);
    color: var(--vp-teal);
    font-size: .9em;
    flex-shrink: 0;
}

.vp-villages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--vp-gap);
}

/* Village card */
.vp-village-card {
    background: var(--vp-sand-light);
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow-raised);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    text-decoration: none;
    color: var(--vp-text);
    display: flex;
    flex-direction: column;
    position: relative;
}
.vp-village-card:hover {
    box-shadow: none;
    transform: translateY(2px);
    text-decoration: none;
    color: var(--vp-text);
}

.vp-village-card__thumb {
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
}
.vp-village-card__thumb-img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.vp-village-card__thumb-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--vp-teal) 0%, var(--vp-teal-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.3);
    font-size: 3rem;
}
.vp-village-card__verified {
    position: absolute;
    top: 10px;
    left: 10px;
}

.vp-village-card__body { padding: 16px; flex: 1; }
.vp-village-card__region { font-size: .75rem; color: var(--vp-teal); font-weight: 600; margin-bottom: 4px; }
.vp-village-card__name {
    font-family: var(--vp-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 10px;
}
.vp-village-card__stats {
    display: flex;
    gap: 14px;
}
.vp-village-card__stat { font-size: .78rem; color: var(--vp-text-muted); }

/* CTA card (register entity) */
/* ── Contextual action bar (single village: Edit / Claim) ─────── */
.vp-action-bar {
    background: var(--vp-sand-light);
    box-shadow: var(--vp-shadow-raised);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 90;
}
.vp-action-bar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.vp-action-bar__claim-msg {
    color: var(--vp-warning);
    font-size: .9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
}
.vp-btn--outline {
    background: transparent;
    color: var(--vp-teal);
    border-color: var(--vp-teal);
    box-shadow: none;
}
.vp-btn--outline:hover { background: var(--vp-teal-light); }

/* Read-only locked field (e.g. admin-assigned region) */
.vp-form-static {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: var(--vp-sand-dark);
    border-radius: var(--vp-radius-sm);
    box-shadow: var(--vp-shadow-inset-sm);
    color: var(--vp-text-muted);
    font-size: .9375rem;
    font-weight: 600;
    cursor: not-allowed;
}

/* CTA card (register entity) */
.vp-cta-card {
    background: var(--vp-teal-light);
    border-radius: var(--vp-radius);
    border: 2px dashed var(--vp-teal);
    padding: 28px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    justify-content: center;
    min-height: 200px;
}
.vp-cta-card p { margin: 0; font-size: .9rem; color: var(--vp-teal); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   MAP SHORTCODE
   ══════════════════════════════════════════════════════════════ */
.vp-map-wrap {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
    border-radius: var(--vp-radius);
    overflow: hidden;
    box-shadow: var(--vp-shadow-raised);
}
@media (max-width: 768px) { .vp-map-wrap { grid-template-columns: 1fr; } }

.vp-map-canvas { width: 100%; min-height: 400px; }

.vp-map-sidebar {
    background: var(--vp-sand-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--vp-sand-dark);
}
[dir="rtl"] .vp-map-sidebar { border-right: none; border-left: 1px solid var(--vp-sand-dark); }

.vp-map-search { padding: 12px; border-bottom: 1px solid var(--vp-sand-dark); }
.vp-search-input {
    width: 100%;
    background: var(--vp-sand-base);
    border: none;
    border-radius: var(--vp-radius-sm);
    box-shadow: var(--vp-shadow-inset);
    color: var(--vp-text);
    padding: 8px 12px;
    font-family: var(--vp-font-body);
    font-size: .88rem;
}
.vp-search-input:focus { outline: 2px solid var(--vp-teal); }

.vp-map-list { flex: 1; overflow-y: auto; }
.vp-map-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--vp-sand-dark);
    cursor: pointer;
    font-size: .88rem;
    transition: background .15s;
}
.vp-map-item:hover { background: var(--vp-sand-base); }
.vp-map-item strong { display: block; }
.vp-map-item span   { font-size: .75rem; color: var(--vp-text-muted); }

/* ══════════════════════════════════════════════════════════════
   FORMS — entity registration + entity dashboard publish form
   ══════════════════════════════════════════════════════════════ */

/* Card wrapper */
.vp-form-wrap {
    background: var(--vp-sand-light);
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow-raised);
    padding: 36px 40px;
    max-width: 720px;
    margin: 40px auto;
}

.vp-form-title {
    font-family: var(--vp-font-heading);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--vp-text);
    margin: 0 0 10px;
}

.vp-form-intro {
    color: var(--vp-text-muted);
    font-size: .95rem;
    margin: 0 0 28px;
    line-height: 1.65;
}

/* Row spacing */
.vp-form-row { margin-bottom: 20px; }

/* Two-column half row */
.vp-form-row--half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) {
    .vp-form-row--half { grid-template-columns: 1fr; }
    .vp-form-wrap { padding: 24px 20px; }
}

/* Labels */
.vp-form-row label,
.vp-form label {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: 7px;
    color: var(--vp-text);
}

/* All inputs, selects, textareas inside a vp-form or vp-form-wrap — DS v.3 inset well */
.vp-form input[type="text"],
.vp-form input[type="email"],
.vp-form input[type="tel"],
.vp-form input[type="number"],
.vp-form input[type="date"],
.vp-form input[type="url"],
.vp-form input[type="password"],
.vp-form select,
.vp-form textarea,
.vp-form-wrap input[type="text"],
.vp-form-wrap input[type="email"],
.vp-form-wrap input[type="tel"],
.vp-form-wrap input[type="number"],
.vp-form-wrap input[type="date"],
.vp-form-wrap input[type="url"],
.vp-form-wrap input[type="password"],
.vp-form-wrap select,
.vp-form-wrap textarea {
    display: block;
    width: 100%;
    padding: 11px 14px;
    background: var(--vp-sand-base);
    border: none;
    border-radius: var(--vp-radius-sm);
    box-shadow: var(--vp-shadow-inset);
    font-family: var(--vp-font-body);
    font-size: .9375rem;
    color: var(--vp-text);
    transition: box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}

.vp-form input:focus,
.vp-form select:focus,
.vp-form textarea:focus,
.vp-form-wrap input:focus,
.vp-form-wrap select:focus,
.vp-form-wrap textarea:focus {
    outline: none;
    box-shadow: var(--vp-shadow-inset), 0 0 0 3px rgba(84,140,146,.28);
}

/* Selects: restore native browser arrow (browser handles RTL position correctly)
   and reset symmetric padding suppressed by the base appearance:none rule. */
.vp-form select,
.vp-form-wrap select,
.vp-wrap select {
    -webkit-appearance: auto;
    appearance: auto;
    padding: 11px 14px;
    cursor: pointer;
    font-family: var(--vp-font-body, 'Tajawal', sans-serif) !important;
}

.vp-form textarea,
.vp-form-wrap textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.6;
}

/* Note / hint line */
.vp-form-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--vp-teal-light);
    border-radius: var(--vp-radius-sm);
    box-shadow: var(--vp-shadow-inset);
    padding: 12px 16px;
    font-size: .85rem;
    color: var(--vp-teal);
    margin: 24px 0;
}
.vp-form-note .dashicons { font-size: 1rem; line-height: 1.5; flex-shrink: 0; }

/* Actions row */
.vp-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 8px;
}

/* Feedback area (success / error) */
.vp-form-feedback {
    margin-top: 16px;
    font-size: .9rem;
    border-radius: var(--vp-radius-sm);
    padding: 0;
}
.vp-form-feedback.vp-notice { padding: 12px 18px; }

/* ══════════════════════════════════════════════════════════════
   ENTITY DASHBOARD
   ══════════════════════════════════════════════════════════════ */
.vp-dashboard { padding: 32px 0; }
.vp-dashboard__header {
    background: linear-gradient(135deg, var(--vp-teal) 0%, var(--vp-teal-dark) 100%);
    border-radius: var(--vp-radius);
    padding: 28px;
    color: #fff;
    margin-bottom: var(--vp-gap);
    display: flex;
    align-items: center;
    gap: 20px;
}
.vp-dashboard__avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}
.vp-dashboard__name  { font-family: var(--vp-font-heading); font-size: 1.4rem; font-weight: 700; margin: 0 0 4px; }
.vp-dashboard__meta  { font-size: .85rem; opacity: .8; }

/* News/event list in dashboard */
.vp-dash-list { display: flex; flex-direction: column; gap: 12px; }
.vp-dash-item {
    background: var(--vp-sand-light);
    border-radius: var(--vp-radius-sm);
    box-shadow: var(--vp-shadow-raised);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.vp-dash-item__thumb {
    width: 56px; height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--vp-sand-dark);
}
.vp-dash-item__body { flex: 1; min-width: 0; }
.vp-dash-item__title {
    font-weight: 700;
    font-size: .95rem;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vp-dash-item__meta  { font-size: .78rem; color: var(--vp-text-muted); }
.vp-dash-item__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Gallery grid in dashboard */
.vp-dash-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.vp-dash-gallery__item {
    aspect-ratio: 1;
    border-radius: var(--vp-radius-sm);
    overflow: hidden;
    box-shadow: var(--vp-shadow-raised);
    position: relative;
}
.vp-dash-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.vp-dash-gallery__remove {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(169,50,38,.85);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
}
.vp-dash-gallery__upload {
    aspect-ratio: 1;
    border-radius: var(--vp-radius-sm);
    box-shadow: var(--vp-shadow-inset);
    background: var(--vp-sand-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: var(--vp-text-muted);
    font-size: .78rem;
    transition: color .2s;
}
.vp-dash-gallery__upload:hover { color: var(--vp-teal); }
.vp-dash-gallery__upload i { font-size: 1.4rem; }

/* ══════════════════════════════════════════════════════════════
   SINGLE NEWS ARTICLE
   ══════════════════════════════════════════════════════════════ */
.vp-article { padding: 40px 0; }
.vp-article__hero {
    aspect-ratio: 16/7;
    overflow: hidden;
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow-raised);
    margin-bottom: 32px;
}
.vp-article__hero img { width: 100%; height: 100%; object-fit: cover; }
.vp-article__header { margin-bottom: 28px; }
.vp-article__kicker {
    font-size: .8rem;
    color: var(--vp-teal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}
.vp-article__title {
    font-family: var(--vp-font-heading);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.3;
}
.vp-article__meta { font-size: .82rem; color: var(--vp-text-muted); }
.vp-article__body { line-height: 1.9; }
.vp-article__body p  { margin: 0 0 1.2em; }
.vp-article__body h2,
.vp-article__body h3 { font-family: var(--vp-font-heading); color: var(--vp-teal); margin: 1.6em 0 .6em; }
.vp-article__back {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--vp-sand-dark);
}

/* ── Styled file upload ───────────────────────────────────────── */
.vp-file-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vp-file-hidden {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; overflow: hidden;
    pointer-events: none;
}
.vp-file-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--vp-sand-light);
    border-radius: var(--vp-radius-sm);
    box-shadow: var(--vp-shadow-raised);
    font-family: var(--vp-font-body);
    font-size: .9rem;
    font-weight: 600;
    color: var(--vp-teal);
    cursor: pointer;
    transition: box-shadow .15s;
    border: none;
}
.vp-file-label:hover { box-shadow: var(--vp-shadow-inset); }
.vp-file-name {
    font-size: .85rem;
    color: var(--vp-text-muted);
    font-style: italic;
    flex: 1;
}
.vp-file-thumb {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.vp-file-thumb img {
    width: 80px; height: 80px;
    object-fit: cover;
    border-radius: var(--vp-radius-sm);
    box-shadow: var(--vp-shadow-raised);
}

/* ── Map picker (Village Settings tab) ───────────────────────── */
.vp-map-picker {
    width: 100%;
    height: 320px;
    border-radius: var(--vp-radius);
    overflow: hidden;
    box-shadow: var(--vp-shadow-inset);
    cursor: crosshair;
}
.vp-map-picker__coords {
    margin-top: 8px;
    font-size: .85rem;
    color: var(--vp-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.vp-map-picker__coords i { color: var(--vp-teal); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .vp-hero__title { font-size: 1.8rem; }
    .vp-tabs__inner { gap: 0; }
    .vp-tab { padding: 12px 14px; font-size: .82rem; }
    .vp-news-grid { grid-template-columns: 1fr; }
    .vp-villages-grid { grid-template-columns: 1fr 1fr; }
    .vp-event-card { flex-direction: column; }
    .vp-dashboard__header { flex-direction: column; text-align: center; }
}

@media (max-width: 400px) {
    .vp-villages-grid { grid-template-columns: 1fr; }
}

/* ── Homepage Strip [vp_homepage_strip] ───────────────────────── */
.vp-strip {
    padding: var(--vp-gap) 0;
    font-family: var(--vp-font-body);
}

.vp-strip__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.vp-strip__title {
    font-family: var(--vp-font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--vp-teal);
    margin: 0;
}

.vp-strip__view-all {
    font-size: .88rem;
    color: var(--vp-teal);
    text-decoration: underline;
    white-space: nowrap;
    flex-shrink: 0;
}
.vp-strip__view-all:hover { color: var(--vp-teal-dark); text-decoration: none; }

.vp-strip__grid {
    display: grid;
    grid-template-columns: repeat(var(--vp-strip-cols, 3), 1fr);
    gap: var(--vp-gap);
}

.vp-strip__card {
    display: flex;
    flex-direction: column;
    background: var(--vp-sand-light);
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow-raised);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s;
}
.vp-strip__card:hover {
    transform: translateY(-4px);
    box-shadow: -8px -8px 20px rgba(255,248,232,.9), 8px 8px 20px rgba(122,98,72,.25);
    text-decoration: none;
    color: inherit;
}

.vp-strip__card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--vp-teal);
    flex-shrink: 0;
}
.vp-strip__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.vp-strip__card:hover .vp-strip__card-img img { transform: scale(1.04); }

.vp-strip__card-img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(255,255,255,.45);
}

.vp-strip__card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.vp-strip__card-title {
    font-family: var(--vp-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vp-text);
    margin: 0;
    line-height: 1.3;
}

.vp-strip__card-region {
    display: inline-block;
    font-size: .78rem;
    color: var(--vp-teal);
    background: var(--vp-teal-light);
    border-radius: var(--vp-radius-pill);
    padding: 2px 10px;
    font-weight: 600;
    align-self: flex-start;
}

.vp-strip__card-btn {
    display: inline-block;
    margin-top: auto;
    padding: 7px 18px;
    background: var(--vp-teal);
    color: #fff !important;
    border-radius: var(--vp-radius-pill);
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    align-self: flex-start;
    transition: background .2s;
}
.vp-strip__card:hover .vp-strip__card-btn { background: var(--vp-teal-dark); }

/* Strip responsive breakpoints */
@media (max-width: 1024px) {
    .vp-strip__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .vp-strip__grid { grid-template-columns: repeat(2, 1fr); }
    .vp-strip__title { font-size: 1.3rem; }
}
@media (max-width: 480px) {
    .vp-strip__grid { grid-template-columns: 1fr; }
}

/* ── Advanced search panel ─────────────────────────────────────────── */
.vp-adv-search {
    background: var(--vp-sand-base);
    padding: 20px 0;
    box-shadow: 0 2px 8px rgba(122,98,72,.07);
    position: relative;
    z-index: 10;
}
.vp-adv-search__inner {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.vp-adv-search__field {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vp-adv-search__label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vp-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.vp-adv-select {
    display: block;
    width: 100%;
    padding: 11px 14px;
    background: var(--vp-sand-base) !important;
    border: none !important;
    border-radius: var(--vp-radius-sm) !important;
    box-shadow: var(--vp-shadow-inset) !important;
    font-family: var(--vp-font-body, 'Tajawal', sans-serif);
    font-size: .9375rem;
    color: var(--vp-text);
    cursor: pointer;
    -webkit-appearance: auto;
    appearance: auto;
    transition: box-shadow .15s;
}
.vp-adv-select:focus {
    outline: none;
    box-shadow: var(--vp-shadow-inset), 0 0 0 3px rgba(84,140,146,.28);
}
.vp-adv-select:disabled {
    opacity: .45;
    cursor: not-allowed;
}
@media (max-width: 600px) {
    .vp-adv-search__inner { flex-direction: column; }
    .vp-adv-search__field { min-width: 0; width: 100%; }
}