/* --wcpp-primary-color is injected from plugin settings */

/* Install App Shortcode & Modal */
.wcpp-install-shortcode-button { display: none; padding: 10px 20px; background-color: var(--wcpp-primary-color); color: #ffffff; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; transition: background-color 0.2s; }
.wcpp-install-shortcode-button:hover { filter: brightness(110%); }
.wcpp-install-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 20000; display: none; align-items: center; justify-content: center; }
.wcpp-install-modal-overlay.show { display: flex; }
.wcpp-install-modal-content { background-color: #ffffff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); width: 90%; max-width: 380px; text-align: center; animation: wcpp-modal-fadein 0.3s ease; }
@keyframes wcpp-modal-fadein { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.wcpp-modal-header { padding: 20px; border-bottom: 1px solid #eeeeee; }
.wcpp-modal-title { margin: 0; font-size: 1.25rem; color: #333; }
.wcpp-modal-body { padding: 24px; }
.wcpp-modal-icon { width: 80px; height: 80px; border-radius: 16px; margin-bottom: 16px; }
.wcpp-modal-explainer { margin: 0; color: #555; font-size: 1rem; line-height: 1.5; }
.wcpp-modal-footer { display: flex; padding: 20px; background-color: #f7f7f7; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.wcpp-modal-button { flex: 1; padding: 12px; border-radius: 8px; border: none; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.2s; }
.wcpp-modal-button.cancel { background-color: #e0e0e0; color: #333; margin-right: 10px; }
.wcpp-modal-button.install { background-color: var(--wcpp-primary-color); color: #ffffff; }

/* Floating Cart Button */
.wcpp-floating-cart-button { position: fixed; bottom: 25px; right: 25px; background-color: var(--wcpp-primary-color); color: #ffffff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(0,0,0,0.2); text-decoration: none; z-index: 10000; transform: scale(0); transition: transform 0.3s ease, background-color 0.3s ease; }
.wcpp-floating-cart-button.wcpp-active { transform: scale(1); }
.wcpp-floating-cart-button .wcpp-cart-count { position: absolute; top: 0; right: 0; background-color: #ffffff; color: var(--wcpp-primary-color); font-size: 12px; font-weight: bold; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--wcpp-primary-color); }

/* Offline Page Styles */
.wcpp-offline-container { background-color: #f0f2f5; text-align: center; padding: 60px 20px; min-height: 50vh; display: flex; align-items: center; justify-content: center; }
.wcpp-offline-content h1 { color: #1d2129; font-size: 24px; margin-top: 1rem; margin-bottom: 0.5rem; }
.wcpp-offline-content p { color: #606770; margin-bottom: 1.5rem; }
.wcpp-offline-button { background-color: var(--wcpp-primary-color); color: #ffffff; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: bold; display: inline-block; }