.wpayme-app{ --wpa-bg: #f6f7f9; --wpa-surface: #ffffff; --wpa-surface-muted: #f9fafb; --wpa-border: #e5e7eb; --wpa-border-strong: #d1d5db; --wpa-text: #111827; --wpa-text-muted: #6b7280; --wpa-text-faint: #9ca3af; --wpa-accent: #4f46e5; --wpa-accent-soft: #eef2ff; --wpa-success: #10b981; --wpa-success-soft: #ecfdf5; --wpa-warn: #f59e0b; --wpa-warn-soft: #fffbeb; --wpa-danger: #ef4444; --wpa-danger-soft: #fef2f2;  --wpa-rate-bg: #fffbeb; --wpa-rate-border: #fde68a; --wpa-star: #d8dbe0; --wpa-star-on: #f59e0b;  --wpa-brand-twilio: #f22f46; --wpa-brand-slack: #611f69; --wpa-brand-telegram: #1d8fc7; --wpa-brand-discord: #5865f2; --wpa-sidebar-w: 220px; --wpa-radius: 10px; --wpa-radius-sm: 8px; --wpa-radius-pill: 999px; --wpa-shadow: 0 1px 2px rgb(0 0 0 / 0.04); --wpa-shadow-lg: 0 10px 30px rgb(0 0 0 / 0.12); --wpa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}  .wpayme-app.wpayme-app--dark{ --wpa-bg: #0f1115; --wpa-surface: #171a21; --wpa-surface-muted: #1e222b; --wpa-border: #2a2f3a; --wpa-border-strong: #3a4150; --wpa-text: #e5e7eb; --wpa-text-muted: #9ca3af; --wpa-text-faint: #6b7280; --wpa-accent-soft: #1e1b4b; --wpa-success-soft: #052e23; --wpa-warn-soft: #2e2408; --wpa-danger-soft: #2d1215; --wpa-brand-slack: #d38ad8; --wpa-brand-telegram: #4fb8ea; --wpa-brand-discord: #8c95ff; --wpa-rate-bg: #2a2208; --wpa-rate-border: #4a3a10; --wpa-star: #4b5563; --wpa-star-on: #fbbf24; --wpa-shadow: 0 1px 2px rgb(0 0 0 / 0.4); --wpa-shadow-lg: 0 10px 30px rgb(0 0 0 / 0.5)}  .wpayme-app.wpayme-app--dark #wpbody-content, .wpayme-app.wpayme-app--dark #wpcontent{ background: var(--wpa-bg)} .wpayme-app #wpbody-content{ padding-bottom: 40px} .wpayme-app .wpayme-page, .wpayme-app #wpbody-content> .wrap{ font-family: var(--wpa-font); color: var(--wpa-text)}  .wpayme-app .wpayme-header + .wp-header-end{ display: none}  .wpayme-app #wpbody-content{ display: grid; grid-template-columns: var(--wpa-sidebar-w) minmax(0, 1fr); gap: 0 20px; align-items: start; padding: 16px 0 40px 20px; box-sizing: border-box} .wpayme-app #wpbody-content> *{ grid-column: 2; min-width: 0; max-width: none} .wpayme-app #wpbody-content> .wpayme-sidebar{  grid-area: 1 / 1 / span 200 / span 1; position: sticky; top: 46px}  .wpayme-app #wpbody-content> .wrap, .wpayme-app #wpbody-content> .wrap> *{ max-width: none} .wpayme-app #wpbody-content> .wrap{ margin: 0}  .wpayme-app #wpbody-content> .wrap> .wp-header-end, .wpayme-app #wpbody-content> .wp-header-end{ display: none}  .wpayme-app #wpbody-content> #screen-meta, .wpayme-app #wpbody-content> #screen-meta-links{ margin-left: 0; margin-right: auto}  .wpayme-app #wpbody-content> .wrap> h1.wp-heading-inline{ margin-top: 0; padding-top: 0; font-size: 20px; font-weight: 700; color: var(--wpa-text)}  .wpayme-sidebar{ padding: 6px 0 10px; background: var(--wpa-surface); border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); box-shadow: var(--wpa-shadow); overflow: hidden}  .wpayme-sidebar-foot{ padding: 14px 14px 12px} .wpayme-rate{ padding: 12px 10px 10px; border: 1px solid var(--wpa-rate-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-rate-bg); text-align: center} .wpayme-rate-title{ margin: 0 0 6px; color: var(--wpa-text); font-size: 12px; font-weight: 600} .wpayme-rate-stars{ display: flex; align-items: center; justify-content: center; gap: 2px} .wpayme-rate-stars a{ display: inline-flex; padding: 1px; color: var(--wpa-star); line-height: 0; text-decoration: none; transition: color 0.12s ease, transform 0.12s ease} .wpayme-rate-stars a svg{ width: 17px; height: 17px}  .wpayme-rate-stars{ flex-direction: row-reverse} .wpayme-rate-stars a:hover, .wpayme-rate-stars a:hover ~ a, .wpayme-rate-stars a:focus, .wpayme-rate-stars a:focus ~ a{ color: var(--wpa-star-on)}  .wpayme-sidebar-version{ margin-right: auto; padding: 2px 7px; border-radius: var(--wpa-radius-pill); background: var(--wpa-accent-soft); color: var(--wpa-accent); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.6; white-space: nowrap} .wpayme-sidebar-brand{ display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px} .wpayme-sidebar-brand img{ width: 28px; height: 28px; flex: none} .wpayme-sidebar-name{ font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--wpa-text)} .wpayme-sidebar-tag{ margin: 0; padding: 0 16px 14px; font-size: 10px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wpa-text-faint)} .wpayme-sidebar-nav{ padding: 0 8px} .wpayme-sidebar-group{ padding: 14px 8px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wpa-text-faint)} .wpayme-sidebar-nav a{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 2px; border-radius: var(--wpa-radius-sm); font-size: 13px; font-weight: 500; text-decoration: none; color: var(--wpa-text); transition: background-color .12s ease, color .12s ease} .wpayme-sidebar-nav a:hover, .wpayme-sidebar-nav a:focus{ background: var(--wpa-surface-muted); color: var(--wpa-text); box-shadow: none; outline: none} .wpayme-sidebar-nav a:focus-visible{ outline: 2px solid var(--wpa-accent); outline-offset: -2px} .wpayme-sidebar-nav a.is-current, .wpayme-sidebar-nav a.is-current:hover{ background: var(--wpa-accent); color: #fff; font-weight: 600} .wpayme-sidebar-icon{ width: 18px; height: 18px; flex: none; opacity: .9} .wpayme-sidebar-icon svg{ width: 18px; height: 18px} .wpayme-sidebar-label{ flex: 1 1 auto} .wpayme-sidebar-count{ min-width: 18px; padding: 0 6px; border-radius: var(--wpa-radius-pill); background: var(--wpa-border); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; color: var(--wpa-text-muted)} .wpayme-sidebar-nav a.is-current .wpayme-sidebar-count{ background: rgb(255 255 255 / 0.24); color: #fff}  .wpayme-sidebar-pro{ margin-right: auto; padding: 0 6px; border-radius: var(--wpa-radius-pill); background: var(--wpa-accent-soft); font-size: 10px; font-weight: 700; line-height: 18px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wpa-accent)} .wpayme-sidebar-nav a.is-current .wpayme-sidebar-pro{ background: rgb(255 255 255 / 0.24); color: #fff}  .wpayme-app .wpayme-pro-panel{ position: relative; max-width: 720px; margin: 24px 0; padding: 32px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow)} .wpayme-app .wpayme-pro-panel-icon{ display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--wpa-radius); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-pro-panel-icon svg{ width: 24px; height: 24px} .wpayme-app .wpayme-pro-panel-badge{ position: absolute; top: 32px; left: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--wpa-radius-pill); background: var(--wpa-accent); font-size: 12px; font-weight: 700; color: #fff} .wpayme-app .wpayme-pro-panel-badge svg{ width: 13px; height: 13px} .wpayme-app .wpayme-pro-panel h2{ margin: 20px 0 16px; font-size: 18px; line-height: 1.4; color: var(--wpa-text)} .wpayme-app .wpayme-pro-panel-points{ display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none} .wpayme-app .wpayme-pro-panel-points li{ display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--wpa-text-muted)} .wpayme-app .wpayme-pro-panel-points svg{ flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--wpa-accent)} .wpayme-app .wpayme-pro-panel-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0}  .wpayme-app .wpayme-pro-note{ padding: 14px 16px; border: 1px solid var(--wpa-border); border-right: 3px solid var(--wpa-accent); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text-muted)} .wpayme-app .wpayme-pro-note strong{ color: var(--wpa-text)} @media (max-width: 600px){ .wpayme-app .wpayme-pro-panel{ padding: 20px} .wpayme-app .wpayme-pro-panel-badge{ top: 20px; left: 20px}}  .wpayme-topbar{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; padding: 12px 16px; background: var(--wpa-surface); border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); box-shadow: var(--wpa-shadow)} .wpayme-topbar-search{ position: relative; flex: 1 1 240px; max-width: 460px} .wpayme-topbar-search input[type="search"]{ width: 100%; height: 34px; margin: 0; padding: 0 32px 0 12px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text); font-size: 13px; line-height: 32px; box-shadow: none} .wpayme-topbar-search input:focus{ border-color: var(--wpa-accent); background: var(--wpa-surface); outline: none; box-shadow: 0 0 0 3px var(--wpa-accent-soft)} .wpayme-topbar-search-icon{ position: absolute; top: 50%; right: 10px; width: 14px; height: 14px; transform: translateY(-50%); pointer-events: none; color: var(--wpa-text-faint)} .wpayme-topbar-actions{ display: flex; align-items: center; gap: 8px; margin-right: auto;  flex-wrap: wrap}  .wpayme-app .wpayme-topbar .wpayme-topbar-burger{ display: none}  .wpayme-pill{ display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--wpa-text)} a.wpayme-pill:hover{ border-color: var(--wpa-border-strong); color: var(--wpa-text)} .wpayme-pill-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--wpa-text-faint)} .wpayme-pill--live{ border-color: transparent; background: var(--wpa-success); color: #fff} .wpayme-pill--test{ border-color: transparent; background: var(--wpa-warn); color: #fff} .wpayme-pill--live .wpayme-pill-dot, .wpayme-pill--test .wpayme-pill-dot{ background: #fff} .wpayme-icon-btn{ display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); color: var(--wpa-text-muted); cursor: pointer; text-decoration: none} .wpayme-icon-btn:hover{ border-color: var(--wpa-border-strong); color: var(--wpa-text)} .wpayme-icon-btn svg{ width: 15px; height: 15px} .wpayme-badge{ display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--wpa-radius-pill); background: var(--wpa-border); font-size: 11px; font-weight: 600; color: var(--wpa-text-muted)} .wpayme-badge--success{ background: var(--wpa-success-soft); color: var(--wpa-success)} .wpayme-badge--warn{ background: var(--wpa-warn-soft); color: var(--wpa-warn)} .wpayme-badge--danger{ background: var(--wpa-danger-soft); color: var(--wpa-danger)} .wpayme-badge--pro{ background: var(--wpa-warn); color: #fff}  .wpayme-card{ background: var(--wpa-surface); border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); box-shadow: var(--wpa-shadow)} .wpayme-card + .wpayme-card{ margin-top: 16px} .wpayme-card-head{ display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--wpa-border)} .wpayme-card-title{ margin: 0; font-size: 14px; font-weight: 600; color: var(--wpa-text)} .wpayme-card-body{ padding: 18px}  .wpayme-stats{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px} .wpayme-stat{ display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--wpa-surface); border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); box-shadow: var(--wpa-shadow)} .wpayme-stat-icon{ display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-stat-icon svg{ width: 18px; height: 18px} .wpayme-stat-icon--success{ background: var(--wpa-success-soft); color: var(--wpa-success)} .wpayme-stat-icon--warn{ background: var(--wpa-warn-soft); color: var(--wpa-warn)} .wpayme-stat-icon--danger{ background: var(--wpa-danger-soft); color: var(--wpa-danger)} .wpayme-stat-value{ font-size: 20px; font-weight: 700; line-height: 1.15; color: var(--wpa-text)} .wpayme-stat-label{ margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wpa-text-muted)} .wpayme-empty{ padding: 44px 20px; text-align: center; color: var(--wpa-text-muted)} .wpayme-empty-title{ margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--wpa-text)} .wpayme-empty p{ margin: 0 0 14px; font-size: 13px}   .wpayme-app .postbox{ background: var(--wpa-surface); border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); box-shadow: var(--wpa-shadow); color: var(--wpa-text)} .wpayme-app .postbox .postbox-header, .wpayme-app .postbox h2.hndle, .wpayme-app .postbox h3.hndle{ background: transparent; border-bottom: 1px solid var(--wpa-border); color: var(--wpa-text); font-size: 14px; font-weight: 600} .wpayme-app .postbox .inside{ color: var(--wpa-text)} .wpayme-app .postbox .inside a:not(.button){ color: var(--wpa-accent)}  .wpayme-app .postbox .inside table th, .wpayme-app .postbox .inside table td, .wpayme-app .wpayme-pay-status-widget-row{ border-color: var(--wpa-border); color: var(--wpa-text)} .wpayme-app #dashboard-widgets .postbox-container{ background: transparent}  .wpayme-app .wpayme-pay-status-widget{ background: var(--wpa-surface)} .wpayme-app .wpayme-pay-status-widget> *{ border-color: var(--wpa-border)}  .wpayme-app .postbox .inside p, .wpayme-app .postbox .inside li, .wpayme-app .postbox .inside td, .wpayme-app .postbox .inside span:not([class]){ color: var(--wpa-text)} .wpayme-app .form-table th{ padding: 16px 0 16px 10px; font-size: 13px; font-weight: 600; color: var(--wpa-text)} .wpayme-app .form-table td{ padding: 12px 10px; font-size: 13px; color: var(--wpa-text)} .wpayme-app .form-table td p.description{ font-size: 12px; color: var(--wpa-text-muted)} .wpayme-app input[type="text"], .wpayme-app input[type="email"], .wpayme-app input[type="url"], .wpayme-app input[type="number"], .wpayme-app input[type="password"], .wpayme-app select, .wpayme-app textarea{ border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); box-shadow: none} .wpayme-app input[type="text"]:focus, .wpayme-app input[type="email"]:focus, .wpayme-app input[type="url"]:focus, .wpayme-app input[type="number"]:focus, .wpayme-app input[type="password"]:focus, .wpayme-app select:focus, .wpayme-app textarea:focus{ border-color: var(--wpa-accent); outline: none; box-shadow: 0 0 0 3px var(--wpa-accent-soft)} .wpayme-app .button-primary, .wpayme-app .button.button-primary{ border: 0; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent); color: #fff; box-shadow: none; text-shadow: none; font-weight: 600} .wpayme-app .button-primary:hover, .wpayme-app .button-primary:focus, .wpayme-app .button.button-primary:hover, .wpayme-app .button.button-primary:focus{ background: var(--wpa-accent); color: #fff; filter: brightness(1.08); box-shadow: none} .wpayme-app .button, .wpayme-app .button-secondary{ border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); box-shadow: none} .wpayme-app .nav-tab-wrapper{ border-bottom: 1px solid var(--wpa-border); padding-right: 0} .wpayme-app .nav-tab{ border: 0; border-radius: var(--wpa-radius-pill) var(--wpa-radius-pill) 0 0; margin-right: 0; margin-left: 4px; background: transparent; font-size: 13px; font-weight: 600; color: var(--wpa-text-muted)} .wpayme-app .nav-tab-active, .wpayme-app .nav-tab-active:focus, .wpayme-app .nav-tab-active:hover{ background: var(--wpa-surface); border-bottom: 2px solid var(--wpa-accent); color: var(--wpa-text)}   @media screen and (max-width: 960px){ .wpayme-app #wpbody-content{ grid-template-columns: minmax(0, 1fr); padding-left: 12px} .wpayme-app #wpbody-content> *{ grid-column: 1}  .wpayme-app #wpbody-content> .wpayme-sidebar{ grid-area: auto; position: fixed; z-index: 100001; top: 0; bottom: 0; right: 0; width: min(84vw, 300px); margin: 0; border-width: 0 0 0 1px; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transform: translateX(100%); transition: transform 0.22s ease, visibility 0.22s} .wpayme-app #wpbody-content> .wpayme-sidebar.is-open{ visibility: visible; transform: none} .wpayme-scrim{ position: fixed; z-index: 100000; inset: 0; background: rgb(15 17 21 / 0.45)}  .wpayme-nav-open{ overflow: hidden} .wpayme-app .wpayme-topbar .wpayme-topbar-burger{ display: inline-flex}  .wpayme-app #wpbody-content> .wpayme-topbar{ order: -1}} @media screen and (max-width: 782px){  .wpayme-topbar-search{ order: 0; flex: 1 1 200px; max-width: none} .wpayme-topbar-actions{ order: 10; margin-right: 0}}  .wpayme-reports-filter{ margin-bottom: 18px; padding: 14px 16px} .wpayme-reports-filter-row{ display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap} .wpayme-field{ display: flex; flex-direction: column; gap: 4px} .wpayme-field-label{ font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wpa-text-muted)} .wpayme-app .wpayme-field select, .wpayme-app .wpayme-field input[type="date"]{ height: 34px; min-width: 150px; margin: 0; padding: 0 10px; line-height: 32px} .wpayme-reports-filter-actions{ display: flex; align-items: center; gap: 8px; margin-right: auto} .wpayme-reports-range-note{ margin: 12px 0 0; font-size: 12px; color: var(--wpa-text-muted)}  .wpayme-chart{ height: 340px; width: 100%} .wpayme-chart-legend{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px} .wpayme-chart-legend-item{ display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); font-size: 12px; color: var(--wpa-text-muted); cursor: pointer} .wpayme-chart-legend-item:hover{ border-color: var(--wpa-border-strong)}  .wpayme-chart-legend-item:not(.is-on){ opacity: .45} .wpayme-chart-legend-item strong{ color: var(--wpa-text)} .wpayme-chart-swatch{ width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--wpa-text-faint)} .wpayme-swatch--completed{ background: #10b981} .wpayme-swatch--pending{ background: #f59e0b} .wpayme-swatch--authorized{ background: #6366f1} .wpayme-swatch--reserved{ background: #8b5cf6} .wpayme-swatch--refunded{ background: #f97316} .wpayme-swatch--cancelled{ background: #94a3b8} .wpayme-swatch--expired{ background: #64748b} .wpayme-swatch--failed{ background: #ef4444}  .wpayme-app .wpayme-pay-chart-tooltip, .wpayme-app #wpayme-pay-chart-tooltip{ padding: 6px 10px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); box-shadow: var(--wpa-shadow-lg); font-size: 12px; color: var(--wpa-text)}  .wpayme-reports-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px} .wpayme-table{ width: 100%; border-collapse: collapse; font-size: 13px} .wpayme-table th, .wpayme-table td{ padding: 10px 18px; text-align: right; border-bottom: 1px solid var(--wpa-border); color: var(--wpa-text)} .wpayme-table th{ font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wpa-text-muted)} .wpayme-table tbody tr:last-child td{ border-bottom: 0} .wpayme-table tbody tr:hover td{ background: var(--wpa-surface-muted)} .wpayme-table .wpayme-num{ text-align: left; font-variant-numeric: tabular-nums} .wpayme-table-empty{ padding: 24px 18px; text-align: center; color: var(--wpa-text-muted)} .wpayme-table td .wpayme-chart-swatch{ display: inline-block; margin-left: 7px; vertical-align: middle} @media screen and (max-width: 782px){ .wpayme-reports-filter-actions{ margin-right: 0; width: 100%}}  [x-cloak]{ display: none !important}   .wpayme-app .wpayme-tabs{ display: flex; gap: 4px; align-items: center; margin: 0 0 6px; padding: 4px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface-muted); width: fit-content; max-width: 100%; overflow-x: auto} .wpayme-app .wpayme-tab{ display: inline-block; padding: 7px 16px; border-radius: var(--wpa-radius-sm); font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none; color: var(--wpa-text-muted); transition: background 0.12s ease, color 0.12s ease} .wpayme-app .wpayme-tab:hover{ background: var(--wpa-surface); color: var(--wpa-text)} .wpayme-app .wpayme-tab:focus-visible{ outline: 2px solid var(--wpa-accent); outline-offset: 1px; box-shadow: none} .wpayme-app .wpayme-tab.is-active{ background: var(--wpa-accent); color: #fff} .wpayme-app .wpayme-tabs-blurb{ margin: 0 0 18px; color: var(--wpa-text-muted); font-size: 13px} .wpayme-app .wpayme-settings-form{ max-width: 1080px} .wpayme-app .wpayme-settings-card .wpayme-card-body{ padding-top: 4px; padding-bottom: 4px}  .wpayme-app .wpayme-settings-card .form-table{ margin: 0} .wpayme-app .wpayme-settings-card .form-table th{ width: 240px; padding: 16px 0 16px 20px; font-size: 13px; font-weight: 600; color: var(--wpa-text); vertical-align: top; line-height: 1.5} .wpayme-app .wpayme-settings-card .form-table td{ padding: 14px 0; vertical-align: top} .wpayme-app .wpayme-settings-card .form-table tr + tr> th, .wpayme-app .wpayme-settings-card .form-table tr + tr> td{ border-top: 1px solid var(--wpa-border)} .wpayme-app .wpayme-settings-card .form-table .description{ margin: 6px 0 0; color: var(--wpa-text-muted); font-size: 12px; max-width: 62ch} .wpayme-app .wpayme-settings-card .form-table input[type="text"], .wpayme-app .wpayme-settings-card .form-table input[type="url"], .wpayme-app .wpayme-settings-card .form-table input[type="email"], .wpayme-app .wpayme-settings-card .form-table input[type="number"], .wpayme-app .wpayme-settings-card .form-table input[type="password"], .wpayme-app .wpayme-settings-card .form-table select, .wpayme-app .wpayme-settings-card .form-table textarea{ border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); box-shadow: none; min-height: 34px; padding: 6px 10px; max-width: 100%} .wpayme-app .wpayme-settings-card .form-table input:focus, .wpayme-app .wpayme-settings-card .form-table select:focus, .wpayme-app .wpayme-settings-card .form-table textarea:focus{ border-color: var(--wpa-accent); outline: 2px solid var(--wpa-accent-soft); outline-offset: 0; box-shadow: none} .wpayme-app .wpayme-settings-card .form-table textarea{ width: 100%; max-width: 62ch; font-family: var(--wpa-font)}   .wpayme-app #submit.is-saving{ opacity: 0.75; cursor: progress} .wpayme-app #submit.is-saved{ background: var(--wpa-success)} .wpayme-app #submit.is-failed{ background: var(--wpa-danger)} .wpayme-settings-notices{ margin: 0 0 14px} .wpayme-app .wpayme-settings-actions{ position: sticky; bottom: 12px; z-index: 5; display: flex; justify-content: flex-end; margin-top: 18px; padding: 12px 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow-lg); transition: border-color 0.2s ease, box-shadow 0.2s ease}  .wpayme-app .wpayme-settings-actions.is-dirty{ border-color: var(--wpa-warn); box-shadow: var(--wpa-shadow-lg), 0 0 0 3px color-mix(in srgb, var(--wpa-warn) 22%, transparent)}  .wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving), .wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving):hover, .wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving):focus, .wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving):active{ border: 1px solid color-mix(in srgb, var(--wpa-warn) 70%, #000); border-radius: var(--wpa-radius-sm); background: var(--wpa-warn); color: #1f1300; font-weight: 600; text-shadow: none; box-shadow: 0 1px 2px rgb(31 19 0 / 0.25)} .wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving){ animation: wpayme-heartbeat 1.3s ease-in-out infinite} .wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving):hover{ background: color-mix(in srgb, var(--wpa-warn) 88%, #000)} .wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:focus-visible{ outline: 2px solid #1f1300; outline-offset: 2px} .wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:hover, .wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:focus-visible{ animation-play-state: paused} @keyframes wpayme-heartbeat{ 0%, 45%, 100%{ transform: scale(1)} 12%{ transform: scale(1.07)} 24%{ transform: scale(0.98)} 34%{ transform: scale(1.05)}} @media (prefers-reduced-motion: reduce){ .wpayme-app .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving){ animation: none}}  .wpayme-app .form-table input[type="checkbox"], .wpayme-app .wpayme-toggle-switch input[type="checkbox"]{ appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 42px; min-width: 42px; height: 24px; margin: 0; padding: 0; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); box-shadow: none; cursor: pointer; vertical-align: middle; transition: background 0.15s ease, border-color 0.15s ease} .wpayme-app .form-table input[type="checkbox"]::before, .wpayme-app .wpayme-toggle-switch input[type="checkbox"]::before{ content: ""; position: absolute;  top: 50%; right: 3px; width: 18px; height: 18px; margin: 0; transform: translateY(-50%); border-radius: 50%; background: var(--wpa-surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform 0.15s ease} .wpayme-app .form-table input[type="checkbox"]:checked, .wpayme-app .wpayme-toggle-switch input[type="checkbox"]:checked{ background: var(--wpa-accent); border-color: var(--wpa-accent)} .wpayme-app .form-table input[type="checkbox"]:checked::before, .wpayme-app .wpayme-toggle-switch input[type="checkbox"]:checked::before{ transform: translate(-18px, -50%)} .wpayme-app .form-table input[type="checkbox"]:focus-visible, .wpayme-app .wpayme-toggle-switch input[type="checkbox"]:focus-visible{ outline: 2px solid var(--wpa-accent); outline-offset: 2px} .wpayme-app .form-table input[type="checkbox"]:disabled, .wpayme-app .wpayme-toggle-switch input[type="checkbox"]:disabled{ opacity: 0.5; cursor: not-allowed}  .wpayme-app .form-table td> label:has(> input[type="checkbox"] ), .wpayme-app .wpayme-toggle-container{ display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--wpa-text)}  .wpayme-app .wpayme-toggle-slider{ display: none} .wpayme-app .wpayme-toggle-switch{ display: inline-flex; align-items: center; position: static; width: auto; height: auto} .wpayme-app .wpayme-toggle-label{ color: var(--wpa-text); font-size: 13px}  .wpayme-app .wrap> h1.wp-heading-inline{ font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0 0 0 12px; padding: 0; color: var(--wpa-text)}  .wpayme-app .wrap> .page-title-action{ display: inline-flex; align-items: center; height: 38px; padding: 0 38px 0 18px; border: 1px solid var(--wpa-accent); border-radius: var(--wpa-radius-pill); background-color: var(--wpa-surface); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 15px 15px; color: var(--wpa-accent); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: none; vertical-align: middle; transition: background-color 0.12s ease, box-shadow 0.12s ease} .wpayme-app .wrap> .page-title-action:hover, .wpayme-app .wrap> .page-title-action:focus{ background-color: var(--wpa-accent-soft); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 15px 15px; color: var(--wpa-accent); box-shadow: 0 1px 3px rgb(79 70 229 / 0.18)}  .wpayme-app.post-php .wrap> .page-title-action, .wpayme-app.post-new-php .wrap> .page-title-action{ float: left; margin: 0}  .wpayme-app.post-php #wpbody-content> .wrap> .wp-header-end, .wpayme-app.post-new-php #wpbody-content> .wrap> .wp-header-end{ display: block; visibility: hidden; clear: both; height: 0; margin: 0; border: 0}  .wpayme-app .wrap> .wp-header-end{ visibility: hidden; clear: both; margin: 0; border: 0; height: 12px} .wpayme-app .subsubsub{ float: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 12px; padding: 4px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface-muted); width: fit-content; max-width: 100%; font-size: 13px} .wpayme-app .subsubsub li{ margin: 0; color: transparent}  .wpayme-app .subsubsub li::after{ content: none} .wpayme-app .subsubsub a{ display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: var(--wpa-radius-sm); color: var(--wpa-text-muted); font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none} .wpayme-app .subsubsub a:hover{ background: var(--wpa-surface); color: var(--wpa-text)} .wpayme-app .subsubsub a.current{ background: var(--wpa-accent); color: #fff; font-weight: 600}  .wpayme-app .subsubsub a .count{ padding: 1px 7px; border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums} .wpayme-app .subsubsub a.current .count{ background: rgb(255 255 255 / 0.22); color: #fff}  .wpayme-app .tablenav{ height: auto; margin: 0 0 12px; padding: 0} .wpayme-app .tablenav.bottom{ margin: 12px 0 0} .wpayme-app .tablenav .tablenav-pages{ margin: 0; float: left; color: var(--wpa-text-muted); font-size: 13px} .wpayme-app .tablenav .tablenav-pages .displaying-num{ color: var(--wpa-text-muted); font-size: 13px} .wpayme-app .tablenav .tablenav-pages a.page-numbers, .wpayme-app .tablenav .tablenav-pages span.tablenav-pages-navspan, .wpayme-app .tablenav .tablenav-pages a.prev-page, .wpayme-app .tablenav .tablenav-pages a.next-page, .wpayme-app .tablenav .tablenav-pages a.first-page, .wpayme-app .tablenav .tablenav-pages a.last-page{ border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); box-shadow: none} .wpayme-app .search-box input[type="search"], .wpayme-app .tablenav select, .wpayme-app .tablenav input[type="text"], .wpayme-app .tablenav input[type="search"]{ height: 32px; min-height: 32px; padding: 0 10px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); box-shadow: none; line-height: 1.4} .wpayme-app .search-box input[type="search"]:focus, .wpayme-app .tablenav select:focus{ border-color: var(--wpa-accent); outline: 2px solid var(--wpa-accent-soft); box-shadow: none} .wpayme-app .tablenav .button, .wpayme-app .search-box .button{ height: 32px; border-radius: var(--wpa-radius-sm); border-color: var(--wpa-border-strong); background: var(--wpa-surface); color: var(--wpa-text); box-shadow: none} .wpayme-app .tablenav .button:hover, .wpayme-app .search-box .button:hover{ background: var(--wpa-surface-muted); border-color: var(--wpa-border-strong); color: var(--wpa-text)}  .wpayme-app .wp-list-table{ border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--wpa-surface); box-shadow: var(--wpa-shadow)}  .wpayme-app .wp-list-table tbody tr, .wpayme-app .wpayme-pay-table-striped tbody tr{ background: var(--wpa-surface); color: var(--wpa-text)} .wpayme-app .wp-list-table.striped> tbody> tr:nth-child(odd), .wpayme-app .wp-list-table tbody tr.alternate, .wpayme-app .wpayme-pay-table-striped tbody tr:nth-of-type(odd){ background: var(--wpa-surface-muted)}  .wpayme-app .wp-list-table tbody tr.inline-edit-row, .wpayme-app .wp-list-table tbody tr.inline-edit-row td, .wpayme-app .wp-list-table tbody tr.no-items td{ background: var(--wpa-surface); color: var(--wpa-text)}  .wpayme-app .wp-list-table thead th, .wpayme-app .wp-list-table thead td, .wpayme-app .wp-list-table tfoot th, .wpayme-app .wp-list-table tfoot td{ padding: 12px 14px; border-bottom: 1px solid var(--wpa-border); background: var(--wpa-surface); color: var(--wpa-text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase} .wpayme-app .wp-list-table tfoot th, .wpayme-app .wp-list-table tfoot td{ border-bottom: 0; border-top: 1px solid var(--wpa-border)} .wpayme-app .wp-list-table thead th a, .wpayme-app .wp-list-table tfoot th a{ color: inherit} .wpayme-app .wp-list-table tbody td, .wpayme-app .wp-list-table tbody th{ padding: 14px; border-bottom: 1px solid var(--wpa-border); color: var(--wpa-text); font-size: 13px; vertical-align: middle} .wpayme-app .wp-list-table tbody tr:last-child td, .wpayme-app .wp-list-table tbody tr:last-child th{ border-bottom: 0} .wpayme-app .wp-list-table tbody tr:hover> td, .wpayme-app .wp-list-table tbody tr:hover> th{ background: var(--wpa-surface-muted)} .wpayme-app .wp-list-table .row-title, .wpayme-app .wp-list-table .column-title strong a{ color: var(--wpa-text); font-weight: 600; text-decoration: none} .wpayme-app .wp-list-table .row-actions{ color: var(--wpa-text-faint); font-size: 12px; padding-top: 4px} .wpayme-app .wp-list-table .row-actions a{ color: var(--wpa-accent); text-decoration: none} .wpayme-app .wp-list-table .row-actions a:hover, .wpayme-app .wp-list-table .row-actions a:focus-visible{ color: color-mix(in srgb, var(--wpa-accent) 75%, #000); text-decoration: underline}  .wpayme-app.post-type-wpayme_coupon .column-title .row-actions{ margin-right: 23px}  .wpayme-app .wp-list-table .no-items td{ padding: 44px 20px; text-align: center; color: var(--wpa-text-muted); font-size: 14px} .wpayme-app .wp-list-table .check-column{ width: 40px; padding-right: 14px; padding-left: 0; vertical-align: middle}   .wpayme-app .wpayme-cat-tabs{ display: flex; gap: 4px; align-items: center; margin: 0 0 18px; padding: 6px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); overflow-x: auto;  scrollbar-width: none; -ms-overflow-style: none} .wpayme-app .wpayme-cat-tabs::-webkit-scrollbar{ display: none} .wpayme-app .wpayme-cat-tab{ display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; height: 34px; padding: 0 13px; border: 0; border-radius: var(--wpa-radius-sm); background: none; color: var(--wpa-text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer} .wpayme-app .wpayme-cat-tab:hover{ background: var(--wpa-surface-muted); color: var(--wpa-text)} .wpayme-app .wpayme-cat-tab.is-active{ background: var(--wpa-accent); color: #fff} .wpayme-app .wpayme-cat-count{ padding: 1px 7px; border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums} .wpayme-app .wpayme-cat-tab.is-active .wpayme-cat-count{ background: rgb(255 255 255 / 0.22); color: #fff}  .wpayme-app .wpayme-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; margin-bottom: 24px}  .wpayme-app [hidden]{ display: none !important} .wpayme-app .wpayme-tile{ display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow); transition: border-color 0.12s ease, box-shadow 0.12s ease} .wpayme-app .wpayme-tile:hover{ box-shadow: 0 4px 14px rgb(0 0 0 / 0.07)}  .wpayme-app .wpayme-tile.is-on{ border-color: var(--wpa-border); box-shadow: 0 1px 3px rgb(0 0 0 / 0.06)} .wpayme-app .wpayme-tile-head{ display: flex; align-items: flex-start; gap: 12px}  .wpayme-app .wpayme-tile-art{ display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-accent); font-size: 18px; font-weight: 700; text-transform: uppercase}  .wpayme-app .wpayme-tile-art--logo{ background: #fff; border: 1px solid var(--wpa-border); padding: 5px} .wpayme-app .wpayme-tile-art--logo img{ width: 100%; height: 100%; object-fit: contain}  .wpayme-app .wpayme-tint-0{ background: #eef2ff; color: #4f46e5} .wpayme-app .wpayme-tint-1{ background: #ecfdf5; color: #059669} .wpayme-app .wpayme-tint-2{ background: #fff7ed; color: #ea580c} .wpayme-app .wpayme-tint-3{ background: #fdf2f8; color: #db2777} .wpayme-app .wpayme-tint-4{ background: #eff6ff; color: #2563eb} .wpayme-app .wpayme-tint-5{ background: #f5f3ff; color: #7c3aed} .wpayme-app .wpayme-tint-6{ background: #fefce8; color: #ca8a04} .wpayme-app .wpayme-tint-7{ background: #f0fdfa; color: #0d9488} .wpayme-app .wpayme-tint-8{ background: #fef2f2; color: #dc2626} .wpayme-app .wpayme-tint-9{ background: #f8fafc; color: #475569}  .wpayme-app--dark .wpayme-tint-0{ background: #1e1b4b; color: #a5b4fc} .wpayme-app--dark .wpayme-tint-1{ background: #052e23; color: #6ee7b7} .wpayme-app--dark .wpayme-tint-2{ background: #3b1d06; color: #fdba74} .wpayme-app--dark .wpayme-tint-3{ background: #3b0a26; color: #f9a8d4} .wpayme-app--dark .wpayme-tint-4{ background: #10243f; color: #93c5fd} .wpayme-app--dark .wpayme-tint-5{ background: #2a1a4a; color: #c4b5fd} .wpayme-app--dark .wpayme-tint-6{ background: #332608; color: #fde047} .wpayme-app--dark .wpayme-tint-7{ background: #04302c; color: #5eead4} .wpayme-app--dark .wpayme-tint-8{ background: #3b0d0d; color: #fca5a5} .wpayme-app--dark .wpayme-tint-9{ background: #1e232b; color: #cbd5e1} .wpayme-app .wpayme-tile-id{ flex: 1; min-width: 0} .wpayme-app .wpayme-tile-name{ margin: 0; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--wpa-text); overflow-wrap: anywhere} .wpayme-app .wpayme-tile-state{ margin: 3px 0 0; font-size: 11px} .wpayme-app .wpayme-state{ font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase} .wpayme-app .wpayme-state--on{ color: var(--wpa-success)} .wpayme-app .wpayme-state--off{ color: var(--wpa-text-faint)} .wpayme-app .wpayme-state--idle{ color: var(--wpa-warn)}  .wpayme-app .wpayme-tile-switch{ flex: 0 0 auto; margin: 0} .wpayme-app .wpayme-switch{ position: relative; display: block; width: 42px; height: 24px; padding: 0; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease} .wpayme-app .wpayme-switch::before{ content: ""; position: absolute; top: 50%; right: 2px; width: 18px; height: 18px; border-radius: 50%; transform: translateY(-50%); background: var(--wpa-surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform 0.15s ease} .wpayme-app .wpayme-switch[aria-checked="true"]{ background: var(--wpa-accent); border-color: var(--wpa-accent)} .wpayme-app .wpayme-switch[aria-checked="true"]::before{ transform: translate(-18px, -50%)} .wpayme-app .wpayme-switch:focus-visible{ outline: 2px solid var(--wpa-accent); outline-offset: 2px}  .wpayme-app .wpayme-tile[data-detected="no"] .wpayme-switch[aria-checked="true"]{ opacity: 0.55} .wpayme-app .wpayme-tile[data-detected="no"]{ border-color: var(--wpa-border)} .wpayme-app .wpayme-tile[data-detected="no"] .wpayme-tile-art{ background: var(--wpa-surface-muted); color: var(--wpa-text-faint)} .wpayme-app .wpayme-tile-blurb{ margin: 0; color: var(--wpa-text-muted); font-size: 12.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden} .wpayme-app .wpayme-browse-bulk.is-busy{ opacity: 0.6; pointer-events: none} .wpayme-app .wpayme-switch:disabled{ opacity: 0.6; cursor: progress}  .wpayme-app .wpayme-theme-icon{ display: inline-flex} .wpayme-app .wpayme-theme-icon--dark, .wpayme-app--dark .wpayme-theme-icon--light{ display: none} .wpayme-app--dark .wpayme-theme-icon--dark{ display: inline-flex} .wpayme-app .wpayme-tile-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none} .wpayme-app .wpayme-tag{ padding: 2px 8px; border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 11px; font-weight: 500; text-transform: capitalize} .wpayme-app .wpayme-tile-foot{ margin: auto 0 0; font-size: 12px} .wpayme-app .wpayme-tile-foot a{ color: var(--wpa-accent); text-decoration: none} .wpayme-app .wpayme-connect{ display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); font-size: 12px; font-weight: 600; text-decoration: none} .wpayme-app .wpayme-connect:hover{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-connect svg{ width: 14px; height: 14px} .wpayme-app .wpayme-tile-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px} .wpayme-app .wpayme-tile-warn{ color: var(--wpa-warn); font-weight: 500}  .wpayme-app .wp-list-table .column-wpayme_form_thumbnail{  width: 40px} .wpayme-app .wp-list-table th.column-wpayme_form_thumbnail .wpayme-th-icon> span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap}  .wpayme-app .wpayme-admin-thumbnail{ display: block; box-sizing: border-box; width: 40px; height: 40px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); object-fit: cover} .wpayme-app .wpayme-admin-thumbnail--empty{ display: flex; align-items: center; justify-content: center; background: var(--wpa-surface-muted); color: var(--wpa-text-faint)} .wpayme-app .wpayme-admin-thumbnail--empty svg{ width: 20px; height: 20px}  .wpayme-app .wpayme-test-amount{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px} .wpayme-app .wpayme-test-amount select, .wpayme-app .wpayme-test-amount input{ margin: 0}  .wpayme-app .form-table .wpayme-test-amount select{ flex: 0 0 auto; width: auto; min-width: 0}  .wpayme-app .form-table .wpayme-test-amount input{ flex: 1 1 120px; width: auto; min-width: 0}  .wpayme-app .wpayme-tile-add{ margin-left: auto; color: var(--wpa-text-muted) !important} .wpayme-app .wpayme-tile-add:hover, .wpayme-app .wpayme-tile-add:focus-visible{ color: var(--wpa-accent) !important; text-decoration: underline} .wpayme-app .wpayme-browse-empty{ padding: 40px; border: 1px dashed var(--wpa-border-strong); border-radius: var(--wpa-radius); color: var(--wpa-text-muted); text-align: center}  #adminmenu .wp-submenu a[href="#wpayme-section-commerce"], #adminmenu .wp-submenu a[href^="#wpayme-section-"]{ pointer-events: none; cursor: default; padding-top: 12px; padding-bottom: 2px} #adminmenu .wp-submenu .wpayme-menu-section{ display: block; color: #8c8f94; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase}  .wpayme-app .wpayme-dash-grid{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; align-items: stretch; margin-bottom: 24px}  .wpayme-app .wpayme-dash-side{ display: flex; flex-direction: column; gap: 16px; min-width: 0}  .wpayme-app .wpayme-dash-chart{ height: 100%} .wpayme-app .wpayme-dash-chart .wpayme-card-body{ display: flex; flex-direction: column; justify-content: center; flex: 1} .wpayme-app .wpayme-dash-chart{ display: flex; flex-direction: column} @media screen and (max-width: 1100px){ .wpayme-app .wpayme-dash-grid{ grid-template-columns: minmax(0, 1fr)}}  .wpayme-app .wpayme-dash-recent{ grid-column: 1 / -1} .wpayme-app .wpayme-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px} .wpayme-app .wpayme-card-action{ color: var(--wpa-accent); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap}  .wpayme-app .wpayme-feed{ margin: 0; padding: 0; list-style: none} .wpayme-app .wpayme-feed-item{ display: flex; align-items: baseline; gap: 8px; padding: 9px 0; font-size: 13px; color: var(--wpa-text)} .wpayme-app .wpayme-feed-item + .wpayme-feed-item{ border-top: 1px solid var(--wpa-border)} .wpayme-app .wpayme-feed-text{ flex: 1; min-width: 0} .wpayme-app .wpayme-feed-text a{ color: var(--wpa-accent); text-decoration: none} .wpayme-app .wpayme-feed-when{ flex: 0 0 auto; color: var(--wpa-text-faint); font-size: 11px; white-space: nowrap} .wpayme-app .wpayme-empty-note{ margin: 0; padding: 26px 0; color: var(--wpa-text-muted); font-size: 13px; text-align: center}  .wpayme-app .wpayme-spark{ display: block; width: 100%; height: 180px; overflow: visible} .wpayme-app .wpayme-spark-fill{ fill: var(--wpa-accent); opacity: 0.12} .wpayme-app .wpayme-spark-line{ fill: none; stroke: var(--wpa-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke}  .wpayme-app .wpayme-stats> .wpayme-stat{ position: relative; overflow: hidden} .wpayme-app .wpayme-spark--mini{ position: absolute; right: 0; left: 0; bottom: 0; height: 34px; opacity: 0.55; pointer-events: none} .wpayme-app .wpayme-spark--mini .wpayme-spark-line{ stroke-width: 1.5} .wpayme-app .wpayme-spark--mini .wpayme-spark-fill{ opacity: 0.1} .wpayme-app .wpayme-stat> :not(.wpayme-spark){ position: relative} .wpayme-app .wpayme-spark--warn .wpayme-spark-line{ stroke: var(--wpa-warn)} .wpayme-app .wpayme-spark--warn .wpayme-spark-fill{ fill: var(--wpa-warn)} .wpayme-app .wpayme-spark--danger .wpayme-spark-line{ stroke: var(--wpa-danger)} .wpayme-app .wpayme-spark--success .wpayme-spark-line{ stroke: var(--wpa-success)} .wpayme-app .wpayme-spark--success .wpayme-spark-fill{ fill: var(--wpa-success)} .wpayme-app .wpayme-spark--danger .wpayme-spark-fill{ fill: var(--wpa-danger)} .wpayme-app .wpayme-chart-foot{ margin: 10px 0 0; color: var(--wpa-text-muted); font-size: 12px}  .wpayme-app .wpayme-checklist{ margin: 0; padding: 0; list-style: none} .wpayme-app .wpayme-check{ display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 13px; color: var(--wpa-text)} .wpayme-app .wpayme-check + .wpayme-check{ border-top: 1px solid var(--wpa-border)} .wpayme-app .wpayme-check-mark{ flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid var(--wpa-border-strong); border-radius: 50%} .wpayme-app .wpayme-check.is-done .wpayme-check-mark{ position: relative; border-color: var(--wpa-success); background: var(--wpa-success)} .wpayme-app .wpayme-check.is-done .wpayme-check-mark::after{ content: ""; position: absolute; right: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg)} .wpayme-app .wpayme-check.is-done .wpayme-check-label{ color: var(--wpa-text-muted); text-decoration: line-through} .wpayme-app .wpayme-check-label{ flex: 1} .wpayme-app .wpayme-check-cta{ color: var(--wpa-accent); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap}  .wpayme-app .wpayme-pill--completed{ background: var(--wpa-success-soft); color: var(--wpa-success)} .wpayme-app .wpayme-pill--pending{ background: var(--wpa-warn-soft); color: var(--wpa-warn)} .wpayme-app .wpayme-pill--failed, .wpayme-app .wpayme-pill--expired{ background: var(--wpa-danger-soft); color: var(--wpa-danger)} .wpayme-app .wpayme-pill--cancelled, .wpayme-app .wpayme-pill--refunded{ background: var(--wpa-surface-muted); color: var(--wpa-text-muted)} .wpayme-app .wpayme-stat{ text-decoration: none}  .wpayme-app .wpayme-stats> .wpayme-stat{ min-width: 0}  .wpayme-app .wpayme-tile{ position: relative} .wpayme-app .wpayme-tile-pro{ position: absolute; top: 0; left: 0; padding: 3px 9px; border-radius: var(--wpa-radius) 0 var(--wpa-radius) 0; background: var(--wpa-warn); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4} .wpayme-app a.wpayme-tile-pro:hover, .wpayme-app a.wpayme-tile-pro:focus-visible{ color: #fff; filter: brightness(1.08)}  .wpayme-app .wpayme-upsell{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 20px; padding: 18px 20px; border: 1px solid var(--wpa-border); border-right: 4px solid var(--wpa-warn); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow)} .wpayme-app .wpayme-upsell-title{ margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--wpa-text)} .wpayme-app .wpayme-upsell-text{ margin: 0; color: var(--wpa-text-muted)}  .wpayme-app .wpayme-tile-pro + .wpayme-tile-head{ padding-top: 14px}  .wpayme-app .wpayme-retention{ margin-right: 8px; color: var(--wpa-text-faint)} .wpayme-app .wpayme-activity-filters{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px} .wpayme-app .wpayme-activity-filters select, .wpayme-app .wpayme-activity-filters input[type="search"]{ box-sizing: border-box; height: 34px; min-height: 34px; padding: 0 10px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); box-shadow: none} .wpayme-app .wpayme-activity-filters input[type="search"]{ min-width: 220px} .wpayme-app .wpayme-log{ width: 100%} .wpayme-app .wpayme-log-when{ color: var(--wpa-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums}  .wpayme-app .wpayme-log-dot{ display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--wpa-text-faint); vertical-align: middle} .wpayme-app .wpayme-log-row--1 .wpayme-log-dot{ background: var(--wpa-success)} .wpayme-app .wpayme-log-row--2 .wpayme-log-dot{ background: var(--wpa-warn)} .wpayme-app .wpayme-log-row--3 .wpayme-log-dot{ background: var(--wpa-danger)} .wpayme-app .wpayme-log-context{ color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-kv{ display: inline-block; margin-left: 10px; white-space: nowrap} .wpayme-app .wpayme-kv em{ color: var(--wpa-text-faint); font-style: normal; text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; margin-left: 3px} .wpayme-app .wpayme-btn--export{ display: inline-flex; align-items: center; margin-right: auto; border-color: var(--wpa-accent); color: var(--wpa-accent); text-decoration: none; line-height: 32px} .wpayme-app .wpayme-btn--export:hover{ background: var(--wpa-accent-soft); color: var(--wpa-accent)}  .wpayme-app .wpayme-amounts{ display: block} .wpayme-app .wpayme-amount{ display: block; white-space: nowrap; font-variant-numeric: tabular-nums} .wpayme-app .wpayme-amounts--multi{ font-size: 14px; line-height: 1.5; font-weight: 600} .wpayme-app .wpayme-amounts--multi .wpayme-amount + .wpayme-amount{ color: var(--wpa-text-muted)}  .wpayme-app .wpayme-blank{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 34px 20px 38px; text-align: center} .wpayme-app .wpayme-blank-plate{ display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; margin-bottom: 12px; border-radius: 50%; background: var(--wpa-accent-soft); font-size: 34px; line-height: 1;  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif}  .wpayme-app .wpayme-blank-plate::before{ content: ""; position: absolute; width: 106px; height: 106px; border: 1px dashed var(--wpa-border-strong); border-radius: 50%; opacity: 0.7} .wpayme-app .wpayme-blank{ position: relative} .wpayme-app .wpayme-blank-title{ margin: 0; font-size: 15px; font-weight: 600; color: var(--wpa-text)} .wpayme-app .wpayme-blank-text{ margin: 0; max-width: 42ch; color: var(--wpa-text-muted); font-size: 13px; line-height: 1.55} .wpayme-app .wpayme-blank-cta{ display: inline-flex; align-items: center; height: 32px; margin-top: 14px; padding: 0 16px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none} .wpayme-app .wpayme-blank-cta:hover, .wpayme-app .wpayme-blank-cta:focus{ color: #fff; filter: brightness(1.08)}  .wpayme-app .wpayme-dash-activity .wpayme-blank{ padding: 22px 12px 26px} .wpayme-app .wpayme-dash-activity .wpayme-blank-plate{ width: 58px; height: 58px; font-size: 26px} .wpayme-app .wpayme-dash-activity .wpayme-blank-plate::before{ width: 84px; height: 84px}  .wpayme-app #poststuff .postbox{ border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow); overflow: hidden}  .wpayme-app #poststuff .postbox:has(.wpayme-ms){ overflow: visible} .wpayme-app #poststuff .postbox-header{ border-bottom: 1px solid var(--wpa-border); background: var(--wpa-surface);  padding-left: 16px} .wpayme-app #poststuff .postbox .hndle{ padding: 14px 16px; border: 0; font-size: 14px; font-weight: 600; color: var(--wpa-text)} .wpayme-app #poststuff .postbox .inside{ margin: 0; padding: 16px}  .wpayme-app #poststuff .handle-order-higher, .wpayme-app #poststuff .handle-order-lower{ opacity: 0; width: 1.62rem} .wpayme-app #poststuff .postbox-header:hover .handle-order-higher, .wpayme-app #poststuff .postbox-header:hover .handle-order-lower, .wpayme-app #poststuff .handle-order-higher:focus, .wpayme-app #poststuff .handle-order-lower:focus{ opacity: 1} .wpayme-app #poststuff .handlediv, .wpayme-app #poststuff .handle-order-higher, .wpayme-app #poststuff .handle-order-lower{ color: var(--wpa-text-faint)}  .wpayme-app #titlediv .inside #edit-slug-box:not(:has(*)){ display: none}  .wpayme-app .button.button-small, .wpayme-app #poststuff .button.button-small{ height: auto; min-height: 0; padding: 2px 9px; line-height: 1.6} .wpayme-app #titlediv .inside{ margin: 0; padding: 0}  .wpayme-app #titlediv #title{ height: 46px; padding: 0 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow); color: var(--wpa-text); font-size: 17px; font-weight: 600} .wpayme-app #titlediv #title:focus{ border-color: var(--wpa-accent); outline: 2px solid var(--wpa-accent-soft); box-shadow: none} .wpayme-app #titlediv #title-prompt-text{ padding: 12px 15px; color: var(--wpa-text-faint); font-size: 15px; font-weight: 400}  .wpayme-app .wpayme-pay-tabs-items{ display: flex; flex-wrap: wrap; float: none; gap: 4px; width: auto; margin: 0 0 18px; padding: 6px; border: 1px solid var(--wpa-border); border-bottom: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface-muted)} .wpayme-app .wpayme-pay-tabs-items li{ display: inline-flex; align-items: center; float: none; margin: 0; padding: 7px 14px; border: 0; border-radius: var(--wpa-radius-sm); background: none; color: var(--wpa-text-muted); font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap} .wpayme-app .wpayme-pay-tabs-items li:hover{ background: var(--wpa-surface); color: var(--wpa-text)} .wpayme-app .wpayme-pay-tabs-items li.active{ margin-top: 0; border: 0; border-top: 0; background: var(--wpa-accent); color: #fff; font-weight: 600} .wpayme-app .wpayme-pay-tabs-items li.active::after{ content: none} .wpayme-app .wpayme-pay-tab{ clear: both}  .wpayme-app .gateway-config-section-header h4{ margin: 0 0 6px; padding: 0; color: var(--wpa-text-faint); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase}  .wpayme-app #poststuff .postbox .form-table{ margin: 0} .wpayme-app #poststuff .postbox .form-table th{ width: 240px;  padding: 16px 8px 16px 22px; background: none; font-size: 13px; font-weight: 600; color: var(--wpa-text); vertical-align: top; line-height: 1.5} .wpayme-app #poststuff .postbox .form-table td{ padding: 16px 8px; background: none; vertical-align: top}  .wpayme-app #poststuff .postbox .form-table tr.even> th, .wpayme-app #poststuff .postbox .form-table tr.even> td, .wpayme-app #poststuff .postbox .form-table tr.alternate> th, .wpayme-app #poststuff .postbox .form-table tr.alternate> td{ background: none} .wpayme-app #poststuff .postbox .form-table tr + tr> th, .wpayme-app #poststuff .postbox .form-table tr + tr> td{ border-top: 1px solid var(--wpa-border)} .wpayme-app #poststuff .postbox .form-table input[type="text"], .wpayme-app #poststuff .postbox .form-table input[type="url"], .wpayme-app #poststuff .postbox .form-table input[type="email"], .wpayme-app #poststuff .postbox .form-table input[type="number"], .wpayme-app #poststuff .postbox .form-table input[type="password"], .wpayme-app #poststuff .postbox .form-table select, .wpayme-app #poststuff .postbox .form-table textarea{ min-height: 34px; padding: 6px 10px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); box-shadow: none; max-width: 100%} .wpayme-app #poststuff .postbox .form-table input:focus, .wpayme-app #poststuff .postbox .form-table select:focus, .wpayme-app #poststuff .postbox .form-table textarea:focus{ border-color: var(--wpa-accent); outline: 2px solid var(--wpa-accent-soft); box-shadow: none}  .wpayme-app #poststuff .wpayme-field-row .wpayme-input-group input[type="number"], .wpayme-app #poststuff .wpayme-field-row .wpayme-input-group input[type="text"]{ padding-right: 28px} .wpayme-app #poststuff .wpayme-field-row .wpayme-input-group-prefix{ right: 11px; color: var(--wpa-text-muted); font-weight: 600; pointer-events: none}  .wpayme-app #poststuff select[multiple]{ width: 100%; max-width: 420px; min-height: 132px; padding: 6px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); font-size: 13px; line-height: 1.6} .wpayme-app #poststuff select[multiple] option{ padding: 6px 8px; border-radius: var(--wpa-radius-sm)} .wpayme-app #poststuff select[multiple] option:checked{ background: var(--wpa-accent) linear-gradient(0deg, var(--wpa-accent) 0%, var(--wpa-accent) 100%); color: #fff}  .wpayme-ms{ position: relative; width: 100%; max-width: 420px}  .wpayme-app .wpayme-ms .wpayme-ms-native{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap} .wpayme-ms-control{ display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 5px 10px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); font-size: 13px; text-align: right; cursor: pointer} .wpayme-ms.is-open .wpayme-ms-control, .wpayme-ms-control:hover{ border-color: var(--wpa-accent)} .wpayme-ms-chips{ display: flex; flex-wrap: wrap; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0} .wpayme-ms-placeholder{ color: var(--wpa-text-faint)} .wpayme-ms-chip{ display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 9px 2px 4px; border-radius: var(--wpa-radius-pill); background: var(--wpa-accent-soft); color: var(--wpa-accent); font-size: 12px; font-weight: 500; line-height: 1.7} .wpayme-ms-remove{ display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; color: var(--wpa-accent); font-size: 14px; line-height: 1; cursor: pointer} .wpayme-ms-remove:hover{ background: var(--wpa-accent); color: #fff} .wpayme-ms-caret{ flex: 0 0 auto; display: inline-flex; color: var(--wpa-text-faint); transition: transform 0.12s ease} .wpayme-ms.is-open .wpayme-ms-caret{ transform: rotate(-180deg)} .wpayme-ms-panel{ position: absolute; z-index: 50; top: calc(100% + 4px); right: 0; left: 0; padding: 8px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); box-shadow: var(--wpa-shadow-lg)} .wpayme-app .wpayme-ms-panel .wpayme-ms-search{ width: 100%; height: 32px; margin: 0 0 6px; padding: 0 10px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); font-size: 13px} .wpayme-ms-list{ max-height: 220px; overflow-y: auto} .wpayme-ms-option{ display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--wpa-radius-sm); background: none; color: var(--wpa-text); font-size: 13px; text-align: right; cursor: pointer} .wpayme-ms-option:hover{ background: var(--wpa-surface-muted)} .wpayme-ms-check{ flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid var(--wpa-border-strong); border-radius: 4px; background: var(--wpa-surface)} .wpayme-ms-option.is-selected{ color: var(--wpa-accent); font-weight: 500} .wpayme-ms-option.is-selected .wpayme-ms-check{ border-color: var(--wpa-accent); background: var(--wpa-accent) no-repeat center / 11px 11px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")} .wpayme-ms-empty{ margin: 6px 0 2px; color: var(--wpa-text-muted); font-size: 12px; text-align: center}  .wpayme-app .ui-datepicker{ padding: 8px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow-lg); font-family: var(--wpa-font); font-size: 13px} .wpayme-app .ui-datepicker .ui-datepicker-header{ position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 8px; border: 0; background: none; color: var(--wpa-text)} .wpayme-app .ui-datepicker .ui-datepicker-title{ display: flex; align-items: center; gap: 6px; flex: 1 1 auto; margin: 0; font-size: 13px; font-weight: 600}  .wpayme-app .ui-datepicker .ui-datepicker-title select{ height: 28px; min-width: 0; max-width: none; flex: 1 1 0; padding: 0 8px 0 24px; font-size: 12px; line-height: 26px; background-position: left 6px center; background-size: 13px 13px} .wpayme-app .ui-datepicker .ui-datepicker-prev, .wpayme-app .ui-datepicker .ui-datepicker-next{ position: static; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); cursor: pointer; top: auto; right: auto; left: auto}  .wpayme-app .ui-datepicker .ui-datepicker-prev::before, .wpayme-app .ui-datepicker .ui-datepicker-next::before, .wpayme-app .ui-datepicker .ui-datepicker-prev::after, .wpayme-app .ui-datepicker .ui-datepicker-next::after{ content: none} .wpayme-app .ui-datepicker .ui-datepicker-prev:hover, .wpayme-app .ui-datepicker .ui-datepicker-next:hover{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft)}  .wpayme-app .ui-datepicker .ui-icon{ position: static; display: block; width: 16px; height: 16px; margin: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 14px 14px; text-indent: -9999px; overflow: hidden} .wpayme-app .ui-datepicker .ui-icon-circle-triangle-w{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E")} .wpayme-app .ui-datepicker .ui-icon-circle-triangle-e{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")} .wpayme-app .ui-datepicker table{ margin: 0; border-collapse: collapse} .wpayme-app .ui-datepicker th{ padding: 4px; color: var(--wpa-text-muted); font-size: 11px; font-weight: 600} .wpayme-app .ui-datepicker td a, .wpayme-app .ui-datepicker td span{ display: block; padding: 6px; border: 0; border-radius: var(--wpa-radius-sm); background: none; color: var(--wpa-text); text-align: center; text-decoration: none} .wpayme-app .ui-datepicker td a:hover{ background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .ui-datepicker td .ui-state-active{ background: var(--wpa-accent); color: #fff}  .wpayme-app .wpayme-pay-shortcode-input{ display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: auto; min-height: 0; padding: 5px 9px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text); font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 1.5; text-align: right; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease}  .wpayme-app .wpayme-pay-shortcode-input{ width: 100%; font-size: 11px} .wpayme-app .wpayme-pay-shortcode-input span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .wpayme-app .wpayme-pay-shortcode-input svg{ flex: 0 0 auto; color: var(--wpa-text-faint)} .wpayme-app .wpayme-pay-shortcode-input:hover{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft)} .wpayme-app .wpayme-pay-shortcode-input:hover svg{ color: var(--wpa-accent)} .wpayme-app .wpayme-pay-shortcode-input.is-copied{ border-color: var(--wpa-success); background: var(--wpa-success-soft); color: var(--wpa-success)}  .wpayme-app .wpayme-pay-shortcode-input.is-copied svg{ color: var(--wpa-success)}  .wpayme-app .wpayme-copy{ display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 9px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text); font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 1.5; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease} .wpayme-app .wpayme-copy> span:first-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .wpayme-app .wpayme-copy .wpayme-copy-icon{ display: flex; flex: 0 0 auto; color: var(--wpa-text-faint)} .wpayme-app .wpayme-copy svg{ width: 14px; height: 14px} .wpayme-app .wpayme-copy:hover, .wpayme-app .wpayme-copy:focus-visible{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft)} .wpayme-app .wpayme-copy:hover .wpayme-copy-icon, .wpayme-app .wpayme-copy:focus-visible .wpayme-copy-icon{ color: var(--wpa-accent)} .wpayme-app .wpayme-copy.is-copied{ border-color: var(--wpa-success); background: var(--wpa-success-soft); color: var(--wpa-success)} .wpayme-app .wpayme-copy.is-copied .wpayme-copy-icon{ color: var(--wpa-success)}  .wpayme-app .wpayme-copy--icon{ gap: 0; padding: 7px} .wpayme-app .wpayme-field-copy{ display: flex; align-items: center; gap: 8px} .wpayme-app .wpayme-field-copy input[type="text"]{ flex: 1 1 auto; margin: 0}  .wpayme-app #poststuff .form-table tr:has(> td> .wpayme-pay-payment-methods){ display: block} .wpayme-app #poststuff .form-table tr:has(> td> .wpayme-pay-payment-methods)> th{ display: block; width: auto; padding: 0 0 10px; font-size: 13px} .wpayme-app #poststuff .form-table tr:has(> td> .wpayme-pay-payment-methods)> td{ display: block; width: auto; padding: 0} .wpayme-app #poststuff .postbox .wpayme-pay-payment-methods{ width: 100%; margin: 0; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); border-collapse: separate; border-spacing: 0; background: var(--wpa-surface); overflow: hidden} .wpayme-app #poststuff .postbox .wpayme-pay-payment-methods thead th{ padding: 10px 14px; border-bottom: 1px solid var(--wpa-border); background: var(--wpa-surface); color: var(--wpa-text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-align: right; text-transform: uppercase} .wpayme-app #poststuff .postbox .wpayme-pay-payment-methods tbody td{ padding: 9px 14px; border-top: 1px solid var(--wpa-border); color: var(--wpa-text); font-size: 13px; vertical-align: middle} .wpayme-app #poststuff .postbox .wpayme-pay-payment-methods tbody tr:first-child td{ border-top: 0}  .wpayme-app #poststuff .postbox .wpayme-pay-payment-methods tbody tr, .wpayme-app #poststuff .postbox .wpayme-pay-payment-methods tbody tr.even{ background: var(--wpa-surface)} .wpayme-app #poststuff .postbox .wpayme-pay-payment-methods tbody tr.even{ background: var(--wpa-surface-muted)} .wpayme-app #poststuff .postbox .wpayme-pay-payment-methods tbody tr:hover td{ background: var(--wpa-accent-soft)}  .wpayme-app #poststuff .postbox .wpayme-pay-payment-methods thead th:not(:first-child), .wpayme-app #poststuff .postbox .wpayme-pay-payment-methods tbody td:not(:first-child){ width: 110px; text-align: center} .wpayme-app #poststuff .postbox .wpayme-pay-payment-methods tbody td:first-child{ font-weight: 500} .wpayme-app #poststuff .postbox .wpayme-pay-payment-methods .wpayme-pay-icon{ font-size: 16px; line-height: 1; vertical-align: middle}  .tippy-box{ position: relative; max-width: 260px; border-radius: var(--wpa-radius-sm, 8px); background: var(--wpa-tooltip-bg, #111827); color: var(--wpa-tooltip-text, #f9fafb); font-family: var(--wpa-font, inherit); font-size: 12px; font-weight: 400; line-height: 1.55; text-align: right; white-space: normal; outline: 0; box-shadow: 0 6px 20px rgb(0 0 0 / 0.22)} .tippy-content{ position: relative; z-index: 1; padding: 7px 11px}  .tippy-arrow{ width: 16px; height: 16px; color: var(--wpa-tooltip-bg, #111827)} .tippy-arrow::before{ content: ""; position: absolute; border-color: transparent; border-style: solid} .tippy-box[data-placement^="top"]> .tippy-arrow{ bottom: 0} .tippy-box[data-placement^="top"]> .tippy-arrow::before{ bottom: -7px; right: 0; border-width: 8px 8px 0; border-top-color: initial; transform-origin: center top} .tippy-box[data-placement^="bottom"]> .tippy-arrow{ top: 0} .tippy-box[data-placement^="bottom"]> .tippy-arrow::before{ top: -7px; right: 0; border-width: 0 8px 8px; border-bottom-color: initial; transform-origin: center bottom} .tippy-box[data-placement^="left"]> .tippy-arrow{ left: 0} .tippy-box[data-placement^="left"]> .tippy-arrow::before{ left: -7px; border-width: 8px 8px 8px 0; border-right-color: initial; transform-origin: center right} .tippy-box[data-placement^="right"]> .tippy-arrow{ right: 0} .tippy-box[data-placement^="right"]> .tippy-arrow::before{ right: -7px; border-width: 8px 0 8px 8px; border-left-color: initial; transform-origin: center left}  .tippy-box[data-state="hidden"]{ opacity: 0} .tippy-box[data-theme~="wpayme-pay"] a{ color: #c7d2fe}  .wpayme-app--dark .tippy-box, .wpayme-app--dark .tippy-arrow{ --wpa-tooltip-bg: #1f2937}  .wpayme-app .wpayme-pay-tip{ margin-right: 6px; color: var(--wpa-text-faint); font-size: 17px; vertical-align: middle; cursor: help} .wpayme-app .wpayme-pay-tip:hover{ color: var(--wpa-accent)}  .wpayme-app #submitdiv .inside{ padding: 0} .wpayme-app #submitdiv #minor-publishing, .wpayme-app #submitdiv #misc-publishing-actions{ border: 0; background: none} .wpayme-app #submitdiv #major-publishing-actions{ border-top: 1px solid var(--wpa-border); background: var(--wpa-surface-muted)} .wpayme-app #submitdiv .misc-pub-section{ padding: 10px 16px; border-bottom: 1px solid var(--wpa-border); color: var(--wpa-text-muted); font-size: 13px} .wpayme-app #submitdiv .misc-pub-section:last-of-type{ border-bottom: 0} .wpayme-app #submitdiv .misc-pub-section .dashicons{ color: var(--wpa-text-faint)} .wpayme-app #poststuff #publish, .wpayme-app #poststuff .button-primary{ height: 34px; padding: 0 18px; border: 0; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent); color: #fff; font-size: 13px; font-weight: 600; text-shadow: none; box-shadow: none} .wpayme-app #poststuff #publish:hover, .wpayme-app #poststuff .button-primary:hover{ background: var(--wpa-accent); filter: brightness(1.08)} .wpayme-app #poststuff .button, .wpayme-app #poststuff .button-secondary{ height: 32px; border-radius: var(--wpa-radius-sm); border-color: var(--wpa-border-strong); background: var(--wpa-surface); color: var(--wpa-text); box-shadow: none}  .wpayme-app #wpayme-pay-gateway-config-editor a{ color: var(--wpa-accent)}  .wpayme-app .wpayme-pay-tab{ border: 0; background: none} .wpayme-app .wpayme-pay-tab .form-table th{ padding-right: 8px} .wpayme-app .wpayme-pay-tab-block{ padding: 0 0 6px}  .wpayme-app .form-table th .wpayme-pay-tip{ float: none}  .wpayme-app .wpayme-inline-btn{ display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer} .wpayme-app .wpayme-inline-btn:hover{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-gateway-selection{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px} .wpayme-modal{ position: fixed; inset: 0; z-index: 160000; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 20px 20px; background: rgb(17 24 39 / 0.55)} .wpayme-modal[hidden]{ display: none} .wpayme-modal-panel{ width: 560px; max-width: 100%; max-height: 80vh; display: flex; flex-direction: column; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow-lg); color: var(--wpa-text); font-family: var(--wpa-font)} .wpayme-modal-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--wpa-border)} .wpayme-modal-head h2{ margin: 0; padding: 0; font-size: 15px; font-weight: 600; color: var(--wpa-text)} .wpayme-modal-close{ border: 0; background: none; color: var(--wpa-text-faint); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px} .wpayme-modal-close:hover{ color: var(--wpa-text)} .wpayme-modal-body{ padding: 16px 18px; overflow-y: auto}  .wpayme-app .wpayme-confirm, .wpayme-confirm{ align-items: center; padding: 20px} .wpayme-confirm .wpayme-confirm-panel{ width: 420px} .wpayme-confirm .wpayme-modal-body{ display: flex; align-items: flex-start; gap: 14px; padding: 18px} .wpayme-confirm-icon{ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-confirm-icon svg{ width: 20px; height: 20px} .wpayme-confirm.is-danger .wpayme-confirm-icon{ background: var(--wpa-danger-soft); color: var(--wpa-danger)} .wpayme-confirm-text{ margin: 0; padding-top: 2px; color: var(--wpa-text-muted); font-size: 13px; line-height: 1.6} .wpayme-confirm-foot{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--wpa-border); background: var(--wpa-surface-muted); border-radius: 0 0 var(--wpa-radius) var(--wpa-radius)} .wpayme-confirm-cancel, .wpayme-confirm-go{ height: 34px; padding: 0 16px; border-radius: var(--wpa-radius-sm); font-size: 13px; font-weight: 600; cursor: pointer} .wpayme-confirm-cancel{ border: 1px solid var(--wpa-border-strong); background: var(--wpa-surface); color: var(--wpa-text)} .wpayme-confirm-cancel:hover{ border-color: var(--wpa-text-faint)} .wpayme-confirm-go{ border: 0; background: var(--wpa-accent); color: #fff} .wpayme-confirm.is-danger .wpayme-confirm-go{ background: var(--wpa-danger)} .wpayme-confirm-go:hover{ filter: brightness(1.08)} .wpayme-modal-note{ margin: 0 0 10px; color: var(--wpa-text-muted); font-size: 13px; text-align: center} .wpayme-modal-cta{ display: inline-flex; align-items: center; height: 32px; padding: 0 15px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none} .wpayme-method-list{ margin: 0; padding: 0; list-style: none} .wpayme-method{ display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 13px} .wpayme-method + .wpayme-method{ border-top: 1px solid var(--wpa-border)} .wpayme-method-name{ flex: 1; font-weight: 500; color: var(--wpa-text)} .wpayme-method-state, .wpayme-method-tag{ padding: 2px 9px; border-radius: var(--wpa-radius-pill); font-size: 11px; font-weight: 600} .wpayme-method-state--on{ background: var(--wpa-success-soft); color: var(--wpa-success)} .wpayme-method-state--off{ background: var(--wpa-surface-muted); color: var(--wpa-text-muted)} .wpayme-method-tag{ background: var(--wpa-accent-soft); color: var(--wpa-accent)}  .wpayme-app #poststuff .wpayme-field-row, .wpayme-app #poststuff .wpayme-surcharge-group{ margin: 0; padding: 16px 0; border: 0; border-radius: 0; background: none} .wpayme-app #poststuff .wpayme-field-row + .wpayme-field-row, .wpayme-app #poststuff .wpayme-surcharge-group + .wpayme-surcharge-group{ border-top: 1px solid var(--wpa-border)} .wpayme-app #poststuff .wpayme-field-row> label, .wpayme-app #poststuff .wpayme-surcharge-group> label{ display: block; margin-bottom: 6px; text-align: right; color: var(--wpa-text); font-size: 13px; font-weight: 600}   .wpayme-app #poststuff .wpayme-pay-form-section{ margin-bottom: 20px; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--wpa-border); border-radius: 0; background: none; box-shadow: none}  .wpayme-app #poststuff .wpayme-pay-form-section :is(input, select, textarea){ box-shadow: none} .wpayme-app #poststuff .wpayme-pay-form-section :is(input, select, textarea):focus{ border-color: var(--wpa-accent); box-shadow: none; outline: 2px solid var(--wpa-accent-soft)} .wpayme-app #poststuff .wpayme-pay-form-section:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: 0}  .wpayme-app #poststuff .wpayme-field-row input[type="text"], .wpayme-app #poststuff .wpayme-field-row input[type="number"], .wpayme-app #poststuff .wpayme-field-row select{ width: 100%; max-width: 420px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text)} .wpayme-app #poststuff .wpayme-field-row input:focus, .wpayme-app #poststuff .wpayme-field-row select:focus{ border-color: var(--wpa-accent); outline: 2px solid var(--wpa-accent-soft); box-shadow: none}  .wpayme-app #poststuff .wpayme-toggle-container{ display: inline-flex; align-items: center; gap: 10px; text-align: right; font-weight: 500} .wpayme-app #poststuff .wpayme-field-row .wpayme-toggle-container + p, .wpayme-app #poststuff .wpayme-field-row> p, .wpayme-app #poststuff .wpayme-surcharge-group> p{ margin: 6px 0 0; max-width: 68ch; color: var(--wpa-text-muted); font-size: 12px; font-style: normal; line-height: 1.55} .wpayme-app #poststuff .wpayme-field-row em, .wpayme-app #poststuff .wpayme-surcharge-group em{ font-style: normal} .wpayme-app #poststuff .quantity-limits, .wpayme-app #poststuff .shipping-tax-settings{ gap: 12px; flex-wrap: wrap}  .wpayme-app #poststuff .postbox code{ display: inline-block; padding: 6px 10px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text); font-size: 12px}  .wpayme-app .tablenav.top{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px} .wpayme-app .tablenav.top .alignleft.actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; float: none; padding: 0; margin: 0} .wpayme-app .tablenav.top .tablenav-pages{ margin-right: auto} .wpayme-app .tablenav.top .clear{ display: none}  .wpayme-app.edit-php #posts-filter{ display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 10px} .wpayme-app.edit-php #posts-filter> .tablenav.top{ order: 1; flex: 1 1 auto; margin: 0} .wpayme-app.edit-php #posts-filter> .search-box{ order: 2; margin-right: auto}  .wpayme-app.edit-php #posts-filter> h2, .wpayme-app.edit-php #posts-filter> .wp-list-table, .wpayme-app.edit-php #posts-filter> .tablenav.bottom, .wpayme-app.edit-php #posts-filter> .clear{ order: 3; flex: 1 0 100%}  .wpayme-app.edit-php .tablenav.top .tablenav-pages{ margin-right: 0} .wpayme-app .search-box{ display: flex; align-items: center; gap: 8px; float: none; margin: 0} .wpayme-app .search-box input[type="search"]{ min-width: 220px} .wpayme-app .search-box .button{ height: 34px}  .wpayme-app .tablenav.top .subsubsub.wpayme-views{ order: -1; margin: 0; padding: 0; border: 0; background: none; gap: 2px} .wpayme-app .tablenav.top .subsubsub.wpayme-views a{ height: 32px; padding: 0 11px} .wpayme-app .tablenav.top .subsubsub.wpayme-views a:not(.current){ background: var(--wpa-surface); border: 1px solid var(--wpa-border)} .wpayme-app .tablenav.top .subsubsub.wpayme-views a.current{ border: 1px solid var(--wpa-accent)}  .wpayme-app .tablenav.top select, .wpayme-app .tablenav.top .button{ height: 34px; min-height: 34px}  .wpayme-app .tablenav.top{ row-gap: 10px}  .wpayme-app .wpayme-browse-summary{ margin: 2px 0 16px; color: var(--wpa-text-muted); font-size: 13px}  .wpayme-app .wpayme-btn{ display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer} .wpayme-app .wpayme-btn:hover{ background: var(--wpa-surface-muted); color: var(--wpa-text)} .wpayme-app .wpayme-btn--quiet{ color: var(--wpa-text-muted)}  .wpayme-app .wpayme-toolbar{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px} .wpayme-app .wpayme-toolbar-heading{ margin-left: auto} .wpayme-app .wpayme-toolbar-heading h1{ margin: 0; padding: 0; font-size: 23px; font-weight: 600; line-height: 1.25; color: var(--wpa-text)} .wpayme-app .wpayme-toolbar-sub{ margin: 2px 0 0; color: var(--wpa-text-muted); font-size: 12.5px}  .wpayme-app .wpayme-seg{ display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface)} .wpayme-app .wpayme-seg-item{ height: 30px; padding: 0 16px; border: 0; border-radius: var(--wpa-radius-pill); background: none; color: var(--wpa-text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer} .wpayme-app .wpayme-seg-item:hover{ color: var(--wpa-text)} .wpayme-app .wpayme-seg-item.is-active{ background: var(--wpa-accent); color: #fff; font-weight: 600}  .wpayme-app .wpayme-group{ display: inline-flex; align-items: center;  margin: 0 !important; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); overflow: hidden} .wpayme-app .wpayme-group-btn{ height: 36px; padding: 0 16px; border: 0; background: none; color: var(--wpa-text); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer} .wpayme-app .wpayme-group-btn + .wpayme-group-btn{ border-right: 1px solid var(--wpa-border)} .wpayme-app .wpayme-group-btn:hover{ background: var(--wpa-surface-muted); color: var(--wpa-accent)} .wpayme-app .wpayme-group.is-busy{ opacity: 0.6; pointer-events: none}  .wpayme-app .wpayme-search-field{ display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box;  height: 34px; padding: 0 12px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); color: var(--wpa-text-faint); min-width: 300px} .wpayme-app .wpayme-search-field:focus-within{ border-color: var(--wpa-accent)} .wpayme-app .wpayme-search-field input[type="search"]{ flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; min-height: 0; background: none; box-shadow: none; outline: none; color: var(--wpa-text); font-size: 13px}  .wpayme-app .wpayme-search-field input[type="search"]::-webkit-search-cancel-button{ display: none} .wpayme-app .wpayme-search-clear{ border: 0; background: none; color: var(--wpa-text-faint); font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer} .wpayme-app .wpayme-search-clear:hover{ color: var(--wpa-text)} .wpayme-app .wpayme-browse-count{ flex: 0 0 auto; padding-right: 10px; border-right: 1px solid var(--wpa-border); color: var(--wpa-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap}  .wpayme-app select.wpayme-sort{ box-sizing: border-box; height: 34px; min-height: 34px; padding: 0 14px 0 32px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background-color: var(--wpa-surface); color: var(--wpa-text); font-size: 13px; box-shadow: none} .wpayme-app select.wpayme-sort:focus{ border-color: var(--wpa-accent); outline: 2px solid var(--wpa-accent-soft); box-shadow: none} @media screen and (max-width: 1100px){ .wpayme-app .wpayme-toolbar-heading{ flex: 1 0 100%; margin-left: 0} .wpayme-app .wpayme-search-field{ flex: 1; min-width: 200px}}   .wpayme-app .wpayme-daterange{ display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); color: var(--wpa-text-faint)} .wpayme-app .wpayme-daterange input[type="date"]{ border: 0; background: none; box-shadow: none; min-height: 0; padding: 0; color: var(--wpa-text); font-size: 13px} .wpayme-app .wpayme-daterange input[type="date"]:focus{ outline: none; box-shadow: none} .wpayme-app .wpayme-export-btn{ display: inline-flex; align-items: center; gap: 8px;  align-self: center; box-sizing: border-box; min-height: 34px; padding: 0 16px; border: 1px solid var(--wpa-accent); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); color: var(--wpa-accent); font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none}  .wpayme-app .wpayme-export-btn svg{ flex: 0 0 auto; width: 16px; height: 16px} .wpayme-app .wpayme-export-btn:hover{ background: var(--wpa-accent-soft); color: var(--wpa-accent)}  .wpayme-app a.wpayme-group-btn{ display: inline-flex; align-items: center; text-decoration: none}  .wpayme-app a.wpayme-seg-item{ display: inline-flex; align-items: center; text-decoration: none} .wpayme-app a.wpayme-seg-item.is-active{ color: #fff}  .wpayme-app .tablenav.top select, .wpayme-app .search-box input[type="search"]{ border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background-color: var(--wpa-surface); color: var(--wpa-text); padding: 0 14px; box-shadow: none} .wpayme-app .tablenav.top .button, .wpayme-app .search-box .button{ height: 34px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); color: var(--wpa-text); box-shadow: none} .wpayme-app .tablenav.top .button:hover, .wpayme-app .search-box .button:hover{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft); color: var(--wpa-accent)}  .wpayme-app .tablenav.top .subsubsub.wpayme-views a{ height: 34px; border-radius: var(--wpa-radius-pill)} .wpayme-app .tablenav.top .subsubsub.wpayme-views a:not(.current){ border: 1px solid var(--wpa-border); background: var(--wpa-surface)}  .wpayme-app .wpayme-tile-note{ margin: -4px 0 0; color: var(--wpa-text-faint); font-size: 12px; line-height: 1.5}  .wpayme-app.edit-php .wrap{ display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px}  .wpayme-app.edit-php .wrap> .wp-header-end, .wpayme-app.edit-php .wrap> .notice, .wpayme-app.edit-php .wrap> .updated,  .wpayme-app.edit-php .wrap> .error, .wpayme-app.edit-php .wrap> .notice, .wpayme-app.edit-php .wrap> .updated, .wpayme-app.edit-php .wrap> #message{ order: 0; flex: 1 0 100%; min-width: 0; max-width: 100%; margin-top: 0; box-sizing: border-box} .wpayme-app.edit-php .wrap> h1.wp-heading-inline{ margin: 0} .wpayme-app.edit-php .wrap> .page-title-action{ order: 3; margin: 0 10px 0 0}  .wpayme-app.edit-php .wrap> .subsubsub{ order: 2; margin: 0 auto 0 0} .wpayme-app.edit-php .wrap> .wpayme-list-stats{ order: 4; flex: 1 0 100%; margin: 0 0 6px}  .wpayme-app.edit-php .wrap> .subtitle{ order: 4; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px 5px 6px; border: 1px solid var(--wpa-accent); border-radius: var(--wpa-radius-pill); background: var(--wpa-accent-soft); color: var(--wpa-accent); font-size: 12.5px; font-style: normal; line-height: 1.4} .wpayme-app.edit-php .wrap> .subtitle strong{ color: var(--wpa-accent); font-weight: 600}  .wpayme-app .wpayme-subtitle-clear{ display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--wpa-accent); color: #fff; font-size: 13px; line-height: 1; text-decoration: none} .wpayme-app .wpayme-subtitle-clear:hover, .wpayme-app .wpayme-subtitle-clear:focus{ color: #fff; filter: brightness(1.1)}  .wpayme-app.edit-php .wrap> .wpayme-list-stats{ order: 5}  .wpayme-app.edit-php .wrap> .search-box, .wpayme-app.edit-php .wrap> form, .wpayme-app.edit-php .wrap> h2, .wpayme-app.edit-php .wrap> .clear{ order: 5; flex: 1 0 100%}  .wpayme-app .wpayme-list-stats{ color: var(--wpa-text-muted); font-size: 13px; line-height: 1.5; max-width: 80ch}   .wpayme-app.post-type-wpayme_payment .tablenav.top .pagination-links, .wpayme-app.post-type-wpayme_pay_subscr .tablenav.top .pagination-links{ display: none}  .wpayme-app .tablenav.top .button.is-dirty, .wpayme-app .search-box .button.is-dirty{ border-color: var(--wpa-accent); background: var(--wpa-accent); color: #fff; font-weight: 600} .wpayme-app .tablenav.top .button.is-dirty:hover, .wpayme-app .search-box .button.is-dirty:hover{ background: var(--wpa-accent); color: #fff; filter: brightness(1.08)}  .wpayme-app .wpayme-list-busy .wp-list-table, .wpayme-app .wpayme-list-busy .tablenav.bottom{ opacity: 0.55; transition: opacity 0.12s ease; pointer-events: none}  .wpayme-palette{ position: fixed; inset: 0; z-index: 160001; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; background: rgb(17 24 39 / 0.5)} .wpayme-palette[hidden]{ display: none} .wpayme-palette-panel{ width: 560px; max-width: 100%; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow-lg); font-family: var(--wpa-font)} .wpayme-palette-head{ display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--wpa-border); color: var(--wpa-text-faint)} .wpayme-palette-input{ flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; outline: none; color: var(--wpa-text); font-size: 15px} .wpayme-palette-input::-webkit-search-cancel-button{ display: none} .wpayme-palette-list{ overflow-y: auto; padding: 6px} .wpayme-palette-item{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--wpa-radius-sm); color: var(--wpa-text); text-decoration: none} .wpayme-palette-item.is-active{ background: var(--wpa-accent-soft)} .wpayme-palette-icon{ display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--wpa-radius-sm); border: 1px solid var(--wpa-border); background: var(--wpa-surface); color: var(--wpa-text-muted)} .wpayme-palette-item.is-active .wpayme-palette-icon{ border-color: var(--wpa-accent); color: var(--wpa-accent)} .wpayme-palette-icon svg{ width: 17px; height: 17px} .wpayme-palette-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0} .wpayme-palette-label{ font-size: 13.5px; font-weight: 600; color: var(--wpa-text)} .wpayme-palette-hint{ font-size: 12px; color: var(--wpa-text-muted)} .wpayme-palette-empty{ margin: 0; padding: 28px; text-align: center; color: var(--wpa-text-muted); font-size: 13px}  .wpayme-app .wpayme-help-launcher{ position: fixed; left: 0; top: 50%; z-index: 100; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; transform: translateY(-50%); border: 1px solid var(--wpa-border); border-left: 0; border-radius: 0 var(--wpa-radius) var(--wpa-radius) 0; background: var(--wpa-surface); color: var(--wpa-text-muted); box-shadow: 2px 0 10px rgb(0 0 0 / 0.07); cursor: pointer} .wpayme-app .wpayme-help-launcher:hover, .wpayme-app .wpayme-help-launcher.is-open{ color: var(--wpa-accent); border-color: var(--wpa-accent)} .wpayme-app .wpayme-help-launcher svg{ width: 19px; height: 19px}  .wpayme-app .wpayme-help-dot{ position: absolute; left: 7px; bottom: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--wpa-success)} .wpayme-help{ position: fixed; inset: 0 0 0 auto; z-index: 160002; width: 400px; max-width: 100%; display: flex} .wpayme-help[hidden]{ display: none} .wpayme-help-panel{ display: flex; flex-direction: column; width: 100%; border-right: 1px solid var(--wpa-border); background: var(--wpa-surface); box-shadow: 12px 0 34px rgb(0 0 0 / 0.14); font-family: var(--wpa-font)} .wpayme-help-head{ position: relative; padding: 20px 20px 16px; border-bottom: 1px solid var(--wpa-border)} .wpayme-help-eyebrow{ display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--wpa-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase} .wpayme-help-eyebrow svg{ width: 14px; height: 14px} .wpayme-help-close{ position: absolute; top: 16px; left: 16px; width: 28px; height: 28px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text-muted); font-size: 17px; line-height: 1; cursor: pointer} .wpayme-help-close:hover{ color: var(--wpa-text)} .wpayme-help-head h2{ margin: 0; padding: 0; font-size: 19px; font-weight: 600; color: var(--wpa-text)} .wpayme-help-sub{ margin: 4px 0 14px; color: var(--wpa-text-muted); font-size: 13px} .wpayme-help-tabs{ box-sizing: border-box; width: 100%; margin-bottom: 12px} .wpayme-help-tabs .wpayme-seg-item{ flex: 1; justify-content: center} .wpayme-help-search{ box-sizing: border-box; width: 100%; min-width: 0} .wpayme-help-body{ flex: 1; overflow-y: auto; padding: 16px 20px 20px} .wpayme-help-lead{ display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px; border-radius: var(--wpa-radius); background: var(--wpa-accent-soft); color: var(--wpa-text); font-size: 13px; line-height: 1.55} .wpayme-help-lead strong{ display: block; color: var(--wpa-text)} .wpayme-help-lead-icon{ display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-accent)} .wpayme-help-lead-icon svg{ width: 16px; height: 16px} .wpayme-help-group{ margin: 20px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wpa-text-faint)} .wpayme-help-list{ margin: 0; padding: 0; list-style: none; counter-reset: none} .wpayme-help-item{ display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--wpa-border)} .wpayme-help-list> .wpayme-help-item:first-child{ border-top: 0} .wpayme-help-num{ display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--wpa-accent-soft); color: var(--wpa-accent); font-size: 11px; font-weight: 700} .wpayme-help-text{ display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.55; color: var(--wpa-text-muted)} .wpayme-help-text strong{ color: var(--wpa-text); font-size: 13.5px; font-weight: 600}  .wpayme-help-steps{ margin: 6px 0 2px; padding-right: 18px; list-style: decimal; color: var(--wpa-text-muted)} .wpayme-help-steps li{ margin: 0 0 3px; padding-right: 2px} .wpayme-help-steps li::marker{ color: var(--wpa-accent); font-weight: 700}  .wpayme-help-list--plain .wpayme-help-item{ display: block; padding: 0} .wpayme-help-disclosure> summary{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; color: var(--wpa-text); font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none} .wpayme-help-disclosure> summary::-webkit-details-marker{ display: none} .wpayme-help-disclosure> summary::after{ content: "+"; flex: none; color: var(--wpa-text-faint); font-weight: 400; font-size: 16px} .wpayme-help-disclosure[open]> summary::after{ content: "\2212"} .wpayme-help-disclosure> .wpayme-help-text{ padding: 0 0 12px} .wpayme-help-empty{ margin: 0; padding: 26px 0; text-align: center; color: var(--wpa-text-muted); font-size: 13px} .wpayme-help-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--wpa-border); color: var(--wpa-text-muted); font-size: 12.5px} .wpayme-help-foot a{ color: var(--wpa-accent); font-weight: 600; text-decoration: none} @media screen and (max-width: 600px){ .wpayme-help{ width: 100%}}  .wpayme-app select:not([multiple]):not([size]){ appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-left: 34px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 11px center; background-size: 15px 15px; text-overflow: ellipsis; cursor: pointer} .wpayme-app--dark select:not([multiple]):not([size]){ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")} .wpayme-app select:not([multiple]):not([size]):hover{ border-color: var(--wpa-border-strong)} .wpayme-app select:not([multiple]):not([size]):focus{ border-color: var(--wpa-accent); outline: 2px solid var(--wpa-accent-soft); outline-offset: 0; box-shadow: none} .wpayme-app select:disabled{ opacity: 0.6; cursor: not-allowed}  .wpayme-app select:not([multiple]):not([size]), .wpayme-app .form-table select:not([multiple]):not([size]), .wpayme-app .wpayme-settings-card .form-table select:not([multiple]):not([size]), .wpayme-app #poststuff .postbox .form-table select:not([multiple]):not([size]), .wpayme-app #poststuff .wpayme-field-row select:not([multiple]):not([size]){ height: 34px; min-height: 34px; padding: 0 11px 0 32px; font-size: 13px; line-height: 32px; vertical-align: middle}  .wpayme-app #wpayme_gateway_id, .wpayme-app select.regular-text, .wpayme-app .form-table select{ min-width: 240px; max-width: 380px}  .wpayme-app select option{ padding: 6px 10px; color: var(--wpa-text); background: var(--wpa-surface)}  .wpayme-app #submitdiv #major-publishing-actions{ display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 16px} .wpayme-app #major-publishing-actions .clear{ display: none}  .wpayme-app #major-publishing-actions #delete-action{ order: 2; flex: 1 0 100%; float: none; line-height: 1} .wpayme-app #major-publishing-actions #publishing-action{ order: 1; display: flex; align-items: center; gap: 8px; float: none; margin-right: auto} .wpayme-app #major-publishing-actions #publishing-action .button{ margin: 0}  .wpayme-app #major-publishing-actions .spinner:not(.is-active){ display: none} .wpayme-app #poststuff #save-post, .wpayme-app #poststuff #publish, .wpayme-app #major-publishing-actions .submitdelete{ padding-right: 32px; background-repeat: no-repeat; background-position: right 11px center; background-size: 15px 15px} .wpayme-app #poststuff #save-post{ height: 34px; padding-left: 14px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background-color: var(--wpa-surface); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8'/%3E%3Cpath d='M7 3v5h8'/%3E%3C/svg%3E"); color: var(--wpa-text); font-size: 13px; line-height: 32px}  .wpayme-app #poststuff #save-post:hover, .wpayme-app #poststuff #save-post:focus{ border-color: var(--wpa-accent); background-color: var(--wpa-accent-soft); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8'/%3E%3Cpath d='M7 3v5h8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 15px 15px; color: var(--wpa-accent)} .wpayme-app #poststuff #publish{ padding-left: 18px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E")}  .wpayme-app #poststuff #publish:hover, .wpayme-app #poststuff #publish:focus, .wpayme-app #poststuff #publish:active{ background-color: var(--wpa-accent); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 15px 15px; filter: brightness(1.08)} .wpayme-app #poststuff .button-primary:hover, .wpayme-app #poststuff .button-primary:focus, .wpayme-app #poststuff .button-primary:active{ background-color: var(--wpa-accent); border-color: var(--wpa-accent)}  .wpayme-app #publishing-action .wpayme-icon-only{ display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background-color: var(--wpa-surface); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; font-size: 0; line-height: 0} .wpayme-app #publishing-action .wpayme-icon-only:hover{ border-color: var(--wpa-accent); background-color: var(--wpa-accent-soft)} .wpayme-app #major-publishing-actions .submitdelete{ display: inline-flex; align-items: center; height: 26px; padding-left: 8px; border-radius: var(--wpa-radius-sm); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3C/svg%3E");  padding-right: 24px; background-position: right 6px center; background-size: 13px 13px; color: var(--wpa-text-muted); font-size: 12px; text-decoration: none}  .wpayme-app #major-publishing-actions .submitdelete:hover{ background-color: var(--wpa-danger-soft); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3C/svg%3E"); color: var(--wpa-danger)} .wpayme-app--dark #poststuff #save-post{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8'/%3E%3Cpath d='M7 3v5h8'/%3E%3C/svg%3E")} .wpayme-app--dark #publishing-action .wpayme-icon-only{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}  .wpayme-app #minor-publishing-actions:empty, .wpayme-app #minor-publishing-actions.is-empty{ display: none}  .wpayme-app #submitdiv .misc-pub-section{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px} .wpayme-app #submitdiv #post-status-display, .wpayme-app #submitdiv #post-visibility-display, .wpayme-app #submitdiv #timestamp{ color: var(--wpa-text); font-weight: 600} .wpayme-app #submitdiv #timestamp b{ font-weight: 600}  .wpayme-app #submitdiv .misc-pub-section> a[href^="#"]{ margin-right: auto; padding: 3px 10px; border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 12px; text-decoration: none} .wpayme-app #submitdiv .misc-pub-section> a[href^="#"]:hover{ background: var(--wpa-accent-soft); color: var(--wpa-accent)}  .wpayme-app #submitdiv #post-status-select, .wpayme-app #submitdiv #post-visibility-select, .wpayme-app #submitdiv #timestampdiv{ flex: 0 0 100%; margin: 4px 0 0; padding: 10px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted)} .wpayme-app #submitdiv .timestamp-wrap input[type="text"]{ height: 30px; padding: 0 6px} .wpayme-app #submitdiv .button-cancel{ color: var(--wpa-text-muted); text-decoration: none}  .wpayme-app :is(a, button, .button, input[type="submit"], input[type="button"]):focus, .wpayme-app :is(a, button, .button, input[type="submit"], input[type="button"]):focus-visible{ outline: none; box-shadow: none}  .wpayme-app .wpayme-pill:focus, .wpayme-app .wpayme-pill:focus-visible, .wpayme-app .wpayme-icon-btn:focus, .wpayme-app .wpayme-icon-btn:focus-visible{ border-radius: var(--wpa-radius-pill)} .wpayme-app .wpayme-palette-item:focus, .wpayme-app .wpayme-palette-item:focus-visible, .wpayme-app .wpayme-modal-cta:focus, .wpayme-app .wpayme-modal-cta:focus-visible, .wpayme-app .wpayme-help-close:focus, .wpayme-app .wpayme-help-close:focus-visible{ border-radius: var(--wpa-radius-sm)} .wpayme-app .wpayme-switch:focus, .wpayme-app .wpayme-switch:focus-visible{ border-color: inherit}  @media screen and (min-width: 851px){  .wpayme-app #poststuff #post-body.columns-2{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; margin-left: 0} .wpayme-app #poststuff #post-body.columns-2> #post-body-content, .wpayme-app #poststuff #post-body.columns-2> #postbox-container-2{ grid-column: 1; float: none; width: auto; margin: 0} .wpayme-app #poststuff #post-body.columns-2> #postbox-container-1{ grid-column: 2; grid-row: 1 / span 2; float: none; width: auto; margin: 0; position: sticky;  top: 46px}}  .wpayme-app .wpayme-switch.is-busy, .wpayme-app .wpayme-group-btn.is-busy{ position: relative; color: transparent; pointer-events: none} .wpayme-app .wpayme-switch.is-busy::after, .wpayme-app .wpayme-group-btn.is-busy::after{ content: ""; position: absolute; inset: 0; box-sizing: border-box; width: 14px; height: 14px; margin: auto; border: 2px solid var(--wpa-border-strong); border-top-color: var(--wpa-accent); border-radius: 50%; animation: wpayme-spin 0.6s linear infinite}  .wpayme-app .wpayme-switch.is-busy::before{ opacity: 0} .wpayme-app .wpayme-switch.is-busy::after{ border-color: rgb(255 255 255 / 0.45); border-top-color: #fff} @keyframes wpayme-spin{ to{ transform: rotate(-360deg)}} @media (prefers-reduced-motion: reduce){ .wpayme-app .wpayme-switch.is-busy::after, .wpayme-app .wpayme-group-btn.is-busy::after{ animation-duration: 2s}}  .wpayme-app .wpayme-topbar-cta{ display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: var(--wpa-radius-pill); background: var(--wpa-accent); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none} .wpayme-app .wpayme-topbar-cta:hover, .wpayme-app .wpayme-topbar-cta:focus{ color: #fff; filter: brightness(1.08)} .wpayme-app .wpayme-topbar-cta svg{ width: 15px; height: 15px} .wpayme-app .wpayme-menu{ position: relative} .wpayme-app .wpayme-menu-toggle{ display: inline-flex; align-items: center; gap: 7px; cursor: pointer} .wpayme-app .wpayme-menu-caret{ display: inline-flex; color: var(--wpa-text-faint); transition: transform 0.15s ease} .wpayme-app .wpayme-menu-toggle[aria-expanded="true"] .wpayme-menu-caret{ transform: rotate(-180deg)} .wpayme-app .wpayme-menu-panel{ position: absolute; top: calc(100% + 8px); left: 0; z-index: 120; width: 260px; max-height: 60vh; overflow-y: auto; padding: 6px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow-lg)} .wpayme-app .wpayme-menu-panel[hidden]{ display: none} .wpayme-app .wpayme-menu-title{ margin: 6px 10px 6px; color: var(--wpa-text-faint); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase} .wpayme-app .wpayme-menu-list{ margin: 0; padding: 0; list-style: none} .wpayme-app .wpayme-menu-list a{ display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--wpa-radius-sm); color: var(--wpa-text); font-size: 13px; text-decoration: none} .wpayme-app .wpayme-menu-list a:hover{ background: var(--wpa-surface-muted)} .wpayme-app .wpayme-menu-dot{ flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--wpa-success)} .wpayme-app .wpayme-menu-dot--test{ background: var(--wpa-warn)} .wpayme-app .wpayme-menu-name{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .wpayme-app .wpayme-menu-mode{ flex: 0 0 auto; padding: 1px 7px; border-radius: var(--wpa-radius-pill); background: var(--wpa-warn-soft); color: var(--wpa-warn); font-size: 10px; font-weight: 700; text-transform: uppercase} .wpayme-app .wpayme-menu-empty{ margin: 0; padding: 18px 10px; text-align: center; color: var(--wpa-text-muted); font-size: 13px} .wpayme-app .wpayme-menu-foot{ display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 10px; border-top: 1px solid var(--wpa-border); color: var(--wpa-accent); font-size: 13px; font-weight: 600; text-decoration: none}  .wpayme-app .wpayme-shortcode{ display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted)}  .wpayme-app .wpayme-shortcode code, .wpayme-app #poststuff .postbox .wpayme-shortcode code{ flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--wpa-text); font-size: 12px; line-height: 1.6;  white-space: normal; overflow-wrap: anywhere} .wpayme-app .wpayme-shortcode-copy{ position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text-muted); cursor: pointer; transition: color 0.12s ease, background 0.12s ease} .wpayme-app .wpayme-shortcode-copy:hover{ color: var(--wpa-accent); background: var(--wpa-accent-soft)} .wpayme-app .wpayme-shortcode-copy.is-copied{ background: var(--wpa-success-soft)}  .wpayme-app .wpayme-shortcode-copy.is-copied svg{ display: none} .wpayme-app .wpayme-shortcode-copy.is-copied::after{ content: ""; width: 6px; height: 11px; border: solid var(--wpa-success); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg)}  .wpayme-app #poststuff .wpayme-coupon-options-container{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px} .wpayme-app #poststuff .wpayme-coupon-options-container> h3{ grid-column: 1 / -1; margin: 26px 0 2px; padding: 0 0 8px; border-bottom: 1px solid var(--wpa-border); color: var(--wpa-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase} .wpayme-app #poststuff .wpayme-coupon-options-container> h3:first-child{ margin-top: 0}  .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row{ display: flex; flex-direction: column; margin: 0; padding: 14px 0 4px; border-top: 0} .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row> label{ margin-bottom: 2px} .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-description{ margin: 0 0 10px; max-width: 46ch; color: var(--wpa-text-muted); font-size: 12px; font-style: normal; line-height: 1.45} .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row> input, .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row> select, .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-input-group, .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-ms, .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-toggle-switch{ margin-top: auto}  .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row input[type="text"], .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row input[type="number"], .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row select{ width: 100%; max-width: none}  .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row:has(input[type="radio"]), .wpayme-app #poststuff .wpayme-coupon-options-container .specific-forms-container{ grid-column: 1 / -1}  .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row:has(input[type="radio"]){ display: block} .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row br{ display: none}  .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row label:has(> input[type="radio"] ){ display: inline-flex; align-items: center; gap: 9px; margin: 0 0 0 10px; padding: 11px 16px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease} .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row label:has(> input[type="radio"] ):hover{ border-color: var(--wpa-accent)} .wpayme-app #poststuff .wpayme-coupon-options-container .wpayme-field-row label:has(> input[type="radio"]:checked ){ border-color: var(--wpa-accent); background: var(--wpa-accent-soft); color: var(--wpa-accent)}  @media screen and (max-width: 960px){ .wpayme-app #poststuff .wpayme-coupon-options-container{ grid-template-columns: minmax(0, 1fr)}}  @media screen and (max-width: 782px){ .wpayme-app #wpbody-content{ gap: 0; padding: 12px 0 32px 10px} .wpayme-topbar{ gap: 8px; padding: 10px 12px}  .wpayme-topbar-actions{ width: 100%; margin-right: 0}  .wpayme-app .wpayme-card-body:has(> .wpayme-table ){ overflow-x: auto} .wpayme-app .wpayme-card-body> .wpayme-table{ min-width: 460px} .wpayme-app .wpayme-table th, .wpayme-app .wpayme-table td{ padding: 9px 12px}  .wpayme-app .wrap> h1.wp-heading-inline{ display: block; margin-left: 0} .wpayme-app .wrap> .page-title-action, .wpayme-app.post-php .wrap> .page-title-action, .wpayme-app.post-new-php .wrap> .page-title-action{ float: none; display: flex; justify-content: center; width: 100%; margin: 10px 0 4px; box-sizing: border-box}  .wpayme-reports-filter-row> .wpayme-field, .wpayme-app .wpayme-field select, .wpayme-app .wpayme-field input[type="date"]{ width: 100%; min-width: 0} .wpayme-reports-filter-actions{ width: 100%; margin-right: 0}} @media screen and (max-width: 600px){  .wpayme-app .wpayme-topbar-cta{ padding: 0 12px} .wpayme-app .wpayme-pill{ font-size: 11px}  .wpayme-app #wpbody-content> .wpayme-sidebar{ width: min(90vw, 300px)}}  @media screen and (max-width: 782px){ .wpayme-app .wp-list-table thead th:not(.check-column):not(.column-primary), .wpayme-app .wp-list-table tfoot th:not(.check-column):not(.column-primary){ display: none} .wpayme-app .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary):not(.check-column){ display: none} .wpayme-app .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary):not(.check-column)::before{ display: inline-block}  .wpayme-app .search-box{ display: flex; flex-wrap: nowrap; gap: 8px; align-items: center}  .wpayme-app .search-box input[type="search"]{ flex: 1 1 auto; width: auto; min-width: 0} .wpayme-app .search-box input[type="submit"]{ flex: 0 0 auto}}  .wpayme-qv-scrim{ position: fixed; z-index: 100000; inset: 0; background: rgb(15 17 21 / 0.35)} .wpayme-qv{ position: fixed; z-index: 100001; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; width: min(560px, 100vw); background: var(--wpa-surface); border-right: 1px solid var(--wpa-border); box-shadow: 12px 0 32px rgb(16 24 40 / 0.12); transform: translateX(-100%); visibility: hidden; transition: transform 0.22s ease, visibility 0.22s; font-family: var(--wpa-font); color: var(--wpa-text)} .wpayme-qv.is-open{ transform: none; visibility: visible} .wpayme-qv:focus{ outline: none}  .wpayme-quick-view-open{ overflow: hidden} .wpayme-qv-head{ display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--wpa-border)} .wpayme-qv-headings{ min-width: 0; flex: 1 1 auto} .wpayme-qv-title-row{ display: flex; align-items: center; gap: 10px} .wpayme-qv-head h2{ margin: 0; font-size: 18px; font-weight: 700; color: var(--wpa-text)} .wpayme-qv-status{ padding: 3px 10px; border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase} .wpayme-qv-subtitle{ margin: 4px 0 0; color: var(--wpa-text-muted); font-size: 13px; overflow-wrap: anywhere} .wpayme-qv-close{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text-muted); cursor: pointer} .wpayme-qv-close:hover{ background: var(--wpa-surface-muted); color: var(--wpa-text)} .wpayme-qv-body{ flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px} .wpayme-qv-section{ padding: 16px 0; border-bottom: 1px solid var(--wpa-border)} .wpayme-qv-section:last-child{ border-bottom: 0} .wpayme-qv-section h3{ margin: 0 0 10px; color: var(--wpa-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase}  .wpayme-qv-section-body table{ width: 100%; border-collapse: collapse; font-size: 13px} .wpayme-qv-section-body table.wpayme-pay-table-striped th, .wpayme-qv-section-body table th, .wpayme-qv-section-body table td{ padding: 7px 0 7px 10px; text-align: right; vertical-align: top; border-bottom: 1px solid var(--wpa-border); overflow-wrap: anywhere} .wpayme-qv-section-body th{ width: 38%; color: var(--wpa-text-muted); font-weight: 500} .wpayme-qv-section-body tr:last-child th, .wpayme-qv-section-body tr:last-child td{ border-bottom: 0}  .wpayme-qv-section-body .wpayme-pay-payment-lines, .wpayme-qv-section-body .wpayme-pay-subscription-payments{ display: block; overflow-x: auto; white-space: nowrap} .wpayme-qv-loading, .wpayme-qv-error{ margin: 18px 0; color: var(--wpa-text-muted); font-size: 13px} .wpayme-qv-error{ color: var(--wpa-danger)} .wpayme-qv-foot{ flex: 0 0 auto; padding: 14px 20px; border-top: 1px solid var(--wpa-border); background: var(--wpa-surface-muted)} .wpayme-qv-edit{ display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--wpa-accent); border-radius: var(--wpa-radius-pill); color: var(--wpa-accent); font-size: 13px; font-weight: 600; text-decoration: none} .wpayme-qv-edit:hover, .wpayme-qv-edit:focus{ background: var(--wpa-accent-soft); color: var(--wpa-accent)}  .wpayme-app.post-type-wpayme_payment #the-list> tr, .wpayme-app.post-type-wpayme_pay_subscr #the-list> tr, .wpayme-app.post-type-wpayme_coupon #the-list> tr, .wpayme-app.post-type-wpayme_gateway #the-list> tr, .wpayme-app.post-type-wpayme_pay_form #the-list> tr{ cursor: pointer} .wpayme-app.post-type-wpayme_payment #the-list> tr:hover, .wpayme-app.post-type-wpayme_pay_subscr #the-list> tr:hover, .wpayme-app.post-type-wpayme_coupon #the-list> tr:hover, .wpayme-app.post-type-wpayme_gateway #the-list> tr:hover, .wpayme-app.post-type-wpayme_pay_form #the-list> tr:hover{ background: var(--wpa-accent-soft)} .wpayme-app.post-type-wpayme_payment #the-list> tr> td:last-child, .wpayme-app.post-type-wpayme_pay_subscr #the-list> tr> td:last-child, .wpayme-app.post-type-wpayme_coupon #the-list> tr> td:last-child, .wpayme-app.post-type-wpayme_gateway #the-list> tr> td:last-child, .wpayme-app.post-type-wpayme_pay_form #the-list> tr> td:last-child{ position: relative; padding-left: 26px} .wpayme-app.post-type-wpayme_payment #the-list> tr> td:last-child::after, .wpayme-app.post-type-wpayme_pay_subscr #the-list> tr> td:last-child::after, .wpayme-app.post-type-wpayme_coupon #the-list> tr> td:last-child::after, .wpayme-app.post-type-wpayme_gateway #the-list> tr> td:last-child::after, .wpayme-app.post-type-wpayme_pay_form #the-list> tr> td:last-child::after{ content: ""; position: absolute; top: 50%; left: 10px; width: 7px; height: 7px; margin-top: -4px; border: solid var(--wpa-text-faint); border-width: 2px 0 0 2px; transform: rotate(-45deg); opacity: 0; transition: opacity 0.12s ease} .wpayme-app.post-type-wpayme_payment #the-list> tr:hover> td:last-child::after, .wpayme-app.post-type-wpayme_pay_subscr #the-list> tr:hover> td:last-child::after, .wpayme-app.post-type-wpayme_coupon #the-list> tr:hover> td:last-child::after, .wpayme-app.post-type-wpayme_gateway #the-list> tr:hover> td:last-child::after, .wpayme-app.post-type-wpayme_pay_form #the-list> tr:hover> td:last-child::after{ opacity: 1}  .wpayme-app .wpayme-row-source{ display: block; margin-top: 2px; color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-row-source a, .wpayme-app .column-wpayme_payment_gateway a, .wpayme-app .column-wpayme_subscription_gateway a{ color: var(--wpa-text-muted); text-decoration: none} .wpayme-app .wpayme-row-source a:hover, .wpayme-app .column-wpayme_payment_gateway a:hover, .wpayme-app .column-wpayme_subscription_gateway a:hover{ color: var(--wpa-accent); text-decoration: underline}  .wpayme-app .wpayme-pay-table-responsive{ scrollbar-width: thin; scrollbar-color: var(--wpa-border-strong) transparent; overscroll-behavior-x: contain; padding-bottom: 2px} .wpayme-app .wpayme-pay-table-responsive::-webkit-scrollbar{ height: 8px} .wpayme-app .wpayme-pay-table-responsive::-webkit-scrollbar-track{ background: transparent} .wpayme-app .wpayme-pay-table-responsive::-webkit-scrollbar-thumb{ border-radius: 4px; background: var(--wpa-border-strong)} .wpayme-app .wpayme-pay-table-responsive::-webkit-scrollbar-thumb:hover{ background: var(--wpa-text-faint)}  .wpayme-app .wpayme-customer-email{ display: block; margin-top: 2px; font-size: 12px; overflow-wrap: anywhere} .wpayme-app .wpayme-customer-email a{ color: var(--wpa-text-muted); text-decoration: none} .wpayme-app .wpayme-customer-email a:hover{ color: var(--wpa-accent); text-decoration: underline}  .wpayme-app .wpayme-customer-stats .wpayme-stat-label{ color: var(--wpa-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase} .wpayme-app .wpayme-customer-stats .wpayme-stat-value{ font-size: 16px; font-weight: 600; line-height: 1.3} .wpayme-app .wpayme-customer-link{ font-weight: 600; text-decoration: none} .wpayme-app .wpayme-customers-table td{ vertical-align: top}  .wpayme-app .wpayme-avatar{ position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--wpayme-avatar-size, 32px); height: var(--wpayme-avatar-size, 32px); border-radius: 50%; background: hsl(var(--wpayme-avatar-hue, 220) 70% 92%); color: hsl(var(--wpayme-avatar-hue, 220) 45% 32%); font-size: calc(var(--wpayme-avatar-size, 32px) * 0.38); font-weight: 600; line-height: 1; letter-spacing: 0.02em; overflow: hidden; box-shadow: inset 0 0 0 1px hsl(var(--wpayme-avatar-hue, 220) 40% 50% / 0.15); user-select: none} .wpayme-app .wpayme-avatar img{ position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover} .wpayme-app.wpayme-app--dark .wpayme-avatar{ background: hsl(var(--wpayme-avatar-hue, 220) 35% 24%); color: hsl(var(--wpayme-avatar-hue, 220) 80% 84%)} .wpayme-app .wpayme-customer-cell{ display: flex; align-items: center; gap: 10px} .wpayme-app .wpayme-customer-cell> span{ display: flex; flex-direction: column; min-width: 0} .wpayme-app .wpayme-customer-heading{ display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center} .wpayme-app .wpayme-customer-heading> .wpayme-avatar{ grid-row: span 2}  .wpayme-app .wpayme-pagination{ display: flex; justify-content: center; gap: 6px; margin-top: 18px} .wpayme-app .wpayme-pagination .page-numbers{ display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); font-size: 13px; text-decoration: none} .wpayme-app .wpayme-pagination .page-numbers:hover{ border-color: var(--wpa-accent); color: var(--wpa-accent)} .wpayme-app .wpayme-pagination .page-numbers.current{ border-color: var(--wpa-accent); background: var(--wpa-accent); color: #fff} .wpayme-app .wpayme-pagination .page-numbers.dots{ border-color: transparent; background: none}  .wpayme-app .wpayme-fields-intro{ margin: 0 0 14px; color: var(--wpa-text-muted); font-size: 13px} .wpayme-app .wpayme-fields-list{ display: grid; gap: 10px} .wpayme-app .wpayme-field{ border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); overflow: hidden} .wpayme-app .wpayme-field-head{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--wpa-border); background: var(--wpa-surface-muted)} .wpayme-app .wpayme-field-type{ padding: 2px 8px; border-radius: var(--wpa-radius-pill); background: var(--wpa-accent-soft); color: var(--wpa-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase} .wpayme-app .wpayme-field-title{ flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap} .wpayme-app .wpayme-field-tools{ display: flex; gap: 4px} .wpayme-app .wpayme-field-tool{ width: 26px; height: 26px; padding: 0; border: 1px solid var(--wpa-border-strong); border-radius: 6px; background: var(--wpa-surface); color: var(--wpa-text-muted); font-size: 13px; line-height: 1; cursor: pointer} .wpayme-app .wpayme-field-tool:hover:not(:disabled){ border-color: var(--wpa-accent); color: var(--wpa-accent)} .wpayme-app .wpayme-field-tool:disabled{ opacity: 0.4; cursor: default} .wpayme-app .wpayme-field-body{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding: 14px 12px} .wpayme-app .wpayme-field-control{ display: flex; flex-direction: column; gap: 4px; font-size: 12px} .wpayme-app .wpayme-field-control> span{ color: var(--wpa-text-muted); font-weight: 600} .wpayme-app #poststuff .wpayme-field-control input[type="text"], .wpayme-app #poststuff .wpayme-field-control select, .wpayme-app #poststuff .wpayme-field-control textarea{ width: 100%; max-width: none; margin: 0} .wpayme-app .wpayme-field-control--check{ flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 6px} .wpayme-app .wpayme-field-control--wide{ grid-column: 1 / -1} .wpayme-app .wpayme-field-condition-row{ display: flex; flex-wrap: wrap; gap: 8px} .wpayme-app .wpayme-field-condition-row> *{ flex: 1 1 160px; min-width: 0} .wpayme-app .wpayme-fields-add{ display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--wpa-border)} .wpayme-app .wpayme-fields-empty{ margin: 0; padding: 18px; border: 1px dashed var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); color: var(--wpa-text-muted); font-size: 13px; text-align: center}  .wpayme-app .wpayme-refund-form{ margin: 0 0 18px; padding: 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted)} .wpayme-app .wpayme-refund-available{ margin: 0 0 10px; color: var(--wpa-text-muted); font-size: 13px} .wpayme-app .wpayme-refund-row{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px} .wpayme-app .wpayme-refund-control{ display: flex; flex-direction: column; gap: 4px; font-size: 12px} .wpayme-app .wpayme-refund-control> span{ color: var(--wpa-text-muted); font-weight: 600} .wpayme-app .wpayme-refund-control--grow{ flex: 1 1 220px; min-width: 0} .wpayme-app #poststuff .wpayme-refund-control input{ width: 100%; max-width: none; margin: 0; min-height: 34px} .wpayme-app .wpayme-refund-unavailable{ margin: 0 0 14px; padding: 10px 12px; border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 13px}  .wpayme-app #poststuff .wpayme-pay-table{ border-collapse: collapse; font-size: 13px} .wpayme-app #poststuff .wpayme-pay-table thead th{ padding: 8px 0 8px 14px; border-bottom: 1px solid var(--wpa-border); color: var(--wpa-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap} .wpayme-app #poststuff .wpayme-pay-table tbody td{ padding: 12px 0 12px 14px; border-bottom: 1px solid var(--wpa-border); vertical-align: top} .wpayme-app #poststuff .wpayme-pay-table thead th:last-child, .wpayme-app #poststuff .wpayme-pay-table tbody td:last-child, .wpayme-app #poststuff .wpayme-pay-table tfoot td:last-child{ padding-left: 0}  .wpayme-app #poststuff .wpayme-pay-table .wpayme-col-num{ text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap}  .wpayme-app #poststuff .wpayme-pay-table .wpayme-col-id{ color: var(--wpa-text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: nowrap} .wpayme-app #poststuff .wpayme-pay-table tbody tr:hover td{ background: var(--wpa-surface-muted)} .wpayme-app #poststuff .wpayme-pay-table tbody tr:last-child td{ border-bottom: 0}  .wpayme-app #poststuff .wpayme-pay-table tfoot td{ padding: 12px 0 4px 14px; border-top: 2px solid var(--wpa-border-strong); font-weight: 600; vertical-align: top} .wpayme-app #poststuff .wpayme-pay-table tfoot .wpayme-total-label{ color: var(--wpa-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase} .wpayme-app #poststuff .wpayme-pay-table tfoot .wpayme-total-amount{ color: var(--wpa-text); font-size: 15px; font-weight: 700} .wpayme-app #poststuff .wpayme-pay-table img{ display: block; border-radius: var(--wpa-radius-sm)}  .wpayme-app #poststuff .wpayme-pay-table .wpayme-pay-text-negative{ color: var(--wpa-danger); font-variant-numeric: tabular-nums}  .wpayme-app .wpayme-sidebar-count--plain{ background: transparent; color: var(--wpa-text-faint); font-weight: 500}  .wpayme-app .wpayme-sidebar-nav a:not(.is-current):hover .wpayme-sidebar-count--plain{ color: var(--wpa-text-muted)}  .wpayme-app #poststuff .wpayme-pay-table .wpayme-pay-tip, .wpayme-app .wpayme-qv-section-body .wpayme-pay-tip{ color: inherit}  .wpayme-app #poststuff .wpayme-refund-submit, .wpayme-app #poststuff .wpayme-refund-submit:hover, .wpayme-app #poststuff .wpayme-refund-submit:focus{ display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 18px; border: 1px solid var(--wpa-accent); border-radius: var(--wpa-radius-pill); background: var(--wpa-accent); color: #fff; font-size: 13px; font-weight: 600; text-shadow: none; box-shadow: none; cursor: pointer} .wpayme-app #poststuff .wpayme-refund-submit:hover{ filter: brightness(1.08)}  .wpayme-app .wpayme-th-icon{ display: inline-flex; align-items: center; gap: 6px} .wpayme-app .wpayme-th-icon svg{ width: 13px; height: 13px; flex: 0 0 auto; opacity: 0.75} .wpayme-app .wpayme-col-num .wpayme-th-icon{ justify-content: flex-end}   .wpayme-app #wpbody-content> .wpayme-setup{ box-sizing: border-box; width: 100%; max-width: 760px; margin: 24px auto 48px} .wpayme-app .wpayme-setup-steps{ display: flex; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none} .wpayme-app .wpayme-setup-step{ display: flex; flex: 1 1 0; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text-muted); font-size: 13px; font-weight: 500} .wpayme-app .wpayme-setup-step-dot{ position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); font-size: 12px; font-weight: 600} .wpayme-app .wpayme-setup-step.is-current{ border-color: var(--wpa-accent); color: var(--wpa-text); box-shadow: 0 0 0 3px var(--wpa-accent-soft)} .wpayme-app .wpayme-setup-step.is-current .wpayme-setup-step-dot{ border-color: var(--wpa-accent); background: var(--wpa-accent); color: #fff} .wpayme-app .wpayme-setup-step.is-done .wpayme-setup-step-dot{ border-color: var(--wpa-success); background: var(--wpa-success); color: transparent} .wpayme-app .wpayme-setup-step.is-done .wpayme-setup-step-dot::after{ content: ""; position: absolute; width: 5px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg)} .wpayme-app .wpayme-setup-card{ padding: 32px} .wpayme-app .wpayme-setup-hero{ text-align: center} .wpayme-app .wpayme-setup-hero h2, .wpayme-app .wpayme-setup-head h2{ margin: 0 0 8px; color: var(--wpa-text); font-size: 22px; font-weight: 650; line-height: 1.3} .wpayme-app .wpayme-setup-hero p, .wpayme-app .wpayme-setup-head p{ max-width: 560px; margin: 0 auto; color: var(--wpa-text-muted); font-size: 14px; line-height: 1.6} .wpayme-app .wpayme-setup-head{ margin-bottom: 24px} .wpayme-app .wpayme-setup-head p{ margin: 0} .wpayme-app .wpayme-setup-hero-icon{ display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 16px; background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-setup-hero-icon svg{ width: 28px; height: 28px} .wpayme-app .wpayme-setup-hero-icon--done{ border-radius: var(--wpa-radius-pill); background: var(--wpa-success-soft)} .wpayme-app .wpayme-setup-hero-icon--done::after{ content: ""; width: 12px; height: 22px; margin-top: -4px; border: solid var(--wpa-success); border-width: 0 0 3px 3px; transform: rotate(-45deg)} .wpayme-app .wpayme-setup-overview, .wpayme-app .wpayme-setup-links{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none} .wpayme-app .wpayme-setup-overview li, .wpayme-app .wpayme-setup-link{ display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 13px; line-height: 1.5; text-decoration: none} .wpayme-app .wpayme-setup-overview strong, .wpayme-app .wpayme-setup-link strong{ color: var(--wpa-text); font-size: 14px} .wpayme-app .wpayme-setup-link{ overflow-wrap: anywhere; transition: border-color 0.15s, box-shadow 0.15s} .wpayme-app .wpayme-setup-link:hover, .wpayme-app .wpayme-setup-link:focus{ border-color: var(--wpa-accent); box-shadow: 0 0 0 3px var(--wpa-accent-soft); color: var(--wpa-text-muted)} .wpayme-app .wpayme-setup-overview-icon{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 6px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-setup-overview-icon svg{ width: 17px; height: 17px} .wpayme-app .wpayme-setup-actions{ display: flex; justify-content: center; gap: 12px; margin-top: 28px} .wpayme-app .wpayme-setup-actions--split{ align-items: center; justify-content: space-between} .wpayme-app .wpayme-setup-skip{ margin-top: 16px; text-align: center} .wpayme-app .wpayme-setup-skip .button-link{ color: var(--wpa-text-muted); font-size: 13px}  .wpayme-app .wpayme-setup-existing h3{ margin: 0 0 10px; color: var(--wpa-text); font-size: 13px; font-weight: 600} .wpayme-app .wpayme-setup-options{ display: grid; gap: 8px; margin-bottom: 14px} .wpayme-app .wpayme-setup-option, .wpayme-app .wpayme-setup-check{ display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); cursor: pointer} .wpayme-app .wpayme-setup-option:has(input:checked), .wpayme-app .wpayme-setup-check:has(input:checked){ border-color: var(--wpa-accent); background: var(--wpa-accent-soft)} .wpayme-app .wpayme-setup-option input, .wpayme-app .wpayme-setup-check input{ margin: 2px 0 0} .wpayme-app .wpayme-setup-option-text, .wpayme-app .wpayme-setup-check> span{ display: flex; flex-direction: column; gap: 2px; color: var(--wpa-text-muted); font-size: 13px} .wpayme-app .wpayme-setup-option-text strong, .wpayme-app .wpayme-setup-check strong{ color: var(--wpa-text); font-weight: 600} .wpayme-app .wpayme-setup-divider{ display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; color: var(--wpa-text-muted); font-size: 13px; font-weight: 500} .wpayme-app .wpayme-setup-divider::before, .wpayme-app .wpayme-setup-divider::after{ content: ""; flex: 1 1 auto; height: 1px; background: var(--wpa-border)} .wpayme-app .wpayme-setup-search{ width: 100%; height: 40px; margin-bottom: 14px; padding: 0 12px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); font-size: 14px} .wpayme-app .wpayme-setup-gateways{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px} .wpayme-app .wpayme-setup-gateway{ display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s} .wpayme-app .wpayme-setup-gateway[hidden]{ display: none} .wpayme-app .wpayme-setup-gateway:hover, .wpayme-app .wpayme-setup-gateway:focus{ border-color: var(--wpa-accent); box-shadow: 0 0 0 3px var(--wpa-accent-soft); color: var(--wpa-text)} .wpayme-app .wpayme-setup-gateway .wpayme-tile-art{ width: 38px; height: 38px; font-size: 16px} .wpayme-app .wpayme-setup-gateway-text{ display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0} .wpayme-app .wpayme-setup-gateway-text strong{ overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap} .wpayme-app .wpayme-setup-gateway-text span{ display: -webkit-box; overflow: hidden; color: var(--wpa-text-muted); font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2} .wpayme-app .wpayme-setup-gateway-go{ color: var(--wpa-text-faint); font-size: 16px} .wpayme-app .wpayme-setup-gateway:hover .wpayme-setup-gateway-go{ color: var(--wpa-accent)} .wpayme-app .wpayme-setup-more{ margin-top: 12px} .wpayme-app .wpayme-setup-more summary{ margin-bottom: 10px; color: var(--wpa-accent); font-size: 13px; font-weight: 500; cursor: pointer} .wpayme-app .wpayme-setup-empty{ color: var(--wpa-text-muted); text-align: center}  .wpayme-app .wpayme-setup-form{ display: grid; gap: 16px} .wpayme-app .wpayme-setup-field{ margin: 0} .wpayme-app .wpayme-setup-field> label{ display: block; margin-bottom: 6px; color: var(--wpa-text); font-size: 13px; font-weight: 600} .wpayme-app .wpayme-setup-field input[type="text"], .wpayme-app .wpayme-setup-price select{ width: 100%; max-width: none; height: 42px; padding: 0 12px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background-color: var(--wpa-surface); color: var(--wpa-text); font-size: 15px} .wpayme-app .wpayme-setup-price{ display: flex; gap: 8px} .wpayme-app .wpayme-setup-price input[type="text"]{ flex: 1 1 auto} .wpayme-app .wpayme-setup-price select{ flex: 0 0 104px; width: 104px} .wpayme-app .wpayme-setup-form .wpayme-setup-actions{ margin-top: 8px} .wpayme-app .wpayme-setup-success, .wpayme-app .wpayme-setup-note{ margin: 0 0 20px; padding: 10px 14px; border-radius: var(--wpa-radius-sm); background: var(--wpa-success-soft); color: var(--wpa-text); font-size: 13px} .wpayme-app .wpayme-setup-note{ margin: 24px 0 0; background: var(--wpa-warn-soft); text-align: center} .wpayme-app .wpayme-setup .notice.inline{ margin: 0 0 16px}  .wpayme-app .wpayme-setup-banner{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 0 16px; padding: 12px 16px; border: 1px solid var(--wpa-accent); border-radius: var(--wpa-radius); background: var(--wpa-accent-soft); color: var(--wpa-text)} .wpayme-app .wpayme-setup-banner p{ flex: 1 1 320px; margin: 0; font-size: 13px} .wpayme-app .wpayme-setup-banner-step{ padding: 2px 10px; border-radius: var(--wpa-radius-pill); background: var(--wpa-accent); color: #fff; font-size: 12px; font-weight: 600}  .wpayme-app .wpayme-setup-callout{ display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 18px; border: 1px solid var(--wpa-border); border-right: 3px solid var(--wpa-accent); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow)} .wpayme-app .wpayme-setup-callout-icon{ display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-setup-callout-icon svg{ width: 20px; height: 20px} .wpayme-app .wpayme-setup-callout-text{ display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; color: var(--wpa-text-muted); font-size: 13px} .wpayme-app .wpayme-setup-callout-text strong{ color: var(--wpa-text); font-size: 14px} @media (max-width: 600px){ .wpayme-app #wpbody-content> .wpayme-setup{ margin-top: 12px} .wpayme-app .wpayme-setup-card{ padding: 20px 16px} .wpayme-app .wpayme-setup-step{ flex: 0 0 auto} .wpayme-app .wpayme-setup-step-label{ display: none} .wpayme-app .wpayme-setup-step.is-current{ flex: 1 1 auto} .wpayme-app .wpayme-setup-step.is-current .wpayme-setup-step-label{ display: inline} .wpayme-app .wpayme-setup-callout{ flex-wrap: wrap}}   .wpayme-app .wpayme-box-title{ display: inline-flex; align-items: center; gap: 8px} .wpayme-app .wpayme-box-title svg{ width: 17px; height: 17px; color: var(--wpa-accent)}  .wpayme-app .wpayme-ptabs-nav{  display: flex; flex-wrap: wrap; gap: 2px; margin: -16px -16px 0; padding: 0 12px; border-bottom: 1px solid var(--wpa-border); background: var(--wpa-surface-muted); overflow-x: auto; scrollbar-width: thin} .wpayme-app .wpayme-ptabs-tab{ position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; margin: 0; padding: 13px 14px 12px; border: 0; background: transparent; color: var(--wpa-text-muted); font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: color 0.15s ease} .wpayme-app .wpayme-ptabs-tab svg{ width: 16px; height: 16px; opacity: 0.8} .wpayme-app .wpayme-ptabs-tab::after{ content: ""; position: absolute; left: 10px; bottom: -1px; right: 10px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background 0.15s ease} .wpayme-app .wpayme-ptabs-tab:hover{ color: var(--wpa-text)} .wpayme-app .wpayme-ptabs-tab.is-active{ color: var(--wpa-accent); font-weight: 600} .wpayme-app .wpayme-ptabs-tab.is-active svg{ opacity: 1} .wpayme-app .wpayme-ptabs-tab.is-active::after{ background: var(--wpa-accent)} .wpayme-app .wpayme-ptabs-tab:focus-visible{ outline: 2px solid var(--wpa-accent); outline-offset: -4px; border-radius: var(--wpa-radius-sm); box-shadow: none} .wpayme-app .wpayme-ptabs-panel{ padding-top: 4px} .wpayme-app .wpayme-ptabs-panel[hidden]{ display: none}  .wpayme-app .wpayme-fe-section{ display: grid; gap: 16px; padding: 20px 4px} .wpayme-app .wpayme-fe-section + .wpayme-fe-section{ border-top: 1px solid var(--wpa-border)}  .wpayme-app .wpayme-fe-types{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px} .wpayme-app .wpayme-fe-type{ display: grid; grid-template-columns: 20px 1fr; grid-template-areas: "icon title" "icon blurb"; gap: 2px 10px; padding: 14px 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); cursor: pointer; transition: border-color .12s ease, background .12s ease} .wpayme-app .wpayme-fe-type:hover{ border-color: color-mix(in srgb, var(--wpa-accent) 40%, var(--wpa-border))} .wpayme-app .wpayme-fe-type.is-active{ border-color: var(--wpa-accent); background: color-mix(in srgb, var(--wpa-accent) 6%, var(--wpa-surface))} .wpayme-app .wpayme-fe-type input{ position: absolute; opacity: 0; pointer-events: none} .wpayme-app .wpayme-fe-type svg{ grid-area: icon; width: 20px; height: 20px; color: var(--wpa-text-muted)} .wpayme-app .wpayme-fe-type.is-active svg{ color: var(--wpa-accent)} .wpayme-app .wpayme-fe-type strong{ grid-area: title; font-size: 13px; font-weight: 600} .wpayme-app .wpayme-fe-type span{ grid-area: blurb; color: var(--wpa-text-muted); font-size: 12px; line-height: 1.45}  .wpayme-app .wpayme-fe-files{ display: grid; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none} .wpayme-app .wpayme-fe-file{ display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface)} .wpayme-app .wpayme-fe-file svg{ width: 16px; height: 16px; color: var(--wpa-text-muted)} .wpayme-app .wpayme-fe-file-name{ flex: 1; font-weight: 600; font-size: 13px} .wpayme-app .wpayme-fe-file-size{ color: var(--wpa-text-muted); font-size: 12px}  .wpayme-app .wpayme-fe-file-going, .wpayme-app .wpayme-fe-file-undo{ display: none} .wpayme-app .wpayme-fe-file.is-going{ border-style: dashed; border-color: color-mix(in srgb, var(--wpa-danger) 45%, var(--wpa-border)); background: color-mix(in srgb, var(--wpa-danger) 5%, var(--wpa-surface))} .wpayme-app .wpayme-fe-file.is-going .wpayme-fe-file-name{ color: var(--wpa-text-muted); text-decoration: line-through} .wpayme-app .wpayme-fe-file.is-going .wpayme-fe-file-going{ display: inline; color: var(--wpa-danger); font-size: 12px} .wpayme-app .wpayme-fe-file.is-going .wpayme-fe-file-undo{ display: inline; font-size: 12px} .wpayme-app .wpayme-fe-file.is-going [data-file-drop], .wpayme-app .wpayme-fe-file.is-going .wpayme-fe-file-size{ display: none}  .wpayme-app .wpayme-fe-uploads{ display: grid; gap: 8px; margin: 0 0 8px} .wpayme-app .wpayme-fe-upload{ display: flex; align-items: center; gap: 8px} .wpayme-app .wpayme-fe-upload input[type="file"]{ flex: 1; min-width: 0; padding: 8px 12px; border: 1px dashed var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 12px; cursor: pointer} .wpayme-app .wpayme-fe-upload input[type="file"]::file-selector-button{ margin-left: 12px; padding: 6px 14px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); color: var(--wpa-text); font-size: 12px; font-weight: 600; cursor: pointer} .wpayme-app .wpayme-fe-upload input[type="file"]:hover::file-selector-button{ border-color: var(--wpa-accent); color: var(--wpa-accent)} .wpayme-app .wpayme-fe-upload.has-file input[type="file"]{ border-style: solid; border-color: var(--wpa-accent); background: color-mix(in srgb, var(--wpa-accent) 5%, var(--wpa-surface)); color: var(--wpa-text)}  .wpayme-app .wpayme-fe-total{ display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: 12px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: color-mix(in srgb, var(--wpa-accent) 5%, var(--wpa-surface)); color: var(--wpa-text-muted); font-size: 13px} .wpayme-app .wpayme-fe-total strong{ color: var(--wpa-text); font-size: 16px; font-weight: 700}  .wpayme-app .wpayme-fe-flags{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px} .wpayme-app .wpayme-fe-flag{ display: flex; align-items: center; gap: 12px;  box-sizing: border-box; flex: 1 1 calc(50% - 5px); min-width: 240px; max-width: calc(50% - 5px); padding: 10px 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); cursor: pointer}  .wpayme-app .wpayme-fe-flag input[type="checkbox"]{ width: 34px; min-width: 34px; height: 20px} .wpayme-app .wpayme-fe-flag input[type="checkbox"]::before{ width: 14px; height: 14px} .wpayme-app .wpayme-fe-flag input[type="checkbox"]:checked::before{ transform: translate(-14px, -50%)} .wpayme-app .wpayme-fe-flag strong{ display: block; font-size: 13px; font-weight: 600} .wpayme-app .wpayme-fe-flag small{ display: block; margin-top: 1px; color: var(--wpa-text-muted); font-size: 12px; line-height: 1.4} @media (max-width: 782px){ .wpayme-app .wpayme-fe-flag{ max-width: 100%}}  .wpayme-app .wpayme-fe-unit{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: -2px 0 10px; padding: 8px 12px; border: 1px dashed var(--wpa-border); border-radius: var(--wpa-radius-sm); color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-fe-unit label{ display: inline-flex; align-items: center; gap: 6px; cursor: pointer}  .wpayme-app .wpayme-fe-unit-flag{ flex: 0 0 auto; font-weight: 600; white-space: nowrap} .wpayme-app .wpayme-fe-unit-files{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px} .wpayme-app .wpayme-fe-unit-label{ font-weight: 600}  .wpayme-app .wpayme-fe-derived{ display: grid; gap: 10px; margin: 0 0 16px} .wpayme-app .wpayme-fe-derived> p{ margin: 0; padding: 12px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: color-mix(in srgb, var(--wpa-accent) 5%, var(--wpa-surface)); color: var(--wpa-text-muted); font-size: 13px} .wpayme-app .wpayme-fe-derived> p strong{ display: block; color: var(--wpa-text)} .wpayme-app .wpayme-fe-rule{ display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); cursor: pointer} .wpayme-app .wpayme-fe-rule:has( input:checked ){ border-color: var(--wpa-accent); background: color-mix(in srgb, var(--wpa-accent) 6%, var(--wpa-surface))} .wpayme-app .wpayme-fe-rule strong{ display: block; font-size: 13px; font-weight: 600} .wpayme-app .wpayme-fe-rule small{ display: block; margin-top: 2px; color: var(--wpa-text-muted); font-size: 12px; line-height: 1.45}  .wpayme-app .wpayme-fe-prices{ display: grid; gap: 8px; margin: 0 0 8px} .wpayme-app .wpayme-fe-price-line{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface)} .wpayme-app .wpayme-fe-price-name{ flex: 1; min-width: 0; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap} .wpayme-app .wpayme-fe-price-line .wpayme-fe-affix{ flex: 0 0 auto; width: 150px} .wpayme-app .wpayme-fe-hint{ margin: 0 0 8px; color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-fe-section-head h3{ margin: 0 0 3px; color: var(--wpa-text); font-size: 14px; font-weight: 600} .wpayme-app .wpayme-fe-section-head p{ margin: 0; color: var(--wpa-text-muted); font-size: 13px; line-height: 1.5} .wpayme-app .wpayme-fe-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px} .wpayme-app .wpayme-fe-grid[hidden], .wpayme-app .wpayme-fe-section [hidden]{ display: none} .wpayme-app [data-reveal-target]:not([hidden]), .wpayme-app [data-vat-show]:not([hidden]){ display: grid; gap: 16px} .wpayme-app .wpayme-fe-grid[data-reveal-target]:not([hidden]), .wpayme-app .wpayme-fe-grid[data-surcharge-show]:not([hidden]){ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))}  .wpayme-app .wpayme-fe-field{ display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0} .wpayme-app .wpayme-fe-field> label, .wpayme-app .wpayme-fe-label{ display: block; margin: 0; color: var(--wpa-text); font-size: 13px; font-weight: 600} .wpayme-app .wpayme-fe-field small, .wpayme-app .wpayme-fe-media-body small{ color: var(--wpa-text-muted); font-size: 12px; line-height: 1.5} .wpayme-app .wpayme-ptabs input[type="text"]:not(.wpayme-pay-form-wrap *), .wpayme-app .wpayme-ptabs input[type="email"]:not(.wpayme-pay-form-wrap *), .wpayme-app .wpayme-ptabs input[type="url"]:not(.wpayme-pay-form-wrap *), .wpayme-app .wpayme-ptabs input[type="number"]:not(.wpayme-pay-form-wrap *), .wpayme-app .wpayme-ptabs select:not(.wp-color-picker):not(.wpayme-pay-form-wrap *){ box-sizing: border-box; width: 100%; max-width: 100%; min-height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background-color: var(--wpa-surface); box-shadow: none; color: var(--wpa-text); font-size: 14px; line-height: 36px} .wpayme-app .wpayme-ptabs select:not(.wp-color-picker){ padding-left: 32px} .wpayme-app .wpayme-ptabs input:focus, .wpayme-app .wpayme-ptabs select:focus{ border-color: var(--wpa-accent); box-shadow: 0 0 0 3px var(--wpa-accent-soft); outline: none} .wpayme-app .wpayme-ptabs input::placeholder{ color: var(--wpa-text-faint)} .wpayme-app .wpayme-fe-inline{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px} .wpayme-app .wpayme-fe-inline select{ flex: 1 1 240px; width: auto} .wpayme-app .wpayme-fe-inline .wpayme-btn{ gap: 6px; height: 38px} .wpayme-app .wpayme-btn svg{ width: 15px; height: 15px}  .wpayme-app .wpayme-fe-affix{ display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); overflow: hidden} .wpayme-app .wpayme-fe-affix--narrow{ max-width: 220px} .wpayme-app .wpayme-fe-affix:focus-within{ border-color: var(--wpa-accent); box-shadow: 0 0 0 3px var(--wpa-accent-soft)} .wpayme-app .wpayme-ptabs .wpayme-fe-affix input:not(.wpayme-pay-form-wrap *){ flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; box-shadow: none} .wpayme-app .wpayme-ptabs .wpayme-fe-affix input:focus:not(.wpayme-pay-form-wrap *){ border: 0; box-shadow: none} .wpayme-app .wpayme-fe-affix-text{ display: inline-flex; flex: 0 0 auto; align-items: center; min-width: 38px; justify-content: center; padding: 0 10px; border-left: 1px solid var(--wpa-border); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 13px; font-weight: 600} .wpayme-app .wpayme-fe-affix--end .wpayme-fe-affix-text{ border-left: 0; border-right: 1px solid var(--wpa-border)}  .wpayme-app .wpayme-fe-segment{ display: inline-flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface-muted)} .wpayme-app .wpayme-fe-segment label{ position: relative; margin: 0; cursor: pointer} .wpayme-app .wpayme-fe-segment input{ position: absolute; opacity: 0; pointer-events: none} .wpayme-app .wpayme-fe-segment span{ display: block; padding: 7px 14px; border-radius: var(--wpa-radius-sm); color: var(--wpa-text-muted); font-size: 13px; font-weight: 500; transition: background 0.15s ease, color 0.15s ease} .wpayme-app .wpayme-fe-segment label:hover span{ color: var(--wpa-text)} .wpayme-app .wpayme-fe-segment input:checked + span{ background: var(--wpa-surface); box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); color: var(--wpa-text); font-weight: 600} .wpayme-app .wpayme-fe-segment input:focus-visible + span{ outline: 2px solid var(--wpa-accent); outline-offset: 1px}  .wpayme-app .wpayme-fe-toggle{ display: flex; align-items: flex-start; gap: 12px; margin: 0; cursor: pointer} .wpayme-app .wpayme-fe-toggle--card{ padding: 14px 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface-muted)} .wpayme-app .wpayme-fe-toggle> span{ display: flex; flex-direction: column; gap: 2px; padding-top: 2px} .wpayme-app .wpayme-fe-toggle strong{ color: var(--wpa-text); font-size: 13px; font-weight: 600} .wpayme-app .wpayme-fe-toggle small{ color: var(--wpa-text-muted); font-size: 12px; line-height: 1.5} .wpayme-app .wpayme-fe-toggle input[type="checkbox"]{ appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 42px; min-width: 42px; height: 24px; margin: 0; padding: 0; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); box-shadow: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease} .wpayme-app .wpayme-fe-toggle input[type="checkbox"]::before{ content: ""; position: absolute; top: 50%; right: 3px; width: 18px; height: 18px; margin: 0; border-radius: 50%; background: var(--wpa-border-strong); transform: translateY(-50%); transition: transform 0.15s ease, background 0.15s ease} .wpayme-app .wpayme-fe-toggle input[type="checkbox"]:checked{ border-color: var(--wpa-accent); background: var(--wpa-accent)} .wpayme-app .wpayme-fe-toggle input[type="checkbox"]:checked::before{ background: #fff; transform: translate(-18px, -50%)} .wpayme-app .wpayme-fe-toggle input[type="checkbox"]:focus-visible{ outline: 2px solid var(--wpa-accent); outline-offset: 2px}  .wpayme-app .wpayme-fe-rows{ display: grid; gap: 8px} .wpayme-app .wpayme-fe-rows:empty{ display: none} .wpayme-app .wpayme-fe-row{ display: flex; align-items: center; gap: 8px} .wpayme-app .wpayme-fe-row> input[type="text"]{ flex: 1 1 auto} .wpayme-app .wpayme-fe-row> .wpayme-fe-affix{ flex: 0 1 200px} .wpayme-app [data-rows="choices"] .wpayme-fe-row> .wpayme-fe-affix{ flex: 0 1 220px} .wpayme-app .wpayme-fe-remove{ display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: var(--wpa-radius-sm); background: transparent; color: var(--wpa-text-faint); font-size: 20px; line-height: 1; cursor: pointer} .wpayme-app .wpayme-fe-remove:hover, .wpayme-app .wpayme-fe-remove:focus-visible{ border-color: var(--wpa-danger-soft); background: var(--wpa-danger-soft); color: var(--wpa-danger); outline: none} .wpayme-app .wpayme-fe-add{ justify-self: start; width: fit-content; padding: 7px 12px; border: 1px dashed var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: transparent; color: var(--wpa-accent); font-size: 13px; font-weight: 500; cursor: pointer} .wpayme-app .wpayme-fe-add:hover, .wpayme-app .wpayme-fe-add:focus-visible{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft); outline: none} .wpayme-app .wpayme-fe-field> .wpayme-fe-add{ margin-top: 2px} .wpayme-app .wpayme-fe-note{ margin: 0; padding: 10px 12px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-text); font-size: 13px; line-height: 1.5}  .wpayme-app .wpayme-fe-media{ display: flex; align-items: center; gap: 16px} .wpayme-app .wpayme-fe-media-preview{ display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 96px; height: 96px; border: 1px dashed var(--wpa-border-strong); border-radius: var(--wpa-radius); background: var(--wpa-surface-muted); color: var(--wpa-text-faint); overflow: hidden} .wpayme-app .wpayme-fe-media-preview svg{ width: 28px; height: 28px} .wpayme-app .wpayme-fe-media-preview.has-image{ border-style: solid; border-color: var(--wpa-border)} .wpayme-app .wpayme-fe-media-preview img{ width: 100%; height: 100%; object-fit: cover} .wpayme-app .wpayme-fe-media-body{ display: flex; flex-direction: column; gap: 6px; min-width: 0}  .wpayme-app .wpayme-fe-button-preview{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: radial-gradient(circle at 1px 1px, var(--wpa-border) 1px, transparent 0) 0 0 / 14px 14px, var(--wpa-surface-muted)} .wpayme-app .wpayme-fe-button-sample{ display: inline-flex; align-items: center; justify-content: center; min-width: 160px; padding: 12px 22px; border-radius: var(--wpa-radius-sm); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); font-size: 15px; font-weight: 600} .wpayme-app .wpayme-ptabs .wp-picker-container .wp-color-result.button{ min-height: 38px; margin: 0; border-color: var(--wpa-border-strong); border-radius: var(--wpa-radius-sm)} .wpayme-app .wpayme-ptabs .wp-picker-container input[type="text"].wp-color-picker{ width: 90px; min-height: 32px; line-height: 30px}  .wpayme-app .wpayme-ptabs .wp-editor-wrap{ border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); overflow: hidden} .wpayme-app .wpayme-ptabs .wp-editor-tools{ padding: 6px 8px 0; background: var(--wpa-surface-muted)} .wpayme-app .wpayme-ptabs .wp-editor-container{ border: 0} .wpayme-app .wpayme-ptabs .wp-editor-area{ border: 0}  .wpayme-app .wpayme-fe-message{ display: grid; gap: 16px} .wpayme-app .wpayme-fe-tags{ display: grid; gap: 8px; padding: 12px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface-muted)} .wpayme-app .wpayme-fe-tags-list{ display: flex; flex-wrap: wrap; gap: 6px} .wpayme-app .wpayme-fe-tag{ display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); color: var(--wpa-text); font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease} .wpayme-app .wpayme-fe-tag::before{ content: "+"; color: var(--wpa-accent); font-weight: 700} .wpayme-app .wpayme-fe-tag:hover, .wpayme-app .wpayme-fe-tag:focus-visible{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft); color: var(--wpa-accent); outline: none}  .wpayme-app #wpayme_payment_form_shortcode .inside> p{ margin-top: 0; color: var(--wpa-text-muted); font-size: 13px} @media (max-width: 782px){ .wpayme-app .wpayme-ptabs-tab span{ display: none} .wpayme-app .wpayme-ptabs-tab.is-active span{ display: inline} .wpayme-app .wpayme-fe-affix--narrow{ max-width: none} .wpayme-app .wpayme-fe-row{ flex-wrap: wrap} .wpayme-app .wpayme-fe-row> input[type="text"]{ flex-basis: 100%} .wpayme-app .wpayme-fe-row> .wpayme-fe-affix{ flex: 1 1 auto} .wpayme-app .wpayme-fe-media{ align-items: flex-start}}  .wpayme-app .wpayme-ptabs .wp-editor-container iframe{ min-height: 220px}  .wpayme-app #poststuff .wpayme-ptabs-nav{ overflow-y: hidden} .wpayme-app #poststuff .wpayme-ptabs-tab::after{ bottom: 0} .wpayme-app #poststuff .wpayme-fe-section-head h3{ margin: 0 0 3px; padding: 0; color: var(--wpa-text); font-size: 14px; font-weight: 600; line-height: 1.4} .wpayme-app #poststuff .wpayme-fe-section-head p, .wpayme-app #poststuff .wpayme-fe-toggle small, .wpayme-app #poststuff .wpayme-fe-field small, .wpayme-app #poststuff .wpayme-fe-media-body small{ color: var(--wpa-text-muted)} .wpayme-app #poststuff .wpayme-fe-note{ color: var(--wpa-text)}  .wpayme-app #poststuff .wpayme-fe-toggle input[type="checkbox"], .wpayme-app #poststuff .wpayme-field-control--check input[type="checkbox"]{ appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 32px; min-width: 32px; height: 18px; margin: 1px 0 0; padding: 0; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); box-shadow: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease} .wpayme-app #poststuff .wpayme-fe-toggle input[type="checkbox"]::before, .wpayme-app #poststuff .wpayme-field-control--check input[type="checkbox"]::before{ content: ""; position: absolute; top: 50%; right: 2px; width: 12px; height: 12px; margin: 0; border-radius: 50%; background: var(--wpa-border-strong); transform: translateY(-50%); transition: transform 0.15s ease, background 0.15s ease} .wpayme-app #poststuff .wpayme-fe-toggle input[type="checkbox"]:checked, .wpayme-app #poststuff .wpayme-field-control--check input[type="checkbox"]:checked{ border-color: var(--wpa-accent); background: var(--wpa-accent)} .wpayme-app #poststuff .wpayme-fe-toggle input[type="checkbox"]:checked::before, .wpayme-app #poststuff .wpayme-field-control--check input[type="checkbox"]:checked::before{ background: #fff; transform: translate(-14px, -50%)} .wpayme-app #poststuff .wpayme-fe-toggle input[type="checkbox"]:focus-visible, .wpayme-app #poststuff .wpayme-field-control--check input[type="checkbox"]:focus-visible{ outline: 2px solid var(--wpa-accent); outline-offset: 2px} .wpayme-app #poststuff .wpayme-fe-toggle> span{ padding-top: 0} .wpayme-app #poststuff .wpayme-field-control--check{ align-items: center; gap: 8px; color: var(--wpa-text); font-size: 13px; cursor: pointer} .wpayme-app #poststuff .wpayme-field-control--check> span{ color: var(--wpa-text); font-weight: 500}  .wpayme-app #poststuff .wpayme-fields input[type="text"], .wpayme-app #poststuff .wpayme-fields select, .wpayme-app #poststuff .wpayme-fields textarea{ box-sizing: border-box; width: 100%; max-width: 100%; min-height: 36px; margin: 0; padding: 0 10px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background-color: var(--wpa-surface); box-shadow: none; color: var(--wpa-text); font-size: 13px} .wpayme-app #poststuff .wpayme-fields select{ padding-left: 30px; line-height: 34px} .wpayme-app #poststuff .wpayme-fields textarea{ min-height: 76px; padding: 8px 10px; line-height: 1.5} .wpayme-app #poststuff .wpayme-fields input:focus, .wpayme-app #poststuff .wpayme-fields select:focus, .wpayme-app #poststuff .wpayme-fields textarea:focus{ border-color: var(--wpa-accent); box-shadow: 0 0 0 3px var(--wpa-accent-soft); outline: none} .wpayme-app #poststuff .wpayme-fields-add select{ width: auto; min-width: 180px} .wpayme-app #poststuff .wpayme-fields-add .button{ min-height: 36px; border-radius: var(--wpa-radius-sm)} .wpayme-app #poststuff .wpayme-field-control> span{ color: var(--wpa-text); font-size: 12px; font-weight: 600}  .wpayme-app .wpayme-field-grip{ display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 18px; height: 26px; margin-right: -4px; border-radius: 4px; color: var(--wpa-text-faint); cursor: grab; touch-action: none} .wpayme-app .wpayme-field-grip::before{ content: ""; width: 8px; height: 14px; background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.6px); background-size: 4px 4.67px} .wpayme-app .wpayme-field-grip:hover{ background: var(--wpa-border); color: var(--wpa-text-muted)} .wpayme-app .wpayme-field[draggable="true"] .wpayme-field-grip{ cursor: grabbing} .wpayme-app .wpayme-fields-list .wpayme-field{ position: relative; transition: box-shadow 0.15s ease, opacity 0.15s ease} .wpayme-app .wpayme-field.is-dragging{ opacity: 0.45} .wpayme-app .wpayme-field.is-drop-before::before, .wpayme-app .wpayme-field.is-drop-after::after{ content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: 3px; border-radius: 3px; background: var(--wpa-accent); box-shadow: 0 0 0 3px var(--wpa-accent-soft)} .wpayme-app .wpayme-field.is-drop-before::before{ top: -7px} .wpayme-app .wpayme-field.is-drop-after::after{ bottom: -7px} .wpayme-app .wpayme-field.is-drop-before, .wpayme-app .wpayme-field.is-drop-after{ overflow: visible}  .wpayme-app #poststuff .wpayme-ptabs-nav{ scrollbar-width: none} .wpayme-app #poststuff .wpayme-ptabs-nav::-webkit-scrollbar{ display: none} .wpayme-app #poststuff .wpayme-ptabs .wp-editor-tools{ padding: 4px 6px 0} .wpayme-app #poststuff .wpayme-fe-affix-text{ box-sizing: border-box; min-width: 36px; padding: 0 10px} .wpayme-app #poststuff .wpayme-fe-section-head h3{ font-weight: 700}  .wpayme-app .wpayme-box-step{ display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 2px; border-radius: 50%; background: var(--wpa-accent); box-shadow: 0 0 0 4px var(--wpa-accent-soft); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums} .wpayme-app #poststuff .postbox .hndle .wpayme-box-title{ gap: 10px}  .wpayme-app .wpayme-fe-inline> .wpayme-ms{ flex: 1 1 280px; min-width: 0}  .wpayme-app #poststuff .wpayme-fields-add{ align-items: center} .wpayme-app .wpayme-fields-add-btn{ display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 16px; border: 1px solid var(--wpa-accent); border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-accent); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease} .wpayme-app .wpayme-fields-add-btn svg{ width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--wpa-accent); color: #fff; box-sizing: content-box} .wpayme-app .wpayme-fields-add-btn:hover, .wpayme-app .wpayme-fields-add-btn:focus-visible{ background: var(--wpa-accent); box-shadow: 0 0 0 3px var(--wpa-accent-soft); color: #fff; outline: none} .wpayme-app .wpayme-fields-add-btn:hover svg, .wpayme-app .wpayme-fields-add-btn:focus-visible svg{ background: #fff; color: var(--wpa-accent)}  .wpayme-app #poststuff .wpayme-field-control--check{ display: flex; flex-direction: row; align-items: center; align-self: end; min-height: 36px; padding-bottom: 0}  .wpayme-app .wpayme-method-group + .wpayme-method-group{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wpa-border)} .wpayme-app .wpayme-method-group-title{ margin: 0 0 8px; color: var(--wpa-text); font-size: 13px; font-weight: 700; letter-spacing: 0.02em}   .wpayme-app .wpayme-ap-skins{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px} .wpayme-app .wpayme-ap-skin{ position: relative; display: flex; flex-direction: column; margin: 0; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); overflow: hidden; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease} .wpayme-app .wpayme-ap-skin:hover{ border-color: var(--wpa-border-strong); transform: translateY(-1px)} .wpayme-app .wpayme-ap-skin> input{ position: absolute; opacity: 0; pointer-events: none} .wpayme-app .wpayme-ap-skin:has(> input:checked){ border-color: var(--wpa-accent); box-shadow: 0 0 0 3px var(--wpa-accent-soft)} .wpayme-app .wpayme-ap-skin:has(> input:focus-visible){ outline: 2px solid var(--wpa-accent); outline-offset: 2px} .wpayme-app .wpayme-ap-skin:has(> input:checked)::after{ content: ""; position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--wpa-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: 0 0 0 3px var(--wpa-surface)} .wpayme-app .wpayme-ap-skin-thumb{ display: flex; align-items: center; justify-content: center; height: 124px; padding: 14px 22px; background: radial-gradient(circle at 1px 1px, rgb(0 0 0 / 0.07) 1px, transparent 0) 0 0 / 12px 12px, #eef0f3} .wpayme-app .wpayme-ap-thumb-card{ display: grid; gap: 6px; width: 100%; max-width: 132px; padding: min(var(--wpay-padding), 12px); border: min(var(--wpay-card-border-width), 2px) solid var(--wpay-border); border-radius: min(var(--wpay-radius), 12px); background: var(--wpay-surface); box-shadow: var(--wpay-shadow); font-family: var(--wpay-font)} .wpayme-app .wpayme-ap-thumb-title{ width: 58%; height: 7px; border-radius: 4px; background: var(--wpay-text); opacity: 0.75} .wpayme-app .wpayme-ap-thumb-field{ height: 14px; border: 1px solid var(--wpay-border-strong); border-radius: min(var(--wpay-radius-sm), 7px); background: var(--wpay-input-bg)} .wpayme-app .wpayme-ap-thumb-button{ height: 16px; margin-top: 2px; border-radius: min(var(--wpay-button-radius), 8px); background: var(--wpay-button-bg)} .wpayme-app .wpayme-ap-skin-meta{ display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; border-top: 1px solid var(--wpa-border)} .wpayme-app #poststuff .wpayme-ap-skin-meta strong{ color: var(--wpa-text); font-size: 13px; font-weight: 600} .wpayme-app #poststuff .wpayme-ap-skin-meta small{ color: var(--wpa-text-muted); font-size: 12px; line-height: 1.45} .wpayme-app .wpayme-ap-skin-badge{ position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: var(--wpa-radius-pill); background: var(--wpa-warn-soft); color: #92400e; font-size: 11px; font-weight: 600} .wpayme-app .wpayme-ap-skin-badge[hidden]{ display: none} .wpayme-app #poststuff .wpayme-ap-undo{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-text); font-size: 13px} .wpayme-app #poststuff .wpayme-ap-undo .button-link{ color: var(--wpa-accent); font-weight: 600; text-decoration: underline}  .wpayme-app #poststuff .postbox .inside .wpayme-pay-form-wrap p, .wpayme-app #poststuff .postbox .inside .wpayme-pay-form-wrap li, .wpayme-app #poststuff .postbox .inside .wpayme-pay-form-wrap span:not([class]){ color: inherit} .wpayme-app .wpayme-ap-stage .wpayme-pay-form-wrap{ pointer-events: none} .wpayme-app .wpayme-ap-preview-label{ display: block; margin-bottom: 5px; font-size: calc(var(--wpay-font-size) - 2px); font-weight: 600} .wpayme-app .wpayme-ap-stage .wpayme-pay-form legend{ float: none}  .wpayme-app .wpayme-ap-range> label{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px} .wpayme-app .wpayme-ap-range output{ min-width: 48px; padding: 1px 8px; border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center} .wpayme-app .wpayme-ap-range input[type="range"]{ width: 100%; height: 20px; margin: 4px 0 0; accent-color: var(--wpa-accent); cursor: pointer} .wpayme-app .wpayme-fe-field.is-disabled{ opacity: 0.45} .wpayme-app .wpayme-ap-color .wp-picker-container{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px} .wpayme-app .wpayme-ap-color .wp-picker-holder{ flex-basis: 100%} .wpayme-app #poststuff .wpayme-ap-color .wp-color-result.button{ margin: 0} .wpayme-app .wpayme-ap-actions{ display: flex; justify-content: flex-end} .wpayme-app #poststuff .wpayme-ptabs input[type="url"]:not(.wpayme-pay-form-wrap *):focus{ border-color: var(--wpa-accent); box-shadow: 0 0 0 3px var(--wpa-accent-soft); outline: none}  .wpayme-app .wpayme-ap-stage .wpayme-pay-form input[type="text"]{ height: var(--wpay-input-height); min-height: 0; padding: 0 14px; border: 1px solid var(--wpay-border-strong); border-radius: var(--wpay-radius-sm); background-color: var(--wpay-input-bg); box-shadow: none; color: var(--wpay-text); font-family: inherit; font-size: var(--wpay-font-size)}  .wpayme-app .wpayme-ap-thumb-card{ padding: max(8px, min(var(--wpay-padding), 12px))}  .wpayme-app #wpayme-fo-panel-appearance{ container-type: inline-size} .wpayme-app .wpayme-ap-layout{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px} .wpayme-app .wpayme-ap-side{ order: -1; padding-top: 16px} @container (min-width: 600px){ .wpayme-app .wpayme-ap-layout{ grid-template-columns: minmax(0, 1fr) minmax(210px, 33%)} .wpayme-app .wpayme-ap-main .wpayme-fe-grid{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))} .wpayme-app .wpayme-ap-side{ order: 0; padding-top: 20px} .wpayme-app .wpayme-ap-sticky{ position: sticky; top: 44px}} .wpayme-app .wpayme-ap-sticky{ border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); overflow: hidden} .wpayme-app .wpayme-ap-preview-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--wpa-border); background: var(--wpa-surface-muted); font-size: 12px} .wpayme-app #poststuff .wpayme-ap-preview-head strong{ display: inline-flex; align-items: center; gap: 6px; color: var(--wpa-text); font-weight: 600} .wpayme-app .wpayme-ap-preview-head strong::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wpa-success); box-shadow: 0 0 0 3px var(--wpa-success-soft)} .wpayme-app #poststuff .wpayme-ap-preview-skin{ padding: 1px 8px; border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); color: var(--wpa-text-muted); font-weight: 600} .wpayme-app .wpayme-ap-stage{ max-height: calc(100vh - 170px); padding: 16px 12px; overflow: auto; background: radial-gradient(circle at 1px 1px, rgb(0 0 0 / 0.06) 1px, transparent 0) 0 0 / 14px 14px, #f1f3f6; overscroll-behavior: contain} .wpayme-app .wpayme-ap-stage .wpayme-pay-form-wrap{ width: 560px; max-width: none; margin: 0 auto} .wpayme-app #poststuff .wpayme-ap-preview-note{ margin: 0; padding: 8px 12px; border-top: 1px solid var(--wpa-border); color: var(--wpa-text-muted); font-size: 11px; line-height: 1.4}  .wpayme-app .wpayme-ap-skins{ grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px} .wpayme-app .wpayme-ap-skin-thumb{ height: 86px; padding: 10px 14px} .wpayme-app .wpayme-ap-thumb-card{ max-width: 96px; gap: 5px} .wpayme-app .wpayme-ap-thumb-field{ height: 10px} .wpayme-app .wpayme-ap-thumb-button{ height: 12px} .wpayme-app .wpayme-ap-skin-meta{ padding: 7px 10px 8px} .wpayme-app .wpayme-ap-skin:has(> input:checked)::after{ top: 6px; left: 6px; width: 18px; height: 18px; background-size: 11px} .wpayme-app .wpayme-ap-skin-badge{ top: 6px; right: 6px; padding: 1px 6px; font-size: 10px}  .wpayme-app .wpayme-ap-skins{ display: flex; flex-wrap: nowrap; gap: 10px; margin: -6px; padding: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--wpa-fade-start, 0px), #000 calc(100% - var(--wpa-fade-end, 0px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--wpa-fade-start, 0px), #000 calc(100% - var(--wpa-fade-end, 0px)), transparent 100%)} .wpayme-app .wpayme-ap-skins::-webkit-scrollbar{ display: none} .wpayme-app .wpayme-ap-skins.is-start-faded{ --wpa-fade-start: 28px} .wpayme-app .wpayme-ap-skins.is-end-faded{ --wpa-fade-end: 28px} .wpayme-app .wpayme-ap-skins> .wpayme-ap-skin{ flex: 0 0 128px}  .wpayme-app .wpayme-ap-changes{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--wpa-warn) 45%, transparent); border-radius: var(--wpa-radius-sm); background: var(--wpa-warn-soft); color: var(--wpa-text); font-size: 13px; font-weight: 500} .wpayme-app .wpayme-ap-changes[hidden]{ display: none} .wpayme-app .wpayme-ap-changes-dot, .wpayme-app .wpayme-fe-field.is-changed> label::after, .wpayme-app .wpayme-fe-field.is-changed> .wpayme-fe-label::after, .wpayme-app .wpayme-fe-toggle.is-changed strong::after, .wpayme-app .wpayme-ptabs-tab.has-changes::before{ content: ""; display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--wpa-warn); box-shadow: 0 0 0 3px var(--wpa-warn-soft); vertical-align: middle} .wpayme-app .wpayme-fe-field.is-changed> label::after, .wpayme-app .wpayme-fe-field.is-changed> .wpayme-fe-label::after, .wpayme-app .wpayme-fe-toggle.is-changed strong::after{ margin-right: 8px}  .wpayme-app .wpayme-ap-range.is-changed> label::after{ order: 1; margin-left: auto; margin-right: 0} .wpayme-app .wpayme-ap-range> label output{ order: 2} .wpayme-app .wpayme-ptabs-tab.has-changes::before{ position: absolute; top: 9px; left: 6px; width: 6px; height: 6px} .wpayme-app #poststuff .wpayme-ap-changes-reset{ margin-right: auto; padding: 4px 10px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); font-size: 12px; font-weight: 600; cursor: pointer} .wpayme-app #poststuff .wpayme-ap-changes-reset:hover, .wpayme-app #poststuff .wpayme-ap-changes-reset:focus-visible{ border-color: var(--wpa-accent); color: var(--wpa-accent); outline: none}  .wpayme-app #poststuff .wpayme-ap-skin-meta small{ display: none} .wpayme-app #poststuff .wpayme-ap-skin-meta strong{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px} .wpayme-app #poststuff .wpayme-ap-skin-badge{ position: static; padding: 0 6px; font-size: 10px; line-height: 16px}  .wpayme-app .wpayme-ap-stage{ overflow-x: hidden; padding: 16px 10px}  .wpayme-app .wpayme-ap-swatch{ display: flex; align-items: center; gap: 0; width: 100%; max-width: 190px; height: 38px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease} .wpayme-app .wpayme-ap-swatch:focus-within{ border-color: var(--wpa-accent); box-shadow: 0 0 0 3px var(--wpa-accent-soft)} .wpayme-app #poststuff .wpayme-ap-swatch input[type="color"]{ flex: 0 0 38px; width: 38px; height: 36px; margin: 0; padding: 5px; border: 0; border-left: 1px solid var(--wpa-border); border-radius: 0; background: var(--wpa-surface-muted); box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none} .wpayme-app .wpayme-ap-swatch input[type="color"]::-webkit-color-swatch-wrapper{ padding: 0} .wpayme-app .wpayme-ap-swatch input[type="color"]::-webkit-color-swatch{ border: 1px solid rgb(0 0 0 / 0.12); border-radius: 6px} .wpayme-app .wpayme-ap-swatch input[type="color"]::-moz-color-swatch{ border: 1px solid rgb(0 0 0 / 0.12); border-radius: 6px} .wpayme-app #poststuff .wpayme-ptabs .wpayme-ap-swatch input[type="text"]{ flex: 1 1 auto; min-width: 0; height: 36px; min-height: 0; padding: 0 10px; border: 0; border-radius: 0; box-shadow: none; color: var(--wpa-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase}  .wpayme-app .wpayme-ap-main .wpayme-fe-segment{ display: flex; flex-wrap: nowrap; width: 100%} .wpayme-app .wpayme-ap-main .wpayme-fe-segment label{ flex: 1 1 0; min-width: 0} .wpayme-app .wpayme-ap-main .wpayme-fe-segment span{ padding: 7px 6px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap}  .wpayme-app .wpayme-ap-changes-actions{ display: inline-flex; gap: 6px; margin-right: auto} .wpayme-app .wpayme-ap-changes-actions[hidden]{ display: none} .wpayme-app #poststuff .wpayme-ap-changes-reset{ margin-right: 0} .wpayme-app #poststuff .wpayme-ap-changes-save, .wpayme-app #poststuff .wpayme-ap-save-confirm{ padding: 4px 10px; border: 1px solid var(--wpa-accent); border-radius: var(--wpa-radius-sm); background: var(--wpa-accent); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer} .wpayme-app #poststuff .wpayme-ap-changes-save:hover, .wpayme-app #poststuff .wpayme-ap-save-confirm:hover{ filter: brightness(1.08)} .wpayme-app #poststuff .wpayme-ap-save-confirm:disabled{ opacity: 0.6; cursor: default} .wpayme-app .wpayme-ap-save{ display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 6px} .wpayme-app .wpayme-ap-save[hidden]{ display: none} .wpayme-app #poststuff .wpayme-ptabs .wpayme-ap-save input[type="text"]{ flex: 1 1 160px; width: auto; min-height: 32px; height: 32px; line-height: 30px; font-size: 13px} .wpayme-app #poststuff .wpayme-ap-save-cancel{ padding: 4px 8px; border: 0; background: none; color: var(--wpa-text-muted); font-size: 12px; cursor: pointer} .wpayme-app #poststuff .wpayme-ap-save-status{ margin: 0; padding: 8px 12px; border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text); font-size: 12px} .wpayme-app #poststuff .wpayme-ap-save-status[hidden]{ display: none} .wpayme-app #poststuff .wpayme-ap-save-status[data-tone="success"]{ background: var(--wpa-success-soft)} .wpayme-app #poststuff .wpayme-ap-save-status[data-tone="error"]{ background: var(--wpa-danger-soft); color: var(--wpa-danger)}  .wpayme-app .wpayme-ap-skin-delete{ position: absolute; top: 6px; right: 6px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgb(17 24 39 / 0.65); color: #fff; font-size: 14px; line-height: 1; opacity: 0; cursor: pointer; transition: opacity 0.15s ease, background 0.15s ease} .wpayme-app .wpayme-ap-skin:hover .wpayme-ap-skin-delete, .wpayme-app .wpayme-ap-skin-delete:focus-visible{ opacity: 1} .wpayme-app .wpayme-ap-skin-delete:hover{ background: var(--wpa-danger)} .wpayme-app .wpayme-ap-skin.is-custom .wpayme-ap-skin-meta strong::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wpa-accent)}  .wpayme-app .wpayme-inv{ display: inline-flex; align-items: center; gap: 4px; white-space: nowrap} .wpayme-app .wpayme-inv-pill{ display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 10px; border: 1px solid color-mix(in srgb, var(--wpa-accent) 28%, transparent); border-radius: var(--wpa-radius-pill); background: var(--wpa-accent-soft); color: var(--wpa-accent); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease} .wpayme-app .wpayme-inv-pill svg{ width: 15px; height: 15px; flex: none} .wpayme-app .wpayme-inv-pill:hover, .wpayme-app .wpayme-inv-pill:focus-visible{ border-color: var(--wpa-accent); background: var(--wpa-accent); color: #fff} .wpayme-app .wpayme-inv-icon{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--wpa-radius-pill); background: transparent; color: var(--wpa-text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease} .wpayme-app .wpayme-inv-icon svg{ width: 15px; height: 15px} .wpayme-app .wpayme-inv-icon:hover, .wpayme-app .wpayme-inv-icon:focus-visible{ border-color: var(--wpa-border); background: var(--wpa-surface-muted); color: var(--wpa-text)}  .wpayme-app .wp-list-table .column-wpayme_payment_invoice, .wpayme-app .wp-list-table .column-wpayme_subscription_invoices{ width: 190px} .wpayme-app .wp-list-table .wpayme-inv.is-compact{ flex-wrap: wrap; white-space: normal}  @media (hover: hover){ .wpayme-app .wp-list-table .wpayme-inv.is-compact .wpayme-inv-icon{ opacity: 0} .wpayme-app .wp-list-table tr:hover .wpayme-inv.is-compact .wpayme-inv-icon, .wpayme-app .wp-list-table .wpayme-inv.is-compact:focus-within .wpayme-inv-icon{ opacity: 1}} .wpayme-app .wpayme-inv-toast{ position: absolute; bottom: calc(100% + 6px); right: 50%; z-index: 20; padding: 4px 8px; border-radius: 6px; background: var(--wpa-text); color: var(--wpa-surface); font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; transform: translateX(50%); animation: wpayme-inv-toast 1.6s ease forwards} @keyframes wpayme-inv-toast{ 0%{ opacity: 0; transform: translate(50%, 4px)} 12%, 80%{ opacity: 1; transform: translate(50%, 0)} 100%{ opacity: 0}} .wpayme-app .wpayme-inv-issue{ display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px 0 10px; border: 1px dashed var(--wpa-border-strong); border-radius: var(--wpa-radius-pill); color: var(--wpa-text-muted); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap} .wpayme-app .wpayme-inv-issue svg{ width: 13px; height: 13px} .wpayme-app .wpayme-inv-issue:hover{ border-color: var(--wpa-accent); color: var(--wpa-accent)} .wpayme-app .wpayme-inv-none{ color: var(--wpa-text-muted)} .wpayme-app .wpayme-inv-more{ display: block; margin-top: 4px; font-size: 12px}  .wpayme-app #wpayme_payment_invoice .wpayme-inv{ flex-wrap: wrap} .wpayme-app .wpayme-inv-box-meta{ margin: 0 0 10px; color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-inv-box-meta strong{ display: block; color: var(--wpa-text); font-size: 16px; font-variant-numeric: tabular-nums}  .wpayme-app .wpayme-inv-table .wpayme-inv-num{ text-align: left; white-space: nowrap} .wpayme-app .wpayme-inv-table .wpayme-inv-actions-col{ width: 1%; text-align: left; white-space: nowrap} .wpayme-app .wpayme-inv-number{ font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none} a.wpayme-inv-number:hover, a.wpayme-inv-number:focus-visible{ text-decoration: underline}  .wpayme-app .wpayme-inv-title{ display: flex; align-items: center; gap: 10px} .wpayme-app .wpayme-inv-icon{ display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-inv-icon svg{ width: 16px; height: 16px} .wpayme-app .wpayme-inv-filter{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-accent-soft)} .wpayme-app .wpayme-inv-filter-clear{ margin-right: auto; font-weight: 600} .wpayme-app .wpayme-inv-empty{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; text-align: center} .wpayme-app .wpayme-inv-empty h2{ margin: 8px 0 0; font-size: 17px} .wpayme-app .wpayme-inv-empty p{ max-width: 420px; margin: 0 0 10px; color: var(--wpa-text-muted)} .wpayme-app .wpayme-inv-empty .wpayme-btn--export{ margin-right: 0} .wpayme-app .wpayme-inv-empty-icon{ display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-inv-empty-icon svg{ width: 26px; height: 26px} .wpayme-app .wpayme-group-btn svg{ width: 15px; height: 15px; margin-left: 6px} .wpayme-app .wpayme-table-scroll{ overflow-x: auto}  .wpayme-app .wpayme-inv-design-intro{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px} .wpayme-app .wpayme-inv-design-intro p{ margin: 0} .wpayme-app .wpayme-inv-preview{ gap: 6px; border-color: var(--wpa-accent); color: var(--wpa-accent); font-weight: 600} .wpayme-app .wpayme-inv-preview svg{ width: 16px; height: 16px} .wpayme-app .wpayme-inv-preview:hover{ background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-inv-logo{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px} .wpayme-app .wpayme-inv-logo-preview{ display: inline-flex; align-items: center; justify-content: center; width: 180px; height: 64px; padding: 8px; border: 1px dashed var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: conic-gradient(var(--wpa-surface-muted) 25%, var(--wpa-surface) 0 50%, var(--wpa-surface-muted) 0 75%, var(--wpa-surface) 0) 0 0 / 14px 14px} .wpayme-app .wpayme-inv-logo-preview img{ max-width: 100%; max-height: 100%; object-fit: contain} .wpayme-app .wpayme-inv-logo-empty{ color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-inv-logo-actions{ display: inline-flex; gap: 8px} .wpayme-app .wpayme-inv-color{ display: inline-flex; align-items: center; gap: 8px} .wpayme-app .wpayme-inv-color input[type="color"]{ width: 38px; height: 38px; padding: 3px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); cursor: pointer} .wpayme-app .wpayme-inv-color input[type="text"]{ width: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase} .wpayme-app .wpayme-inv-paper{ display: inline-flex} .wpayme-app .wpayme-inv-paper .wpayme-seg-item{ cursor: pointer} .wpayme-app .wpayme-inv-paper input{ position: absolute; opacity: 0; pointer-events: none} .wpayme-app .wpayme-inv-paper .wpayme-seg-item:has(input:focus-visible){ outline: 2px solid var(--wpa-accent); outline-offset: 2px}   .wpayme-app .wpayme-pay-tip:not(.wpayme-pay-icon){ margin-right: 0; font-size: inherit; vertical-align: baseline}  .wpayme-app .wpayme-settings-card .form-table tr:has(.wpayme-inv-color, .wpayme-inv-paper, input.regular-text, textarea, select)> td{ padding-top: 9px} .wpayme-app .wpayme-settings-card .form-table tr:has(.wpayme-inv-color, .wpayme-inv-paper, input.regular-text, textarea, select)> th{ padding-top: 17px}  .wpayme-app .wpayme-inv-color input[type="color"], .wpayme-app .wpayme-inv-color input[type="text"]{ box-sizing: border-box; height: 36px; margin: 0} .wpayme-app .wpayme-inv-color input[type="color"]{ width: 36px; padding: 4px} .wpayme-app .wpayme-inv-color input[type="color"]::-webkit-color-swatch-wrapper{ padding: 0} .wpayme-app .wpayme-inv-color input[type="color"]::-webkit-color-swatch{ border: 0; border-radius: 5px} .wpayme-app .wpayme-inv-color input[type="color"]::-moz-color-swatch{ border: 0; border-radius: 5px}  .wpayme-app .wpayme-settings-card .wpayme-inv-paper input[type="radio"]{ position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; clip-path: inset(50%); overflow: hidden; appearance: none; -webkit-appearance: none} .wpayme-app .wpayme-settings-card .wpayme-inv-paper .wpayme-seg-item{ position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 72px}  .wpayme-app .wpayme-card-head.has-action{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px} .wpayme-app .wpayme-card-head.has-action .wpayme-inv-preview{ height: 32px}  .wpayme-app .wpayme-qv-section-body table, .wpayme-app .wpayme-qv-section-body table.widefat{ border: 0; box-shadow: none; background: transparent} .wpayme-app .wpayme-qv-section-body table thead th, .wpayme-app .wpayme-qv-section-body table tfoot th, .wpayme-app .wpayme-qv-section-body table tfoot td{ width: auto; padding: 6px 0 6px 12px; color: var(--wpa-text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap} .wpayme-app .wpayme-qv-section-body table thead th *, .wpayme-app .wpayme-qv-section-body table tfoot *{ font-size: inherit; font-weight: inherit} .wpayme-app .wpayme-qv-section-body table thead th svg{ width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px} .wpayme-app .wpayme-qv-section-body table tbody td{ padding: 9px 0 9px 12px; font-size: 13px; line-height: 1.45} .wpayme-app .wpayme-qv-section-body table tbody td:last-child, .wpayme-app .wpayme-qv-section-body table thead th:last-child, .wpayme-app .wpayme-qv-section-body table tfoot> tr> *:last-child{ padding-left: 0} .wpayme-app .wpayme-qv-section-body table tfoot th, .wpayme-app .wpayme-qv-section-body table tfoot td{ border-top: 1px solid var(--wpa-border-strong); border-bottom: 0; color: var(--wpa-text)}  .wpayme-app .wpayme-qv-section-body table:has(th.wpayme-col-id) th:nth-child(n+3), .wpayme-app .wpayme-qv-section-body table:has(th.wpayme-col-id) td:nth-child(n+3){ text-align: left}  .wpayme-app .wpayme-qv-section-body table:has(th.wpayme-col-id) td:first-child{ color: var(--wpa-text-muted); font-size: 12px}  .wpayme-app .wpayme-qv-section-body table.widefat:not(:has(th.wpayme-col-id)) td:first-child{ color: var(--wpa-text-muted); font-size: 12px; white-space: nowrap}  .wpayme-app .wpayme-qv-section-body table.widefat td{ overflow-wrap: normal; word-break: normal} .wpayme-app .wpayme-qv-section-body table.widefat td:first-child, .wpayme-app .wpayme-qv-section-body table.widefat td:last-child{ white-space: nowrap} .wpayme-app .wp-list-table .column-wpayme_payment_amount, .wpayme-app .wp-list-table .column-wpayme_subscription_amount{ white-space: nowrap}  .wpayme-app .wp-list-table .column-wpayme_payment_amount del{ display: block}  .wpayme-app .wpayme-wh-list{ display: grid; gap: 12px; margin: 14px 0 12px} .wpayme-app .wpayme-wh-endpoint{ display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); transition: opacity 0.15s ease, border-color 0.15s ease} .wpayme-app .wpayme-wh-endpoint.is-paused{ background: var(--wpa-bg)} .wpayme-app .wpayme-wh-endpoint.is-removed{ border-color: var(--wpa-danger); opacity: 0.55} .wpayme-app .wpayme-wh-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px} .wpayme-app .wpayme-wh-url{ flex: 1 1 320px; min-width: 0} .wpayme-app .wpayme-wh-url input{ width: 100%; max-width: none} .wpayme-app .wpayme-wh-toggle, .wpayme-app .wpayme-wh-remove, .wpayme-app .wpayme-wh-events label, .wpayme-app .wpayme-wh-secret label{ display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; white-space: nowrap} .wpayme-app .wpayme-wh-remove{ color: var(--wpa-danger)} .wpayme-app .wpayme-wh-events{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0} .wpayme-app .wpayme-wh-events label{ padding: 5px 10px; border: 1px solid var(--wpa-border); border-radius: 999px; background: var(--wpa-bg); cursor: pointer} .wpayme-app .wpayme-wh-events label:has(input:checked){ border-color: var(--wpa-accent); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-wh-events input[type="checkbox"]{ margin: 0} .wpayme-app .wpayme-wh-secret{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 10px; border-top: 1px dashed var(--wpa-border); color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-wh-secret code{ padding: 3px 8px; border-radius: 6px; background: var(--wpa-bg); font-size: 12px} .wpayme-app .wpayme-wh-log-url{ max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .wpayme-app .wpayme-wh-result{ display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600} .wpayme-app .wpayme-wh-result.is-ok{ background: var(--wpa-success-soft); color: var(--wpa-success)} .wpayme-app .wpayme-wh-result.is-failed{ background: var(--wpa-danger-soft); color: var(--wpa-danger)} .wpayme-app .wpayme-settings-card .wpayme-code{ margin: 12px 0 0; padding: 14px 16px; border-radius: var(--wpa-radius-sm); background: #0f172a; color: #e2e8f0; font-size: 12px; line-height: 1.6; overflow-x: auto} .wpayme-app .wpayme-settings-card .wpayme-code code{ padding: 0; background: transparent; color: inherit; font-size: inherit; white-space: pre} .wpayme-app .wpayme-settings-card .wpayme-dev-table{ margin-top: 10px} .wpayme-app .wpayme-settings-card .wpayme-dev-table th[scope="row"]{ width: 180px; font-weight: 600} .wpayme-app .wpayme-dev-base{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px} .wpayme-app .wpayme-dev-method, .wpayme-app .wpayme-dev-kind{ display: inline-block; padding: 1px 7px; border-radius: 5px; background: var(--wpa-accent-soft); color: var(--wpa-accent); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap} .wpayme-app .wpayme-dev-kind.is-filter{ background: var(--wpa-warn-soft); color: var(--wpa-warn)} .wpayme-app [data-clipboard].is-copied{ border-color: var(--wpa-success); color: var(--wpa-success)}   .wpayme-app .wpayme-tile-flags{ display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; margin: 0 auto 0 0; padding: 0; list-style: none} .wpayme-app p.wpayme-tile-warn{ margin: auto 0 -4px; font-size: 12px} .wpayme-app p.wpayme-tile-warn + .wpayme-tile-foot{ margin-top: 0} .wpayme-app .wpayme-flag{ position: relative; display: inline-flex; align-items: center; margin: 0; border-radius: 3px; line-height: 1; cursor: default} .wpayme-app .wpayme-flag img{ display: block; width: 16px; height: 12px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08)} .wpayme-app .wpayme-flag--world, .wpayme-app .wpayme-flag--more{ justify-content: center; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 10px; font-weight: 600} .wpayme-app .wpayme-flag--world{ width: 16px; padding: 0} .wpayme-app .wpayme-flag--world svg{ width: 14px; height: 14px; color: var(--wpa-accent)}  .wpayme-app .wpayme-tile-flags [data-tip]::after{ right: auto; left: -6px; transform: translateY(4px)} .wpayme-app .wpayme-tile-flags [data-tip]:hover::after, .wpayme-app .wpayme-tile-flags [data-tip]:focus-visible::after{ transform: translateY(0)} .wpayme-app .wpayme-flag:focus-visible{ outline: 2px solid var(--wpa-accent); outline-offset: 2px}  .wpayme-app [data-tip]::before, .wpayme-app [data-tip]::after{ position: absolute; right: 50%; z-index: 30; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s} .wpayme-app [data-tip]::after{ content: attr(data-tip); bottom: calc(100% + 8px); width: max-content; max-width: 220px; padding: 5px 9px; border-radius: 6px; background: #111827; color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.35; text-align: center; white-space: normal; transform: translate(50%, 4px); box-shadow: 0 6px 16px rgb(0 0 0 / 0.18)} .wpayme-app [data-tip]::before{ content: ""; bottom: calc(100% + 3px); border: 5px solid transparent; border-top-color: #111827; border-bottom-width: 0; transform: translate(50%, 4px)} .wpayme-app [data-tip]:hover::before, .wpayme-app [data-tip]:hover::after, .wpayme-app [data-tip]:focus-visible::before, .wpayme-app [data-tip]:focus-visible::after{ opacity: 1; visibility: visible; transform: translate(50%, 0)} .wpayme-app.wpayme-app--dark [data-tip]::after{ background: #f9fafb; color: #111827} .wpayme-app.wpayme-app--dark [data-tip]::before{ border-top-color: #f9fafb}  .wpayme-app .wpayme-wizard-btn{ position: relative} .wpayme-app .wpayme-topbar [data-tip]::after{ top: calc(100% + 8px); bottom: auto} .wpayme-app .wpayme-topbar [data-tip]::before{ top: calc(100% + 3px); bottom: auto; border-width: 0 5px 5px; border-top-color: transparent; border-bottom-color: #111827} .wpayme-app.wpayme-app--dark .wpayme-topbar [data-tip]::before{ border-top-color: transparent; border-bottom-color: #f9fafb}  .wpayme-app .wpayme-tray[hidden]{ display: none} .wpayme-app .wpayme-tray .wpayme-menu-toggle{ position: relative} .wpayme-app .wpayme-tray-count{ position: absolute; top: -4px; left: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--wpa-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--wpa-surface)} .wpayme-app .wpayme-tray-panel{ left: 0; right: auto; width: min(440px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; padding: 12px} .wpayme-app .wpayme-tray-title{ margin: 0 0 8px; color: var(--wpa-text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase} .wpayme-app .wpayme-tray-list> *{ margin: 0 0 8px !important; box-shadow: none} .wpayme-app .wpayme-tray-list> *:last-child{ margin-bottom: 0 !important}  .wpayme-app .wpayme-jobs [hidden], .wpayme-app .wpayme-notifications [hidden]{ display: none !important} .wpayme-app .wpayme-seg-count{ margin-right: 4px; padding: 0 6px; border-radius: 999px; background: var(--wpa-danger); color: #fff; font-size: 10px; font-weight: 700} .wpayme-app .wpayme-jobs-health{ display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface)} .wpayme-app .wpayme-jobs-health p{ margin: 0} .wpayme-app .wpayme-jobs-health strong{ display: block; font-weight: 600} .wpayme-app .wpayme-jobs-health span:not(.wpayme-jobs-pulse){ display: block; margin-top: 2px; color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-jobs-pulse{ position: relative; flex: 0 0 10px; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--wpa-success)} .wpayme-app .wpayme-jobs-health.is-ok .wpayme-jobs-pulse::after{ content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--wpa-success); opacity: 0; animation: wpayme-pulse 2.4s ease-out infinite} .wpayme-app .wpayme-jobs-health.is-warn{ border-color: var(--wpa-warn); background: var(--wpa-warn-soft)} .wpayme-app .wpayme-jobs-health.is-warn .wpayme-jobs-pulse{ background: var(--wpa-warn)} @keyframes wpayme-pulse{ 0%{ opacity: 0.7; transform: scale(0.6)} 100%{ opacity: 0; transform: scale(1.4)}} @media (prefers-reduced-motion: reduce){ .wpayme-app .wpayme-jobs-health.is-ok .wpayme-jobs-pulse::after{ animation: none}}  .wpayme-app .wpayme-jobs-tabs{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px}  .wpayme-app .wpayme-jobs-tab{ --tab: var(--wpa-accent); --tab-soft: var(--wpa-accent-soft); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 10px; padding: 12px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); color: var(--wpa-text); text-decoration: none} .wpayme-app .wpayme-jobs-tab:hover, .wpayme-app .wpayme-jobs-tab:focus-visible{ border-color: var(--wpa-border-strong); color: var(--wpa-text)} .wpayme-app .wpayme-jobs-tab.is-complete{ --tab: var(--wpa-success); --tab-soft: var(--wpa-success-soft)} .wpayme-app .wpayme-jobs-tab.is-failed{ --tab: var(--wpa-danger); --tab-soft: var(--wpa-danger-soft)} .wpayme-app .wpayme-jobs-tab.is-canceled{ --tab: var(--wpa-warn); --tab-soft: var(--wpa-warn-soft)} .wpayme-app .wpayme-jobs-tab.is-active{ border-color: var(--tab); box-shadow: inset 0 0 0 1px var(--tab)} .wpayme-app .wpayme-jobs-tab-icon{ display: flex; grid-row: 1 / 3; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--wpa-radius-sm); background: var(--tab-soft); color: var(--tab)} .wpayme-app .wpayme-jobs-tab-icon svg{ width: 17px; height: 17px} .wpayme-app .wpayme-jobs-tab-count{ font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1} .wpayme-app .wpayme-jobs-tab-label{ color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-jobs-tab.is-active .wpayme-jobs-tab-icon{ background: var(--tab); color: #fff} .wpayme-app .wpayme-jobs-tab.is-failed.has-items{ border-color: var(--wpa-danger)} .wpayme-app .wpayme-jobs-tab.is-failed.has-items .wpayme-jobs-tab-icon{ background: var(--wpa-danger-soft); color: var(--wpa-danger)} .wpayme-app .wpayme-jobs-tab.is-failed.has-items .wpayme-jobs-tab-count{ color: var(--wpa-danger)}  .wpayme-app .wpayme-jobday{ margin: 0 0 22px} .wpayme-app .wpayme-jobday-title{ margin: 0 0 8px; color: var(--wpa-text-muted); font-size: 13px; font-weight: 600} .wpayme-app .wpayme-joblist, .wpayme-app .wpayme-cron-list{ margin: 0; padding: 0; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); list-style: none} .wpayme-app .wpayme-job, .wpayme-app .wpayme-cron-list> li{ display: grid; grid-template-columns: 96px 34px minmax(0, 1fr) auto; align-items: start; gap: 14px; margin: 0; padding: 14px 16px; border-top: 1px solid var(--wpa-border)} .wpayme-app .wpayme-cron-list> li{ grid-template-columns: 34px minmax(0, 1fr) auto} .wpayme-app .wpayme-job:first-child, .wpayme-app .wpayme-cron-list> li:first-child{ border-top: 0} .wpayme-app .wpayme-job-time{ display: grid; gap: 2px; padding-top: 2px} .wpayme-app .wpayme-job-time strong{ font-size: 14px; font-variant-numeric: tabular-nums} .wpayme-app .wpayme-job-time span{ color: var(--wpa-text-muted); font-size: 11px} .wpayme-app .wpayme-job-icon{ display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-job-icon svg{ width: 16px; height: 16px} .wpayme-app .wpayme-joblist.is-failed .wpayme-job-icon{ background: var(--wpa-danger-soft); color: var(--wpa-danger)} .wpayme-app .wpayme-joblist.is-complete .wpayme-job-icon{ background: var(--wpa-success-soft); color: var(--wpa-success)} .wpayme-app .wpayme-joblist.is-canceled .wpayme-job-icon{ background: var(--wpa-surface-muted); color: var(--wpa-text-faint)} .wpayme-app .wpayme-job-body{ display: grid; gap: 3px; min-width: 0} .wpayme-app .wpayme-job-label{ font-size: 14px; font-weight: 600} .wpayme-app .wpayme-job-blurb{ color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-job-chips{ display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; padding: 0; list-style: none} .wpayme-app .wpayme-job-chips li{ margin: 0; padding: 2px 8px; border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-job-chips a{ color: var(--wpa-accent); text-decoration: none} .wpayme-app .wpayme-job-chips a:hover{ text-decoration: underline} .wpayme-app .wpayme-job-error{ margin: 6px 0 0; padding: 8px 10px; border-right: 3px solid var(--wpa-danger); border-radius: var(--wpa-radius-sm) 0 0 var(--wpa-radius-sm); background: var(--wpa-danger-soft); color: var(--wpa-text); font-size: 12px; overflow-wrap: anywhere} .wpayme-app .wpayme-job-hook{ justify-self: start; margin-top: 4px; padding: 1px 6px; border-radius: 4px; background: transparent; color: var(--wpa-text-faint); font-size: 11px} .wpayme-app .wpayme-job-actions{ display: flex; gap: 6px; white-space: nowrap} .wpayme-app .wpayme-jobs-empty{ display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 24px; padding: 36px 24px; border: 1px dashed var(--wpa-border-strong); border-radius: var(--wpa-radius); color: var(--wpa-text-muted); text-align: center} .wpayme-app .wpayme-jobs-empty svg{ width: 26px; height: 26px; color: var(--wpa-text-faint)} .wpayme-app .wpayme-jobs-empty p{ max-width: 52ch; margin: 0} .wpayme-app .wpayme-cron summary{ display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--wpa-text-muted); font-weight: 600; cursor: pointer} .wpayme-app .wpayme-cron summary svg{ width: 16px; height: 16px} .wpayme-app .wpayme-cron-empty{ color: var(--wpa-text-muted)} @media (max-width: 900px){ .wpayme-app .wpayme-jobs-tabs{ grid-template-columns: repeat(2, minmax(0, 1fr))} .wpayme-app .wpayme-job{ grid-template-columns: 34px minmax(0, 1fr)} .wpayme-app .wpayme-job-time{ grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; gap: 8px} .wpayme-app .wpayme-job-actions, .wpayme-app .wpayme-cron-list .wpayme-job-actions{ grid-column: 2} .wpayme-app .wpayme-cron-list> li{ grid-template-columns: 34px minmax(0, 1fr)}}  .wpayme-app .wpayme-notifications .wpayme-card + .wpayme-card{ margin-top: 16px}  .wpayme-app .wpayme-notif-top{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: stretch; gap: 18px 32px; margin: 0 0 20px} @media (max-width: 900px){ .wpayme-app .wpayme-notif-top{ grid-template-columns: minmax(0, 1fr)}}  .wpayme-app .wpayme-notif-top .wpayme-notif-stats{ margin: 0;  grid-auto-rows: 1fr} .wpayme-app .wpayme-notif-test{ display: grid; align-content: start; gap: 6px; padding: 14px 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface)} .wpayme-app .wpayme-notif-test label{ font-weight: 600} .wpayme-app .wpayme-notif-test-row{ display: flex; gap: 8px} .wpayme-app .wpayme-notif-test-row input{ flex: 1 1 auto; min-width: 0; margin: 0} .wpayme-app .wpayme-notif-test-row .button{ display: inline-flex; align-items: center; gap: 6px} .wpayme-app .wpayme-notif-test-row .button svg{ width: 14px; height: 14px} .wpayme-app .wpayme-notif-test .description{ color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-notifications .wpayme-card-head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px} .wpayme-app .wpayme-notif-live{ color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-notif-live.is-saved{ color: var(--wpa-success)} .wpayme-app .wpayme-notif-live.is-error{ color: var(--wpa-danger)} .wpayme-app .wpayme-notif-grid{ width: 100%; border-collapse: collapse} .wpayme-app .wpayme-notif-grid th, .wpayme-app .wpayme-notif-grid td{ padding: 12px 10px; border-bottom: 1px solid var(--wpa-border); text-align: right; vertical-align: top} .wpayme-app .wpayme-notif-grid tbody tr:last-child th, .wpayme-app .wpayme-notif-grid tbody tr:last-child td{ border-bottom: 0} .wpayme-app .wpayme-notif-grid thead th{ min-width: 118px; vertical-align: bottom} .wpayme-app .wpayme-notif-grid thead th:first-child{ min-width: 170px; color: var(--wpa-text-muted); font-size: 12px; font-weight: 600} .wpayme-app .wpayme-notif-col{ display: grid; gap: 3px} .wpayme-app .wpayme-notif-col svg{ width: 16px; height: 16px; color: var(--wpa-accent)} .wpayme-app .wpayme-notif-col strong{ font-size: 13px; font-weight: 600} .wpayme-app .wpayme-notif-col small{ color: var(--wpa-text-muted); font-size: 11px; font-weight: 400; line-height: 1.35} .wpayme-app .wpayme-notif-grid tbody th{ font-weight: 600} .wpayme-app .wpayme-notif-grid tbody th a{ color: var(--wpa-text); text-decoration: none} .wpayme-app .wpayme-notif-grid tbody th a:hover{ color: var(--wpa-accent); text-decoration: underline} .wpayme-app .wpayme-notif-grid .wpayme-switch[aria-checked="true"]{ border-color: var(--wpa-success); background: var(--wpa-success)} .wpayme-app .wpayme-notif-grid .wpayme-switch:disabled{ cursor: progress; opacity: 0.7} .wpayme-app .wpayme-notif-to{ display: block; margin-top: 6px; color: var(--wpa-text-muted); font-size: 11px; word-break: break-all} .wpayme-app .wpayme-notif-foot{ margin: 12px 0 0} .wpayme-app .wpayme-seg--small .wpayme-seg-item{ padding: 0 10px; font-size: 12px}  .wpayme-app .wpayme-maillog{ margin: 0; padding: 0; list-style: none} .wpayme-app .wpayme-mail{ display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; margin: 0; padding: 10px 0; border-top: 1px solid var(--wpa-border)} .wpayme-app .wpayme-mail:first-child{ border-top: 0} .wpayme-app .wpayme-mail-icon{ display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wpa-surface-muted); color: var(--wpa-text-muted)} .wpayme-app .wpayme-mail-icon svg{ width: 16px; height: 16px} .wpayme-app .wpayme-mail-body{ display: grid; gap: 2px; min-width: 0} .wpayme-app .wpayme-mail-body strong{ overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap} .wpayme-app .wpayme-mail-body span{ color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-mail-state{ padding: 2px 9px; border-radius: var(--wpa-radius-pill); background: var(--wpa-success-soft); color: var(--wpa-success); font-size: 11px; font-weight: 600} .wpayme-app .wpayme-mail time{ min-width: 90px; color: var(--wpa-text-muted); font-size: 12px; text-align: left} .wpayme-app .wpayme-mail.is-failed .wpayme-mail-icon{ background: var(--wpa-danger-soft); color: var(--wpa-danger)} .wpayme-app .wpayme-mail.is-failed .wpayme-mail-state{ background: var(--wpa-danger-soft); color: var(--wpa-danger)} @media (max-width: 700px){ .wpayme-app .wpayme-mail{ grid-template-columns: 34px minmax(0, 1fr)} .wpayme-app .wpayme-mail-state, .wpayme-app .wpayme-mail time{ grid-column: 2; justify-self: start; text-align: right}}  .wpayme-app .wpayme-alerts .wpayme-alert-form> .wpayme-card + .wpayme-card, .wpayme-app .wpayme-alerts .wpayme-alert-form + .wpayme-card{ margin-top: 16px}  .wpayme-app .wpayme-alert-default-submit{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap} .wpayme-app .wpayme-alert-channels{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px} .wpayme-app .wpayme-alert-channel{ display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow); container-type: inline-size; scroll-margin-top: 48px} .wpayme-app .wpayme-alert-channel.is-on{ border-color: color-mix(in srgb, var(--wpa-success) 45%, var(--wpa-border))} .wpayme-app .wpayme-alert-channel-head{ display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 12px} .wpayme-app .wpayme-alert-badge{ --wpa-brand: var(--wpa-accent); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--wpa-brand) 14%, var(--wpa-surface)); color: var(--wpa-brand)} .wpayme-app .wpayme-alert-badge svg{ width: 20px; height: 20px} .wpayme-app .wpayme-alert-badge.is-twilio{ --wpa-brand: var(--wpa-brand-twilio)} .wpayme-app .wpayme-alert-badge.is-slack{ --wpa-brand: var(--wpa-brand-slack)} .wpayme-app .wpayme-alert-badge.is-telegram{ --wpa-brand: var(--wpa-brand-telegram)} .wpayme-app .wpayme-alert-badge.is-discord{ --wpa-brand: var(--wpa-brand-discord)} .wpayme-app .wpayme-mail-icon.wpayme-alert-badge{ width: 34px; height: 34px; border-radius: 50%} .wpayme-app .wpayme-mail-icon.wpayme-alert-badge svg{ width: 16px; height: 16px} .wpayme-app .wpayme-alert-channel-title h3{ margin: 0; color: var(--wpa-text); font-size: 14px; font-weight: 600; line-height: 1.3} .wpayme-app .wpayme-alert-channel-title p{ margin: 3px 0 0; color: var(--wpa-text-muted); font-size: 12.5px; line-height: 1.45} .wpayme-app .wpayme-alert-state{ padding: 2px 9px; border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 11px; font-weight: 600; white-space: nowrap} .wpayme-app .wpayme-alert-state.is-on{ background: var(--wpa-success-soft); color: var(--wpa-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wpa-success) 50%, transparent)} .wpayme-app .wpayme-alert-state.is-paused{ background: var(--wpa-warn-soft); color: var(--wpa-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wpa-warn) 50%, transparent)} .wpayme-app .wpayme-alert-fields{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px} @container (max-width: 420px){ .wpayme-app .wpayme-alert-fields{ grid-template-columns: minmax(0, 1fr)} .wpayme-app .wpayme-alert-channel-head{ grid-template-columns: 40px minmax(0, 1fr)} .wpayme-app .wpayme-alert-state{ grid-column: 2; justify-self: start}} .wpayme-app .wpayme-alert-field{ min-width: 0} .wpayme-app .wpayme-alert-field.is-wide, .wpayme-app .wpayme-alert-chats.is-wide{ grid-column: 1 / -1} .wpayme-app .wpayme-alert-field label{ display: block; margin: 0 0 4px; color: var(--wpa-text); font-size: 12.5px; font-weight: 600} .wpayme-app .wpayme-alert-input{ display: flex; gap: 8px} .wpayme-app .wpayme-alert-input input{ flex: 1 1 auto; width: 100%; min-width: 0; min-height: 34px; margin: 0} .wpayme-app .wpayme-alert-input .button{ flex: 0 0 auto; min-height: 34px} .wpayme-app .wpayme-alert-field small{ display: block; margin-top: 4px; color: var(--wpa-text-muted); font-size: 11.5px; line-height: 1.4} .wpayme-app .wpayme-alert-chats{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px} .wpayme-app .wpayme-alert-chats> span{ width: 100%; color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-alert-chat{ display: grid; gap: 1px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); text-align: right; cursor: pointer} .wpayme-app .wpayme-alert-chat strong{ overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap} .wpayme-app .wpayme-alert-chat small{ color: var(--wpa-text-muted); font-size: 11px} .wpayme-app .wpayme-alert-chat[aria-pressed="true"]{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft)} .wpayme-app .wpayme-alert-chat:focus-visible{ outline: 2px solid var(--wpa-accent); outline-offset: 2px} .wpayme-app .wpayme-alert-how summary{ display: inline-flex; align-items: center; gap: 6px; color: var(--wpa-accent); font-size: 12.5px; font-weight: 600; cursor: pointer} .wpayme-app.wpayme-app--dark .wpayme-alert-how summary{ color: var(--wpa-text)} .wpayme-app .wpayme-alert-how summary svg{ width: 14px; height: 14px} .wpayme-app .wpayme-alert-how ol{ margin: 8px 0 0; padding-right: 20px} .wpayme-app .wpayme-alert-how li{ margin: 4px 0; color: var(--wpa-text-muted); font-size: 12.5px; line-height: 1.5} .wpayme-app .wpayme-alert-channel-foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--wpa-border)} .wpayme-app .wpayme-alert-on, .wpayme-app .wpayme-alert-forget{ display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--wpa-text); font-size: 13px} .wpayme-app .wpayme-alert-on{ font-weight: 600} .wpayme-app .wpayme-alert-forget{ color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-alert-forget input{ margin: 0} .wpayme-app .wpayme-alert-channel-foot .button{ display: inline-flex; align-items: center; gap: 6px; margin-right: auto} .wpayme-app .wpayme-alert-channel-foot .button svg{ width: 14px; height: 14px} .wpayme-app .wpayme-alert-channel-foot .button.is-busy{ opacity: 0.6; cursor: progress} .wpayme-app .wpayme-alert-result{ flex: 1 0 100%; margin: 0; padding: 8px 10px; border-right: 3px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere} .wpayme-app .wpayme-alert-result:empty{ display: none} .wpayme-app .wpayme-alert-result.is-ok{ border-right-color: var(--wpa-success); background: var(--wpa-success-soft)} .wpayme-app .wpayme-alert-result.is-error{ border-right-color: var(--wpa-danger); background: var(--wpa-danger-soft)}  .wpayme-app .wpayme-alert-on input[type="checkbox"], .wpayme-app .wpayme-alert-switch input[type="checkbox"]{ appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 42px; min-width: 42px; height: 24px; margin: 0; padding: 0; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); box-shadow: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease} .wpayme-app .wpayme-alert-on input[type="checkbox"]::before, .wpayme-app .wpayme-alert-switch input[type="checkbox"]::before{ content: ""; position: absolute; top: 50%; right: 2px; width: 18px; height: 18px; margin: 0; border-radius: 50%; background: var(--wpa-surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transform: translateY(-50%); transition: transform 0.15s ease} .wpayme-app .wpayme-alert-on input[type="checkbox"]:checked, .wpayme-app .wpayme-alert-switch input[type="checkbox"]:checked{ border-color: var(--wpa-success); background: var(--wpa-success)} .wpayme-app .wpayme-alert-on input[type="checkbox"]:checked::before, .wpayme-app .wpayme-alert-switch input[type="checkbox"]:checked::before{ background: #fff; transform: translate(-18px, -50%)} .wpayme-app .wpayme-alert-on input[type="checkbox"]:focus-visible, .wpayme-app .wpayme-alert-switch input[type="checkbox"]:focus-visible{ outline: 2px solid var(--wpa-accent); outline-offset: 2px} .wpayme-app .wpayme-alert-switch{ display: inline-flex; margin: 0}  .wpayme-app .wpayme-alert-grid td.is-idle input[type="checkbox"]:checked{ opacity: 0.5} .wpayme-app .wpayme-alert-grid thead th.is-idle small{ font-style: italic} .wpayme-app .wpayme-alert-grid td{ vertical-align: middle} .wpayme-app .wpayme-alert-event{ display: flex; align-items: flex-start; gap: 10px} .wpayme-app .wpayme-alert-event svg{ flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--wpa-accent)} .wpayme-app.wpayme-app--dark .wpayme-alert-event svg, .wpayme-app.wpayme-app--dark .wpayme-alert-msg label svg{ color: var(--wpa-text-muted)} .wpayme-app .wpayme-alert-event strong{ display: block; color: var(--wpa-text); font-size: 13px; font-weight: 600} .wpayme-app .wpayme-alert-event small{ display: block; color: var(--wpa-text-muted); font-size: 11.5px; font-weight: 400; line-height: 1.35} @media (max-width: 782px){ .wpayme-app .wpayme-alert-grid thead{ display: none} .wpayme-app .wpayme-alert-grid, .wpayme-app .wpayme-alert-grid tbody{ display: block; width: 100%} .wpayme-app .wpayme-alert-grid tr{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--wpa-border)} .wpayme-app .wpayme-alert-grid tbody tr:last-child{ border-bottom: 0} .wpayme-app .wpayme-alert-grid tbody th, .wpayme-app .wpayme-alert-grid tbody td{ display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; border: 0} .wpayme-app .wpayme-alert-grid tbody th{ grid-column: 1 / -1; padding: 0 0 2px} .wpayme-app .wpayme-alert-grid tbody td{ padding: 6px 10px; border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted)} .wpayme-app .wpayme-alert-grid tbody td::before{ content: attr(data-label); overflow: hidden; color: var(--wpa-text); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap}} .wpayme-app .wpayme-alert-tags{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 16px} .wpayme-app .wpayme-alert-tags> span{ width: 100%; color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-alert-msgs{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px} .wpayme-app .wpayme-alert-msg{ display: grid; align-content: start; gap: 6px; min-width: 0; padding: 12px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface-muted)} .wpayme-app .wpayme-alert-msg label{ display: inline-flex; align-items: center; gap: 8px; color: var(--wpa-text); font-size: 13px; font-weight: 600} .wpayme-app .wpayme-alert-msg label svg{ width: 16px; height: 16px; color: var(--wpa-accent)} .wpayme-app .wpayme-alert-msg textarea{ width: 100%; min-height: 60px; margin: 0; font-size: 13px; line-height: 1.45; resize: vertical} .wpayme-app .wpayme-alert-msg-foot{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px} .wpayme-app .wpayme-alert-preview{ flex: 1 1 100%; min-width: 0; margin: 0; color: var(--wpa-text); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere} .wpayme-app .wpayme-alert-preview> span{ display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); color: var(--wpa-text-muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em} .wpayme-app .wpayme-alert-preview output.is-long{ text-decoration: underline dotted var(--wpa-warn); text-underline-offset: 3px} .wpayme-app .wpayme-alert-extra-tags{ color: var(--wpa-text-muted); font-size: 11.5px} .wpayme-app .wpayme-alert-msg-foot .button-link{ margin-right: auto; font-size: 12px} .wpayme-app .wpayme-alert-msg-foot .button-link[hidden]{ display: none} .wpayme-app .wpayme-mail.is-retrying .wpayme-mail-state{ background: var(--wpa-warn-soft); color: var(--wpa-text)} .wpayme-app .wpayme-mail-body .wpayme-alert-error{ margin-top: 4px; padding: 4px 8px; border-right: 3px solid var(--wpa-danger); border-radius: 4px; background: var(--wpa-danger-soft); color: var(--wpa-text); white-space: normal} .wpayme-app .wpayme-mail.is-retrying .wpayme-alert-error{ border-right-color: var(--wpa-warn); background: var(--wpa-warn-soft)}  .wpayme-app .wpayme-step-hint.is-warning{ display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border-radius: var(--wpa-radius-sm); background: var(--wpa-warn-soft); color: var(--wpa-text)} .wpayme-app .wpayme-step-hint.is-warning svg{ flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--wpa-warn)}  .wpayme-app .wpayme-chart-svg{ display: block; overflow: visible} .wpayme-app .wpayme-chart-grid{ stroke: var(--wpa-border); stroke-width: 1} .wpayme-app .wpayme-chart-axis{ fill: var(--wpa-text-muted); font-size: 11px} .wpayme-app .wpayme-chart-cursor{ stroke: var(--wpa-border-strong); stroke-dasharray: 3 3} .wpayme-app .wpayme-chart-tip{ position: absolute; z-index: 5; min-width: 180px; padding: 8px 10px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); box-shadow: var(--wpa-shadow-lg); font-size: 12px; pointer-events: none} .wpayme-app .wpayme-chart-tip[hidden]{ display: none} .wpayme-app .wpayme-chart-tip-date{ margin-bottom: 4px; color: var(--wpa-text-muted); font-weight: 600} .wpayme-app .wpayme-chart-tip-row{ display: flex; align-items: center; gap: 6px; white-space: nowrap} .wpayme-app .wpayme-chart-tip-row span{ width: 8px; height: 8px; border-radius: 50%} .wpayme-app .wpayme-chart-tip-row strong{ margin-right: auto} .wpayme-app .wpayme-chart-tip-row em{ color: var(--wpa-text-muted); font-style: normal}  .wpayme-app .wpayme-gw-drawer{ position: fixed; inset: 0; z-index: 100050} .wpayme-app .wpayme-gw-drawer-backdrop{ position: absolute; inset: 0; background: rgb(15 23 42 / 0.45); animation: wpayme-fade-in 0.15s ease} .wpayme-app .wpayme-gw-drawer-panel{ position: absolute; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; width: min(760px, 100vw); background: var(--wpa-bg); box-shadow: 12px 0 32px rgb(0 0 0 / 0.18); animation: wpayme-slide-in 0.2s ease} .wpayme-app .wpayme-gw-drawer-head{ display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--wpa-border); background: var(--wpa-surface)} .wpayme-app .wpayme-gw-drawer-head h2{ margin: 0; font-size: 16px; font-weight: 600} .wpayme-app .wpayme-gw-drawer-state{ padding: 2px 8px; border-radius: 999px; background: var(--wpa-success-soft); color: var(--wpa-success); font-size: 11px; font-weight: 600} .wpayme-app .wpayme-gw-drawer-full{ margin-right: auto; font-size: 12px} .wpayme-app .wpayme-gw-drawer-close{ width: 32px; height: 32px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); font-size: 20px; line-height: 1; cursor: pointer} .wpayme-app .wpayme-gw-drawer-body{ position: relative; flex: 1 1 auto} .wpayme-app .wpayme-gw-drawer-body iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.15s ease} .wpayme-app .wpayme-gw-drawer.is-loaded iframe{ opacity: 1} .wpayme-app .wpayme-gw-drawer-loading{ position: absolute; top: 40%; right: 50%; width: 28px; height: 28px; margin: -14px -14px 0 0; border: 3px solid var(--wpa-border); border-top-color: var(--wpa-accent); border-radius: 50%; animation: wpayme-spin 0.8s linear infinite} .wpayme-app .wpayme-gw-drawer.is-loaded .wpayme-gw-drawer-loading{ display: none} body.wpayme-drawer-open{ overflow: hidden} @keyframes wpayme-fade-in{ from{ opacity: 0}} @keyframes wpayme-slide-in{ from{ transform: translateX(-40px); opacity: 0}} @keyframes wpayme-spin{ to{ transform: rotate(-360deg)}}  html:has(body.wpayme-embed){ padding-top: 0 !important} body.wpayme-embed #wpadminbar, body.wpayme-embed #adminmenumain, body.wpayme-embed #wpfooter, body.wpayme-embed #screen-meta, body.wpayme-embed #screen-meta-links, body.wpayme-embed .wpayme-help-launcher{ display: none !important} body.wpayme-embed #wpcontent, body.wpayme-embed #wpfooter{ margin-right: 0 !important} body.wpayme-embed #wpbody-content{ display: block !important; padding-bottom: 24px} body.wpayme-embed .wrap{ margin: 16px 18px 0 !important}  body.wpayme-embed .wrap> h1, body.wpayme-embed .page-title-action, body.wpayme-embed .wp-header-end, body.wpayme-embed #edit-slug-box, body.wpayme-embed #postbox-container-1{ display: none !important} body.wpayme-embed #post-body.columns-2{ margin-left: 0} body.wpayme-embed #post-body.columns-2 #postbox-container-2{ width: 100%}  body.wpayme-embed.post-type-wpayme_coupon #postbox-container-2 .postbox:not(#wpayme_coupon_options){ display: none !important}  .wpayme-app .wpayme-automations{ --auto-when: var(--wpa-accent); --auto-when-soft: var(--wpa-accent-soft); --auto-if: #b45309; --auto-if-soft: var(--wpa-warn-soft); --auto-then: #047857; --auto-then-soft: var(--wpa-success-soft)} .wpayme-app.wpayme-app--dark .wpayme-automations{ --auto-if: #fbbf24; --auto-then: #34d399; --auto-when: #a5b4fc} .wpayme-app .wpayme-automations [hidden]{ display: none !important} .wpayme-app .wpayme-automations .wpayme-topbar-cta svg{ width: 16px; height: 16px}  .wpayme-app .wpayme-icon-btn{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--wpa-border);  border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); color: var(--wpa-text-muted); cursor: pointer; text-decoration: none} .wpayme-app .wpayme-icon-btn svg{ width: 16px; height: 16px} .wpayme-app .wpayme-icon-btn:hover, .wpayme-app .wpayme-icon-btn:focus-visible{ border-color: var(--wpa-accent); color: var(--wpa-accent)} .wpayme-app .wpayme-icon-btn.is-danger:hover, .wpayme-app .wpayme-icon-btn.is-danger:focus-visible{ border-color: var(--wpa-danger); color: var(--wpa-danger)}  .wpayme-app .wpayme-dryrun{ margin: 0 0 20px; padding: 16px 20px; border: 1px solid var(--wpa-border); border-right: 3px solid var(--wpa-text-faint); border-radius: var(--wpa-radius); background: var(--wpa-surface)} .wpayme-app .wpayme-dryrun.is-matched{ border-right-color: var(--auto-then)} .wpayme-app .wpayme-dryrun-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px} .wpayme-app .wpayme-dryrun-head svg{ width: 16px; height: 16px; color: var(--auto-then)} .wpayme-app .wpayme-dryrun-head h2{ margin: 0; font-size: 15px} .wpayme-app .wpayme-dryrun-head span{ color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-dryrun p{ margin: 6px 0} .wpayme-app .wpayme-dryrun-steps{ margin: 8px 20px 0 0}  .wpayme-app .wpayme-auto-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0 0 18px} .wpayme-app .wpayme-auto-stats> div{ display: grid; grid-template-columns: auto 1fr;  grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 12px; row-gap: 0; margin: 0; padding: 12px 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow)} .wpayme-app .wpayme-auto-stats> .is-bad{ border-color: var(--wpa-danger)} .wpayme-app .wpayme-auto-stats dt{ color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-auto-stats dd{ margin: 0; color: var(--wpa-text); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2} .wpayme-app .wpayme-auto-stats .is-bad dd{ color: var(--wpa-danger)}  .wpayme-app .wpayme-auto-stats .wpayme-stat-icon{ grid-row: 1 / 3} .wpayme-app .wpayme-auto-stats .is-bad .wpayme-stat-icon{ background: var(--wpa-danger-soft); color: var(--wpa-danger)}  .wpayme-app .wpayme-flows{ display: grid; gap: 10px; margin: 0 0 32px; padding: 0; list-style: none} .wpayme-app .wpayme-flow{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 24px; margin: 0; padding: 16px 20px 14px 18px; border: 1px solid var(--wpa-border); border-right: 3px solid var(--auto-when); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow)} .wpayme-app .wpayme-flow.is-off{ border-right-color: var(--wpa-border-strong)} .wpayme-app .wpayme-flow.is-off .wpayme-chain{ opacity: 0.6} .wpayme-app .wpayme-flow.has-error{ border-right-color: var(--wpa-danger)} .wpayme-app .wpayme-flow-main{ flex: 1 1 420px; min-width: 0} .wpayme-app .wpayme-flow-name{ display: inline-block; margin-bottom: 10px; color: var(--wpa-text); font-size: 15px; font-weight: 600; text-decoration: none} .wpayme-app .wpayme-flow-name:hover, .wpayme-app .wpayme-flow-name:focus-visible{ color: var(--wpa-accent); text-decoration: underline} .wpayme-app .wpayme-chain{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none}  .wpayme-app .wpayme-chain> li + li::before{ content: ""; display: inline-block; width: 14px; height: 2px; margin: 0 2px; background: var(--wpa-border-strong); vertical-align: middle} .wpayme-app .wpayme-chip{ display: inline-flex; align-items: center; margin: 0; font-size: 12px; line-height: 1} .wpayme-app .wpayme-chip> svg, .wpayme-app .wpayme-chip> span, .wpayme-app .wpayme-chip> b{ display: inline-flex; align-items: center} .wpayme-app .wpayme-chip> svg{ box-sizing: content-box; width: 13px; height: 13px; padding: 5px 8px 5px 0; border-radius: 0 var(--wpa-radius-pill) var(--wpa-radius-pill) 0} .wpayme-app .wpayme-chip> span{ padding: 6px 6px 6px 9px; border-radius: var(--wpa-radius-pill) 0 0 var(--wpa-radius-pill)} .wpayme-app .wpayme-chip> b{ margin-right: -4px; padding: 6px 0 6px 9px; border-radius: var(--wpa-radius-pill) 0 0 var(--wpa-radius-pill); font-weight: 700} .wpayme-app .wpayme-chip> b::before{ content: "\2192"; margin-left: 5px; font-weight: 400; opacity: 0.7} .wpayme-app .wpayme-chip:has(> b)> span{ border-radius: 0} .wpayme-app .wpayme-chip.is-when> *{ background: var(--auto-when-soft); color: var(--auto-when)} .wpayme-app .wpayme-chip.is-if> *{ background: var(--auto-if-soft); color: var(--auto-if)} .wpayme-app .wpayme-chip.is-then> *{ background: var(--auto-then-soft); color: var(--auto-then)} .wpayme-app .wpayme-chip.is-empty> span{ padding: 5px 10px; border: 1px dashed var(--wpa-border-strong); border-radius: var(--wpa-radius-pill); color: var(--wpa-text-muted)} .wpayme-app .wpayme-flow-meta{ display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-flow-error{ display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; color: var(--wpa-danger); font-size: 12px} .wpayme-app .wpayme-flow-error svg{ flex: 0 0 14px; width: 14px; height: 14px; margin-top: 1px} .wpayme-app .wpayme-flow-side{ display: flex; align-items: center; gap: 16px; margin-right: auto} .wpayme-app .wpayme-flow-tools{ display: flex; gap: 6px}  .wpayme-app .wpayme-recipes{ margin-top: 8px} .wpayme-app .wpayme-recipes-head{ display: flex; align-items: center; gap: 12px; margin: 0 0 16px} .wpayme-app .wpayme-recipes-badge{ display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--wpa-radius); background: var(--wpa-accent); color: #fff; box-shadow: var(--wpa-shadow)} .wpayme-app .wpayme-recipes-badge svg{ width: 20px; height: 20px} .wpayme-app .wpayme-recipes h2{ margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3} .wpayme-app .wpayme-recipes.is-first h2{ font-size: 20px} .wpayme-app .wpayme-recipes-lead{ margin: 2px 0 0; color: var(--wpa-text-muted); font-size: 13px}  .wpayme-app .wpayme-recipe-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none} @media (max-width: 1100px){ .wpayme-app .wpayme-recipe-grid{ grid-template-columns: repeat(2, minmax(0, 1fr))}} @media (max-width: 600px){ .wpayme-app .wpayme-recipe-grid{ grid-template-columns: minmax(0, 1fr)}} .wpayme-app .wpayme-recipe-grid> li{ margin: 0} .wpayme-app .wpayme-recipe{ display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; padding: 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow); color: var(--wpa-text); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease} .wpayme-app .wpayme-recipe:hover, .wpayme-app .wpayme-recipe:focus-visible{ border-color: var(--auto-when); box-shadow: 0 6px 18px rgb(15 23 42 / 0.08); color: var(--wpa-text); transform: translateY(-2px)} .wpayme-app .wpayme-recipe-icon{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: var(--wpa-radius); background: var(--auto-when-soft); color: var(--auto-when)} .wpayme-app .wpayme-recipe-icon svg{ width: 20px; height: 20px} .wpayme-app .wpayme-recipe strong{ font-size: 14px; line-height: 1.35} .wpayme-app .wpayme-recipe-blurb{ flex: 1 1 auto; color: var(--wpa-text-muted); font-size: 12px; line-height: 1.5} .wpayme-app .wpayme-recipe-foot{ display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--wpa-border)} .wpayme-app .wpayme-recipe-when{ display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--auto-when); font-size: 11px; font-weight: 600} .wpayme-app .wpayme-recipe-when svg{ flex: 0 0 auto; width: 13px; height: 13px} .wpayme-app .wpayme-recipe-go{ display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: auto; border-radius: 50%; background: var(--wpa-surface-muted); color: var(--wpa-text-muted); transition: background 0.15s ease, color 0.15s ease} .wpayme-app .wpayme-recipe-go svg{ width: 13px; height: 13px; transform: rotate(-90deg)} .wpayme-app .wpayme-recipe:hover .wpayme-recipe-go, .wpayme-app .wpayme-recipe:focus-visible .wpayme-recipe-go{ background: var(--auto-when); color: #fff} .wpayme-app .wpayme-recipe.is-blank{ border-style: dashed; background: transparent; box-shadow: none} .wpayme-app .wpayme-recipe.is-blank .wpayme-recipe-icon{ background: var(--wpa-surface-muted); color: var(--wpa-text-muted)} @media (prefers-reduced-motion: reduce){ .wpayme-app .wpayme-recipe{ transition: none} .wpayme-app .wpayme-recipe:hover, .wpayme-app .wpayme-recipe:focus-visible{ transform: none}}  .wpayme-app .wpayme-builder-head{ margin: 4px 0 22px; padding: 14px 20px 0; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow); overflow: hidden} .wpayme-app .wpayme-builder-back{ display: inline-flex; align-items: center; gap: 6px; color: var(--wpa-text-muted); font-size: 12px; text-decoration: none} .wpayme-app .wpayme-builder-back svg{ width: 14px; height: 14px} .wpayme-app .wpayme-builder-back:hover{ color: var(--wpa-accent)} .wpayme-app .wpayme-builder-title{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0 14px} .wpayme-app input.wpayme-builder-name{ flex: 1 1 240px; min-width: 0; margin: 0; padding: 4px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--wpa-text); font-size: 22px; font-weight: 600; line-height: 1.3} .wpayme-app input.wpayme-builder-name:hover{ border-bottom-color: var(--wpa-border)} .wpayme-app input.wpayme-builder-name:focus{ border-bottom-color: var(--wpa-accent); outline: none; box-shadow: none}  .wpayme-app .wpayme-builder-state{ display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 5px 6px 5px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease} .wpayme-app .wpayme-builder-state:has(input:checked){ border-color: var(--wpa-accent); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-builder-state input[type="checkbox"]{ position: relative; flex: 0 0 auto; width: 36px; height: 20px; margin: 0; border: 1px solid var(--wpa-border-strong); border-radius: var(--wpa-radius-pill); background: var(--wpa-border); box-shadow: none; cursor: pointer; appearance: none; transition: background 0.15s ease, border-color 0.15s ease} .wpayme-app .wpayme-builder-state input[type="checkbox"]::before{ content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; margin: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform 0.15s ease} .wpayme-app .wpayme-builder-state input[type="checkbox"]:checked{ border-color: var(--wpa-accent); background: var(--wpa-accent)} .wpayme-app .wpayme-builder-state input[type="checkbox"]:checked::before{ transform: translateX(-16px)} .wpayme-app .wpayme-builder-state input[type="checkbox"]:focus-visible{ outline: 2px solid var(--wpa-accent); outline-offset: 2px} .wpayme-app .wpayme-builder-state input:checked ~ .wpayme-builder-state-off, .wpayme-app .wpayme-builder-state input:not(:checked) ~ .wpayme-builder-state-on{ display: none}  .wpayme-app .wpayme-builder-sentence{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: none; margin: 0 -20px; padding: 12px 20px; border-top: 1px solid var(--wpa-border); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 13px; line-height: 1.4} .wpayme-app .wpayme-flow-stage{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0} .wpayme-app .wpayme-flow-stage-label{ margin-left: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase} .wpayme-app .wpayme-flow-stage.is-when .wpayme-flow-stage-label{ color: var(--auto-when)} .wpayme-app .wpayme-flow-stage.is-if .wpayme-flow-stage-label{ color: var(--auto-if)} .wpayme-app .wpayme-flow-stage.is-then .wpayme-flow-stage-label{ color: var(--auto-then)} .wpayme-app .wpayme-say{ display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 3px 3px 3px 10px; border: 1px solid transparent; border-radius: var(--wpa-radius-pill); font-weight: 600} .wpayme-app .wpayme-say:not(:has(.wpayme-say-icon)){ padding-right: 10px} .wpayme-app .wpayme-say-icon{ display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--wpa-surface)} .wpayme-app .wpayme-say-icon svg{ width: 13px; height: 13px} .wpayme-app .wpayme-say-extra{ padding-right: 7px; border-right: 1px solid currentColor; font-weight: 500; opacity: 0.85} .wpayme-app .wpayme-say.is-when{ border-color: color-mix(in srgb, var(--auto-when) 25%, transparent); background: var(--auto-when-soft); color: var(--auto-when)} .wpayme-app .wpayme-say.is-if{ border-color: color-mix(in srgb, var(--auto-if) 25%, transparent); background: var(--auto-if-soft); color: var(--auto-if)} .wpayme-app .wpayme-say.is-then{ border-color: color-mix(in srgb, var(--auto-then) 25%, transparent); background: var(--auto-then-soft); color: var(--auto-then)} .wpayme-app .wpayme-say.is-none{ border: 1px dashed var(--wpa-border-strong); background: var(--wpa-surface); color: var(--wpa-text-muted); font-weight: 500} .wpayme-app .wpayme-flow-link{ display: inline-flex; align-items: center; gap: 6px; max-width: 100%} .wpayme-app .wpayme-flow-and{ font-size: 12px} .wpayme-app .wpayme-flow-arrow{ flex: 0 0 auto; width: 6px; height: 6px; margin: 0 1px 0 3px; border-top: 1.5px solid var(--wpa-text-faint); border-left: 1.5px solid var(--wpa-text-faint); transform: rotate(-45deg)}  .wpayme-app .wpayme-builder-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 28px} .wpayme-app .wpayme-rail{ position: relative; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none} .wpayme-app .wpayme-rail::before{ content: ""; position: absolute; top: 24px; bottom: 24px; right: 19px; width: 2px; background: linear-gradient(var(--auto-when), var(--auto-if) 45%, var(--auto-then)); opacity: 0.45} .wpayme-app .wpayme-node{ position: relative; margin: 0; padding-right: 58px} .wpayme-app .wpayme-node-dot{ position: absolute; top: 14px; right: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 4px solid var(--wpa-bg); border-radius: 50%; box-sizing: border-box; color: #fff} .wpayme-app .wpayme-node-dot svg{ width: 16px; height: 16px} .wpayme-app .wpayme-node.is-when .wpayme-node-dot{ background: var(--wpa-accent)} .wpayme-app .wpayme-node.is-if .wpayme-node-dot{ background: #d97706} .wpayme-app .wpayme-node.is-then .wpayme-node-dot{ background: #059669} .wpayme-app .wpayme-node-card{ padding: 16px 20px 18px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow)} .wpayme-app .wpayme-node-title{ margin: 0 0 12px; font-size: 15px; font-weight: 600} .wpayme-app .wpayme-node.is-when .wpayme-node-title{ color: var(--auto-when)} .wpayme-app .wpayme-node.is-if .wpayme-node-title{ color: var(--auto-if)} .wpayme-app .wpayme-node.is-then .wpayme-node-title{ color: var(--auto-then)}  .wpayme-app .wpayme-trigger-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0} .wpayme-app .wpayme-trigger{ position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); cursor: pointer} .wpayme-app .wpayme-trigger input{ position: absolute; opacity: 0; pointer-events: none} .wpayme-app .wpayme-trigger:hover{ border-color: var(--wpa-border-strong)} .wpayme-app .wpayme-trigger.is-selected, .wpayme-app .wpayme-trigger:has(input:checked){ border-color: var(--auto-when); background: var(--auto-when-soft); box-shadow: inset 0 0 0 1px var(--auto-when)} .wpayme-app .wpayme-trigger:has(input:focus-visible){ outline: 2px solid var(--wpa-accent); outline-offset: 2px} .wpayme-app .wpayme-trigger-icon{ display: flex; flex: 0 0 30px; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text-muted)} .wpayme-app .wpayme-trigger-icon svg{ width: 16px; height: 16px} .wpayme-app .wpayme-trigger:has(input:checked) .wpayme-trigger-icon{ background: var(--auto-when); color: #fff} .wpayme-app .wpayme-trigger-label{ font-size: 13px; line-height: 1.3} .wpayme-app .wpayme-auto-statuses{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--wpa-border)} .wpayme-app .wpayme-auto-statuses label{ display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--wpa-text-muted)}  .wpayme-app .wpayme-conditions{ display: grid; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none} .wpayme-app .wpayme-condition{ display: grid; grid-template-columns: minmax(140px, 1fr) minmax(130px, 1fr) minmax(120px, 1.2fr) 32px; align-items: center; gap: 8px; margin: 0; padding: 8px; border-radius: var(--wpa-radius-sm); background: var(--auto-if-soft)} .wpayme-app .wpayme-condition select, .wpayme-app .wpayme-condition input{ width: 100%; max-width: none; margin: 0} .wpayme-app .wpayme-node-empty{ margin: 0 0 10px; color: var(--wpa-text-muted)} .wpayme-app .wpayme-add{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px dashed var(--wpa-border-strong); border-radius: var(--wpa-radius-pill); background: transparent; color: var(--wpa-text); font-size: 12px; font-weight: 500; cursor: pointer} .wpayme-app .wpayme-add svg{ width: 14px; height: 14px; color: var(--wpa-text-muted)} .wpayme-app .wpayme-add:hover, .wpayme-app .wpayme-add:focus-visible{ border-style: solid; border-color: var(--auto-then); color: var(--auto-then)} .wpayme-app .wpayme-node.is-if .wpayme-add:hover, .wpayme-app .wpayme-node.is-if .wpayme-add:focus-visible{ border-color: var(--auto-if); color: var(--auto-if)} .wpayme-app .wpayme-add:hover svg, .wpayme-app .wpayme-add:focus-visible svg{ color: currentColor}  .wpayme-app .wpayme-steps{ display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: wpayme-step} .wpayme-app .wpayme-step{ margin: 0; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); counter-increment: wpayme-step} .wpayme-app .wpayme-step-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px 8px 10px; border-bottom: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm) var(--wpa-radius-sm) 0 0; background: var(--auto-then-soft)} .wpayme-app .wpayme-step-head::before{ content: counter(wpayme-step); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #059669; color: #fff; font-size: 12px; font-weight: 700} .wpayme-app .wpayme-step-icon{ display: flex; color: var(--auto-then)} .wpayme-app .wpayme-step-icon svg{ width: 16px; height: 16px} .wpayme-app select.wpayme-step-type{ min-width: 0; margin: 0; border-color: transparent; background-color: transparent; color: var(--wpa-text); font-weight: 600} .wpayme-app select.wpayme-step-type:hover, .wpayme-app select.wpayme-step-type:focus{ border-color: var(--wpa-border-strong); background-color: var(--wpa-surface)} .wpayme-app .wpayme-step-when{ color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-step[data-when="now"] [data-when="later"], .wpayme-app .wpayme-step[data-when="later"] [data-when="now"]{ display: none} .wpayme-app .wpayme-step-tools{ display: flex; gap: 4px; margin-right: auto} .wpayme-app .wpayme-step-tools .wpayme-icon-btn{ width: 28px; height: 28px; background: transparent} .wpayme-app .wpayme-step:first-child [data-auto-move="up"], .wpayme-app .wpayme-step:last-child [data-auto-move="down"]{ visibility: hidden} .wpayme-app .wpayme-step-body{ padding: 12px} .wpayme-app .wpayme-auto-args{ display: grid; gap: 10px} .wpayme-app .wpayme-auto-args.is-mail{ grid-template-columns: 1fr 1fr} .wpayme-app .wpayme-auto-args label{ display: grid; gap: 4px; margin: 0} .wpayme-app .wpayme-auto-args label.is-wide{ grid-column: 1 / -1} .wpayme-app .wpayme-auto-args label> span{ color: var(--wpa-text-muted); font-size: 12px; font-weight: 500} .wpayme-app .wpayme-auto-args input, .wpayme-app .wpayme-auto-args select, .wpayme-app .wpayme-auto-args textarea{ width: 100%; max-width: none; margin: 0} .wpayme-app .wpayme-step-hint{ margin: 0; color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-node-alert{ margin: 0 0 12px; padding: 8px 12px; border-radius: var(--wpa-radius-sm); background: var(--wpa-danger-soft); color: var(--wpa-danger); font-weight: 500} .wpayme-app .wpayme-add-steps{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px} .wpayme-app .wpayme-add-steps> span{ margin-left: 4px; color: var(--wpa-text-muted); font-size: 12px}  .wpayme-app .wpayme-builder-aside{ position: sticky; top: 24px; display: grid; gap: 14px} .wpayme-app .wpayme-aside-card{ padding: 14px 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface)} .wpayme-app .wpayme-aside-card h2{ margin: 0 0 6px; font-size: 13px; font-weight: 600} .wpayme-app .wpayme-aside-card p, .wpayme-app .wpayme-aside-list{ margin: 0 0 10px; color: var(--wpa-text-muted); font-size: 12px; line-height: 1.5} .wpayme-app .wpayme-aside-list{ padding-right: 16px; list-style: disc} .wpayme-app .wpayme-aside-list li{ margin-bottom: 6px} .wpayme-app .wpayme-tags{ display: flex; flex-wrap: wrap; gap: 5px} .wpayme-app .wpayme-tag-btn{ padding: 3px 7px; border: 1px solid var(--wpa-border); border-radius: 6px; background: var(--wpa-surface-muted); color: var(--wpa-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease} .wpayme-app .wpayme-tag-btn:hover, .wpayme-app .wpayme-tag-btn:focus-visible{ border-color: var(--auto-then); color: var(--auto-then)} .wpayme-app .wpayme-tag-btn.is-inserted{ border-color: var(--auto-then); background: var(--auto-then-soft); color: var(--auto-then)} .wpayme-app .wpayme-aside-action{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none} .wpayme-app .wpayme-aside-action svg{ width: 14px; height: 14px} .wpayme-app .wpayme-builder-save{ margin-top: 22px} @media (max-width: 1100px){ .wpayme-app .wpayme-builder-layout{ grid-template-columns: minmax(0, 1fr)} .wpayme-app .wpayme-builder-aside{ position: static}} @media (max-width: 700px){ .wpayme-app .wpayme-condition{ grid-template-columns: 1fr 32px} .wpayme-app .wpayme-condition> :not(button){ grid-column: 1} .wpayme-app .wpayme-condition> button{ grid-row: 1; grid-column: 2} .wpayme-app .wpayme-auto-args.is-mail{ grid-template-columns: 1fr} .wpayme-app .wpayme-node{ padding-right: 0} .wpayme-app .wpayme-node-dot, .wpayme-app .wpayme-rail::before{ display: none} .wpayme-app input.wpayme-builder-name{ font-size: 20px}} @media (prefers-reduced-motion: reduce){ .wpayme-app .wpayme-builder-state input[type="checkbox"]::before, .wpayme-app .wpayme-tag-btn{ transition: none}}  .wpayme-app .wpayme-aside-card h2, .wpayme-app .wpayme-recipes h2, .wpayme-app .wpayme-dryrun-head h2, .wpayme-app .wpayme-recipe strong, .wpayme-app .wpayme-flow-name, .wpayme-app .wpayme-job-label, .wpayme-app .wpayme-mail-body strong, .wpayme-app .wpayme-notif-col strong{ color: var(--wpa-text)}  .wpayme-app .wpayme-icon-btn.is-busy{ position: relative; color: transparent; pointer-events: none} .wpayme-app .wpayme-icon-btn.is-busy svg{ visibility: hidden} .wpayme-app .wpayme-icon-btn.is-busy::after{ content: ""; position: absolute; inset: 0; box-sizing: border-box; width: 14px; height: 14px; margin: auto; border: 2px solid var(--wpa-border-strong); border-top-color: var(--wpa-accent); border-radius: 50%; animation: wpayme-spin 0.6s linear infinite} .wpayme-app .wpayme-job{ scroll-margin-top: 110px; transition: opacity 0.3s ease, background 0.3s ease}  .wpayme-app .wpayme-job:target{ background: var(--wpa-accent-soft); box-shadow: inset -3px 0 0 var(--wpa-accent)} .wpayme-app .wpayme-job-result{ margin: 8px 0 0} .wpayme-app .wpayme-job-result-bar{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-job-result-bar.is-working{ color: var(--wpa-text-muted); font-weight: 600} .wpayme-app .wpayme-job-result-bar.is-ok{ border-color: color-mix(in srgb, var(--wpa-success) 35%, transparent); background: var(--wpa-success-soft); color: var(--wpa-success)} .wpayme-app .wpayme-job-result-bar.is-error{ border-color: color-mix(in srgb, var(--wpa-danger) 35%, transparent); background: var(--wpa-danger-soft); color: var(--wpa-danger)} .wpayme-app .wpayme-job-result-icon{ display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--wpa-surface)} .wpayme-app .wpayme-job-result-icon svg{ width: 13px; height: 13px} .wpayme-app .wpayme-job-result-text{ display: grid; flex: 1 1 200px; gap: 2px; min-width: 0} .wpayme-app .wpayme-job-result-text span{ color: var(--wpa-text); overflow-wrap: anywhere} .wpayme-app .wpayme-job-result-link{ display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid currentColor; border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); color: inherit; font-weight: 600; text-decoration: none; white-space: nowrap} .wpayme-app .wpayme-job-result-link:hover, .wpayme-app .wpayme-job-result-link:focus-visible{ box-shadow: 0 0 0 1px currentColor} .wpayme-app .wpayme-job-result-link svg{ width: 12px; height: 12px; transform: rotate(-90deg)}  .wpayme-app .wpayme-job.is-resolved> :not(.wpayme-job-body), .wpayme-app .wpayme-job.is-resolved .wpayme-job-body> :not(.wpayme-job-result){ opacity: 0.55} .wpayme-app .wpayme-job.is-leaving{ opacity: 0.4} .wpayme-app .wpayme-job-logpanel{ margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted)} .wpayme-app .wpayme-job-log{ display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12px} .wpayme-app .wpayme-job-log li{ display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 12px; margin: 0} .wpayme-app .wpayme-job-log time{ color: var(--wpa-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap} .wpayme-app .wpayme-job-log span{ overflow-wrap: anywhere} .wpayme-app .wpayme-job-log-empty{ margin: 0; color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-icon-btn.is-log[aria-expanded="true"]{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-flow> .wpayme-dryrun{ position: relative; flex: 1 1 100%; margin: 0} .wpayme-app .wpayme-dryrun-close{ margin-right: auto; width: 28px; height: 28px} .wpayme-app .wpayme-flow-notice{ flex: 1 1 100%; margin: 0; color: var(--wpa-danger); font-weight: 600} .wpayme-app .wpayme-dryrun-close[hidden]{ display: none}  .wpayme-app .wpayme-ptabs-tab[hidden], .wpayme-app [data-payment-type-only][hidden]{ display: none} .wpayme-app .wpayme-fe-note .button-link{ margin-right: 6px; font-weight: 600} .wpayme-app .wpayme-fe-note--warn{ background: var(--wpa-warn-soft)}  .wpayme-app .wpayme-don-tile> input[type="text"]{ flex: 1 1 auto; min-width: 0} .wpayme-app .wpayme-don-tile> .wpayme-fe-affix{ flex: 0 1 160px} .wpayme-app .wpayme-don-default{ position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; border-radius: var(--wpa-radius-sm); color: var(--wpa-text-faint); cursor: pointer} .wpayme-app .wpayme-don-default input{ position: absolute; opacity: 0; pointer-events: none} .wpayme-app .wpayme-don-default svg{ width: 18px; height: 18px} .wpayme-app .wpayme-don-default:hover{ background: var(--wpa-surface-muted); color: var(--wpa-warn)} .wpayme-app .wpayme-don-default:has(input:checked){ color: var(--wpa-warn)} .wpayme-app .wpayme-don-default:has(input:checked) svg{ fill: currentColor} .wpayme-app .wpayme-don-default:has(input:focus-visible){ outline: 2px solid var(--wpa-accent); outline-offset: 1px} .wpayme-app .wpayme-don-codes{ display: grid; gap: 8px} .wpayme-app .wpayme-don-code-list{ display: grid; gap: 6px; margin: 0; padding: 0; list-style: none} .wpayme-app .wpayme-don-code-list li{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0; padding: 8px 10px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted)} .wpayme-app .wpayme-don-code-list li> span{ color: var(--wpa-text); font-size: 13px; font-weight: 600} .wpayme-app .wpayme-don-codes small{ color: var(--wpa-text-muted); font-size: 12px}  .wpayme-app .wpayme-don-new{ display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: var(--wpa-radius-pill); line-height: 1} .wpayme-app .wpayme-don-new svg{ width: 15px; height: 15px} .wpayme-app .wpayme-don-stats .wpayme-stat-value{ font-variant-numeric: tabular-nums} .wpayme-app .wpayme-don-head-note{ margin-right: auto; color: var(--wpa-text-muted); font-size: 12.5px} .wpayme-app .wpayme-don-list{ display: grid; gap: 0; margin: -6px 0; padding: 0; list-style: none} .wpayme-app .wpayme-don-campaign{ display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px 28px; margin: 0; padding: 16px 0; border-top: 1px solid var(--wpa-border)} .wpayme-app .wpayme-don-campaign:first-child{ border-top: 0} .wpayme-app .wpayme-don-campaign-title{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px} .wpayme-app .wpayme-don-campaign-title a{ color: var(--wpa-text); font-size: 14px; font-weight: 600; text-decoration: none} .wpayme-app .wpayme-don-campaign-title a:hover{ color: var(--wpa-accent)} .wpayme-app .wpayme-don-campaign-amount{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 8px} .wpayme-app .wpayme-don-campaign-amount strong{ color: var(--wpa-text); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums} .wpayme-app .wpayme-don-campaign-amount span{ color: var(--wpa-text-muted); font-size: 12.5px} .wpayme-app .wpayme-don-bar{ height: 8px; max-width: 520px; overflow: hidden; border-radius: var(--wpa-radius-pill); background: var(--wpa-accent-soft)} .wpayme-app .wpayme-don-bar span{ display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--wpa-accent)} .wpayme-app .wpayme-don-campaign.is-reached .wpayme-don-bar{ background: var(--wpa-success-soft)} .wpayme-app .wpayme-don-campaign.is-reached .wpayme-don-bar span{ background: var(--wpa-success)} .wpayme-app .wpayme-don-campaign-facts{ display: flex; gap: 22px; margin: 0} .wpayme-app .wpayme-don-campaign-facts div{ min-width: 58px} .wpayme-app .wpayme-don-campaign-facts dt{ color: var(--wpa-text-muted); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase} .wpayme-app .wpayme-don-campaign-facts dd{ margin: 2px 0 0; color: var(--wpa-text); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums} .wpayme-app .wpayme-don-campaign-actions{ display: flex; align-items: center; gap: 6px} .wpayme-app .wpayme-don-campaign-actions .wpayme-copy--icon{ height: 34px; padding: 0 9px} .wpayme-app .wpayme-don-empty{ max-width: 520px; margin: 0 auto; padding: 26px 12px; text-align: center} .wpayme-app .wpayme-don-empty h3{ margin: 12px 0 6px; color: var(--wpa-text); font-size: 16px} .wpayme-app .wpayme-don-empty p{ margin: 0 0 16px; color: var(--wpa-text-muted)} .wpayme-app .wpayme-don-empty-icon{ display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-don-empty-icon svg{ width: 24px; height: 24px} .wpayme-app .wpayme-don-columns{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; gap: 16px; margin-top: 16px} .wpayme-app .wpayme-don-columns> .wpayme-card + .wpayme-card{ margin-top: 0} .wpayme-app .wpayme-don-gifts{ display: grid; margin: -6px 0; padding: 0; list-style: none} .wpayme-app .wpayme-don-gift{ display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 0; border-top: 1px solid var(--wpa-border)} .wpayme-app .wpayme-don-gift:first-child{ border-top: 0} .wpayme-app .wpayme-don-gift-body{ flex: 1 1 auto; min-width: 0} .wpayme-app .wpayme-don-gift-top{ display: flex; align-items: baseline; gap: 10px} .wpayme-app .wpayme-don-gift-name{ overflow: hidden; color: var(--wpa-text); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap} .wpayme-app .wpayme-don-gift-name:hover{ color: var(--wpa-accent)} .wpayme-app .wpayme-don-gift-amount{ margin-right: auto; color: var(--wpa-text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap} .wpayme-app .wpayme-don-gift-meta{ display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-don-gift-tags{ display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px} .wpayme-app .wpayme-don-gift-tags:empty{ display: none} .wpayme-app .wpayme-don-gift-tribute{ color: var(--wpa-text-muted); font-size: 12px; font-style: italic} .wpayme-app .wpayme-don-giftaid-count{ display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px} .wpayme-app .wpayme-don-giftaid-count strong{ color: var(--wpa-text); font-size: 26px; font-weight: 700} .wpayme-app .wpayme-don-giftaid-count span{ color: var(--wpa-text-muted)} .wpayme-app .wpayme-don-export{ display: grid; gap: 6px; margin-top: 14px} .wpayme-app .wpayme-don-export label{ color: var(--wpa-text); font-size: 12.5px; font-weight: 600} .wpayme-app .wpayme-don-export select, .wpayme-app .wpayme-don-export input[type="date"]{ width: 100%; max-width: none; min-height: 36px} .wpayme-app .wpayme-don-export-dates{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 8px} .wpayme-app .wpayme-don-export-dates> div{ display: grid; gap: 6px} .wpayme-app .wpayme-don-export .button{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px} .wpayme-app .wpayme-don-export .button svg{ width: 15px; height: 15px} @media (max-width: 1100px){ .wpayme-app .wpayme-don-campaign{ grid-template-columns: minmax(0, 1fr) auto} .wpayme-app .wpayme-don-campaign-actions{ grid-column: 1 / -1} .wpayme-app .wpayme-don-columns{ grid-template-columns: minmax(0, 1fr)}} @media (max-width: 600px){ .wpayme-app .wpayme-don-campaign{ grid-template-columns: minmax(0, 1fr); gap: 12px} .wpayme-app .wpayme-don-campaign-facts{ justify-content: space-between} .wpayme-app .wpayme-don-tile{ flex-wrap: wrap} .wpayme-app .wpayme-don-tile> input[type="text"]{ flex-basis: 100%; order: 5} .wpayme-app .wpayme-don-tile> .wpayme-fe-affix{ flex: 1 1 auto}}  .wpayme-app .wpayme-tpl-grid{  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none} .wpayme-app .wpayme-tpl{ margin: 0} .wpayme-app .wpayme-tpl-link{ display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: var(--wpa-shadow); color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease} .wpayme-app .wpayme-tpl-link:hover, .wpayme-app .wpayme-tpl-link:focus-visible{ border-color: var(--wpa-accent); box-shadow: 0 6px 18px rgb(79 70 229 / 0.12); transform: translateY(-1px); outline: none} .wpayme-app .wpayme-tpl-head{ display: flex; align-items: center; gap: 10px} .wpayme-app .wpayme-tpl-icon{ display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-tpl-icon svg{ width: 18px; height: 18px} .wpayme-app .wpayme-tpl-title{ flex: 1 1 auto; min-width: 0; color: var(--wpa-text); font-size: 14px; font-weight: 700; line-height: 1.3} .wpayme-app .wpayme-tpl-text{ color: var(--wpa-text-muted); font-size: 12.5px; line-height: 1.5} .wpayme-app .wpayme-tpl-go{ display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted); color: var(--wpa-text-faint)} .wpayme-app .wpayme-tpl-go svg{ width: 14px; height: 14px} .wpayme-app .wpayme-tpl-link:hover .wpayme-tpl-go, .wpayme-app .wpayme-tpl-link:focus-visible .wpayme-tpl-go{ background: var(--wpa-accent); color: #fff} .wpayme-app .wpayme-tpl-blank{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--wpa-border); font-size: 13px} .wpayme-app .wpayme-tpl-blank span{ color: var(--wpa-text-muted)}  .wpayme-field--break{ border-style: dashed; background: var(--wpa-surface-muted)} .wpayme-field--break .wpayme-field-type{ background: var(--wpa-warn-soft); color: #8a5a00} .wpayme-app .wpayme-field--break{ position: relative; border-color: color-mix(in srgb, var(--wpa-warn) 55%, transparent); background: color-mix(in srgb, var(--wpa-warn) 7%, var(--wpa-surface))}  .wpayme-app .wpayme-field--break .wpayme-field-head{ position: relative; padding-top: 18px} .wpayme-app .wpayme-field--break .wpayme-field-head::before{ content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 8px; background: color-mix(in srgb, var(--wpa-text) 72%, transparent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 6.5 6 1.5 12 6.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") repeat-x 0 0; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 6.5 6 1.5 12 6.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") repeat-x 0 0; -webkit-mask-size: 12px 8px; mask-size: 12px 8px} .wpayme-field-note{ grid-column: 1 / -1; margin: 0; color: var(--wpa-text-muted); font-size: 12.5px}  .wpayme-payment-files{ margin: 0; padding: 0; list-style: none} .wpayme-payment-files li{ display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px}  .wpayme-app.post-type-wpayme_coupon .column-title .row-title::before{ content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 8px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.6 13.4L12 22l-9-9V3h10l7.6 7.6a2 2 0 0 1 0 2.8z%22/%3E%3Ccircle cx=%227.5%22 cy=%227.5%22 r=%221.3%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20.6 13.4L12 22l-9-9V3h10l7.6 7.6a2 2 0 0 1 0 2.8z%22/%3E%3Ccircle cx=%227.5%22 cy=%227.5%22 r=%221.3%22/%3E%3C/svg%3E") center / contain no-repeat}  .wpayme-app #poststuff .wpayme-settings-actions .button-primary, .wpayme-app #poststuff .wpayme-settings-actions .button.button-primary{ border: 0; background: var(--wpa-accent); color: #fff; font-weight: 600} .wpayme-app #poststuff .wpayme-settings-actions .button-primary:hover, .wpayme-app #poststuff .wpayme-settings-actions .button-primary:focus, .wpayme-app #poststuff .wpayme-settings-actions .button.button-primary:hover, .wpayme-app #poststuff .wpayme-settings-actions .button.button-primary:focus{ background: var(--wpa-accent); color: #fff; filter: brightness(1.08)}  .wpayme-app #poststuff .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving), .wpayme-app #poststuff .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving):hover, .wpayme-app #poststuff .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving):focus, .wpayme-app #poststuff .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving):active{ border: 1px solid color-mix(in srgb, var(--wpa-warn) 70%, #000); background: var(--wpa-warn); color: #1f1300; filter: none; box-shadow: 0 1px 2px rgb(31 19 0 / 0.25)} .wpayme-app #poststuff .wpayme-settings-actions.is-dirty [type="submit"]:not(.is-saving):hover{ background: color-mix(in srgb, var(--wpa-warn) 88%, #000)}  .wpayme-app .wpayme-cta-bar{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px} .wpayme-app .wpayme-cta{ display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 34px; padding: 0 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); color: var(--wpa-text); font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease} .wpayme-app .wpayme-cta svg{ flex: 0 0 auto; width: 16px; height: 16px} .wpayme-app .wpayme-cta:hover, .wpayme-app .wpayme-cta:focus-visible{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-cta--primary{ border-color: var(--wpa-accent); background: var(--wpa-accent); color: #fff} .wpayme-app .wpayme-cta--primary:hover, .wpayme-app .wpayme-cta--primary:focus-visible{ background: var(--wpa-accent); color: #fff; filter: brightness(1.08)}  .wpayme-app .wpayme-cta.is-copied{ border-color: var(--wpa-success); background: var(--wpa-success-soft); color: var(--wpa-success)}  .wpayme-app .wpayme-row-link{ cursor: pointer} .wpayme-app .wpayme-row-link:hover> td{ background: var(--wpa-surface-muted)}  .wpayme-app .wpayme-sidebar-rule{ height: 1px; margin: 12px 14px; border: 0; background: var(--wpa-border)} .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-out .wpayme-sidebar-out-icon{ display: inline-flex; margin-right: auto; opacity: 0.5} .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-out .wpayme-sidebar-out-icon svg{ width: 13px; height: 13px} .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-out:hover .wpayme-sidebar-out-icon{ opacity: 1}  .wpayme-app .wpayme-hero{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; margin: 0 0 18px; padding: 28px 30px; border: 1px solid color-mix(in srgb, var(--wpa-accent) 28%, transparent); border-radius: var(--wpa-radius);  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--wpa-accent) 16%, transparent), transparent 60%), var(--wpa-surface)} .wpayme-app .wpayme-hero-copy h2{ margin: 10px 0 8px; font-size: 26px; line-height: 1.2} .wpayme-app .wpayme-hero-copy p{ max-width: 62ch; margin: 0 0 16px; color: var(--wpa-text-muted); font-size: 14px; line-height: 1.6} .wpayme-app .wpayme-hero-badge{ display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--wpa-radius-pill); background: var(--wpa-accent-soft); color: var(--wpa-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase} .wpayme-app .wpayme-hero-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px} .wpayme-app .wpayme-cta--lg{ min-height: 42px; padding: 0 20px; font-size: 14px} .wpayme-app .wpayme-hero-note{ margin: 0; color: var(--wpa-text-faint); font-size: 12.5px} .wpayme-app .wpayme-hero-stats{ display: grid; gap: 10px; margin: 0; padding: 0; list-style: none} .wpayme-app .wpayme-hero-stats li{ display: grid; min-width: 132px; margin: 0; padding: 12px 16px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); text-align: center} .wpayme-app .wpayme-hero-stats strong{ font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1} .wpayme-app .wpayme-hero-stats span{ color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-hero--closing{ grid-template-columns: minmax(0, 1fr); margin-top: 18px; text-align: center} .wpayme-app .wpayme-hero--closing .wpayme-hero-copy p{ margin-inline: auto} .wpayme-app .wpayme-hero--closing .wpayme-hero-actions{ justify-content: center; margin-bottom: 0}  .wpayme-app .wpayme-perks{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px} .wpayme-app .wpayme-perk{ padding: 16px 18px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface)} .wpayme-app .wpayme-perk-icon{ display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-perk-icon svg{ width: 18px; height: 18px} .wpayme-app .wpayme-perk h3{ margin: 0 0 6px; font-size: 14px} .wpayme-app .wpayme-perk p{ margin: 0; color: var(--wpa-text-muted); font-size: 13px; line-height: 1.55}  .wpayme-app .wpayme-cmp th[scope="row"]{ font-weight: 500; text-align: right} .wpayme-app .wpayme-cmp .wpayme-cmp-pro{ background: color-mix(in srgb, var(--wpa-accent) 6%, transparent); font-weight: 600} .wpayme-app .wpayme-cmp-yes{ color: var(--wpa-success); font-weight: 700} .wpayme-app .wpayme-cmp-no{ color: var(--wpa-text-faint)}  .wpayme-app .wpayme-steps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none} .wpayme-app .wpayme-steps li{ display: grid; gap: 4px; margin: 0; padding: 16px 18px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm)} .wpayme-app .wpayme-step-n{ display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-bottom: 4px; border-radius: 50%; background: var(--wpa-accent); color: #fff; font-size: 12px; font-weight: 700} .wpayme-app .wpayme-steps span:last-child{ color: var(--wpa-text-muted); font-size: 13px; line-height: 1.55} .wpayme-app .wpayme-steps-note{ margin: 14px 0 0; color: var(--wpa-text-muted); font-size: 13px; line-height: 1.55}  .wpayme-app .wpayme-contact-layout{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start} .wpayme-app .wpayme-contact-aside{ display: grid; gap: 18px}  .wpayme-app .wpayme-form-row{ display: grid; gap: 6px} .wpayme-app .wpayme-form-label{ font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--wpa-text-muted)} .wpayme-app .wpayme-form-note{ margin: 0; color: var(--wpa-text-faint); font-size: 12.5px} .wpayme-app .wpayme-contact-form{ display: grid; gap: 16px; max-width: 640px} .wpayme-app .wpayme-contact-form input[type="text"], .wpayme-app .wpayme-contact-form input[type="email"], .wpayme-app .wpayme-contact-form textarea, .wpayme-app .wpayme-contact-form select{ width: 100%; max-width: none}  .wpayme-app .wpayme-trap{ position: absolute; right: -9999px; width: 1px; height: 1px; overflow: hidden} .wpayme-app .wpayme-check{ display: flex; gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted)} .wpayme-app .wpayme-check> span{ display: grid; gap: 2px} .wpayme-app .wpayme-check> span> span{ color: var(--wpa-text-muted); font-size: 12.5px; line-height: 1.5} .wpayme-app .wpayme-report{ margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface-muted); color: var(--wpa-text-muted); font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word} .wpayme-app .wpayme-links{ display: grid; gap: 8px; margin: 0; padding: 0; list-style: none} .wpayme-app .wpayme-links a{ display: flex; gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); color: var(--wpa-text); text-decoration: none} .wpayme-app .wpayme-links a:hover, .wpayme-app .wpayme-links a:focus-visible{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft)} .wpayme-app .wpayme-links svg{ flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--wpa-accent)} .wpayme-app .wpayme-links span{ display: grid; gap: 2px} .wpayme-app .wpayme-links span span{ color: var(--wpa-text-muted); font-size: 12.5px; line-height: 1.5} @media screen and (max-width: 1100px){ .wpayme-app .wpayme-perks, .wpayme-app .wpayme-steps{ grid-template-columns: repeat(2, minmax(0, 1fr))} .wpayme-app .wpayme-contact-layout{ grid-template-columns: minmax(0, 1fr)}} @media screen and (max-width: 782px){ .wpayme-app .wpayme-hero{ grid-template-columns: minmax(0, 1fr); padding: 22px 18px} .wpayme-app .wpayme-hero-stats{ grid-template-columns: repeat(3, minmax(0, 1fr))} .wpayme-app .wpayme-perks, .wpayme-app .wpayme-steps{ grid-template-columns: minmax(0, 1fr)}}  .wpayme-app .wpayme-cycle-switch{ display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface-muted)} .wpayme-app .wpayme-cycle-btn{ min-height: 28px; padding: 0 14px; border: 0; border-radius: var(--wpa-radius-pill); background: transparent; color: var(--wpa-text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer} .wpayme-app .wpayme-cycle-btn.is-active{ background: var(--wpa-surface); box-shadow: var(--wpa-shadow); color: var(--wpa-text)} .wpayme-app .wpayme-plans{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px} .wpayme-app .wpayme-plan{ position: relative; display: grid; align-content: start; padding: 20px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface)}  .wpayme-app .wpayme-plan.is-featured{ border-color: var(--wpa-accent); box-shadow: 0 0 0 1px var(--wpa-accent)} .wpayme-app .wpayme-plan-flag{ position: absolute; top: -10px; right: 20px; padding: 2px 10px; border-radius: var(--wpa-radius-pill); background: var(--wpa-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase} .wpayme-app .wpayme-plan h3{ margin: 0 0 4px; font-size: 16px} .wpayme-app .wpayme-plan-sub{ margin: 0 0 12px; color: var(--wpa-text-muted); font-size: 13px; line-height: 1.5} .wpayme-app .wpayme-plan-price{ display: grid; gap: 4px; margin-top: 8px} .wpayme-app .wpayme-plan-price[hidden]{ display: none} .wpayme-app .wpayme-plan-amount{ font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1} .wpayme-app .wpayme-plan-cycle{ margin-bottom: 12px; color: var(--wpa-text-muted); font-size: 12.5px} .wpayme-app .wpayme-plan-buy{ justify-content: center; width: 100%} .wpayme-app .wpayme-plan-trial{ margin-top: 8px; padding: 0; border: 0; background: none; color: var(--wpa-accent); font-size: 12.5px; text-decoration: underline; cursor: pointer} .wpayme-app .wpayme-plan-note{ margin: 14px 0 0; color: var(--wpa-text-faint); font-size: 12.5px}  .wpayme-app .wpayme-lightbox{ position: fixed; inset: 0; z-index: 100100; display: flex; align-items: center; justify-content: center; padding: 24px} .wpayme-app .wpayme-lightbox[hidden]{ display: none} .wpayme-app .wpayme-lightbox-scrim{ position: absolute; inset: 0; background: rgb(15 23 42 / 0.55)} .wpayme-app .wpayme-lightbox-panel{ position: relative; display: grid; grid-template-rows: auto 1fr auto; width: min(920px, 100%); max-height: min(860px, 92vh); overflow: hidden; border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: 0 24px 60px rgb(15 23 42 / 0.35)} .wpayme-app .wpayme-lightbox-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--wpa-border)} .wpayme-app .wpayme-lightbox-head h2{ margin: 0; font-size: 15px} .wpayme-app .wpayme-lightbox-body{ position: relative; min-height: 420px; background: var(--wpa-surface-muted)} .wpayme-app .wpayme-lightbox-body iframe{ display: block; width: 100%; height: 100%; min-height: 420px; border: 0; background: transparent} .wpayme-app .wpayme-lightbox-loading{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--wpa-text-muted); font-size: 13px} .wpayme-app .wpayme-lightbox.is-ready .wpayme-lightbox-loading{ display: none} .wpayme-app .wpayme-lightbox-foot{ margin: 0; padding: 10px 16px; border-top: 1px solid var(--wpa-border); color: var(--wpa-text-faint); font-size: 12px}  body.wpayme-has-lightbox{ overflow: hidden}  .wpayme-app .wpayme-side{ position: fixed; inset: 0; z-index: 100050} .wpayme-app .wpayme-side[hidden]{ display: none} .wpayme-app .wpayme-side-scrim{ position: absolute; inset: 0; background: rgb(15 23 42 / 0.35)} .wpayme-app .wpayme-side-panel{ position: absolute; top: 0; left: 0; bottom: 0; display: grid; grid-template-rows: auto 1fr; width: min(560px, 100%); overflow: hidden; border-right: 1px solid var(--wpa-border); background: var(--wpa-surface); box-shadow: 18px 0 48px rgb(15 23 42 / 0.18)} .wpayme-app .wpayme-side-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--wpa-border)} .wpayme-app .wpayme-side-head h2{ margin: 0; font-size: 15px;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .wpayme-app .wpayme-side-body{ padding: 16px; overflow-y: auto} .wpayme-app .wpayme-side-who{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px} .wpayme-app .wpayme-side-who strong{ display: block; font-size: 14px} .wpayme-app .wpayme-side-who a{ font-size: 12.5px} .wpayme-app .wpayme-side-facts{ display: grid; gap: 1px; margin: 0 0 16px; overflow: hidden; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-border)} .wpayme-app .wpayme-side-facts> div{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--wpa-surface)} .wpayme-app .wpayme-side-facts dt{ margin: 0; color: var(--wpa-text-muted); font-size: 12.5px} .wpayme-app .wpayme-side-facts dd{ margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: left}  .wpayme-app .wpayme-side-body .wpayme-cta-bar{ margin: 0}  .wpayme-app tr[data-wpayme-href].is-open> td{ background: var(--wpa-accent-soft)} @media screen and (max-width: 782px){ .wpayme-app .wpayme-side-panel{ width: 100%}}  .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-accent{ color: #ea580c; font-weight: 700} .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-accent .wpayme-sidebar-icon{ color: #ea580c} .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-accent .wpayme-sidebar-spark{ color: #eab308} .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-accent:hover, .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-accent:focus-visible{ background: transparent; color: #c2410c} .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-accent:hover .wpayme-sidebar-icon, .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-accent:focus-visible .wpayme-sidebar-icon{ color: #c2410c}  .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-accent.is-current, .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-accent.is-current .wpayme-sidebar-icon, .wpayme-app .wpayme-sidebar-nav a.wpayme-sidebar-accent.is-current .wpayme-sidebar-spark{ color: #fff} .wpayme-app .wpayme-sidebar-spark{ display: inline-flex; margin-right: auto} .wpayme-app .wpayme-sidebar-spark svg{ width: 15px; height: 15px}  .wpayme-app.wpayme-app--dark .wpayme-sidebar-nav a.wpayme-sidebar-accent, .wpayme-app.wpayme-app--dark .wpayme-sidebar-nav a.wpayme-sidebar-accent .wpayme-sidebar-icon{ color: #fb923c}  .wpayme-app .wpayme-toolbar> .wpayme-group:last-child, .wpayme-app .wpayme-toolbar> .wpayme-export-btn:last-child, .wpayme-app .wpayme-toolbar> .wpayme-cta-bar:last-child{ margin-right: auto}  .wpayme-app .wpayme-inv-stats .wpayme-stat-value{ font-variant-numeric: tabular-nums}  .wpayme-app .wpayme-section-action{ display: flex; justify-content: flex-end; margin: 10px 0 0}  .wpayme-app .wpayme-tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px} .wpayme-app .wpayme-tile-stat{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: var(--wpa-surface); color: var(--wpa-text); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease} .wpayme-app .wpayme-tile-stat:hover, .wpayme-app .wpayme-tile-stat:focus-visible{ border-color: var(--wpa-accent); background: var(--wpa-accent-soft)} .wpayme-app .wpayme-tile-value{ display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3} .wpayme-app .wpayme-tile-label{ display: block; color: var(--wpa-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase} .wpayme-app .wpayme-dash-pair{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0 0 18px}  .wpayme-app .wpayme-bars{ display: grid; gap: 10px; margin: 0; padding: 0; list-style: none} .wpayme-app .wpayme-bars li{ display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 10px; margin: 0} .wpayme-app .wpayme-bar-label{ overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap} .wpayme-app .wpayme-bar-track{ height: 8px; border-radius: 999px; background: var(--wpa-surface-muted); overflow: hidden} .wpayme-app .wpayme-bar-fill{ display: block; height: 100%; border-radius: 999px; background: var(--wpa-accent)} .wpayme-app .wpayme-bar-fill--completed{ background: var(--wpa-success)} .wpayme-app .wpayme-bar-fill--pending{ background: var(--wpa-warn)} .wpayme-app .wpayme-bar-fill--failed, .wpayme-app .wpayme-bar-fill--expired, .wpayme-app .wpayme-bar-fill--cancelled{ background: var(--wpa-danger)} .wpayme-app .wpayme-bar-fill--refunded{ background: var(--wpa-text-muted)} .wpayme-app .wpayme-bar-value{ color: var(--wpa-text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap} @media screen and (max-width: 1100px){ .wpayme-app .wpayme-dash-pair{ grid-template-columns: minmax(0, 1fr)}}  .wpayme-app .wpayme-dash-grid{ align-items: start;  grid-auto-flow: row dense} .wpayme-app .wpayme-dash-chart{  height: auto} .wpayme-app .wpayme-dash-chart .wpayme-spark{ max-height: 260px}  .wpayme-app .wpayme-dash-main, .wpayme-app .wpayme-dash-side{ display: grid; align-content: start; gap: 16px; min-width: 0}  .wpayme-app .wpayme-tiles{ grid-template-columns: repeat(4, minmax(0, 1fr))} @media screen and (max-width: 1100px){ .wpayme-app .wpayme-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr))}} @media screen and (max-width: 600px){ .wpayme-app .wpayme-tiles{ grid-template-columns: minmax(0, 1fr)}}  .wpayme-app .wpayme-revenue{ display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "scale plot" ".     days"; gap: 6px 12px; align-items: stretch;  align-content: start}  .wpayme-app .wpayme-revenue-scale{ grid-area: scale; position: relative;  min-width: 46px; height: 220px; color: var(--wpa-text-faint); font-size: 11px; font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap} .wpayme-app .wpayme-revenue-scale span{ position: absolute; left: 0; transform: translateY(-50%)} .wpayme-app .wpayme-revenue-scale span:nth-child(1){ top: 8px} .wpayme-app .wpayme-revenue-scale span:nth-child(2){ top: 50%} .wpayme-app .wpayme-revenue-scale span:nth-child(3){ top: calc(100% - 8px)} .wpayme-app .wpayme-revenue-plot{ grid-area: plot; min-width: 0;  padding-left: 6px} .wpayme-app .wpayme-revenue-days{ grid-area: days; display: flex; justify-content: space-between; color: var(--wpa-text-faint); font-size: 11px} .wpayme-app .wpayme-revenue-svg{ display: block; width: 100%; height: 220px; overflow: visible} .wpayme-app .wpayme-revenue-rule{ stroke: var(--wpa-border); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke} .wpayme-app .wpayme-revenue-stop-top{ stop-color: var(--wpa-accent); stop-opacity: 0.28} .wpayme-app .wpayme-revenue-stop-bottom{ stop-color: var(--wpa-accent); stop-opacity: 0.02} .wpayme-app .wpayme-revenue-area{ fill: url(#wpayme-revenue-fill)} .wpayme-app .wpayme-revenue-line{ fill: none; stroke: var(--wpa-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;  vector-effect: non-scaling-stroke} .wpayme-app .wpayme-revenue-dot{ fill: var(--wpa-surface); stroke: var(--wpa-accent); stroke-width: 2; vector-effect: non-scaling-stroke}  .wpayme-app a.wpayme-cta:focus, .wpayme-app a.wpayme-export-btn:focus, .wpayme-app a.wpayme-qv-edit:focus, .wpayme-app a.wpayme-seg-item:focus, .wpayme-app a.wpayme-add:focus, .wpayme-app a.wpayme-don-new:focus, .wpayme-app a.nav-tab:focus, .wpayme-app .wpayme-views a:focus{ border-radius: var(--wpa-radius-pill)} .wpayme-app a.wpayme-tile-stat:focus, .wpayme-app a.wpayme-blank-cta:focus, .wpayme-app .wpayme-links a:focus, .wpayme-app .wpayme-sidebar-nav a:focus{ border-radius: var(--wpa-radius-sm)} .wpayme-app a.wpayme-stat:focus, .wpayme-app a.wpayme-tile:focus{ border-radius: var(--wpa-radius)}  .wpayme-app a.wpayme-tile-pro:focus{ border-radius: var(--wpa-radius) 0 var(--wpa-radius) 0}  .wpayme-app .wpayme-group a:focus{ border-radius: 0}  .wpayme-app a.wpayme-row-title{ display: inline-flex; align-items: center; gap: 8px; text-decoration: none} .wpayme-app .wpayme-row-icon{ display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-row-icon svg{ width: 15px; height: 15px}  .wpayme-app .column-wpayme_payment_title .wpayme-row-source, .wpayme-app .column-wpayme_payment_title .row-actions{ margin-right: 32px}  .wpayme-app .wpayme-row-method{ display: inline-block; color: var(--wpa-text-muted); font-size: 12.5px} .wpayme-app .wpayme-row-method--none{ color: var(--wpa-text-faint)}  .wpayme-app .wpayme-plan-now{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-pill); background: var(--wpa-surface); font-size: 13px} .wpayme-app .wpayme-plan-now svg{ width: 16px; height: 16px; color: var(--wpa-accent)}  .wpayme-app .wpayme-plan-list{ display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--wpa-text-muted); font-size: 12.5px} .wpayme-app .wpayme-plan-list li{ display: flex; align-items: baseline; gap: 8px; margin: 0} .wpayme-app .wpayme-plan-list li::before{ content: "\2713"; color: var(--wpa-success); font-weight: 700}  .wpayme-app .wpayme-plan-top{ display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--wpa-success) 40%, transparent); border-radius: var(--wpa-radius); background: var(--wpa-success-soft)} .wpayme-app .wpayme-plan-top-icon svg{ width: 26px; height: 26px; color: var(--wpa-success)} .wpayme-app .wpayme-plan-top strong{ display: block; font-size: 15px} .wpayme-app .wpayme-plan-top span span, .wpayme-app .wpayme-plan-top> div> span{ color: var(--wpa-text-muted); font-size: 13px}  .wpayme-app .wpayme-plan-buy.is-busy{ opacity: 0.7; pointer-events: none}  .wpayme-app .wpayme-plans{ grid-template-columns: repeat(4, minmax(0, 1fr))} @media screen and (max-width: 1280px){ .wpayme-app .wpayme-plans{ grid-template-columns: repeat(2, minmax(0, 1fr))}} @media screen and (max-width: 782px){ .wpayme-app .wpayme-plans{ grid-template-columns: minmax(0, 1fr)}}  .wpayme-app .wpayme-ltd-band{ display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--wpa-warn) 55%, transparent); border-radius: var(--wpa-radius); background: radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--wpa-warn) 22%, transparent), transparent 60%), var(--wpa-surface)} .wpayme-app .wpayme-ltd-icon{ display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--wpa-radius-pill); background: var(--wpa-warn); color: #1f1300} .wpayme-app .wpayme-ltd-icon svg{ width: 18px; height: 18px} .wpayme-app .wpayme-ltd-band strong{ display: block; font-size: 14px} .wpayme-app .wpayme-ltd-band span span, .wpayme-app .wpayme-ltd-band> div> span{ color: var(--wpa-text-muted); font-size: 13px} .wpayme-app .wpayme-ltd-cta{ margin-right: auto; min-height: 34px; padding: 0 16px; border: 0; border-radius: var(--wpa-radius-pill); background: var(--wpa-warn); color: #1f1300; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer} .wpayme-app .wpayme-ltd-cta:hover, .wpayme-app .wpayme-ltd-cta:focus-visible{ background: color-mix(in srgb, var(--wpa-warn) 85%, #000)}  .wpayme-app .wpayme-cycle-btn[data-wpayme-cycle="lifetime"]{ color: #9a6100} .wpayme-app .wpayme-cycle-btn[data-wpayme-cycle="lifetime"].is-active{ background: var(--wpa-warn); color: #1f1300} .wpayme-app .wpayme-plans.is-lifetime .wpayme-plan{ border-color: color-mix(in srgb, var(--wpa-warn) 45%, transparent); background: linear-gradient(-180deg, color-mix(in srgb, var(--wpa-warn) 9%, transparent), transparent 55%), var(--wpa-surface)} .wpayme-app .wpayme-plans.is-lifetime .wpayme-plan.is-featured{ border-color: var(--wpa-warn); box-shadow: 0 0 0 1px var(--wpa-warn)} .wpayme-app .wpayme-plans.is-lifetime .wpayme-plan-flag{ background: var(--wpa-warn); color: #1f1300} .wpayme-app .wpayme-plans.is-lifetime .wpayme-cta--primary{ border-color: var(--wpa-warn); background: var(--wpa-warn); color: #1f1300}  .wpayme-app .wpayme-plan-saving{ display: grid; gap: 2px; margin: 0 0 12px; padding: 8px 10px; border-radius: var(--wpa-radius-sm); background: var(--wpa-warn-soft)} .wpayme-app .wpayme-plan-saving strong{ color: #8a5a00; font-size: 13px; font-weight: 700} .wpayme-app .wpayme-plan-saving span{ color: var(--wpa-text-muted); font-size: 11.5px}  .wpayme-app .wpayme-plan:nth-child(1) .wpayme-plan-amount{ color: var(--wpa-accent)} .wpayme-app .wpayme-plan:nth-child(2) .wpayme-plan-amount{ color: var(--wpa-success)} .wpayme-app .wpayme-plan:nth-child(3) .wpayme-plan-amount{ color: #0891b2} .wpayme-app .wpayme-plan:nth-child(4) .wpayme-plan-amount{ color: #7c3aed} .wpayme-app .wpayme-plans.is-lifetime .wpayme-plan-amount{ color: #b45309}  .wpayme-app .wpayme-plans{ padding-top: 12px}  .wpayme-app .wpayme-hero-stat-icon{ display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 auto 6px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-hero-stat-icon svg{ width: 15px; height: 15px}  .wpayme-app .wpayme-closing{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr); gap: 28px; align-items: center; margin: 18px 0 0; padding: 30px 32px; border: 1px solid color-mix(in srgb, var(--wpa-warn) 45%, transparent); border-radius: var(--wpa-radius); background: radial-gradient(110% 160% at 0% 0%, color-mix(in srgb, var(--wpa-warn) 20%, transparent), transparent 62%), radial-gradient(120% 200% at 100% 100%, color-mix(in srgb, var(--wpa-accent) 16%, transparent), transparent 60%), var(--wpa-surface)} .wpayme-app .wpayme-closing-badge{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--wpa-radius-pill); background: var(--wpa-warn); color: #1f1300; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase} .wpayme-app .wpayme-closing-badge svg{ width: 14px; height: 14px} .wpayme-app .wpayme-closing-copy h2{ margin: 12px 0 8px; font-size: 26px; line-height: 1.2} .wpayme-app .wpayme-closing-copy p{ max-width: 58ch; margin: 0 0 14px; color: var(--wpa-text-muted); font-size: 14px; line-height: 1.6} .wpayme-app .wpayme-closing-points{ display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px} .wpayme-app .wpayme-closing-points li{ display: flex; align-items: baseline; gap: 8px; margin: 0} .wpayme-app .wpayme-closing-points li::before{ content: "\2713"; color: var(--wpa-success); font-weight: 700} .wpayme-app .wpayme-closing-buy{ display: grid; justify-items: center; gap: 4px; padding: 22px 20px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius); background: var(--wpa-surface); box-shadow: 0 12px 30px rgb(15 23 42 / 0.08); text-align: center} .wpayme-app .wpayme-closing-label{ color: var(--wpa-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase} .wpayme-app .wpayme-closing-price{ color: #b45309; font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05} .wpayme-app .wpayme-closing-was{ margin-bottom: 10px; color: var(--wpa-text-muted); font-size: 12px} .wpayme-app .wpayme-closing-cta{ width: 100%; justify-content: center; border-color: var(--wpa-warn); background: var(--wpa-warn); color: #1f1300} .wpayme-app .wpayme-closing-cta:hover, .wpayme-app .wpayme-closing-cta:focus-visible{ background: color-mix(in srgb, var(--wpa-warn) 88%, #000); color: #1f1300; filter: none} .wpayme-app .wpayme-closing-coupon{ margin-top: 10px; padding: 4px 12px; border: 1px dashed color-mix(in srgb, var(--wpa-warn) 70%, transparent); border-radius: var(--wpa-radius-pill); color: #8a5a00; font-size: 12px} .wpayme-app .wpayme-closing-fine{ margin-top: 8px; color: var(--wpa-text-faint); font-size: 11.5px} @media screen and (max-width: 1100px){ .wpayme-app .wpayme-closing{ grid-template-columns: minmax(0, 1fr)}}  .wpayme-app .wpayme-upgrade .wpayme-hero{ display: block; padding: 34px 36px 30px; border-color: color-mix(in srgb, var(--wpa-accent) 30%, transparent); background: radial-gradient(90% 140% at 8% 0%, color-mix(in srgb, #f97316 18%, transparent), transparent 55%), radial-gradient(90% 150% at 100% 100%, color-mix(in srgb, var(--wpa-accent) 20%, transparent), transparent 58%), var(--wpa-surface)} .wpayme-app .wpayme-upgrade .wpayme-hero-copy h2{ max-width: 22ch; font-size: 38px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.12} .wpayme-app .wpayme-upgrade .wpayme-hero-copy p{ max-width: 66ch; font-size: 15px} .wpayme-app .wpayme-hero-badge svg{ width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px}  .wpayme-app .wpayme-hero-figures{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none} .wpayme-app .wpayme-hero-figures li{ display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--wpa-border); border-radius: var(--wpa-radius-sm); background: color-mix(in srgb, var(--wpa-surface) 88%, transparent)} .wpayme-app .wpayme-hero-figure-icon{ display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--wpa-radius-sm); background: var(--wpa-accent-soft); color: var(--wpa-accent)} .wpayme-app .wpayme-hero-figure-icon svg{ width: 16px; height: 16px} .wpayme-app .wpayme-hero-figures strong{ font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.1} .wpayme-app .wpayme-hero-figures li> span:last-child{ color: var(--wpa-text-muted); font-size: 12.5px} @media screen and (max-width: 1100px){ .wpayme-app .wpayme-hero-figures{ grid-template-columns: repeat(2, minmax(0, 1fr))}}  .wpayme-app .wpayme-extras{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 22px; margin: 0; padding: 0; list-style: none} .wpayme-app .wpayme-extras li{ display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--wpa-text-muted); font-size: 13px; line-height: 1.5} .wpayme-app .wpayme-extras li::before{ content: "\2713"; flex: 0 0 auto; color: var(--wpa-success); font-weight: 700} @media screen and (max-width: 1100px){ .wpayme-app .wpayme-extras{ grid-template-columns: repeat(2, minmax(0, 1fr))}} @media screen and (max-width: 700px){ .wpayme-app .wpayme-extras{ grid-template-columns: minmax(0, 1fr)}}  .wpayme-app .wpayme-ltd-band{ border-color: color-mix(in srgb, #f97316 55%, transparent); background: radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, #f97316 20%, transparent), transparent 62%), var(--wpa-surface)} .wpayme-app .wpayme-ltd-icon, .wpayme-app .wpayme-ltd-cta{ background: #f97316; color: #fff} .wpayme-app .wpayme-ltd-cta:hover, .wpayme-app .wpayme-ltd-cta:focus-visible{ background: #ea580c; color: #fff} .wpayme-app .wpayme-cycle-btn[data-wpayme-cycle="lifetime"]{ color: #c2410c} .wpayme-app .wpayme-cycle-btn[data-wpayme-cycle="lifetime"].is-active{ background: #f97316; color: #fff} .wpayme-app .wpayme-plans.is-lifetime .wpayme-plan{ border-color: color-mix(in srgb, #f97316 42%, transparent); background: linear-gradient(-180deg, color-mix(in srgb, #f97316 10%, transparent), transparent 55%), var(--wpa-surface)} .wpayme-app .wpayme-plans.is-lifetime .wpayme-plan.is-featured{ border-color: #f97316; box-shadow: 0 0 0 1px #f97316, 0 14px 34px color-mix(in srgb, #f97316 18%, transparent)} .wpayme-app .wpayme-plans.is-lifetime .wpayme-plan-flag, .wpayme-app .wpayme-plans.is-lifetime .wpayme-cta--primary{ border-color: #f97316; background: #f97316; color: #fff} .wpayme-app .wpayme-plans.is-lifetime .wpayme-cta--primary:hover, .wpayme-app .wpayme-plans.is-lifetime .wpayme-cta--primary:focus-visible{ background: #ea580c; color: #fff; filter: none} .wpayme-app .wpayme-plans.is-lifetime .wpayme-plan-amount{ color: #ea580c} .wpayme-app .wpayme-plan-saving{ background: #fff7ed} .wpayme-app .wpayme-plan-saving strong{ color: #c2410c}  .wpayme-app .wpayme-closing{ border-color: color-mix(in srgb, #f97316 45%, transparent); background: radial-gradient(110% 160% at 0% 0%, color-mix(in srgb, #f97316 18%, transparent), transparent 62%), radial-gradient(120% 200% at 100% 100%, color-mix(in srgb, var(--wpa-accent) 14%, transparent), transparent 60%), var(--wpa-surface)} .wpayme-app .wpayme-closing-badge{ background: #f97316; color: #fff} .wpayme-app .wpayme-closing-price{ color: #ea580c} .wpayme-app .wpayme-closing-cta{ border-color: #f97316; background: #f97316; color: #fff} .wpayme-app .wpayme-closing-cta:hover, .wpayme-app .wpayme-closing-cta:focus-visible{ background: #ea580c; color: #fff} .wpayme-app .wpayme-closing-coupon{ border-color: color-mix(in srgb, #f97316 70%, transparent); color: #c2410c}  .wpayme-app .wpayme-upgrade .wpayme-hero{ display: block}  .wpayme-app .wpayme-ltd-band[hidden]{ display: none}