/*
 * Robin Parker - YOP Poll Custom Styles
 * Themed poll styling matching the author website
 * Version: 1.0.0
 */

/* ========================================
   BASE POLL STYLES - ALL POLLS
   ======================================== */

/* Poll container */
.yop-poll-container {
    background: white;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin: 2rem 0;
    font-family: 'Georgia', serif;
}

/* Poll question */
.yop-poll-container .yop-poll-question {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1a1a2e;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Poll answers container */
.yop-poll-container .yop-poll-answers {
    margin-bottom: 2rem;
}

/* Individual answer */
.yop-poll-container .yop-poll-answer {
    background: #f8f9fa;
    padding: 1rem 1.5rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.yop-poll-container .yop-poll-answer:hover {
    background: white;
    border-color: #ffd700;
    transform: translateX(5px);
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.2);
}

/* Answer label */
.yop-poll-container .yop-poll-answer label {
    cursor: pointer;
    font-size: 1.1rem;
    color: #333;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Radio button / Checkbox styling */
.yop-poll-container .yop-poll-answer input[type="radio"],
.yop-poll-container .yop-poll-answer input[type="checkbox"] {
    margin-right: 1rem;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Vote button */
.yop-poll-container .yop-poll-vote-button {
    background: #ffd700;
    color: #1a1a2e;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    font-family: 'Georgia', serif;
}

.yop-poll-container .yop-poll-vote-button:hover {
    background: #ffed4e;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}

/* Results view */
.yop-poll-container .yop-poll-results {
    margin-top: 2rem;
}

.yop-poll-container .yop-poll-result {
    margin-bottom: 1rem;
}

.yop-poll-container .yop-poll-result-label {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0.5rem;
    display: block;
}

/* Progress bar container */
.yop-poll-container .yop-poll-result-bar {
    background: #e9ecef;
    height: 30px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

/* Progress bar fill */
.yop-poll-container .yop-poll-result-bar-inner {
    background: linear-gradient(90deg, #ffd700 0%, #ffed4e 100%);
    height: 100%;
    border-radius: 15px;
    transition: width 0.6s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
}

/* Percentage text */
.yop-poll-container .yop-poll-result-percentage {
    color: #1a1a2e;
    font-weight: bold;
    font-size: 0.9rem;
}

/* Vote count */
.yop-poll-container .yop-poll-result-votes {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
    display: block;
}

/* Total votes */
.yop-poll-container .yop-poll-total-votes {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 1rem;
    color: #666;
    font-style: italic;
}

/* ========================================
   ZYTOPRA THEMED POLLS (PURPLE)
   ======================================== */

/* Add class "zytopra-poll" to your poll or wrap in div */
.zytopra-poll .yop-poll-container,
.poll-zytopra .yop-poll-container {
    background: linear-gradient(to bottom, rgba(45, 27, 78, 0.05) 0%, white 100%);
    border-top: 4px solid #7b4fb8;
}

.zytopra-poll .yop-poll-question,
.poll-zytopra .yop-poll-question {
    color: #2d1b4e;
}

.zytopra-poll .yop-poll-answer:hover,
.poll-zytopra .yop-poll-answer:hover {
    border-color: #7b4fb8;
    box-shadow: 0 3px 10px rgba(123, 79, 184, 0.2);
}

.zytopra-poll .yop-poll-vote-button,
.poll-zytopra .yop-poll-vote-button {
    background: #5a3a8a;
    color: white;
    box-shadow: 0 4px 15px rgba(90, 58, 138, 0.3);
}

.zytopra-poll .yop-poll-vote-button:hover,
.poll-zytopra .yop-poll-vote-button:hover {
    background: #7b4fb8;
    box-shadow: 0 6px 20px rgba(123, 79, 184, 0.5);
}

.zytopra-poll .yop-poll-result-bar-inner,
.poll-zytopra .yop-poll-result-bar-inner {
    background: linear-gradient(90deg, #5a3a8a 0%, #7b4fb8 100%);
}

.zytopra-poll .yop-poll-result-percentage,
.poll-zytopra .yop-poll-result-percentage {
    color: white;
}

/* Radio/checkbox accent color for Zytopra */
.zytopra-poll .yop-poll-answer input[type="radio"]:checked,
.poll-zytopra .yop-poll-answer input[type="radio"]:checked,
.zytopra-poll .yop-poll-answer input[type="checkbox"]:checked,
.poll-zytopra .yop-poll-answer input[type="checkbox"]:checked {
    accent-color: #7b4fb8;
}

/* ========================================
   ANNA THEMED POLLS (GREEN)
   ======================================== */

/* Add class "anna-poll" to your poll or wrap in div */
.anna-poll .yop-poll-container,
.poll-anna .yop-poll-container {
    background: linear-gradient(to bottom, rgba(26, 77, 46, 0.05) 0%, white 100%);
    border-top: 4px solid #2d8a4d;
}

.anna-poll .yop-poll-question,
.poll-anna .yop-poll-question {
    color: #1a4d2e;
}

.anna-poll .yop-poll-answer:hover,
.poll-anna .yop-poll-answer:hover {
    border-color: #2d8a4d;
    box-shadow: 0 3px 10px rgba(45, 138, 77, 0.2);
}

.anna-poll .yop-poll-vote-button,
.poll-anna .yop-poll-vote-button {
    background: #1a5a2e;
    color: white;
    box-shadow: 0 4px 15px rgba(26, 90, 46, 0.3);
}

.anna-poll .yop-poll-vote-button:hover,
.poll-anna .yop-poll-vote-button:hover {
    background: #2d8a4d;
    box-shadow: 0 6px 20px rgba(45, 138, 77, 0.5);
}

.anna-poll .yop-poll-result-bar-inner,
.poll-anna .yop-poll-result-bar-inner {
    background: linear-gradient(90deg, #1a5a2e 0%, #2d8a4d 100%);
}

.anna-poll .yop-poll-result-percentage,
.poll-anna .yop-poll-result-percentage {
    color: white;
}

/* Radio/checkbox accent color for Anna */
.anna-poll .yop-poll-answer input[type="radio"]:checked,
.poll-anna .yop-poll-answer input[type="radio"]:checked,
.anna-poll .yop-poll-answer input[type="checkbox"]:checked,
.poll-anna .yop-poll-answer input[type="checkbox"]:checked {
    accent-color: #2d8a4d;
}

/* ========================================
   POLL IN SIDEBAR OR WIDGET
   ======================================== */

.widget .yop-poll-container,
.sidebar .yop-poll-container {
    padding: 1.5rem;
}

.widget .yop-poll-question,
.sidebar .yop-poll-question {
    font-size: 1.2rem;
}

.widget .yop-poll-answer,
.sidebar .yop-poll-answer {
    padding: 0.75rem 1rem;
}

.widget .yop-poll-answer label,
.sidebar .yop-poll-answer label {
    font-size: 1rem;
}

/* ========================================
   LOADING AND STATES
   ======================================== */

.yop-poll-container.yop-poll-loading {
    opacity: 0.6;
    pointer-events: none;
}

.yop-poll-container .yop-poll-error {
    background: #f8d7da;
    color: #721c24;
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.yop-poll-container .yop-poll-success {
    background: #d4edda;
    color: #155724;
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .yop-poll-container {
        padding: 1.5rem;
    }

    .yop-poll-container .yop-poll-question {
        font-size: 1.2rem;
    }

    .yop-poll-container .yop-poll-answer {
        padding: 0.75rem 1rem;
    }

    .yop-poll-container .yop-poll-answer label {
        font-size: 1rem;
    }

    .yop-poll-container .yop-poll-vote-button {
        padding: 0.75rem 2rem;
        font-size: 1rem;
        width: 100%;
    }

    .yop-poll-container .yop-poll-result-bar {
        height: 25px;
    }
}

/* ========================================
   ALTERNATIVE: CARD STYLE POLLS
   ======================================== */

/* Add class "poll-card-style" for a different look */
.poll-card-style .yop-poll-answer {
    background: white;
    border: 2px solid #e9ecef;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.poll-card-style .yop-poll-answer:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ========================================
   CUSTOM: INLINE RESULTS (SHOW WHILE VOTING)
   ======================================== */

.yop-poll-container.show-results-inline .yop-poll-answer {
    position: relative;
    overflow: hidden;
}

.yop-poll-container.show-results-inline .yop-poll-answer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 215, 0, 0.1);
    width: var(--result-percentage, 0%);
    transition: width 0.6s ease;
    z-index: 0;
}

.yop-poll-container.show-results-inline .yop-poll-answer label {
    position: relative;
    z-index: 1;
}