.wpa-superstar-wrap { max-width: 800px; margin: 20px 0; } .wpa-superstar-wrap h1 { font-size: 23px; font-weight: 400; margin: 0; padding: 9px 0 4px 0; line-height: 1.3; } .nav-tab-wrapper { margin-bottom: 20px; border-bottom: 1px solid #ccd0d4; } .nav-tab { background: #f8f9fa; border: 1px solid #ccd0d4; border-bottom: none; padding: 8px 16px; font-size: 14px; line-height: 1.71428571; font-weight: 600; margin-right: 5px; } .nav-tab-active { background: #fff; border-bottom: 1px solid #fff; margin-bottom: -1px; } /* ACF-style toggle switches */ .wpa-superstar-toggle { margin: 15px 0; padding: 15px; background: #fff; border: 1px solid #ccd0d4; border-radius: 3px; box-shadow: 0 1px 1px rgba(0,0,0,0.04); } .wpa-superstar-toggle label { display: flex; align-items: center; font-size: 14px; line-height: 1.4; font-weight: 600; color: #23282d; cursor: pointer; } .wpa-superstar-toggle .description { margin: 5px 0 0 44px; color: #666; } /* Toggle Switch Container */ .wpa-toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; margin-right: 8px; } /* Hide default checkbox */ .wpa-toggle-switch input { opacity: 0; width: 0; height: 0; margin: 0; } /* The slider */ .wpa-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccd0d4; transition: .3s; border-radius: 20px; border: 2px solid #ccd0d4; } /* Slider knob */ .wpa-toggle-slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; } /* Active/checked state */ .wpa-toggle-switch input:checked + .wpa-toggle-slider { background-color: #2271b1; border-color: #2271b1; } .wpa-toggle-switch input:checked + .wpa-toggle-slider:before { transform: translateX(16px); } /* Focus state */ .wpa-toggle-switch input:focus + .wpa-toggle-slider { box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1; } /* Hover state */ .wpa-toggle-switch:hover .wpa-toggle-slider { border-color: #2271b1; }