/* ============================================================
   Tmayee Size Chart — Frontend Styles
   ============================================================ */

/* ── Button wrap ─────────────────────────────────────────── */
.tsc-button-wrap {
    margin-bottom: 14px;
}

/* ── Base button ─────────────────────────────────────────── */
.tsc-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    padding:          9px 20px;
    font-size:        13px;
    font-weight:      500;
    font-family:      inherit;
    letter-spacing:   0.4px;
    border-radius:    4px;
    cursor:           pointer;
    border:           2px solid #000;
    text-decoration:  none;
    transition:       background 0.2s ease, color 0.2s ease, transform 0.1s ease;
    outline:          none;
    white-space:      nowrap;
    -webkit-tap-highlight-color: transparent;
}

.tsc-btn:focus-visible {
    outline: 3px solid #0073aa;
    outline-offset: 2px;
}

.tsc-btn:active {
    transform: scale(0.97);
}

/* ── Black variant ───────────────────────────────────────── */
.tsc-btn--black {
    background-color: #000;
    color:            #fff;
    border-color:     #000;
}

.tsc-btn--black:hover {
    background-color: #222;
    border-color:     #222;
    color:            #fff;
}

/* ── White variant ───────────────────────────────────────── */
.tsc-btn--white {
    background-color: #fff;
    color:            #000;
    border-color:     #000;
}

.tsc-btn--white:hover {
    background-color: #f5f5f5;
    color:            #000;
}

/* ============================================================
   Modal Overlay
   ============================================================ */
.tsc-modal {
    position:   fixed;
    inset:      0;
    z-index:    99999;
    display:    flex;
    align-items:      center;
    justify-content:  center;
    padding:    16px;
    box-sizing: border-box;
}

.tsc-modal.tsc-modal--open {
    display: flex;
}

/* Dark backdrop */
.tsc-modal__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor:     pointer;
}

/* Modal box */
.tsc-modal__box {
    position:         relative;
    background:       #fff;
    border-radius:    8px;
    max-width:        90vw;
    max-height:       90vh;
    width:            auto;
    overflow:         hidden;
    display:          flex;
    flex-direction:   column;
    z-index:          1;
    box-shadow:       0 20px 60px rgba(0,0,0,0.35);
    animation:        tscSlideIn 0.22s ease;
}

@keyframes tscSlideIn {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Close button */
.tsc-modal__close {
    position:   absolute;
    top:        10px;
    right:      12px;
    width:      32px;
    height:     32px;
    background: rgba(0,0,0,0.55);
    color:      #fff;
    border:     none;
    border-radius: 50%;
    font-size:  16px;
    line-height: 1;
    cursor:     pointer;
    display:    flex;
    align-items: center;
    justify-content: center;
    z-index:    2;
    transition: background 0.15s;
    padding:    0;
}

.tsc-modal__close:hover {
    background: rgba(0,0,0,0.8);
}

/* Image container */
.tsc-modal__body {
    overflow:   auto;
    -webkit-overflow-scrolling: touch;
    max-height: 90vh;
    display:    flex;
    align-items: flex-start;
    justify-content: center;
}

/* Size chart image */
.tsc-modal__img {
    display:    block;
    max-width:  100%;
    height:     auto;
    object-fit: contain;
    /* Allow zoom/pan on mobile via pinch */
    touch-action: pan-x pan-y;
}

/* ── Mobile tweaks ───────────────────────────────────────── */
@media (max-width: 480px) {
    .tsc-modal__box {
        max-width:  96vw;
        max-height: 88vh;
        border-radius: 6px;
    }
    .tsc-btn {
        font-size: 12px;
        padding:   8px 16px;
    }
}

/* ── Accessibility: no animation if user prefers ─────────── */
@media (prefers-reduced-motion: reduce) {
    .tsc-modal__box {
        animation: none;
    }
    .tsc-btn {
        transition: none;
    }
}

/* ── Prevent body scroll when modal open ─────────────────── */
body.tsc-modal-open {
    overflow: hidden;
}