/* ==========================================================================  
 Wyzwalacz głosu: Przycisk (Button) vs Link tekstowy  
 ========================================================================== */  
  
/* 1. Tryb standardowego przycisku */  
.sp-vote-btn {  
 background-color: var(--sp-primary, #0073aa);  
 color: #ffffff;  
 border: none;  
 padding: var(--sp-btn-padding-y, 10px) var(--sp-btn-padding-x, 20px);  
 font-size: var(--sp-btn-font-size, 15px);  
 font-weight: 600;  
 border-radius: var(--sp-btn-border-radius, 4px);  
 cursor: pointer;  
 display: inline-block;  
 line-height: 1.4;  
 text-align: center;  
 text-decoration: none;  
 transition: background-color 0.2s ease, transform 0.1s ease;  
}  
  
.sp-vote-btn:hover:not(:disabled) {  
 background-color: var(--sp-primary-hover, #005177);  
 color: #ffffff;  
}  
  
.sp-vote-btn:active:not(:disabled) {  
 transform: scale(0.98);  
}  
  
.sp-vote-btn:disabled,  
.sp-vote-btn.sp-btn-disabled {  
 background-color: #94a3b8 !important;  
 color: #ffffff !important;  
 cursor: not-allowed !important;  
 transform: none !important;  
 opacity: 0.85;  
}  
  
/* 2. Tryb linku tekstowego */  
.sp-vote-link {  
 background: transparent;  
 color: var(--sp-primary, #0073aa);  
 border: none;  
 padding: 0;  
 font-size: inherit;  
 font-weight: 600;  
 cursor: pointer;  
 display: inline;  
 text-decoration: underline;  
 text-underline-offset: 3px;  
 transition: color 0.15s ease;  
}  
  
.sp-vote-link:hover:not(:disabled) {  
 color: var(--sp-primary-hover, #005177);  
 text-decoration: underline;  
}  
  
.sp-vote-link:disabled,  
.sp-vote-link.sp-btn-disabled {  
 color: #94a3b8 !important;  
 cursor: not-allowed !important;  
 text-decoration: line-through;  
 opacity: 0.8;  
}  
  
/* ==========================================================================  
 Okno modalne OTP  
 ========================================================================== */  
.sp-modal-backdrop {  
 position: fixed;  
 top: 0;  
 left: 0;  
 width: 100vw;  
 height: 100vh;  
 background: rgba(0, 0, 0, 0.6);  
 backdrop-filter: blur(3px);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 z-index: 999999;  
}  
  
.sp-modal {  
 background: #ffffff;  
 width: 90%;  
 max-width: var(--sp-modal-max-width, 440px);  
 border-radius: 8px;  
 padding: 28px;  
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);  
 position: relative;  
 box-sizing: border-box;  
}  
  
.sp-modal-close {  
 position: absolute;  
 top: 14px;  
 right: 14px;  
 background: none;  
 border: none;  
 font-size: 26px;  
 line-height: 1;  
 color: #666;  
 cursor: pointer;  
 padding: 4px;  
}  
  
.sp-modal-close:hover {  
 color: #000;  
}  
  
.sp-modal-heading {  
 margin-top: 0;  
 margin-bottom: 8px;  
 font-size: 20px;  
 color: #111;  
}  
  
.sp-desc {  
 font-size: 14px;  
 color: #666;  
 margin-bottom: 20px;  
 line-height: 1.4;  
}  
  
.sp-field {  
 margin-bottom: 18px;  
}  
  
.sp-field label {  
 display: block;  
 margin-bottom: 6px;  
 font-size: 13px;  
 font-weight: 600;  
 color: #333;  
}  
  
.sp-field input {  
 width: 100%;  
 padding: 10px 12px;  
 font-size: 15px;  
 border: 1px solid #ccc;  
 border-radius: 4px;  
 box-sizing: border-box;  
}  
  
.sp-field input:focus {  
 border-color: var(--sp-primary, #0073aa);  
 outline: none;  
 box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);  
}  
  
#sp-otp-input {  
 letter-spacing: 6px;  
 font-size: 22px;  
 text-align: center;  
 font-weight: bold;  
}  
  
#sp-otp-input::placeholder {  
 color: #c4c4c4;  
 font-weight: normal;  
 opacity: 0.7;  
 letter-spacing: 6px;  
}  
  
.sp-btn-primary {  
 width: 100%;  
 background-color: var(--sp-primary, #0073aa);  
 color: #fff;  
 border: none;  
 padding: 12px;  
 font-size: 15px;  
 font-weight: 600;  
 border-radius: var(--sp-btn-border-radius, 4px);  
 cursor: pointer;  
 transition: background-color 0.2s;  
}  
  
.sp-btn-primary:hover:not(:disabled) {  
 background-color: var(--sp-primary-hover, #005177);  
}  
  
.sp-btn-primary:disabled {  
 opacity: 0.6;  
 cursor: not-allowed;  
}  
  
.sp-btn-link {  
 background: none;  
 border: none;  
 color: var(--sp-primary, #0073aa);  
 font-size: 13px;  
 cursor: pointer;  
 text-decoration: underline;  
 margin-top: 12px;  
 display: block;  
 width: 100%;  
 text-align: center;  
}  
  
.sp-btn-link:hover {  
 color: var(--sp-primary-hover, #005177);  
}  
  
.sp-feedback {  
 padding: 10px 14px;  
 border-radius: 4px;  
 margin-bottom: 16px;  
 font-size: 13px;  
 line-height: 1.4;  
}  
  
.sp-feedback-error {  
 background-color: #fde8e8;  
 color: #9b1c1c;  
 border: 1px solid #f8b4b4;  
}  
  
.sp-feedback-success {  
 background-color: #def7ec;  
 color: #03543f;  
 border: 1px solid #bcf0da;  
}  
  
.sp-success-view {  
 text-align: center;  
 padding: 20px 0;  
}  
  
.sp-success-icon {  
 font-size: 48px;  
 color: var(--sp-leader, #0e9f6e);  
 margin-bottom: 12px;  
}  
  
.sp-success-view h4 {  
 margin: 0 0 8px 0;  
 font-size: 20px;  
}  
  
/* ==========================================================================  
 Prezentacja słupków wyników i kart projektów: Card vs Flat  
 ========================================================================== */  
.sp-results-card {  
 background: #ffffff;  
 border: 1px solid #e2e8f0;  
 border-radius: 8px;  
 padding: 20px;  
 margin-top: 15px;  
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  
}  
  
/* Domyślny wygląd karty projektu w kategorii (Card) */  
.sp-project-card.sp-style-card {  
 background: #ffffff;  
 border: 1px solid #e2e8f0;  
 border-radius: 8px;  
 padding: 22px;  
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  
 margin: 15px 0;  
}  
  
/* Wariant Flat: czyste, naturalne nadpisanie stylów bez !important */  
.sp-results-card.sp-style-flat,  
.sp-project-card.sp-style-flat,  
.sp-single-bar.sp-style-flat {  
 background: transparent;  
 border: none;  
 border-radius: 0;  
 padding: 0;  
 box-shadow: none;  
 margin: 10px 0;  
}  
  
.sp-results-title {  
 margin-top: 0;  
 margin-bottom: 16px;  
 font-size: 17px;  
 color: #1e293b;  
 border-bottom: 2px solid #f1f5f9;  
 padding-bottom: 8px;  
}  
  
.sp-style-flat .sp-results-title {  
 border-bottom: 1px solid #e2e8f0;  
}  
  
.sp-result-item {  
 margin-bottom: 14px;  
}  
  
.sp-result-item:last-child {  
 margin-bottom: 0;  
}  
  
.sp-result-item.sp-single-bar {  
 max-width: var(--sp-single-bar-max-width, 480px);  
 margin-top: 8px;  
 margin-bottom: 0;  
}  
  
.sp-result-header {  
 display: flex;  
 justify-content: space-between;  
 align-items: center;  
 margin-bottom: 5px;  
 font-size: 13px;  
}  
  
.sp-result-name {  
 font-weight: 600;  
 color: #334155;  
}  
  
.sp-result-val {  
 font-weight: 600;  
 color: var(--sp-bar-val, var(--sp-bar, var(--sp-primary, #0073aa)));  
 font-size: 13px;  
}  
  
.sp-result-track {  
 background-color: var(--sp-track-bg, #f1f5f9);  
 border-radius: var(--sp-bar-radius, 4px);  
 height: var(--sp-bar-height, 10px);  
 overflow: hidden;  
 width: 100%;  
}  
  
.sp-result-bar {  
 background-color: var(--sp-bar, var(--sp-primary, #0073aa));  
 height: 100%;  
 border-radius: var(--sp-bar-radius, 4px);  
 transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);  
 min-width: 0;  
}  
  
/* Wariant Lidera */  
.sp-result-item.sp-is-leader .sp-result-name {  
 color: #0f172a;  
}  
  
.sp-result-item.sp-is-leader .sp-result-bar {  
 background-color: var(--sp-leader, #0e9f6e);  
}  
  
.sp-result-item.sp-is-leader .sp-result-val {  
 color: var(--sp-leader-val, var(--sp-leader, #0e9f6e));  
}  
  
.sp-no-votes {  
 color: #64748b;  
 font-size: 14px;  
 margin: 0;  
 font-style: italic;  
}  
  
.sp-results-hidden {  
 background: #f8fafc;  
 border: 1px dashed #cbd5e1;  
 border-radius: 8px;  
 padding: 24px;  
 text-align: center;  
 color: #475569;  
 margin-top: 15px;  
}  
  
.sp-results-hidden-icon {  
 font-size: 32px;  
 margin-bottom: 8px;  
}  
  
.sp-results-hidden p {  
 margin: 0;  
 font-size: 14px;  
 line-height: 1.5;  
}  
  
/* ==========================================================================  
 Shortcode statusu i zegar odliczający ([secure_status])  
 ========================================================================== */  
.sp-status-wrapper {  
 background: #ffffff;  
 border: 1px solid #e2e8f0;  
 border-radius: 8px;  
 padding: 20px 24px;  
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  
 margin: 20px 0;  
}  
  
.sp-status-banner {  
 border-radius: 0;  
 border-left: none;  
 border-right: none;  
 box-shadow: none;  
 background: #f8fafc;  
 border-top: 1px solid #e2e8f0;  
 border-bottom: 1px solid #e2e8f0;  
}  
  
.sp-status-badge {  
 display: inline-block;  
 padding: 6px 14px;  
 border-radius: 50px;  
 font-size: 13px;  
}  
  
.sp-status-badge-row {  
 display: flex;  
 align-items: center;  
 gap: 8px;  
 margin-bottom: 8px;  
}  
  
.sp-status-indicator {  
 width: 10px;  
 height: 10px;  
 border-radius: 50%;  
 display: inline-block;  
}  
  
.sp-status-indicator.sp-state-active {  
 background-color: var(--sp-leader, #0e9f6e);  
 box-shadow: 0 0 0 3px rgba(14, 159, 110, 0.2);  
}  
  
.sp-status-indicator.sp-state-pending {  
 background-color: #f59e0b;  
 box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);  
}  
  
.sp-status-indicator.sp-state-ended {  
 background-color: #64748b;  
 box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.2);  
}  
  
.sp-contest-name {  
 font-size: 13px;  
 font-weight: 600;  
 color: #64748b;  
 text-transform: uppercase;  
 letter-spacing: 0.5px;  
}  
  
.sp-status-text {  
 font-size: 16px;  
 font-weight: 600;  
 color: #1e293b;  
 margin: 0 0 14px 0;  
}  
  
.sp-countdown-grid {  
 display: flex;  
 align-items: center;  
 gap: 8px;  
}  
  
.sp-time-block {  
 background: #f1f5f9;  
 padding: 6px 10px;  
 border-radius: 6px;  
 text-align: center;  
 min-width: 45px;  
}  
  
.sp-digit {  
 display: block;  
 font-size: 18px;  
 font-weight: 700;  
 color: #0f172a;  
 line-height: 1.1;  
}  
  
.sp-label {  
 font-size: 9px;  
 color: #64748b;  
 text-transform: uppercase;  
 font-weight: 600;  
}  
  
.sp-time-separator {  
 font-size: 18px;  
 font-weight: 700;  
 color: #94a3b8;  
}