/* css/style.css */

body {
    font-family: sans-serif;
    background-image: url('/images/cadaques.jpg'); /* Replace with your image */
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

/* Background for index.html */
.index-background {
    background-image: url('/images/tuscany.jpg'); /* Replace with your index page image */
    background-size: cover;
    background-repeat: no-repeat;
}

/* Background for search.php */
.search-background {
    background-image: url('/images/esvedra.jpg'); /* Replace with your search page image */
    background-size: cover;
    background-repeat: no-repeat;
}

/* Background for payment.php */
.payment-background {
    background-image: url('/images/macchupichu.jpg'); /* Replace with your payment page image */
    background-size: cover;
    background-repeat: no-repeat;
}

.chat-container, .payment-container {
    width: 50vw;              /* 50% of the viewport width */
    max-width: 800px;         /* Optional: cap it to avoid huge widths */
    height: 80vh;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;           /* Center horizontally */
}

.chat-header, .payment-header { /* Added payment-header */
    background-color: rgba(74, 74, 74, 0.9);
    color: #fff;
    padding: 15px;
    text-align: center;
    font-weight: bold;
}

.chat-display, .payment-display { /* Added payment-display */
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    border-bottom: 1px solid #ddd;
}

.chat-input, .payment-input { /* Added payment-input */
    display: flex;
    padding: 10px;
}

.chat-input input, .payment-input input { /* Added payment-input input */
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
}

.chat-input button, .payment-input button { /* Added payment-input button */
    background-color: rgba(102, 102, 102, 0.9);
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
}

.chat-display p, .payment-display p { /* Added payment-display p */
    margin-bottom: 8px;
}

.chat-display p:nth-child(even), .payment-display p:nth-child(even) { /* Added payment-display p:nth-child(even) */
    background-color: #f0f0f0;
    padding: 8px;
    border-radius: 4px;
}

/* Add any additional styles here */
#card-element {
    width: 100%; /* Explicit width */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
}

#card-errors {
    color: red;
    margin-top: 5px;
}

.payment-input {
    width: 100%; /* Ensure payment-input has 100% width */
}

.payment-container {
    width: 100%; /* Ensure payment-container has 100% width */
    max-width: 400px;
}

.footer {
    background-color: #f0f0f0; /* Light gray background */
    padding: 20px;
    text-align: center;
    border-top: 1px solid #ccc; /* Optional border */
}

.footer-links {
    margin-bottom: 10px;
}

.footer-links a {
    margin: 0 10px;
    text-decoration: none;
    color: #333;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-copyright {
    font-size: 0.8em;
    color: #666;
}

@media (max-width: 768px) {
    .chat-container, .payment-container {
        width: 90vw;         /* Wider on mobile */
        max-width: none;     /* Remove max-width cap for phones */
    }
}