/* ================== Global ==================*/

body{

    margin:0;

    background:#F7F7F7;

    font-family:
    "Microsoft JhengHei",
    Arial,
    sans-serif;

}

/* ================== Layout ==================*/

.container {

    max-width:420px;

    margin:40px auto;

    background:white;

    padding:30px;

    border-radius:24px;

    box-shadow:
    0 8px 25px rgba(0,0,0,0.08);

}

/* ================== Header ==================*/

.header{
    text-align:center;
    margin-bottom: 5px;
}

.header img{
    width:200px;
    margin-bottom:-20px;
}

h1 {

    color:#FF6B00;

    font-size:26px;

    font-weight:bold;

}

h2 {

    color:black;

    font-size:26px;

    font-weight:bold;

    margin-bottom: 0px;

}

/* ================== Form ==================*/

.form-section {

    margin-top:30px;

}

label {

    font-size:16px;

    color:#777;

}

.form-group{

    margin-top:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:bold;

    color:#555;

}

input {

    width:100%;

    box-sizing:border-box;

    padding:15px;

    margin-top:8px;

    border-radius:12px;

    border:1px solid #ddd;

    font-size:16px;

}

input:focus{

    outline: none;

    border-color: #FF6B00;

} 

/* ================== Button ==================*/

button {

    width:100%;

    padding:15px;

    margin-top:15px;

    border-radius:12px;

    border:none;

    font-size:16px;

}


.primary-button {

    background:#FF6B00;

    color:white;

}


.secondary-button {

    background:#eeeeee;

    color: black;

}

.success-button{

    background: green;

    color:white;

    margin-top:15px;

}    

.danger-button{

    background:red;

    color:white;

    margin-top:15px;

}

/* ================== Cards ==================*/

.result {

    margin-top:35px;

}


.member-card{

    margin-top:20px;

    padding:20px;

    border-radius:18px;

    background:white;

    box-shadow:
    0 5px 15px rgba(0,0,0,.08);

    cursor:pointer;

}

.member-card:hover{

    transform:translateY(-2px);

    transition:.2s;

}

.member-card label{

    display:block;

    margin-top:15px;

    color:#777;

    font-weight:bold;

}

.member-card p{

    font-size:18px;

    margin:15px 0;

}

.stars{

    font-size:30px;

    margin-top:10px;

}

/* ================== Voucher ==================*/


.voucher-card{

    background:#ffffff;

    margin-top:25px;

    padding:20px;

    border-radius:18px;

    box-shadow:
    0 5px 15px rgba(0,0,0,0.08);

}



.voucher-card h2{

    color:#FF6B00;

    margin-top:0;

}



.voucher-status{

    color:#28a745;

    font-weight:bold;

}

.history-item{
    color:#777;
    font-size: 15px;
    margin: 8px 0;
}

.menu-button{

position:fixed;

top:20px;

left:20px;

width:45px;

height:45px;

border:none;

border-radius:10px;

font-size:22px;

cursor:pointer;

z-index:1001;

}

.side-menu{

position:fixed;

top:0;

left:-260px;

width:240px;

height:100%;

background:white;

box-shadow:2px 0 10px rgba(0,0,0,.2);

padding:20px;

transition:.3s;

z-index:1002;

}

.side-menu.open{

left:0;

}

.side-menu button{

width:100%;

margin-bottom:12px;

}

.menu-overlay{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.35);

z-index:1000;

}

.menu-overlay.show{

display:block;

}

/* ================== Modal ==================*/

.modal{

    display:none;

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,0.5);

    justify-content:center;

    align-items:center;

}

.modal-content{

    background:white;

    padding:30px;

    border-radius:20px;

    width:320px;

    text-align:center;

}

/* ===============================
   Birthday Select
================================ */

.birthday-select {

    display: flex;

    gap: 10px;

    width: 100%;

}


.birthday-select select {

    flex: 1;

    height: 45px;

    padding: 0 12px;

    border-radius: 10px;

    border: 1px solid #ddd;

    background-color: white;

    font-size: 16px;

    color: #333;

    outline: none;

    appearance: none;

    background-image:
    linear-gradient(45deg, transparent 50%, #777 50%),
    linear-gradient(135deg, #777 50%, transparent 50%);

    background-position:
    calc(100% - 15px) 19px,
    calc(100% - 10px) 19px;

    background-size:
    5px 5px,
    5px 5px;

    background-repeat: no-repeat;

}


.birthday-select select:focus {

    border-color: #ff7a00;

    box-shadow:
    0 0 0 3px rgba(255,122,0,0.15);

}


/* Mobile adjustment */

@media (max-width: 480px){

    .birthday-select {

        gap: 6px;

    }


    .birthday-select select {

        font-size: 14px;

        height: 42px;

        padding-left: 8px;

    }

}

/* ================== Utilities ==================*/