/* site.css - 金鯊魚主題最終版 */

:root {
    --glow-color: #FFD700;
    --text-color: #f5f5f5;
    --background-color: #000;
    --container-background-color: rgba(0,0,0,0.4);
    --input-background-color: rgba(0,0,0,0.2);
    --button-text-color: #000;
    --accent-color: #FFFFE0;
    --font-main: 'Cormorant Garamond', serif;
}

html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-main, 'Segoe UI', sans-serif);
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png);
    background-size: auto, auto;
    animation: stars 200s linear infinite;
}

@keyframes stars {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -10000px 5000px;
    }
}

.neon-box {
    background: var(--container-background-color);
    border: 4px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

    .neon-box::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(transparent, rgba(255, 215, 0, 0.2), transparent 30%);
        animation: rotate 8s linear infinite;
        pointer-events: none;
    }

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.form-header, h3, h4 {
    text-align: center;
    font-size: 2rem;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    background: linear-gradient(145deg, #FFD700, #DAA520, #BF953F);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.form-container {
    width: 90%;
    max-width: 500px;
    margin: 2rem auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

    .form-group label {
        display: flex;
        align-items: center;
        margin-bottom: 0.75rem;
        font-size: 1.1rem;
        color: var(--text-color);
    }

        .form-group label i {
            color: var(--glow-color);
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

.form-control, .form-select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    font-size: 1.1rem;
    box-sizing: border-box;
    font-family: inherit;
    color: #FFF8DC;
    background: var(--input-background-color);
    border: 2px solid #BF953F;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

    .form-control:focus, .form-select:focus {
        border-color: #FFD700;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        outline: none;
    }

.neon-button, .neon-button-secondary {
    display: inline-block;
    padding: 12px 25px;
    margin-top: 15px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.2rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s;
    background: linear-gradient(145deg, #DAA520, #BF953F);
    color: var(--button-text-color);
    border: 2px outset #FCF6BA;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    font-weight: 700;
}

form button.neon-button,
form button.neon-button-secondary {
    width: 100%;
}

.neon-button:hover, .neon-button-secondary:hover {
    background: linear-gradient(145deg, #FFD700, #DAA520);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.neon-button:active, .neon-button-secondary:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.footer {
    color: #888;
}

    .footer .container {
        text-align: center;
    }

.form-select option {
    background: var(--input-background-color); /* 套用我們主題的深色背景 */
    color: var(--text-color); /* 套用我們主題的亮色文字 */
    padding: 10px; /* 增加一點內距 (注意：此效果在部分瀏覽器上可能不明顯) */
}

/* 1. 包裹容器，設定相對定位 */
.custom-select-wrapper {
    position: relative;
    font-family: var(--font-main, 'Segoe UI', sans-serif);
}

    /* 2. 隱藏原始的 select 標籤 */
    .custom-select-wrapper select {
        display: none;
    }

/* 3. 美化「已選擇」的那個框 */
.select-selected {
    background: var(--input-background-color);
    border: 2px solid #BF953F;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    color: #FFF8DC;
    padding: 12px;
    font-size: 1.1rem;
    border-radius: 5px;
    cursor: pointer;
    user-select: none; /* 防止文字被選取 */
    position: relative;
}

    /* 4. 畫出右側的向下箭頭 */
    .select-selected::after {
        content: "";
        position: absolute;
        right: 15px;
        top: 50%;
        margin-top: -3px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #FFD700 transparent transparent transparent;
        transition: all 0.3s;
    }

    /* 5. 當選單展開時，讓箭頭朝上 */
    .select-selected.select-arrow-active::after {
        transform: rotate(180deg);
        margin-top: -9px;
    }

/* 6. 選項容器的樣式 */
.select-items {
    position: absolute;
    background: #1a1500;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border: 2px solid #BF953F;
    border-top: none;
    border-radius: 0 0 5px 5px;
    max-height: 200px;
    overflow-y: auto;
}

/* 7. 預設隱藏選項容器 */
.select-hide {
    display: none;
}

/* 8. 每個選項的樣式 */
.select-items div {
    color: #FFF8DC;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

    /* 9. 滑鼠滑過選項時的樣式 */
    .select-items div:hover {
        background: linear-gradient(145deg, #FFD700, #DAA520);
        color: #000;
    }

/* 10. 在選項列表中，標示出「目前已被選中」的那個選項 */
.same-as-selected {
    background-color: rgba(191, 149, 63, 0.3);
}

.neon-box.select-open {
    overflow: visible;
    z-index: 10;
}