/* styles.css */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body, html {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Updated font */
  background-image: url('../images/banners/form_background.jpg');
  background-attachment: fixed; /* Keep the background image fixed in place */
  background-size:cover; /* Stretch the image to cover the entire viewport */
  background-position: left; /* Center the image in the viewport (optional, but often looks better) */
  background-repeat: no-repeat; /* Prevent the image from repeating if it's smaller than the viewport (optional but recommended) */
  min-height: 100vh; /* Ensure minimum height of viewport */
  display: flex;
  flex-direction: column; /* Stack children vertically */
}

/* -----------------------------------------HEADER------------------------------------------------ */

.header {
  height: 100px;
  width: 100%;
  background-color: #feca16;
  display: flex;
  justify-content:space-between;
  align-items: center; /* Vertically center items */
  padding: 0 36px 0 8px; /* Add some side padding */
  position: relative; /* Needed for logo container positioning */
  box-shadow: 1px 11px 8px 3px rgba(0, 0, 0, 0.2);
}

.back-button {
  background-color: white; /* Initial white background */
  color: #feca16;        /* Initial #feca16 text color */
  border: 3px solid white; /* White border */
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 18px; /* Increased font size */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;    /* For pseudo-element positioning */
  overflow: hidden;      /* Clip pseudo-element during animation */
  transition: background-color 0.5s ease, color 0.5s ease; /* Smooth text color transition */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}

.back-button:hover {
  color: white;        /* Keep text #feca16 on hover */
  background-color: #feca16; /* Change background to white on hover */
}

.back-text {
  margin-left: 5px; /* Space between arrow and text */
}

.logo-container {
  width: 100px; /* Adjust as needed to make it square */
  height: 100px; /* Make it square */
  left: 50%; /* Center horizontally initially */
  transform: translateY(50%); /* Fine-tune horizontal centering */
  bottom: 0px; /* Align bottom edge with header bottom initially */
  overflow: visible; /* Allow logo image to extend outside */
  border-radius: 5px;
  background-color: #feca16;
  display: flex;
  justify-content: center;
}

.logo-container:before {
  position: absolute;
  border-radius: 5px;
  color: grey;
  content: '';
  width: 100%;
  height: 50%;
  top: 50%;
  left: 0;
  box-shadow: 0 10px 15px -3px;
  z-index: -1;
}

.logo-image {
  width: 90%; /* Make image fill the container width */
  height: auto; /* Maintain aspect ratio */
  position: absolute; /* Position relative to logo container */
  top: 50%; /* Start from the vertical center of the logo container */
  transform: translateY(-50%); /* Move up by half of its own height to center vertically */
   /* Optional shadow for depth */
}


.account-button {
  color: #feca16;
  background-color: white;
  border: 3px solid white;
  padding: 15px 17px;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
  transition: background-color 0.5s ease, color 0.5s ease;
  font-size: 18px; /* Increased font size */
}

.account-button:hover {
  background-color: #feca16; /* Change background to #feca16 on hover */
  color: white; /* Change text color to white on hover */
}

/*---------------------------------TITLE-------------------------------------- */

section[title="heading-section"] { /* Target the section using attribute selector for title */
  /* Optional: Add some basic styling to the section itself */
  padding: 20px;
  text-align: center; /* Fallback text alignment if flex centering fails or for basic cases */
}

.heading-container {
  display: flex; /* Enable flexbox */
  justify-content: center; /* Horizontally center content along the main axis */
  align-items: center; /* Vertically center content along the cross axis */
  min-height: 100px; /* Optional: Set a minimum height for the container to see vertical centering clearly */
  /* Optional: Add a background color to the container for visualization */
  /* background-color: rgba(0, 0, 255, 0.1); /* Light blue background for container */
}

.heading {
  font-weight: 600; /* Slightly lighter font weight */
  font-size: 3.0em; /* Increased font size */
  color: #2c3e50; /* Darker color for better contrast */
  margin: 0; /* Reset default margin for h1 */
  text-align: center; /* Ensure text alignment is centered within the h1 itself as well, just in case */
  padding-top: 2%;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle text shadow */
}

/* ---------------------------------TABS-------------------------------------------- */

section[title="tabs-section"] {
  /* Optional: Basic styling for the section */
  padding: 10px 0; /* Add some vertical padding to the section */
  overflow: hidden; /* To contain floated or positioned elements if needed */
}

.tabs-container {
  display: flex; /* Enable flexbox for horizontal tab layout */
  justify-content: center; /* Center tabs horizontally */
}

.tab-links {
  list-style: none; /* Remove default list bullets */
  padding: 0;
  margin: 0;
  display: flex; /* Ensure ul also behaves as a flex container if needed for specific layout */
}

.tab {
  background-color: white;
  padding: 20px 35px; /* Spacing inside each tab */
  border-right: 1px solid #ccc; /* Thin grey border to the right of each tab */
  border-bottom: 1px solid white;
  cursor: pointer; /* Change cursor to pointer on hover */
  transition: border-color 0.3s ease, transform 0.3s ease; /* Smooth transitions for border and transform */
  margin-bottom: -1px; /* Overlap bottom border of tabs with container border if needed */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
  font-weight: 500; /* Slightly bolder font weight */
}

/* Remove border from the last tab to avoid double border at the end */
.tab:last-child {
  border-right: none;
}

.tab a {
  text-decoration: none; /* Remove underline from links */
  font-size: 1.2em; /* Increased font size */
  font-weight: 600; /* Bolder font weight */
  color: #34495e; /* Darker color */
  display: block; /* Make link fill the entire tab area for better click target */
}


.tab:hover {
  border-bottom: 2px solid #feca16; /* #feca16 border on hover - adjust thickness as needed */
  transform: translateY(-10px); /* Move up slightly on hover */
  z-index: 1; /* Ensure hovered tab is above adjacent tabs if needed for border visibility */
}

/* Optional: Styling for the active tab - if you have JavaScript to manage active tabs */
.tab.activeTab {
  border-bottom: 2px solid #feca16; /* Keep #feca16 border for active tab */
  /* Add other active tab styles as needed */
}

/* ---------------------------------FORM SECTION-------------------------------------------- */

section[title="form-section"] {
  padding: 20px 0; /* Add some vertical padding to the section */
  overflow: visible; /* Changed from hidden to allow content to flow */
  display: flex;
  justify-content: center; /* Center the form container horizontally */
  flex: 1; /* Allow this section to grow and push footer down */
}

.form-container {
  background-color: white;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Shadow from header/buttons */
  width: 100%; /* Initial width, will be adjusted to match tab links */
  max-width: 900px; /* Example max width, adjust as needed */
  padding: 20px 60px;
  display: flex; /* Use flexbox for form sections */
  flex-direction: column; /* Stack form sections vertically */
}

.section {
  padding: 20px 0;
  display: none; /* Initially hide all sections */
  flex-direction: column; /* Stack form elements vertically within each section */
}

.section.activeTab {
  display: flex; /* Show active section */
  align-items: center;
}

.form-section {
  font-size: 2.0em; /* Increased font size */
  font-weight: 700; /* Bolder font weight */
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: left; /* Align section headings to the left */
}

.textbox,
.custom-file-upload,
.button {
  padding: 14px 18px; /* Increased padding */
  margin-bottom: 18px; /* Increased margin */
  border: 1px solid #bdc3c7; /* Slightly darker border */
  border-radius: 5px; /* Rounded corners */
  font-size: 1.1em; /* Increased font size */
  width: 100%; /* Full width of container */
  box-sizing: border-box; /* Include padding and border in element's total width and height */
  color: #34495e; /* Darker text color */
}

.textbox::placeholder {
  color: #777; /* Darker placeholder text */
  font-style: italic; /* Italicize placeholder text */
}

.custom-file-upload {
  display: inline-block; /* Allows setting width and height */
  background-color: #eee; /* Light grey background for file upload label */
  text-align: left;
  cursor: pointer; /* Indicate it's clickable */
  position: relative; /* For icon positioning */
  overflow: hidden; /* Clip content */
}

.custom-file-upload i {
  margin-left: 10px;
}

.custom-file-upload + input[type="file"] {
  position: relative;
  left: 0;
  top: 0;
  opacity: 0; /* Make file input invisible but still functional */
  width: 100%;
  height: auto;
  cursor: pointer;
}

.button-wrapper {
  text-align: right; /* Align buttons to the right */
  margin-top: 10px;
}

.button,
.next-button,
.submit-form-btn,
.add-player {
  background-color: #feca16; /* Yellow button background */
  color: #34495e; /* Darker text color */
  border: none; /* Remove default button border */
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth color transition */
  display: inline-block; /* Allows setting width if needed */
  text-align: center;
  text-decoration: none; /* Remove underlines from button links if used as <a> */
  font-weight: 600; /* Bolder font weight */
  font-size: 1.1em; /* Increased font size */
  padding: 14px 28px; /* Adjusted padding */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Added shadow */
}

.button:hover,
.next-button:hover,
.submit-form-btn:hover,
.add-player:hover {
  background-color: #d9ad0b; /* Darker yellow on hover */
  color: #2c3e50; /* Darker color on hover */
}


.next-button {
  padding: 12px 25px;
  display: inline-block; /* For spacing and alignment */
  margin-top: 10px;
  text-align: center;
}

.submit-form-btn {
  padding: 15px 30px;
  font-size: 1.1em;
}

.add-player {
  padding: 10px 20px;
  font-size: 1em;
}

.current-players-container {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #f0f0f0; /* Light grey background for player list area */
}

.current-players-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: #34495e; /* Darker color */
    font-size: 1.3em; /* Increased font size */
}

#current-players {
    font-style: normal; /* Removed italic style */
    color: #444; /* Darker color */
    font-size: 1.1em; /* Increased font size */
}

/* Radio button and label styling for consent section */
section[title="form-section"] .section span {
    display: block; /* Stack radio buttons and labels vertically */
    margin-bottom: 10px;
}

section[title="form-section"] .section input[type="radio"] {
    margin-right: 5px;
    vertical-align: middle; /* Align radio button with label text */
}

section[title="form-section"] .section label {
    font-size: 1.1em; /* Increased font size */
    color: #34495e; /* Darker color */
    font-weight: 500; /* Adjusted font weight */
}

section[title="form-section"] .section p {
    font-weight: 600; /* Bolder font weight */
    margin-bottom: 5px;
    color: #34495e; /* Darker color */
}

/* Payment section specific styling (adjust as needed) */
section[title="form-section"] #section6 p {
    margin-bottom: 8px;
}

/* ------------------ERROR STYLING------------------------------ */

.error-message {
  color: #c0392b; /* Darker red */
  font-weight: 600; /* Bolder font weight */
  padding: 5px 0;
  margin-bottom: 5px;
  font-size: 1em; /* Increased font size */
}

.error-message.active {
  display: block; /* Show error message when 'active' class is added */
  margin-right: auto;
}

.textbox.invalid,
.custom-file-upload.invalid {
  border-color: red; /* Highlight invalid input with red border */
}

/* Add asterisk for required fields */
.textbox[required]::placeholder,
.custom-file-upload + input[required] + label::after {
    content: " *";
    color: black;
}

/* Make error messages more prominent */
.error-message {
    color: #d9534f;
    font-weight: bold;
    padding: 5px 0;
    margin-bottom: 5px;
}

/* Highlight fields with errors */
.textbox.invalid,
.invalid + .custom-file-upload {
    border: 2px solid #d9534f;
    background-color: rgba(217, 83, 79, 0.1);
}


/* ------------------PAYMENT OPTIONS------------------------------ */
.payment-options {
    display: flex;
    justify-content: center;
    margin: 10px 0;
    gap: 30px;
}

.payment-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 200px;
}

.payment-option:hover {
    background-color: #f5f5f5;
    transform: translateY(-5px);
}

.payment-option i {
    margin-bottom: 10px;
    color: #555;
}

.payment-option.selected i {
    color: #feca16;
}

.payment-option p {
    margin: 0;
    font-weight: 600; /* Bolder font weight */
    font-size: 1.1em; /* Increased font size */
    color: #34495e; /* Darker color */
}

/* Payment Success Message Styling */
.payment-success-message {
    margin: 15px 0 25px;
}
.alert {
    padding: 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
}
.alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
.alert i {
    font-size: 24px;
    margin-right: 15px;
}
.alert p {
    margin: 0;
    font-weight: 500; /* Adjusted font weight */
    font-size: 1.1em; /* Increased font size */
    color: #27ae60; /* Darker green */
}


    /* Payment success message styles */
    .payment-success-message {
        margin-bottom: 20px;
    }
    .alert {
        padding: 15px;
        border-radius: 5px;
        display: flex;
        align-items: center;
    }
    .alert-success {
        background-color: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
    }
    .alert i {
        font-size: 24px;
        margin-right: 15px;
    }
    .alert p {
        margin: 0;
    }
    .payment-btn {
        background-color: #feca16 !important;
    }
    
    /* Add styles for payment options */
    .payment-options {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .payment-option {
        border: 2px solid #ddd;
        border-radius: 5px;
        padding: 15px;
        cursor: pointer;
        flex: 1;
        text-align: center;
        transition: all 0.3s ease;
    }
    
    .payment-option:hover {
        background-color: #f9f9f9;
    }
    
    .payment-option.selected {
        border-color: #feca16;
    }

/* QR Code container styling */
.qr-code-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.3s ease-out, margin 0.5s ease-out;
    opacity: 0;
    text-align: center;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-code-container.visible {
    max-height: 500px; /* Adjust based on your QR code size */
    opacity: 1;
    margin: 20px 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    background-color: #f9f9f9;
}

.qr-code-image {
    max-width: 250px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
    transition: transform 0.3s ease-out;
}

.qr-code-container.visible .qr-code-image {
    transform: scale(1);
}

.qr-instructions {
    margin-top: 15px;
    font-size: 1.1em;
    color: #34495e;
    font-weight: 500;
}

/* PayPal container styling */
.paypal-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.3s ease-out, margin 0.5s ease-out;
    opacity: 0;
    text-align: center;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.paypal-container.visible {
    max-height: 300px;
    opacity: 1;
    margin: 20px 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    background-color: #f9f9f9;
}

.paypal-button-container {
    margin-bottom: 10px;
}

.paypal-button-image {
    max-width: 250px;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
    transition: transform 0.3s ease-out;
    cursor: pointer;
}

.paypal-container.visible .paypal-button-image {
    transform: scale(1);
}

.paypal-instructions {
    margin-top: 15px;
    font-size: 1.1em;
    color: #34495e;
    font-weight: 500;
}

/* Updated PayPal button styling */
.paypal-initialize-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: inline-block;
}

.paypal-initialize-button:hover {
    transform: scale(1.05);
}

.paypal-button-image {
    max-width: 250px;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* Payment Modal Styling */
.payment-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow: auto;
}

.payment-modal.show {
    display: block;
    opacity: 1;
}

.payment-modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 80%;
    max-width: 500px;
    transform: translateY(-50px);
    transition: transform 0.3s ease;
    position: relative;
}

.payment-modal.show .payment-modal-content {
    transform: translateY(0);
 }

.payment-modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.payment-modal-close:hover {
    color: #555;
}

.payment-modal h3 {
    color: #2c3e50;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.payment-details {
    background-color: #f9f9f9;
    border-radius: 5px;
    padding: 15px;
    margin: 20px 0;
}

.payment-detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.payment-detail-row:last-child {
    margin-bottom: 0;
    font-weight: bold;
}

.payment-modal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.modal-button {
    padding: 12px 25px;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

.cancel-button {
    background-color: #e74c3c;
    color: white;
}

.cancel-button:hover {
    background-color: #c0392b;
}

.confirm-button {
    background-color: #2ecc71;
    color: white;
}

.confirm-button:hover {
    background-color: #27ae60;
}

/*---------------------------------FOOTER-------------------------------------- */
.footer {
  background-color: #34495e; /* Darker background color */
    color: white;
    text-align: center;
    padding: 20px 0;
    width: 100%;
    font-size: 1.1em; /* Increased font size */
    margin-top: auto; /* Push to the bottom */
    position: relative; /* Changed from absolute */
  }

.footer .container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer p {
    margin: 5px 0;
    font-weight: 500; /* Adjusted font weight */
}

.footer a {
    color: #feca16;
    text-decoration: none;
}

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

/* Payment Modal Styling */
    .tng-payment-section {
        display: none;
        margin-top: 20px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .tng-payment-section.active {
        display: block;
    }
    .tng-reference {
        font-weight: bold;
        color: #e91e63;
        font-size: 1.1em;
        margin: 10px 0;
    }
    .payment-proof-container {
        margin: 15px 0;
    }
    .payment-proof-preview {
        max-width: 300px;
        margin-top: 10px;
        border: 1px solid #ccc;
        display: none;
    }
    .upload-button, .confirm-payment-button {
        padding: 8px 15px;
        background-color: #feca16;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .upload-button:hover, .confirm-payment-button:hover {
        background-color: #45a049;
    }
    .confirm-payment-button {
        background-color: #2196F3;
    }
    .confirm-payment-button:hover {
        background-color: #0b7dda;
    }
    .payment-instructions {
        margin-bottom: 15px;
        padding: 10px;
        background-color: #f8f9fa;
        border-left: 3px solid #007bff;
    }

/* Touch 'n Go payment section styling */
.tng-payment-section {
    display: none;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
}

.payment-proof-container {
    margin: 15px 0;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payment-proof-preview {
    max-width: 300px;
    max-height: 200px;
    margin-top: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: none;
    object-fit: contain;
}

/* Remove the confirm-payment-button specific styles since we're using the main submit button */
/* Styles for the main submit button when used with TnG */
.submit-form-btn.payment-btn {
    margin-top: 20px;
    width: 100%;
    min-width: 250px;
}

.submit-form-btn.payment-btn:hover {
    background-color: #0b7dda;
}

.submit-form-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.payment-instructions {
    margin-bottom: 15px;
    padding: 15px;
    background-color: #f8f9fa;
    border-left: 3px solid #007bff;
    border-radius: 5px;
    font-size: 1.05em;
}

.tng-reference {
    font-weight: bold;
    color: #e91e63;
    font-size: 1.1em;
    padding: 5px 10px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    display: inline-block;
    margin: 5px 0;
}

/* Remove the upload button since we now use the label */
#upload-proof-btn {
    display: none;
}

/* PayPal Button Trigger Styling */
.paypal-button-trigger {
    display: none;
    text-align: center;
    margin: 20px 0;
}

.open-paypal-modal {
    background-color: #0070ba;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 24px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.open-paypal-modal i {
    margin-right: 8px;
    font-size: 1.2em;
}

.open-paypal-modal:hover {
    background-color: #005ea6;
}

/* PayPal Modal Specific Styling */
.paypal-modal-content {
    max-width: 550px;
}

.paypal-button-container {
    margin: 20px 0;
    min-height: 45px;
}

/* Hide the original paypal container */
.paypal-container {
    display: none;
}