/* ─── Bluestonex: Where to See Us Next ─────────────────────────────────────── */

@font-face {
    font-family: 'Raleway';
    src: url('fonts/raleway-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/raleway-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/raleway-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bne-accent:     #26aae2;
    --bne-accent-dk:  color-mix(in srgb, var(--bne-accent) 80%, #000);
    --bne-radius:     10px;
    --bne-shadow:     0 8px 32px rgba(0,0,0,0.18);
    --bne-panel-w:    320px;
    --bne-z:          9999;
    --bne-speed:      0.28s;
}

/* ─── Wrapper ─────────────────────────────────────────────────── */

#bne-wrap {
    position: fixed;
    bottom: 28px;
    z-index: var(--bne-z);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#bne-wrap.bne--right { right: 24px; align-items: flex-end; }
#bne-wrap.bne--left  { left:  24px; align-items: flex-start; }

/* ─── Trigger button ──────────────────────────────────────────── */

#bne-trigger {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         12px 18px;
    background:      var(--bne-accent);
    color:           #fff;
    border:          none;
    border-radius:   50px;
    font-size:       0.875rem;
    font-weight:     600;
    letter-spacing:  0.01em;
    cursor:          pointer;
    box-shadow:      var(--bne-shadow);
    transition:      background var(--bne-speed), transform var(--bne-speed);
    white-space:     nowrap;
}

#bne-trigger:hover {
    background: var(--bne-accent-dk);
    transform: translateY(-2px);
}

#bne-trigger svg {
    width:  18px;
    height: 18px;
    flex-shrink: 0;
}

/* ─── Panel ───────────────────────────────────────────────────── */

#bne-panel {
    width:         var(--bne-panel-w);
    background:    #fff;
    border-radius: var(--bne-radius);
    box-shadow:    var(--bne-shadow);
    overflow:      hidden;
    transform:     translateY(16px);
    opacity:       0;
    transition:    transform var(--bne-speed) ease, opacity var(--bne-speed) ease;
    pointer-events: none;
}

#bne-panel.bne-panel--open {
    transform:      translateY(0);
    opacity:        1;
    pointer-events: auto;
}

/* align panel to same side as button */
.bne--right #bne-panel { align-self: flex-end; }
.bne--left  #bne-panel { align-self: flex-start; }

/* ─── Panel header ────────────────────────────────────────────── */

#bne-panel-header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          14px 16px;
    background:       var(--bne-accent);
    color:            #fff;
}

#bne-panel-title {
    font-size:   0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.9;
}

#bne-close {
    background:  transparent;
    border:      none;
    color:       #fff;
    cursor:      pointer;
    padding:     2px;
    display:     flex;
    align-items: center;
    opacity:     0.8;
    transition:  opacity 0.15s;
}

#bne-close:hover { opacity: 1; }
#bne-close svg { width: 18px; height: 18px; }

/* ─── Event image ─────────────────────────────────────────────── */

#bne-event-image {
    width:      100%;
    max-height: 140px;
    overflow:   hidden;
    background: #f0f4f8;
}

#bne-event-image img {
    width:      100%;
    height:     140px;
    object-fit: cover;
    display:    block;
}

/* ─── Event body ──────────────────────────────────────────────── */

#bne-event-body {
    padding: 18px 18px 14px;
}

/* Countdown badge */
#bne-countdown {
    display:       inline-block;
    font-size:     0.72rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:         var(--bne-accent);
    background:    color-mix(in srgb, var(--bne-accent) 10%, #fff);
    border:        1px solid color-mix(in srgb, var(--bne-accent) 25%, #fff);
    border-radius: 50px;
    padding:       3px 10px;
    margin-bottom: 10px;
}

/* Event name */
#bne-event-name {
    font-size:   1.05rem;
    font-weight: 700;
    color:       #1a1a2e;
    margin:      0 0 10px;
    line-height: 1.3;
}

/* Meta row */
#bne-event-meta {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    margin-bottom:  12px;
}

.bne-meta-item {
    display:     flex;
    align-items: flex-start;
    gap:         6px;
    font-size:   0.8rem;
    color:       #555;
    line-height: 1.4;
}

.bne-meta-item svg {
    width:      14px;
    height:     14px;
    flex-shrink: 0;
    margin-top: 1px;
    color:      var(--bne-accent);
}

/* Description */
#bne-event-desc {
    font-size:   0.83rem;
    color:       #444;
    line-height: 1.55;
    margin:      0 0 16px;
}

/* CTA button */
#bne-event-cta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    width:           100%;
    padding:         11px 16px;
    background:      var(--bne-accent);
    color:           #fff;
    text-decoration: none;
    border-radius:   6px;
    font-size:       0.85rem;
    font-weight:     600;
    transition:      background var(--bne-speed), transform var(--bne-speed);
    box-sizing:      border-box;
}

#bne-event-cta:hover {
    background: var(--bne-accent-dk);
    transform: translateY(-1px);
}

#bne-event-cta svg {
    width:  15px;
    height: 15px;
}

/* ─── Panel footer ────────────────────────────────────────────── */

#bne-panel-footer {
    border-top: 1px solid #eee;
    padding:    14px 18px;
    display:    flex;
    flex-direction: column;
    gap:        10px;
}

/* Second button: outlined style */
#bne-events-page-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    width:           100%;
    padding:         10px 16px;
    background:      transparent;
    color:           var(--bne-accent);
    border:          2px solid var(--bne-accent);
    border-radius:   6px;
    font-size:       0.85rem;
    font-weight:     600;
    font-family:     'Raleway', sans-serif;
    text-decoration: none;
    box-sizing:      border-box;
    transition:      background var(--bne-speed), color var(--bne-speed), transform var(--bne-speed);
}

#bne-events-page-btn:hover {
    background: color-mix(in srgb, var(--bne-accent) 8%, #fff);
    transform:  translateY(-1px);
}

#bne-events-page-btn svg {
    width:  15px;
    height: 15px;
}

/* View all text link */
#bne-view-all {
    text-align: center;
}

#bne-view-all a {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    font-size:       0.75rem;
    font-weight:     600;
    color:           #888;
    text-decoration: none;
    transition:      color 0.15s;
}

#bne-view-all a:hover { color: var(--bne-accent); }

#bne-view-all svg {
    width:  12px;
    height: 12px;
}

/* ─── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 400px) {
    :root { --bne-panel-w: calc(100vw - 32px); }
    #bne-wrap.bne--right, #bne-wrap.bne--left { right: 16px; left: 16px; align-items: flex-end; }
}