/* =============================================================================
   SongWishes — song-wishes.css
   BEM: .song-wishes__[element]--[modifier]
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   Custom Properties
   ───────────────────────────────────────────────────────────────────────────── */

.song-wishes {
    --sw-color-primary:             #6E368C;
    --sw-color-primary-hover:       #FFDC44;
    --sw-color-secondary:           #FFDC44;
    --sw-color-secondary-hover:     #6E368C;
    --sw-color-text:                #2B2E36;
    --sw-color-text-inverted:       #FFFFFF;
    --sw-color-text-muted:          rgba( 43,  46,  54, 0.85);
    --sw-color-text-muted-inverted: rgba(255, 255, 255, 0.85);
    --sw-color-border:              #d1d5db;
    --sw-color-success:             #166534;
    --sw-color-success-bg:          #dcfce7;
    --sw-color-error:               #991b1b;
    --sw-color-error-bg:            #fee2e2;
    --sw-color-info:                #653281;
    --sw-color-info-bg:             #f2e9f6;
    --sw-color-focus:               rgba(110, 54, 140, 0.15);

    --sw-radius:                    3px;
    --sw-spacing:                   1rem;
    --sw-font-size-s:               1rem;
    --sw-font-size:                 1rem;
    --sw-font-size-l:               1.25rem;
    --sw-transition:                150ms ease;

    font-size: var(--sw-font-size);
	line-height: 1.4rem;
    color: var(--sw-color-text);
}

@media (max-width: 1800px) {
	.song-wishes {
	    --sw-font-size-l:            1.1rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Honeypot
   ───────────────────────────────────────────────────────────────────────────── */

.song-wishes .song-wishes__honeypot {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Hidden
   ───────────────────────────────────────────────────────────────────────────── */

/*
 * Protect [hidden] attribute from theme CSS overrides.
 * Some themes set display rules on buttons/elements that unintentionally
 * override the browser's default [hidden] { display: none } styling.
 */
.song-wishes [hidden] {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Fields
   ───────────────────────────────────────────────────────────────────────────── */

.song-wishes .song-wishes__fields {
    display: flex;
    gap: var(--sw-spacing);
    flex-wrap: wrap;
    align-items: flex-end;
}

.song-wishes .song-wishes__fields .song-wishes__field {
    flex: 1 1 200px;
}

/* Action field wrapping the search button.
 * Mobile-first: full width by default, inline on desktop. */
.song-wishes .song-wishes__fields .song-wishes__field--action {
    flex: 1 1 100%;
}

.song-wishes .song-wishes__field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--sw-spacing) / 2);
	margin-bottom: var(--sw-spacing);
}

.song-wishes .song-wishes__field label {
    font-weight: 600;
    color: var(--sw-color-text);
}

.song-wishes .song-wishes__field input[type="text"],
.song-wishes .song-wishes__field input[type="email"],
.song-wishes .song-wishes__field textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--sw-color-border);
    border-radius: var(--sw-radius);
    font-size: var(--sw-font-size);
    color: var(--sw-color-text);
    background-color: #fff;
    transition: border-color var(--sw-transition), box-shadow var(--sw-transition);
    box-sizing: border-box;
}

.song-wishes .song-wishes__field input[type="text"]:focus,
.song-wishes .song-wishes__field input[type="email"]:focus,
.song-wishes .song-wishes__field textarea:focus {
    outline: none;
    border-color: var(--sw-color-primary);
    box-shadow: 0 0 0 3px var(--sw-color-focus);
}

.song-wishes .song-wishes__field textarea {
    resize: vertical;
    min-height: 80px;
}

.song-wishes .song-wishes__char-count {
    font-size: 0.75rem;
    color: var(--sw-color-text-muted);
    text-align: right;
	line-height: 1em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────────────────────── */

.song-wishes .song-wishes__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border: 1px solid transparent;
    border-radius: var(--sw-radius);
    font-size: var(--sw-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--sw-transition), color var(--sw-transition), opacity var(--sw-transition);
    background-color: var(--sw-color-primary);
    color: var(--sw-color-text-inverted);
}

.song-wishes .song-wishes__button:hover:not(:disabled) {
    color: var(--sw-color-text);
    background-color: var(--sw-color-primary-hover);
}

.song-wishes .song-wishes__button:disabled,
.song-wishes .song-wishes__button.is-loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.song-wishes .song-wishes__button.is-loading {
    position: relative;
    color: transparent;
}

.song-wishes .song-wishes__button.is-loading::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    top: 50%;
    left: 50%;
    margin-top: -0.5em;
    margin-left: -0.5em;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: song-wishes-spin 0.7s linear infinite;
}

.song-wishes .song-wishes__button--secondary.is-loading::after {
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: var(--sw-color-text);
}

@keyframes song-wishes-spin {
    to { transform: rotate(360deg); }
}

.song-wishes .song-wishes__button--secondary {
    background-color: var(--sw-color-primary);
    color: var(--sw-color-text-inverted);
    margin-top: 0.5rem;
}

.song-wishes .song-wishes__button--secondary:hover:not(:disabled) {
    background-color: var(--sw-color-primary-hover);
    color: var(--sw-color-text);
}

/* On desktop the button sits inline next to the fields */
@media (min-width: 601px) {
    .song-wishes .song-wishes__fields .song-wishes__field--action {
        flex: 0 0 auto;
    }
}

/* On mobile the search button stretches to full width */
@media (max-width: 600px) {
    .song-wishes .song-wishes__button--search {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Search Results
   ───────────────────────────────────────────────────────────────────────────── */

.song-wishes .song-wishes__results {
    margin-top: calc(var(--sw-spacing) * 1.5);
}

.song-wishes .song-wishes__results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--sw-color-border);
    border-radius: var(--sw-radius);
    overflow: hidden;
}

.song-wishes .song-wishes__result-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--sw-color-border);
    transition: background-color var(--sw-transition);
}

.song-wishes .song-wishes__result-item:last-child {
    border-bottom: none;
}

/*
 * Only for devices, that support real hover effects like Desktop.
 * This excludes smartphones and tablets.
 */
@media (hover: hover) {
    .song-wishes .song-wishes__result-item:hover {
        background-color: var(--sw-color-secondary);
    }
}

.song-wishes .song-wishes__result-item.is-selected {
    background-color: var(--sw-color-primary);
}

.song-wishes .song-wishes__result-title {
    font-weight: 600;
    font-size: var(--sw-font-size-s);
}

.song-wishes .song-wishes__result-artist {
    font-size: var(--sw-font-size-s);
    color: var(--sw-color-text-muted);
}

.song-wishes .song-wishes__result-item.is-selected .song-wishes__result-title {
    color: var(--sw-color-text-inverted);
}

.song-wishes .song-wishes__result-item.is-selected .song-wishes__result-artist {
    color: var(--sw-color-text-muted-inverted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Wish Form
   ───────────────────────────────────────────────────────────────────────────── */

.song-wishes .song-wishes__wish-form {
    margin-top: calc(var(--sw-spacing) * 1.5);
    padding-top: calc(var(--sw-spacing) * 1.5);
    border-top: 1px solid var(--sw-color-border);
}

.song-wishes .song-wishes__selected-song {
    font-weight: 600;
    font-size: var(--sw-font-size-l);
	line-height: 1.5rem;
    color: var(--sw-color-primary);
    margin-bottom: var(--sw-spacing);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Messages
   ───────────────────────────────────────────────────────────────────────────── */

.song-wishes .song-wishes__message {
    margin-top: var(--sw-spacing);
    padding: 0.75rem 1rem;
    border-radius: var(--sw-radius);
    font-size: 0.9375rem;
}

.song-wishes .song-wishes__message--success {
    color: var(--sw-color-success);
    background-color: var(--sw-color-success-bg);
}

.song-wishes .song-wishes__message--error {
    color: var(--sw-color-error);
    background-color: var(--sw-color-error-bg);
}

.song-wishes .song-wishes__message--info {
    color: var(--sw-color-info);
    background-color: var(--sw-color-info-bg);
}