/* Spooky Halloween Theme - Available August-October */
.theme-spooky {
    --primary-color: #ff6600;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0606 20%, #2d0f0a 40%, #1a0606 60%, #0f0f0f 80%, #000000 100%) !important;
    color: #f5f5dc !important;
    min-height: 100vh !important;
    position: relative;
}

/* Apply background to body when theme is active */
body.theme-spooky {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0606 20%, #2d0f0a 40%, #1a0606 60%, #0f0f0f 80%, #000000 100%) !important;
    color: #f5f5dc !important;
    min-height: 100vh !important;
    position: relative;
}

/* Force page background to show gradient */
.theme-spooky,
.theme-spooky body,
.theme-spooky html {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0606 20%, #2d0f0a 40%, #1a0606 60%, #0f0f0f 80%, #000000 100%) !important;
    background-attachment: fixed !important;
}

/* Halloween floating elements overlay - Large Jack-o'-lanterns */
.theme-spooky::before {
    content: '🎃';
    position: fixed;
    top: -100px;
    left: -100px;
    width: 60px;
    height: 60px;
    font-size: 48px;
    line-height: 1;
    overflow: hidden;
    pointer-events: none;
    z-index: -10;
    opacity: 0.7;
    animation: pumpkinFloat1 20s ease-in-out infinite;
}

/* Additional floating layer - Large Ghosts */
.theme-spooky::after {
    content: '👻';
    position: fixed;
    top: -100px;
    right: -100px;
    width: 60px;
    height: 60px;
    font-size: 44px;
    line-height: 1;
    overflow: hidden;
    pointer-events: none;
    z-index: -10;
    opacity: 0.6;
    animation: ghostFloat1 25s ease-in-out infinite;
}

/* Additional questions section styling */
.theme-spooky .additional-question-section .card,
.theme-spooky .additional-question-item,
.theme-spooky #newAdditionalQuestionsContainer .card {
    background: rgba(20, 10, 8, 0.95) !important;
    border: 3px solid #ff6600 !important;
    box-shadow: 0 0 25px rgba(255, 102, 0, 0.4), inset 0 0 15px rgba(255, 69, 0, 0.2) !important;
    border-radius: 15px !important;
    backdrop-filter: blur(10px);
}

.theme-spooky .additional-question-section .card-body,
.theme-spooky .additional-question-item .card-body {
    background: transparent !important;
    color: #f5f5dc !important;
}

.theme-spooky .additional-question-section .form-label,
.theme-spooky .additional-question-section .fw-semibold,
.theme-spooky .additional-question-section h6 {
    color: #ff6600 !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) !important;
}

.theme-spooky .additional-question-section .additional-question-header h6,
.theme-spooky .additional-question-section .additional-question-title {
    color: #ff6600 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(255, 102, 0, 0.4) !important;
}

.theme-spooky .additional-question-section .additional-question-body .form-label,
.theme-spooky .additional-question-section .additional-question-body .fw-semibold {
    color: #ff6600 !important;
    font-weight: 700 !important;
}

.theme-spooky .additional-question-section .additional-question-body .form-check-label {
    color: #f5f5dc !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Fix vertical alignment of larger radio/checkbox inputs everywhere (excludes toggle switches) */
.theme-spooky .form-check:not(.form-switch) {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.theme-spooky .form-check:not(.form-switch) .form-check-input {
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}

.theme-spooky .form-check:not(.form-switch) .form-check-label {
    margin-bottom: 0 !important;
}
/* Preserve inline-block display when Bootstrap d-inline-block is used (e.g. Silent Save checkbox) */
.theme-spooky .form-check.d-inline-block:not(.form-switch) {
    display: inline-flex !important;
}

.theme-spooky .additional-question-section .text-muted,
.theme-spooky .additional-question-item .text-muted {
    color: #f5deb3 !important;
    font-weight: 500 !important;
}

/* Additional floating pumpkins and ghosts using pseudo-elements on containers */
.theme-spooky .container::before {
    content: '🎃';
    position: fixed;
    top: 50vh;
    left: -50px;
    width: 50px;
    height: 50px;
    font-size: 40px;
    line-height: 1;
    overflow: hidden;
    pointer-events: none;
    z-index: -10;
    opacity: 0.5;
    animation: pumpkinFloat2 18s ease-in-out infinite 3s;
}

.theme-spooky .container::after {
    content: '👻';
    position: fixed;
    bottom: 20vh;
    right: -50px;
    width: 50px;
    height: 50px;
    font-size: 38px;
    line-height: 1;
    overflow: hidden;
    pointer-events: none;
    z-index: -10;
    opacity: 0.4;
    animation: ghostFloat2 22s ease-in-out infinite 7s;
}

/* Constrained animations for container pseudo-elements */
@keyframes pumpkinFloat2 {
    0% {
        transform: translate(-10vw, 0) rotate(0deg) scale(0.9);
        opacity: 0;
    }
    20% {
        opacity: 0.5;
        transform: translate(20vw, -10vh) rotate(25deg) scale(1.1);
    }
    50% {
        transform: translate(50vw, 5vh) rotate(-15deg) scale(0.8);
    }
    80% {
        transform: translate(80vw, -5vh) rotate(35deg) scale(1.2);
    }
    100% {
        transform: translate(105vw, -15vh) rotate(60deg) scale(0.7);
        opacity: 0;
    }
}

@keyframes ghostFloat2 {
    0% {
        transform: translate(10vw, 0) rotate(90deg) scale(0.7);
        opacity: 0;
    }
    25% {
        opacity: 0.4;
        transform: translate(-20vw, 10vh) rotate(75deg) scale(1.1);
    }
    50% {
        transform: translate(-40vw, 5vh) rotate(105deg) scale(0.9);
    }
    75% {
        transform: translate(-60vw, 15vh) rotate(60deg) scale(1.3);
    }
    100% {
        transform: translate(-10vw, 25vh) rotate(130deg) scale(0.5);
        opacity: 0;
    }
}

/* Make sure cards and content stay above the floating elements */
.theme-spooky .card {
    position: relative;
    z-index: 100;
}

.theme-spooky .card {
    background: rgba(20, 10, 8, 0.95) !important;
    border: 3px solid #ff6600 !important;
    box-shadow: 0 0 25px rgba(255, 102, 0, 0.4), inset 0 0 15px rgba(255, 69, 0, 0.2) !important;
    border-radius: 15px !important;
    backdrop-filter: blur(10px);
}

.theme-spooky .card-body {
    background: transparent !important;
}

/* Form inputs with spooky styling */
.theme-spooky .form-control,
.theme-spooky .form-select,
.theme-spooky textarea {
    background: #2d0f0a !important;
    border: 2px solid #8b4513 !important;
    color: #f5f5dc !important;
    border-radius: 8px !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Smaller font size for date/time inputs to prevent overflow */
.theme-spooky .date-row-input,
.theme-spooky .time-row-input,
.theme-spooky .timezone-row-select,
.theme-spooky .duration-row-select,
.theme-spooky input[type="date"],
.theme-spooky input[type="time"],
.theme-spooky #futurePeriodType,
.theme-spooky #hideOptionLeadHoursContainer {
    font-size: 14px !important;
}

/* Compact inline selects need a smaller border-radius to avoid clipping text/arrow */
.theme-spooky #futurePeriodType,
.theme-spooky #hideOptionLeadHoursContainer {
    border-radius: 6px !important;
}

/* Specific styling for form title input */
.theme-spooky #formTitle,
.theme-spooky input[name="title"] {
    background: #2d0f0a !important;
    border: 2px solid #8b4513 !important;
    color: #f5f5dc !important;
    border-radius: 8px !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7) !important;
    font-weight: 600 !important;
}

/* Ensure option inputs in form preview are visible */
.theme-spooky .option-input,
.theme-spooky input[name="options[]"],
.theme-spooky input[name="field_labels[]"],
.theme-spooky input[name="second_question_options[]"],
.theme-spooky .additional-question-item input,
.theme-spooky .additional-question-section input[type="text"],
.theme-spooky .additional-question-body input[type="text"],
.theme-spooky input[name="creator_email"],
.theme-spooky input[type="email"],
.theme-spooky input[name="name"],
.theme-spooky input[id="responder_name"],
.theme-spooky input[id="responder_email"],
.theme-spooky input[name="comment_help_text"],
.theme-spooky input[name="name_field_label"],
.theme-spooky input[name="email_field_label"] {
    background: #2d0f0a !important;
    border: 2px solid #8b4513 !important;
    color: #f5f5dc !important;
    border-radius: 8px !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7) !important;
    font-weight: 500 !important;
}

/* Editable inline fields visibility */
.theme-spooky .editable-field,
.theme-spooky .editable-field-inline {
    background: #2d0f0a !important;
    color: #f5f5dc !important;
    border-color: #8b4513 !important;
}

.theme-spooky .editable-field:hover,
.theme-spooky .editable-field-inline:hover {
    background: #3d1f1a !important;
    border-color: #ff6600 !important;
}

.theme-spooky .editable-field:focus,
.theme-spooky .editable-field-inline:focus {
    background: #3d1f1a !important;
    border-color: #ff6600 !important;
    color: #f5f5dc !important;
}

.theme-spooky .form-control:focus,
.theme-spooky .form-select:focus,
.theme-spooky textarea:focus {
    border-color: #ff6600 !important;
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.6), inset 0 2px 8px rgba(0, 0, 0, 0.7) !important;
    background: #2d0f0a !important;
    color: #f5f5dc !important;
    outline: none !important;
}

/* Specific focus styling for form title and additional question inputs */
.theme-spooky #formTitle:focus,
.theme-spooky input[name="title"]:focus,
.theme-spooky input[name*="additional_question"]:focus,
.theme-spooky .option-input:focus {
    border-color: #ff6600 !important;
    box-shadow: 0 0 25px rgba(255, 102, 0, 0.8), inset 0 2px 8px rgba(0, 0, 0, 0.7) !important;
    background: #2d0f0a !important;
    color: #f5f5dc !important;
    outline: none !important;
}

.theme-spooky .form-label,
.theme-spooky .card-title,
.theme-spooky h1,
.theme-spooky h2,
.theme-spooky h3,
.theme-spooky h4,
.theme-spooky h5,
.theme-spooky h6 {
    color: #ff6600 !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) !important;
}

/* Spooky text colors */
.theme-spooky p,
.theme-spooky .card-text,
.theme-spooky .ql-editor {
    color: #f5f5dc !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.theme-spooky .btn-primary,
.theme-spooky button[type="submit"] {
    background: linear-gradient(45deg, #ff6600, #cc5500) !important;
    border: 2px solid #8b4513 !important;
    color: #000000 !important;
    font-weight: bold !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3) !important;
    border-radius: 12px !important;
    text-shadow: none !important;
    padding: 12px 24px !important;
    font-size: 18px !important;
    min-height: 48px !important;
}

.theme-spooky .btn-primary:hover,
.theme-spooky button[type="submit"]:hover,
.theme-spooky #submitBtn:hover {
    background: linear-gradient(45deg, #ff8833, #ff6600) !important;
    border-color: #ff6600 !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.5) !important;
    transform: translateY(-2px) scale(1.02);
    transition: all 0.3s ease !important;
    color: #000000 !important;
}

/* Specific styling for save form button and other action buttons */
.theme-spooky .btn-primary:active,
.theme-spooky .btn-primary:focus,
.theme-spooky .btn-primary.active,
.theme-spooky button[type="submit"]:active,
.theme-spooky button[type="submit"]:focus,
.theme-spooky button[type="submit"].active,
.theme-spooky #submitBtn:active,
.theme-spooky #submitBtn:focus,
.theme-spooky #submitBtn.active {
    background: linear-gradient(45deg, #cc5500, #ff6600) !important;
    border-color: #cc5500 !important;
    box-shadow: 0 6px 20px rgba(204, 85, 0, 0.6) !important;
    color: #000000 !important;
}

.theme-spooky .list-group-item {
    background: rgba(20, 10, 8, 0.9) !important;
    border: 2px solid #8b4513 !important;
    color: #f5f5dc !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.theme-spooky .list-group-item:hover {
    background: rgba(35, 15, 10, 0.9) !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.3) !important;
    transform: translateY(-2px);
    border-color: #ff6600 !important;
}

.theme-spooky .option-description-display {
    background: rgba(255, 102, 0, 0.08) !important;
    border-radius: 4px !important;
    color: #c0b8b0 !important;
    padding: 0.4rem 0.6rem !important;
}

.theme-spooky .form-check-input {
    background: #1a0808 !important;
    border: 3px solid #8b4513 !important;
    width: 20px !important;
    height: 20px !important;
}

/* Keep checkboxes square */
.theme-spooky .form-check-input[type="checkbox"] {
    border-radius: 6px !important;
}

/* Make radio buttons circular */
.theme-spooky .form-check-input[type="radio"] {
    border-radius: 50% !important;
}

.theme-spooky .form-check-input:checked {
    background: #ff6600 !important;
    border-color: #ff6600 !important;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.6) !important;
}

/* Additional questions radio button styling */
.theme-spooky .additional-question-section .form-check-input[type="radio"]:checked,
.theme-spooky .additional-question-item .form-check-input[type="radio"]:checked {
    background: #ff6600 !important;
    border-color: #ff6600 !important;
    background-image: radial-gradient(circle, #ffffff 25%, transparent 25%) !important;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.6) !important;
}

.theme-spooky .additional-question-section .form-check-input[type="radio"],
.theme-spooky .additional-question-item .form-check-input[type="radio"] {
    background: #1a0808 !important;
    border: 3px solid #8b4513 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
}

.theme-spooky .form-check-label {
    color: #f5f5dc !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.theme-spooky .form-switch .form-check-input {
    background-color: transparent !important;
    border: 2px solid #8b4513 !important;
    background-image: none !important;
    border-radius: 2em !important;
    width: 2em !important;
    height: 1em !important;
}

.theme-spooky .form-switch .form-check-input:checked {
    background-color: #ff6600 !important;
    border-color: #ff6600 !important;
    background-image: none !important;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.5) !important;
}

.theme-spooky .text-muted {
    color: #f5deb3 !important;
    font-weight: 500 !important;
}

.theme-spooky .alert {
    background: rgba(45, 24, 16, 0.95) !important;
    border: 2px solid #ff6600 !important;
    color: #f5f5dc !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.3) !important;
    border-radius: 12px !important;
}

/* Button variants */
.theme-spooky .btn-secondary {
    background: linear-gradient(45deg, #cc5500, #ff6600) !important;
    border: 2px solid #8b4513 !important;
    color: #000000 !important;
    font-weight: bold !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.theme-spooky .btn-secondary:hover,
.theme-spooky .btn-secondary:active,
.theme-spooky .btn-secondary:focus {
    background: linear-gradient(45deg, #ff8833, #ff6600) !important;
    border-color: #ff6600 !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.5) !important;
    transform: translateY(-2px);
    color: #000000 !important;
}

.theme-spooky .btn-outline-primary,
.theme-spooky .btn-outline-secondary {
    color: #ff6600 !important;
    background-color: rgba(20, 10, 8, 0.95) !important;
    border-color: #ff6600 !important;
    border-width: 2px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.2) !important;
}

.theme-spooky .btn-outline-primary:hover,
.theme-spooky .btn-outline-secondary:hover,
.theme-spooky .btn-outline-primary:focus,
.theme-spooky .btn-outline-secondary:focus,
.theme-spooky .btn-outline-primary:active,
.theme-spooky .btn-outline-secondary:active {
    background: #ff6600 !important;
    color: #000000 !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4) !important;
    transform: translateY(-2px);
}

/* Form sections */
.theme-spooky .form-section-respondent,
.theme-spooky .form-section-main-options,
.theme-spooky .form-section-additional {
    border-color: #ff6600 !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.2) !important;
    border-radius: 15px !important;
}

.theme-spooky .form-section-header {
    background: linear-gradient(45deg, #8b4513, #ff6600) !important;
    color: #000000 !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Required asterisk */
.theme-spooky .required-asterisk {
    color: #ff4500 !important;
    font-weight: bold !important;
}

/* Placeholder text */
.theme-spooky ::placeholder {
    color: #d2b48c !important;
    opacity: 1 !important;
}

.theme-spooky .form-control::placeholder,
.theme-spooky textarea::placeholder {
    color: #d2b48c !important;
    opacity: 1 !important;
}

/* Ensure editable field placeholders are visible */
.theme-spooky .editable-field:empty:before,
.theme-spooky .editable-field-inline:empty:before {
    color: #d2b48c !important;
    opacity: 1 !important;
}

/* Fix dark gray text that's hard to see on dark background */
.theme-spooky [style*="color: #495057"],
.theme-spooky [style*="color:#495057"] {
    color: #e0e0e0 !important;
}

.theme-spooky .bi[style*="color: #495057"],
.theme-spooky .bi[style*="color:#495057"] {
    color: #ff6600 !important;
}

/* More specific override for the people icon */
.theme-spooky .bi-people-fill[style*="color: #495057"],
.theme-spooky .bi-people-fill[style*="color:#495057"],
.theme-spooky i.bi-people-fill[style*="color: #495057"],
.theme-spooky i.bi-people-fill[style*="color:#495057"] {
    color: #ff6600 !important;
}

/* Max signups header styling - simplified to match other themes */
.theme-spooky .max-signups-icon {
    color: #ff6600 !important;
}

.theme-spooky #maxSignupsHeader span[style*="color: #495057"],
.theme-spooky #maxSignupsHeader span[style*="color:#495057"] {
    color: #e0e0e0 !important;
}

/* Specific styling for max signups text */
.theme-spooky .text-center[style*="font-size: 0.8rem"],
.theme-spooky span[style*="font-size: 0.8rem"] {
    color: #d2b48c !important;
}

.theme-spooky .text-center[style*="color: #495057"],
.theme-spooky span[style*="color: #495057"] {
    color: #d2b48c !important;
}

/* Fix form check labels with header-title class */
.theme-spooky .form-check-label.header-title {
    color: #ff6600 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 5px rgba(255, 102, 0, 0.4) !important;
}

/* General form check label improvements */
.theme-spooky .form-check-label {
    color: #f5f5dc !important;
    font-weight: 500 !important;
}

/* Fix section subheader text visibility */
.theme-spooky .text-muted,
.theme-spooky .small,
.theme-spooky small {
    color: #f5deb3 !important;
    font-weight: 500 !important;
}

/* Specific styling for form section descriptions */
.theme-spooky .form-section .text-muted,
.theme-spooky .card-body .text-muted,
.theme-spooky .mb-3 .text-muted {
    color: #f5deb3 !important;
    font-weight: 500 !important;
}

/* Fix dark gray text in form sections */
.theme-spooky .form-section h6,
.theme-spooky .card-header h6,
.theme-spooky .section-header h6 {
    color: #ff6600 !important;
    text-shadow: 0 0 8px rgba(255, 102, 0, 0.4) !important;
}

/* Event detail icons - use spooky orange */
.theme-spooky .bi-calendar-event-fill[style*="color: var(--primary-color)"],
.theme-spooky .bi-clock-fill[style*="color: var(--primary-color)"],
.theme-spooky .bi-geo-alt-fill[style*="color: var(--primary-color)"],
.theme-spooky .bi-calendar-event-fill,
.theme-spooky .bi-clock-fill,
.theme-spooky .bi-geo-alt-fill {
    color: #ff6600 !important;
}

/* Modal styling for spooky theme */
.theme-spooky .modal-content {
    background: rgba(20, 10, 8, 0.95) !important;
    border: 3px solid #ff6600 !important;
    box-shadow: 0 0 25px rgba(255, 102, 0, 0.4) !important;
    border-radius: 15px !important;
    backdrop-filter: blur(10px);
}

.theme-spooky .modal-header {
    background: rgba(255, 102, 0, 0.1) !important;
    border-bottom: 2px solid #8b4513 !important;
    color: #ff6600 !important;
    border-radius: 12px 12px 0 0 !important;
}

.theme-spooky .modal-title {
    color: #ff6600 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(255, 102, 0, 0.4) !important;
}

.theme-spooky .modal-body {
    background: transparent !important;
    color: #f5f5dc !important;
}

.theme-spooky .modal-footer {
    background: rgba(255, 102, 0, 0.05) !important;
    border-top: 2px solid #8b4513 !important;
    border-radius: 0 0 12px 12px !important;
}

.theme-spooky .modal .btn-secondary {
    background: rgba(139, 69, 19, 0.9) !important;
    border: 2px solid #8b4513 !important;
    color: #f5f5dc !important;
    font-weight: 600 !important;
}

.theme-spooky .modal .btn-secondary:hover {
    background: rgba(160, 80, 25, 0.9) !important;
    border-color: #ff6600 !important;
    color: #f5f5dc !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3) !important;
}

/* Animations for spooky effects */
.theme-spooky .btn,
.theme-spooky .form-control,
.theme-spooky .list-group-item {
    transition: all 0.3s ease !important;
}

.theme-spooky .card {
    animation: spookyGlow 3s ease-in-out infinite alternate;
}

@keyframes spookyGlow {
    from {
        box-shadow: 0 0 25px rgba(255, 102, 0, 0.4), inset 0 0 15px rgba(255, 69, 0, 0.2);
    }
    to {
        box-shadow: 0 0 35px rgba(255, 102, 0, 0.6), inset 0 0 20px rgba(255, 69, 0, 0.3);
    }
}

/* Pumpkin floating animations */
@keyframes pumpkinFloat1 {
    0% {
        transform: translate(-10vw, -10vh) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
        transform: translate(15vw, 10vh) rotate(15deg) scale(1);
    }
    25% {
        transform: translate(40vw, 5vh) rotate(-10deg) scale(1.1);
    }
    50% {
        transform: translate(70vw, 15vh) rotate(25deg) scale(0.9);
    }
    75% {
        transform: translate(85vw, 25vh) rotate(-15deg) scale(1.2);
    }
    90% {
        opacity: 0.7;
        transform: translate(95vw, 35vh) rotate(30deg) scale(0.8);
    }
    100% {
        transform: translate(105vw, -10vh) rotate(45deg) scale(0.6);
        opacity: 0;
    }
}

/* Ghost floating animations */
@keyframes ghostFloat1 {
    0% {
        transform: translate(105vw, -10vh) rotate(0deg) scale(1);
        opacity: 0;
    }
    12% {
        opacity: 0.6;
        transform: translate(80vw, 15vh) rotate(-8deg) scale(1.2);
    }
    30% {
        transform: translate(55vw, 10vh) rotate(12deg) scale(0.9);
    }
    55% {
        transform: translate(30vw, 25vh) rotate(-20deg) scale(1.1);
    }
    75% {
        transform: translate(50vw, 35vh) rotate(15deg) scale(0.8);
    }
    90% {
        opacity: 0.6;
        transform: translate(10vw, 40vh) rotate(-25deg) scale(1.3);
    }
    100% {
        transform: translate(-10vw, -10vh) rotate(-35deg) scale(0.6);
        opacity: 0;
    }
}

/* Header and Footer Styling for Spooky Theme */
.theme-spooky .navbar {
    background: linear-gradient(135deg, #1a0606 0%, #2d0f0a 50%, #1a0606 100%) !important;
    border-bottom: 3px solid #ff6600 !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3) !important;
}

.theme-spooky .navbar-brand {
    color: #f5f5dc !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.theme-spooky .navbar-brand:hover {
    color: #f5f5dc !important;
}

.theme-spooky .brand-text-primary {
    color: #f5f5dc !important;
}

.theme-spooky .brand-text-white {
    color: #ff6600 !important;
    text-shadow: 0 0 8px rgba(255, 102, 0, 0.6) !important;
}

.theme-spooky .navbar-toggler {
    border-color: #ff6600 !important;
    background: rgba(255, 102, 0, 0.1) !important;
}

.theme-spooky .navbar-toggler:focus {
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.4) !important;
}

.theme-spooky .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 102, 0, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.theme-spooky .offcanvas {
    background: linear-gradient(135deg, #1a0606 0%, #2d0f0a 50%, #1a0606 100%) !important;
    border-left: 3px solid #ff6600 !important;
    box-shadow: -4px 0 15px rgba(255, 102, 0, 0.3) !important;
}

.theme-spooky .offcanvas-header {
    border-bottom: 2px solid #8b4513 !important;
}

.theme-spooky .btn-close {
    filter: none !important;
    opacity: 1 !important;
    background: #f5f5dc !important;
    border: 2px solid #8b4513 !important;
    border-radius: 4px !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 0.75rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.theme-spooky .btn-close:hover {
    opacity: 1 !important;
    background: #ffffff !important;
    border-color: #ff6600 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3) !important;
}

.theme-spooky .mobile-nav-section .btn {
    background: linear-gradient(45deg, #ff6600, #cc5500) !important;
    border: 2px solid #8b4513 !important;
    color: #000000 !important;
    font-weight: bold !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3) !important;
}

.theme-spooky .mobile-nav-section .btn:hover {
    background: linear-gradient(45deg, #ff8833, #ff6600) !important;
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.5) !important;
    transform: translateY(-2px) !important;
}

.theme-spooky .mobile-nav-header {
    color: #ff6600 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 5px rgba(255, 102, 0, 0.4) !important;
}

.theme-spooky .mobile-nav-item {
    color: #f5f5dc !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.theme-spooky .mobile-nav-item:hover {
    color: #ff6600 !important;
    text-shadow: 0 0 8px rgba(255, 102, 0, 0.6) !important;
}

.theme-spooky .mobile-nav-item i {
    color: #ff6600 !important;
}

.theme-spooky .footer {
    background: linear-gradient(135deg, #1a0606 0%, #2d0f0a 50%, #1a0606 100%) !important;
    border-top: 3px solid #ff6600 !important;
    box-shadow: 0 -4px 15px rgba(255, 102, 0, 0.3) !important;
    color: #f5f5dc !important;
}

.theme-spooky .footer p {
    color: #f5f5dc !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.theme-spooky .footer a {
    color: #ff6600 !important;
    text-shadow: 0 0 5px rgba(255, 102, 0, 0.4) !important;
}

.theme-spooky .footer a:hover {
    color: #ff8833 !important;
    text-shadow: 0 0 8px rgba(255, 102, 0, 0.6) !important;
}

/* Taken/Disabled option styling - "Show taken options" feature */
.theme-spooky .list-group-item input:disabled + label {
    color: #ff6600 !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    text-decoration: line-through !important;
}

.theme-spooky .list-group-item input:disabled ~ small {
    color: #cc8844 !important;
    font-weight: 600 !important;
}

.theme-spooky .list-group-item:has(input:disabled) {
    background: rgba(139, 69, 19, 0.2) !important;
    border-color: rgba(255, 102, 0, 0.5) !important;
    opacity: 0.65 !important;
}

.theme-spooky .list-group-item:has(input:disabled):hover {
    background: rgba(139, 69, 19, 0.2) !important;
    border-color: rgba(255, 102, 0, 0.5) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: 0 4px 20px rgba(139, 69, 19, 0.3) !important;
}

.theme-spooky .list-group-item:has(input:disabled)::before {
    background: linear-gradient(to bottom, rgba(139, 69, 19, 0.6), rgba(255, 102, 0, 0.6)) !important;
}

/* ---- Highlighted Options ---- */
.theme-spooky .list-group-item.option-highlighted {
    background: rgba(20, 10, 8, 0.9) !important;
    border: 2px solid #FFB000 !important;
    box-shadow: 0 0 16px rgba(255, 176, 0, 0.4), 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.theme-spooky .list-group-item.option-highlighted:hover {
    background: rgba(35, 15, 10, 0.9) !important;
    border-color: #E6A000 !important;
    box-shadow: 0 0 22px rgba(255, 176, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Show taken pill - checked state needs explicit fill since btn-outline-primary base has !important background */
.theme-spooky .btn-check:checked + .btn-outline-primary {
    background: #ff6600 !important;
    border-color: #ff6600 !important;
    color: #000000 !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.4) !important;
}