/* Қытай күнтізбесі: виджет «ұл / қыз» + таблица (home2026/gender-widget.php) */
.erk-content .erk-gp { margin: 28px 0; padding: 28px; border: 1px solid #d5eae9; border-radius: 22px; background: #f1faf9; color: #173454; }
.erk-gp, .erk-gp * { box-sizing: border-box; }
.erk-gp__eyebrow { display: block; color: #007d7e; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.erk-content .erk-gp .erk-gp__title { margin: 8px 0 6px; padding: 0; background: none; color: #0B2D5B; font-size: clamp(22px, 3vw, 30px); line-height: 1.25; text-align: left; }
.erk-content .erk-gp .erk-gp__intro { margin: 0 0 20px; font-size: 14px; color: #51657b; }
.erk-gp__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.erk-gp__field span { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.erk-content .erk-gp select { display: block; width: 100%; height: 50px; padding: 10px 14px; border: 1px solid #b8d5d5; border-radius: 12px; background: #fff; color: #173454; font: inherit; font-size: 16px; cursor: pointer; }
.erk-gp select:focus-visible { outline: 3px solid #007d7e; outline-offset: 3px; }
.erk-gp__result { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 18px 22px; border-radius: 16px; background: #0B2D5B; color: #fff; transition: background .2s; }
.erk-gp__result.is-g { background: #c2416b; }
.erk-gp__result small { display: block; font-size: 13px; opacity: .8; }
.erk-content .erk-gp__answer { display: block; color: #fff; font-size: 28px; font-weight: 800; line-height: 1.2; }
.erk-gp__face { flex: none; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 32px; line-height: 56px; text-align: center; }
.erk-gp__result.is-b .erk-gp__face::before { content: "👦"; }
.erk-gp__result.is-g .erk-gp__face::before { content: "👧"; }
.erk-content .erk-gp .erk-gp__note { margin: 12px 0 0; font-size: 12px; color: #51657b; }

.erk-gp-table-wrap { overflow-x: auto; margin: 0 0 24px; border: 1px solid #d5eae9; border-radius: 16px; }
.erk-content .erk-gp-table { display: table; max-width: none; width: 100%; min-width: 620px; margin: 0; border-collapse: collapse; font-size: 13px; text-align: center; }
.erk-gp-table th, .erk-gp-table td { padding: 7px 4px; border: 1px solid #e6eef2; }
.erk-gp-table thead th { background: #0B2D5B; color: #fff; font-weight: 600; }
.erk-gp-table tbody th { background: #f1faf9; color: #0B2D5B; }
.erk-gp-table td.is-b { color: #1f4fae; }
.erk-gp-table td.is-g { color: #c2416b; background: #fdf3f6; }
.erk-gp-table td.is-on { outline: 3px solid #0EA5A0; outline-offset: -3px; font-weight: 800; }

@media (max-width: 540px) {
    .erk-content .erk-gp { padding: 18px 14px; border-radius: 16px; }
    .erk-gp__fields { grid-template-columns: 1fr; gap: 12px; }
}