/* This stylesheet is loaded only on virtual product pages (hookDisplayHeader gates on $product->is_virtual). Critical "hide native controls" rules are inlined in directly by hookDisplayHeader (PHP) so they apply before first paint — no flash. This file holds non-critical layout/styling that can paint a bit later without UX cost. */ /* JS moves the theme's .col-add-qty into our wrapper before the Redeem button. Lay them out side-by-side to mirror the ordinary "qty + Add to cart" row. */ .cofiscz-mvp-wrapper.cofiscz-mvp-with-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .cofiscz-mvp-wrapper.cofiscz-mvp-with-qty > .col-add-qty { flex: 0 0 auto; padding: 0; max-width: none; width: 80px; height: 56px; } .cofiscz-mvp-wrapper.cofiscz-mvp-with-qty > .col-add-qty .qty, .cofiscz-mvp-wrapper.cofiscz-mvp-with-qty > .col-add-qty .bootstrap-touchspin { width: 80px; height: 100%; } .cofiscz-mvp-wrapper.cofiscz-mvp-with-qty > .cofiscz-mvp-info { flex: 1 0 100%; margin-top: 0; } /* Keep primary button look from the active theme */ button.btn.btn-primary.btn-lg.cofiscz-mvp-btn { display: inline-block; line-height: 34px; border-radius: 12px; height: 56px; padding: 0 32px; background: #ee4198; border-color: #ee4198; font-weight: 500; font-size: 1.2rem; margin-bottom: 0; } button.btn.btn-primary.btn-lg.cofiscz-mvp-btn:hover, button.btn.btn-primary.btn-lg.cofiscz-mvp-btn:focus { background: #ee4198; border-color: #ee4198; } /* Info text */ .cofiscz-mvp-info { margin-top: 8px; font-size: 13px; color: #666; display: flex; align-items: center; gap: 4px; } .cofiscz-mvp-info .fa { font-size: 14px; } /* Overlay hidden by default, JS sets display:flex to show */ .cofiscz-mvp-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(100 92 117 / 30%); z-index: 9999; align-items: center; justify-content: center; } /* Popup */ .cofiscz-mvp-popup { background: #fff; border-radius: 10px; padding: 36px 32px 30px; max-width: 440px; width: 90%; position: relative; box-shadow: 0 4px 24px rgb(0 0 0 / 12%); } .cofiscz-mvp-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 34px; font-weight: 700; cursor: pointer; color: #323244; line-height: 1; } .cofiscz-mvp-popup h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: 0; text-align: center; color: #1f164d; } .cofiscz-mvp-subtitle { color: #3b3b55; margin-bottom: 20px; text-align: center; } /* Form field */ .cofiscz-mvp-field { margin-bottom: 20px; } .cofiscz-mvp-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; } .cofiscz-mvp-field input { width: 100%; min-width: 100%; max-width: 100%; padding: 11px 12px; border: 1px solid #d6d6e2; border-radius: 8px; font-size: 14px; box-sizing: border-box; display: block; } .cofiscz-mvp-field .form-control, .cofiscz-mvp-field .form-control:disabled, .cofiscz-mvp-field input:disabled { width: 100% !important; min-width: 100%; max-width: 100%; box-sizing: border-box; } .cofiscz-mvp-field input:focus { border-color: #d63384; outline: none; } /* Error message */ .cofiscz-mvp-error { color: #dc3545; font-size: 13px; margin-top: 6px; } /* Overflow warning */ .cofiscz-mvp-warning { margin-top: 12px; padding: 12px 14px; background: #fef9c3; border: 1px solid #fde68a; border-radius: 8px; color: #614a02; font-size: 13px; line-height: 1.45; display: flex; align-items: flex-start; gap: 10px; } .cofiscz-mvp-warning .cofiscz-mvp-warning-icon { color: #d97706; font-size: 16px; flex-shrink: 0; margin-top: 1px; } /* Actions */ .cofiscz-mvp-actions { display: flex; justify-content: center; align-items: center; gap: 14px; } .cofiscz-mvp-actions .btn { min-width: 132px; font-weight: 600; padding: 0.8rem 1.5rem; } .cofiscz-mvp-submit { min-width: 154px; } .cofiscz-mvp-submit-loading { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; } button.btn.btn-outline-secondary.cofiscz-mvp-cancel { background: #e0e0e8; border: 1px solid #e0e0e8; color: #3d3d53; } button.btn.btn-outline-secondary.cofiscz-mvp-cancel:hover, button.btn.btn-outline-secondary.cofiscz-mvp-cancel:focus { background: #dfe0ea; border-color: #dfe0ea; color: #2f2f43; } /* Spinner */ .cofiscz-mvp-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: cofiscz-mvp-spin 0.6s linear infinite; vertical-align: middle; } @keyframes cofiscz-mvp-spin { to { transform: rotate(360deg); } } /* Success state */ .cofiscz-mvp-success-icon { width: 64px; height: 64px; background: #28c76f; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 16px; } .cofiscz-mvp-success-links { margin-top: 20px; text-align: center; } .cofiscz-mvp-success-links a { display: block; margin-top: 10px; } .cofiscz-mvp-success-links a:not(.btn) { color: #3d3d53; text-decoration: underline; } .cofiscz-mvp-success-links .btn { display: inline-block; min-width: 172px; font-weight: 600; } /* State: login */ [data-state="login"] { text-align: center; } /* State: success */ [data-state="success"] { text-align: center; } [data-state="success"] p { max-width: 320px; margin: 0 auto; }