/* "Vezi prețuri" gate — matches the clinic light theme (clinique-light.css). */ .smx-pl-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(12, 22, 38, 0.62); backdrop-filter: blur(2px); } .smx-pl-box { width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 14px; padding: 28px 26px 22px; box-shadow: 0 24px 60px rgba(12, 22, 38, 0.28); font-family: inherit; color: #1d2b32; } .smx-pl-title { margin: 0 0 6px; font-size: 1.32rem; line-height: 1.25; color: #1d2b32; } .smx-pl-sub { margin: 0 0 18px; font-size: 0.95rem; line-height: 1.5; color: #4a5b70; } .smx-pl-field { display: block; margin-bottom: 13px; } .smx-pl-field > span { display: block; margin-bottom: 5px; font-size: 0.86rem; font-weight: 600; color: #3a4c63; } .smx-pl-field input { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid #cfd9e4; border-radius: 8px; font-size: 1rem; font-family: inherit; color: #1d2b32; background: #fff; } .smx-pl-field input:focus { outline: none; border-color: #1E6B5A; box-shadow: 0 0 0 3px rgba(30, 107, 90, 0.18); } .smx-pl-consent { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 14px; font-size: 0.84rem; line-height: 1.45; color: #4a5b70; cursor: pointer; } .smx-pl-consent input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: #1E6B5A; } .smx-pl-err { margin: 0 0 12px; padding: 9px 11px; border-radius: 7px; background: #fdeaea; color: #a11b1b; font-size: 0.87rem; line-height: 1.4; } .smx-pl-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .smx-pl-btn { flex: 1 1 auto; padding: 12px 20px; border: 0; border-radius: 8px; background: #1E6B5A; color: #fff; font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; } .smx-pl-btn:hover:not(:disabled) { background: #164F42; } .smx-pl-btn:disabled { opacity: 0.62; cursor: default; } .smx-pl-cancel { padding: 12px 16px; border: 0; background: none; color: #64748b; font-size: 0.92rem; font-family: inherit; cursor: pointer; text-decoration: underline; } /* * The in-page CTA. * * Shape and typography copied from the theme's own button (measured on the * live page: 50px radius, 25px/35px padding, 14px/700 uppercase, 1px * tracking) so it does not read as bolted on — but rendered as an OUTLINE, * because it sits directly under "Programează-te online". Two identical solid * green buttons would compete, and booking is the page's primary action; * the price list is the answer to a hesitation, not a rival call to action. */ .smx-price-cta { display: inline-block; padding: 20px 34px; border: 2px solid #1e6b5a; border-radius: 50px; background: transparent; color: #1e6b5a !important; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: background 0.16s ease, color 0.16s ease; } .smx-price-cta:hover, .smx-price-cta:focus { background: #1e6b5a; color: #fff !important; } @media (max-width: 480px) { .smx-pl-box { padding: 22px 18px 18px; } .smx-pl-actions { flex-direction: column-reverse; align-items: stretch; } .smx-pl-cancel { text-align: center; } } /* ── native variant ────────────────────────────────────────────── * Reported 04.08: on real phones the fields could not be focused. A fixed * overlay depends on no ancestor creating a containing block, and the mirrored * theme sets overflow:hidden on and transforms its panels. showModal() * puts the element in the browser's top layer, outside all of that. * These rules undo the UA's default dialog chrome and centre it. */ dialog.smx-pl-dialog { position: fixed; inset: 0; width: auto; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 20px; border: 0; background: transparent; overflow: auto; /* Centres the card and keeps the tap-outside area clickable. */ display: flex; align-items: center; justify-content: center; } dialog.smx-pl-dialog::backdrop { background: rgba(12, 22, 38, 0.62); backdrop-filter: blur(2px); } dialog.smx-pl-dialog:not([open]) { display: none; } /* 16px is the floor at which iOS does NOT zoom the page on focus. Set here as well as in mobile-ux.css so the gate never depends on another stylesheet. */ .smx-pl-field input, .smx-pl-consent input[type='checkbox'] { font-size: 16px; } .smx-pl-field input { /* A comfortable tap target; a miss here costs a lead. */ min-height: 46px; -webkit-appearance: none; appearance: none; } /* "Ai vrut cumva gmail.com?" — help, not a gate. */ .smx-pl-fix { color: #0f3d33; font-weight: 700; text-decoration: underline; cursor: pointer; margin-right: 10px; }