.rounded { border-radius: 1rem } .nav-pills .nav-link { color: #555 } .nav-pills .nav-link.active { color: white } input[type="radio"] { margin-right: 5px } .checkout-theme-light { --checkout-surface: rgba(148, 163, 184, 0.03); --checkout-surface-strong: rgba(148, 163, 184, 0.04); --checkout-border: rgba(15, 23, 42, 0.08); --checkout-border-soft: rgba(15, 23, 42, 0.06); } .checkout-theme-dark { --checkout-surface: rgba(255, 255, 255, 0.03); --checkout-surface-strong: rgba(255, 255, 255, 0.04); --checkout-border: rgba(255, 255, 255, 0.12); --checkout-border-soft: rgba(255, 255, 255, 0.08); } /* Field bg / text are driven ONLY by the app's real theme class on (fx-theme-dark/light). This is deliberately NOT set on .checkout-theme-*: that class is a PHP-cookie snapshot on .checkout-dialog and can be stale (e.g. dialog says "light" while the app is actually dark), which made the floating-label patch render #fff over a dark modal. Because CSS custom properties resolve from the nearest ancestor that defines them, keeping the field bg only on guarantees the label patch always matches the modal background in the theme that is actually rendered. Light modal-content = #fff, dark modal-content = rgb(46.5,46.5,46.5) ~ #2e2e2e. */ body.fx-theme-light { --checkout-field-bg: #ffffff; --checkout-field-text: #16181c; } body.fx-theme-dark { --checkout-field-bg: #2e2e2e; --checkout-field-text: #e4e6eb; } /* safety fallback when no fx-theme-* class is present */ body { --checkout-field-bg: #ffffff; --checkout-field-text: #16181c; } .checkout-top-section { padding: 0.85rem; margin-bottom: 0.9rem; border: 1px solid var(--checkout-border-soft, rgba(15, 23, 42, 0.06)); border-radius: 0.35rem; background: var(--checkout-surface-strong, rgba(148, 163, 184, 0.04)); } .checkout-top-header { gap: 0.25rem; } .checkout-top-avatar .user-avatar { width: 52px; height: 52px; object-fit: cover; } .checkout-top-copy .name { font-size: 1rem; line-height: 1.2; } .checkout-top-copy .username { font-size: 0.92rem; } .checkout-top-description { font-size: 0.95rem; font-weight: 500; } .checkout-payment-box { padding: 0.85rem; border: 1px solid var(--checkout-border, rgba(15, 23, 42, 0.08)); border-radius: 0.35rem; background: var(--checkout-surface, rgba(148, 163, 184, 0.03)); } #accordion .card { background: var(--checkout-surface, rgba(148, 163, 184, 0.03)); } .checkout-payment-box-section + .checkout-payment-box-section { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--checkout-border, rgba(15, 23, 42, 0.08)); } .checkout-payment-box h6 { font-size: 0.95rem; margin-bottom: 0.35rem; } .checkout-payment-box .input-group { margin-bottom: 0; } .radio { display: inline-block; border-radius: 6px; box-sizing: border-box; border: 2px solid lightgrey; cursor: pointer; margin: 6px 25px 6px 0px } .radio:hover { box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) } .radio.selected { box-shadow: 0px 0px 0px 1px #9b0979; border: 2px solid #9b0979 } .label-radio { font-weight: bold; color: #000000 } .checkout-payment-provider { background: #ffffff; height: 59px; text-align: center; } .paypal-payment-provider img, .ccbill-payment-provider img, .paystack-payment-provider img, .yookassa-payment-provider img, .mollie-payment-provider img, .flutterwave-payment-provider img, .coingate-payment-provider img, .xendit-payment-provider img, .paddle-payment-provider img, .cryptocom-payment-provider img, .oxxo-payment-provider img, .mercado-payment-provider img, .verotel-payment-provider img, .razorpay-payment-provider img { width:90px } .nowpayments-payment-provider img{ width:83px; } .credit-provider-text { color: #000000; margin: auto; } #billing-agreement-form label.error { color: #ea0606!important; } /* === Selectize: theme-aware overrides (light + dark) === */ /* Base input */ .selectize-control.single .selectize-input, .selectize-control.multi .selectize-input { background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } /* Text input */ .selectize-control.single .selectize-input input, .selectize-control.multi .selectize-input input { color: inherit; } /* Placeholder */ .selectize-control.single .selectize-input input::placeholder { color: var(--bs-secondary-color); } /* Dropdown */ .selectize-dropdown, .selectize-dropdown.form-control { background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } /* Options */ .selectize-dropdown .option { color: inherit; } /* Hover / active option */ .selectize-dropdown .option.active, .selectize-dropdown .option:hover { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); } /* Selected value */ .selectize-control.single .selectize-input .item { color: inherit; } /* Caret */ .selectize-control.single .selectize-input:after { border-top-color: var(--bs-body-color); } /* Focus */ .selectize-control.single .selectize-input.focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); } /* Fix Selectize caret color (theme-aware) */ .selectize-control.single .selectize-input:after { border-top-color: var(--bs-body-color) !important; } /* When dropdown is open, Selectize flips the caret (uses border-bottom) */ .selectize-control.single.dropdown-active .selectize-input:after { border-bottom-color: var(--bs-body-color) !important; border-top-color: transparent !important; } @media (max-width: 575.98px) { .checkout-top-section { padding: 0.75rem; margin-bottom: 0.75rem; } .checkout-top-avatar .user-avatar { width: 46px; height: 46px; } .checkout-top-copy .name { font-size: 0.95rem; } .checkout-top-copy .username, .checkout-top-description { font-size: 0.88rem; } .checkout-payment-box { padding: 0.75rem; } .checkout-payment-box-section + .checkout-payment-box-section { margin-top: 0.7rem; padding-top: 0.7rem; } } /* Theme-aware Selectize scrollbar */ .selectize-dropdown-content::-webkit-scrollbar { width: 6px; } .selectize-dropdown-content::-webkit-scrollbar-track { background: transparent; } .selectize-dropdown-content::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, 0.35); border-radius: 4px; } /* Dark theme refinement */ body.dark-theme .selectize-dropdown-content::-webkit-scrollbar-thumb, html[data-theme="dark"] .selectize-dropdown-content::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); } #accordion .card-header span{ font-size: 15px; } /* ============================================================ TIP checkout (competitor-style clean layout) — gated to #checkout-center.is-clean-checkout so other types are untouched. ============================================================ */ /* the tip-only extras are hidden by default (non-tip checkouts) */ .checkout-tip-method-select, .checkout-tip-comment, .checkout-amount-min, .checkout-tip-secure { display: none; } /* the floating label only floats inside the tip modal; hide it elsewhere */ .checkout-float-label { display: none; } /* clean (all types): hide the payment summary + the raw method tile grid; show the dropdown */ #checkout-center.is-clean-checkout .checkout-payment-summary { display: none; } #checkout-center.is-clean-checkout .checkout-payment-box-methods .radio-group { display: none !important; } #checkout-center.is-clean-checkout .checkout-tip-method-select { display: block; } /* comment + amount-min + "Send tip" wording are TIP-ONLY */ #checkout-center.is-tip-checkout .checkout-tip-comment { display: block; } #checkout-center.is-tip-checkout .checkout-amount-min { display: block; } #checkout-center.is-tip-checkout .checkout-generic-secure { display: none; } #checkout-center.is-tip-checkout .checkout-tip-secure { display: block; } /* tip: hide the billing agreement accordion + the "Amount" heading + the $ icon (the floating label replaces the heading, competitor-style) */ #checkout-center.is-clean-checkout .checkout-billing-accordion, #checkout-center.is-clean-checkout .checkout-amount-heading, #checkout-center.is-clean-checkout .checkout-amount-group .input-group-prepend { display: none; } /* avatar pink ring (tip) */ #checkout-center.is-clean-checkout .checkout-top-avatar .user-avatar, #checkout-center.is-clean-checkout .checkout-top-avatar img { border: 2px solid #d10054 !important; box-sizing: border-box; } /* clean fields (tip): amount, method dropdown, comment */ #checkout-center.is-clean-checkout .checkout-amount-input .form-control, #checkout-center.is-clean-checkout .checkout-tip-method-select, #checkout-center.is-clean-checkout .checkout-tip-comment textarea { border: 1px solid var(--checkout-border, rgba(0, 0, 0, .12)); border-radius: 10px; padding: .6rem .8rem; font-size: .92rem; /* light: white field on white modal */ background: #fff !important; color: #16181c !important; } /* dark: match the modal-content bg exactly (#2e2e2e). The global dark theme forces .form-control to #222 which is different from the modal, making the field look like a separate darker block — override it to the modal colour. */ body.fx-theme-dark #checkout-center.is-clean-checkout .checkout-amount-input .form-control, body.fx-theme-dark #checkout-center.is-clean-checkout .checkout-tip-method-select, body.fx-theme-dark #checkout-center.is-clean-checkout .checkout-tip-comment textarea { background: #2e2e2e !important; color: #e4e6eb !important; } /* Focus: use the site's pink accent (NOT Bootstrap's default blue) so the border, label and focus ring all match — otherwise the blue border shows through/around the floated label. !important beats Bootstrap's .form-control:focus. */ #checkout-center.is-clean-checkout .checkout-amount-input .form-control:focus, #checkout-center.is-clean-checkout .checkout-tip-method-select:focus, #checkout-center.is-clean-checkout .checkout-tip-comment textarea:focus { border-color: #d10054 !important; box-shadow: none !important; outline: none !important; } #checkout-center.is-clean-checkout .checkout-tip-method-select { height: auto; cursor: pointer; } /* single-line comment box that auto-grows (JS sets height) */ #checkout-center.is-clean-checkout .checkout-tip-comment textarea { width: 100%; resize: none; overflow: hidden; min-height: 46px; line-height: 1.35; } #checkout-center.is-clean-checkout .tip-comment-counter { margin-top: 2px; /* hidden until the comment box is focused or has text (JS toggles .show-counter) */ display: none; } #checkout-center.is-clean-checkout .checkout-tip-comment.show-counter .tip-comment-counter { display: block; } /* a touch more breathing room between the tip sections */ #checkout-center.is-clean-checkout .checkout-payment-box-section { padding-top: .2rem; } #checkout-center.is-clean-checkout .checkout-amount-group { flex-wrap: nowrap; } /* ---- Floating label (tip): label sits inside; floats onto the border on focus/fill ---- */ #checkout-center.is-clean-checkout .checkout-float-field { position: relative; } #checkout-center.is-clean-checkout .checkout-float-field .form-control { width: 100%; } #checkout-center.is-clean-checkout .checkout-float-label { display: block; position: absolute; top: .62rem; left: .7rem; margin: 0; padding: 0 .35rem; color: #8a929b; font-size: .92rem; line-height: 1.25; pointer-events: none; /* patch masks the input border where the label floats. Light (default): white — exactly what worked in DevTools. Dark: overridden below to the dark modal bg. */ background: #fff; z-index: 2; transform: translateY(0); transition: top .12s ease, transform .12s ease, font-size .12s ease, color .12s ease; } /* Dark theme: patch must be the dark modal bg, not white. Driven by the app's real body theme class so it can't go stale. */ body.fx-theme-dark #checkout-center.is-clean-checkout .checkout-float-label { background: #2e2e2e; } /* floated state: focused OR has a value (placeholder is a single space, so :not(:placeholder-shown) means "user typed something"). The label is positioned so its background patch straddles the field's top border (border sits at the field's top edge = 0), fully masking it. */ #checkout-center.is-clean-checkout .checkout-float-field .form-control:focus + .checkout-float-label, #checkout-center.is-clean-checkout .checkout-float-field .form-control:not(:placeholder-shown) + .checkout-float-label { top: 0; transform: translateY(-50%); font-size: .72rem; color: #d10054; /* the mask lives on the FLOATED rule so nothing can strip it; light = white */ background: #fff !important; padding: 0 .35rem !important; z-index: 2; } /* dark theme: mask must be the dark modal bg */ body.fx-theme-dark #checkout-center.is-clean-checkout .checkout-float-field .form-control:focus + .checkout-float-label, body.fx-theme-dark #checkout-center.is-clean-checkout .checkout-float-field .form-control:not(:placeholder-shown) + .checkout-float-label { background: #2e2e2e !important; } #checkout-center.is-clean-checkout .checkout-float-field .form-control:not(:focus):not(:placeholder-shown) + .checkout-float-label { color: #8a929b; } /* ---- Compact, professional tip popup (tip only) ---- */ #checkout-center.is-clean-checkout .modal-dialog { max-width: 420px; } #checkout-center.is-clean-checkout .modal-content { border-radius: 14px; } #checkout-center.is-clean-checkout .modal-header { padding: 1rem 1.25rem .75rem; } #checkout-center.is-clean-checkout .modal-body { padding: 0 1.25rem .5rem 1.25rem; } #checkout-center.is-clean-checkout .modal-footer { padding: .3rem 1.25rem; } /* tighter top (avatar) section */ #checkout-center.is-clean-checkout .checkout-top-section { padding: .65rem .75rem; margin-bottom: 0; } #checkout-center.is-clean-checkout .checkout-top-avatar .user-avatar { width: 46px; height: 46px; } /* consistent field sizing + spacing */ #checkout-center.is-clean-checkout .checkout-amount-input, #checkout-center.is-clean-checkout .checkout-payment-box-methods { margin-bottom: .85rem; } #checkout-center.is-clean-checkout .checkout-payment-box-section { padding-top: 0; } #checkout-center.is-clean-checkout .checkout-amount-input .form-control, #checkout-center.is-clean-checkout .checkout-tip-method-select, #checkout-center.is-clean-checkout .checkout-tip-comment textarea { height: auto; min-height: 44px; } #checkout-center.is-clean-checkout .checkout-payment-box-methods h6 { font-size: .9rem; margin-bottom: .4rem; } #checkout-center.is-clean-checkout .checkout-amount-min { margin-top: .35rem; margin-bottom: 0; } /* footer button a touch tighter */ #checkout-center.is-clean-checkout .checkout-continue-btn { padding: .5rem 1.4rem; font-size: .9rem; } /* Tip: flatten the payment-box card so the fields sit directly on the modal background. This is what lets the floating-label patch (which uses the modal bg colour) mask the field border cleanly — the card's translucent grey surface was showing behind the label and leaving a mismatched strip. */ #checkout-center.is-clean-checkout .checkout-payment-box { padding: 0; border: 0; background: transparent; margin-bottom: 0; } /* no divider lines between the tip sections (amount / method / comment) */ #checkout-center.is-clean-checkout .checkout-payment-box-section + .checkout-payment-box-section { margin-top: .85rem; padding-top: 0; border-top: 0; } /* all three tip fields share the same full width + box sizing */ #checkout-center.is-clean-checkout .checkout-amount-group, #checkout-center.is-clean-checkout .checkout-float-field, #checkout-center.is-clean-checkout .checkout-tip-method-select { width: 100%; } #checkout-center.is-clean-checkout .checkout-amount-input .form-control, #checkout-center.is-clean-checkout .checkout-tip-method-select, #checkout-center.is-clean-checkout .checkout-tip-comment textarea { width: 100%; box-sizing: border-box; }