/* 1. Mobile Full Width Buttons (Width: 100% on Mobile, Auto on Desktop) */
.btn-responsive {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .btn-responsive {
        width: auto;
        min-height: 44px;
    }
}

/* 2. Responsive Card Container Layouts */
.card-equal-height {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 3. Responsive Section Spacing Helpers */
.section-padding {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

@media (min-width: 768px) {
    .section-padding {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

@media (min-width: 960px) {
    .section-padding {
        padding-top: 6.5rem;
        padding-bottom: 6.5rem;
    }
}

/* 4. Touch Target Safety Padding */
.touch-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 5. Mobile Drawer Transition Mechanics */
.drawer-slide-down {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 6. Grid/Flex Child Overflow Protection */
.min-w-0-child > * {
    min-width: 0;
}

.break-words-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 7. Responsive Table Container */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}