/** * KS Cart Confirm — Frontend styles * * All colors/sizes are driven by CSS variables injected on :root by * KSCC_Frontend::inject_css_variables(). Static layout/structure lives here. * * Modal is rendered inside #kscc-modal-root which is appended to by JS. */ /* ======================================================================== ROOT CONTAINER (hidden by default) ======================================================================== */ #kscc-modal-root { display: none; position: fixed; inset: 0; z-index: 999999; align-items: center; justify-content: center; padding: 20px; font-family: inherit; -webkit-font-smoothing: antialiased; } #kscc-modal-root.is-open { display: flex; } /* ======================================================================== OVERLAY ======================================================================== */ .kscc-overlay { position: absolute; inset: 0; background: var(--kscc-overlay-bg, rgba(20,20,20,0.55)); backdrop-filter: blur(var(--kscc-overlay-blur, 3px)); -webkit-backdrop-filter: blur(var(--kscc-overlay-blur, 3px)); } /* ======================================================================== MODAL BOX ======================================================================== */ .kscc-box { position: relative; background: var(--kscc-box-bg, #ffffff); border-radius: var(--kscc-box-radius, 6px); box-shadow: var(--kscc-box-shadow, 0 10px 30px rgba(0,0,0,0.22)); max-width: var(--kscc-box-max-w, 360px); width: 100%; padding: var(--kscc-box-padding, 26px 28px); overflow: hidden; box-sizing: border-box; text-align: var(--kscc-text-align, left); } /* Top stripe */ .kscc-box::before { content: ''; display: var(--kscc-stripe-show, block); position: absolute; top: 0; left: 0; right: 0; height: var(--kscc-stripe-w, 4px); background: var(--kscc-stripe-color, #e85d04); } /* ======================================================================== ICON ======================================================================== */ .kscc-icon { display: var(--kscc-icon-show, flex); width: var(--kscc-icon-size, 48px); height: var(--kscc-icon-size, 48px); background: var(--kscc-icon-bg, #fff3e6); border-radius: 50%; align-items: center; justify-content: center; margin-bottom: 14px; flex-shrink: 0; } /* Center the icon when text is centered */ .kscc-box[data-align="center"] .kscc-icon { margin-left: auto; margin-right: auto; } .kscc-icon svg { width: calc(var(--kscc-icon-size, 48px) * 0.5); height: calc(var(--kscc-icon-size, 48px) * 0.5); color: var(--kscc-icon-color, #e85d04); stroke: var(--kscc-icon-color, #e85d04); } .kscc-icon img { width: calc(var(--kscc-icon-size, 48px) * 0.6); height: calc(var(--kscc-icon-size, 48px) * 0.6); object-fit: contain; } /* ======================================================================== TITLE & BODY ======================================================================== */ .kscc-title { color: var(--kscc-title-color, #1d2327); font-size: var(--kscc-title-size, 19px); font-weight: var(--kscc-title-weight, 600); margin: 0 0 6px 0; line-height: 1.3; } .kscc-body { color: var(--kscc-body-color, #555); font-size: var(--kscc-body-size, 14px); line-height: 1.55; margin: 0 0 22px 0; } .kscc-product { color: var(--kscc-body-product-color, #e85d04); font-weight: var(--kscc-body-product-weight, 600); } /* ======================================================================== BUTTONS ======================================================================== */ .kscc-buttons { display: flex; flex-direction: var(--kscc-btn-flex-dir, row); gap: 10px; } .kscc-btn { flex: 1; padding: 11px 16px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; border-style: solid; text-align: center; line-height: 1.2; } .kscc-btn:focus { outline: 2px solid currentColor; outline-offset: 2px; } /* Cancel (left by default) */ .kscc-btn-cancel { background: var(--kscc-cancel-bg, #f5f5f5); color: var(--kscc-cancel-text, #333); border-color: var(--kscc-cancel-border, #e0e0e0); border-width: var(--kscc-cancel-border-w, 1px); border-radius: var(--kscc-cancel-radius, 4px); } .kscc-btn-cancel:hover { background: var(--kscc-cancel-bg-hover, #ebebeb); } /* Confirm (right by default) */ .kscc-btn-confirm { background: var(--kscc-confirm-bg, #e85d04); color: var(--kscc-confirm-text, #ffffff); border-color: var(--kscc-confirm-border, transparent); border-width: var(--kscc-confirm-border-w, 0); border-radius: var(--kscc-confirm-radius, 4px); } .kscc-btn-confirm:hover { background: var(--kscc-confirm-bg-hover, #c84d00); } /* ======================================================================== ANIMATIONS ======================================================================== */ /* Fade */ #kscc-modal-root[data-anim="fade"].is-open .kscc-overlay { animation: kscc-fade-in 0.2s ease; } #kscc-modal-root[data-anim="fade"].is-open .kscc-box { animation: kscc-fade-in 0.25s ease; } @keyframes kscc-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Scale */ #kscc-modal-root[data-anim="scale"].is-open .kscc-overlay { animation: kscc-fade-in 0.2s ease; } #kscc-modal-root[data-anim="scale"].is-open .kscc-box { animation: kscc-scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes kscc-scale-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Slide down */ #kscc-modal-root[data-anim="slide"].is-open .kscc-overlay { animation: kscc-fade-in 0.2s ease; } #kscc-modal-root[data-anim="slide"].is-open .kscc-box { animation: kscc-slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes kscc-slide-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* No animation */ #kscc-modal-root[data-anim="none"].is-open .kscc-overlay, #kscc-modal-root[data-anim="none"].is-open .kscc-box { animation: none; } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { #kscc-modal-root.is-open .kscc-overlay, #kscc-modal-root.is-open .kscc-box { animation: none !important; } } /* ======================================================================== RESPONSIVE ======================================================================== */ @media (max-width: 480px) { .kscc-box { padding: 22px 20px; } .kscc-title { font-size: calc(var(--kscc-title-size, 19px) * 0.95); } }