/* 15 SAR support story and privacy-preserving referral checkout. */
.medupro-support-story {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: clamp(1rem, 4vw, 3rem);
  margin-block: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--primary-color) 24%, var(--border-color));
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 8%, var(--background-primary)), var(--background-primary));
  box-shadow: 0 18px 44px color-mix(in srgb, var(--primary-color) 8%, transparent);
}
.medupro-support-story h2 { margin: .35rem 0 0; color: var(--text-primary); font-size: clamp(1.45rem, 3vw, 2.25rem); line-height: 1.2; }
.medupro-support-story-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.medupro-support-story-copy p { margin: 0; padding: 1rem; border: 1px solid var(--border-color); border-radius: 16px; background: color-mix(in srgb, var(--background-primary) 92%, transparent); color: var(--text-secondary); font-size: .86rem; line-height: 1.7; }
.medupro-support-story-copy strong { color: var(--text-primary); }
.medupro-referral-checkout { display: grid; gap: .65rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--border-color); border-radius: 16px; background: color-mix(in srgb, var(--primary-color) 4%, var(--background-primary)); }
.medupro-referral-checkout h3,
.medupro-referral-checkout p { margin: 0; }
.medupro-referral-checkout > p { color: var(--text-secondary); font-size: .75rem; line-height: 1.5; }
.medupro-referral-search,
.medupro-own-referral > div { display: flex; gap: .5rem; }
.medupro-referral-search input,
.medupro-own-referral input { min-width: 0; flex: 1; min-height: 44px; padding: .7rem .8rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--background-primary); color: var(--text-primary); }
.medupro-referral-search button,
.medupro-own-referral button { min-height: 44px; padding: .65rem .9rem; border: 0; border-radius: 10px; background: var(--text-primary); color: var(--background-primary); font-weight: 800; cursor: pointer; }
.medupro-referrer-results { display: grid; gap: .4rem; }
.medupro-referrer-results > button { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .7rem .8rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--background-primary); color: var(--text-primary); cursor: pointer; text-align: start; }
.medupro-referrer-results > button:hover,
.medupro-referrer-results > button:focus-visible { border-color: var(--primary-color); outline: 2px solid color-mix(in srgb, var(--primary-color) 30%, transparent); }
.medupro-referrer-results small,
.medupro-own-referral small { color: var(--text-secondary); }
.medupro-referrer-selected { padding: .65rem .75rem; border-radius: 10px; background: color-mix(in srgb, #16a34a 12%, var(--background-primary)); color: #15803d; font-weight: 800; }
.medupro-own-referral { display: grid; gap: .45rem; margin-top: .35rem; padding-top: .8rem; border-top: 1px solid var(--border-color); }
.medupro-own-referral > span { color: var(--text-secondary); font-size: .75rem; line-height: 1.45; }

/* Guided payment launchers and focused checkout dialog. */
.medupro-method-launchers { grid-template-columns: 1fr; gap: .65rem; }
.medupro-v2-payment .medupro-method-launchers > button {
  justify-content: flex-start;
  min-height: 68px;
  padding: .75rem .9rem;
  text-align: start;
}
.medupro-method-launchers > button > .material-symbols-outlined:first-child {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-color, #7c3aed) 10%, var(--background-primary, #fff));
  color: var(--primary-color, #7c3aed);
}
.medupro-method-launchers > button > span:not(.material-symbols-outlined) { display: grid; gap: .12rem; min-width: 0; }
.medupro-method-launchers strong { color: var(--text-primary, #172033); font-size: .78rem; }
.medupro-method-launchers small { color: var(--text-secondary, #64748b); font-size: .62rem; font-weight: 500; line-height: 1.35; }
.medupro-method-launchers > button > i { margin-inline-start: auto; color: var(--text-secondary, #64748b); font-size: 20px; font-style: normal; }
.medupro-method-launchers > button:hover,
.medupro-method-launchers > button:focus-visible { border-color: var(--primary-color, #7c3aed); outline: 2px solid color-mix(in srgb, var(--primary-color, #7c3aed) 24%, transparent); outline-offset: 2px; }

body.medupro-payment-modal-open { overflow: hidden; }
.medupro-payment-modal {
  position: fixed;
  inset: 0;
  z-index: 10800;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.medupro-payment-modal[hidden] { display: none; }
.medupro-payment-modal-backdrop { position: absolute; inset: 0; background: rgba(7, 10, 20, .78); backdrop-filter: blur(11px); }
.medupro-payment-modal > section {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(680px, 100%);
  max-height: min(92dvh, 840px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid color-mix(in srgb, var(--primary-color, #7c3aed) 24%, var(--border-color, #dbe2ea));
  border-radius: 28px;
  background: var(--background-primary, #fff);
  color: var(--text-primary, #172033);
  box-shadow: 0 36px 120px rgba(0, 0, 0, .4);
}
.medupro-payment-modal > section > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; }
.medupro-payment-modal-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: linear-gradient(135deg, rgba(249, 115, 22, .14), rgba(124, 58, 237, .16)); color: #7c3aed; }
.medupro-payment-modal header small { color: #f97316; font-size: .6rem; font-weight: 850; letter-spacing: .13em; }
.medupro-payment-modal header h2 { margin: .15rem 0; font-size: clamp(1.35rem, 4vw, 2rem); letter-spacing: -.035em; }
.medupro-payment-modal header p { margin: 0; color: var(--text-secondary, #64748b); font-size: .68rem; line-height: 1.5; }
#medupro-payment-close { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 50%; background: var(--background-secondary, #f8fafc); color: var(--text-primary, #172033); cursor: pointer; }
#medupro-payment-close:hover,
#medupro-payment-close:focus-visible { outline: 2px solid var(--primary-color, #7c3aed); outline-offset: 2px; }
.medupro-modal-method-tabs { margin: 1rem 0 .8rem; }
.medupro-modal-method-tabs button { min-height: 48px; }
.medupro-payment-modal .medupro-terms-check { align-items: flex-start; margin: 0; padding: .8rem; }
.medupro-payment-modal .medupro-terms-check input { flex: 0 0 auto; margin-top: .15rem; }
.medupro-payment-modal .medupro-payment-content { min-height: 150px; margin-top: .8rem; }
.medupro-payment-modal .medupro-payment-message,
.medupro-payment-modal .medupro-loading { min-height: 150px; }
.medupro-payment-modal .medupro-payment-status { margin-bottom: 0; }
.medupro-bankak-copy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; }
.medupro-bankak-copy-actions button { min-height: 42px; padding: .6rem .7rem; border: 1px solid var(--border-color, #dbe2ea); border-radius: 10px; background: var(--background-secondary, #f8fafc); color: var(--text-primary, #172033); font: inherit; font-size: .64rem; font-weight: 800; cursor: pointer; }
.medupro-bankak-copy-actions button:hover,
.medupro-bankak-copy-actions button:focus-visible { border-color: var(--primary-color, #7c3aed); outline: 2px solid color-mix(in srgb, var(--primary-color, #7c3aed) 25%, transparent); }
.medupro-payment-modal .medupro-bankak form > button { width: 100%; min-height: 48px; }
.medupro-localized-support { white-space: pre-line; }

html[dir="rtl"] .medupro-page,
html[dir="rtl"] .medupro-page button,
html[dir="rtl"] .medupro-page input,
html[dir="rtl"] .medupro-page select { font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
html[dir="rtl"] .medupro-demo-bar > span { margin-right: .35rem; margin-left: 0; }
html[dir="rtl"] .medupro-demo-bar > b { margin-right: auto; margin-left: 0; }
html[dir="rtl"] .medupro-demo-summary > div { right: auto; left: 2rem; }
html[dir="rtl"] .medupro-plan-popular { right: auto; left: 18px; }
html[dir="rtl"] .medupro-method-launchers > button > i,
html[dir="rtl"] .medupro-v2-primary > .material-symbols-outlined,
html[dir="rtl"] .medupro-v2-primary > span:last-child.material-symbols-outlined { transform: scaleX(-1); }
html[dir="rtl"] .medupro-payment-modal header,
html[dir="rtl"] .medupro-bankak,
html[dir="rtl"] .medupro-referral-checkout { text-align: right; }

@media (max-width: 760px) {
  .medupro-support-story,
  .medupro-support-story-copy { grid-template-columns: 1fr; }
  .medupro-referral-search,
  .medupro-own-referral > div { align-items: stretch; flex-direction: column; }
  .medupro-referral-search button,
  .medupro-own-referral button { width: 100%; }
  .medupro-page .medupro-v2-checkout {
    box-sizing: border-box;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
  .medupro-v2-summary,
  .medupro-v2-payment { min-width: 0; padding: 1rem; border-radius: 21px; }
  .medupro-payment-modal { place-items: end center; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .medupro-payment-modal > section { width: 100%; max-height: calc(100dvh - 16px); padding: 1rem; border-radius: 23px; }
  .medupro-payment-modal > section > header { grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; }
  .medupro-payment-modal-icon { width: 44px; height: 44px; border-radius: 13px; }
  .medupro-payment-modal header p { font-size: .63rem; }
  .medupro-modal-method-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
  .medupro-modal-method-tabs button { min-width: 0; min-height: 46px; padding: .45rem .25rem; font-size: .62rem; }
  .medupro-modal-method-tabs .material-symbols-outlined { font-size: 18px; }
  .medupro-payment-modal .medupro-terms-check { font-size: .61rem; line-height: 1.45; }
  .medupro-bankak-copy-actions { grid-template-columns: 1fr; }
  html[dir="rtl"] .medupro-demo-summary > div { right: auto; left: 1rem; }
}
