.wpdm-sp { --sp-bg: #ffffff; --sp-bg-header: #f8fafc; --sp-text: #1e293b; --sp-text-muted: #64748b; --sp-border: #e2e8f0; --sp-shadow: -4px 0 24px rgb(0 0 0 / 0.08), -1px 0 4px rgb(0 0 0 / 0.04); --sp-backdrop: rgb(15 23 42 / 0.3); --sp-close-hover: #f1f5f9; --sp-spinner: var(--color-primary, #6366f1); --sp-width: 680px; } .wpdm-sp.wpdm-sp-dark { --sp-bg: #1e293b; --sp-bg-header: #162032; --sp-text: #f1f5f9; --sp-text-muted: #94a3b8; --sp-border: #334155; --sp-shadow: -4px 0 24px rgb(0 0 0 / 0.3), -1px 0 4px rgb(0 0 0 / 0.2); --sp-backdrop: rgb(0 0 0 / 0.5); --sp-close-hover: #334155; } @media (prefers-color-scheme: dark) { .wpdm-sp:not(.wpdm-sp-light) { --sp-bg: #1e293b; --sp-bg-header: #162032; --sp-text: #f1f5f9; --sp-text-muted: #94a3b8; --sp-border: #334155; --sp-shadow: -4px 0 24px rgb(0 0 0 / 0.3), -1px 0 4px rgb(0 0 0 / 0.2); --sp-backdrop: rgb(0 0 0 / 0.5); --sp-close-hover: #334155; } } .wpdm-sp__backdrop { position: fixed; inset: 0; background: var(--sp-backdrop); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 999998; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .wpdm-sp.is-open .wpdm-sp__backdrop { opacity: 1; visibility: visible; } .wpdm-sp__panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--sp-width); max-width: 100%; background: var(--sp-bg); box-shadow: var(--sp-shadow); z-index: 999999; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); } .wpdm-sp.is-open .wpdm-sp__panel { transform: translateX(0); } .wpdm-sp__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--sp-border); background: var(--sp-bg-header); flex-shrink: 0; } .wpdm-sp__title { flex: 1; margin: 0; padding: 0; font-size: 16px; font-weight: 600; color: var(--sp-text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .wpdm-sp__close { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 8px; color: var(--sp-text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; padding: 0; } .wpdm-sp__close:hover { background: var(--sp-close-hover); color: var(--sp-text); } .wpdm-sp__body { flex: 1; overflow-y: auto; padding: 24px 20px; color: var(--sp-text); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .wpdm-sp__body img { max-width: 100% !important; height: auto; } .wpdm-sp__body .w3eden { max-width: 100%; } .wpdm-sp__loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: var(--sp-text-muted); font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .wpdm-sp__spinner { width: 28px; height: 28px; border: 3px solid var(--sp-border); border-top-color: var(--sp-spinner); border-radius: 50%; animation: wpdm-sp-spin 0.7s linear infinite; } @keyframes wpdm-sp-spin { to { transform: rotate(360deg); } } .wpdm-sp__error { text-align: center; padding: 48px 20px; color: var(--sp-text-muted); font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .wpdm-sp__error svg { display: block; margin: 0 auto 12px; color: #ef4444; opacity: 0.6; } .wpdm-sp__error-retry { display: inline-block; margin-top: 12px; padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--sp-spinner); background: none; border: 1px solid var(--sp-border); border-radius: 6px; cursor: pointer; transition: background 0.15s ease; } .wpdm-sp__error-retry:hover { background: var(--sp-close-hover); } .wpdm-sp__body { scrollbar-width: thin; scrollbar-color: transparent transparent; } .wpdm-sp__body:hover { scrollbar-color: var(--sp-border) transparent; } .wpdm-sp__body::-webkit-scrollbar { width: 4px; } .wpdm-sp__body::-webkit-scrollbar-track { background: transparent; } .wpdm-sp__body::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.2s; } .wpdm-sp__body:hover::-webkit-scrollbar-thumb { background: var(--sp-border); } .wpdm-sp__body:hover::-webkit-scrollbar-thumb:hover { background: var(--sp-text-muted); } body.wpdm-sp-active { overflow: hidden; } a.wpdm-popup-link { cursor: pointer; }