/* Overlay covers the entire plugin content area including fixed tabs */ .abj404-setup-overlay { position: fixed; top: var(--admin-bar-height, 32px); left: 160px; /* WordPress admin menu width */ right: 0; bottom: 0; background: var(--abj404-wizard-overlay-bg); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 50px; } /* Adjust for folded menu */ @media screen and (max-width: 960px) { .abj404-setup-overlay { left: 36px; } } /* Adjust for mobile */ @media screen and (max-width: 782px) { .abj404-setup-overlay { left: 0; top: 46px; /* Mobile admin bar height */ } } .abj404-setup-modal { background: var(--abj404-wizard-modal-bg); border-radius: 8px; box-shadow: var(--abj404-wizard-modal-shadow); max-width: 500px; width: 95%; max-height: calc(100vh - 150px); overflow-y: auto; position: relative; border: 1px solid var(--abj404-wizard-modal-border); } .abj404-setup-header { background: var(--abj404-wizard-header-bg); color: var(--abj404-wizard-header-text); padding: 16px 20px; border-radius: 8px 8px 0 0; display: flex; justify-content: space-between; align-items: center; } .abj404-setup-header h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--abj404-wizard-header-text); } .abj404-setup-close { background: var(--abj404-wizard-close-bg); border: 1px solid var(--abj404-wizard-close-border); border-radius: 4px; color: var(--abj404-wizard-header-text); font-size: 20px; cursor: pointer; padding: 2px 8px; line-height: 1; opacity: 0.9; } .abj404-setup-close:hover { opacity: 1; background: var(--abj404-wizard-close-bg-hover); } .abj404-setup-close:focus { outline: 2px solid var(--abj404-wizard-close-focus-outline); outline-offset: 1px; } .abj404-setup-content { padding: 16px 24px 10px 24px; color: var(--abj404-wizard-content-text); } .abj404-setup-intro { margin-bottom: 24px; color: var(--abj404-wizard-intro-text); font-size: 14px; line-height: 1.5; } .abj404-setup-question { margin-bottom: 24px; } .abj404-setup-question h3 { margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: var(--abj404-wizard-heading-text); } .abj404-setup-options { display: flex; flex-direction: column; gap: 8px; } .abj404-setup-option { display: flex; align-items: flex-start; padding: 10px 12px; background: var(--abj404-wizard-option-bg); border-radius: 4px; cursor: pointer; transition: background 0.2s; } .abj404-setup-option:hover { background: var(--abj404-wizard-option-bg-hover); } .abj404-setup-option:has(input:checked) { background: var(--abj404-wizard-option-selected-bg); border: 1px solid var(--abj404-wizard-option-selected-border); margin: -1px; } .abj404-setup-option:focus-within { outline: 2px solid var(--abj404-wizard-focus-outline); outline-offset: 1px; } .abj404-setup-option input[type="radio"] { margin: 2px 10px 0 0; flex-shrink: 0; accent-color: var(--abj404-wizard-accent); } .abj404-setup-option input[type="radio"], .abj404-setup-option input[type="radio"]:focus, .abj404-setup-option input[type="radio"]:checked, .abj404-setup-option input[type="radio"]:checked:focus { outline: none !important; box-shadow: none !important; border-color: var(--abj404-wizard-accent) !important; } .abj404-setup-option-text { flex: 1; } .abj404-setup-option-label { display: block; font-weight: 500; color: var(--abj404-wizard-label-text); margin-bottom: 2px; } .abj404-setup-option-desc { display: block; font-size: 12px; color: var(--abj404-wizard-desc-text); } .abj404-setup-footer { padding: 16px 24px; background: var(--abj404-wizard-footer-bg); border-radius: 0 0 8px 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .abj404-setup-footer .button { padding: 6px 16px; } .abj404-setup-skip { background: var(--abj404-wizard-skip-bg); border: 1px solid var(--abj404-wizard-skip-border); border-radius: 3px; color: var(--abj404-wizard-skip-text); padding: 6px 16px; font-size: 13px; cursor: pointer; text-decoration: none; line-height: 1.5; } .abj404-setup-skip:hover { background: var(--abj404-wizard-skip-bg-hover); border-color: var(--abj404-wizard-skip-border-hover); color: var(--abj404-wizard-skip-text-hover); } .abj404-setup-skip:focus { outline: 2px solid var(--abj404-wizard-focus-outline); outline-offset: 1px; } .abj404-setup-primary { background: var(--abj404-wizard-accent) !important; border-color: var(--abj404-wizard-accent) !important; color: var(--abj404-wizard-header-text) !important; } .abj404-setup-primary:hover { background: var(--abj404-wizard-accent-hover) !important; border-color: var(--abj404-wizard-accent-hover) !important; } /* Loading overlay */ .abj404-setup-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--abj404-wizard-loading-overlay-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 8px; z-index: 10; } /* Toast notification for AJAX errors */ .abj404-toast { position: fixed; bottom: 20px; right: 20px; background: var(--abj404-wizard-toast-bg); color: var(--abj404-wizard-toast-text); padding: 12px 16px; border-radius: 4px; box-shadow: var(--abj404-wizard-toast-shadow); z-index: 9999; max-width: 350px; font-size: 13px; line-height: 1.4; animation: abj404-toast-slide 0.3s ease-out; } @keyframes abj404-toast-slide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .abj404-toast-close { background: none; border: none; color: var(--abj404-wizard-toast-text); font-size: 16px; cursor: pointer; float: right; margin: -4px -4px 0 8px; padding: 0 4px; opacity: 0.8; } .abj404-toast-close:hover { opacity: 1; } .abj404-setup-loading span { color: var(--abj404-wizard-loading-text); font-size: 14px; } .abj404-setup-spinner { width: 24px; height: 24px; border: 3px solid var(--abj404-wizard-spinner-track); border-top-color: var(--abj404-wizard-spinner-head); border-radius: 50%; animation: abj404-setup-spin 0.8s linear infinite; } @keyframes abj404-setup-spin { to { transform: rotate(360deg); } }