/* ==========================================================================
   Everybody Goes Night Night — Main Stylesheet
   ========================================================================== */

/* ---------- Custom Font ---------- */
@font-face {
    font-family: 'Trackim';
    src: url('../fonts/trackim_font.ttf') format('truetype');
    font-display: fallback;
}

/* ---------- CSS Custom Properties ---------- */
:root {
    --color-bg:            #000000;
    --color-primary:       #003366;
    --color-accent:        #3c7bb9;
    --color-gold:          #ffc439;
    --color-text:          #333333;
    --color-text-light:    #ffffff;
    --color-border:        #b7b7b7;
    --color-error:         #ff0000;
    --color-error-bg:      #ffe4e4;
    --color-panel:         rgba(255, 255, 255, 0.85);
    --color-panel-solid:   rgba(255, 255, 255, 0.9);
    --color-overlay:       rgba(0, 0, 0, 0.7);

    --font-family:         'Trackim', 'Quicksand', 'DM Sans', Arial, Helvetica, sans-serif;
    --font-size-base:      16px;
    --font-size-lg:        20px;
    --font-size-sm:        14px;

    --radius:              4px;
    --shadow:              1px 0px 30px 8px rgba(0, 0, 0, 0.4);
    --shadow-sm:           0px 0px 8px 1px rgba(0, 0, 0, 0.3);
    --transition:          0.3s ease;

    --container-width:     400px;
    --container-margin:    0px 100px;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    background: var(--color-bg);
    background-image: url('../images/bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    overflow: hidden;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Typography ---------- */
h1 {
    color: var(--color-text-light);
    margin: 100px 0 0 100px;
    padding: 0;
    font-size: 29px;
    text-shadow: 1px 2px 10px #000;
}

h2 {
    margin: 0;
    padding: 10px 0 10px 10px;
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.site-tagline {
    color: var(--color-text-light);
    margin: 0 0 20px 100px;
    padding: 0;
    font-size: 17px;
    text-shadow: 1px 2px 10px #000;
    display: block;
    letter-spacing: 0.2px;
}

/* ---------- Buttons ---------- */
.btn {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.43;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--color-text-light);
    background-color: var(--color-primary);
    background-image: none;
    outline: none;
    touch-action: manipulation;
    transition: filter var(--transition);
}

.btn:hover {
    filter: brightness(1.2);
}

.btn--accent {
    color: var(--color-text-light);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn--gold {
    color: var(--color-text);
    background-color: #e8d602;
    border-color: #e8d602;
    box-shadow: var(--shadow-sm);
}

.btn--gold .btn__icon {
    color: var(--color-text);
}

.btn__icon {
    margin-right: 10px;
    color: var(--color-text-light);
}

/* ---------- Form Inputs ---------- */
.input {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.43;
    color: var(--color-text);
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    outline: none;
    touch-action: manipulation;
    transition: border-color var(--transition);
}

.input:hover,
.input:focus {
    border-color: var(--color-accent);
}

.input--error {
    border-color: var(--color-error) !important;
    background-color: var(--color-error-bg) !important;
}

.input--error::placeholder {
    color: var(--color-error) !important;
}

/* ---------- Name Search Autocomplete ---------- */
.name-search {
    position: relative;
}

.name-search__input-wrap {
    position: relative;
}

.name-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 13px;
    pointer-events: none;
}

.name-search__input {
    padding-left: 34px !important;
}

.name-search__results {
    display: none;
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 180px;
    overflow-y: auto;
    margin: 4px 0 0 0;
    padding: 4px 0;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    list-style: none;
}

.name-search__results--open {
    display: block;
}

.name-search__result-item {
    padding: 8px 14px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    transition: background 0.15s ease;
}

.name-search__result-item:hover,
.name-search__result-item--highlighted {
    background: #e8f0fe;
}

.name-search__result-item--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.name-search__no-results {
    padding: 10px 14px;
    color: #999;
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
}

.name-search__buy-btn {
    margin-top: 12px;
}

/* ---------- Selected Names List ---------- */
.selected-names {
    margin: 12px 0 0 0;
    padding: 0;
    list-style: none;
    min-height: 0;
}

.selected-names:empty {
    display: none;
}

.selected-names__item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    margin: 0 0 6px 0;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: grab;
    user-select: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.selected-names__item:active {
    cursor: grabbing;
}

.selected-names__item--dragging {
    opacity: 0.4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.selected-names__item--drag-over {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(60, 123, 185, 0.2);
}

.selected-names__grip {
    color: #ccc;
    margin-right: 10px;
    font-size: 14px;
    flex-shrink: 0;
}

.selected-names__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-right: 10px;
    flex-shrink: 0;
}

.selected-names__name {
    flex: 1;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.selected-names__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 0;
    margin-left: 6px;
}

.selected-names__remove:hover {
    color: var(--color-error);
    background: var(--color-error-bg);
}

/* ---------- Song Builder Panel ---------- */
.song-builder {
    position: relative;
    z-index: 4;
}

.builder-panel {
    margin: var(--container-margin);
    width: var(--container-width);
    padding: 10px;
    background: var(--color-panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.builder-panel__section {
    padding: 10px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.builder-panel__email {
    margin: 20px 10px 0 10px;
    width: calc(100% - 20px);
}

.builder-panel__submit {
    margin: 20px 10px 10px 10px;
    width: calc(100% - 20px);
}

.builder-panel__loading {
    display: none;
    margin: 20px 10px 10px 0;
    padding: 7px 13px;
    font-size: var(--font-size-base);
    font-weight: 400;
}

.builder-panel__loading .btn__icon {
    color: var(--color-text);
    padding-left: 10px;
}

/* Loading ellipsis animation */
.loading-dots::after {
    content: '\2026';
    display: inline-block;
    width: 0;
    overflow: hidden;
    vertical-align: bottom;
    animation: ellipsis steps(4, end) 900ms infinite;
}

@keyframes ellipsis {
    to { width: 20px; }
}

/* ---------- People List (legacy - removed) ---------- */

/* ---------- Song Player ---------- */
.song-player {
    display: none;
    position: relative;
    z-index: 100;
}

.lyrics-panel {
    display: none;
    margin: var(--container-margin);
    width: var(--container-width);
}

.lyrics-panel__body {
    background: var(--color-panel);
    padding: 20px;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow);
}

.lyrics-panel__controls {
    padding: 20px;
    background: var(--color-panel-solid);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
}

#lyrics {
    padding: 20px 0 10px 0;
}

.lyric-line {
    font-size: var(--font-size-lg);
    text-align: center;
    padding-bottom: 10px;
    user-select: none;
    -webkit-touch-callout: none;
    transition: color 0.3s ease;
}

.lyric-line--active {
    color: var(--color-accent);
}

.btn--play {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

#btn-pause,
#btn-replay {
    display: none;
}

#btn-edit-song {
    margin: 20px;
    width: 360px;
    box-shadow: var(--shadow);
}

/* ---------- Donation Panel ---------- */
.donation-panel {
    display: none;
    margin: 40px 100px 100px 100px;
    width: var(--container-width);
    padding: 20px;
    background: var(--color-panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.donation-panel .btn {
    background: #e8d602;
    border-color: #e8d602;
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.donation-panel .btn__icon {
    color: var(--color-text);
}

/* Amount Selector */
.amount-btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #c2c2c2;
    border-radius: var(--radius);
    margin: 0 10px 10px 0;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    background: #ffffff;
    transition: all var(--transition);
}

.amount-btn--active {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-text);
}

.amount-input {
    display: inline-block;
    width: 176px;
    padding: 6px 12px;
    border: 1px solid #c2c2c2;
    border-radius: var(--radius);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
}

.amount-input--active {
    border-color: var(--color-text);
}

/* Hidden PayPal fields */
#smart-button-container { height: auto !important; }
#smart-button-container #amount,
#smart-button-container #description { display: none; }
.paypal-powered-by { display: none !important; }

/* ---------- Modals ---------- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: 3000;
    overflow: auto;
}

.modal__panel {
    background: #ffffff;
    border-radius: var(--radius);
    width: 100%;
    max-width: var(--container-width);
    margin: 100px auto;
}

.modal__header {
    position: relative;
    padding: 0 20px;
    background: #f1f1f1;
    border-radius: var(--radius) var(--radius) 0 0;
}

.modal__header h3 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.modal__header .btn__icon {
    color: var(--color-text);
    font-size: 20px;
}

.modal__close {
    position: absolute;
    right: 20px;
    top: 10px;
    width: 20px;
    height: 20px;
    font-size: 30px;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

.modal__close i {
    color: var(--color-text);
    opacity: 1;
    font-size: 20px;
    margin: 0;
    padding: 8px 0 0 0;
}

.modal__body {
    position: relative;
    padding: 20px;
}

/* Add Name Modal */
.name-request__container {
    border: 1px solid #e2e2e2;
    background: #e2e2e2;
    padding: 20px 20px 10px 20px;
}

.name-request__item {
    display: none;
    margin: 0 0 10px 0;
}

.name-request__item--initial {
    display: block;
}

.name-request__input {
    display: inline-block;
    width: calc(100% - 30px);
}

.name-request__remove {
    float: right;
    width: 20px;
    height: 20px;
    padding: 6px 0 0 7px;
    cursor: pointer;
    background: none;
    border: none;
    color: #999;
}

.name-request__add-btn {
    margin-top: 10px;
}

/* Cost Divider */
.cost-divider {
    display: block;
    position: relative;
    margin: 10px 0;
    overflow: hidden;
}

.cost-divider__amount {
    position: relative;
    float: left;
    font-size: 18px;
    margin: 10px 0;
    display: block;
    width: 100%;
    z-index: 2;
    text-align: center;
}

.cost-divider__line {
    position: absolute;
    display: block;
    border-bottom: 1px solid #e2e2e2;
    z-index: 1;
    width: 36%;
}

.cost-divider__line--left  { left: 0; }
.cost-divider__line--right { right: 0; }

/* ---------- Night Sky Effects ---------- */
.stars,
.house-overlay {
    display: none;
}

.stars {
    background-image: url('../images/bg_stars_1.png');
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-size: 100%;
    background-repeat: no-repeat;
    animation: twinkle 1.2s infinite;
    pointer-events: none;
    z-index: -1;
}

.stars--2 { background-image: url('../images/bg_stars_2.png'); animation-duration: 0.8s; }
.stars--3 { background-image: url('../images/bg_stars_3.png'); animation-duration: 1.3s; }
.stars--4 { background-image: url('../images/bg_stars_4.png'); animation-duration: 2.0s; }

.house-overlay {
    background-image: url('../images/bg_off.png');
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-size: 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -2;
}

@keyframes twinkle {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    60%  { opacity: 0; }
    100% { opacity: 0; }
}

/* ---------- Overlay (mobile keyboard) ---------- */
.overlay--active {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: 2;
}

/* ---------- Buy Name Button ---------- */
.buy-name-btn {
    width: 100%;
    margin-top: 10px;
    color: var(--color-text-light);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    font-family: var(--font-family);
}

/* ---------- Hidden utility ---------- */
.u-hidden { display: none; }

/* ---------- Responsive: Mobile ---------- */
@media screen and (max-width: 600px) {
    :root {
        --container-width: 300px;
        --container-margin: 0 auto;
    }

    h1 {
        margin: 40px auto 0 auto;
        font-size: 23.5px;
        text-align: center;
    }

    .site-tagline {
        margin: 0 auto 20px auto;
        font-size: var(--font-size-sm);
        text-align: center;
        letter-spacing: -0.2px;
    }

    body {
        background-image: url('../images/bg-mobile.png');
    }

    .donation-panel {
        margin: 40px auto;
        width: var(--container-width);
    }

    .modal__panel {
        margin: 10px;
        width: calc(100% - 20px);
        max-width: 600px;
    }

    .selected-names__grip { display: none; }

    #btn-edit-song { width: 260px; }
    #lyrics { padding: 20px 0 0 0; }

    .amount-input { width: 83px; }

    /* Mobile stars */
    .stars          { background-image: url('../images/bg_stars-m_1.png'); }
    .stars--2       { background-image: url('../images/bg_stars-m_2.png'); }
    .stars--3       { background-image: url('../images/bg_stars-m_3.png'); }
    .stars--4       { background-image: url('../images/bg_stars-m_4.png'); }
    .house-overlay  { background-image: url('../images/bg-mobile_off.png') !important; }
}