/* ========================================
   COMPONENT STYLES
   Compatible with Bootstrap
   ======================================== */

/* ========================================
   BUTTONS - Use .vietcf-btn to avoid Bootstrap .btn conflict
   ======================================== */

.vietcf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-secondary);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    /* transition: background-color var(--transition-fast); */
    text-decoration: none;
}

.vietcf-btn--trial {
    background-color: var(--color-primary-light);
    color: var(--color-white);
}

.vietcf-btn--trial:hover {
    opacity: 0.9;
    color: var(--color-white);
}

.vietcf-btn--login {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.vietcf-btn--login:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-white);
}

.vietcf-btn__icon {
    width: 1rem;
    height: 1rem;
}

/* ========================================
   MATERIAL CARD
   ======================================== */

.material-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    height: 100%;
    width: 100%;
}

.material-card__title {
    font-family: var(--font-accent);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-black);
    color: var(--color-gray-600);
    text-align: center;
    margin-bottom: 0;
}

.material-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    flex-grow: 1;
    cursor: pointer;
}

.material-card__figure {
    display: flex;
    justify-content: center;
}

.material-card__img {
    max-width: 16rem; /* ~200px */
    height: auto;
    object-fit: contain;
}

.material-card__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    font-size: 16px;
    line-height: var(--line-height-relaxed);
    color: var(--color-gray-600);
    flex-grow: 1;
}

.material-card__features li {
    padding-left: var(--space-xs);
    white-space: normal;
    overflow-wrap: anywhere;
}

.material-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-gray-400);
    color: var(--color-white);
    font-family: var(--font-accent);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-relaxed);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    /* transition: background-color var(--transition-fast); */
}

.material-card__link:hover {
    background-color: var(--color-primary);
    color:var(--color-white)
}

.material-card__link-icon {
    width: 1.5rem;
    height: 1.5rem;
    transform: scaleY(-1);
}

/* ========================================
   SEARCH BOX (Header)
   ======================================== */

.header-search {
    background-color: var(--color-white);
}

.header-search__input {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-500);
}

/* ========================================
   NAVIGATION COMPONENTS
   ======================================== */

/* Category Tags */
.category-link--active {
    background-color: var(--color-primary-dark);
}

/* ========================================
   CARD HOVER EFFECTS
   ======================================== */

.material-card__body {
    transition: box-shadow var(--transition-normal);
}

.material-card:hover .material-card__body {
    box-shadow: var(--shadow-md);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 767px) {
    .header-search {
        display: none;
    }
    
    .header-actions {
        gap: var(--space-xs);
    }
    
    .btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--font-size-xs);
    }
    
    .nav-list {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-link {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-xs);
    }
    
    .nav-extra {
        width: 100%;
        justify-content: center;
    }
    
    .category-list {
        gap: var(--space-sm);
    }
    
    .category-link {
        padding: var(--space-xs) var(--space-md);
        font-size: var(--font-size-xs);
        min-width: auto;
    }
    
    .material-card__title {
        font-size: var(--font-size-lg);
    }
    
    .material-card__link {
        font-size: var(--font-size-base);
    }
}

/* ========================================
   UTILITIES
   ======================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}