/**
 * Size Guide Manager Styles
 * Mobile-first approach with minimal layout styling
 */

/* Container */
.size-guide-container {
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
}

/* Sticky header wrapper (contains heading + table headers) */
.size-guide-sticky-header {
    position: relative;
    background: #ffffff;
    border-bottom: 2px solid #ddd;
}

/* Heading - Base styles */
.size-guide-heading {
    text-align: center;
}

/* Sticky state for combined header (mobile first: 70px from top) */
.size-guide-sticky-header.is-sticky {
    position: fixed;
    top: 90px;
    left: var(--sgm-table-left, 0);
    width: var(--sgm-table-width, 100%);
    background: #ffffff;
    z-index: 100;
    padding: 0;
}

/* Match table width when sticky */
.size-guide-sticky-header.is-sticky .size-guide-table-header {
    width: 100%;
}

.size-guide-sticky-header.is-sticky .size-guide-heading {
    padding: 0.75rem 0;
}

/* Placeholder to prevent layout shift */
.size-guide-sticky-placeholder {
    display: none;
}

.size-guide-sticky-placeholder.is-active {
    display: block;
}

/* Table header section */
.size-guide-table-header {
    margin-bottom: 0;
}

.size-guide-table-header .size-guide-table {
    margin-bottom: 0;
}

/* Hide the duplicate thead in main table when header is visible */
.size-guide-thead-hidden {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

.size-guide-thead-hidden th {
    padding: 0 !important;
    border: none !important;
    height: 0 !important;
    line-height: 0 !important;
}

/* Table wrapper for horizontal scroll on small screens if needed */
.size-guide-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table */
.size-guide-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.875rem;
}

/* Table header */
.size-guide-table thead th {
    padding: 0.5rem 0.25rem;
    text-align: center;
    font-weight: 500;
    background: #ffffff;
}

/* Table body rows - alternating background #f9f7f8 */
.size-guide-table tbody tr:nth-child(odd) {
    background-color: #f9f7f8;
}

.size-guide-table tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* Table cells */
.size-guide-table tbody td {
    padding: 0.5rem 0.25rem;
    font-size: .9rem;
    text-align: center;
}

/* Desktop styles (768px and up) */
@media (min-width: 849px) {
    .size-guide-heading {
        font-size: 1.5rem;
    }

    /* Desktop sticky position: 90px from top */
    .size-guide-sticky-header.is-sticky {
        top: 142px;
        padding-top: 1rem;
    }

    .size-guide-table {
        font-size: 1rem;
    }

    .size-guide-table thead th,
    .size-guide-table tbody td {
        padding: 0.75rem 0.5rem;
    }
}