/* ================================================================
   GM Ateliê de Joias — Modal Guia de Medidas de Aro
   size-guide.css
   ================================================================ */

/* Scrollbar na área de conteúdo */
.sg-scroll { scrollbar-width: thin; scrollbar-color: #e0d4b4 transparent; }
.sg-scroll::-webkit-scrollbar { width: 3px; }
.sg-scroll::-webkit-scrollbar-track { background: transparent; }
.sg-scroll::-webkit-scrollbar-thumb { background: #e0d4b4; border-radius: 2px; }

/* Botões de tab */
.sg-tab-btn {
    flex: 1;
    padding: .55rem .2rem .45rem;
    font-size: .67rem;
    font-weight: 600;
    color: #8c8070;
    border-bottom: 2.5px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .22rem;
    line-height: 1.1;
    white-space: nowrap;
    border-left: none;
    border-right: none;
    border-top: none;
}
@media (min-width: 380px) {
    .sg-tab-btn {
        flex-direction: row;
        justify-content: center;
        gap: .35rem;
        font-size: .72rem;
        padding: .65rem .4rem;
    }
}
.sg-tab-btn:hover { color: #4a4540; }
.sg-tab-btn.sg-active { color: #c8a96e; border-bottom-color: #c8a96e; }

/* Círculos numerados dos passos */
.sg-num {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #c8a96e 0%, #9d6e28 100%);
    color: #fff;
    font-size: .67rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .1rem;
    box-shadow: 0 2px 6px rgba(200, 169, 110, .4);
}

/* Texto dos passos */
.sg-step-title {
    font-size: .77rem;
    font-weight: 600;
    color: #2d2a24;
    line-height: 1.4;
    margin-bottom: .12rem;
}
.sg-step-desc {
    font-size: .7rem;
    color: #6b6560;
    line-height: 1.55;
}

/* Tabela de tamanhos */
.sg-th {
    background: #2d2a24;
    color: #e8d5a0;
    font-size: .59rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .5rem .75rem;
    text-align: center;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
}
.sg-td {
    font-size: .78rem;
    padding: .42rem .75rem;
    color: #4a4540;
    border-bottom: 1px solid #f0ebe0;
    text-align: center;
    transition: background .1s;
}
tr:nth-child(even) .sg-td { background: #faf8f4; }
tr.sg-row-on .sg-td { background: #fef7e6 !important; font-weight: 600; color: #2d2a24; }
tr.sg-row-on .sg-td:first-child { color: #c8a96e; font-size: .95rem; font-weight: 700; }

/* Badge dourado do resultado */
.sg-badge {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #c8a96e, #9d6e28);
    color: #fff;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(200, 169, 110, .4);
    flex-shrink: 0;
    transition: transform .12s;
}
.sg-badge.sg-badge-empty {
    background: #e8dfc8;
    box-shadow: none;
    font-size: .5rem;
    font-family: inherit;
    color: #8c8070;
    font-weight: 400;
}

/* Dicas no rodapé */
.sg-tip {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .67rem;
    color: #6b6560;
    line-height: 1.5;
}
.sg-tip-ico {
    color: #c8a96e;
    flex-shrink: 0;
    margin-top: .12rem;
    font-size: .62rem;
}