/* ===============================
   General Form Styling
=============================== */


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

.ticket-header {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #ff9933, #ffffff, #138808);
    border-radius: 10px;
    margin-bottom: 20px;
}

.header-greeting {
    font-weight: bold;
    font-size: 18px;
}

.header-title {
    font-size: 22px;
    font-weight: 700;
    margin: 5px 0;
}

.header-subtitle {
    font-size: 16px;
}

.header-contact {
    font-size: 13px;
    margin-top: 10px;
}

/* ===============================
   Ticket Number Section
=============================== */

.ticket-number-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px dashed #ff9933;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #fffaf0;
}

.ticket-number-box {
    text-align: center;
}

.ticket-number {
    font-size: 26px;
    font-weight: bold;
    color: #d35400;
}

.ticket-banner {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.qr-placeholder {
    font-size: 16px;
    font-weight: bold;
}

/* ===============================
   Quick Amount Buttons
=============================== */

.quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.quick-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid #ff9933;
    background: #fff;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    transition: 0.3s;
}

.quick-btn:hover {
    background: #ff9933;
    color: #fff;
}

.quick-btn.active {
    background: #138808;
    color: #fff;
    border-color: #138808;
}

/* ===============================
   Event Section
=============================== */

.event-section {
    margin-top: 25px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
}

.event-title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 700;
}

.event-details {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.event-column {
    width: 48%;
}

.event-text {
    font-size: 14px;
    margin-bottom: 5px;
}

.small-text {
    font-size: 12px;
}

/* ===============================
   Signature Section
=============================== */

.signature-section {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}

.signature-item {
    width: 48%;
}

.signature-line {
    border-bottom: 1px solid #000;
    height: 30px;
    margin-top: 20px;
}

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

button[type="submit"] {
    width: 100%;
    padding: 12px;
    background: #ff9933;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

button[type="submit"]:hover {
    background: #e67e22;
}

/* ===============================
   Footer
=============================== */

.ticket-footer {
    margin-top: 30px;
    text-align: center;
    font-size: 13px;
    color: #555;
}

/* ===============================
   Responsive
=============================== */

@media (max-width: 768px) {

    .ticket-number-section {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .event-column,
    .signature-item {
        width: 100%;
        margin-bottom: 10px;
    }

    .quick-btn {
        flex: 48%;
    }
}