@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap'); /** * Esim Device Checker — Frontend styles. * Colors/radius/speed are driven by CSS custom properties printed in * from Settings (see Frontend\Assets::print_custom_properties()), * so this file stays static/cacheable while remaining admin-customizable. * * Design language: minimal. Flat surfaces, one hairline border, no drop * shadows at rest, restrained color used only for state (primary action, * success, error). Motion is a quick fade/slide, nothing bouncy. */ .esim-dc-widget { --esim-dc-radius: 14px; --esim-dc-speed: 180ms; --esim-dc-border: rgba(15, 23, 42, 0.10); --esim-dc-border-strong: rgba(15, 23, 42, 0.18); --esim-dc-muted: #6b7280; --esim-dc-subtle-bg: rgba(15, 23, 42, 0.035); box-sizing: border-box; max-width: 560px; width: 100%; font-family: inherit; color: var(--esim-dc-color-text, #0f172a); -webkit-font-smoothing: antialiased; } .esim-dc-widget *, .esim-dc-widget *::before, .esim-dc-widget *::after { box-sizing: border-box; } .esim-dc-context-popup /* ---------- Dark theme ---------- */ .esim-dc-theme-dark { --esim-dc-border: rgba(255, 255, 255, 0.10); --esim-dc-border-strong: rgba(255, 255, 255, 0.22); --esim-dc-muted: #9aa4b2; --esim-dc-subtle-bg: rgba(255, 255, 255, 0.05); } .esim-dc-theme-dark .esim-dc-theme-dark .esim-dc-select, .esim-dc-theme-dark .esim-dc-search-input { background: transparent; border-color: var(--esim-dc-border-strong); color: #f1f5f9; } .esim-dc-theme-dark .esim-dc-tab { color: var(--esim-dc-muted); } .esim-dc-theme-dark .esim-dc-tab.is-active { color: #f1f5f9; } .esim-dc-theme-dark .esim-dc-tabs { border-bottom-color: var(--esim-dc-border); } .esim-dc-theme-dark .esim-dc-search-results { background: #131a2a; border-color: var(--esim-dc-border-strong); } .esim-dc-theme-dark .esim-dc-search-result:hover, .esim-dc-theme-dark .esim-dc-search-result.is-active { background: rgba(255, 255, 255, 0.06); } .esim-dc-theme-dark .esim-dc-qr-trigger { border-color: var(--esim-dc-border-strong); } @media (prefers-color-scheme: dark) { .esim-dc-theme-auto { --esim-dc-border: rgba(255, 255, 255, 0.10); --esim-dc-border-strong: rgba(255, 255, 255, 0.22); --esim-dc-muted: #9aa4b2; --esim-dc-subtle-bg: rgba(255, 255, 255, 0.05); } .esim-dc-theme-auto .esim-dc-theme-auto .esim-dc-select, .esim-dc-theme-auto .esim-dc-search-input { background: transparent; border-color: var(--esim-dc-border-strong); color: #f1f5f9; } .esim-dc-theme-auto .esim-dc-tab { color: var(--esim-dc-muted); } .esim-dc-theme-auto .esim-dc-tab.is-active { color: #f1f5f9; } .esim-dc-theme-auto .esim-dc-search-results { background: #131a2a; border-color: var(--esim-dc-border-strong); } } /* ---------- Header ---------- */ .esim-dc-widget-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; } .esim-dc-widget-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.3; } .esim-dc-qr-trigger { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--esim-dc-border-strong); color: var(--esim-dc-muted); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color var(--esim-dc-speed) ease, color var(--esim-dc-speed) ease; white-space: nowrap; } .esim-dc-qr-trigger:hover, .esim-dc-qr-trigger:focus-visible { border-color: var(--esim-dc-color-primary, #2563eb); color: var(--esim-dc-color-primary, #2563eb); } .esim-dc-qr-trigger .dashicons { font-size: 15px; width: 15px; height: 15px; } /* ---------- Tabs ---------- */ .esim-dc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--esim-dc-border); margin-bottom: 24px; } .esim-dc-tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 0 2px 12px; margin-right: 24px; font-size: 13px; font-weight: 500; color: var(--esim-dc-muted); cursor: pointer; transition: color var(--esim-dc-speed) ease, border-color var(--esim-dc-speed) ease; } .esim-dc-tab:hover, .esim-dc-tab:focus-visible { color: var(--esim-dc-color-text, #0f172a); } .esim-dc-tab.is-active { color: var(--esim-dc-color-text, #0f172a); border-bottom-color: var(--esim-dc-color-primary, #2563eb); } /* ---------- Panels & fields ---------- */ .esim-dc-panel { display: none; animation: esim-dc-fade-in var(--esim-dc-speed) ease; } .esim-dc-panel.is-active { display: block; } .esim-dc-field { margin-bottom: 16px; } .esim-dc-field label { display: block; font-size: 12px; font-weight: 500; color: var(--esim-dc-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.03em; } .esim-dc-select, .esim-dc-search-input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--esim-dc-border-strong); background: transparent; font-size: 14px; color: inherit; transition: border-color var(--esim-dc-speed) ease, box-shadow var(--esim-dc-speed) ease; } .esim-dc-select:hover, .esim-dc-search-input:hover { border-color: var(--esim-dc-color-primary, #2563eb); } .esim-dc-select:focus, .esim-dc-search-input:focus { outline: none; border-color: var(--esim-dc-color-primary, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } .esim-dc-select:disabled { opacity: 0.5; cursor: not-allowed; } .esim-dc-select:disabled:hover { border-color: var(--esim-dc-border-strong); } /* ---------- Search ---------- */ .esim-dc-search-field { position: relative; } .esim-dc-search-input-wrap { position: relative; } .esim-dc-search-input-wrap .dashicons { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--esim-dc-muted); pointer-events: none; font-size: 17px; width: 17px; height: 17px; } .esim-dc-search-input-wrap .esim-dc-search-input { padding-left: 40px; } .esim-dc-search-results { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: var(--esim-dc-color-bg, #fff); border: 1px solid var(--esim-dc-border-strong); border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); max-height: 280px; overflow-y: auto; } .esim-dc-search-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; } .esim-dc-search-result:hover, .esim-dc-search-result.is-active { background: var(--esim-dc-subtle-bg); } .esim-dc-search-result--empty { cursor: default; color: var(--esim-dc-muted); } .esim-dc-search-result--empty:hover { background: transparent; } .esim-dc-result-badge { flex-shrink: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; } .esim-dc-result-badge.is-yes { background: rgba(22, 163, 74, 0.12); color: #15803d; } .esim-dc-result-badge.is-no { background: rgba(220, 38, 38, 0.10); color: #b91c1c; } .esim-dc-theme-dark .esim-dc-result-badge.is-yes { background: rgba(34, 197, 94, 0.16); color: #4ade80; } .esim-dc-theme-dark .esim-dc-result-badge.is-no { background: rgba(248, 113, 113, 0.16); color: #f87171; } /* ---------- Buttons ---------- */ .esim-dc-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 13px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: opacity var(--esim-dc-speed) ease, background var(--esim-dc-speed) ease, border-color var(--esim-dc-speed) ease; } .esim-dc-btn-primary { background: var(--esim-dc-color-primary, #2563eb); color: #fff; } .esim-dc-btn-primary:hover, .esim-dc-btn-primary:focus-visible { opacity: 0.9; } .esim-dc-btn-primary:active { opacity: 0.8; } .esim-dc-btn-secondary { background: transparent; color: var(--esim-dc-color-text, #0f172a); border: 1px solid var(--esim-dc-border-strong); margin-top: 16px; } .esim-dc-btn-secondary:hover, .esim-dc-btn-secondary:focus-visible { border-color: var(--esim-dc-color-primary, #2563eb); color: var(--esim-dc-color-primary, #2563eb); } /* ---------- Result panel ---------- */ .esim-dc-result { margin-top: 24px; } .esim-dc-result-loading { text-align: center; padding: 28px; color: var(--esim-dc-muted); font-size: 13px; } .esim-dc-result-error { background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.18); color: #b91c1c; border-radius: 10px; padding: 14px 16px; font-size: 13px; } .esim-dc-result-card { text-align: center; border-radius: 12px; padding: 28px 22px; border: 1px solid transparent; animation: esim-dc-fade-in var(--esim-dc-speed) ease; } .esim-dc-result-card.is-compatible { background: rgba(22, 163, 74, 0.05); border-color: rgba(22, 163, 74, 0.20); } .esim-dc-result-card.is-not-compatible { background: rgba(220, 38, 38, 0.05); border-color: rgba(220, 38, 38, 0.18); } .esim-dc-result-icon { width: 44px; height: 44px; line-height: 44px; border-radius: 50%; font-size: 18px; font-weight: 700; margin: 0 auto 16px; } .is-compatible .esim-dc-result-icon { background: var(--esim-dc-color-success, #16a34a); color: #fff; } .is-not-compatible .esim-dc-result-icon { background: var(--esim-dc-color-error, #dc2626); color: #fff; } .esim-dc-result-heading { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 20px; } .esim-dc-result-details { text-align: left; margin: 0 0 4px; display: grid; gap: 1px; border-radius: 8px; overflow: hidden; background: var(--esim-dc-border); } .esim-dc-result-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--esim-dc-color-bg, #fff); font-size: 13px; } .esim-dc-theme-dark .esim-dc-result-row, .esim-dc-theme-auto .esim-dc-result-row { background: var(--esim-dc-color-bg-dark, #0b0f19); } .esim-dc-result-row dt { font-weight: 500; color: var(--esim-dc-muted); } .esim-dc-result-row dd { margin: 0; font-weight: 600; } .esim-dc-result-notes { margin-top: 14px; font-size: 13px; color: var(--esim-dc-muted); text-align: left; background: transparent; border: 1px dashed var(--esim-dc-border-strong); border-radius: 8px; padding: 10px 12px; } /* ---------- QR Modal ---------- * Hardened with !important: this modal is moved to a direct child of * at runtime (see frontend.js), but themes can still ship very * specific selectors (e.g. `.entry-content > div`) that beat a plain * class selector. !important on the load-bearing positioning/sizing * rules keeps the modal correct regardless of theme CSS. */ .esim-dc-qr-modal { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; max-width: none !important; z-index: 100000 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; } .esim-dc-qr-modal-backdrop { position: absolute !important; inset: 0 !important; background: rgba(15, 23, 42, 0.45); animation: esim-dc-fade-in var(--esim-dc-speed) ease; } .esim-dc-qr-modal-card { position: relative !important; background: var(--esim-dc-color-bg, #fff); border: 1px solid var(--esim-dc-border); border-radius: var(--esim-dc-radius, 14px); padding: 32px; max-width: 340px !important; width: 100% !important; flex: none !important; text-align: center; animation: esim-dc-fade-slide-up var(--esim-dc-speed) ease; } .esim-dc-qr-modal-card h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; } .esim-dc-qr-modal-card p { font-size: 13px; color: var(--esim-dc-muted); margin: 0; } .esim-dc-qr-modal-close { position: absolute; top: 12px; right: 12px; background: transparent; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--esim-dc-muted); padding: 6px; border-radius: 6px; transition: color var(--esim-dc-speed) ease; } .esim-dc-qr-modal-close:hover { color: var(--esim-dc-color-text, #0f172a); } /* ---------- Focus visibility (WCAG 2.2 2.4.11 / 2.4.7) ---------- */ .esim-dc-widget button:focus-visible, .esim-dc-widget a:focus-visible, .esim-dc-widget input:focus-visible, .esim-dc-widget select:focus-visible, .esim-dc-qr-modal button:focus-visible, .esim-dc-search-result:focus-visible { outline: 2px solid var(--esim-dc-color-primary, #2563eb); outline-offset: 2px; } .esim-dc-qr-code-holder { margin: 20px auto 0; min-height: 200px; display: flex; align-items: center; justify-content: center; } .esim-dc-qr-code-holder svg { max-width: 100%; height: auto; border-radius: 8px; } .esim-dc-qr-loading { color: var(--esim-dc-muted); font-size: 13px; } .esim-dc-qr-submitted-note { background: transparent; border-color: rgba(37, 99, 235, 0.30); color: var(--esim-dc-color-primary, #2563eb); } body.esim-dc-modal-open { overflow: hidden; } /* ---------- Animations ---------- */ @keyframes esim-dc-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes esim-dc-fade-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .esim-dc-panel, .esim-dc-result-card, .esim-dc-qr-modal-backdrop, .esim-dc-qr-modal-card { animation: none !important; } } /* ---------- Responsive ---------- */ @media (max-width: 480px) { .esim-dc-widget-header { flex-direction: column; align-items: flex-start; gap: 10px; } .esim-dc-result-row { flex-direction: column; align-items: flex-start; gap: 2px; } } /* ---------- WooCommerce integration ---------- */ .esim-dc-woocommerce-checker { margin: 24px 0; max-width: 560px; } .esim-dc-woocommerce-checkout { margin-bottom: 32px; } .esim-dc-checkout-notice { color: #b91c1c; font-size: 12px; margin-top: 8px; } /* eSIM Device Checker: theme-independent modal visibility fix */ .esim-dc-qr-modal[hidden], .esim-dc-qr-modal[hidden="hidden"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .esim-dc-qr-modal:not([hidden]) { display: flex !important; visibility: visible; opacity: 1; pointer-events: auto; position: fixed !important; inset: 0 !important; z-index: 999999 !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 24px !important; background: rgba(15, 23, 42, 0.58) !important; font-family: 'Space Grotesk', sans-serif !important; } .esim-dc-qr-modal *, .esim-dc-qr-modal *::before, .esim-dc-qr-modal *::after { box-sizing: border-box !important; } .esim-dc-qr-modal .esim-dc-modal-content, .esim-dc-qr-modal .modal-content, .esim-dc-qr-modal > div { font-family: 'Space Grotesk', sans-serif !important; } /* eSIM Device Checker brand */ .esim-dc-qr-modal button, .esim-dc-qr-modal .button, .esim-dc-qr-modal .esim-dc-button { font-family: 'Space Grotesk', sans-serif !important; } .esim-dc-qr-modal .esim-dc-primary, .esim-dc-qr-modal button[type="button"]:not(.esim-dc-close) { --esim-brand-color: #BFE722; } /* ================================================================ * eSIM Device Checker — Plugin-owned frontend design * Intentionally scoped to .esim-dc-widget so Astra/theme styles cannot * change the visual language of the checker. * Brand: #BFE722 | Font: Space Grotesk * ================================================================ */ .esim-dc-widget { --esim-dc-brand: #BFE722 !important; --esim-dc-brand-dark: #9fc400 !important; --esim-dc-text: #14213d !important; --esim-dc-muted-ui: #667085 !important; --esim-dc-line: #dfe3e8 !important; --esim-dc-radius-ui: 12px !important; font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; color: var(--esim-dc-text) !important; max-width: 560px !important; width: 100% !important; line-height: 1.5 !important; } .esim-dc-widget, .esim-dc-widget * { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } /* Header */ .esim-dc-widget-header { margin-bottom: 22px !important; gap: 16px !important; } .esim-dc-widget-title { margin: 0 !important; padding: 0 !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.025em !important; color: var(--esim-dc-text) !important; } /* Phone button */ .esim-dc-widget .esim-dc-qr-trigger { appearance: none !important; -webkit-appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; min-height: 38px !important; margin: 0 !important; padding: 8px 15px !important; border: 1px solid #d9dde4 !important; border-radius: 999px !important; background: #fff !important; color: #17233d !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; } .esim-dc-widget .esim-dc-qr-trigger:hover, .esim-dc-widget .esim-dc-qr-trigger:focus-visible { border-color: #c5cbd5 !important; background: #fff !important; color: #17233d !important; } .esim-dc-widget .esim-dc-qr-trigger .dashicons { color: #17233d !important; } /* Tabs */ .esim-dc-widget .esim-dc-tabs { display: flex !important; align-items: flex-end !important; gap: 26px !important; margin: 0 0 23px !important; padding: 0 !important; border-bottom: 1px solid #e5e7eb !important; } .esim-dc-widget .esim-dc-tab { appearance: none !important; -webkit-appearance: none !important; position: relative !important; width: auto !important; margin: 0 !important; padding: 0 3px 12px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #667085 !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.2 !important; white-space: nowrap !important; } .esim-dc-widget .esim-dc-tab:hover, .esim-dc-widget .esim-dc-tab:focus-visible, .esim-dc-widget .esim-dc-tab.is-active { background: transparent !important; color: #17233d !important; } .esim-dc-widget .esim-dc-tab.is-active { border-bottom-color: var(--esim-dc-brand) !important; font-weight: 600 !important; } /* Fields */ .esim-dc-widget .esim-dc-field { margin: 0 0 17px !important; } .esim-dc-widget .esim-dc-field label { margin: 0 0 7px !important; padding: 0 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; color: #17233d !important; } .esim-dc-widget .esim-dc-select, .esim-dc-widget .esim-dc-search-input { appearance: none !important; -webkit-appearance: none !important; display: block !important; width: 100% !important; min-height: 44px !important; height: 44px !important; margin: 0 !important; padding: 10px 40px 10px 14px !important; border: 1px solid #d9dde4 !important; border-radius: 10px !important; background-color: #fff !important; color: #17233d !important; font-size: 14px !important; font-weight: 400 !important; line-height: 22px !important; box-shadow: 0 1px 2px rgba(16,24,40,.03) !important; } .esim-dc-widget .esim-dc-select { background-image: linear-gradient(45deg, transparent 50%, #17233d 50%), linear-gradient(135deg, #17233d 50%, transparent 50%) !important; background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; } .esim-dc-widget .esim-dc-select:focus, .esim-dc-widget .esim-dc-search-input:focus { outline: none !important; border-color: var(--esim-dc-brand) !important; box-shadow: 0 0 0 3px rgba(191, 231, 34, .18) !important; } .esim-dc-widget .esim-dc-select:hover, .esim-dc-widget .esim-dc-search-input:hover { border-color: #c5cbd5 !important; } .esim-dc-widget .esim-dc-select:disabled { background-color: #f8fafc !important; color: #98a2b3 !important; opacity: 1 !important; } /* Main CTA */ .esim-dc-widget .esim-dc-btn { appearance: none !important; -webkit-appearance: none !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 44px !important; height: 44px !important; margin: 2px 0 0 !important; padding: 10px 20px !important; border: 0 !important; border-radius: 999px !important; background: var(--esim-dc-brand) !important; color: #17233d !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: 0 6px 14px rgba(191, 231, 34, .22) !important; cursor: pointer !important; } .esim-dc-widget .esim-dc-btn:hover, .esim-dc-widget .esim-dc-btn:focus-visible { background: var(--esim-dc-brand-dark) !important; color: #17233d !important; box-shadow: 0 7px 16px rgba(159, 196, 0, .24) !important; opacity: 1 !important; } /* Remove theme typography margins from plugin content */ .esim-dc-widget h1, .esim-dc-widget h2, .esim-dc-widget h3, .esim-dc-widget h4, .esim-dc-widget p, .esim-dc-widget ul, .esim-dc-widget ol, .esim-dc-widget form, .esim-dc-widget label { box-sizing: border-box !important; } .esim-dc-widget form { margin: 0 !important; } /* Mobile */ @media (max-width: 600px) { .esim-dc-widget-header { align-items: flex-start !important; flex-wrap: wrap !important; } .esim-dc-widget-title { font-size: 19px !important; } .esim-dc-widget .esim-dc-qr-trigger { min-height: 36px !important; font-size: 12px !important; } .esim-dc-widget .esim-dc-tabs { gap: 18px !important; } } /* ---------- Theme isolation / modal state ---------- */ .esim-dc-qr-modal[hidden] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .esim-dc-qr-modal:not([hidden]) { display: flex !important; position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 2147483000 !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 24px !important; background: rgba(15, 23, 42, .58) !important; font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } .esim-dc-qr-modal-card, .esim-dc-qr-modal-card * { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; box-sizing: border-box !important; } .esim-dc-widget select.esim-dc-select { cursor: pointer !important; } .esim-dc-widget select.esim-dc-select:disabled { cursor: not-allowed !important; } /* Checker version shown on every completed compatibility result */ .esim-dc-result-details .esim-dc-checker-version dd, .esim-dc-result-details dt:last-of-type + dd { font-weight: 600; } /* Free-text model check / not-in-supported-list state */ .esim-dc-search-submit { margin-top: 12px; } .esim-dc-result-card.is-not-in-list .esim-dc-result-not-supported-message { max-width: 560px; margin: 10px auto 0; font-size: 14px; line-height: 1.65; color: var(--esim-dc-muted, #64748b); } .esim-dc-result-card.is-not-in-list .esim-dc-result-icon { background: rgba(220, 38, 38, 0.10); color: #b91c1c; } .esim-dc-theme-dark .esim-dc-result-card.is-not-in-list .esim-dc-result-icon { background: rgba(248, 113, 113, 0.16); color: #f87171; } /* Unknown model search state */ .esim-dc-search-result--empty { white-space: normal !important; line-height: 1.5 !important; cursor: pointer !important; padding: 14px 18px !important; } .esim-dc-search-result--empty:hover, .esim-dc-search-result--empty:focus { outline: none; } /* Standalone QR shortcode */ .esim-dc-qr-standalone { width: 100%; } .esim-dc-qr-standalone-inner { padding: 0; } .esim-dc-qr-standalone .esim-dc-widget-header { margin: 0; } .esim-dc-qr-standalone .esim-dc-qr-trigger { margin: 0; } /* Standalone [esim_qr] shortcode: button only */ .esim-dc-qr-standalone .esim-dc-qr-standalone-inner { padding: 0; background: transparent; border: 0; border-radius: 0; } .esim-dc-qr-standalone-button-wrap { display: inline-flex; align-items: center; } .esim-dc-qr-standalone-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; } .esim-dc-qr-standalone-trigger i { font-size: 14px; line-height: 1; } /* QR shortcode: Check compatibility button */ .esim-dc-qr-button, .esim-dc-qr-button:hover, .esim-dc-qr-button:focus, .esim-dc-qr-button:active { background: #C0E924 !important; background-color: #C0E924 !important; color: #000000 !important; } .esim-dc-qr-button *, .esim-dc-qr-button:hover *, .esim-dc-qr-button:focus *, .esim-dc-qr-button:active * { color: #000000 !important; } /* QR shortcode compatibility button icon */ .esim-dc-qr-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .esim-dc-qr-button .esim-dc-qr-button-icon { width: 20px; height: 20px; flex: 0 0 20px; display: block; } /* v2.1.3: standalone QR Check compatibility button — force theme-independent styling */ .esim-dc-qr-standalone .esim-dc-qr-check-button, .esim-dc-qr-standalone .esim-dc-qr-check-button:hover, .esim-dc-qr-standalone .esim-dc-qr-check-button:focus, .esim-dc-qr-standalone .esim-dc-qr-check-button:active { background: #C0E924 !important; background-color: #C0E924 !important; color: #000000 !important; border-color: #C0E924 !important; box-shadow: none !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; } .esim-dc-qr-standalone .esim-dc-qr-check-button .esim-dc-qr-check-icon { width: 20px !important; height: 20px !important; min-width: 20px !important; display: inline-block !important; flex: 0 0 20px !important; } .esim-dc-qr-standalone .esim-dc-qr-check-button .esim-dc-qr-check-icon path { stroke: #000000 !important; } .esim-dc-qr-standalone .esim-dc-qr-trigger-text { color: #000000 !important; }