/* ============================================================ * Cosmaestro — checkout popup styles. * Recoloured to the Cosmaestro violet/magenta palette. Bank transfer * is the only payment method, so the payment block is a fixed card. * * NOTE: the theme's main.css applies an aggressive global reset with * !important (`*{margin:0!important;padding:0!important}` and * `body>*{position:relative!important;z-index:1!important}`). The modal * is a direct child of , so every layout rule here MUST use * !important or it gets clobbered (which dropped the modal into normal * flow at the bottom of the page). All declarations are !important to * stay consistent with the theme and guarantee the overlay renders. * ============================================================ */ .checkout-modal { position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; margin: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } .checkout-modal.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .checkout-overlay { position: absolute !important; inset: 0 !important; margin: 0 !important; background: rgba(5, 0, 12, 0.88) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } body.checkout-open { overflow: hidden !important; } .checkout-dialog { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 460px !important; max-height: calc(100vh - 40px) !important; margin: 0 !important; overflow-y: auto !important; background: linear-gradient(165deg, #190030 0%, #0c0018 100%) !important; background-color: #12001f !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 24px !important; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(106, 0, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; padding: 1.9rem 1.9rem 1.7rem !important; transform: translateY(24px) scale(0.97) !important; opacity: 0 !important; transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease !important; } .checkout-modal.open .checkout-dialog { transform: translateY(0) scale(1) !important; opacity: 1 !important; } /* Glowing gradient top seam. */ .checkout-dialog::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #6a00ff, #ff00cc, #6a00ff) !important; border-radius: 24px 24px 0 0 !important; pointer-events: none !important; } .checkout-close { position: absolute !important; top: 14px !important; right: 14px !important; width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; background: rgba(255, 255, 255, 0.06) !important; border: none !important; border-radius: 50% !important; color: rgba(255, 255, 255, 0.5) !important; font-size: 1.3rem !important; line-height: 1 !important; cursor: pointer !important; transition: all 0.2s ease !important; z-index: 3 !important; } .checkout-close:hover { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; } /* ----- Brand ----- */ .checkout-logo { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin: 0 0 1.3rem !important; padding: 0 !important; } .checkout-brand { font-family: var(--font-display, 'Space Grotesk', sans-serif) !important; font-size: 1.35rem !important; font-weight: 800 !important; color: #fff !important; letter-spacing: -0.02em !important; } .checkout-brand span { background: linear-gradient(135deg, #a25bff, #ff00cc) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: #ff00cc !important; } /* ----- Head / summary ----- */ .checkout-head { text-align: center !important; } .checkout-eyebrow { display: inline-block !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: #c77dff !important; margin: 0 0 6px !important; } .checkout-title { font-family: var(--font-display, 'Space Grotesk', sans-serif) !important; font-size: 1.35rem !important; font-weight: 700 !important; margin: 0 0 18px !important; color: #fff !important; line-height: 1.25 !important; } .checkout-summary { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 14px !important; padding: 1rem 1.2rem !important; margin: 0 0 1.4rem !important; text-align: left !important; } .cs-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 5px 0 !important; margin: 0 !important; } .cs-label { font-size: 0.85rem !important; color: rgba(255, 255, 255, 0.55) !important; } .cs-value { font-size: 0.92rem !important; font-weight: 600 !important; color: #fff !important; text-align: right !important; } .cs-total { margin-top: 6px !important; padding-top: 12px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } .cs-total .cs-label { font-size: 0.9rem !important; color: rgba(255, 255, 255, 0.7) !important; font-weight: 600 !important; } .cs-price { font-family: var(--font-display, 'Space Grotesk', sans-serif) !important; font-size: 1.45rem !important; font-weight: 800 !important; color: #c77dff !important; } /* ----- Form ----- */ .checkout-form { display: flex !important; flex-direction: column !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; } .co-field { display: flex !important; flex-direction: column !important; gap: 7px !important; text-align: left !important; margin: 0 !important; padding: 0 !important; } .co-field label, .co-field-label { font-size: 0.8rem !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.7) !important; letter-spacing: 0.2px !important; } .co-field input { width: 100% !important; padding: 12px 14px !important; margin: 0 !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; color: #fff !important; font-family: var(--font-body, 'Inter', sans-serif) !important; font-size: 0.92rem !important; transition: border-color 0.3s, box-shadow 0.3s !important; -webkit-appearance: none !important; appearance: none !important; } .co-field input::placeholder { color: rgba(255, 255, 255, 0.4) !important; } .co-field input:focus { outline: none !important; border-color: #6a00ff !important; box-shadow: 0 0 0 3px rgba(106, 0, 255, 0.22) !important; } .co-field input:invalid:not(:placeholder-shown) { border-color: rgba(255, 90, 140, 0.55) !important; } .co-field-hint { font-size: 0.72rem !important; color: rgba(255, 255, 255, 0.42) !important; line-height: 1.4 !important; } /* ----- Phone field: custom flag country-code dropdown + number ----- */ .co-phone-row { display: flex !important; gap: 8px !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; } .co-cc { position: relative !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } .co-cc-trigger { display: inline-flex !important; align-items: center !important; gap: 7px !important; height: 46px !important; min-width: 96px !important; padding: 0 12px !important; margin: 0 !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; color: #fff !important; font-family: var(--font-body, 'Inter', sans-serif) !important; font-size: 0.95rem !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer !important; } .co-cc.open .co-cc-trigger, .co-cc-trigger:focus { outline: none !important; border-color: #6a00ff !important; box-shadow: 0 0 0 3px rgba(106, 0, 255, 0.22) !important; } .co-cc-flag { width: 22px !important; height: 16px !important; display: block !important; object-fit: cover !important; border-radius: 3px !important; flex-shrink: 0 !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) !important; } .co-cc-trigger .co-cc-code { white-space: nowrap !important; } .co-cc-chev { margin-left: auto !important; flex-shrink: 0 !important; transition: transform 0.2s ease !important; } .co-cc.open .co-cc-chev { transform: rotate(180deg) !important; } .co-cc-menu { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; z-index: 60 !important; width: 240px !important; max-width: 72vw !important; max-height: 244px !important; overflow-y: auto !important; margin: 0 !important; padding: 6px !important; list-style: none !important; background: #1a0033 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 12px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55) !important; display: none !important; } .co-cc.open .co-cc-menu { display: block !important; } .co-cc-option { display: flex !important; align-items: center !important; gap: 9px !important; padding: 9px 10px !important; margin: 0 !important; border-radius: 8px !important; cursor: pointer !important; color: #fff !important; font-size: 0.88rem !important; } .co-cc-option:hover { background: rgba(106, 0, 255, 0.22) !important; } .co-cc-option.is-active { background: rgba(106, 0, 255, 0.16) !important; } .co-cc-option .co-cc-code { font-weight: 600 !important; } .co-cc-option .co-cc-name { margin-left: auto !important; color: rgba(255, 255, 255, 0.55) !important; font-size: 0.82rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .co-phone-row input { flex: 1 1 auto !important; min-width: 0 !important; height: 46px !important; padding: 0 14px !important; } /* ----- Fixed bank-transfer payment card ----- */ .co-pay-fixed { display: flex !important; align-items: center !important; gap: 12px !important; padding: 13px 14px !important; margin: 0 !important; background: rgba(106, 0, 255, 0.1) !important; border: 1.5px solid rgba(106, 0, 255, 0.45) !important; border-radius: 14px !important; box-shadow: 0 0 0 1px rgba(106, 0, 255, 0.25) !important; } .co-pay-icon { flex-shrink: 0 !important; width: 38px !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(199, 125, 255, 0.16) !important; border-radius: 10px !important; color: #d9b3ff !important; } .co-pay-text { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; flex: 1 !important; } .co-pay-name { font-size: 0.92rem !important; font-weight: 700 !important; color: #fff !important; line-height: 1.2 !important; } .co-pay-desc { font-size: 0.74rem !important; color: rgba(255, 255, 255, 0.55) !important; line-height: 1.3 !important; } /* ----- Submit ----- */ .checkout-submit { position: relative !important; margin: 6px 0 0 !important; width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 15px !important; background: linear-gradient(135deg, #6a00ff 0%, #ff00cc 100%) !important; background-color: #8a00e6 !important; color: #fff !important; border: none !important; border-radius: 14px !important; font-family: var(--font-body, 'Inter', sans-serif) !important; font-weight: 700 !important; font-size: 0.98rem !important; cursor: pointer !important; box-shadow: 0 4px 20px rgba(106, 0, 255, 0.35) !important; transition: all 0.25s ease !important; } .checkout-submit:hover:not(:disabled) { filter: brightness(1.08) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(255, 0, 204, 0.4) !important; } .checkout-submit:disabled { cursor: not-allowed !important; opacity: 0.85 !important; } .cs-btn-spinner { width: 18px !important; height: 18px !important; border: 2.5px solid rgba(255, 255, 255, 0.35) !important; border-top-color: #fff !important; border-radius: 50% !important; display: none !important; animation: co-spin 0.7s linear infinite !important; } .checkout-form.loading .cs-btn-spinner { display: inline-block !important; } .checkout-form.loading .cs-btn-label { opacity: 0.75 !important; } @keyframes co-spin { to { transform: rotate(360deg); } } .checkout-note { margin: 12px 0 0 !important; font-size: 0.76rem !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.4) !important; text-align: center !important; } /* ----- Result views (success / error) ----- */ .checkout-view[hidden] { display: none !important; } .checkout-result { text-align: center !important; padding: 14px 6px 6px !important; } .co-order-badge { display: flex !important; flex-direction: column !important; gap: 2px !important; margin: 0 auto 16px !important; padding: 12px 18px !important; background: rgba(106, 0, 255, 0.12) !important; border: 1px solid rgba(106, 0, 255, 0.38) !important; border-radius: 12px !important; } .co-order-badge[hidden] { display: none !important; } .co-order-badge-label { font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.55) !important; } .co-order-badge-num { font-family: var(--font-display, 'Space Grotesk', sans-serif) !important; font-size: 1.5rem !important; font-weight: 800 !important; color: #c77dff !important; letter-spacing: 1px !important; } .co-result-icon { width: 64px !important; height: 64px !important; margin: 6px auto 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; } .co-result-ok { color: #00e07a !important; background: rgba(0, 224, 122, 0.12) !important; border: 1px solid rgba(0, 224, 122, 0.4) !important; box-shadow: 0 0 30px rgba(0, 224, 122, 0.25) !important; } .co-result-err { color: #ff5570 !important; background: rgba(255, 85, 112, 0.12) !important; border: 1px solid rgba(255, 85, 112, 0.4) !important; box-shadow: 0 0 30px rgba(255, 85, 112, 0.2) !important; } .checkout-result h3 { font-family: var(--font-display, 'Space Grotesk', sans-serif) !important; font-size: 1.3rem !important; font-weight: 700 !important; margin: 0 0 10px !important; color: #fff !important; } .checkout-result p { font-size: 0.9rem !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.6) !important; margin: 0 0 22px !important; } .checkout-result p strong { color: #fff !important; } .checkout-result-btn { width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 14px 24px !important; margin: 0 !important; border: none !important; border-radius: 14px !important; font-family: var(--font-body, 'Inter', sans-serif) !important; font-weight: 700 !important; font-size: 0.95rem !important; cursor: pointer !important; background: linear-gradient(135deg, #6a00ff 0%, #ff00cc 100%) !important; background-color: #8a00e6 !important; color: #fff !important; box-shadow: 0 4px 20px rgba(106, 0, 255, 0.35) !important; transition: all 0.25s ease !important; } .checkout-result-btn:hover { filter: brightness(1.08) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(255, 0, 204, 0.4) !important; } /* Success view actions: "Contact Us" (WhatsApp) + "Done" side by side. */ .co-result-actions { display: flex !important; gap: 10px !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; } .co-result-actions .checkout-result-btn { flex: 1 !important; margin-top: 0 !important; } .co-contact-btn { flex: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 14px 18px !important; margin: 0 !important; border-radius: 14px !important; background: #25d366 !important; color: #fff !important; font-family: var(--font-body, 'Inter', sans-serif) !important; font-weight: 700 !important; font-size: 0.95rem !important; text-decoration: none !important; box-shadow: 0 4px 18px rgba(37, 211, 102, 0.3) !important; transition: all 0.25s ease !important; } .co-contact-btn svg { flex-shrink: 0 !important; } .co-contact-btn:hover { background: #1ebe5b !important; transform: translateY(-2px) !important; box-shadow: 0 8px 26px rgba(37, 211, 102, 0.45) !important; } @media (max-width: 400px) { .co-result-actions { flex-direction: column !important; } } /* ----- Responsive: bottom-sheet on small screens ----- */ @media (max-width: 480px) { .checkout-modal { padding: 0 !important; align-items: flex-end !important; } .checkout-dialog { max-width: 100% !important; max-height: 94vh !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 1.6rem 1.4rem 1.4rem !important; } .checkout-title { font-size: 1.2rem !important; } } @media (prefers-reduced-motion: reduce) { .checkout-modal, .checkout-dialog, .checkout-submit { transition: opacity 0.2s ease !important; } .checkout-dialog { transform: none !important; } .cs-btn-spinner { animation-duration: 1.4s !important; } } /* RTL tweaks. */ [dir="rtl"] .checkout-close { right: auto !important; left: 14px !important; } [dir="rtl"] .co-field { text-align: right !important; } [dir="rtl"] .checkout-summary { text-align: right !important; } [dir="rtl"] .cs-value { text-align: left !important; } /* ============================================================ * Bank transfer instructions page (inc/payment-page.php). * ============================================================ */ .cosma-pay { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 100vh !important; padding: 120px 20px 60px !important; margin: 0 !important; } .cosma-pay-card { position: relative !important; width: 100% !important; max-width: 560px !important; margin: 0 auto !important; padding: 2.4rem 2.2rem 2rem !important; background: linear-gradient(165deg, #190030 0%, #0c0018 100%) !important; background-color: #12001f !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 24px !important; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(106, 0, 255, 0.12) !important; text-align: center !important; } .cosma-pay-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #6a00ff, #ff00cc, #6a00ff) !important; border-radius: 24px 24px 0 0 !important; } .cosma-pay-logo { margin: 0 0 1.4rem !important; } .cosma-pay-icon { width: 64px !important; height: 64px !important; margin: 0 auto 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; color: #00e07a !important; background: rgba(0, 224, 122, 0.12) !important; border: 1px solid rgba(0, 224, 122, 0.4) !important; box-shadow: 0 0 30px rgba(0, 224, 122, 0.25) !important; } .cosma-pay-title { font-family: var(--font-display, 'Space Grotesk', sans-serif) !important; font-size: 1.6rem !important; font-weight: 800 !important; color: #fff !important; margin: 0 0 8px !important; } .cosma-pay-sub { font-size: 0.95rem !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.6) !important; margin: 0 auto 22px !important; max-width: 440px !important; } .cosma-pay-order { display: inline-flex !important; flex-direction: column !important; gap: 2px !important; margin: 0 auto 14px !important; padding: 12px 24px !important; background: rgba(106, 0, 255, 0.12) !important; border: 1px solid rgba(106, 0, 255, 0.38) !important; border-radius: 12px !important; } .cosma-pay-order-label { font-size: 0.66rem !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.55) !important; } .cosma-pay-order-num { font-family: var(--font-display, 'Space Grotesk', sans-serif) !important; font-size: 1.5rem !important; font-weight: 800 !important; color: #c77dff !important; letter-spacing: 1px !important; } .cosma-pay-plan { font-size: 0.9rem !important; font-weight: 600 !important; color: #fff !important; margin: 0 0 22px !important; } .cosma-pay-details { text-align: left !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 6px 16px !important; margin: 0 0 18px !important; } .cosma-pay-details-head { font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: #c77dff !important; padding: 14px 2px 8px !important; } .cosma-pay-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 12px 2px !important; border-top: 1px solid rgba(255, 255, 255, 0.07) !important; } .cosma-pay-row-text { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; } .cosma-pay-row-label { font-size: 0.72rem !important; color: rgba(255, 255, 255, 0.5) !important; letter-spacing: 0.3px !important; } .cosma-pay-row-value { font-size: 0.98rem !important; font-weight: 700 !important; color: #fff !important; word-break: break-all !important; } .cosma-copy-btn { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 12px !important; margin: 0 !important; background: rgba(106, 0, 255, 0.14) !important; border: 1px solid rgba(106, 0, 255, 0.4) !important; border-radius: 10px !important; color: #d9b3ff !important; font-family: var(--font-body, 'Inter', sans-serif) !important; font-size: 0.78rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; } .cosma-copy-btn:hover { background: rgba(106, 0, 255, 0.26) !important; color: #fff !important; } .cosma-copy-btn.is-copied { background: rgba(0, 224, 122, 0.16) !important; border-color: rgba(0, 224, 122, 0.5) !important; color: #00e07a !important; } .cosma-copy-btn svg { flex-shrink: 0 !important; } .cosma-pay-note { text-align: left !important; font-size: 0.85rem !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.7) !important; background: rgba(199, 125, 255, 0.1) !important; border: 1px solid rgba(199, 125, 255, 0.32) !important; border-radius: 12px !important; padding: 14px 16px !important; margin: 0 0 22px !important; } .cosma-pay-note strong { color: #c77dff !important; } .cosma-pay-actions { display: flex !important; gap: 10px !important; align-items: stretch !important; } .cosma-pay-wa { flex: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 14px 18px !important; border-radius: 14px !important; background: #25d366 !important; color: #fff !important; font-family: var(--font-body, 'Inter', sans-serif) !important; font-weight: 700 !important; font-size: 0.92rem !important; text-decoration: none !important; box-shadow: 0 4px 18px rgba(37, 211, 102, 0.3) !important; transition: all 0.25s ease !important; } .cosma-pay-wa:hover { background: #1ebe5b !important; transform: translateY(-2px) !important; } .cosma-pay-home { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 14px 20px !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #fff !important; font-family: var(--font-body, 'Inter', sans-serif) !important; font-weight: 600 !important; font-size: 0.92rem !important; text-decoration: none !important; transition: all 0.2s ease !important; } .cosma-pay-home:hover { background: rgba(255, 255, 255, 0.12) !important; } @media (max-width: 480px) { .cosma-pay { padding: 100px 14px 40px !important; } .cosma-pay-card { padding: 1.8rem 1.3rem 1.5rem !important; } .cosma-pay-actions { flex-direction: column !important; } .cosma-copy-btn .cosma-copy-label { display: none !important; } }