.skeleton {
    background: linear-gradient(90deg, #e2e2e2 0px, #f0f0f0 40px, #e2e2e2 80px);
    background-size: 600px;
    animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
    0% { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.skeleton-card {
    border-radius: 16px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    height: 90px; /* exact cât are un card real */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.skel-line {
    height: 14px;
    border-radius: 6px;
}
.skel-line.short { width: 40%; }
.skel-line.medium { width: 65%; }
.skel-line.long { width: 85%; }
.bg-collection{
    background: linear-gradient(0deg, #7E29B2 -16.88%, #7098FF 116.26%);
}

.nav-warning{
    --bs-nav-link-padding-x:1rem;
    --bs-nav-link-padding-y:.888rem;
    gap: 20px;
}
.nav-warning .nav-link{
    font-size: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.50);
    background: rgba(0, 139, 235, 0.00);
    color: #fff;
    font-weight: 600;
}
.nav-warning .nav-link.active {
    border-color: var(--bs-warning);
    background-color: var(--bs-warning);
    color: #000;
}
.collection-card{
    position: relative;
    background-color: #fff;
    --bs-card-border-radius:14px;
    border: none;
    --bs-card-title-spacer-y:1rem;
    --bs-card-spacer-y:.75rem;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.40);
    transition: box-shadow 0.25s ease-in-out;
}
.collection-card:hover{
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.40);
}
.collection-card figure img{
    border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0;
}
.collection-card .card-title{
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;      /* maximum 3 rânduri */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4em;
    min-height: 4.2em; /* 3 rânduri */
}
.label-free-2{background-color: #8CDC40;padding: 6px 16px; color: #fff; font-size: 1rem; font-weight: 500; position: absolute; top: 14px; left: 14px; z-index: 3; border-radius: 2rem;}
.label-words{background-color: #000;padding: 6px 16px; color: #fff; font-size: 1rem; font-weight: 500; position: absolute; bottom: 14px; left: 14px; z-index: 3; border-radius: 7px;}
.ratio-collection{--bs-aspect-ratio:87%;}
.item-card{
    position: relative;
    background-color: #fff;
    border: none;
}
.item-card a, .close-card{color: #0073FF; font-weight: 500;}
.item-card-sound .btn-light{min-width: 150px; display: flex; align-items: center; border: none}
.item-card-sound .btn-light span{flex-grow: 1; text-align: left; padding: 0 6px; font-size: 12px;}

.word-card{min-width: 450px; max-width: 450px;}
.word-card.skeleton{
    width: 500px;
}
.word-card .examples span{font-weight: bold; color: #39B253}
.word-card .examples mark, .word-card .examples .mark {
    padding: 0;
    color: #39B253;
    background-color: transparent;
}
.skeleton-img {
    height: 200px;
    background: linear-gradient(90deg, #eee 25%, #ddd 37%, #eee 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s infinite;
}

.skeleton-line {
    height: 14px;
    border-radius: 6px;
    background: #e0e0e0;
    animation: shimmer 1.4s infinite;
}

.skeleton-btn {
    height: 36px;
    border-radius: 10px;
    background: #ddd;
    animation: shimmer 1.4s infinite;
}
.popover{
    --bs-popover-body-padding-y:0;
    --bs-popover-body-padding-x:0;
    --bs-popover-border-radius:8px;
    --bs-popover-bg: linear-gradient(0deg, #F8F8F8 0%, #F8F8F8 100%);
    background: linear-gradient(0deg, #F8F8F8 0%, #F8F8F8 100%);
    --bs-popover-max-width:500px;
    border:none;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    border-radius: 8px;

}
.popover .carousel-inner{border-top-left-radius: 8px; border-top-right-radius: 8px;}
.carousel-control-prev-icon, .carousel-control-next-icon{width: 20px; height: 20px; opacity: .9}
.carousel-control-prev, .carousel-control-next{bottom: auto; top: 36%; height: 40px;}
.btn-link{text-decoration: none;}
.carousel-video-box{}
.carousel-video-box a{position: absolute; display: inline-block; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px;}
.pagination {
    --bs-pagination-padding-x: .5rem;
    --bs-pagination-padding-y: .75rem;
    --bs-pagination-font-size: 1.125rem;
    --bs-pagination-color: #fff;
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 2px;
    --bs-pagination-border-color: #fff;
    --bs-pagination-border-radius: 1rem;
    --bs-pagination-hover-color: #000;
    --bs-pagination-hover-bg: #fff;
    --bs-pagination-hover-border-color: #fff;
    --bs-pagination-focus-color: #000;
    --bs-pagination-focus-bg: #fff;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
    --bs-pagination-active-color: #000;
    --bs-pagination-active-bg: #fff;
    --bs-pagination-active-border-color: #fff;
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: var(--bs-secondary-bg);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
    display: flex;
    padding-left: 0;
    list-style: none;
    gap: 1rem;
}
.page-link{border-radius: var(--bs-pagination-border-radius)!important; width: 54px; height: 54px; text-align: center; font-weight: 700;}
.carousel-control-prev, .carousel-control-next{width: 42px;}
.icon-dark .carousel-control-next-icon{
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 24L20 16L12 8' stroke='%23323133' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.icon-dark .carousel-control-prev-icon{
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 24L12 16L20 8' stroke='%23323133' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.ratio-card-video{
    --bs-aspect-ratio: 75.25%;
}
@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.popover-arrow{display: none!important;}

.my-warning .btn-outline-white{
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
}
.card-type{width: 198px;}
@media (max-width: 1200px) {
    .word-card {
        min-width: 350px;
        max-width: 350px;
    }
}
@media (max-width: 768px) {
    .popover .carousel-inner{border-top-left-radius: 0; border-top-right-radius: 0;}
    .label-free-2{font-size: 12px; padding: 4px 8px; top: 8px; left: 8px;}
    .collection-card .card-title{font-size: 12px;}
    .label-words{font-size: 12px; padding: 4px 8px; bottom: 8px; left: 8px;}
    .word-card{min-width: 300px; max-width: 450px;}
}