/* ============================================================= Cybersource Unified Checkout – Styles ============================================================= */ /* SDK injects a background:#fff on — override to transparent */ body.__processed_15da67d7-5799-4d7c-bd4f-31c7e0e5ebb7 { background-color: transparent !important; } /* ── Description ─────────────────────────────────────────────── */ .cs-uc-description { color: #6b7280; font-size: .875em; margin: 0 0 10px; } /* ── Loader ──────────────────────────────────────────────────── */ .cs-uc-loader { display: flex; align-items: center; gap: 8px; padding: 24px 0; color: #9ca3af; font-size: .875em; } .cs-uc-spinner { width: 14px; height: 14px; border: 2px solid #e5e7eb; border-top-color: #6b7280; border-radius: 50%; flex-shrink: 0; animation: cs-spin .7s linear infinite; } @keyframes cs-spin { to { transform: rotate(360deg); } } /* ── Notices ─────────────────────────────────────────────────── */ .cs-uc-notice { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 5px; font-size: .875em; line-height: 1.5; margin: 0 0 10px; } .cs-uc-notice__icon { flex-shrink: 0; } .cs-uc-notice--error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; } .cs-uc-notice--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; } .cs-uc-notice--warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; } /* ── SDK container ───────────────────────────────────────────── */ #cs-uc-container, #cs-uc-block-container { border: none !important; border-radius: 0 !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; } #cs-uc-container > div, #cs-uc-block-container > div { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } /* ── SDK button ──────────────────────────────────────────────── */ #cs-uc-container button, #cs-uc-block-container button, #cs-uc-container [role="button"], #cs-uc-block-container [role="button"] { all: unset !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; padding: 12px 20px !important; background: #18181b !important; color: #fff !important; font-family: inherit !important; font-size: .9375em !important; font-weight: 600 !important; border-radius: 4px !important; cursor: pointer !important; transition: background .15s !important; } #cs-uc-container button:hover, #cs-uc-block-container button:hover, #cs-uc-container [role="button"]:hover, #cs-uc-block-container [role="button"]:hover { background: #27272a !important; } #cs-uc-container button svg, #cs-uc-block-container button svg, #cs-uc-container [role="button"] svg, #cs-uc-block-container [role="button"] svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; } /* ── SDK card logos row ──────────────────────────────────────── */ #cs-uc-container img, #cs-uc-block-container img { height: 20px !important; width: auto !important; opacity: .75 !important; border-radius: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; mix-blend-mode: multiply !important; } /* ── Guest notice ────────────────────────────────────────────── */ .cs-uc-guest-notice { display: flex; align-items: flex-start; gap: 10px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 5px; padding: 12px 14px; margin-bottom: 10px; color: #0c4a6e; font-size: .875em; line-height: 1.5; } .cs-uc-guest-notice__icon { flex-shrink: 0; } .cs-uc-guest-notice__body strong { display: block; font-weight: 600; margin-bottom: 3px; } .cs-uc-guest-notice__body p { margin: 0; } .cs-uc-guest-notice__body a { color: #0369a1; font-weight: 600; text-decoration: underline; } .cs-uc-guest-notice__body a:hover { color: #0c4a6e; } /* ── Sandbox notice ──────────────────────────────────────────── */ .cs-uc-sandbox-notice { background: #fffbeb; border: 1px solid #fde68a; border-radius: 5px; padding: 10px 12px; margin-bottom: 10px; font-size: .875em; color: #713f12; } .cs-uc-sandbox-notice__heading { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-weight: 600; } .cs-uc-sandbox-notice__badge { background: #ca8a04; color: #fff; font-size: .7em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; } /* ── Test card table ─────────────────────────────────────────── */ .cs-uc-test-cards { width: 100%; border-collapse: collapse; font-size: .875em; } .cs-uc-test-cards th, .cs-uc-test-cards td { padding: 4px 6px; text-align: left; vertical-align: middle; } .cs-uc-test-cards thead th { font-size: .72em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #92400e; border-bottom: 1px solid #fde68a; } .cs-uc-test-cards tbody tr + tr td { border-top: 1px solid #fef9c3; } .cs-uc-card-number, code.cs-uc-card-cvv { font-family: ui-monospace, monospace; font-size: .875em; background: #fff; border: 1px solid #fde68a; padding: 1px 5px; border-radius: 3px; user-select: all; -webkit-user-select: all; cursor: text; } span.cs-uc-card-cvv { color: #92400e; } /* ── Saved token (block checkout) ────────────────────────────── */ .cs-uc-saved-token { display: flex; align-items: center; gap: 10px; font-size: .875em; } .cs-uc-saved-token__brand { font-weight: 600; text-transform: capitalize; color: #111827; } .cs-uc-saved-token__number { color: #374151; } .cs-uc-saved-token__exp { color: #9ca3af; font-size: .85em; } /* ── Saved tokens list (block checkout) ──────────────────────── */ .cs-uc-saved-tokens { margin-bottom: 12px; } .cs-uc-saved-token-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 5px; margin-bottom: 6px; cursor: pointer; font-size: .875em; transition: border-color .15s; } .cs-uc-saved-token-row:hover, .cs-uc-saved-token-row.is-selected { border-color: #6b7280; background: #f9fafb; } .cs-uc-saved-token-row input[type="radio"] { flex-shrink: 0; margin: 0; cursor: pointer; } .cs-uc-saved-token__brand { font-weight: 600; text-transform: capitalize; color: #111827; min-width: 48px; } .cs-uc-saved-token__number { flex: 1; color: #374151; font-family: ui-monospace, monospace; letter-spacing: .05em; } .cs-uc-saved-token__exp { color: #9ca3af; font-size: .8em; } .cs-uc-saved-token__new { color: #374151; font-style: italic; } /* ── Block checkout SDK container loader ─────────────────────── */ /* Shows while SDK container is empty, disappears once iframe is injected */ #cs-uc-block-container:empty::before { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid #e5e7eb; border-top-color: #6b7280; border-radius: 50%; animation: cs-spin .7s linear infinite; vertical-align: middle; margin-right: 8px; } #cs-uc-block-container:empty::after { content: 'Loading secure payment form\2026'; color: #9ca3af; font-size: .875em; vertical-align: middle; } /* ── Save to account checkbox (block checkout) ───────────────── */ .cs-uc-save-label { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .875em; color: #374151; cursor: pointer; } .cs-uc-save-label input[type="checkbox"] { margin: 0; cursor: pointer; }