/* Global Layout Utilities */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.dir-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.flex-1 {
    flex: 1 1 0%;
}

.gap-2 {
    gap: var(--s-2);
}

.gap-3 {
    gap: var(--s-3);
}

.gap-4 {
    gap: var(--s-4);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

/* Max Widths */
.max-w-450 {
    max-width: 450px;
}

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

.max-w-600 {
    max-width: 600px;
}

.max-w-700 {
    max-width: 700px;
}

/* Positioning helper utilities */
.left-4 {
    left: 1rem;
}

.top-1\/2 {
    top: 50%;
}

.-translate-y-1\/2 {
    transform: translateY(-50%);
}

/* Visibility */
.hidden {
    display: none !important;
}

/* Z-index */
.z-100 {
    z-index: var(--z-elevated);
}

/* Sizes (Width & Height unified) */
.size-16 {
    width: 16px;
    height: 16px;
}

.size-24 {
    width: 24px;
    height: 24px;
}

.size-32 {
    width: 32px;
    height: 32px;
}

.size-48 {
    width: 48px;
    height: 48px;
}

.size-64 {
    width: 64px;
    height: 64px;
}

.size-80 {
    width: 80px;
    height: 80px;
}

.size-140 {
    width: 140px;
    height: 140px;
}

.size-200 {
    width: 200px;
    height: 200px;
}

.size-220 {
    width: 220px;
    height: 220px;
}

/* Individual components (Legacy fallback/specifics) */
.w-4 {
    width: 1rem;
}

.h-4 {
    height: 1rem;
}

.w-5 {
    width: 1.25rem;
}

.h-5 {
    height: 1.25rem;
}

/* Specific Heights */
.h-350 {
    height: 350px;
}

/* Opacity */
.opacity-10 {
    opacity: 0.1;
}

.opacity-20 {
    opacity: 0.2;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-80 {
    opacity: 0.8;
}

.opacity-0 {
    opacity: 0;
}

/* Min-Height utilities */
.min-h-3rem {
    min-height: 3rem;
}

/* Object Fit */
.object-cover {
    object-fit: cover;
}

/* Avatar / Circular Elements */
.avatar-circle {
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--c-glass-strong);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
}

/* Special Effects */
.floating-visual-glow {
    filter: drop-shadow(0 0 40px rgba(var(--c-primary-rgb), 0.3));
}