/* ============================================ */
/* UTILITIES CSS
/* Utility classes for common inline styles
/* ============================================ */

/* Icon Circle Utilities */
.icon-circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.icon-circle-40 {
    width: 40px;
    height: 40px;
}

.icon-circle-50 {
    width: 50px;
    height: 50px;
}

.icon-circle-60 {
    width: 60px;
    height: 60px;
}

.icon-circle-80 {
    width: 80px;
    height: 80px;
}

.icon-circle-100 {
    width: 100px;
    height: 100px;
}

.icon-circle-120 {
    width: 120px;
    height: 120px;
}

/* Icon sizes */
.icon-circle i {
    color: white;
    z-index: 2;
}

.icon-circle-40 i {
    font-size: 1.2rem;
}

.icon-circle-50 i {
    font-size: 1.5rem;
}

.icon-circle-60 i {
    font-size: 1.5rem;
}

.icon-circle-80 i {
    font-size: 2rem;
}

.icon-circle-100 i {
    font-size: 2.5rem;
}

.icon-circle-120 i {
    font-size: 3rem;
}

/* Background Alpha Utilities */
.bg-white-alpha-10 {
    background: rgba(255, 255, 255, 0.1);
}

.bg-white-alpha-20 {
    background: rgba(255, 255, 255, 0.2);
}

.bg-white-alpha-25 {
    background: rgba(255, 255, 255, 0.25);
}

.bg-white-alpha-80 {
    background: rgba(255, 255, 255, 0.8);
}

.bg-white-alpha-90 {
    background: rgba(255, 255, 255, 0.9);
}

.bg-white-alpha-95 {
    background: rgba(255, 255, 255, 0.95);
}

/* Border Utilities (extending CSS variables) */
.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-2xl {
    border-radius: var(--radius-2xl);
}

.rounded-top-xl {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.rounded-top-2xl {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

/* Width utilities */
.w-50px {
    width: 50px;
}

.w-60 {
    width: 60px;
}

.w-80 {
    width: 80px;
}

.w-100px {
    width: 100px;
}

.w-120 {
    width: 120px;
}

/* Height utilities */
.h-50px {
    height: 50px;
}

.h-60 {
    height: 60px;
}

.h-80 {
    height: 80px;
}

.h-100px {
    height: 100px;
}

.h-120 {
    height: 120px;
}

/* Min-height utilities */
.min-vh-75 {
    min-height: 75vh;
}

/* Z-index utilities */
.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-3 {
    z-index: 3;
}

/* Position utilities */
.position-relative {
    position: relative;
}

/* Opacity utilities */
.opacity-75 {
    opacity: 0.75;
}

.opacity-90 {
    opacity: 0.9;
}

.opacity-95 {
    opacity: 0.95;
}

/* Box shadow utilities */
.shadow-primary {
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.shadow-success {
    box-shadow: 0 10px 30px rgba(72, 187, 120, 0.3);
}

.shadow-danger {
    box-shadow: 0 10px 30px rgba(220, 53, 69, 0.3);
}

/* Gradient text utilities */
.text-gradient {
    color: var(--primary-color);
}

/* Border utilities */
.border-0 {
    border: 0;
}

.border-bottom-light {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.border-alpha-05 {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.border-top-primary {
    border-top: 3px solid var(--primary-color) !important;
}

.border-top-muted {
    border-top: 3px solid #6c757d !important;
}

/* Backdrop filter utilities */
.backdrop-blur-10 {
    backdrop-filter: blur(10px);
}

.backdrop-blur-20 {
    backdrop-filter: blur(20px);
}

/* Overflow utilities */
.overflow-hidden {
    overflow: hidden;
}

/* Font size utilities */
.fs-70 {
    font-size: 0.7rem;
}

.fs-75 {
    font-size: 0.75rem;
}

.fs-85 {
    font-size: 0.85rem;
}

.fs-90 {
    font-size: 0.9rem;
}

.fs-95 {
    font-size: 0.95rem;
}

.fs-110 {
    font-size: 1.1rem;
}

.fs-120 {
    font-size: 1.2rem;
}

.fs-150 {
    font-size: 1.5rem;
}

/* Display utilities */
.d-inline-flex {
    display: inline-flex;
}

/* Flex utilities */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Gap utilities (for older browsers compatibility) */
.gap-05 {
    gap: 0.5rem;
}

.gap-075 {
    gap: 0.75rem;
}

.gap-1 {
    gap: 1rem;
}

.gap-15 {
    gap: 1.5rem;
}

.gap-2 {
    gap: 2rem;
}

.gap-3 {
    gap: 3rem;
}

/* Padding utilities extension */
.p-15 {
    padding: 1.5rem;
}

.px-5 {
    padding-left: 3rem;
    padding-right: 3rem;
}

.py-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Margin utilities extension */
.mb-05 {
    margin-bottom: 0.5rem;
}

/* Text utilities */
.text-dark {
    color: var(--gray-900);
}

.text-muted-light {
    color: var(--gray-500);
}

/* Line height utilities */
.lh-12 {
    line-height: 1.2;
}

.lh-13 {
    line-height: 1.3;
}

.lh-16 {
    line-height: 1.6;
}

.lh-18 {
    line-height: 1.8;
}

/* White space utilities */
.whitespace-nowrap {
    white-space: nowrap;
}

.whitespace-pre-line {
    white-space: pre-line;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}

/* Word break utilities */
.word-break-all {
    word-break: break-all;
}

.word-break-word {
    word-break: break-word;
}

/* Cursor utilities */
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

/* Transition utilities */
.transition-all {
    transition: all var(--transition-normal);
}

.transition-fast {
    transition: all var(--transition-fast);
}

/* Transform utilities */
.scale-hover:hover {
    transform: scale(1.05);
}

.scale-hover-110:hover {
    transform: scale(1.1);
}

.translate-hover-up:hover {
    transform: translateY(-2px);
}

.translate-hover-up-5:hover {
    transform: translateY(-5px);
}

/* Max-width utilities */
.mw-450 {
    max-width: 450px;
}

.mw-500 {
    max-width: 500px;
}

/* Background gradient utilities for skill icons */
.bg-gradient-writing {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.bg-gradient-reading {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.bg-gradient-listening {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.bg-gradient-mock-test {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);
}

/* Card hover effect for level cards */
.card:not(.bg-light):hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}