.my-popup {
  max-width: 820px;
  display: flex;
  align-items: stretch;
  background: var(--surface, #fff);
  border-radius: var(--radius-lg, 24px);
  padding: 0;
  border: none;
  box-shadow: 0 16px 48px rgba(13, 79, 139, 0.15);
  gap: 0;
  overflow: hidden;
}

.my-popup-left,
.my-popup-right {
  width: 50%;
}

.my-popup-left {
  text-align: center;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--primary, #0d4f8b) 0%, var(--accent, #00a896) 100%);
  padding: 32px 24px;
  border: none;
}

.my-popup-left img {
  width: 100%;
  max-width: 240px;
  height: auto;
  min-height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.2));
}

.my-popup-right {
  padding: 32px 28px;
  background: var(--surface, #fff);
}

.my-popup-right .ti {
  margin-bottom: 30px;
}

input,
select {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 14px;
  border: 2px solid var(--line, #d8e2ef);
  background: var(--surface-elevated, #f8fafc);
  border-radius: var(--radius-pill, 999px);
  font-size: 16px;
  font-family: "Cairo", Arial, sans-serif;
  color: var(--text, #0f1c2e);
  padding: 0 20px;
  height: 52px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  direction: rtl;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--accent, #00a896);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 168, 150, 0.15);
}

input::placeholder {
  color: var(--muted, #5a6b82);
}

.prices {
  width: 100%;
  text-align: center;
  margin: 0 0 20px;
  padding: 12px;
  background: var(--highlight-soft, #fff0ec);
  border-radius: var(--radius, 16px);
}

.new {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary, #0d4f8b);
}

.new b {
  font-size: 38px;
  color: var(--highlight, #ff6b4a);
  font-weight: 800;
}

.old {
  display: inline-block;
  font-size: 17px;
  color: var(--muted, #5a6b82);
  margin: 5px;
  text-decoration: line-through;
}

.btnn {
  display: block;
  background: linear-gradient(135deg, var(--highlight, #ff6b4a) 0%, #e84a2f 100%);
  width: 100%;
  max-width: 100%;
  height: 54px;
  line-height: 54px;
  border: 0;
  outline: none;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-family: "Cairo", Arial, sans-serif;
  font-size: 17px;
  cursor: pointer;
  border-radius: var(--radius-pill, 999px);
  margin: 0 auto;
  box-shadow: 0 10px 28px rgba(255, 107, 74, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btnn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 107, 74, 0.5);
  color: #fff;
}

@media screen and (max-width: 787px) {
  .my-popup {
    flex-direction: column;
    margin: 0 auto;
  }

  .my-popup-left,
  .my-popup-right {
    width: 100%;
  }

  .my-popup-right {
    padding: 24px 20px;
  }

  .my-popup-left img {
    max-width: 200px;
  }

  input,
  select {
    padding: 0 16px;
  }
}