@import 'custom_variables'; // Importer d'abord les variables personnalisées

@import "~bootstrap/scss/bootstrap";
/* $primary: #0abdc6;
$secondary: #133e7c;
$secondary: #711c91;


// Bootstrap variables
$white: $primary;
$info: $info; 
*/

$secondaryDark: #0d042e;


body {
    background-color:#0e1223 !important;
}

ul {
    list-style: none;
}

.background-gradient {
    background: linear-gradient(0deg, $secondary, $primary);
}


.container-fluid {

    min-height: 600px;
}


a {
    text-decoration: none;
}


.vp-center {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start;
}

.list-group-item {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    transition: background-color 0.3s;
}

.list-group-item.bg-info {
    background-color: $info !important;
}

.btn-primary {
    background-color: $primary;
    border-color: $primary;
    color: white;
}


.btn-primary.text-primary:hover {
    background-color: $primary;
    color: #fff;
}

//////////// COLOR
$colorGreyLight: rgba(185, 185, 192, 0.5);
$colorGrey: #b9b9c0;
$colorWhite: #fff;
$colorGreyDarker: #4d4d4d;
$colorH1: #6b6d7c;
$colorBlueDark: rgb(0, 54, 104);

//
$borderColorWhite: #d7dadb;
$borderColorLight: #efeff5;

// gradient color blue to violet
$colorBlue: #1e8bff;
$colorBlueDarkFb: #003668;
$colorBlueViolet : #6955ff;
$colorViolet: #a83af5;
$colorVioletToFushia: #c03ada;

html,
body {
    overflow-x: hidden;
}

body {
    background: $primary;
}

.footer {
    background-color: $dark 100%;
}

.bg-gradiant {
    background: linear-gradient(180deg, $light 20%, $dark 100%);
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

.slideInFromRight {
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 1s ease-out 0s 1 slideInFromRight;
}

//////
////// COMMON CLASSES
//////
/// 

.table-info {
    background-color: shift-color($info, $table-bg-scale);
}

// .bg-secondary-dark {
//     background-color: $dark;
//     box-shadow: -2px 8px 4px 0 $primary;
// }

.bg-secondary {
    background-color: $secondary;
}

.bg-light {
    background-color: $light;
}

.card-header-info {
    background-color: $info;
    box-shadow: 0 4px 8px -2px $primary;
}

.card-header-light {
    background-color: $light;
    box-shadow: 0 4px 8px -2px $primary;
}

.dropzone {
    border: 2px dashed #007bff;
    padding: 30px;
    text-align: center;
    color: #007bff;
    background-color: #f7f7f7;
}

// Formulaire Quiz
.answers .form-check {
    display: block;
    margin-bottom: 10px;

}

.bg-gradient {
    background: linear-gradient(45deg, #007bff, #0056b3);
}

.course-card {
    transition: transform 0.2s;
}

.course-card:hover {
    transform: scale(1.05);
}

.card-img-top {
    height: 200px;
}

.list-group-item-action {
    cursor: pointer;
}

.progress {
    height: 1.5rem;
}

.progress-small {
    height: 0.5rem;
}

.list-group-item:hover {
    background-color: $light;
}

:root {
    --primary: $primary;
}


// CARD

.form-shadow {
    box-shadow: 0 0 15px 0 rgba(94, 36, 195, .1);
}

.course-card, .course-card .filter {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}

.relative {
    position: relative;
}

.level-difficulty, .video-time {
    border-bottom-left-radius: 1rem;
    border-top-left-radius: 1rem;
    color: #fff;
    padding: .5rem;
    position: absolute;
    right: 0;
    // z-index: 9999;
}

.video-time {
    background: rgba(0, 0, 0, .3);
    top: 20px;
}

.banner, .video-time {
    box-shadow: 0 0 15px 0 hsla(0, 0%, 100%, .3);
}

.course-card .course-image-container img {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    width: 100%;
}

.level-difficulty {
    bottom: 0;
    width: 70px;
}

.course-card .course-title-container {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #191919;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    max-height: 65px;
    overflow: hidden;
    padding: 16px 16px 4px;
}


.progressbar {
    background: #e3e3e3;
    border-radius: 99px;
    -moz-border-radius: 99px;
    -webkit-border-radius: 99px;
    font-size: .7em;
    height: 8px;
    line-height: 40px;
    margin-top: 15px;
    padding: 0;
    text-align: right;
    width: 100%;
}

.course-extra-info-container {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
} 

.course-progress {
    color: #fc4364;
    font-size: 11px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: right;
}

.course-card .course-progress .percentage {
    font-size: 18px;
    font-weight: 700;
    line-height: 19px;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: $primary !important; 
}

.border-white-light {
    border: 1px solid rgba(222, 226, 230, 0.3) !important;
}


.page-link.active, .active > .page-link {
    background-color: $secondary !important;
    border-color: $info;
}

.course-card .border-white-light {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

.list-group-item {
   border: none
}

.opacity-light {
    opacity: 0.7;
}

.duration {
    font-size: 0.8rem;
    border-radius: 1rem;
    border: 1px solid rgba(222, 226, 230, 0.1);
}

.running {
    border-left: 4px solid $info;
}

input[type=search]::placeholder {
    color: $light; /* Couleur grise claire */
    opacity: 1; /* Pour les navigateurs qui appliquent une opacité par défaut */
}

#nav-chapter {
    border-right:1px solid rgba(222, 226, 230, 0.1);
}

.border-none {
    border:none;
}

.navbar {
    border-bottom: 1px solid rgba(222, 226, 230, 0.1);
}

.footer {
    border-top: 1px solid rgba(222, 226, 230, 0.1);
}

.border-card-header {
    border-top: 1px solid rgba(222, 226, 230, 0.1);
    border-left: 1px solid rgba(222, 226, 230, 0.1);
    border-right: 1px solid rgba(222, 226, 230, 0.1);
}

.border-card-body {
    border-bottom: 1px solid rgba(222, 226, 230, 0.1);
    border-left: 1px solid rgba(222, 226, 230, 0.1);
    border-right: 1px solid rgba(222, 226, 230, 0.1);  
}

.border-radius {
    border-radius: 1rem;
}

.notification-icon {
    display: inline-block;
    position: relative;
}

.notification-badge {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    right: 10px;
    transform: translate(50%, -50%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

/* Modifier la flèche par défaut */
#courseAccordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1rem;
    color: white; /* Facultatif pour forcer la couleur de l'icône */
}

/* Flèche blanche lorsque l'accordéon est ouvert */
#courseAccordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M2 11l6-6 6 6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1rem;
}


//
// PARTIE ÉDITEUR DE TEXTE
//

#catchPhrase {

    .text-green {
        color:rgb(22, 248, 182);
    }
    
    .text-gray {
        color:$colorGrey;
    }
    
    .text-amber {
        color:rgb(247, 203, 78);
    }
    
    .text-pink {
        color:rgb(249, 38, 174);
    }

}

#text-editor {
    position: relative; /* Permet au pseudo-élément de se positionner correctement */
    display: block;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 1.5rem;
    border-radius: 0.5rem;
    overflow: hidden; /* Empêche le pseudo-élément de dépasser du conteneur */

    ::before {
        content: "";
        position: absolute;
        top: 0; /* Aligné avec le haut de l'élément */
        left: 0;
        right: 0;
        height: 1px; /* Hauteur de la bordure */
        background-image: linear-gradient(to right, transparent 0%, rgba(236, 72, 153, 0.5) 25%, rgba(139, 92, 246, 0.5) 75%, transparent 100%);
    }
    
    .button-navigation {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 100%;
        margin: 0 0.5rem;
    }
    
    .bg-red {
        background: #d835a7;
    }
    
    .bg-orange {
        background: rgb(255,159,36);
    }
    
    .bg-green {
        background-color: rgb(142,234,193);
    }
    
    .text-green {
        color:rgb(22, 248, 182);
    }
    
    .text-gray {
        color:$colorGrey;
    }
    
    .text-amber {
        color:rgb(247, 203, 78);
    }
    
    .text-pink {
        color:rgb(249, 38, 174);
    }


}

.text-with-gradient {
    background: linear-gradient(90deg,#1e8bff,#6955ff 45%,#a83af5 50%,#c03ada 75%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 1px;
        word-spacing: 2px;
    }

    .offer {
        background: linear-gradient(90deg, #53125d, #321858 80%);
        border-radius: 15px;
        // padding: 30px 50px;
    
        .item {
            font-size: 40px;
        }
    }

    .smallBorderRadius {
        border-radius: 15px;
    }

    .form-shadow {
        -webkit-box-shadow: 0px 0px 15px 0px rgba(94, 36, 195, 0.1); 
        box-shadow: 0px 0px 15px 0px rgba(94, 36, 195, 0.1);
    }

    .bg-secondary-dark {
        background-color: $secondaryDark;
    }

    #customers .card {
        min-height: 240px;
    }

    .membership {
        background: linear-gradient(90deg, #31092a, #0e0331);
    }