/* ══ صفحة مقارنة الأسماء ══ */
.cmp-wrap { max-width: 860px; margin: 0 auto; padding: 28px 16px 70px; }

.cmp-head { text-align: center; margin-bottom: 22px; }
.cmp-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem; font-weight: 900; color: #5a1a60; margin-bottom: 6px;
}
[data-theme="dark"] .cmp-title { color: #e6b8ff; }
.cmp-sub { color: #a06090; font-size: 15px; }
[data-theme="dark"] .cmp-sub { color: #b89ac8; }

/* منتقيا الأسماء */
.cmp-pickers {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 26px;
}
.cmp-slot { position: relative; }
.cmp-search {
    width: 100%;
    padding: 12px 18px;
    border: 2px solid #e0c98a;
    border-radius: 999px;
    font-size: 15px;
    outline: none;
    background: #fcfbf9;
    color: #2c1810;
    box-sizing: border-box;
    text-align: center;
    font-weight: 700;
}
.cmp-search:focus { border-color: #b05080; box-shadow: 0 0 0 3px rgba(176,80,128,0.12); }
[data-theme="dark"] .cmp-search { background: #241030; border-color: #4a2a5a; color: #eee; }
.cmp-swap {
    align-self: center;
    background: #fff3dd;
    border: 2px solid #e0c98a;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 800;
    color: #8a6a2a;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.cmp-swap:hover { background: #ffe9bd; }
/* solo la flecha gira, no la palabra */
.cmp-swap-ico { display: inline-block; transition: transform 0.35s ease; }
.cmp-swap:hover .cmp-swap-ico { transform: rotate(180deg); }
[data-theme="dark"] .cmp-swap { background: #3a2a14; border-color: #6a5030; color: #eac07e; }

/* قائمة نتائج البحث */
.cmp-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid #e8d5f5;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(100,20,120,0.15);
    z-index: 50;
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}
.cmp-results.open { display: block; }
[data-theme="dark"] .cmp-results { background: #1e0a2e; border-color: #3a1a50; }
.cmp-result-item {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #3a1a40;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: background 0.12s;
}
.cmp-result-item:hover { background: #fde8f3; }
[data-theme="dark"] .cmp-result-item { color: #e8d5f5; }
[data-theme="dark"] .cmp-result-item:hover { background: #3a1a50; }
.cmp-result-origin { margin-inline-start: auto; font-size: 11px; color: #a78cc0; font-weight: 600; }

/* لوحة المقارنة — 3 أعمدة: A | label | B */
.cmp-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px 12px;
    align-items: stretch;
}
.cmp-name-head {
    grid-column: span 1;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 18px 12px;
    border-radius: 18px;
    text-decoration: none;
    color: #fff;
    text-align: center;
}
.gh-boy  { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.gh-girl { background: linear-gradient(135deg, #ec4899, #b05080); }
.cmp-name-big { font-family: 'Playfair Display', Georgia, serif; font-size: 1.7rem; font-weight: 900; line-height: 1.1; }
.cmp-name-gender { font-size: 20px; }
.cmp-vs {
    align-self: center;
    justify-self: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900; font-size: 20px;
    color: #b05080;
    background: #fff3f8;
    border: 2px solid #f5c0d8;
    border-radius: 50%;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .cmp-vs { background: #2a0f2f; border-color: #6a2f55; color: #f0a0c8; }

/* خلايا الصفوف */
.cmp-cell {
    background: #fcfbf9;
    border: 1px solid #ece1cf;
    border-radius: 14px;
    padding: 14px;
    font-size: 14px;
    color: #3a2a1e;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    text-align: center;
    min-height: 56px;
}
[data-theme="dark"] .cmp-cell { background: #1c1226; border-color: #382a44; color: #e0d3ea; }
.cmp-rowlabel {
    align-self: center;
    font-size: 11px; font-weight: 800; color: #a08060;
    text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap;
    text-align: center;
}
[data-theme="dark"] .cmp-rowlabel { color: #b8a488; }

/* الفائز في الصف */
.cmp-win {
    border-color: #C4973A;
    box-shadow: 0 0 0 2px rgba(196,151,58,0.35);
    background: #fffaf0;
}
[data-theme="dark"] .cmp-win { background: #2a2210; }

.cmp-bar {
    width: 100%; height: 8px; background: #eadfce; border-radius: 999px; overflow: hidden;
}
[data-theme="dark"] .cmp-bar { background: #3a2f22; }
.cmp-bar-fill { height: 100%; background: linear-gradient(90deg, #C4973A, #d4a843); border-radius: 999px; }
.cmp-pct { font-size: 12px; font-weight: 800; color: #8a6a4a; }
.cmp-vote { font-size: 1.4rem; font-weight: 900; color: #1f9d55; line-height: 1; }
.cmp-vote-sub { font-size: 11px; color: #9a8; }

.cmp-empty {
    text-align: center;
    color: #a08a70;
    font-size: 15px;
    padding: 50px 20px;
    background: #fcfbf9;
    border: 1px dashed #e0c98a;
    border-radius: 18px;
}
[data-theme="dark"] .cmp-empty { background: #1c1226; border-color: #4a3a2a; color: #b8a488; }

@media (max-width: 600px) {
    .cmp-name-big { font-size: 1.3rem; }
    .cmp-swap { padding: 8px 10px; font-size: 12px; }
    .cmp-cell { padding: 10px 8px; font-size: 13px; }
    .cmp-rowlabel { font-size: 10px; }
}