/* ═══════════════════════════════════════════════════════════════
   Vadibe iOS Design System — Web Redesign v1.0
   Inspiré de l'app iOS : couleurs, typographie, bottom nav,
   cartes, espacement. Compatible Bootstrap 3 + CSS existants.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design tokens iOS ─────────────────────────────────────────── */
:root {
    --ios-primary:          #FD5068;
    --ios-primary-end:      #FF7240;
    --ios-gradient:         linear-gradient(135deg, #FD5068 0%, #FF7240 100%);
    --ios-gradient-h:       linear-gradient(135deg, #e8465e 0%, #e86533 100%);

    --ios-bg-body:          #141417;
    --ios-bg-card:          #212129;
    --ios-bg-surface:       #2E2E38;
    --ios-bg-elevated:      #38383F;

    --ios-text-primary:     #FFFFFF;
    --ios-text-secondary:   rgba(255,255,255,.65);
    --ios-text-tertiary:    rgba(255,255,255,.40);

    --ios-green:            #4ADE80;
    --ios-blue:             #3B82F6;
    --ios-separator:        rgba(255,255,255,.08);

    --ios-radius-xl:        24px;
    --ios-radius-lg:        20px;
    --ios-radius-md:        16px;
    --ios-radius-sm:        12px;
    --ios-radius-xs:        8px;

    --ios-bottomnav-h:      70px;

    --ios-font:             -apple-system, "SF Pro Display", "SF Pro Text",
                            system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --ios-shadow-card:      0 8px 32px rgba(0,0,0,.40);
    --ios-shadow-nav:       0 -1px 0 rgba(255,255,255,.06), 0 -8px 24px rgba(0,0,0,.30);
}

/* ─── Sync boutons primaires avec palette iOS ────────────────────── */
:root {
    --button_primary_background:       linear-gradient(135deg, #FD5068 0%, #FF7240 100%) !important;
    --button_primary_hover_background: linear-gradient(135deg, #e8465e 0%, #e86533 100%) !important;
    --button_primary_color:            #FD5068 !important;
}

/* ─── Typographie système ────────────────────────────────────────── */
body {
    font-family: var(--ios-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ─── Padding body pour la bottom nav ───────────────────────────── */
@media (max-width: 991px) {
    body {
        padding-bottom: calc(var(--ios-bottomnav-h) + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════ */

#vadibe-bottomnav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1060;
    height: calc(var(--ios-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(18, 18, 20, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(255,255,255,.07);
    box-shadow: var(--ios-shadow-nav);
}

@media (max-width: 991px) {
    #vadibe-bottomnav { display: flex; }
}

.bottomnav-tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: var(--ios-bottomnav-h);
    margin: 0;
    padding: 0 4px;
    list-style: none;
}

.bottomnav-tab {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.bottomnav-tab > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 2px;
    gap: 3px;
    color: rgba(255,255,255,.42);
    text-decoration: none !important;
    border-radius: var(--ios-radius-sm);
    transition: color .2s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.bottomnav-tab > a:hover,
.bottomnav-tab > a:focus {
    text-decoration: none !important;
    color: rgba(255,255,255,.7);
}

.bottomnav-tab > a:active {
    transform: scale(.91);
}

.bottomnav-tab.active > a {
    color: var(--ios-primary);
}

/* Icon wrapper (position:relative pour le badge) */
.bottomnav-icon {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

.bottomnav-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    font-family: var(--ios-font);
}

/* ── Icônes iconfont dans la barre ─── */
.bottomnav-icon i {
    font-size: 22px;
    line-height: 1;
    color: rgba(255,255,255,.42);
    transition: color .15s ease;
    display: block;
    text-align: center;
}

/* Icône active : rouge Vadibe */
.bottomnav-tab.active .bottomnav-icon i {
    color: var(--ios-primary);
}

/* Icône centrale Swipe */
.bottomnav-swipe-btn i {
    font-size: 26px;
    color: #fff;
    display: block;
    line-height: 1;
    text-align: center;
}

/* ── Force l'affichage de la bottom nav ─── */
@media (max-width: 991px) {
    #vadibe-bottomnav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ── Badge non-lu ─── */
.bottomnav-badge {
    position: absolute;
    top: -3px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--ios-primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1.5px solid rgba(18,18,20,.95);
    pointer-events: none;
}

.bottomnav-badge.hidden { display: none !important; }

/* ── Tab central Swipe (bouton gradient) ─── */
.bottomnav-tab.bottomnav-swipe { flex: 1.1; }

.bottomnav-tab.bottomnav-swipe > a { color: #fff; }

.bottomnav-swipe-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--ios-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    position: relative;
    top: -6px;
    box-shadow: 0 4px 18px rgba(253,80,104,.48);
    transition: box-shadow .2s ease, transform .15s ease;
}

.bottomnav-tab.bottomnav-swipe.active .bottomnav-swipe-btn,
.bottomnav-tab.bottomnav-swipe > a:hover .bottomnav-swipe-btn {
    box-shadow: 0 6px 26px rgba(253,80,104,.68);
}

.bottomnav-tab.bottomnav-swipe > a:active .bottomnav-swipe-btn {
    transform: scale(.93);
}

.bottomnav-swipe-label {
    font-size: 10px;
    font-weight: 500;
    margin-top: 4px;
    color: rgba(255,255,255,.55);
    line-height: 1;
}

.bottomnav-tab.bottomnav-swipe.active .bottomnav-swipe-label {
    color: var(--ios-primary);
}

/* ═══════════════════════════════════════════════════════════════
   TOP BAR — simplification mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .top-header {
        background: rgba(18,18,20,.94) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
    }

    /* Masquer les icônes de la topbar (dupliquerait la bottom nav) */
    #topbar a.nav-link.icon {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BOUTONS — style iOS
   ═══════════════════════════════════════════════════════════════ */

.button.primary,
button.primary,
a.button.primary,
input[type="submit"].primary,
.btn-primary {
    background: var(--ios-gradient) !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: var(--ios-font) !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    transition: opacity .2s ease, transform .15s ease, box-shadow .2s ease !important;
}

.button.primary:hover,
button.primary:hover,
a.button.primary:hover {
    background: var(--ios-gradient-h) !important;
    opacity: .95;
}

.button.primary:active,
button.primary:active,
a.button.primary:active {
    transform: scale(.97);
}

/* ═══════════════════════════════════════════════════════════════
   INPUTS & FORMULAIRES — style iOS
   ═══════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select {
    border-radius: var(--ios-radius-sm) !important;
    font-family: var(--ios-font) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARTES PROFIL — améliorations
   ═══════════════════════════════════════════════════════════════ */

.cardview .cardview-item {
    transition: transform .18s ease;
}

@media (hover: hover) {
    .cardview .cardview-item:hover {
        transform: translateY(-3px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   SWIPE PAGE (hotgame) — style iOS card stack
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .hotgame-wrap,
    .game-card-wrap,
    .hotgame-container {
        border-radius: var(--ios-radius-xl) !important;
        overflow: hidden;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGES — style iOS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .page-messages .page-right-content,
    .messages-wrap {
        border-radius: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BALANCE / CRÉDITS — pill iOS
   ═══════════════════════════════════════════════════════════════ */

.user-header-credits,
.header-credits-count,
.user-balance {
    background: var(--ios-gradient) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
    font-family: var(--ios-font) !important;
    border: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE (root-night.css) — override couleur primaire bleue
   ═══════════════════════════════════════════════════════════════ */

body {
    --button_primary_background:       linear-gradient(135deg, #FD5068 0%, #FF7240 100%);
    --button_primary_hover_background: linear-gradient(135deg, #e8465e 0%, #e86533 100%);
    --button_primary_color:            #FD5068;
    --switch_button_on_background_color: #FD5068;
    --item_footer_active_link_color: #FD5068;
    --verified_badge_background: #FD5068;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR — style minimal
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(253,80,104,.30); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(253,80,104,.55); }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS — micro-interactions spring iOS
   ═══════════════════════════════════════════════════════════════ */

@keyframes ios-pop {
    0%   { transform: scale(.82); opacity: 0; }
    68%  { transform: scale(1.05); }
    100% { transform: scale(1);   opacity: 1; }
}

@keyframes ios-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(253,80,104,.45); }
    50%       { box-shadow: 0 0 0 5px rgba(253,80,104,0);  }
}

.bottomnav-badge:not(.hidden) {
    animation: ios-badge-pulse 2.4s ease infinite;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE D'ACCUEIL — Stream & Find — redesign iOS
   ═══════════════════════════════════════════════════════════════ */

/* Cacher le bloc titre générique sur mobile */
@media (max-width: 991px) {
    .standard-page.page-title-content {
        display: none !important;
    }

    /* Insérer un header iOS via pseudo-element */
    .cardview-content::before {
        content: '';
        display: block;
    }

    /* Fond de la zone principale */
    #content > .main-content {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* Conteneur cardview : pleine largeur sans marges inutiles */
    .cardview-container.items-container {
        padding: 0 12px !important;
    }

    /* Bouton "Voir plus" style iOS */
    .loading-banner .button.more {
        background: var(--ios-gradient) !important;
        border: none !important;
        border-radius: 999px !important;
        color: #fff !important;
        font-weight: 600 !important;
        padding: 12px 32px !important;
        font-family: var(--ios-font) !important;
    }
}

/* ─── Galerie stream : cards plein cadre ──────────────────────── */
@media (max-width: 991px) {
    /* Items de la galerie média — pleine largeur avec arrondis */
    .gallery-item,
    .stream-item {
        border-radius: var(--ios-radius-lg) !important;
        overflow: hidden !important;
        margin-bottom: 16px !important;
        box-shadow: var(--ios-shadow-card) !important;
    }

    /* Photo principale */
    .gallery-item .item-photo,
    .gallery-item img.gallery-photo {
        border-radius: var(--ios-radius-lg) !important;
        width: 100% !important;
    }

    /* Zone infos sous la photo */
    .gallery-item .item-content,
    .gallery-item .item-footer {
        border-bottom-left-radius: var(--ios-radius-lg) !important;
        border-bottom-right-radius: var(--ios-radius-lg) !important;
    }
}

/* ─── Avatar utilisateur — bague dégradé ─────────────────────── */
.item-author-photo,
.gallery-author-avatar {
    border: 2px solid transparent !important;
    background-clip: padding-box;
    box-shadow: 0 0 0 2px #FD5068 !important;
}

/* ─── Find page (accueil profils) — bannière iOS ─────────────── */
@media (max-width: 991px) {
    /* Bandeau de bienvenue sur find/stream */
    .home-header-banner,
    .page-welcome-banner {
        background: var(--ios-gradient) !important;
        border-radius: var(--ios-radius-lg) !important;
        color: #fff !important;
        margin: 12px !important;
    }

    /* Communities mini-strip */
    .home-comm-mini-wrap {
        padding: 0 12px !important;
        gap: 8px !important;
    }

    .home-comm-mini {
        border-radius: var(--ios-radius-md) !important;
        overflow: hidden !important;
    }

    /* Section titles  */
    .home-section-title,
    .content-list-title {
        font-family: var(--ios-font) !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        letter-spacing: -.02em !important;
        padding: 14px 12px 6px !important;
    }

    /* Enlever les marges de la page principale sur mobile */
    .content-page .main-column {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Page entière : fond cohérent avec topbar */
    body.width-page {
        background: var(--common_body_background) !important;
    }

    /* Standard page sections sans bordures supplémentaires */
    .standard-page {
        border-radius: 0 !important;
    }

    /* Masquer la sidebar sur mobile */
    #site-sidenav {
        display: none !important;
    }

    /* col-lg-9 prend toute la largeur */
    #content.col-lg-9 {
        padding: 0 !important;
        width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   STREAM GALLERY ITEMS — redesign iOS overlay v2
   Approche : .item-inner = conteneur aspect-ratio 3:4
              tout le contenu en position:absolute à l'intérieur
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Effacer fonds/bordures blancs ─── */
.gallery-advanced-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.gallery-advanced-item .card-item,
.gallery-advanced-item .classic-item,
.gallery-advanced-item .default-item,
.gallery-advanced-item .card-body,
.gallery-advanced-item .card-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── 2. .item-inner = conteneur ratio 3:4 (hauteur = 133 % largeur) ─── */
.gallery-advanced-item .item-inner {
    position: relative !important;
    width: 100% !important;
    padding-top: 133% !important;   /* crée la hauteur 3:4 */
    overflow: hidden !important;
    border-radius: var(--ios-radius-md) !important;
    background: #212129 !important; /* fond de sécurité */
    display: block !important;
}

/* ── 3. Lien <a> : remplit tout .item-inner en absolu ─── */
.gallery-advanced-item .item-inner > a {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    z-index: 1 !important;
}

/* ── 4. Photo : remplit toute la zone absolue ─── */
.gallery-advanced-item .gallery-item-preview {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    display: block !important;
    border-radius: 0 !important;
}

/* ── 5. Dégradé bas → haut pour lisibilité ─── */
.gallery-advanced-item .gallery-item-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.15) 40%,
        transparent 62%
    );
    pointer-events: none;
}

/* ── 6. Infos utilisateur : absolu en bas ─── */
.gallery-advanced-item .item-inner > .p-0 {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    padding: 6px 8px 8px !important;
    z-index: 3 !important;
}

/* ── 7. card-header = flex row ─── */
.gallery-advanced-item .card-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ── 8. Avatar circulaire ─── */
.gallery-advanced-item .card-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255,255,255,.82) !important;
    object-fit: cover !important;
    display: block !important;
}

/* ── 9. Nom blanc gras ─── */
.gallery-advanced-item .card-title {
    margin: 0 !important;
    line-height: 1.2 !important;
}
.gallery-advanced-item .card-title a {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.55) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
    display: block;
}

/* ── 10. @username discret ─── */
.gallery-advanced-item .card-username {
    color: rgba(255,255,255,.68) !important;
    font-size: 9px !important;
    display: block !important;
}

/* ── 11. Point "en ligne" ─── */
.gallery-advanced-item .card-online-icon {
    width: 9px !important;
    height: 9px !important;
    background: #4ade80 !important;
    border: 1.5px solid rgba(255,255,255,.9) !important;
    border-radius: 50% !important;
    position: absolute !important;
    left: 28px !important;
    bottom: 6px !important;
    z-index: 5 !important;
    box-shadow: 0 0 5px rgba(74,222,128,.55) !important;
}

/* ── 12. Bouton flag — top right ─── */
.gallery-advanced-item .action {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 4 !important;
    background: rgba(0,0,0,.42) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    border: none !important;
    box-shadow: none !important;
}
.gallery-advanced-item .action i {
    color: rgba(255,255,255,.85) !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

/* ── 13. Badge timestamp — top left ─── */
.gallery-advanced-item .info-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    bottom: auto !important;
    right: auto !important;
    background: rgba(0,0,0,.45) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    border-radius: 10px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    padding: 3px 7px !important;
    color: rgba(255,255,255,.9) !important;
    z-index: 4 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── 14. Grid desktop : 3 colonnes, hauteurs égales ─── */
@media (min-width: 601px) {
    .cardview.items-view {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
}

/* ── 15. Grid mobile : 2 colonnes ─── */
@media (max-width: 600px) {
    .cardview.items-view {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

.cardview.items-view .gallery-advanced-item {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ─── End vadibe-ios.css ────────────────────────────────────────── */