/* ===================================================
   SumbaTeka — Styles custom (Bootstrap 5 + custom)
   =================================================== */

:root {
    --st-primary: #0052cc;
    --st-secondary: #f5a623;
    --st-radius: .5rem;
}

/* Body */
body {
    background-color: #f4f6f9;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Navbar */
.navbar-brand {
    letter-spacing: -0.5px;
}

/* ---- Hero ---- */
.hero-section {
    background: linear-gradient(135deg, var(--st-primary) 0%, #0074e4 100%);
    min-height: 220px;
    display: flex;
    align-items: center;
}

/* ---- Cards catégories ---- */
.card-cat {
    transition: transform .15s, box-shadow .15s;
    border-radius: var(--st-radius) !important;
    cursor: pointer;
    background: #fff;
    color: #333;
}
.card-cat:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
    color: var(--st-primary);
}

/* ---- Cards annonces ---- */
.card-ad {
    border-radius: var(--st-radius) !important;
    transition: transform .15s, box-shadow .15s;
    overflow: hidden;
}
.card-ad:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
}

.ad-img-wrap {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ad-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.badge-statut {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: .7rem;
}
.badge-pro {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: .7rem;
    letter-spacing: .05em;
}
.badge-urgent {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: .7rem;
    background: #6f42c1;
    color: #fff;
    letter-spacing: .03em;
}
.badge-proplus {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: .7rem;
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
    color: #fff;
    letter-spacing: .05em;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* ---- Messagerie ---- */
.thread-box {
    background: #fafafa;
}
.message-bubble {
    max-width: 75%;
    padding: .5rem .85rem;
    border-radius: 1rem;
    font-size: .9rem;
    line-height: 1.4;
}
.bubble-mine {
    background: var(--st-primary);
    color: #fff;
    border-bottom-right-radius: .25rem;
}
.bubble-other {
    background: #e9ecef;
    color: #333;
    border-bottom-left-radius: .25rem;
}
.message-time {
    font-size: .7rem;
    opacity: .7;
    margin-top: .25rem;
}

/* ---- Footer ---- */
/* Bootstrap 5.3 .text-muted force une couleur foncée (--bs-secondary-color)
   pensée pour fond clair : illisible sur le footer bg-dark. On la réécrit
   ici pour ce contexte, sans toucher aux titres (h5/h6, déjà blancs). */
footer.bg-dark .text-muted,
footer.bg-dark p,
footer.bg-dark a {
    color: #ced4da !important;
}
footer.bg-dark a:hover,
footer.bg-dark a:focus {
    color: #fff !important;
    text-decoration: underline !important;
}
footer.bg-dark a:visited {
    color: #ced4da !important;
}
footer.bg-dark hr.border-secondary {
    border-color: rgba(255, 255, 255, .15) !important;
    opacity: 1;
}

/* ---- Responsive ajustements ---- */
@media (max-width: 576px) {
    .hero-section { min-height: 180px; }
    .hero-section h1 { font-size: 1.5rem; }
    .ad-img-wrap { height: 150px; }
}

/* ---- En-tête page boutique ---- */
.boutique-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-bottom: 3px solid #e74c3c;
}
.boutique-header-img {
    width: 160px;
    height: 110px;
    object-fit: cover;
    border-radius: .6rem;
    border: 3px solid rgba(255,255,255,.25);
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.boutique-header-initiales {
    width: 160px;
    height: 110px;
    border-radius: .6rem;
    background: rgba(255,255,255,.12);
    border: 3px dashed rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #fff;
}

/* ---- Bouton boutique PRO (sidebar annonce détail) ---- */
.btn-boutique-pro {
    display: block;
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 50%, #e67e22 100%);
    border-radius: .6rem;
    padding: .85rem 1rem;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, filter .15s;
    box-shadow: 0 4px 14px rgba(192,57,43,.35);
}
.btn-boutique-pro:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(192,57,43,.45);
    filter: brightness(1.05);
}
.btn-boutique-pro:active {
    transform: translateY(0);
}

/* ---- Photo slots ---- */
.photo-slot {
    width: 110px;
    height: 100px;
    border-radius: .5rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 2px dashed #adb5bd;
    background: #f8f9fa;
    transition: border-color .15s, background .15s;
}
.photo-slot:hover {
    border-color: var(--st-primary);
    background: #e8f0ff;
}
.photo-slot-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.photo-slot-filled {
    position: absolute;
    inset: 0;
}
.photo-slot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-slot-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(220,53,69,.85);
    color: #fff;
    font-size: .75rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.photo-slot-remove:hover { background: #dc3545; }
.photo-slot-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    font-size: .75rem;
    background: rgba(255,193,7,.9);
    border-radius: 3px;
    padding: 1px 4px;
}