/* ========================================================
   BeaconUp — CSS scopé .beaconup-*
   N'interfère PAS avec le thème WordPress du client
   ======================================================== */

/* ── Variables ─────────────────────────────────────────── */
.beaconup-wrap {
    --bu-navy:    #0d1b2e;
    --bu-navy2:   #122035;
    --bu-navy3:   #1a2d45;
    --bu-navy4:   #1f3550;
    --bu-red:     #e02040;
    --bu-white:   #f0f4f8;
    --bu-muted:   #7a9ab5;
    --bu-green:   #28c55a;
    --bu-orange:  #f5a623;
    --bu-border:  #2a3f58;
    --bu-radius:  8px;
    --bu-font:    -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    font-family: var(--bu-font);
    color:        var(--bu-white);
    background:   var(--bu-navy);
    min-height:   100vh;
    max-width:    480px;
    margin:       0 auto;
    padding:      0;
    box-sizing:   border-box;
}

.beaconup-wrap *, .beaconup-wrap *::before, .beaconup-wrap *::after {
    box-sizing: border-box;
}

/* ── Topbar ─────────────────────────────────────────────── */
.beaconup-topbar {
    background:    var(--bu-navy2);
    padding:       14px 20px;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bu-border);
    position:      sticky;
    top:           0;
    z-index:       100;
}
.beaconup-wordmark {
    font-size:    20px;
    font-weight:  800;
    letter-spacing: -0.5px;
}
.beaconup-wordmark span { color: var(--bu-red); }

/* ── Rôle badge ─────────────────────────────────────────── */
.beaconup-role-badge {
    font-size:     11px;
    padding:       3px 10px;
    border-radius: 20px;
    background:    var(--bu-navy4);
    color:         var(--bu-muted);
    border:        1px solid var(--bu-border);
}
.beaconup-role-badge.beaconup-role-admin {
    color:      #ffd700;
    background: #2a2200;
    border-color: #5a4800;
}

/* ── Tabs ───────────────────────────────────────────────── */
.beaconup-tabs {
    display:        flex;
    background:     var(--bu-navy2);
    border-bottom:  1px solid var(--bu-border);
}
.beaconup-tab {
    flex:           1;
    text-align:     center;
    padding:        12px 8px;
    font-size:      13px;
    color:          var(--bu-muted);
    cursor:         pointer;
    border-bottom:  2px solid transparent;
    transition:     .2s;
    user-select:    none;
}
.beaconup-tab.active {
    color:         var(--bu-white);
    border-bottom-color: var(--bu-red);
}
.beaconup-count {
    display:        inline-block;
    background:     var(--bu-navy4);
    border-radius:  10px;
    padding:        1px 7px;
    font-size:      11px;
    margin-left:    4px;
    color:          var(--bu-muted);
}
.beaconup-tab.active .beaconup-count {
    background: var(--bu-red);
    color:      #fff;
}

/* ── Body / scrollable area ────────────────────────────── */
.beaconup-body {
    padding: 16px 20px;
}

/* ── Buttons ────────────────────────────────────────────── */
.beaconup-btn {
    display:        inline-block;
    padding:        13px 20px;
    border-radius:  var(--bu-radius);
    font-family:    var(--bu-font);
    font-size:      15px;
    font-weight:    600;
    cursor:         pointer;
    text-align:     center;
    transition:     .15s;
    border:         none;
    text-decoration: none;
    line-height:    1;
}
.beaconup-btn-primary {
    background: var(--bu-red);
    color:      #fff;
}
.beaconup-btn-primary:hover { background: #f02850; color: #fff; }
.beaconup-btn-outline {
    background:   transparent;
    color:        var(--bu-white);
    border:       1.5px solid var(--bu-border);
}
.beaconup-btn-outline:hover { border-color: var(--bu-muted); color: var(--bu-white); }
.beaconup-btn-full  { display: block; width: 100%; }
.beaconup-btn-sm    { padding: 8px 14px; font-size: 13px; }
.beaconup-btn-edit  { background: var(--bu-red); color: #fff; font-size: 13px; padding: 8px 14px; }

/* ── Inputs ─────────────────────────────────────────────── */
.beaconup-input {
    width:         100%;
    background:    transparent;
    border:        1.5px solid var(--bu-border);
    border-radius: var(--bu-radius);
    padding:       13px 16px;
    color:         var(--bu-white);
    font-family:   var(--bu-font);
    font-size:     14px;
    outline:       none;
    transition:    .2s;
    display:       block;
}
.beaconup-input:focus { border-color: var(--bu-muted); }
.beaconup-input::placeholder { color: var(--bu-muted); }
.beaconup-textarea { resize: vertical; min-height: 90px; }
.beaconup-field { margin-bottom: 16px; }
.beaconup-label {
    display:       block;
    font-size:     12px;
    color:         var(--bu-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight:   600;
}
.beaconup-label-sub { font-weight: 400; text-transform: none; font-size: 11px; }

/* ── Badges statut ──────────────────────────────────────── */
.beaconup-badge {
    display:       inline-block;
    padding:       3px 10px;
    border-radius: 20px;
    font-size:     12px;
    font-weight:   600;
}
.beaconup-badge-publish { background: #1a3d1a; color: var(--bu-green); }
.beaconup-badge-pending { background: #2d2d1a; color: var(--bu-orange); }
.beaconup-badge-draft   { background: var(--bu-navy4); color: var(--bu-muted); }

/* ── Ref card ────────────────────────────────────────────── */
.beaconup-ref-card {
    display:       flex;
    align-items:   center;
    gap:           12px;
    background:    var(--bu-navy3);
    border-radius: 10px;
    padding:       12px;
    margin-bottom: 10px;
    border:        1px solid var(--bu-border);
    transition:    .15s;
}
.beaconup-ref-card:hover { border-color: var(--bu-muted); }
.beaconup-ref-thumb {
    width:         70px;
    height:        70px;
    border-radius: var(--bu-radius);
    overflow:      hidden;
    flex-shrink:   0;
    background:    var(--bu-navy4);
    display:       block;
}
.beaconup-ref-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.beaconup-thumb-placeholder {
    width: 100%; height: 100%; background: var(--bu-navy4);
}
.beaconup-ref-info { flex: 1; min-width: 0; }
.beaconup-ref-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.beaconup-ref-title a { color: var(--bu-white); text-decoration: none; }
.beaconup-ref-status-label { font-size: 11px; color: var(--bu-muted); display: block; margin-bottom: 4px; }

/* ── Photo grid ─────────────────────────────────────────── */
.beaconup-photo-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   8px;
    margin-bottom:         12px;
}
.beaconup-photo-item {
    aspect-ratio:  1;
    border-radius: var(--bu-radius);
    background:    var(--bu-navy4);
    position:      relative;
    overflow:      hidden;
    cursor:        pointer;
}
.beaconup-photo-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.beaconup-photo-del {
    position:      absolute;
    top:           4px; right: 4px;
    width:         20px; height: 20px;
    background:    rgba(13,27,46,.85);
    border:        1px solid var(--bu-border);
    border-radius: 50%;
    color:         var(--bu-muted);
    font-size:     11px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    line-height:   1;
    padding:       0;
}
.beaconup-photo-del:hover { background: var(--bu-red); color: #fff; border-color: var(--bu-red); }
.beaconup-photo-ai {
    position:      absolute;
    bottom:        4px; left: 4px;
    background:    rgba(200,32,58,.9);
    border-radius: 5px;
    padding:       3px 7px;
    font-size:     10px;
    color:         #fff;
    font-weight:   600;
    cursor:        pointer;
    border:        none;
}

/* ── Map ────────────────────────────────────────────────── */
.beaconup-map, .beaconup-map-preview {
    width:         100%;
    height:        160px;
    border-radius: 10px;
    background:    var(--bu-navy4);
    overflow:      hidden;
    border:        1px solid var(--bu-border);
    margin-bottom: 8px;
}

/* ── Carousel ───────────────────────────────────────────── */
.beaconup-carousel {
    width:          100%;
    height:         240px;
    position:       relative;
    overflow:       hidden;
    background:     var(--bu-navy4);
}
.beaconup-slide {
    display:   none;
    width:     100%; height: 100%;
    cursor:    pointer;
}
.beaconup-slide.active { display: block; }
.beaconup-slide img { width: 100%; height: 100%; object-fit: cover; }
.beaconup-carousel-dots {
    position:  absolute;
    bottom:    10px;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    gap:       6px;
}
.beaconup-dot {
    width:         8px; height: 8px;
    border-radius: 50%;
    background:    rgba(255,255,255,.4);
    cursor:        pointer;
    transition:    .2s;
}
.beaconup-dot.active { background: #fff; }
.beaconup-carousel-prev,
.beaconup-carousel-next {
    position:   absolute;
    top:        50%;
    transform:  translateY(-50%);
    background: rgba(13,27,46,.6);
    color:      #fff;
    border:     none;
    padding:    8px 14px;
    font-size:  22px;
    cursor:     pointer;
    border-radius: 4px;
}
.beaconup-carousel-prev { left: 8px; }
.beaconup-carousel-next { right: 8px; }

/* ── Detail page ─────────────────────────────────────────── */
.beaconup-detail-title  { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.beaconup-detail-address {
    font-size:    13px;
    color:        var(--bu-muted);
    display:      flex;
    align-items:  center;
    gap:          6px;
    margin-bottom: 12px;
}
.beaconup-detail-desc {
    font-size:    14px;
    line-height:  1.7;
    margin-bottom: 16px;
    color:        var(--bu-white);
}
.beaconup-back-link {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    color:        var(--bu-muted);
    font-size:    13px;
    text-decoration: none;
    margin-bottom: 14px;
}
.beaconup-back-link:hover { color: var(--bu-white); }
.beaconup-section-label {
    font-size:     11px;
    color:         var(--bu-muted);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 10px;
    font-weight:   600;
    margin-top:    20px;
}
.beaconup-detail-gallery {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 16px;
}

/* ── Login page ─────────────────────────────────────────── */
.beaconup-login-page {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    padding:         40px 24px;
    background:      var(--bu-navy);
}
.beaconup-login-logo {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    margin-bottom:   40px;
    gap:             8px;
}
.beaconup-login-logo img { width: 80px; height: 80px; }
.beaconup-login-logo .beaconup-wordmark { font-size: 32px; }
.beaconup-login-page .beaconup-form { width: 100%; max-width: 360px; }
.beaconup-password-wrap { position: relative; }
.beaconup-eye-btn {
    position:   absolute;
    right:      14px; top: 50%;
    transform:  translateY(-50%);
    background: none;
    border:     none;
    color:      var(--bu-muted);
    cursor:     pointer;
    padding:    0;
    display:    flex;
    align-items: center;
}
.beaconup-forgot { text-align: center; margin: 8px 0; font-size: 13px; color: var(--bu-muted); }
.beaconup-forgot a { color: var(--bu-muted); text-decoration: none; }
.beaconup-forgot a:hover { color: var(--bu-white); }

/* ── Alerts ─────────────────────────────────────────────── */
.beaconup-alert {
    padding:       12px 16px;
    border-radius: var(--bu-radius);
    font-size:     14px;
    margin-bottom: 12px;
}
.beaconup-alert-error   { background: #2a0a10; color: #f06070; border: 1px solid #5a1a25; }
.beaconup-alert-success { background: #0a2a15; color: var(--bu-green); border: 1px solid #1a5a25; }

/* ── Empty state ────────────────────────────────────────── */
.beaconup-empty {
    text-align:    center;
    padding:       40px 20px;
    color:         var(--bu-muted);
}
.beaconup-empty p { margin-bottom: 16px; font-size: 15px; }

/* ── Divider ────────────────────────────────────────────── */
.beaconup-divider { height: 1px; background: var(--bu-border); margin: 16px 0; }

/* ── Modal IA ───────────────────────────────────────────── */
.beaconup-modal {
    position:       fixed;
    inset:          0;
    background:     rgba(0,0,0,.7);
    display:        flex;
    align-items:    flex-end;
    justify-content: center;
    z-index:        9999;
    padding:        20px;
}
.beaconup-modal-inner {
    background:     var(--bu-navy2);
    border-radius:  12px 12px 0 0;
    padding:        20px;
    width:          100%;
    max-width:      480px;
    border-top:     2px solid var(--bu-red);
}
.beaconup-modal-inner h3 { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.beaconup-ai-examples { font-size: 11px; color: var(--bu-muted); font-style: italic; margin-bottom: 10px; }
.beaconup-ai-input-row { display: flex; gap: 8px; }
.beaconup-ai-input-row .beaconup-input { flex: 1; }

/* ── Lightbox ───────────────────────────────────────────── */
.beaconup-lightbox {
    position:       fixed;
    inset:          0;
    background:     rgba(0,0,0,.95);
    display:        flex;
    align-items:    center;
    justify-content: center;
    z-index:        99999;
}
.beaconup-lightbox img {
    max-width:  90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
}
.beaconup-lb-close {
    position:   absolute;
    top:        16px; right: 16px;
    background: rgba(255,255,255,.15);
    border:     none;
    color:      #fff;
    font-size:  24px;
    width:      40px; height: 40px;
    border-radius: 50%;
    cursor:     pointer;
    display:    flex;
    align-items: center;
    justify-content: center;
}
.beaconup-lb-prev,
.beaconup-lb-next {
    position:   absolute;
    top:        50%;
    transform:  translateY(-50%);
    background: rgba(255,255,255,.15);
    border:     none;
    color:      #fff;
    font-size:  28px;
    padding:    12px 16px;
    cursor:     pointer;
    border-radius: 4px;
}
.beaconup-lb-prev { left: 16px; }
.beaconup-lb-next { right: 16px; }

/* ── Error ──────────────────────────────────────────────── */
.beaconup-error {
    padding:       20px;
    color:         #f06070;
    background:    #2a0a10;
    border-radius: var(--bu-radius);
    border:        1px solid #5a1a25;
    font-size:     14px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 400px) {
    .beaconup-photo-grid { grid-template-columns: repeat(3, 1fr); }
}