.camera-loader {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
}

/* j'ai viré ce code de _chat */
.history-toggle {
    cursor: pointer;
    margin-left: 8px;
    opacity: 1;
    transition: opacity 0.8s;
}
.history-toggle:hover {
    opacity: 0.8;
}


/* Style pour les messages d'erreur dans le formulaire d'inscription */
.error-message.alert-danger {
    height: auto;
    font-weight: 550;
    font-size: 13px;
    padding: 10px;
}

.form-modal input:-webkit-autofill {  box-shadow: 0 0 0 50px #757575 inset !important;color:#FFF!important;-webkit-text-fill-color:#FFF !important; }
.form-modal input:-webkit-autofill:focus {  box-shadow: 0 0 0 50px #757575 inset !important;-webkit-text-fill-color:#FFF!important;color:#FFF!important; }
.form-modal input:-webkit-autofill:active {  box-shadow: 0 0 0 50px #757575 inset !important;-webkit-text-fill-color:#FFF!important;color:#FFF!important; }
.form-modal input:-webkit-autofill:hover {  box-shadow: 0 0 0 50px #757575 inset !important;-webkit-text-fill-color:#FFF!important;color:#FFF!important; }


/* Page subscriptions */

.subscription-page__advantage { font-weight:500; }
.subscription-page .token { font-weight:500; }
.subscription-page__insurance { font-weight:500;font-size:0.8em; }
.subscription-page__footer .btn { font-weight:600;letter-spacing:0px;}

.subscription-page__offer .today { display: inline-block;margin-bottom:10px; }
.subscription-page__footer small { font-weight: 500;}
.subscription-page .offer-title { line-height:1.6rem;}

/* Bannière promotionnelle */
.promo-banner {
    width: 100%;
    /*background-color: #000;*/
    padding: 15px 0;
    margin-bottom: 40px;
    text-align: center;
}

.promo-banner__container {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.promo-banner__line {
    width: 50px;
    height: 1px;
    background-color: #444;
}

.promo-banner__percent {
    font-size: 70px;
    font-weight: 800;
    color: #f02e74;
    line-height: 1;
    margin-right: -10px;
}

.promo-banner__text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-transform: uppercase;
}

.promo-banner__text {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.promo-banner__text--white {
    color: #fff;
}

.promo-banner__text--pink {
    color: #f02e74;
}

/* Style pour le cartouche -70% en version desktop */
.promo-banner__percent--highlight {
    background-color: #f02e74;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    display: inline-block;
}

/* Version mobile du texte promotionnel (masqué par défaut) */
.promo-banner__mobile-text {
    display: block; /* Toujours visible */
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    text-transform: uppercase;
    padding: 10px 15px;
    margin: 0 auto;
    max-width: 90%;
}

.promo-banner__mobile-text--pink {
    color: #f02e74;
}

.promo-banner__mobile-text--highlight {
    background-color: #f02e74;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    margin: 0 2px;
    display: inline-block;
}

/* Media queries */
@media screen and (min-width: 1101px) {
    /* Sur grandes résolutions, tout sur une ligne */
    .mobile-break {
        display: none;
    }
    
    .promo-banner__container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .promo-banner__mobile-text {
        background-color: transparent;
        padding: 0;
        margin: 0 20px;
    }
    
    /* Lignes séparatrices plus longues */
    
    .promo-banner__container {
        justify-content: center;
        padding: 0px 0;
    }
}

@media screen and (max-width: 1100px) {
    /* Entre 1100px et 951px */
    .mobile-break {
        display: inline;
    }
    .promo-banner {
        margin-bottom: 0px;
    }
    .promo-banner__container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 20px; /* Plus d'espace en bas */
    }
    
    .promo-banner__mobile-text {
        background-color: transparent;
        padding: 0;
        margin: 0 20px;
        margin-bottom: 10px; /* Marge supplémentaire en bas */
    }
    
    /* Lignes séparatrices plus longues */
    .promo-banner__line {
        width: 120px;
    }
}


@media screen and (max-width: 1024px) {
    /* Réorganisation de la bannière promo et du countdown en responsive */
    .promo-banner {
        position: relative;
        margin-bottom: 0px;
    }
    .promo-banner__container {
        padding-bottom: 0px; /* Encore plus d'espace en bas */
    }
    
    .promo-banner__mobile-text {
        margin-bottom: 15px; /* Marge supplémentaire en bas */
    }
    .countdown-offer-mobile { margin-top: 0px !important;margin-bottom:15px !important;padding-top:0px;}
    
    /* Afficher le countdown mobile sous la bannière */
    .countdown-offer-mobile {
        display: flex !important; /* Forcer l'affichage */
        justify-content: center;
        align-items: center;
        padding: 10px 15px 15px;
        margin: 0px auto;
        max-width: 300px;
    }
    
    .countdown-offer-mobile div {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 36px;
        font-weight: 700;
        color: white;
        padding: 0 15px;
        position: relative;
        min-width: 70px; /* Largeur fixe pour éviter les déplacements */
        max-width: 70px;
        text-align: center;
    }
    
    .countdown-offer-mobile div:not(:last-child):after {
        content: "";
        position: absolute;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        height: 70%;
        width: 1px;
        background-color: #f02e74;
    }
    
    .countdown-offer-mobile span {
        font-size: 17px;
        font-weight: 500;
        display: block;
        margin-top: 3px;
    }
    
    /* Masquer le countdown original */
    .countdown-offer {
        display: none;
    }
    
    .subscription-page__offer {
        display: flex;
        flex-direction: column;
    }
    
    .subscription-page__offer .subscription-page__offer__title {
        font-size: 1.2rem;
    }


    /* Update sidebar tablettes */
    .sidebar-container-wrapper .sidebar-container .action { font-size:1.3em; }
}

@media screen and (max-width: 950px) {
    .promo-banner__line {
        display:none;
    }
    
    /* Afficher le retour à la ligne */
    .mobile-break {
        display: inline;
    }
    
    /* Ajouter un fond pour le texte promotionnel */
    .promo-banner__mobile-text {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        margin-top: 5px;
    }
    
    /* Ajuster le conteneur principal */
    .promo-banner__container {
        justify-content: center;
        padding: 0px 0;
    }
}

@media screen and (max-width: 700px) {
    .promo-banner__container { gap: 10px;}
    .promo-banner__percent { font-size: 50px;margin-right: 10px;}
    .promo-banner__text { font-size: 20px;}
}

@media screen and (max-width: 565px) {
    .countdown-offer-mobile span { font-size:14px;}
    .countdown-offer-mobile div { font-size: 24px;}
    
    /* Faire passer 'abonnement !' à la ligne */
    .promo-banner__mobile-text span.promo-banner__mobile-text--pink:not(.promo-banner__mobile-text--highlight) {
        display: block;
        margin-top: 2px;
    }
    .countdown-offer-mobile div { min-width: 60px; max-width: 60px;}
}

@media screen and (max-width: 450px) {
    /* Réduire la taille du texte promotionnel */
    .promo-banner__mobile-text {
        font-size: 22px;
        max-width: 98%;
        padding: 10px 0px;
    }
    .promo-banner__mobile-text { margin-bottom:0px;}
}

@media screen and (max-width: 375px) {
    /* Réduire davantage la taille du texte promotionnel */
    .promo-banner__mobile-text {
        font-size: 18px;
    }
    .subscription-page__header h1 strong {
        font-size:18px;
    }

}

/* Styles pour le footer de la page d'abonnement */
.subscription-footer {
    padding: 40px 0;
    margin-top: 20px;
}

.footer-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
    max-width: 100%; /* Assure que le conteneur ne dépasse pas la largeur disponible */
    padding: 0 15px; /* Ajoute un peu d'espace sur les côtés */
}

.footer-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px; /* Espace entre les éléments s'ils passent à la ligne */
}

.footer-icon {
    font-size: 32px;
    color: rgb(217, 217, 217);
    margin-right: 15px;
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
}

.footer-text {
    color: rgb(217, 217, 217);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

.footer-text--nowrap {
    white-space: nowrap;
}

/* Responsive pour le footer de la page d'abonnement */
@media screen and (max-width: 900px) {
    .footer-text {
        font-size: 12px;
    }
    
    .footer-icon {
        font-size: 22px;
    }
    
    .footer-container {
        gap: 20px;
    }
}

@media screen and (max-width: 700px) and (min-width: 566px) {
    .footer-container {
        justify-content: space-around;
        gap: 10px;
    }
    
    .footer-item {
        width: 30%; /* Largeur fixe au lieu de flex: 1 */
        box-sizing: border-box;
        padding: 0 5px;
        justify-content: flex-start; /* Aligne les éléments à gauche */
    }
    
    .footer-text {
        overflow: hidden; /* Cache le texte qui dépasse */
        text-overflow: ellipsis; /* Affiche ... si le texte est trop long */
    }
}

/* Countdown mobile (masqué par défaut) */
.countdown-offer-mobile {
    display: none;
    margin: 15px auto 0;
    text-align: center;
    font-weight: 700;
    color: #f02e74;
}


/************* Modal Informations Utilisateur ************/

.form-group label {
    font-weight: 500;
    color: #fff;
}

.form-check-input:checked {
    background-color: #f02e74;
    border-color: #f02e74;
}

.form-check-label {
    font-weight: 500;
    color: #fff;
    margin-left: 5px;
}

#user_informations_modal { min-width:350px;}

#user_informations_modal .auth-section small {
    color: #cb1258;
    display: block;
    text-align: center;
    margin-top: 15px;
}

#user_informations_modal .form-group {
    margin-bottom: 20px;
}

#user_informations_modal .btn-primary {
    font-weight: 600;
    letter-spacing: 0px;
}

#user_informations_modal .error-message.alert-danger {
    height: auto;
    font-weight: 550;
    font-size: 13px;
    padding: 10px;
}

/* Style pour le label "Je suis un(e) :" */
#user_informations_modal .form-group > label {
    width: 100%;
    text-align: center;
    padding-left: 0px;
}

/* Style pour les options de genre */
.gender-selection {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
}

.gender-option {
    flex: 1;
}

.gender-option input[type="radio"] {
    display: none;
}

.gender-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
    text-align: center;
}

.gender-option label i {
    font-size: 24px;
    margin-bottom: 8px;
    color: #fff;
    transition: all 0.3s ease;
}

.gender-option label span {
    font-weight: 500;
    color: #fff;
}

.gender-option input[type="radio"]:checked + label {
    background-color: rgba(240, 46, 116, 0.2);
    border-color: #f02e74;
    box-shadow: 0 0 10px rgba(240, 46, 116, 0.3);
}

.gender-option input[type="radio"]:checked + label i {
    color: #f02e74;
}

/* Ajustement pour le modal sans illustration */
.popup-content-wrapper.no-illustration .popup-content {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Ajustement du titre du modal d'informations utilisateur */
#user_informations_modal .title.upper {
    font-size: 1.4rem;
    line-height: 1.3;
    max-width: 350px;
    margin: 0 auto 20px;
    text-align: center;
}

#user_informations_modal .title.upper strong {
    font-size: 1.6rem;
    display: block;
    margin-top: 5px;
}

/* Styles pour le header du modal d'informations utilisateur */
#user_informations_modal .header {
    padding: 5px 0;
    text-align: center;
    margin-bottom: 15px;
}

#user_informations_modal .header .title {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

#user_informations_modal .header .subtitle {
    color: #a0a0a0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

/* Spinner de chargement pour les boutons */
.btn-processing-submit .spinner {
    width: 24px;
    height: 24px;
    animation: rotate 2s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

.btn-processing-submit .spinner .path {
    stroke: #ffffff;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Styles pour le modal d'avertissement */
.bloc_modal .header {
    padding: 5px 0;
    text-align: center;
    margin-bottom: 0px;
}

.bloc_modal .header .title {
    color: #f02e74;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.bloc_modal .header .subtitle {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 5px;
}

.bloc_modal .avertissement-text {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 15px;
}

.bloc_modal .content p:first-of-type {
    margin-bottom: 10px;
}

.bloc_modal .cartouche_text {
    background-color: #f02e74; color: white; padding: 4px 12px; border-radius: 20px; display: inline-block; font-weight: 500;
}

.bloc_modal .avertissement-links {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    gap: 10px;
}

.bloc_modal .avertissement-link {
    color: #f02e74;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 15px;
    border: 1px solid #f02e74;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bloc_modal .avertissement-link:hover {
    background-color: rgba(240, 46, 116, 0.1);
}

.bloc_modal .avertissement-buttons {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
}

.bloc_modal .btn-primary {
    background-color: #f02e74;
    border-color: #f02e74;
    font-weight: 600;
    letter-spacing: 0px;
    flex-grow: 1;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bloc_modal .btn-secondary {
    background-color: #2a2a2a;
    border-color: #333;
    color: #a2a2a2;
    font-weight: 600;
    letter-spacing: 0px;
    padding: 12px 20px;
    border-radius: 10px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Styles communs pour les boutons principaux dans les modals */
.btn-primary, #user_informations_modal .btn-primary, .bloc_modal .btn-primary {
    background-color: #f02e74;
    border-color: #f02e74;
    font-weight: 600;
    letter-spacing: 0px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover, #user_informations_modal .btn-primary:hover, .bloc_modal .btn-primary:hover {
    background-color: #d81a64;
    border-color: #d81a64;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-primary:active, #user_informations_modal .btn-primary:active, .bloc_modal .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.premium-required {
    pointer-events: none;
    opacity: 1;
    cursor: not-allowed;
    text-decoration: none; 
    color:#818181;
}

/**
 * TEST SIDEBAR
 */


/*** barre latérale */
.actions-container .badge.request { 
    padding:16px 14px;font-weight:500;font-size:13px; 
    
  /* Amélioration du lissage du texte */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}
.badge.request.used {height:auto;}
.actions-container .girl-preset-action .content span:first-child { line-height:1rem; }
.actions-container .badge.request:nth-child(even) {
    background-color: #111421;
}
.actions-container .badge.request:nth-child(even):hover {
    background-color:#202842;
}
.room-container-wrapper .actions-container-wrapper .col { border-top:1px solid #202842;}
.actions-container-wrapper .header { border-right:1px solid #202842;  }

.messages-container-wrapper .chat-core-wrapper .chat-core .content .messages .message.preset { font-size:0.9rem;background-color:#202842;padding:10px 15px }

.girl-preset-action .fa-video { font-size:1.1em;}
.girl-preset-action .fa-comment { font-size:1.1em; }
.girl-preset-action .fa-history { color:#FFF !important;}
.badge.request i { font-size:1.1em; }
.badge i.ico-sextape { font-size:1.4em;color:#fb9a60; }
.badge.request .cost  i { font-size:0.9em !important;color:#f7af13 !important; }
.badge.request .subscribe  i { position: relative;
    display: inline-block;
    color: transparent !important; }

.badge.request .subscribe  i::before { background: linear-gradient(to right, teal 0, #04f27d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    position: relative;
    z-index: 2;top:6px;left:2px; }

.btn-sign:hover { background-color:#dedede;color:inherit;}



/***** Update a partir du 22 mars ********/

/* divers */
.subscribe-cta { font-size:1.2em;text-transform:uppercase;padding:15px 20px;margin-top:20px;}
.add-user-overlay { font-size:70px;background: linear-gradient(to right, teal 0, #04f27d 100%);background-clip: text;-webkit-background-clip: text;color: transparent; -webkit-text-fill-color: transparent;text-fill-color: transparent;}

/* Modal quota exceeded */
#quota_exceeded_modal .title { line-height: 1em; }
#quota_exceeded_modal .btn { font-size:1em;margin:auto; }
#quota_exceeded_modal .avertissement-text {font-weight:400;margin-top:15px;margin-bottom:15px;}

/**** update a partir du 25 mars */

.premium-cta { font-size:0.9em;margin-top:15px;}
.actions-container .badge.request { font-weight:600;}


/* Modification des modals sur mobile */

@media screen and (max-width: 767px) {

/* sidebar */

.sidebar-container-wrapper .sidebar-container .sidebar-bottom-icons { bottom:10px;}

/* Main Modal */
.popup-slide .popup-content { padding:20px 20px 20px; }


/* Auth Modal */
.popup-slide .popup-content-wrapper .popup-content .auth-container .header { padding:0; }
.popup-slide .popup-content-wrapper .popup-content .auth-container .footer { padding:0;margin-top:10px; }

.multirequest-container .multirequest { font-size:.8em; }

.sidebar-container-wrapper { top:0px; }

}

#refuse_multi_request_modal .popup-content { max-width:480px;}


/* Video loader */

.videos-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-loader-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.video-loader {
    width: 60px;
    height: 60px;
}

.video-loaded .video-loader-container {
    display: none;
}
.video-loader circle {
    animation: spin 1s linear infinite;
    transform-origin: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}