:root { --olp-brand-color: #ef4056; --olp-brand-contrast: #fff; }
html.olp-modal-open, body.olp-modal-open { overflow: hidden; }
.olp-modal, .olp-modal * { box-sizing: border-box; }
.olp-modal {
  --olp-brand-color: #ef4056;
  --olp-brand-contrast: #fff;
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(15, 23, 42, .58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  direction: rtl;
  font-family: inherit;
}
.olp-modal.olp-active { opacity: 1; visibility: visible; }
.olp-modal-content {
  position: relative;
  isolation: isolate;
  width: min(100%, 430px);
  max-width: 100%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  margin: auto;
  padding: clamp(22px, 5vw, 32px);
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 20px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 24px 75px rgba(15, 23, 42, .22);
  text-align: center;
  transform: translateY(8px) scale(.99);
  opacity: 0;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.olp-modal.olp-active .olp-modal-content { transform: translateY(0) scale(1); opacity: 1; }
.olp-modal.olp-style-square .olp-modal-content { border-radius: 4px; }
.olp-modal.olp-style-shadow .olp-modal-content { box-shadow: 10px 12px 0 rgba(15, 23, 42, .12), 0 24px 75px rgba(15, 23, 42, .2); }
.olp-header { display: flex; align-items: center; gap: 12px; min-height: 36px; margin: 0 0 22px; }
.olp-modal-title { flex: 1; margin: 0; color: #111827; font-size: clamp(17px, 4vw, 20px); line-height: 1.5; font-weight: 700; text-align: right; }
.olp-close {
  display: inline-flex;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.olp-close:hover, .olp-close:focus-visible { color: #0f172a; background: #e2e8f0; }
.preview-logo { display: block; width: auto; max-width: 68px; max-height: 42px; object-fit: contain; }
.olp-phone, .olp-otp-simple {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0 0 12px;
  padding: 13px 15px;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  outline: 0;
  background: #fff;
  color: #0f172a;
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  direction: ltr;
  text-align: center;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.olp-phone { direction: ltr; }
.olp-phone::placeholder, .olp-otp-simple::placeholder { color: #94a3b8; opacity: 1; }
.olp-phone:focus, .olp-otp-simple:focus { border-color: var(--olp-brand-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--olp-brand-color) 15%, transparent); }
.olp-message { display: none; margin: 10px 0 14px; font-size: 13px; line-height: 1.8; color: #64748b; overflow-wrap: anywhere; }
.olp-message.is-error { color: #b42318; }
.olp-message.is-success { color: #15803d; }
.olp-send-otp-button, .olp-verify-otp-button, .custom-button-v1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--olp-brand-color, #ef4056);
  color: var(--olp-brand-contrast, #fff);
  text-align: center;
  text-decoration: none;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}
.olp-send-otp-button, .olp-verify-otp-button { width: 100%; }
.olp-send-otp-button:hover, .olp-verify-otp-button:hover, .custom-button-v1:hover { filter: brightness(.96); color: var(--olp-brand-contrast, #fff); }
.olp-send-otp-button:active, .olp-verify-otp-button:active, .custom-button-v1:active { transform: translateY(1px); }
.olp-send-otp-button:focus-visible, .olp-verify-otp-button:focus-visible, .custom-button-v1:focus-visible { outline: 3px solid color-mix(in srgb, var(--olp-brand-color) 32%, transparent); outline-offset: 3px; }
.olp-send-otp-button:disabled, .olp-verify-otp-button:disabled, .custom-button-v1:disabled { opacity: .58; cursor: not-allowed; transform: none; }
#olp-otp-timer, .olp-otp-timer { display: block; margin: 9px 0 2px; color: #64748b; font-size: 12px; line-height: 1.7; }
.otp-display { margin-top: 14px; }
.otp-input-container { display: flex; align-items: center; justify-content: center; gap: clamp(7px, 2vw, 12px); direction: ltr; margin: 12px 0 16px; }
.otp-input {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: 56px;
  height: clamp(46px, 12vw, 58px);
  padding: 4px;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  outline: 0;
  background: #f8fafc;
  color: #0f172a;
  font: inherit;
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  direction: ltr;
  appearance: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.otp-input:focus { border-color: var(--olp-brand-color); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--olp-brand-color) 15%, transparent); }
.otp-display-method { display: none; }
.olp-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  border-radius: inherit;
  background: rgba(255, 255, 255, .88);
  pointer-events: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.olp-loading-overlay[hidden] { display: none !important; }
.olp-diamond-loader { display: flex; align-items: center; justify-content: center; gap: 5px; }
.olp-diamond-loader span { width: 7px; height: 7px; border-radius: 2px; background: var(--olp-brand-color); transform: rotate(45deg); animation: olp-diamond-pulse .85s ease-in-out infinite; }
.olp-diamond-loader span:nth-child(2) { animation-delay: .12s; }
.olp-diamond-loader span:nth-child(3) { animation-delay: .24s; }
.olp-loading-text { color: #475569; font-size: 13px; }
@keyframes olp-diamond-pulse { 0%,100% { opacity: .35; transform: rotate(45deg) scale(.82); } 50% { opacity: 1; transform: rotate(45deg) scale(1); } }
.olp-open-popup { width: auto; max-width: 100%; }
.olp-open-popup svg { width: 19px; height: 19px; }
.olp-modal .pulse { animation: none; }
@media (max-width: 480px) {
  .olp-modal { align-items: center; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .olp-modal-content { width: 100%; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); padding: 22px 18px; border-radius: 18px; }
  .olp-header { margin-bottom: 18px; }
  .otp-input-container { gap: 7px; }
  .otp-input { border-radius: 9px; font-size: 19px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .olp-modal { align-items: flex-start; }
  .olp-modal-content { margin: 0 auto; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .olp-modal, .olp-modal-content, .olp-close, .olp-phone, .olp-otp-simple, .otp-input, .olp-send-otp-button, .olp-verify-otp-button, .custom-button-v1 { transition: none !important; animation: none !important; }
  .olp-diamond-loader span { animation: none !important; }
}

.olp-modal .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }