/* Import Google Font - League Spartan */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;700&display=swap');

/* Reset some default browser margins/paddings if needed for full width */
body {
    margin: 0;
    padding: 0;
}

/* Make all H2 to H5 same font size and style */
.left-content h2,
.left-content h3,
.left-content h4,
.left-content h5 {
    font-family: 'League Spartan', sans-serif;
    font-weight: 700;
    font-size: 36px; /* Increased font size */
    margin-top: 60px; /* More gap above headings */
    margin-bottom: 12px; /* More gap below headings */
    color: #f5f5dc;
    line-height: 0; /* Ensure readability */
}

/* H1 bigger */
.left-content h1 {
    font-family: 'League Spartan', sans-serif;
    font-weight: 700;
    font-size: 44px; /* Significantly increased H1 size */
    margin-bottom: 25px; /* More gap below H1 */
    margin-top: 65px;
    color: #f5f5dc;
    line-height: 2;
}

/* Paragraph styling */
.left-content p {
    font-family: 'League Spartan', sans-serif; /* Applied font to paragraphs too */
    font-size: 24px; /* Slightly larger paragraph text */
    line-height: 1.7; /* Increased line height for readability */
    margin-bottom: 24px; /* More gap below paragraphs */
    color: #f5f5dc;
}

/* Form container and layout - FULL WIDTH PURPLE BACKGROUND */
.book-collection-wrapper {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #5f0f40;
    color: #f5f5dc;
    flex-wrap: nowrap; /* prevent wrapping so it stays 2 columns */
    overflow: hidden;
}

.left-content,
.right-form {
    box-sizing: border-box;
    flex: 0 0 50%; /* Fix width exactly 50% */
    min-width: 0; /* override previous min-width to avoid forced wrapping */
    padding: 80px 40px; /* equal horizontal padding */
}

/* Adjust padding inside right form if needed */
.right-form {
    background: #f8f8f8;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Target the Contact Form 7 container specifically to control its width */
.right-form .wpcf7 {
    width: 100%; /* Allow CF7 form to take full width of right-form padding */
    max-width: 600px; /* Set a max-width for the form content itself for better readability */
    box-sizing: border-box;
margin-top: 60px;
}

.wpcf7-form h2 {
    text-align: center;
    margin-top: 40px;    /* NEW: adds space above */
    margin-bottom: 25px; /* existing bottom margin */
    color: #0a544c;
    font-family: 'League Spartan', sans-serif;
    font-size: 32px;
    font-weight: 700;
}

.wpcf7-form h3 {
    text-align: center;
    margin-top: 40px;    /* NEW: adds space above */
    margin-bottom: 25px; /* existing bottom margin */
    color: #0a544c;
    font-family: 'League Spartan', sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.wpcf7-form p {
    text-align: center;
    margin-bottom: 25px;
    color: #0a544c;
    font-family: 'League Spartan', sans-serif;
    font-size: 32px;
    font-weight: 700;
}

/* Label styling */
.wpcf7-form label {
    margin-bottom: 8px; /* Smaller margin below label text */
    font-weight: 600;
    color: #0a544c;
    font-size: 15px; /* Slightly smaller label text */
    font-family: 'League Spartan', sans-serif; /* Applied font */
}

/* Container for each row of 2 fields */
.flex-row {
    display: flex; /* Enables flexbox for side-by-side */
    gap: 20px; /* Space between fields in a row */
    margin-bottom: 15px; /* Space below the entire row */
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    width: 100%; /* Ensure flex-row takes full width to distribute children */
}

/* Each field label (which contains the input) takes roughly 50% width in a flex-row */
/* IMPORTANT: override wpcf7 label display:block by flex & column so label text & input stack nicely */
.flex-row > label {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 calc(50% - 10px); /* 50% minus half the gap */
    min-width: 150px; /* Minimum width before wrapping */
    margin-bottom: 0;
    box-sizing: border-box;
}

/* Ensure the input wrapper inside the label also allows the input to fill it */
.flex-row > label .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Inputs, selects and textarea styling inside flex-row labels */
.flex-row > label input,
.flex-row > label select,
.flex-row > label textarea,
.flex-row > label .wpcf7-form-control-wrap input.wpcf7-form-control,
.flex-row > label .wpcf7-form-control-wrap select.wpcf7-form-control,
.flex-row > label .wpcf7-form-control-wrap textarea.wpcf7-form-control,
.flex-row > label .wpcf7-form-control-wrap .wpcf7-form-control {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
}

/* Inputs, selects and textarea styling outside flex-row */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea,
.wpcf7-form input[type="date"],
.wpcf7-form input[type="time"],
.wpcf7-form input[type="number"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 14px;
    font-family: 'League Spartan', sans-serif;
}

/* Submit button styling */
.wpcf7-submit {
    background-color: #0a544c;
    color: #f5f5dc;
    border: none;
    padding: 14px 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-family: 'League Spartan', sans-serif;
    transition: background-color 0.3s ease;
    margin: 15px auto 0 auto;
    display: block;
}

.wpcf7-submit:hover {
    background-color: #084c45;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .left-content {
        padding: 40px;
    }
    .right-form {
        padding: 40px;
    }
    .left-content h1 {
        font-size: 38px;
    }
    .left-content h2, .left-content h3, .left-content h4, .left-content h5 {
        font-size: 24px;
    }
    .left-content p {
        font-size: 17px;
    }
    .wpcf7-form h2 {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .book-collection-wrapper {
        flex-direction: column;
    }
    
    .left-content,
    .right-form {
        flex: 1 1 100%;
        padding: 30px 20px;
        min-width: auto;
    }

    .left-content h1 {
        font-size: 32px;
    }
    .left-content h2, .left-content h3, .left-content h4, .left-content h5 {
        font-size: 22px;
    }
    .left-content p {
        font-size: 16px;
    }
    .wpcf7-form h2 {
        font-size: 24px;
    }

    /* Stack fields within flex-row on small screens */
    .flex-row {
        flex-direction: column;
        gap: 0;
    }

    .flex-row > label {
        min-width: auto;
        margin-bottom: 10px;
        flex: 1 1 100%;
    }
    
    .flex-row > label:last-child {
        margin-bottom: 0;
    }

    .flex-row > label input,
    .flex-row > label select,
    .flex-row > label textarea,
    .flex-row > label .wpcf7-form-control-wrap input,
    .flex-row > label .wpcf7-form-control-wrap select,
    .flex-row > label .wpcf7-form-control-wrap textarea,
    .flex-row > label .wpcf7-form-control-wrap .wpcf7-form-control {
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .left-content,
    .right-form {
        padding-top: 80px;
		margin-top: 40px;
    }
    .left-content h1 {
        font-size: 28px;
		display: block !important;
    visibility: visible !important;
    opacity: 1;
    }
    .left-content h2, .left-content h3, .left-content h4, .left-content h5 {
        font-size: 25px;
    }
    .left-content p {
        font-size: 20px;
    }
}
.book-collection-form input,
.book-collection-form textarea,
.book-collection-form select {
  background-color: #f5f5dc !important;
}