/* ===================================================================
   ArtsVenue Elementor Widgets — Dark & Light Theme
   v2.6.0 — Fixed header rendering, improved dropdown + mobile designs
   =================================================================== */

/* ─── Standalone CSS variable fallbacks (when not on AV pages) ─── */
.av-el-widget {
    --av-bg:          #0a0a0a;
    --av-surface:     #141414;
    --av-surface2:    #1c1c1c;
    --av-border:      #2a2a2a;
    --av-gold:        #d4a843;
    --av-gold-hover:  #e6bc5a;
    --av-gold-dim:    rgba(212,168,67,0.12);
    --av-text:        #f0f0f0;
    --av-text-muted:  #888888;
    --av-success:     #4ade80;
    --av-danger:      #ef4444;
    --av-radius:      10px;
    --av-radius-sm:   6px;
    --av-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --av-card-bg:     linear-gradient(165deg,#161612 0%,#0f0f0b 100%);
    --av-card-border: rgba(212,168,67,0.15);
    --av-on-gold-text:#0a0a0a;
    --av-img-placeholder: linear-gradient(160deg,#1a1810 0%,#0c0c08 50%,#12110d 100%);
    font-family: var(--av-font);
}

/* Light theme */
body[data-av-theme="light"] .av-el-widget,
.av-el-widget[data-av-theme="light"],
.av-el-nav-drawer[data-av-theme="light"],
.av-el-account-dropdown[data-av-theme="light"] {
    --av-bg:          #f4f5f7;
    --av-surface:     #ffffff;
    --av-surface2:    #eef0f3;
    --av-border:      #dde1e8;
    --av-gold:        #b8892a;
    --av-gold-hover:  #d4a843;
    --av-gold-dim:    rgba(184,137,42,0.10);
    --av-text:        #1a1a2e;
    --av-text-muted:  #6b7280;
    --av-card-bg:     #ffffff;
    --av-card-border: #dde1e8;
    --av-on-gold-text:#ffffff;
    --av-img-placeholder: linear-gradient(160deg,#f0ece0 0%,#e8e0cc 50%,#ede5d0 100%);
}

/* ===================================================================
   SHOWS GRID WIDGET
   =================================================================== */

.av-el-shows-grid { width: 100%; }

.av-el-shows-grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.av-el-shows-grid-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--av-text);
    margin: 0;
    line-height: 1.2;
}

/* Filter pills */
.av-el-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.av-el-filter-bar::-webkit-scrollbar { display: none; }

.av-el-filter-pill {
    padding: 8px 20px;
    border: 1px solid rgba(212,168,67,0.25);
    border-radius: 100px;
    background: transparent;
    color: var(--av-text-muted);
    font-family: var(--av-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.av-el-filter-pill:hover {
    border-color: var(--av-gold);
    color: var(--av-gold);
    background: rgba(212,168,67,0.06);
}
.av-el-filter-pill.active {
    background: linear-gradient(135deg, var(--av-gold), #c49a35);
    border-color: var(--av-gold);
    color: var(--av-on-gold-text);
    font-weight: 700;
    box-shadow: 0 2px 12px rgba(212,168,67,0.25);
}

/* Grid */
.av-el-grid { display: grid; gap: 24px; }
.av-el-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.av-el-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.av-el-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

/* Card */
.av-el-card {
    background: var(--av-card-bg);
    border: 1px solid var(--av-card-border);
    border-radius: var(--av-radius);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
.av-el-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--av-radius);
    background: linear-gradient(135deg, rgba(212,168,67,0.06) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
}
.av-el-card:hover::before { opacity: 1; }
.av-el-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(212,168,67,0.15), 0 0 0 1px rgba(212,168,67,0.3);
    border-color: rgba(212,168,67,0.4);
}
body[data-av-theme="light"] .av-el-card:hover {
    box-shadow: 0 8px 32px rgba(184,137,42,0.18), 0 0 0 1px rgba(184,137,42,0.4);
}

.av-el-card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--av-img-placeholder);
    flex-shrink: 0;
}
.av-el-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.av-el-card:hover .av-el-card-image { transform: scale(1.05); }

.av-el-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    color: rgba(212,168,67,0.25);
}

.av-el-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--av-gold);
    color: var(--av-on-gold-text);
}

.av-el-card-body {
    padding: 16px;
    border-top: 1px solid rgba(212,168,67,0.1);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.av-el-card-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--av-gold);
    margin-bottom: 6px;
    opacity: 0.9;
}
.av-el-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--av-text);
    margin: 0 0 4px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.av-el-card-date {
    font-size: 12px;
    color: var(--av-text-muted);
    margin-bottom: 12px;
}
.av-el-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(212,168,67,0.08);
    margin-top: auto;
}
.av-el-card-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--av-gold);
}
.av-el-card-price small {
    font-size: 11px;
    font-weight: 400;
    color: var(--av-text-muted);
}

.av-el-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: linear-gradient(135deg, var(--av-gold), #c49a35);
    color: var(--av-on-gold-text);
    border: none;
    border-radius: var(--av-radius-sm);
    font-family: var(--av-font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.av-el-card-btn:hover {
    background: linear-gradient(135deg, var(--av-gold-hover), var(--av-gold));
    box-shadow: 0 3px 12px rgba(212,168,67,0.3);
}

/* Loading / empty */
.av-el-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    grid-column: 1/-1;
}
.av-el-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--av-border);
    border-top-color: var(--av-gold);
    border-radius: 50%;
    animation: av-el-spin 0.7s linear infinite;
}
@keyframes av-el-spin { to { transform: rotate(360deg); } }

.av-el-empty {
    text-align: center;
    color: var(--av-text-muted);
    padding: 48px 20px;
    font-size: 15px;
    grid-column: 1/-1;
}
.av-el-view-all { text-align: center; margin-top: 32px; }


/* ===================================================================
   NAV MENU WIDGET
   =================================================================== */

.av-el-nav {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

/* Desktop horizontal menu */
.av-el-nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.av-el-nav-item { position: relative; }

.av-el-nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 14px;
    color: var(--av-text, #f0f0f0);
    text-decoration: none;
    font-family: var(--av-font);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--av-radius-sm);
    transition: all 0.2s;
    white-space: nowrap;
    line-height: 1;
    position: relative;
}
.av-el-nav-link:after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--av-gold);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.2s ease;
    transform-origin: left;
}
.av-el-nav-link:hover,
.av-el-nav-item.current > .av-el-nav-link {
    color: var(--av-gold, #d4a843);
    background: var(--av-gold-dim);
}
.av-el-nav-link:hover:after,
.av-el-nav-item.current > .av-el-nav-link:after {
    transform: scaleX(1);
}

.av-el-nav-link .av-el-nav-arrow {
    font-size: 9px;
    opacity: 0.6;
    transition: transform 0.2s;
    margin-left: 2px;
}
.av-el-nav-item:hover > .av-el-nav-link .av-el-nav-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

/* Desktop dropdown */
.av-el-nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 210px;
    background: var(--av-surface, #141414);
    border: 1px solid var(--av-border, #2a2a2a);
    border-radius: var(--av-radius);
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
    z-index: 9000;
    padding: 6px;
    list-style: none;
    margin: 0;
    animation: av-el-dropdown-in 0.15s ease;
}
body[data-av-theme="light"] .av-el-nav-dropdown {
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
@keyframes av-el-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.av-el-nav-item:hover > .av-el-nav-dropdown,
.av-el-nav-item:focus-within > .av-el-nav-dropdown { display: block; }

.av-el-nav-dropdown li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--av-text, #f0f0f0);
    text-decoration: none;
    font-family: var(--av-font);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--av-radius-sm);
    transition: all 0.15s;
}
.av-el-nav-dropdown li a:hover {
    background: var(--av-gold-dim);
    color: var(--av-gold);
    padding-left: 20px;
}

/* Hamburger toggle */
.av-el-nav-toggle {
    display: none; /* overridden per-widget by inline <style> */
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    background: transparent;
    border: 1.5px solid var(--av-border, #2a2a2a);
    border-radius: var(--av-radius-sm);
    cursor: pointer;
    color: var(--av-text, #f0f0f0);
    transition: all 0.2s;
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--av-font);
}
.av-el-nav-toggle svg rect,
.av-el-nav-toggle svg circle,
.av-el-nav-toggle svg path { fill: currentColor; }
.av-el-nav-toggle .av-toggle-label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
    color: inherit;
}
.av-el-nav-toggle:hover {
    border-color: var(--av-gold);
    color: var(--av-gold);
    background: var(--av-gold-dim);
}

/* ── Mobile Drawer ────────────────────────────────────────────────── */
/* Drawer lives at <body> level — NOT inside Elementor widget stacking */
.av-el-nav-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999999;
    pointer-events: none;
}
.av-el-nav-drawer.open {
    display: block;
    pointer-events: auto;
}

.av-el-nav-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    animation: av-el-fade-in 0.25s ease;
    backdrop-filter: blur(2px);
}
@keyframes av-el-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Panel slides from RIGHT (matching reference image) */
.av-el-nav-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(320px, 88vw);
    height: 100%;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
    box-shadow: -12px 0 48px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    animation: av-el-drawer-in 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
}
.av-el-nav-drawer[data-av-theme="dark"] .av-el-nav-drawer-panel {
    background: #1a1a1a;
    border-left-color: #2a2a2a;
    box-shadow: -12px 0 48px rgba(0,0,0,0.5);
}
@keyframes av-el-drawer-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.av-el-nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}
.av-el-nav-drawer[data-av-theme="dark"] .av-el-nav-drawer-header {
    background: #111111;
    border-bottom-color: #2a2a2a;
}

.av-el-nav-drawer-title {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: 0.2px;
}
.av-el-nav-drawer[data-av-theme="dark"] .av-el-nav-drawer-title { color: #f0f0f0; }

.av-el-nav-drawer-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1.5px solid #e5e7eb;
    border-radius: 50%;
    cursor: pointer;
    color: #6b7280;
    font-size: 16px;
    transition: all 0.2s;
    line-height: 1;
    padding: 0;
}
.av-el-nav-drawer[data-av-theme="dark"] .av-el-nav-drawer-close {
    border-color: #3a3a3a;
    color: #888;
}
.av-el-nav-drawer-close:hover {
    background: rgba(212,168,67,0.1);
    border-color: #d4a843;
    color: #d4a843;
}

.av-el-nav-drawer-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    flex: 1;
}

.av-el-nav-drawer-list > li {
    border-bottom: 1px solid #f0f0f0;
}
.av-el-nav-drawer[data-av-theme="dark"] .av-el-nav-drawer-list > li {
    border-bottom-color: #222;
}
.av-el-nav-drawer-list > li:last-child { border-bottom: none; }

.av-el-nav-drawer-list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    color: #1a1a2e;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.18s;
}
.av-el-nav-drawer[data-av-theme="dark"] .av-el-nav-drawer-list > li > a { color: #f0f0f0; }
.av-el-nav-drawer-list > li > a:hover {
    background: rgba(212,168,67,0.08);
    color: #d4a843;
    padding-left: 28px;
}

.av-el-nav-drawer-list .sub-items {
    background: #f4f5f7;
    list-style: none;
    padding: 4px 0;
    margin: 0;
    border-top: 1px solid #e8e8e8;
}
.av-el-nav-drawer[data-av-theme="dark"] .av-el-nav-drawer-list .sub-items {
    background: #111;
    border-top-color: #2a2a2a;
}
.av-el-nav-drawer-list .sub-items li { border-bottom: none; }
.av-el-nav-drawer-list .sub-items a {
    display: block;
    font-size: 13px;
    padding: 10px 20px 10px 36px;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.15s;
}
.av-el-nav-drawer[data-av-theme="dark"] .av-el-nav-drawer-list .sub-items a { color: #888; }
.av-el-nav-drawer-list .sub-items a:hover { color: #d4a843; padding-left: 44px; }

.av-drawer-item-arrow {
    font-size: 18px;
    font-weight: 300;
    color: #9ca3af;
    transition: transform 0.2s;
}

.av-el-nav-drawer-footer {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    font-family: 'Inter', sans-serif;
}
.av-el-nav-drawer[data-av-theme="dark"] .av-el-nav-drawer-footer {
    border-top-color: #2a2a2a;
}

/* ===================================================================
   ACCOUNT ICON WIDGET
   =================================================================== */

.av-el-account-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
}

.elementor-widget-artsvenue_account_icon,
.elementor-widget-artsvenue_account_icon .elementor-widget-container {
    width: auto;
    max-width: 100%;
}

/* Trigger button — icon only, compact */
.av-el-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: transparent;
    border: 1.5px solid var(--av-border, #2a2a2a);
    border-radius: 100px;
    cursor: pointer;
    font-family: var(--av-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--av-text, #f0f0f0);
    transition: all 0.2s;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.av-el-account-btn:hover,
.av-el-account-btn.open {
    border-color: var(--av-gold);
    background: var(--av-gold-dim);
    color: var(--av-gold);
}

.av-el-account-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--av-gold), #c49a35);
    color: var(--av-on-gold-text);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.av-el-account-icon-svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
}

.av-el-account-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.av-el-account-chevron {
    font-size: 10px;
    opacity: 0.6;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.av-el-account-btn.open .av-el-account-chevron { transform: rotate(180deg); }

/* ── Dropdown panel — white card style (from reference) ─────────── */
.av-el-account-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 270px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 99999;
    overflow: hidden;
    animation: av-el-dropdown-in 0.18s ease;
    font-family: 'Inter', -apple-system, sans-serif;
}
.av-el-account-dropdown[data-av-theme="dark"] {
    background: #1c1c1c;
    border-color: #2a2a2a;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.av-el-account-dropdown.open { display: block; }

/* Dropdown title row */
.av-el-account-drop-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 4px;
}
.av-el-account-drop-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
}
.av-el-account-dropdown[data-av-theme="dark"] .av-el-account-drop-title { color: #f0f0f0; }

/* Logged-in header */
.av-el-account-drop-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #f9fafb;
}
.av-el-account-dropdown[data-av-theme="dark"] .av-el-account-drop-header {
    background: #141414;
    border-bottom-color: #2a2a2a;
}

.av-el-account-drop-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4a843, #c49a35);
    color: #0a0a0a;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.av-el-account-dropdown[data-av-theme="dark"] .av-el-account-drop-avatar {
    color: #0a0a0a;
}

.av-el-account-drop-info { flex: 1; min-width: 0; }
.av-el-account-drop-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.av-el-account-dropdown[data-av-theme="dark"] .av-el-account-drop-name { color: #f0f0f0; }

.av-el-account-drop-email {
    font-size: 11px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* Nav items */
.av-el-account-drop-nav {
    list-style: none;
    margin: 0;
    padding: 8px;
}

.av-el-account-drop-nav li a,
.av-el-account-drop-nav li button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    color: #374151;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.15s;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}
.av-el-account-dropdown[data-av-theme="dark"] .av-el-account-drop-nav li a,
.av-el-account-dropdown[data-av-theme="dark"] .av-el-account-drop-nav li button {
    color: #d1d5db;
}
.av-el-account-drop-nav li a:hover,
.av-el-account-drop-nav li button:hover {
    background: #f9fafb;
    color: #d4a843;
}
.av-el-account-dropdown[data-av-theme="dark"] .av-el-account-drop-nav li a:hover,
.av-el-account-dropdown[data-av-theme="dark"] .av-el-account-drop-nav li button:hover {
    background: rgba(212,168,67,0.1);
    color: #d4a843;
}

.av-el-account-drop-icon {
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.av-el-account-drop-label { flex: 1; }

.av-el-account-drop-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 4px 12px;
}
.av-el-account-dropdown[data-av-theme="dark"] .av-el-account-drop-divider { background: #2a2a2a; }

/* Sign-out danger color */
.av-el-account-drop-nav .av-el-drop-signout { color: #ef4444 !important; }
.av-el-account-drop-nav .av-el-drop-signout:hover { background: rgba(239,68,68,0.08) !important; color: #ef4444 !important; }

/* Sign-in state (logged out) */
.av-el-account-drop-signin {
    padding: 16px;
    text-align: center;
}
.av-el-account-drop-signin p {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px;
    line-height: 1.5;
}

.av-el-account-drop-signin .av-el-btn-gold {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 16px;
    background: linear-gradient(135deg, #d4a843, #c49a35);
    color: #0a0a0a;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 8px;
    gap: 6px;
}
.av-el-account-drop-signin .av-el-btn-gold:hover {
    background: linear-gradient(135deg, #e6bc5a, #d4a843);
    box-shadow: 0 4px 16px rgba(212,168,67,0.35);
}

.av-el-account-drop-signin .av-el-btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    color: #d4a843;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid #d4a843;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    gap: 6px;
}
.av-el-account-drop-signin .av-el-btn-outline:hover {
    background: rgba(212,168,67,0.08);
}

/* Browse shows link */
.av-el-drop-browse-shows {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.av-el-drop-browse-shows a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    padding: 4px;
    transition: color 0.2s;
}
.av-el-drop-browse-shows a:hover { color: #d4a843; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */

@media (max-width: 1024px) {
    .av-el-grid[data-cols="4"] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .av-el-account-wrap { max-width: 100%; }
    .av-el-account-btn { padding: 7px 9px; gap: 5px; }

    .av-el-grid[data-cols="3"],
    .av-el-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }

    .av-el-nav-list   { display: none; }
    .av-el-nav-toggle { display: flex; }

    .elementor-widget-artsvenue_account_icon,
    .elementor-widget-artsvenue_account_icon .elementor-widget-container,
    .elementor-widget-artsvenue_account_icon .av-el-account-wrap {
        width: auto !important;
        max-width: max-content;
        flex: 0 0 auto;
    }

    .av-el-account-dropdown {
        right: 0;
        left: auto;
        transform: none;
        width: min(260px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 480px) {
    .av-el-account-wrap { width: auto; max-width: 100%; }
    .av-el-account-btn { padding: 6px 8px; border-radius: 999px; }
    .av-el-account-name { max-width: 72px; }
    .av-el-account-dropdown { min-width: 0; max-width: calc(100vw - 16px); }

    .av-el-grid[data-cols="2"],
    .av-el-grid[data-cols="3"],
    .av-el-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .av-el-account-dropdown {
        right: 0;
        left: auto;
        transform: none;
        width: min(260px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
        border-radius: 14px;
        border-left: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
        border-top: 1px solid #e8e8e8;
    }
}


/* ── Light mode nav: keep links WHITE + GOLD on dark/black headers ──
   The light theme CSS vars would turn nav links dark (#1a1a2e) which
   is unreadable on a black header. These rules force white text with
   the gold hover/active colour regardless of theme variables.
   Elementor's explicit color selectors (from the widget controls)
   will always override these if the user customises colours. */

body[data-av-theme="light"] .av-el-nav .av-el-nav-link {
    color: #ffffff;
}
body[data-av-theme="light"] .av-el-nav .av-el-nav-link:hover,
body[data-av-theme="light"] .av-el-nav .av-el-nav-item.current > .av-el-nav-link {
    color: #d4a843;
    background: rgba(212,168,67,0.12);
}
body[data-av-theme="light"] .av-el-nav .av-el-nav-link:after {
    background: #d4a843;
}
body[data-av-theme="light"] .av-el-nav .av-el-nav-link .av-el-nav-arrow {
    color: inherit;
}

/* ── Light mode: dropdown stays dark (like dark theme) ── */
body[data-av-theme="light"] .av-el-nav-dropdown {
    background: #1c1c1c;
    border-color: #2a2a2a;
}
body[data-av-theme="light"] .av-el-nav-dropdown li a {
    color: #f0f0f0;
}
body[data-av-theme="light"] .av-el-nav-dropdown li a:hover {
    background: rgba(212,168,67,0.12);
    color: #d4a843;
}

/* ── Light mode: hamburger toggle stays visible on dark header ── */
body[data-av-theme="light"] .av-el-nav-toggle {
    border-color: rgba(255,255,255,0.3);
    color: #ffffff;
}
body[data-av-theme="light"] .av-el-nav-toggle:hover {
    border-color: #d4a843;
    color: #d4a843;
    background: rgba(212,168,67,0.12);
}

/* Labeled hamburger variant */
.av-el-nav-toggle--labeled {
    padding: 0 14px;
}


/* ===================================================================
   ARTSVENUE POPUP WIDGET
   =================================================================== */

.av-el-popup-widget {
    position: relative;
    display: block;
    width: 0;
    height: 0;
    line-height: 0;
    overflow: visible;
}

.av-el-popup-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--av-popup-overlay-bg, rgba(0,0,0,0.35));
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.32s ease, visibility 0.32s ease;
    box-sizing: border-box;
}

.av-el-popup-overlay.is-open,
.av-el-popup-overlay.is-closing {
    visibility: visible;
}

.av-el-popup-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.av-el-popup-overlay.is-closing {
    opacity: 0;
    pointer-events: none;
}

.av-el-popup-box {
    width: min(var(--av-popup-width, 700px), calc(100vw - 48px));
    height: min(var(--av-popup-height, 450px), calc(100vh - 48px));
    background: var(--av-popup-bg, transparent);
    color: #111111;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    max-width: 100%;
    max-height: 100%;
    transform: translateY(24px) scale(0.98);
    transition: transform 0.32s ease, opacity 0.32s ease;
    opacity: 0;
}

.av-el-popup-overlay.is-open .av-el-popup-box,
.av-el-popup-box.is-editor-preview {
    transform: translateY(0) scale(1);
    opacity: 1;
}

body[data-av-theme="dark"] .av-el-popup-box {
    color: #f5f5f5;
}

.av-el-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    padding: 0;
    border: none;
    background: none;
    color: var(--av-popup-close-color, #ffffff);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}

.av-el-popup-close:hover {
    color: var(--av-popup-close-hover-color, #d4a843);
    transform: scale(1.05);
}

.av-el-popup-close[disabled] {
    cursor: default;
    opacity: 0.7;
    transform: none;
}

.av-el-popup-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.av-el-popup-content > .elementor,
.av-el-popup-content > .elementor-element,
.av-el-popup-content > .elementor-section,
.av-el-popup-content .elementor-section-wrap,
.av-el-popup-content .elementor-location-popup,
.av-el-popup-content .elementor-widget-wrap {
    width: 100%;
}

.av-el-popup-content .elementor,
.av-el-popup-content .elementor-section,
.av-el-popup-content .elementor-container,
.av-el-popup-content .elementor-column,
.av-el-popup-content .elementor-widget-wrap,
.av-el-popup-content .e-con,
.av-el-popup-content .e-child {
    max-width: 100%;
}

.av-el-popup-editor-preview {
    max-width: min(var(--av-popup-width, 700px), 100%);
}

.av-el-popup-editor-preview-note {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f5f5f5;
    color: #374151;
    font-size: 13px;
    line-height: 1.5;
}

.av-el-popup-empty-state {
    padding: 24px;
    font-size: 14px;
    color: #6b7280;
}

@media (max-width: 1024px) {
    .av-el-popup-box {
        width: min(var(--av-popup-width-tablet, var(--av-popup-width, 700px)), calc(100vw - 32px));
        height: min(var(--av-popup-height-tablet, var(--av-popup-height, 450px)), calc(100vh - 32px));
    }
}

@media (max-width: 767px) {
    .av-el-popup-overlay {
        padding: 12px;
        align-items: center;
    }

    .av-el-popup-box {
        width: min(var(--av-popup-width-mobile, var(--av-popup-width-tablet, var(--av-popup-width, 700px))), calc(100vw - 24px));
        height: min(var(--av-popup-height-mobile, var(--av-popup-height-tablet, var(--av-popup-height, 450px))), calc(100vh - 24px));
        border-radius: 14px;
    }

    .av-el-popup-close {
        top: 10px;
        right: 10px;
        font-size: 28px;
    }
}