/**
 * Public/Frontend Styles
 *
 * @package Spin_Wheel
 */
/* ==========================================================================
   Popup/Modal Styles
   ========================================================================== */

/* Popup Container */
.swp-wheel-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    margin: 0;
    padding: 0;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    max-width: unset !important;
}

.swp-wheel-popup.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

/* Modal Overlay */
.swp-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #1b1919a3;
    animation: swpFadeIn 0.3s ease-out;
    transition: opacity 0.3s ease;
}

/* Alternative gradient backgrounds */
.swp-modal-overlay.gradient-green {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.swp-modal-overlay.gradient-blue {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* Modal Content */
.swp-modal-content {
    position: relative;
    width: 90%;
    max-height: 90vh;
    background: transparent;
    z-index: 1000000;
    animation: swpSlideIn 0.4s ease-out;
    overflow-y: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Dynamic popup width support */
.swp-modal-content[data-max-width] {
    max-width: var(--swp-popup-max-width, 980px);
}

.swp-modal-content[data-width-percent] {
    width: var(--swp-popup-width-percent, 90%);
}

/* Close Button */
.swp-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    background: rgb(0 0 0);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1000001;
    padding: 0;
    color: #ffffff;
}

.swp-modal-close:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
    transform: rotate(90deg) scale(1.1);
}

.swp-modal-close svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Popup Wheel Wrapper */
.swp-wheel-wrapper-popup {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 50px;
}

.swp-wheel-container[data-wheel-type="nine_squares"] .swp-wheel-wrapper-popup {
    padding: clamp(28px, 4.5vw, 42px);
}

/* Animations */
@keyframes swpFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes swpSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive Popup */
@media screen and (max-width: 768px) {
    .swp-modal-content {
        width: 95%;
        max-height: 95vh;
        /* Mobile padding will be applied via JavaScript based on settings */
    }

    .swp-wheel-wrapper-popup {
        padding: 20px;
        border-radius: 15px;
    }

    .swp-wheel-container[data-wheel-type="nine_squares"] .swp-wheel-wrapper-popup {
        padding: 20px;
    }

    .swp-modal-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
    }

    .swp-modal-close .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }
}

.swp-wheel-wrapper {
    display: flex;
    gap: 50px;
    align-items: center;
    /* flex-wrap: wrap; */
    justify-content: space-between;
    position: relative;
}

.swp-desktop-header-form {
    display: none;
}

.swp-mobile-header-wheel {
    display: block;
}

@media (min-width: 768px) {
    .swp-desktop-header-form {
        display: block;
    }

    .swp-mobile-header-wheel {
        display: none;
    }
}

.swp-form-header {
    text-align: center;
    margin-bottom: clamp(15px, 2.5vw, 30px);
}

.swp-form-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px;
}

.swp-form-description {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

/* Form Elements — terms row (override .swp-form-group label which is more specific than .swp-terms-label alone) */
.swp-form-group.swp-terms-group {
    margin-top: clamp(14px, 2vw, 18px);
    margin-bottom: clamp(14px, 2vw, 18px);
}

.swp-form-group.swp-terms-group .swp-terms-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    padding: 14px 16px;
    font-weight: 500;
    font-size: clamp(13px, 1.2vw, 14px);
    line-height: 1.5;
    color: #444;
    cursor: pointer;
    background: #f8f9fb;
    border: 1px solid #e6e6e8;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.swp-form-group.swp-terms-group .swp-terms-label:hover {
    border-color: #d0d2d8;
    background: #f3f4f7;
}

.swp-form-group.swp-terms-group .swp-terms-label:focus-within {
    border-color: #f24101;
    box-shadow: 0 0 0 1px #f24101;
}

.swp-form-group.swp-terms-group .swp-accept-terms {
    margin: 0;
    margin-top: 2px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    min-width: 18px;
    accent-color: #f24101;
    cursor: pointer;
}

.swp-form-group.swp-terms-group .swp-terms-text {
    flex: 1;
    min-width: 0;
}

.swp-form-group.swp-terms-group .swp-terms-text a {
    color: #f24101;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.swp-form-group.swp-terms-group .swp-terms-text a:hover {
    color: #c93601;
}

.swp-form-group.swp-terms-group .swp-accept-terms.error {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

.swp-form-group.swp-terms-group:has(.swp-accept-terms.error) .swp-terms-label {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.06);
    box-shadow: none;
}

.swp-form-group.swp-terms-group:has(.swp-accept-terms.error) .swp-accept-terms.error {
    outline: none;
}

.swp-entry-form {
    margin: 0 auto;
}

.swp-wheel-column {
    width: 100%;
    min-width: auto;
    overflow: hidden;
}

.swp-form-column {
    width: 100%;
    min-width: auto;
}

.swp-form-group {
    margin-bottom: clamp(10px, 1.5vw, 12px);
}

.swp-form-group:last-child {
    margin-bottom: 0;
}

.swp-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
    font-size: clamp(12px, 1.2vw, 13px);
}

.swp-form-control,
.swp-otp-input-group .swp-otp-input {
    width: 100% !important;
    padding: 12px 15px !important;
    font-size: clamp(12px, 1.2vw, 14px) !important;
    border: 1px solid #e6e6e8 !important;
    border-radius: 6px !important;
    transition: border-color 0.3s ease !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

.swp-form-control:focus,
.swp-otp-input-group .swp-otp-input:focus {
    outline: none !important;
    border-color: #f24101 !important;
    box-shadow: 0 0 0 1px #f24101;
}

.swp-wheel-container .swp-form-control.error {
    border-color: #dc3545 !important;
    border-width: 2px !important;
    background-color: rgba(220, 53, 69, 0.05) !important;
}

.swp-wheel-container .swp-form-control.error:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
}

.swp-otp-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.swp-otp-status.success {
    font-size: 16px;
    color: #64666a;
}

.swp-otp-status.error {
    font-size: 16px;
    color: #dc3545;
}

.swp-otp-timer {
    font-size: 15px;
    margin: 4px 0;
}

/* Inline Error Messages */
.swp-error-message {
    display: block;
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 500;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Instruction */
.swp-form-instruction {
    text-align: center;
    color: #666;
    font-size: clamp(13px, 1.3vw, 15px);
    margin: 20px 0 0;
    padding: 15px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 8px;
    border-left: 3px solid #667eea;
    font-weight: 500;
}

/* Submit Button */
.swp-submit-btn {
    width: 100%;
    padding: 14px 30px;
    font-size: clamp(14px, 1.4vw, 16px);
    font-weight: bold;
    color: #fff;
    background: linear-gradient(35deg, #f24101, #f7994c);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.swp-submit-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(35deg, #f7994c, #f24101);

}

.swp-submit-btn:active {
    transform: translateY(0);
}

.swp-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* New Submit Button */
.swp-submit-group {
    margin-top: 20px;
}

.swp-btn-submit,
.swp-btn-verify-otp,
.swp-btn-send-otp {
    width: 100%;
    padding: 14px 30px;
    font-size: clamp(14px, 1.4vw, 14px);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(35deg, #f24101, #f7994c);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    min-height: 48px;
}



.swp-btn-submit:hover,
.swp-btn-verify-otp:hover,
.swp-btn-send-otp:hover {
    background: linear-gradient(35deg, #f7994c, #f24101);
}


.swp-btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}



.swp-btn-verify-otp {
    width: auto;
}

/* Wheel Section */
.swp-wheel-section {
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* Nine-squares: avoid “card inside card” (popup already uses .swp-wheel-wrapper-popup) */
.swp-wheel-container[data-wheel-type="nine_squares"] .swp-wheel-wrapper {
    align-items: stretch;
    gap: clamp(16px, 3vw, 28px);
}

/* Inline: one light panel per column; wheel area stays flat inside the column */
.swp-wheel-container[data-wheel-type="nine_squares"]:not([data-display-mode="popup"]) .swp-wheel-column,
.swp-wheel-container[data-wheel-type="nine_squares"]:not([data-display-mode="popup"]) .swp-form-column {
    background: #fff;
    border: 1px solid #e9edf3;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    padding: clamp(14px, 2vw, 20px);
}

/* Popup: no second card on columns; subtle divider between wheel + form on wide screens */
.swp-wheel-container[data-wheel-type="nine_squares"][data-display-mode="popup"] .swp-wheel-column,
.swp-wheel-container[data-wheel-type="nine_squares"][data-display-mode="popup"] .swp-form-column {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

@media (min-width: 769px) {
    .swp-wheel-container[data-wheel-type="nine_squares"][data-display-mode="popup"] .swp-wheel-column {
        padding-right: clamp(16px, 2.8vw, 28px);
        margin-right: clamp(6px, 1.2vw, 12px);
        border-right: 1px solid rgba(15, 23, 42, 0.08);
    }
}

/* Wheel section: stack canvas + hint; inset panel only in popup (inline stays flat inside column card) */
.swp-wheel-container[data-wheel-type="nine_squares"] .swp-wheel-section {
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: 0;
}

.swp-wheel-container[data-wheel-type="nine_squares"][data-display-mode="popup"] .swp-wheel-section {
    background: rgba(246, 248, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 12px;
    padding: clamp(10px, 1.6vw, 14px);
}

.swp-wheel-container[data-wheel-type="nine_squares"]:not([data-display-mode="popup"]) .swp-wheel-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.swp-wheel-container[data-wheel-type="nine_squares"] .swp-canvas {
    width: min(100%, 460px) !important;
}

/* Ring layout: clip LuckyGrid’s square block to a true circle + thick outer ring (dial reference) */
.swp-wheel-container[data-wheel-type="nine_squares"][data-radial-ring="1"] .swp-canvas {
    width: min(100%, 460px) !important;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.98),
        0 0 0 11px #4a62c4,
        0 12px 36px rgba(22, 40, 110, 0.22);
    clip-path: circle(50% at 50% 50%);
}

/* Circle Style preset: soft lavender lip + periwinkle rim (reference mockup) */
.swp-wheel-container[data-wheel-type="nine_squares"][data-radial-ring="1"][data-active-preset="circleStyle"] .swp-canvas {
    box-shadow:
        0 0 0 5px #e8e4f4,
        0 0 0 14px #9eb6f0,
        0 16px 44px rgba(80, 100, 170, 0.22);
}

.swp-wheel-container[data-wheel-type="nine_squares"][data-radial-ring="1"] .swp-canvas canvas {
    display: block !important;
}

@media (min-width: 769px) {
    .swp-wheel-container[data-wheel-type="nine_squares"][data-radial-ring="1"] .swp-canvas[data-max-width] {
        max-width: calc(var(--swp-canvas-max-width, 460) * 1px) !important;
        width: min(100%, calc(var(--swp-canvas-max-width, 460) * 1px)) !important;
    }
}

.swp-wheel-container[data-wheel-type="nine_squares"] .swp-wheel-section.is-spinning {
    box-shadow: 0 0 0 2px rgba(242, 65, 1, 0.22);
}

/* External Spin: WP-style primary CTA (horizontal warm gradient, like Publish/Update) */
.swp-grid-external-spin {
    --swp-external-spin-mid: #e45912;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: calc(var(--swp-canvas-max-width, 460) * 1px);
    margin: 12px auto 0;
    padding: 0 22px;
    min-height: 38px;
    box-sizing: border-box;
    appearance: none;
    border: 1px solid rgba(120, 42, 12, 0.42);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.18);
    background: linear-gradient(
        90deg,
        #b91c1c 0%,
        var(--swp-external-spin-mid) 44%,
        #f6ad3a 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 1px 0 rgba(200, 85, 30, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.11),
        0 4px 10px rgba(190, 75, 25, 0.18);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.swp-grid-external-spin:hover {
    filter: brightness(1.06) saturate(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 1px 0 rgba(200, 85, 30, 0.4),
        0 3px 8px rgba(0, 0, 0, 0.12),
        0 6px 14px rgba(200, 80, 25, 0.22);
}

.swp-grid-external-spin:active:not(:disabled) {
    transform: translateY(1px);
    filter: brightness(0.97);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.08);
}

.swp-grid-external-spin:disabled {
    cursor: not-allowed;
    opacity: 0.72;
    filter: grayscale(0.08) brightness(0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.swp-wheel-container[data-active-preset="grid2x3"][data-wheel-type="nine_squares"] .swp-canvas canvas {
    cursor: default;
}

.swp-grid-play-hint {
    margin: 12px auto 0;
    padding: 10px 14px;
    max-width: 28rem;
    font-size: 13px;
    line-height: 1.5;
    color: #5a6570;
    font-weight: 500;
    text-align: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    border: 0;
    border-left: 3px solid rgba(242, 65, 1, 0.5);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

@media (max-width: 768px) {
    .swp-wheel-container[data-wheel-type="nine_squares"]:not([data-display-mode="popup"]) .swp-wheel-column,
    .swp-wheel-container[data-wheel-type="nine_squares"]:not([data-display-mode="popup"]) .swp-form-column {
        border-radius: 14px;
        padding: 14px;
    }

    .swp-wheel-container[data-wheel-type="nine_squares"][data-display-mode="popup"] .swp-wheel-column {
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
        padding-bottom: 14px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .swp-grid-play-hint {
        font-size: 12px;
        max-width: 100%;
        margin-top: 10px;
    }
}

.swp-canvas {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
}

/* Apply max-width only on desktop devices */
@media (min-width: 769px) {
    .swp-canvas[data-max-width] {
        max-width: calc(var(--swp-canvas-max-width, 460) * 1px);
    }
}

.swp-canvas canvas {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-drag: none;
    pointer-events: auto;
    display: block !important;
    box-sizing: border-box !important;
    transform: scale(1) !important;
}

/* Alert Container */
.swp-alert-container {
    padding: 12px 15px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 6px;
    margin-bottom: 20px;
    display: none;
    animation: slideDown 0.3s ease;
}

.swp-alert-container.error {
    background: #fee;
    color: #c33;
    border-left: 4px solid #c33;
    border-right: 4px solid #c33;
}

.swp-alert-container.success {
    background: #efe;
    color: #3c3;
    border-left: 4px solid #3c3;
    border-right: 4px solid #3c3;
}

.swp-alert-container.warning {
    background: #fffbeb;
    color: #f59e0b;
    border-left: 4px solid #f59e0b;
    border-right: 4px solid #f59e0b;
}

.swp-alert-container.info {
    background: #eff6ff;
    color: #3b82f6;
    border-left: 4px solid #3b82f6;
    border-right: 4px solid #3b82f6;
}

/* Result Section */
.swp-result-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.swp-result-content {
    /* background: rgba(255, 255, 255, 0.102); */
    border-radius: 12px;
    padding: 40px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    position: relative;
    animation: slideUp 0.4s ease;
    backdrop-filter: blur(15px);
    border: 1px solid #ffffff12;
    min-height: 250px;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.swp-result-icon {
    margin-bottom: 20px;
    line-height: 1;
}

.swp-result-icon.win::before {
    /* Party Popper with Confetti icon */
    content: "";
    display: inline-block;
    width: 100px;
    height: 100px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path fill="%23FCD031" d="M386.151,428.052l-305.565,94.9c-13.25,4.113-25.682-8.319-21.569-21.569l94.9-305.565L386.151,428.052z"/><ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -134.0836 285.3702)" fill="%23FFDA64" cx="277.43" cy="304.538" rx="57.03" ry="167.017"/><path fill="%23765246" d="M384.81,411.91c-8.718,8.707-28.598,6.282-54.577-6.671c-27.309-13.619-58.343-37.111-87.371-66.139c-29.028-29.018-52.51-60.051-66.129-87.371c-12.954-25.969-15.389-45.86-6.681-54.567c8.707-8.707,28.598-6.272,54.577,6.681c27.309,13.619,58.343,37.101,87.371,66.129s52.51,60.062,66.129,87.371C391.082,383.312,393.518,403.203,384.81,411.91z"/><path fill="%232252FF" d="M342.298,441.671l-59.142,18.366c-13.123-4.689-26.028-10.324-38.69-16.879c-27.56-14.276-54.078-33.016-78.815-55.691c-4.015-3.681-8.411-7.869-13.089-12.547c-12.092-12.092-26.034-27.462-39.998-45.943l12.156-39.14c22.203,33.379,46.174,58.226,62.955,73.601C234.909,406.743,286.867,433.018,342.298,441.671z"/><path fill="%232252FF" d="M243.66,472.308l-46.629,14.483c-26.662-14.114-52.321-32.399-76.315-54.389c-4.015-3.681-8.411-7.869-13.089-12.547c-5.519-5.519-11.412-11.712-17.525-18.573l11.447-36.864c15.174,18.792,29.836,33.546,41.191,43.956C174.385,437.391,208.15,458.758,243.66,472.308z"/><path fill="%232252FF" d="M159.228,498.531l-40.926,12.709c-14.633-10.035-28.851-21.373-42.521-33.903c-2.281-2.097-4.684-4.35-7.195-6.769l10.928-35.182c6.648,6.948,12.853,12.933,18.291,17.922C117.49,471.357,137.993,486.445,159.228,498.531z"/><path fill="%23F2112D" d="M236,234.548l-14.47-14.47c22.979-22.979,36.112-52.507,39.034-87.764c2.223-26.822-2.616-47.057-2.665-47.258l19.867-4.906c0.23,0.93,5.618,23.119,3.254,53.098C277.867,173.22,262.3,208.249,236,234.548z"/><path fill="%232252FF" d="M351.038,364.056l-14.47-14.47c28.335-28.335,68.424-42.587,115.934-41.216c35.269,1.018,62.101,10.175,63.226,10.565l-6.694,19.338c-0.25-0.086-25.448-8.628-57.699-9.467C409.269,327.714,375.521,339.573,351.038,364.056z"/><path fill="%23FF4901" d="M280.236,213.886c7.416-12.329,17.167-15.548,24.287-17.899c6.026-1.989,9.663-3.19,13.167-9.014c3.503-5.824,2.859-9.6,1.792-15.855c-1.26-7.391-2.986-17.514,4.429-29.843c7.416-12.33,17.168-15.55,24.288-17.901c6.027-1.99,9.664-3.191,13.169-9.016c3.504-5.826,2.86-9.602,1.794-15.858c-1.26-7.392-2.986-17.515,4.43-29.845l17.536,10.548c-3.504,5.826-2.86,9.602-1.794,15.858c1.26,7.392,2.986,17.515-4.43,29.845c-7.417,12.329-17.168,15.549-24.288,17.9c-6.027,1.99-9.665,3.191-13.169,9.017c-3.503,5.823-2.859,9.6-1.793,15.854c1.261,7.392,2.987,17.514-4.429,29.844c-7.416,12.329-17.167,15.548-24.287,17.899c-6.026,1.989-9.663,3.19-13.167,9.014L280.236,213.886z"/><path fill="%237416EF" d="M364.602,268.732l-10.027-17.839c12.925-7.264,23.321-5.175,30.911-3.65c6.576,1.322,10.545,2.12,16.852-1.425c6.307-3.544,7.689-7.35,9.977-13.654c2.643-7.278,6.262-17.244,19.186-24.509c12.926-7.265,23.323-5.175,30.913-3.65c6.577,1.321,10.546,2.119,16.855-1.427c6.308-3.546,7.691-7.352,9.981-13.656c2.643-7.278,6.263-17.245,19.188-24.51l10.027,17.84c-6.308,3.546-7.69,7.351-9.98,13.656c-2.643,7.278-6.263,17.245-19.189,24.51c-12.926,7.265-23.322,5.175-30.913,3.65c-6.576-1.322-10.546-2.12-16.854,1.426c-6.307,3.544-7.689,7.35-9.977,13.654c-2.643,7.278-6.262,17.244-19.186,24.509c-12.925,7.264-23.321,5.174-30.912,3.649C374.878,265.985,370.909,265.187,364.602,268.732z"/><circle fill="%237416EF" cx="494.293" cy="259.871" r="10.232"/><circle fill="%23F2112D" cx="448.712" cy="379.25" r="10.232"/><circle fill="%232252FF" cx="542.768" cy="292.429" r="10.232"/><circle fill="%23FF4901" cx="459.565" cy="151.345" r="10.232"/><circle fill="%232252FF" cx="309.075" cy="76.1" r="10.232"/><circle fill="%23FCD031" cx="379.979" cy="164.368" r="10.232"/><circle fill="%23FF4901" cx="302.563" cy="290.982" r="10.232"/><circle fill="%237416EF" cx="195.484" cy="124.575" r="10.232"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.swp-result-icon.lose::before {
    /* Smiley face icon as SVG background */
    content: "";
    display: inline-block;
    width: 65px;
    height: 65px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FCD031"><circle cx="12" cy="12" r="10" fill="%23FCD031"/><circle cx="8.5" cy="9.5" r="1.5" fill="white"/><circle cx="15.5" cy="9.5" r="1.5" fill="white"/><path d="M8 13c0 2.21 1.79 4 4 4s4-1.79 4-4" stroke="white" stroke-width="1.5" stroke-linecap="round" fill="none"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.swp-result-title {
    font-size: 32px;
    font-weight: bold;
    margin: 0 0 15px;
    color: #333;
}

.swp-result-title.win {
    background: linear-gradient(35deg, #f7994c, #f24101);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.swp-result-title.lose {
    color: #f0b849;
}

.swp-result-message {
    font-size: 16px;
    color: #ababab;
    margin: 0;
    line-height: 1.6;
}

.swp-result-prize {
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin: 30px 0 0;
    position: relative;
}

.swp-result-prize::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 12px;
    background: linear-gradient(35deg, #f24101, #f7994c);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

.swp-result-prize h4 {
    margin: 0;
    font-size: 16px;
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: #2f3030;
    color: #fff;
    padding: 0 10px;
    font-weight: 500;
    z-index: 99999;
}

.swp-result-prize .prize-label {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.swp-result-prize .prize-code {
    font-size: 16px;
    font-family: 'Courier New', monospace;
    background: rgb(255 255 255 / 14%);
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 18px;
    display: inline-block;
    border: 1px dashed #9b9fa6;
    line-height: 1;
}

/* Participant Information Section */
.swp-participant-info {
    margin-top: 25px;
}

.swp-participant-details {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    text-align: left;
}

.swp-participant-header {
    font-size: 14px;
    font-weight: 600;
    color: #b8b8b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.swp-participant-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: #e0e0e0;
    font-size: 14px;
}

.swp-participant-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.swp-participant-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.swp-participant-label {
    font-weight: 600;
    color: #b8b8b8;
    min-width: 60px;
}

.swp-participant-value {
    color: #ffffff;
    word-break: break-word;
    flex: 1;
}

.swp-close-btn {
    background: #ecd5d526;
    color: #afafaf;
    border: none;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    margin: 20px;
    transition: background 0.3s ease;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
}

.swp-close-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}

.swp-close-btn:hover {
    color: #fff;
    background: #555;
}



/* Confetti Canvas */
.swp-confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999989999999;
    max-width: unset !important;
    box-sizing: border-box;
}

/* Verified Badge */
.swp-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    animation: slideInBadge 0.3s ease-out;
}

.swp-verified-badge svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@keyframes slideInBadge {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Readonly verified field styling */
.swp-form-control[readonly] {
    background-color: #f0f0f0 !important;
    cursor: not-allowed;
    opacity: 0.8;
}

/* Loading State */
.swp-loading {
    text-align: center;
    padding: 40px;
}


/* Spin Button Loader */
.swp-canvas-overlay {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 999998;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp-canvas-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: wait;
}

.swp-canvas-overlay-inner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.swp-canvas-overlay-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(242, 65, 1, 0.2);
    border-top-color: #f24101;
    border-radius: 50%;
    flex-shrink: 0;
    animation: swpSpinLoader 0.75s linear infinite;
}

.swp-canvas-overlay-text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.02em;
}

@keyframes swpSpinLoader {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .swp-canvas-overlay {
        transition: none;
    }

    .swp-canvas-overlay-spinner {
        animation: none;
        border-top-color: rgba(242, 65, 1, 0.45);
    }
}

/* Error Messages */

.swp-success-message {
    background: #46b450;
    color: #fff;
    padding: 12px 20px;
    border-radius: 6px;
    margin: 15px 0;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .swp-wheel-wrapper {
        flex-direction: column;
        gap: 15px;
    }


    .swp-form-title {
        font-size: 20px;
    }

    .swp-form-description {
        font-size: 14px;
    }

    .swp-wheel-column {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .swp-wheel-section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        padding: 0 5px;
    }

    .swp-canvas {
        max-width: 100%;
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .swp-canvas canvas {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .swp-result-content {
        padding: 30px 20px;
    }

    .swp-result-title {
        font-size: 24px;
    }

    .swp-result-message {
        font-size: 16px;
    }
}

/* Extra small mobile devices */
@media screen and (max-width: 480px) {
    .swp-wheel-section {
        padding: 0 10px;
        overflow: hidden;
    }

    .swp-canvas {
        width: 100% !important;
        height: auto !important;
        max-width: calc(100vw - 60px);
        /* Account for padding */
        box-sizing: border-box;
    }

    .swp-canvas canvas {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        transform: none !important;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 1440px) {

    .swp-canvas canvas {
        transform: none !important;
    }

}

/* ==========================================================================
   Participant Limit Styles
   ========================================================================== */

/* Limit Reached Message */
.swp-limit-reached-message {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.swp-limit-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.swp-limit-icon .dashicons {
    font-size: 24px;
    color: white;
}

.swp-limit-content h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

.swp-limit-content p {
    margin: 0 0 12px 0;
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.4;
}

.swp-limit-stats {
    display: flex;
    gap: 15px;
    font-size: 13px;
    font-weight: 500;
}

.swp-current-participants {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 6px;
}

.swp-limit-info {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 6px;
}

/* Participant Counter */
.swp-participant-counter {
    color: #070606;
    margin-bottom: 20px;
}

.swp-counter-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
}

.swp-counter-label {
    opacity: 0.9;
}

.swp-counter-current {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-weight: 600;
}

.swp-counter-separator {
    opacity: 0.7;
}

.swp-counter-limit {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-weight: 600;
}

.swp-counter-progress {
    margin-top: 8px;
}

.swp-progress-bar {
    background: #eff5fa;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

.swp-progress-fill {
    background: linear-gradient(35deg, #f24101, #f7994c);
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Disable form when limit reached */
.swp-entry-form.limit-reached .swp-form-group {
    opacity: 0.5;
    pointer-events: none;
}

.swp-entry-form.limit-reached .swp-spin-button {
    background: #ccc !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Mobile adjustments for participant limit */
@media (max-width: 768px) {
    .swp-limit-reached-message {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .swp-limit-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    .swp-counter-info {
        justify-content: center;
    }
}