.wp-allstars-wrap { max-width: none; margin: 0; padding-right: 20px; } .wp-allstars-header { background: #fff; border-bottom: 1px solid #c3c4c7; box-shadow: 0 1px 0 rgba(0,0,0,.04); margin: 0 -20px 20px -20px; padding: 20px; display: flex; align-items: center; justify-content: space-between; width: auto; } .wp-allstars-header h1 { font-size: 23px; font-weight: 400; margin: 0; padding: 0; line-height: 1.3; color: #1d2327; } .wp-allstars-header-actions { display: flex; align-items: center; gap: 10px; } .wp-allstars-version { color: #646970; font-size: 13px; font-weight: 400; } /* Navigation Tabs */ .wp-allstars-nav { margin-bottom: 20px; } .wp-allstars-nav .nav-tab-wrapper { border-bottom: 1px solid #c3c4c7; padding-top: 0; margin: 0; } .wp-allstars-nav .nav-tab { font-size: 14px; padding: 10px 15px; margin-left: 0; margin-right: 4px; border: 1px solid #c3c4c7; border-bottom: none; background: #f0f0f1; color: #50575e; text-decoration: none; white-space: nowrap; } .wp-allstars-nav .nav-tab:hover { background: #fff; color: #1d2327; } .wp-allstars-nav .nav-tab-active { background: #fff; color: #1d2327; border-bottom: 1px solid #fff; margin-bottom: -1px; } /* Toggle Switches */ .wp-toggle-switch { position: relative; display: inline-block; width: 40px; height: 20px; margin-right: 12px; } .wp-toggle-switch input { opacity: 0; width: 0; height: 0; } .wp-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border-radius: 20px; } .wp-toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; } input:checked + .wp-toggle-slider { background-color: #4caf50; } input:checked + .wp-toggle-slider:before { transform: translateX(20px); } /* Settings Container */ .wp-allstars-settings-container { padding: 0 20px; max-width: 1100px; } .wp-allstars-settings-content { margin-top: 20px; padding: 0; } /* Toggle Sections */ .wp-allstars-toggle { margin: 15px 0; padding: 16px 20px; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.02); transition: all .15s ease-in-out; } .wp-allstars-toggle:hover { border-color: #4caf50; box-shadow: 0 2px 6px rgba(0,0,0,0.04); } .wp-allstars-toggle label { display: flex; align-items: center; font-size: 14px; line-height: 1.4; font-weight: 500; color: #1d2327; cursor: pointer; } .wp-allstars-toggle .description { margin: 6px 0 0 52px; color: #666; font-size: 13px; line-height: 1.5; } .wp-allstars-toggle-header { display: flex; justify-content: space-between; align-items: center; width: 100%; } .wp-allstars-toggle-settings { margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd; } .wp-allstars-setting-row { margin-bottom: 20px; } /* Expand/Collapse Button */ .wp-allstars-expand-settings { background: none; border: none; padding: 4px; cursor: pointer; color: #787c82; transition: color .15s ease-in-out; } .wp-allstars-expand-settings:hover { color: #1d2327; } .wp-allstars-expand-settings .dashicons { width: 20px; height: 20px; font-size: 20px; transition: transform .15s ease-in-out; } .wp-allstars-expand-settings[aria-expanded="true"] .dashicons { transform: rotate(180deg); } /* Form Elements */ .wp-allstars-setting-row input[type="text"], .wp-allstars-setting-row input[type="number"], .wp-allstars-setting-row textarea { width: 100%; max-width: 400px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-top: 5px; } .wp-allstars-setting-row textarea { min-height: 100px; } .wp-allstars-setting-row label { display: block; margin-bottom: 5px; font-weight: 500; } /* Loading Overlay */ .wp-allstars-loading-overlay { position: fixed; top: 32px; left: 160px; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); z-index: 100000; display: flex; align-items: center; justify-content: center; } /* Plugin Filters */ .wp-allstars-plugin-filters { margin: 0 0 20px; padding: 0 0 12px; border-bottom: 1px solid #ddd; } .wp-allstars-plugin-filters .button { margin-right: 5px; } /* Responsive Adjustments */ @media screen and (max-width: 782px) { .wp-allstars-header { flex-direction: column; align-items: flex-start; } .wp-allstars-header-actions { margin-top: 10px; } .wp-allstars-nav .nav-tab { margin-bottom: 5px; } .wp-allstars-toggle .description { margin-left: 0; margin-top: 10px; } }