/* ─── 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;
    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-family:    'Raleway', sans-serif;
    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; }

#bne-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           20px;
    height:          20px;
    background:      #fff;
    color:           var(--bne-accent);
    border-radius:   50%;
    font-size:       0.7rem;
    font-weight:     700;
    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;
}

.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-header-right {
    display:     flex;
    align-items: center;
    gap:         10px;
}

#bne-counter {
    font-size:   0.72rem;
    font-weight: 600;
    opacity:     0.85;
    white-space: nowrap;
}

#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; }

/* ─── Carousel viewport ───────────────────────────────────────── */

#bne-carousel {
    overflow: hidden;  /* hides slides left and right of the active one */
    width:    100%;
}

/* Track: flex row — JS sets each slide's width to match the viewport */
#bne-track {
    display:    flex;
    flex-wrap:  nowrap;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Slides: flex-shrink:0 stops them collapsing. JS sets explicit px width. */
.bne-slide {
    flex-shrink: 0;
    box-sizing:  border-box;
}

/* ─── 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 16px;
}

.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;
}

.bne-event-name {
    font-size:   1.05rem;
    font-weight: 700;
    color:       #1a1a2e;
    margin:      0 0 10px;
    line-height: 1.3;
    font-family: 'Raleway', sans-serif;
}

.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);
}

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

.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-family:     'Raleway', sans-serif;
    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; }

/* ─── Carousel navigation ─────────────────────────────────────── */

#bne-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 14px 12px;
    border-top:      1px solid #f0f0f0;
}

#bne-prev,
#bne-next {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    background:      color-mix(in srgb, var(--bne-accent) 10%, #fff);
    border:          1px solid color-mix(in srgb, var(--bne-accent) 25%, #fff);
    border-radius:   50%;
    color:           var(--bne-accent);
    cursor:          pointer;
    transition:      background var(--bne-speed), opacity var(--bne-speed), transform 0.15s;
    flex-shrink:     0;
}

#bne-prev:hover,
#bne-next:hover { background: color-mix(in srgb, var(--bne-accent) 18%, #fff); transform: scale(1.05); }

#bne-prev:disabled,
#bne-next:disabled { opacity: 0.3; cursor: default; transform: none; }

#bne-prev svg,
#bne-next svg { width: 16px; height: 16px; }

#bne-dots {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.bne-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    #ddd;
    border:        none;
    padding:       0;
    cursor:        pointer;
    transition:    background var(--bne-speed), width var(--bne-speed), border-radius var(--bne-speed);
}

.bne-dot.bne-dot--active {
    background:    var(--bne-accent);
    width:         20px;
    border-radius: 4px;
}

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

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

#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-family:     'Raleway', sans-serif;
    font-size:       0.85rem;
    font-weight:     600;
    text-decoration: none;
    box-sizing:      border-box;
    transition:      background 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; }

#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; }
}