* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

}



body {

  background: #ffffff; /* خلفية بيضاء */

  color: #1f2933;      /* نص غامق */

}



/* تخطيط صفحات تسجيل الدخول وإنشاء الحساب (واجهة المصادقة) */

.auth-page {

  min-height: 100vh;

  display: flex;

  align-items: stretch;

  justify-content: center;

  background: radial-gradient(circle at top right, #fed7aa 0, #ffedd5 30%, #fff7ed 60%, #ffffff 100%);

}



.auth-shell {

  width: 100vw;

  max-width: none;

  margin: 0;

  display: grid;

  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr);

  background: transparent;

}



.auth-panel-form {

  background: #ffffff;

  padding: 2.5rem 2.75rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.auth-panel-hero {

  position: relative;

  padding: 2.5rem 2.75rem;

  color: #fff7ed;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  background: linear-gradient(135deg, #f97316, #ea580c, #c2410c);

  box-shadow: -12px 0 28px rgba(15, 23, 42, 0.18);

}



.auth-hero-icon {

  width: 88px;

  height: 88px;

  border-radius: 999px;

  border: 2px solid rgba(255, 247, 237, 0.85);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.5rem;

  background: rgba(251, 191, 36, 0.22);

  font-size: 2.1rem;

}



.auth-hero-title {

  font-size: 1.7rem;

  font-weight: 700;

  margin-bottom: 0.35rem;

}



.auth-hero-subtitle {

  font-size: 0.95rem;

  opacity: 0.95;

}



.auth-phone-group {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.auth-phone-prefix {

  display: inline-flex;

  align-items: center;

  padding: 0.4rem 0.65rem;

  border-radius: 0.5rem;

  background: #f3f4f6;

  border: 1px solid #e5e7eb;

  font-size: 0.9rem;

  color: #111827;

  white-space: nowrap;

}



.auth-phone-group .auth-input {

  flex: 1;

}



.auth-title {

  font-size: 1.45rem;

  font-weight: 600;

  margin-bottom: 0.4rem;

}



.auth-subtitle {

  font-size: 0.9rem;

  color: #6b7280;

  margin-bottom: 1.5rem;

}



.auth-form {

  display: flex;

  flex-direction: column;

  gap: 0.85rem;

}



.auth-field-label {

  font-size: 0.85rem;

  color: #4b5563;

  margin-bottom: 0.25rem;

}





.auth-input {

  width: 100%;

  padding: 0.55rem 0.7rem;

  border-radius: 6px;

  border: 1px solid #d1d5db;

  font-size: 0.9rem;

}



.auth-input-highlight {

  background-color: #fffbeb; /* خفيف مائل للأصفر لإبراز الحقل */

  border-color: #f97316;

}



.auth-input:focus {

  outline: none;

  border-color: #f97316;

  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.45);

}



.auth-row-inline {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 0.5rem;

  font-size: 0.8rem;

}



.auth-remember {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

}



.auth-remember input[type="checkbox"] {

  width: 14px;

  height: 14px;

}



.auth-link {

  color: #f97316;

  text-decoration: none;

  font-size: 0.8rem;

}



.auth-link:hover {

  text-decoration: underline;

}



.auth-submit {

  width: 100%;

  margin-top: 1rem;

  background: #f97316;

  border-color: #f97316;

  border-radius: 999px;

  font-weight: 600;

}



.auth-submit:hover {

  background: #ea580c;

}



.auth-footer-text {

  margin-top: 0.9rem;

  font-size: 0.82rem;

  text-align: center;

  color: #6b7280;

}



.auth-footer-text a {

  color: #f97316;

  text-decoration: none;

}



.auth-footer-text a:hover {

  text-decoration: underline;

}



/* شاشة تحميل عامة مع شعار المنصة */

.loading-overlay {

  position: fixed;

  inset: 0;

  background: rgba(15, 23, 42, 0.45);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 9999;

}



.loading-overlay.active {

  display: flex;

}



.loading-content {

  background: #ffffff;

  padding: 1.8rem 2rem;

  border-radius: 999px;

  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

}



.loading-logo {

  width: 72px;

  height: 72px;

  object-fit: contain;

  animation: loading-pulse 1.5s ease-in-out infinite;

}



@keyframes loading-pulse {

  0%, 100% { transform: scale(1); opacity: 1; }

  50% { transform: scale(1.08); opacity: 0.85; }

}



/* دايلوج توثيق الحساب */

.verify-overlay {

  position: fixed;

  inset: 0;

  background: rgba(15, 23, 42, 0.55);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 10000;

}



.verify-overlay.active {

  display: flex;

}



.verify-dialog {

  background: #ffffff;

  border-radius: 16px;

  padding: 1.5rem 1.75rem;

  width: min(520px, 100% - 2rem);

  max-height: 85vh;

  overflow-y: auto;

  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);

}



.verify-dialog h3 {

  margin-top: 0;

  margin-bottom: 0.75rem;

  font-size: 1.2rem;

}



.verify-dialog p {

  font-size: 0.85rem;

  color: #4b5563;

  margin-bottom: 1rem;

}



.notifications-list {

  margin-top: 0.5rem;

  margin-bottom: 0.75rem;

  max-height: 55vh;

  overflow-y: auto;

}



.notification-item {

  padding: 0.6rem 0.4rem;

  border-bottom: 1px solid #e5e7eb;

}



.notification-item:last-child {

  border-bottom: none;

}



.notification-item.empty {

  text-align: center;

  color: #6b7280;

  font-size: 0.85rem;

}



.notification-title {

  font-size: 0.9rem;

  font-weight: 600;

  color: #111827;

  margin-bottom: 0.15rem;

}



.notification-meta {

  font-size: 0.78rem;

  color: #6b7280;

}



.verify-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 0.7rem;

}



.verify-row label {

  display: block;

  font-size: 0.8rem;

  color: #4b5563;

  margin-bottom: 0.15rem;

}



.verify-row input,

.verify-row select {

  width: 100%;

  padding: 0.4rem 0.6rem;

  border-radius: 6px;

  border: 1px solid #d1d5db;

  font-size: 0.85rem;

}



.verify-type-switch {

  display: flex;

  gap: 0.5rem;

  margin-bottom: 0.5rem;

}



.verify-actions {

  display: flex;

  justify-content: flex-end;

  gap: 0.5rem;

  margin-top: 1rem;

}



.verify-secondary-btn {

  border-radius: 999px;

  border: 1px solid #111827;

  background: #111827;

  color: #f9fafb;

  padding: 0.35rem 0.9rem;

  font-size: 0.8rem;

  cursor: pointer;

}



.verify-secondary-btn:hover {

  background: #000000;

  color: #f9fafb;

}



.dash-verify-button {

  border-radius: 999px;

  border: 1px solid #f97316;

  background: #fff7ed;

  color: #c2410c;

  padding: 0.15rem 0.6rem;

  font-size: 0.7rem;

  cursor: pointer;

}



.dash-verify-button[disabled] {

  opacity: 0.5;

  cursor: default;

}



@media (max-width: 768px) {

  .auth-shell {

    grid-template-columns: minmax(0, 1fr);

  }



  .auth-panel-form {

    order: 2;

  }



  .auth-panel-hero {

    order: 1;

    padding-top: 2rem;

    padding-bottom: 3rem;

  }

}



.container {

  width: min(1100px, 100% - 32px);

  margin-inline: auto;

}



.site-header {

  background: #f97316; /* برتقالي أساسي */

  color: #ffffff;

  padding: 0.75rem 0;

  position: sticky;

  top: 0;

  z-index: 10;

  border-bottom: 1px solid #fbbf77; /* برتقالي فاتح */

}



.header-content {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.logo {

  font-size: 1.35rem;

  letter-spacing: 0.08em;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

}



.logo-image {

  height: 60px;

  width: 60px;

}



.main-nav a {

  color: #fff7ed;

  text-decoration: none;

  margin-inline-start: 1rem;

  font-size: 0.9rem;

}



.main-nav a:hover {

  color: #ffffff;

}



.header-account {

  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  color: #fffbeb;

  font-size: 0.9rem;

}



.header-account-name {

  font-weight: 500;

}



.header-account-icon {

  width: 28px;

  height: 28px;

  border-radius: 999px;

  border: 1px solid rgba(248, 250, 252, 0.7);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 0.9rem;

  color: #fffbeb;

  margin-left: 0.25rem;

  background: rgba(15, 23, 42, 0.22);

}



.header-notifications-icon {

  width: 16px;

  height: 16px;

  object-fit: contain;

}



.header-logout-button {

  border-radius: 999px;

  border: 1px solid #fed7aa;

  background: transparent;

  color: #fffbeb;

  padding: 0.25rem 0.8rem;

  font-size: 0.8rem;

  cursor: pointer;

}



.header-logout-button:hover {

  background: rgba(255, 255, 255, 0.12);

}



/* أزرار إجراءات الحساب في لوحة التحكم */

.dash-action-button {

  border-radius: 999px;

  border: 1px solid #f97316;

  background: #f97316;

  color: #ffffff;

  padding: 0.3rem 0.9rem;

  font-size: 0.8rem;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 0.25rem;

  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.35);

}



.dash-action-button:hover {

  background: #ea580c;

  border-color: #ea580c;

  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.5);

}



.dash-action-button.secondary {

  background: #fff7ed;

  color: #c2410c;

  border-color: #fed7aa;

}



.dash-action-button.secondary:hover {

  background: #fed7aa;

}



.dash-action-button.danger {

  background: #dc2626;

  border-color: #b91c1c;

  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.45);

}



.dash-action-button.danger:hover {

  background: #b91c1c;

}



.account-card {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  position: relative;

  overflow: hidden;

  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.12);

}



.account-card-header {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.6rem;

  padding-bottom: 0.9rem;

  border-bottom: 1px dashed #fbbf77;

}



.account-avatar-block {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.35rem;

}



.account-avatar-wrapper {

  width: 64px;

  height: 64px;

  border-radius: 999px;

  border: 2px solid #fed7aa;

  overflow: hidden;

  background: #fff7ed;

  display: flex;

  align-items: center;

  justify-content: center;

}



.account-avatar-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.account-avatar-button {

  border-radius: 999px;

  border: 1px solid #e5e7eb;

  background: #f9fafb;

  color: #374151;

  padding: 0.15rem 0.75rem;

  font-size: 0.78rem;

}



.account-avatar-button:hover {

  background: #e5e7eb;

}



.account-card-meta h4 {

  margin: 0;

  font-size: 1.05rem;

  font-weight: 600;

  color: #111827;

}



.account-card-subtitle {

  margin: 0;

  font-size: 0.82rem;

  color: #6b7280;

}



.account-card-subtitle span {

  font-weight: 500;

}



.account-card::before {

  content: '';

  position: absolute;

  inset: 0;

  background:

    radial-gradient(circle at 20% 0%, rgba(249, 115, 22, 0.09), transparent 55%),

    radial-gradient(circle at 80% 100%, rgba(248, 171, 94, 0.09), transparent 55%);

  opacity: 0.7;

  pointer-events: none;

  z-index: -1;

  animation: smirq-card-pulse 8s ease-in-out infinite alternate;

}



@keyframes smirq-card-pulse {

  0% {

    transform: translate3d(0, 0, 0) scale(1);

    opacity: 0.7;

  }

  50% {

    transform: translate3d(5px, -4px, 0) scale(1.02);

    opacity: 0.9;

  }

  100% {

    transform: translate3d(-4px, 3px, 0) scale(1.01);

    opacity: 0.75;

  }

}



.summary {

  margin-top: 1.1rem;

  padding-top: 0.9rem;

  border-top: 1px dashed #e5e7eb;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  column-gap: 2rem;

  row-gap: 0.2rem;

}



.dash-actions-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 0.75rem 1rem;

}



.dash-action-item {

  padding: 0.4rem 0.6rem;

  border-radius: 0.75rem;

  background: #f9fafb;

  border: 1px solid #e5e7eb;

}



.dash-action-item button {

  margin-bottom: 0.2rem;

}



.dash-action-help {

  display: block;

  font-size: 0.78rem;

  color: #6b7280;

  line-height: 1.4;

}



/* إطار لأزرار تسجيل الدخول وإنشاء الحساب في الهيدر */

.auth-buttons {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.15rem 0.4rem;

  border-radius: 999px;

  border: 1px solid #fed7aa;

  background: rgba(255, 255, 255, 0.06);

}



.auth-buttons a {

  margin-inline-start: 0;

  padding: 0.25rem 0.7rem;

  border-radius: 999px;

}



.auth-buttons a:last-child {

  background: #ffffff;

  color: #f97316;

}



.auth-buttons a:last-child:hover {

  background: #ffedd5;

}



.hero {

  padding: 3rem 0 2rem;

  color: #111827;

}



/* سلايدر حساب تكلفة الرسائل في الصفحة الرئيسية */

.pricing-slider {

  margin: 2rem auto 2.5rem;

  padding: 1.5rem 1.75rem;

  border-radius: 14px;

  border: 1px solid #fed7aa;

  background: #fffbeb;

  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.18);

}



.pricing-slider-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 1rem;

  margin-bottom: 1rem;

}



.pricing-slider-title {

  font-size: 1rem;

  font-weight: 600;

}



.pricing-slider-subtitle {

  font-size: 0.85rem;

  color: #6b7280;

}



.pricing-slider-total {

  text-align: left;

  font-size: 0.9rem;

  color: #7c2d12;

}



.pricing-slider-total strong {

  font-size: 1.1rem;

  color: #b45309;

}



.pricing-slider-control {

  margin-top: 0.75rem;

}



.pricing-slider-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 1rem;

  margin-top: 0.5rem;

  font-size: 0.85rem;

  color: #4b5563;

}



.pricing-slider-input {

  width: 100%;

}



.pricing-slider-range {

  width: 100%;

}



.pricing-slider-range input[type="range"] {

  width: 100%;

}



/* تلوين السلايدر بلون الموقع */

.pricing-slider-range input[type="range"] {

  -webkit-appearance: none;

  appearance: none;

  height: 4px;

  border-radius: 999px;

  background: #fed7aa;

  outline: none;

}



.pricing-slider-range input[type="range"]::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: #f97316;

  border: 2px solid #fff7ed;

  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35);

  cursor: pointer;

}



.pricing-slider-range input[type="range"]::-moz-range-thumb {

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: #f97316;

  border: 2px solid #fff7ed;

  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35);

  cursor: pointer;

}



.pricing-slider-range input[type="range"]::-moz-range-track {

  height: 4px;

  border-radius: 999px;

  background: #fed7aa;

}



.hero h2 {

  font-size: 1.8rem;

  margin-bottom: 1rem;

}



.hero p {

  line-height: 1.7;

  color: #4b5563;

}



.trusted-clients {

  margin-top: 1.5rem;

  text-align: center;

}



.trusted-title {

  font-size: 1.2rem;

  margin-bottom: 0.25rem;

}



.trusted-subtitle {

  font-size: 0.85rem;

  color: #6b7280;

  margin-bottom: 0.75rem;

}



.trusted-logos {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 1.25rem;

}



.trusted-logos img {

  height: 40px;

  object-fit: contain;

  filter: grayscale(0.1);

}



.services {

  margin-top: 2rem;

}



.services h3 {

  font-size: 1.4rem;

  margin-bottom: 1rem;

}



.cards {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 1.5rem;

}



.card {

  background: #ffffff; /* صندوق أبيض */

  border-radius: 8px;

  padding: 1.25rem 1.4rem;

  border: 1px solid #fbbf77; /* إطار برتقالي فاتح */

}



.card h4 {

  font-size: 1.1rem;

  margin-bottom: 0.75rem;

  color: #111827;

}



.card p {

  font-size: 0.9rem;

  line-height: 1.7;

  margin-bottom: 1.25rem;

  color: #4b5563;

}



button {

  border: 1px solid #f97316;

  border-radius: 6px;

  padding: 0.45rem 1.1rem;

  background: #f97316; /* زر برتقالي */

  color: #ffffff;

  cursor: pointer;

  font-size: 0.9rem;

}



button:hover {

  background: #ea580c; /* برتقالي أغمق عند التمرير */

}



.site-footer {

  margin-top: 3rem;

  padding: 1.5rem 0;

  font-size: 0.8rem;

  color: #6b7280;

  border-top: 1px solid #fbbf77;

}



/* شريط فوتر بسيط بأسلوب الشركات العالمية */

.imi-footer {

  background: #f97316; /* برتقالي أساسي */

  color: #f9fafb;

  padding: 0.75rem 0;

  margin-top: 3rem;

  border-top: 1px solid #ea580c;

}



.imi-footer-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.5rem;

  font-size: 0.82rem;

}



.imi-footer-left {

  display: flex;

  align-items: center;

  gap: 0.9rem;

}



.imi-footer-mark {

  font-size: 0.9rem;

  font-weight: 700;

  color: #fff;

}



.imi-footer-nav {

  display: flex;

  align-items: center;

  gap: 0.9rem;

}



.imi-footer-nav a {

  color: #fff7ed;

  text-decoration: none;

}



.imi-footer-nav a:hover {

  color: #ffffff;

}



.imi-footer-right {

  display: flex;

  align-items: center;

  gap: 0.8rem;

  color: #fef3c7;

}



.imi-footer-status-dot {

  width: 6px;

  height: 6px;

  border-radius: 999px;

  background: #22c55e;

}



@media (max-width: 768px) {

  .imi-footer-bar {

    flex-direction: column;

    align-items: flex-start;

  }



  .imi-footer-nav {

    flex-wrap: wrap;

  }

}



/* مبدّل اللغة في الفوتر */

.lang-switcher {

  position: relative;

}



.lang-button {

  border: 1px solid #fed7aa;

  border-radius: 999px;

  background: transparent;

  color: #fef3c7;

  padding: 0.2rem 0.9rem;

  font-size: 0.78rem;

  cursor: pointer;

}



.lang-button:hover {

  background: rgba(0, 0, 0, 0.06);

}



.lang-menu {

  position: absolute;

  bottom: 120%;

  right: 0;

  background: #ffffff;

  color: #111827;

  border-radius: 8px;

  border: 1px solid #e5e7eb;

  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);

  padding: 0.35rem 0;

  min-width: 130px;

  display: none;

  z-index: 20;

}



.lang-menu.open {

  display: block;

}



.lang-menu button {

  width: 100%;

  background: transparent;

  border: none;

  text-align: right;

  padding: 0.3rem 0.75rem;

  font-size: 0.8rem;

  cursor: pointer;

}



.lang-menu button:hover {

  background: #f9fafb;

}



/* دايلوج اختيار اللغة */

.lang-dialog {

  position: fixed;

  inset: 0;

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 40;

}



.lang-dialog.open {

  display: flex;

}



.lang-dialog-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(15, 23, 42, 0.4);

}



.lang-dialog-content {

  position: relative;

  z-index: 41;

  background: #ffffff;

  border-radius: 12px;

  padding: 1.5rem 1.7rem;

  max-width: 380px;

  width: calc(100% - 2rem);

  max-height: 80vh;

  overflow-y: auto;

  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);

}



.lang-dialog-content h3 {

  margin: 0 0 0.5rem;

  font-size: 1.1rem;

}



.lang-dialog-subtitle {

  font-size: 0.85rem;

  color: #6b7280;

  margin-bottom: 1rem;

}



.lang-dialog-options {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  margin-bottom: 1.2rem;

}



.lang-option {

  display: block;

  width: 100%;

  border-radius: 999px;

  border: 1px solid #f97316;

  background: #fff7ed;

  color: #7c2d12;

  padding: 0.45rem 0.9rem;

  font-size: 0.9rem;

  cursor: pointer;

  text-align: center;

}



.lang-option:hover {

  background: #fed7aa;

}



.lang-dialog-close {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 999px;

  border: 1px solid #e5e7eb;

  background: #f9fafb;

  color: #111827;

  padding: 0.3rem 0.9rem;

  font-size: 0.8rem;

  cursor: pointer;

}



.lang-dialog-close:hover {

  background: #e5e7eb;

}



/* نمط النماذج العامة */

 .page-wrapper {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



.main-content {

  flex: 1;

  padding: 2rem 0 3rem;

}



.form-card {

  background: #ffffff;

  border-radius: 12px;

  padding: 1.7rem;

  border: 1px solid #fbbf77;

}



.form-card h2,

.form-card h3 {

  margin-bottom: 1rem;

}



.form-section-title-center {

  text-align: center;

  margin-top: 0.5rem;

  margin-bottom: 1rem;

}



.otp-title-logo {

  display: block;

  margin: 0;

  max-height: 60px;

  width: auto;

}



.otp-title-row {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.75rem;

  margin-bottom: 1rem;

}



.otp-title-row h2 {

  margin: 0;

}



.text-link-button {

  background: none;

  border: none;

  padding: 0;

  margin: 0;

  color: #2563eb;

  cursor: pointer;

  font-size: 0.9rem;

  text-decoration: underline;

}



.form-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

  gap: 1rem 1.5rem;

}



.field {

  display: flex;

  flex-direction: column;

  gap: 0.3rem;

}



.field label {

  font-size: 0.85rem;

  color: #4b5563;

}



.field input,

.field select,

.field textarea {

  padding: 0.5rem 0.7rem;

  border-radius: 6px;

  border: 1px solid #f97316;

  font-size: 0.9rem;

  background: #ffffff;

  color: #111827;

}



.field textarea {

  min-height: 80px;

  resize: vertical;

}



.actions {

  margin-top: 1.5rem;

  display: flex;

  justify-content: flex-end;

  gap: 0.75rem;

}



.badge {

  display: inline;

  padding: 0;

  border-radius: 0;

  background: transparent;

  color: inherit;

  font-size: inherit;

  font-weight: inherit;

}



.summary {

  margin-top: 1.2rem;

  padding-top: 0;

  display: grid;

  grid-template-columns: 1fr; /* عمود واحد افتراضيًا (موبايل) */

  row-gap: 0.15rem;

}



@media (min-width: 768px) {

  .summary {

    grid-template-columns: repeat(2, minmax(220px, 1fr));

    column-gap: 2.5rem;

  }

}



.summary-row {

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 0.5rem;

  font-size: 0.9rem;  /* نفس حجم نص الكروت */

  padding: 0.2rem 0;

}



.summary-row span:first-child {

  color: #6b7280;

  font-weight: 500;

}



.summary-row span:last-child {

  color: #f97316;

  font-weight: 600;

}



.barcode-wrapper {

  margin-top: 1rem;

  text-align: center;

}



.stepper {

  display: flex;

  gap: 0.5rem;

  margin-bottom: 1.2rem;

  font-size: 0.85rem;

}



.stepper span {

  padding: 0.2rem 0.7rem;

  border-radius: 999px;

  background: #fff7ed;

  color: #c2410c;

}



.stepper .active {

  background: #f97316; /* برتقالي للخطوة النشطة */

  color: #ffffff;

}



/* باقات OTP */

.packages-visual {

  margin-top: 1.5rem;

}



.packages-options h3 {

  font-size: 1rem;

  margin-bottom: 0.75rem;

}



.packages-list {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.package-option {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.5rem 0.75rem;

  border-radius: 8px;

  border: 1px solid #fbbf77;

  background: #fff7ed;

}



.package-option input[type="radio"] {

  accent-color: #f97316;

}



.otp-table {

  width: 100%;

  border-collapse: collapse;

  margin-top: 0.75rem;

  font-size: 0.9rem;

}



.otp-table th,

.otp-table td {

  border: 1px solid #fbbf77;

  padding: 0.45rem 0.6rem;

  text-align: center;

}



.otp-table thead {

  background: #fff7ed;

}



/* صفحة API على شكل ورقة */

.api-paper {

  background: #ffffff;

  border-radius: 12px;

  border: 1px solid #fbbf77;

  padding: 1.8rem 2rem;

  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);

  margin: 2rem auto 0;

  max-width: 900px;

  line-height: 1.9;

}



.api-paper-title {

  margin-top: 0;

  margin-bottom: 1rem;

  font-size: 1.4rem;

}



.api-paper p {

  margin-bottom: 1rem;

  color: #4b5563;

}

 

.plans-subtitle {

  text-align: center;

  margin-bottom: 1rem;

  color: #6b7280;

  font-size: 0.9rem;

}



.tabs-container {

  display: inline-flex;

  border-radius: 999px;

  border: 1px solid #e5e7eb;

  background: #f9fafb;

  padding: 0.15rem;

  margin: 0 auto 1.5rem;

}



.tab-button {

  border: none;

  background: transparent;

  padding: 0.35rem 1.2rem;

  border-radius: 999px;

  font-size: 0.85rem;

  color: #4b5563;

  cursor: pointer;

}



.tab-button.active {

  background: #ffffff;

  color: #111827;

  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);

}



.plans-panel {

  margin-top: 0.5rem;

}



.plans-grid {

  margin-top: 0.5rem;

}



.plan-price {

  font-weight: 600;

  margin-bottom: 0.5rem;

}



.plan-features {

  list-style: disc;

  padding-right: 1.2rem;

  margin-bottom: 1rem;

  font-size: 0.85rem;

  color: #4b5563;

  line-height: 1.7;

}



/* بطاقات الباقات بأسلوب مشابه للصورة المرسلة */

.plan-card {

  position: relative;

  border-radius: 16px;

  padding: 1.6rem 1.6rem 1.3rem;

  border: 1px solid #e5e7eb;

  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);

}



.plan-card .plan-price {

  font-size: 1.1rem;

  color: #f97316;

  font-weight: 700;

}



.plan-card button {

  display: block;

  width: 100%;

  margin-top: 1rem;

}