/* SizeGuide Pro — Frontend Styles v1.0.7 */


.sgp-btn-wrap { margin: 10px 0 14px; }
.sgp-size-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; border: none; border-radius: 8px;
    color: #fff; font-size: 14px; font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    cursor: pointer; transition: opacity .2s, transform .15s; letter-spacing: .02em;
}
.sgp-size-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ── MODAL ── */
.sgp-modal {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}
.sgp-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
}

/* Modal box — NO overflow on the box itself, wrapper handles scroll */
.sgp-modal-box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 20px;
    width: 92%;
    max-width: 680px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,.25);
    animation: sgpFadeIn .25s ease;
    overflow: hidden; /* clips border-radius only */
}
@keyframes sgpFadeIn {
    from { opacity: 0; transform: scale(.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── CLOSE BUTTON — always top-right, never hidden ── */
.sgp-modal-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 14px 0;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    border-radius: 20px 20px 0 0;
}
.sgp-modal-close-btn {
    background: #111827 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .2s, transform .15s !important;
    flex-shrink: 0;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
.sgp-modal-close-btn:hover { background: #374151 !important; transform: scale(1.08); }

/* Scrollable content area */
.sgp-modal-scroll {
    overflow-y: auto;
    flex: 1;
}

/* ── GUIDE CONTENT ── */
.sgp-guide-inner {
    padding: 8px 28px 28px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    text-align: center;
}

/* Brand name — centered, large, bold */
.sgp-guide-brand {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #111827;
    margin-bottom: 4px;
    text-align: center;
}

/* Title — centered, smaller, grey subtitle */
.sgp-guide-title {
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 22px;
    text-align: center;
}

/* ── SYSTEM BUTTONS — centered, pill shaped, attractive ── */
.sgp-pub-sys-switch {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    flex-wrap: wrap;
    justify-content: center;
}
.sgp-pub-sys-btn {
    padding: 8px 22px;
    border: 1.5px solid #e5e7eb;
    border-radius: 30px;
    background: #f9fafb;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    color: #6b7280;
    transition: all .2s;
    letter-spacing: .05em;
    min-width: 58px;
}
.sgp-pub-sys-btn:hover  { border-color: #111827; color: #111827; background: #f3f4f6; }
.sgp-pub-sys-btn.disabled { opacity: .35; cursor: not-allowed; }
.sgp-pub-sys-btn.active {
    background: #111827; color: #fff; border-color: #111827;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* ── SIZE TABLE ── */
.sgp-pub-table-wrap { overflow-x: auto; text-align: left; }
.sgp-pub-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sgp-pub-table th {
    background: #f9fafb; font-weight: 700;
    padding: 11px 16px; text-align: left;
    border-bottom: 2px solid #e5e7eb;
    color: #374151; white-space: nowrap;
    text-transform: uppercase; font-size: 11px; letter-spacing: .06em;
}
.sgp-pub-table td {
    padding: 11px 16px; border-bottom: 1px solid #f3f4f6;
    color: #4b5563; text-align: left;
}
.sgp-pub-table tr:last-child td { border-bottom: none; }
.sgp-pub-table tr.even td { background: #fff; }
.sgp-pub-table tr.odd  td { background: #fafafa; }
.sgp-pub-table tr:hover td { background: #f0f9ff; }
.sgp-pub-table td.sgp-size-label { font-weight: 700; color: #111827; }

/* ── TIP BOX ── */
.sgp-guide-tip {
    margin-top: 18px;
    padding: 10px 16px;
    background: #f9fafb;
    border-radius: 10px;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    border: 1px solid #f3f4f6;
}

/* inline mode */
.sgp-inline-wrap { margin-top: 24px; border: 1.5px solid #e5e7eb; border-radius: 14px; overflow: hidden; }
.sgp-inline-wrap .sgp-guide-inner { padding: 20px; }

/* ── Mobile Fixes ── */
@media (max-width: 768px) {
    #sgp-modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .sgp-modal-box {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
    }
    .sgp-pub-sys-switch {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .sgp-pub-sys-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-width: 40px;
    }
    .sgp-pub-table {
        font-size: 12px !important;
    }
    .sgp-pub-table th,
    .sgp-pub-table td {
        padding: 8px 6px !important;
    }
    #sgp-close-x {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
}

/* Loading system button */
.sgp-pub-sys-btn.loading-sys {
    opacity: 0.5;
}