/* TRIGGER BUTTON */
.arena-booking-trigger {
    display: flex;
    max-width: 520px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    cursor: pointer;
    margin: 20px 0;
}
.arena-trigger-red {
    background: #e74c3c;
    color: #fff;
    padding: 18px 45px;
    font-size: 18px;
    font-weight: 600;
    flex: 0 0 45%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arena-trigger-white {
    flex: 1;
    padding: 18px 30px;
    display: flex;
    align-items: center;
    color: #555;
}

/* MODAL */
.arena-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center;
    z-index: 99999;
}
.arena-modal-content {
    background: #fff; padding: 30px; border-radius: 12px; width: 90%; max-width: 520px;
    position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.arena-close { position: absolute; top: 12px; right: 20px; font-size: 32px; cursor: pointer; color: #aaa; }

/* Progress Bar */
.progress-bar { height: 6px; background: #eee; border-radius: 3px; margin-bottom: 25px; overflow: hidden; }
.progress { height: 100%; background: #e74c3c; width: 20%; transition: width 0.4s; }

/* Steps */
.step { display: none; }
.step.active { display: block; }
.option-label { display: block; padding: 12px; margin: 8px 0; background: #f9f9f9; border-radius: 6px; cursor: pointer; }
.option-label:hover { background: #f0f0f0; }
.arena-modal input[type="text"], 
.arena-modal input[type="email"], 
.arena-modal input[type="tel"], 
.arena-modal input[type="date"], 
.arena-modal input[type="number"], 
.arena-modal select {
    width: 100%; padding: 14px; margin: 10px 0; border: 1px solid #ddd; border-radius: 6px; font-size: 16px;
    box-sizing: border-box;  /* Ensure consistent sizing */
}
.arena-modal input[type="date"] {
    position: relative;  /* Fix for calendar icon alignment */
    appearance: none;  /* Remove default browser styles if causing issues */
    padding-right: 40px;  /* Space for calendar icon */
}
.arena-modal input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #333;  /* Customize icon color if needed */
}
.summary-box {
    background: #f8f9fa; padding: 20px; border-radius: 8px; line-height: 1.8; margin: 15px 0;
}
.option-label input { margin-right: 10px; }
#arena-confirm { margin-top: 15px; width: 100%; padding: 14px; background: #e74c3c; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.package-price { font-weight: bold; color: #e74c3c; }
.error-msg { display: block; color: #e74c3c; font-size: 14px; margin-top: -8px; margin-bottom: 10px; }

/* Buttons */
.arena-next, .arena-prev { margin-top: 15px; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; }
.arena-next { background: #e74c3c; color: #fff; }
.arena-prev { background: #ddd; color: #333; margin-right: 10px; }