/* =============================================================================
   School Uniform Size Matcher — Public Styles  v1.5
   ============================================================================= */

/* ── Panel wrapper ─────────────────────────────────────────────────────────── */
.susm-panel {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 20px;
    font-size: 0.93em;
    line-height: 1.55;
    color: #333;
}

.susm-panel--incomplete {
    background: #fffbf0;
    border-color: #f0c040;
    border-left: 4px solid #f0b849;
    color: #7a5e10;
    padding: 14px 18px;
}

.susm-panel--incomplete a {
    color: #7a5e10;
    font-weight: 600;
    text-decoration: underline;
}

/* ── Measurement summary row ───────────────────────────────────────────────── */
.susm-measurements {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e8e8e8;
}

.susm-measurement {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 7px 14px;
}

.susm-measurement__icon {
    font-size: 1.1em;
}

.susm-measurement__label {
    color: #777;
    font-size: 0.85em;
}

.susm-measurement__value {
    font-weight: 700;
    color: #222;
    font-size: 1.05em;
}

/* ── Recommended size badge ────────────────────────────────────────────────── */
.susm-recommended-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.susm-recommended-badge__label {
    font-size: 0.9em;
    color: #555;
    font-weight: 500;
}

.susm-recommended-badge__size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #8b1a1a;
    color: #fff;
    font-size: 1.35em;
    font-weight: 800;
    min-width: 52px;
    height: 52px;
    border-radius: 8px;
    padding: 0 12px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(139,26,26,0.3);
}

/* ── Size chart table ──────────────────────────────────────────────────────── */
.susm-chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.susm-chart {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    min-width: 300px;
}

.susm-chart thead th {
    background: #f0f0f0;
    color: #444;
    font-weight: 600;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid #ddd;
    white-space: nowrap;
}

.susm-chart tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

/* Default rows: slightly muted */
.susm-chart__row {
    opacity: 0.55;
    transition: opacity 0.15s;
}

/* Only the 3 relevant rows are fully visible */
.susm-chart__row--exact,
.susm-chart__row--slimmer,
.susm-chart__row--looser {
    opacity: 1;
}

/* Exact / recommended row */
.susm-chart__row--exact {
    background: #fff8f0;
}

.susm-chart__row--exact td {
    border-top: 2px solid #8b1a1a;
    border-bottom: 2px solid #8b1a1a;
}

.susm-chart__row--exact td:first-child {
    border-left: 4px solid #8b1a1a;
}

/* Row the user has actively selected (may differ from exact if they chose slimmer/looser) */
.susm-chart__row--selected td {
    background: #fff8e8 !important;
}

.susm-chart__size {
    font-weight: 700;
    font-size: 1.05em;
}

/* ── Fit badges ────────────────────────────────────────────────────────────── */
.susm-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
}

.susm-badge--exact {
    background: #8b1a1a;
    color: #fff;
}

.susm-badge--slimmer {
    background: #e8f0fe;
    color: #1a47b8;
    border: 1px solid #c5d5fc;
}

.susm-badge--looser {
    background: #e8f5e9;
    color: #1a6e2e;
    border: 1px solid #b7dfc0;
}

/* ── No-match message ──────────────────────────────────────────────────────── */
.susm-no-match {
    color: #888;
    font-style: italic;
    margin: 8px 0 0;
}

/* ── Lightbox overlay ──────────────────────────────────────────────────────── */
.susm-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.susm-lightbox-overlay.is-open {
    display: flex;
}

.susm-lightbox {
    background: #fff;
    border-radius: 10px;
    padding: 32px 28px 24px;
    width: 100%;
    max-width: 380px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.susm-lightbox__close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    padding: 0;
}

.susm-lightbox__close:hover { color: #333; }

.susm-lightbox__title {
    font-size: 1.15em;
    font-weight: 700;
    margin: 0 0 6px;
    color: #222;
}

.susm-lightbox__desc {
    font-size: 0.88em;
    color: #666;
    margin: 0 0 20px;
}

.susm-lightbox__field {
    margin-bottom: 16px;
}

.susm-lightbox__field label {
    display: block;
    font-size: 0.88em;
    font-weight: 600;
    margin-bottom: 5px;
    color: #444;
}

.susm-lightbox__field input[type="number"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.susm-lightbox__field input[type="number"]:focus {
    border-color: #8b1a1a;
    outline: none;
    box-shadow: 0 0 0 2px rgba(139, 26, 26, 0.15);
}

.susm-lightbox__error {
    color: #c0392b;
    font-size: 0.85em;
    margin: -8px 0 12px;
    display: none;
}

.susm-lightbox__submit {
    width: 100%;
    padding: 11px;
    background: #8b1a1a;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.susm-lightbox__submit:hover { background: #6e1515; }
.susm-lightbox__submit:disabled { background: #bbb; cursor: not-allowed; }

/* trigger button inside incomplete panel */
.susm-open-lightbox {
    margin-left: 8px;
    padding: 4px 12px !important;
    font-size: 0.85em !important;
    background: #8b1a1a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer;
    vertical-align: middle;
}

.susm-open-lightbox:hover { background: #6e1515 !important; }

/* edit measurements button at bottom of complete panel */
.susm-edit-measurements {
    margin-top: 10px;
    text-align: right;
}

.susm-edit-btn {
    margin-left: 0 !important;
    padding: 3px 10px !important;
    font-size: 0.8em !important;
    background: transparent !important;
    color: #8b1a1a !important;
    border: 1px solid #8b1a1a !important;
    border-radius: 4px !important;
    cursor: pointer;
}

.susm-edit-btn:hover {
    background: #8b1a1a !important;
    color: #fff !important;
}
.susm-panel code {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}
.susm-panel small {
    font-size: 0.82em;
    color: #666;
}

/* ── Variation description fit note (shown after selecting a size) ────────── */
.susm-found-variation-note {
    display: inline-block;
    font-size: 0.85em;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.susm-note-slim  {
    background: #e8f0fe;
    color: #1a47b8;
    border: 1px solid #c5d5fc;
}

.susm-note-loose {
    background: #e8f5e9;
    color: #1a6e2e;
    border: 1px solid #b7dfc0;
}

/* ── Highlight options in the WC size select ──────────────────────────────── */
option.susm-exact   { font-weight: 700; }
option.susm-slimmer { color: #1a47b8; }
option.susm-looser  { color: #1a6e2e; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .susm-measurements {
        gap: 10px;
    }
    .susm-measurement {
        padding: 6px 10px;
    }
    .susm-recommended-badge__size {
        font-size: 1.1em;
        min-width: 42px;
        height: 42px;
    }
}

/* ── Recommended size dropdown highlight ───────────────────────────────────── */
select.susm-select-recommended,
select.susm-select-recommended:not([size]):not([multiple]) {
    background-color: #fff8f0 !important;
    border-color: #8b1a1a !important;
    color: #3a0a0a !important;
    font-weight: 600;
    outline-color: #8b1a1a;
}

/* ── "(請選取一個選項)" hint text next to 尺碼 label ──────────────────────── */
.susm-select-hint {
    color: #c0392b;
    font-size: 0.85em;
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
}

/* ── Locked select when profile is incomplete ─────────────────────────────── */
select.susm-select-locked {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    color: #999;
}