/* ===== استبيان التوافق — إضافات فوق تصميم تقييم شريك الحياة ===== */

/* الهبوط: حلقتان متداخلتان */
.rings { position: relative; z-index: 1; display: block; width: min(250px, 72%); margin: 30px auto 0; overflow: visible; }
.rings circle { fill: none; stroke-width: 9; }
.rings .r1 { stroke: rgba(184,145,58,.35); }
.rings .r2 { stroke: #D6B25E; }
.rings .r-mid { fill: rgba(214,178,94,.22); }
@media (prefers-reduced-motion: no-preference) {
  .rings .r1 { animation: twSlideL 1.2s cubic-bezier(.3,.7,.2,1) both; }
  .rings .r2 { animation: twSlideR 1.2s cubic-bezier(.3,.7,.2,1) both; }
  .rings .r-mid { animation: ptFade .6s ease-out 1.1s both; }
  @keyframes twSlideL { from { transform: translateX(-22px); opacity: 0; } }
  @keyframes twSlideR { from { transform: translateX(22px); opacity: 0; } }
}
.invite-note {
  margin: 0 auto 18px; max-width: 30em; padding: 12px 16px; border-radius: 14px;
  background: #FBF4E2; border: 1px solid #EBDDB8; color: #6B4A0E; font-size: 15px; line-height: 1.85;
}

/* رأس الصفحة: الجذع */
.stem-line {
  margin: 0 0 14px; padding: 10px 14px; text-align: center; border-radius: 12px;
  background: #F1E6C9; color: #6B4A0E; font-weight: 700; font-size: 15.5px;
}
.sub-head { margin: 22px 4px 10px; font-size: 14px; font-weight: 700; color: #8C6A24; text-align: center; }

/* خيارات أفقية */
.seg3, .seg5, .seg11 { display: grid; gap: 6px; }
.seg3 { grid-template-columns: repeat(3, 1fr); }
.seg5 { grid-template-columns: repeat(5, 1fr); gap: 5px; }
.seg11 { grid-template-columns: repeat(11, 1fr); gap: 4px; direction: ltr; }
.seg3 button, .seg5 button, .seg11 button {
  font-family: var(--ui); color: #3B342A; cursor: pointer; line-height: 1.3;
  min-height: 46px; padding: 6px 2px; border-radius: 11px; background: #FAF8F4; border: 1px solid #ECE5D7;
  -webkit-tap-highlight-color: transparent; transition: background .12s ease, border-color .12s ease;
}
.seg3 button { font-size: 14.5px; }
.seg5 button { font-size: 12.5px; }
.seg11 button { font-size: 14px; padding: 6px 0; border-radius: 9px; }
.seg3 button[aria-pressed="true"], .seg5 button[aria-pressed="true"], .seg11 button[aria-pressed="true"] {
  background: #15120E; border-color: #15120E; color: #E9C877;
}
@media (hover: hover) { .seg3 button:hover, .seg5 button:hover, .seg11 button:hover { border-color: #D6C59A; } }
@media (max-width: 360px) { .seg5 button { font-size: 11.5px; } }

/* البند بعمودين: أنا / الطرف الآخر */
.drows { display: grid; gap: 8px; }
.drow { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 6px; }
.drow .who {
  font-size: 13px; font-weight: 700; color: #8C6A24; background: #F6EEDB;
  border-radius: 9px; padding: 6px 2px; text-align: center; line-height: 1.3;
}
.drows.off { opacity: .45; }
.q.dual .q-text { margin-bottom: 12px; }

.na-btn {
  display: block; margin: 10px auto 0; padding: 7px 16px; border-radius: 999px; cursor: pointer;
  font: 500 13px var(--ui); color: #6B6253; background: none; border: 1px dashed #CFC3A6;
}
.na-btn[aria-pressed="true"] { background: #15120E; border: 1px solid #15120E; color: #E9C877; }

.q textarea.other-in { resize: vertical; text-align: right; line-height: 1.8; }
.q .scale-ends { font-size: 12px; color: #8A7E68; }

/* صفحة الشكر */
.done-head { text-align: center; padding: 24px 6px 6px; }
.done-ic {
  display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: #15120E; color: #E9C877; box-shadow: 0 14px 30px -16px rgba(21,18,14,.7);
}
.done-head h2 { margin: 14px 0 4px; }
.done-head p { margin: 0; color: #6B6253; }

.pair-box {
  margin: 22px 0 18px; padding: 18px 16px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, #FCF5E3 0%, #F6EACB 100%); border: 1.5px solid #D6B25E;
}
.pair-box b { display: block; font-size: 17px; color: #4A3510; }
.pair-box p { margin: 6px 0 14px; font-size: 15px; line-height: 1.85; color: #6B4A0E; }
.pair-box.ok { background: #EEF4EE; border-color: #A9C7AD; }
.pair-box.ok b { color: #2E5A35; }
.pair-box.ok p { color: #3D5E42; margin-bottom: 0; }
.pair-box .btn { width: 100%; margin-top: 8px; }
.btn.wa { display: flex; align-items: center; justify-content: center; gap: 8px; background: #1F8A4C; color: #fff; text-decoration: none; }
.btn.wa:hover { background: #197340; }