/* Add your styling here to make the page appealing and simple */
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f2f5; }
.container { text-align: center; background: white; padding: 40px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.logo { max-width: 150px; margin-bottom: 20px; }
input { width: 100%; padding: 15px; margin: 20px 0; font-size: 1.2em; }
button { width: 100%; padding: 15px; background-color: #007bff; color: white; border: none; font-size: 1.2em; cursor: pointer; }
.guide-image { max-width: 300px; margin-top: 20px; }
.error { color: red; margin-top: 10px; }
/* General button styling */
.btn {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background-color: #007bff; /* Primary button color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    text-decoration: none; /* In case it's an anchor */
    transition: background-color 0.2s ease;
    margin-top: 15px; /* Spacing between buttons/coupon */
}

.btn:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d; /* Secondary button color */
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Specific styling for the print area buttons */
.print-area-buttons {
    margin-top: 20px; /* Space between tour details and buttons */
    text-align: center; /* Center content within this div */
}

.coupon-image {
    max-width: 100%;
    height: auto;
    margin-top: 20px; /* Space above coupon */
    margin-bottom: 20px; /* Space below coupon */
    display: block; /* Ensures it takes its own line for margin */
}

.print-message {
    margin-top: 10px;
    font-size: 0.9em;
    color: #666;
}

/* --- PRINT STYLES (in print.css as well, but this is a fail-safe) --- */
/* Hide buttons on print */
@media print {
    .btn, .print-message, .coupon-image { /* Include coupon if it shouldn't print */
        display: none !important;
    }
    /* Ensure other content is visible */
    body {
        margin: 0;
        padding: 0;
    }
    .container, .boarding-pass-details {
        box-shadow: none;
        border: none;
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
    }
    /* Make text black for printing */
    .boarding-pass-details h2, .boarding-pass-details p, .boarding-pass-details span {
        color: black !important;
    }
}
/* Add these styles to your existing style.css file */

.btn-secondary {
    background-color: #6c757d; /* A grey color for secondary actions */
    margin-top: 10px;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.coupon-image {
    display: block;
    max-width: 250px;
    margin: 20px auto; /* Center the coupon image */
}