/* أزرار نودا — الـ CTA الأساسي يحمل توقيع العلامة: تدرج «نبتة تلتقط ضوء الغروب»
 * (نفس تدرج Button.tsx في التطبيق: primary → secondary). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--space-button-height, 52px);
  padding: var(--space-md) var(--space-3xl);
  border: 0;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--type-button-size);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  transition:
    transform var(--motion-fast) ease-out,
    box-shadow var(--motion-base) ease-out,
    background-color var(--motion-base) ease-out,
    color var(--motion-base) ease-out;
}
.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:active { transition: none; transform: none; }
}

.btn-primary {
  background: var(--gradient-cta);
  color: #0A140E;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
  color: #0A140E;
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--nooda-text-primary);
  border: 1px solid var(--nooda-border);
}
.btn-ghost:hover {
  color: var(--nooda-primary-light);
  border-color: var(--nooda-primary-glow);
  background: var(--nooda-primary-soft);
}

.btn-lg {
  min-height: 58px;
  padding: var(--space-lg) var(--space-4xl);
  font-size: 18px;
  border-radius: var(--radius-lg);
}

/* حقول النماذج */
.field { margin-bottom: var(--space-xl); }
.field label {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--type-small-size);
  font-weight: 500;
  color: var(--nooda-text-secondary);
}
.field input,
.field textarea {
  width: 100%;
  min-height: var(--space-input-height, 48px);
  padding: var(--space-md) var(--space-lg);
  background: var(--nooda-surface);
  border: 1px solid var(--nooda-border);
  border-radius: var(--radius-sm);
  color: var(--nooda-text-primary);
  font-family: inherit;
  font-size: var(--type-body-size);
  transition: border-color var(--motion-base) ease-out, box-shadow var(--motion-base) ease-out;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--nooda-primary);
  box-shadow: 0 0 0 3px var(--nooda-primary-soft);
}
.field input::placeholder, .field textarea::placeholder { color: var(--nooda-text-secondary); opacity: 0.6; }
.field-help {
  display: block;
  margin-top: var(--space-sm);
  color: var(--nooda-text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.phone-inputs {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}
.phone-country-picker {
  position: relative;
  flex: 0 0 154px;
  width: 154px;
}
.field .phone-country-code,
.field .phone-country-search {
  width: 100%;
  padding-inline: var(--space-md);
  text-align: start;
}
.field .phone-country-code { text-align: center; }
.phone-country-results {
  position: absolute;
  z-index: 20;
  inset-block-start: calc(100% + var(--space-xs));
  inset-inline-start: 0;
  width: min(300px, 80vw);
  max-height: 280px;
  overflow-y: auto;
  padding: var(--space-xs);
  background: var(--nooda-surface-raised, var(--nooda-surface));
  border: 1px solid var(--nooda-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
}
.phone-country-result {
  display: flex;
  width: 100%;
  min-height: 42px;
  padding: var(--space-sm) var(--space-md);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--nooda-text-primary);
  font: inherit;
  font-size: var(--type-small-size);
  text-align: start;
  cursor: pointer;
}
.phone-country-result:hover,
.phone-country-result:focus-visible { background: var(--nooda-primary-soft); }
.phone-country-result code { color: var(--nooda-primary-light); font-family: inherit; }
.phone-country-empty {
  padding: var(--space-md);
  color: var(--nooda-text-secondary);
  font-size: var(--type-small-size);
}
.field .phone-number { min-width: 0; flex: 1; }
@media (max-width: 420px) {
  .phone-country-picker { flex-basis: 126px; width: 126px; }
}

/* رسائل الحالة — تظهر عبر :target بعد إعادة التوجيه، بلا JS ولا PHP (صديقة للكاش) */
.notice-target { display: none; }
.notice-target:target { display: block; }
.notice-ok, .notice-err {
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xl);
  font-weight: 500;
}
.notice-ok {
  background: var(--nooda-primary-soft);
  border: 1px solid var(--nooda-primary-glow);
  color: var(--nooda-primary-light);
}
.notice-err {
  background: var(--nooda-error-soft, rgba(226, 102, 76, 0.14));
  border: 1px solid var(--nooda-error);
  color: var(--nooda-error);
}