/**
 * Frontend Spin Wheel Stylesheet
 *
 * COMMIT: Style the public-facing spin wheel widget
 * WHAT:   Theme-adaptive styles using CSS custom properties that inherit
 *         from the active WordPress theme. Fallbacks ensure it looks great
 *         even when no theme variables are present.
 * WHY:    var(--wp--preset--color--primary) pulls from theme.json so the
 *         wheel automatically matches the site's colour scheme.
 *
 * Structure:
 *   1. CSS Variables (theming)
 *   2. Widget Wrapper
 *   3. Header (title/subtitle)
 *   4. Entry Form
 *   5. Canvas & Pointer
 *   6. Spin Button
 *   7. Result Overlay & Popup
 *   8. Code Display
 *   9. Confetti
 *  10. Responsive
 *
 * @package SpinWheel
 */

/* ─────────────────────────────────────────────
   1. CSS VARIABLES
   LEARNING: We read from WP theme.json variables where available,
   falling back to neutral values if the theme doesn't define them.
───────────────────────────────────────────── */

.spin-wheel-wrapper {
    --sw-primary:    var(--wp--preset--color--primary,  #2563eb);
    --sw-secondary:  var(--wp--preset--color--secondary, #7c3aed);
    --sw-text:       var(--wp--preset--color--foreground, #1a1a1a);
    --sw-bg:         var(--wp--preset--color--background, #ffffff);
    --sw-surface:    var(--wp--preset--color--base,      #f8f9fa);
    --sw-border:     #e2e8f0;
    --sw-radius:     16px;
    --sw-shadow:     0 8px 40px rgba(0,0,0,.12);
    --sw-font:       var(--wp--preset--font-family--body, inherit);
}

/* ─────────────────────────────────────────────
   2. WIDGET WRAPPER
───────────────────────────────────────────── */

.spin-wheel-wrapper {
    font-family:    var(--sw-font);
    color:          var(--sw-text);
    background:     var(--sw-bg);
    max-width:      520px;
    margin:         40px auto;
    padding:        36px 28px 40px;
    border-radius:  var(--sw-radius);
    box-shadow:     var(--sw-shadow);
    border:         1px solid var(--sw-border);
    text-align:     center;
    position:       relative;
    overflow:       hidden; /* contain confetti */
}

/* Subtle gradient top accent bar */
.spin-wheel-wrapper::before {
    content:         '';
    position:        absolute;
    top: 0; left: 0; right: 0;
    height:          4px;
    background:      linear-gradient(90deg, var(--sw-primary), var(--sw-secondary));
}

/* ─────────────────────────────────────────────
   3. HEADER
───────────────────────────────────────────── */

.spin-wheel-header {
    margin-bottom: 24px;
}

.spin-wheel-title {
    font-size:    clamp(22px, 4vw, 30px);
    font-weight:  700;
    line-height:  1.2;
    margin:       0 0 8px;
    color:        var(--sw-text);
    /* Gradient text when supported */
    background:   linear-gradient(135deg, var(--sw-primary), var(--sw-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support gradient text */
@supports not (-webkit-background-clip: text) {
    .spin-wheel-title {
        color: var(--sw-primary);
        -webkit-text-fill-color: initial;
    }
}

.spin-wheel-subtitle {
    font-size:  15px;
    color:      #64748b;
    margin:     0;
}

/* ─────────────────────────────────────────────
   4. ENTRY FORM
───────────────────────────────────────────── */

.spin-wheel-form-wrap {
    margin-bottom: 20px;
}

.spin-wheel-fields {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.spin-wheel-input {
    width:         100%;
    padding:       12px 16px;
    border:        1.5px solid var(--sw-border);
    border-radius: 10px;
    font-size:     15px;
    font-family:   inherit;
    color:         var(--sw-text);
    background:    var(--sw-surface);
    box-sizing:    border-box;
    transition:    border-color .2s, box-shadow .2s;
    outline:       none;
}

.spin-wheel-input:focus {
    border-color: var(--sw-primary);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}

.spin-wheel-input::placeholder {
    color: #a0aec0;
}

/* ─────────────────────────────────────────────
   5. CANVAS & POINTER
───────────────────────────────────────────── */

.spin-wheel-canvas-wrap {
    position:      relative;
    display:       inline-block;
    margin-bottom: 24px;
}

.spin-wheel-canvas {
    display:       block;
    max-width:     100%;
    height:        auto;
    border-radius: 50%;
    /* Drop shadow gives depth to the wheel */
    filter:        drop-shadow(0 6px 20px rgba(0,0,0,.18));
    transition:    filter .3s;
}

.spin-wheel-canvas:hover {
    filter: drop-shadow(0 8px 28px rgba(0,0,0,.25));
}

/* Pointer triangle — points down toward the wheel from above */
.spin-wheel-pointer {
    position:   absolute;
    top:        -14px;
    left:       50%;
    transform:  translateX(-50%);
    width:      28px;
    height:     28px;
    color:      var(--sw-pointer-color, #e74c3c); /* Overridden by JS */
    z-index:    10;
    filter:     drop-shadow(0 2px 4px rgba(0,0,0,.3));
    /* Pulse animation to draw the eye */
    animation:  sw-pointer-pulse 2s ease-in-out infinite;
}

@keyframes sw-pointer-pulse {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(-4px); }
}

/* ─────────────────────────────────────────────
   6. SPIN BUTTON
───────────────────────────────────────────── */

.spin-wheel-button-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
}

.spin-wheel-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         14px 44px;
    font-size:       17px;
    font-weight:     700;
    font-family:     inherit;
    color:           #fff;
    background:      linear-gradient(135deg, var(--sw-primary), var(--sw-secondary));
    border:          none;
    border-radius:   50px;
    cursor:          pointer;
    box-shadow:      0 4px 18px rgba(37,99,235,.35);
    transition:      transform .15s, box-shadow .15s, opacity .15s;
    letter-spacing:  .5px;
    min-width:       180px;
}

.spin-wheel-btn:hover:not(:disabled) {
    transform:  translateY(-2px);
    box-shadow: 0 6px 24px rgba(37,99,235,.45);
}

.spin-wheel-btn:active:not(:disabled) {
    transform:  translateY(0);
    box-shadow: 0 2px 10px rgba(37,99,235,.3);
}

.spin-wheel-btn:disabled {
    opacity: .65;
    cursor:  not-allowed;
}

/* Spinning state: pulsing glow */
.spin-wheel-btn.is-spinning {
    animation: sw-btn-pulse 1s ease-in-out infinite;
}

@keyframes sw-btn-pulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(37,99,235,.35); }
    50%       { box-shadow: 0 4px 30px rgba(37,99,235,.6); }
}

.spin-wheel-error-msg {
    color:     #dc2626;
    font-size: 14px;
    margin:    4px 0 0;
    min-height: 20px;
}

/* ─────────────────────────────────────────────
   7. RESULT OVERLAY & POPUP
───────────────────────────────────────────── */

.spin-wheel-overlay {
    display:         none;
    position:        fixed;
    inset:           0;  /* top/right/bottom/left: 0 */
    background:      rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    z-index:         99999;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    /* Use flex when shown */
}

.spin-wheel-overlay.is-open {
    display: flex;
    animation: sw-overlay-in .25s ease;
}

@keyframes sw-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.spin-wheel-popup {
    background:    #fff;
    border-radius: 20px;
    padding:       40px 36px;
    max-width:     460px;
    width:         100%;
    text-align:    center;
    position:      relative;
    box-shadow:    0 20px 60px rgba(0,0,0,.2);
    animation:     sw-popup-in .3s cubic-bezier(.34,1.56,.64,1);
    overflow:      hidden;
}

@keyframes sw-popup-in {
    from { opacity: 0; transform: scale(.85) translateY(20px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Top gradient bar on popup */
.spin-wheel-popup::before {
    content:    '';
    position:   absolute;
    top: 0; left: 0; right: 0;
    height:     5px;
    background: linear-gradient(90deg, var(--sw-primary), var(--sw-secondary));
}

.spin-wheel-popup-close {
    position:    absolute;
    top:         16px;
    right:       16px;
    background:  none;
    border:      none;
    font-size:   22px;
    color:       #94a3b8;
    cursor:      pointer;
    line-height: 1;
    padding:     4px;
    transition:  color .2s;
}

.spin-wheel-popup-close:hover {
    color: #1a1a1a;
}

.spin-wheel-popup-icon {
    font-size:     52px;
    line-height:   1;
    margin-bottom: 12px;
    animation:     sw-bounce .6s cubic-bezier(.34,1.56,.64,1) .2s both;
}

@keyframes sw-bounce {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

.spin-wheel-popup-title {
    font-size:     26px;
    font-weight:   700;
    margin:        0 0 12px;
    color:         var(--sw-text);
}

.spin-wheel-popup-prize {
    font-size:   18px;
    color:       var(--sw-primary);
    font-weight: 600;
    margin:      0 0 20px;
}

.spin-wheel-popup-email-note {
    font-size: 13px;
    color:     #64748b;
    margin:    16px 0 20px;
}

.spin-wheel-popup-dismiss {
    display:       inline-flex;
    align-items:   center;
    padding:       10px 32px;
    background:    var(--sw-surface);
    border:        1.5px solid var(--sw-border);
    border-radius: 50px;
    font-size:     15px;
    font-weight:   600;
    color:         var(--sw-text);
    cursor:        pointer;
    font-family:   inherit;
    transition:    background .2s, border-color .2s;
}

.spin-wheel-popup-dismiss:hover {
    background:    var(--sw-border);
}

/* ─────────────────────────────────────────────
   8. CODE DISPLAY
───────────────────────────────────────────── */

.spin-wheel-popup-code-wrap {
    margin: 16px 0;
}

.spin-wheel-popup-code-label {
    font-size: 13px;
    color:     #64748b;
    margin:    0 0 8px;
}

.spin-wheel-popup-code {
    display:       inline-flex;
    align-items:   center;
    gap:           10px;
    background:    #eff6ff;
    border:        2px dashed #3b82f6;
    border-radius: 10px;
    padding:       14px 20px;
}

.spin-wheel-code-text {
    font-size:     24px;
    font-weight:   800;
    letter-spacing: 4px;
    color:         #1d4ed8;
    font-family:   monospace;
}

.spin-wheel-copy-btn {
    background:    none;
    border:        none;
    font-size:     20px;
    cursor:        pointer;
    padding:       0;
    transition:    transform .15s;
}

.spin-wheel-copy-btn:hover {
    transform: scale(1.2);
}

/* ─────────────────────────────────────────────
   9. CONFETTI CANVAS
───────────────────────────────────────────── */

.spin-wheel-confetti-container {
    position: absolute;
    inset:    0;
    pointer-events: none;
    overflow: hidden;
    z-index:  0;
}

/* ─────────────────────────────────────────────
   10. ADMIN NOTICE (no segments)
───────────────────────────────────────────── */

.spin-wheel-notice {
    background: #fff3cd;
    border:     1px solid #ffc107;
    border-radius: 8px;
    padding:    16px 20px;
    color:      #856404;
    font-size:  15px;
}

.spin-wheel-notice a {
    color: #0d6efd;
    font-weight: 600;
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */

@media (max-width: 520px) {
    .spin-wheel-wrapper {
        padding:       24px 16px 28px;
        margin:        20px 0;
        border-radius: 12px;
    }

    .spin-wheel-popup {
        padding: 32px 20px;
    }

    .spin-wheel-code-text {
        font-size:      18px;
        letter-spacing: 2px;
    }
}