/* داروخانه دکتر شجیعی - calm, minimal look (soft sage green, white header, off-white page) on Universal Theme variables */
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap");
html:root, html:root body {
  --ut-base-font-family: "Vazirmatn", system-ui, sans-serif;
  --ut-palette-primary: #00D170;
  --ut-palette-primary-contrast: #ffffff;
  --ut-palette-primary-alt: #00A659;
  --ut-palette-primary-shade: #E6FAF0;
  --ut-palette-primary-text: #00A659;
  --ut-palette-primary-alt-text: #ffffff;
  --ut-header-background-color: #ffffff;
  --ut-header-text-color: #1E3A2F;
  --ut-header-box-shadow: 0 1px 0 #E6ECE9;
  --ut-body-background-color: #F7F8F6;
  --ut-link-text-color: #00A659;
  --ut-focus-outline-color: #00D170;
  --ut-navtabs-background-color: #ffffff;
  --ut-navtabs-item-text-color: #7A8A83;
  --ut-navtabs-item-active-text-color: #00A659;
  --ut-navtabs-item-active-background-color: #ffffff;
  /* tapped / hovered tab kept green on white (2026-10-08: tabs turned white-on-white on tap) */
  --ut-navtabs-text-color: #7A8A83;
  --ut-navtabs-item-hover-text-color: #00A659;
  --ut-navtabs-item-hover-background-color: #ffffff;
  /* bottom tabs on phones: label 12 -> 13 px, icon 14 -> 18 px, bar height unchanged (2026-10-08) */
  --ut-xs-navtabs-item-font-size: 13px;
  --ut-navtabs-icon-size: 18px;
  --a-cv-icon-background-color: #E6FAF0;
  --a-cv-icon-text-color: #00A659;
  --a-cv-border-radius: 16px;
  --ut-region-border-radius: 16px;
  --ut-component-border-radius: 12px;
  --a-button-border-radius: 12px;
  /* focused fields: brand green instead of the theme blue */
  --a-field-input-focus-border-color: #00D170;
  --a-field-input-state-background-color: #ffffff;
  --a-field-input-focus-background-color: #ffffff;
  --ut-field-input-focus-icon-color: #00A659;
  --ut-field-input-icon-background-color: #E6FAF0;
}

/* hot buttons + the selected pill of radio button groups: Vita hard-codes blue for these, use the brand green */
html body .t-Button--hot, html body .ui-button--hot,
html body .t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked + label {
  --a-button-background-color: #00D170;
  --a-button-text-color: #ffffff;
  --a-button-hover-background-color: #00A659;
  --a-button-active-background-color: #00964F;
}

/* choice pills (prescription type, insurer): icon on top, title, caption */
/* ONE choice style for the whole mobile app (type, insurer, formula kind): icon beside the text, title + small caption, compact */
html body .rx-choice .apex-item-group--rc label { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center !important; justify-content: start !important; text-align: start; min-height: 56px !important; padding: 8px 12px !important; white-space: normal; line-height: 1.4; }
html body .rx-choice .rx-opt-ic { grid-row: 1 / span 2; font-size: 22px; width: 26px; text-align: center; }
html body .rx-choice .rx-opt-t { font-weight: 700; font-size: 14px; }
html body .rx-choice .rx-opt-t:only-of-type, html body .rx-choice .rx-opt-ic + .rx-opt-t:last-child { grid-row: 1 / span 2; }
html body .rx-choice .rx-opt-d { font-size: 11.5px; opacity: .75; }


/* formula catalog: brand chips (separate rounded pills, scroll sideways) + model cards with -/+ */
html body .rx-scroll .apex-item-grid-row, html body .rx-scroll .apex-item-group--rc { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 4px 2px 10px; scrollbar-width: none; }
html body .rx-scroll .apex-item-option { flex: 0 0 auto; position: relative; }
html body .rx-scroll .apex-item-option input { left: 0; right: auto; top: 0; }
html body .t-Region-body .container:has(.rx-scroll), html body .t-Region-body .container:has(.rx-hscroll) { overflow: clip; }
html body .rx-scroll .apex-item-option label { border-radius: 999px !important; border: 1px solid #DCE6E1 !important; background: #fff; padding: 8px 18px; font-weight: 600; color: #00A659; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
html body .rx-scroll .apex-item-option input:checked + label { background: #00D170; color: #fff; border-color: #00D170 !important; }
html body .rx-hscroll .a-CardView-items { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 12px; padding-bottom: 8px; scroll-snap-type: x mandatory; }
html body .rx-hscroll .a-CardView-item { flex: 0 0 82%; scroll-snap-align: center; }
html body .rx-hscroll .a-CardView-iconWrap { width: 100%; justify-content: center; }
html body .rx-hscroll .a-CardView-icon, html body .rx-hscroll .a-CardView-iconWrap img { width: 200px; height: 200px; object-fit: contain; background: transparent; border-radius: 0; }
html body .rx-hscroll .a-CardView-title { font-weight: 600; font-size: 13px; text-align: center; }
html body .rx-hscroll .a-CardView-subTitle { text-align: center; color: #00A659; font-weight: 600; font-size: 12px; }
html body .rx-hscroll .a-CardView-actions { justify-content: center; gap: 12px; }
html body .rx-hscroll .a-CardView-actions .t-Button { min-width: 44px; font-size: 18px; border-radius: 999px; }

/* field icons (login mobile/code fields): the theme sets blue on the field container itself */
html body .t-Form-fieldContainer, html body .t-Form-fieldContainer--large,
html body .t-Form-fieldContainer--floatingLabel.is-active, html body .t-Form-fieldContainer--floatingLabel:focus-within {
  --ut-field-input-icon-background-color: #E6FAF0;
  --ut-field-input-icon-color: #00A659;
  --ut-field-input-focus-icon-color: #00A659;
}

/* home: 2 x 2 tiles, icon beside the text (same rule as the rest of the app) */
html body .rx-tiles .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
html body .rx-tiles .a-CardView { min-height: 0; }
html body .rx-tiles .a-CardView-title { font-size: 14px; }
html body .rx-tiles .a-CardView-subTitle { font-size: 11.5px; }

/* app-wide polish (UX review 2026-10-07) */
html body .t-Footer { padding-block: 6px !important; font-size: 11px; text-align: center; }   /* slim copyright footer */
html body .t-Footer-top, html body .t-Footer-topButton { display: none !important; }
html body .t-Header-logo-link { white-space: normal; font-size: 15px; line-height: 1.3; }  /* pharmacy name not cut on phones */
html body .rx-choice .rx-opt-t { font-size: 13px; }                     /* insurer names fit in one line more often */
html body #MyRequests .a-ContentRow-misc { font-size: 20px; font-weight: 800; color: var(--ut-palette-primary); }  /* pickup code */
/* slim spacing everywhere (approved on the formula page) */
html body .t-Body-content .t-Region { margin-bottom: 8px; }
html body .t-Region-header { padding-block: 6px; }
html body .t-Region-body { padding-block: 6px; }
html body .t-Form-fieldContainer { padding-block: 2px; }
html body .t-Form-labelContainer { padding-top: 2px; padding-bottom: 0; }
html body .t-Header-logo-link .apex-logo-text { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; line-height: 1.25; }

/* UX pass 2026-10-08 */
html body .t-Header-branding { justify-content: center; }
html body .t-Header-logo { flex: 1 1 auto; display: flex; justify-content: center; }
html body .t-Header-logo-link, html body .t-Header-logo-link .apex-logo-text { white-space: nowrap !important; font-size: 16px; font-weight: 700; color: #00A659; }
html body .t-Header-logo-link .apex-logo-img { height: 28px; width: 28px; margin-inline-end: 8px; }
html body #rxHero .t-HeroRegion-icon { background: url(logo.svg) center / contain no-repeat !important; color: transparent !important; box-shadow: none !important; }
html body #rxHero .t-HeroRegion-icon::before { visibility: hidden; }
html body .rx-pickup { text-align: center; padding: 4px 0; }
html body .rx-pickup-l { font-size: 13px; color: #7A8A83; margin-bottom: 2px; }
html body .rx-pickup-c { font-size: 36px; font-weight: 800; letter-spacing: 6px; line-height: 1.2; color: #00A659; direction: ltr; }
html body .rx-pickup-h { font-size: 11.5px; color: #7A8A83; margin-top: 2px; }
html body .rx-lines .t-Form-labelContainer { display: none; }
html body .rx-lines .display_only { white-space: pre-line; line-height: 2; font-size: 13.5px; text-align: start; }
html body .t-ButtonRegion-wrap { flex-wrap: wrap; gap: 8px; }
html body .t-ButtonRegion-col { flex: 1 1 auto; }
html body .t-ButtonRegion-col--next .t-ButtonRegion-buttons { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
html body .t-NavTabs-label { white-space: nowrap; overflow: visible; text-overflow: clip; }
html body .rx-steps ol { margin: 6px 0; padding-inline-start: 20px; line-height: 2; }
html body .rx-steps-f { display: block; color: #00A659; font-size: 12.5px; font-weight: 600; }
html body .t-Report-pagination { display: none; }   /* small lists: no "1 - 2" footer */
html body .t-Header-branding { position: relative; }
html body .t-Header-logo { grid-column: 1 / -1; grid-row: 1; justify-self: stretch; }
html body .t-Header-navBar { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); }
html body .t-Header-controls { position: absolute; inset-inline-start: 4px; top: 50%; transform: translateY(-50%); }
html body #rxHero .t-HeroRegion-col--icon, html body #rxHero .t-HeroRegion-icon { display: none !important; }   /* no logo beside the hero title (user 2026-10-08) */

/* v2 2026-10-08: QR, timeline, install banner */
html body .rx-qr { display: block; margin: 8px auto 0; width: 120px; height: 120px; image-rendering: pixelated; }
html body .rx-qr[src$="base64,"] { display: none; }
html body #rxInstall { display: none; }
html body #rxInstall.is-on, html body #rxInstall.is-ios { display: block; margin-bottom: 8px; }
html body .rx-install { display: none; align-items: center; gap: 10px; background: #E9F8F0; border: 1px solid #BFE9D3; border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.7; }
html body #rxInstall.is-on .rx-install { display: flex; }
html body .rx-install > div { flex: 1; }
html body .rx-install-ic { font-size: 28px; color: #00A659; }
html body .rx-install-ios { display: none; background: #E9F8F0; border: 1px solid #BFE9D3; border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.8; }
html body #rxInstall.is-ios .rx-install-ios { display: block; }
html body .rx-timeline .t-Timeline-avatar, html body .rx-timeline .t-Timeline-user { display: none; }

/* Vazirmatn (self-hosted, OFL) 2026-10-09 */
@font-face { font-family: "Vazirmatn"; src: url(Vazirmatn-wght.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
html body, html body button, html body input, html body select, html body textarea { font-family: "Vazirmatn", Tahoma, sans-serif; }
html body .fa, html body [class*=" fa-"] { font-family: "Font APEX", "Font APEX Small", FontAwesome !important; }

/* phase 3 2026-10-09 */
html body .rx-ans { font-weight: 700; font-size: 13px; }
html body .rx-ans-y { color: #00A659; }
html body .rx-ans-n { color: #C0392B; }
html body .rx-family-link { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #DCE6E1; border-radius: 12px; padding: 12px; margin-bottom: 8px; color: #1F2D27; font-weight: 700; text-decoration: none; }
html body .rx-family-link small { flex: 1; font-weight: 400; color: #7A8A83; font-size: 12px; }
html body .rx-family-link .fa-users { color: #00A659; font-size: 20px; }
html body #P9_TIMES .apex-item-option { margin: 2px 0; }

/* pharmacist chat (2026-10-10) */
html body .rx-chat .t-Comments { max-height: 58vh; overflow-y: auto; padding: 8px 4px; background: #F4F8F6; border-radius: 12px; }
html body .rx-chat .t-Comments-item { display: flex; gap: 8px; margin: 6px 0; align-items: flex-end; }
html body .rx-chat .t-Comments-item.rx-me { flex-direction: row-reverse; }
html body .rx-chat .t-Comments-body { max-width: 78%; background: #fff; border: 1px solid #DCE6E1; border-radius: 14px 14px 14px 4px; padding: 8px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
html body .rx-chat .rx-me .t-Comments-body { background: #E3F6EC; border-color: #BFE9D3; border-radius: 14px 14px 4px 14px; }
html body .rx-chat .t-Comments-comment { font-size: 14px; line-height: 1.9; word-break: break-word; }
html body .rx-chat .t-Comments-info { font-size: 11px; color: #7A8A83; }
html body .rx-chat .t-Comments-icon .t-Comments-userIcon, html body .rx-chat .t-Comments-userIcon { width: 30px; height: 30px; line-height: 30px; font-size: 13px; border-radius: 50%; }
html body .rx-chat .rx-av-s .t-Comments-userIcon, html body .rx-chat .t-Comments-userIcon.rx-av-s { background: #00A659; color: #fff; }
html body .rx-chat .rx-av-c .t-Comments-userIcon, html body .rx-chat .t-Comments-userIcon.rx-av-c { background: #DCE6E1; color: #1F2D27; }
html body .rx-chat-img { display: block; max-width: 220px; max-height: 220px; margin-top: 6px; border-radius: 10px; }
html body .rx-send { display: flex; gap: 8px; align-items: flex-end; }
html body .rx-chat-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: #4F5E57; }
html body .rx-chat-head b { color: #1F2D27; font-size: 14px; }

/* camera button under image uploads (phm.camera.js) */
.apex-item-wrapper--image-upload .t-Form-itemWrapper { flex-wrap: wrap; }   /* button on its own row under the dropzone */
.apex-item-wrapper--image-upload a-file-upload { flex: 1 1 100%; min-width: 0; }
.phm-camera-btn { flex: 1 1 100%; margin-top: 8px; min-height: 44px; font-size: 15px; }

/* PWA install entry (nav bar): show its text next to the icon on phones too (user 1405/07/24) */
html body .a-pwaInstall .t-Button-label { display: inline-block !important; margin-inline-start: 4px; font-weight: 600; }