/* ================================
   Base Layout & Typography
================================ */
body {
  background: linear-gradient(135deg, #e0f2f1 0%, #3c4847 100%); /* Tealish gradient */
  min-height: 100vh;
  margin: 0;
  padding: 0; /* Remove padding from body, apply to containers if needed */
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  color: #333; /* Darker grey for better contrast */
  display: flex;
  flex-direction: column; /* Allow header/footer to stack with main content */
  align-items: center;
  justify-content: space-between; /* Pushes footer down if content is short */
  line-height: 1.6;
}

.page-container {
  width: 100%;
  max-width: 1200px; /* Max width for the overall page content */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure it takes full viewport height */
}

/* ================================
   Header & Footer Banners
================================ */
.header-banner,
.footer-banner {
  width: 100%;
  text-align: center; /* Center the image if it's smaller than the container */
}

.header-banner {
  margin-bottom: 2rem; /* Space below header image */
}

.footer-banner {
  margin-top: auto; /* Pushes footer to the bottom */
  padding-top: 2rem; /* Space above footer image */
}

.header-image,
.footer-image {
  max-width: 100%;
  height: auto;
  display: block; /* Remove extra space below image */
  margin: 0 auto; /* Center the image */
}

/* ================================
   Main Content & Landing Box
================================ */
.main-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1; /* Allows main content to take available space */
  padding: 2rem 1rem; /* Padding around the landing box */
  width: 100%;
}

.landing-box {
  background: #ffffff;
  padding: 2.5rem 3rem;
  border-radius: 25px;
  /* max-width: 800px; */ /* Current value */
  max-width: 700px; /* Option 1: Slightly wider */
  /* max-width: 960px; */ /* Option 2: Common wider value */
  /* max-width: 1140px; */ /* Option 3: Closer to common container widths for very wide screens */
  width: 100%;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
  text-align: left;
  border-top: 5px solid #00796b;
  margin-left: auto; /* Ensure it's centered */
  margin-right: auto; /* Ensure it's centered */
}

/* CSS for css/halalfcw2025.css */

/* ... (your existing styles for .cta-section, .btn-register, .logo-container, .logo) ... */

/* Styling for the new "Prepared by" heading */
.logo-container h4 {
  font-size: 0.9rem; /* Or your preferred size */
  color: #555;      /* A slightly muted color, adjust as needed */
  font-weight: 400; /* Regular weight, or 600 for semi-bold */
  margin-top: 2.5rem; /* Space above "Prepared by" - adjust this significantly if needed */
  margin-bottom: 0.75rem; /* Space between "Prepared by" and the logo */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* You might want to adjust the top margin of the logo-container itself
   if the new heading makes the spacing feel off from the CTA button.
   The .logo-container already has text-center.
*/
.logo-container {
  /* text-center is already applied via class in HTML */
  margin-bottom: 1.5rem; 
  /* Add any other specific styles for the container if its role changed */
}

/* Ensure the logo still looks good in this new position */
.logo {
  max-width: 250px; /* Or the size you decided on earlier e.g. 150px */
  height: auto;
  transition: transform 0.3s ease-in-out;
  /* mb-4 is applied via class in HTML, which is Bootstrap for margin-bottom: 1.5rem. Adjust if needed */
}

.logo:hover {
  transform: scale(1.1);
}

.registration-page-logo {
  height: 30px !important;
  width: auto;             /* Add this to let width adjust proportionally to the fixed height */
  max-width: auto;         /* The width will not exceed this, even if it means distorting from the 30px height */
  display: block;          /* Optional: can help with layout and removing extra space below image */
  margin-left: auto;       /* Optional: if you want to re-center it if it's in a block container */
  margin-right: auto;      /* Optional: if you want to re-center it */
}

.event-title {
  font-family: 'Playfair Display', serif; /* Elegant serif for title */
  font-size: 2.6rem; /* Larger title */
  font-weight: 700;
  color: #004d40; /* Dark teal */
  margin-bottom: 2rem; /* More space below title */
  line-height: 1.3;
  text-align: center; /* Center title */
}

.event-title i {
  color: #00796b; /* Accent color for icon */
  margin-right: 0.75rem;
}

/* ================================
   Event Details Section
================================ */
.event-details {
  margin-bottom: 2.5rem; /* More space below details */
}

.detail-item {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  color: #455a64; /* Softer text color */
  margin-bottom: 1rem; /* Space between detail items */
  padding: 0.5rem;
  border-left: 3px solid #80cbc4; /* Light teal left border */
  background-color: #f4f9f8; /* Very light background for detail items */
  border-radius: 0 8px 8px 0;
}

.detail-item i {
  color: #00796b; /* Accent color */
  font-size: 1.5rem; /* Larger icons */
  margin-right: 1rem;
  min-width: 25px; /* Ensure icons align well */
}

.detail-item strong {
  color: #004d40; /* Dark teal for emphasis */
  margin-right: 0.5rem;
}

/* Custom styles for modern radio buttons */
.btn-group-accommodation .btn {
  border-radius: 50px; /* Pill shape */
  padding: 0.5rem 1.5rem; /* Adjust padding as needed */
  font-weight: 500;
  transition: all 0.3s ease;
  border-width: 1px; /* Ensure border width is consistent */
}

/* Style for when the radio button is checked */
.btn-group-accommodation .btn-check:checked + .btn {
  background-color: #0d6efd; /* Bootstrap primary blue, or your theme's primary color */
  color: white;
  border-color: #0d6efd; /* Match background color */
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.25); /* Optional: subtle shadow for active state */
}

/* Style for unchecked buttons (if you used btn-outline-primary) */
.btn-group-accommodation .btn-check:not(:checked) + .btn-outline-primary {
  color: #0d6efd; /* Ensure text color matches outline or is readable */
}

/* Hover effect for unchecked buttons */
.btn-group-accommodation .btn-check:not(:checked) + .btn:hover {
  background-color: rgba(13, 110, 253, 0.1); /* Light tint of primary on hover */
}

/* ================================
   Call to Action (CTA) Button
================================ */
.cta-section {
  margin-top: 1.5rem; /* Adjusted margin */
}

.btn-register {
  background: linear-gradient(135deg, #00796b, #004d40); /* Teal gradient button */
  border: none;
  padding: 0.85rem 2.5rem; /* Slightly larger padding */
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-radius: 50px; /* Pill shape */
  display: inline-block;
  font-size: 1.1rem; /* Larger font size */
  box-shadow: 0 4px 15px rgba(0, 121, 107, 0.3); /* Shadow matching button color */
  transition: all 0.3s ease; /* Smooth transition for all properties */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-register:hover,
.btn-register:focus {
  background: linear-gradient(135deg, #004d40, #00796b); /* Reverse gradient on hover */
  color: #ffffff;
  transform: translateY(-3px); /* Slight lift effect */
  box-shadow: 0 6px 20px rgba(0, 121, 107, 0.4);
}

.btn-register i {
  margin-right: 0.5rem;
}

.thank-you-box .logo-img {
  max-width: 170px; /* Sets the maximum width of the logo to 90 pixels. */
  height: auto;    /* Ensures the height adjusts proportionally to maintain the aspect ratio. */
  margin-bottom: 1.5rem; /* Adds space below the logo (1.5 times the root font size). */
  display: block; /* Makes the image a block-level element. */
  margin-left: auto; /* In conjunction with margin-right: auto and display: block, this centers the image if its container is wider. */
  margin-right: auto; /* In conjunction with margin-left: auto and display: block, this centers the image. */
}


/* ================================
   Responsive Design
================================ */
@media (max-width: 992px) {
  .landing-box {
    padding: 2rem 2.5rem;
  }
  .event-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  body {
    padding: 1rem 0.5rem; /* Add some padding for smaller screens if page-container is removed */
  }
  .header-banner {
    margin-bottom: 1.5rem;
  }
  .footer-banner {
    padding-top: 1.5rem;
  }
  .main-content {
    padding: 1.5rem 0.75rem;
  }
  .landing-box {
    padding: 2rem 1.5rem; /* Reduce padding on smaller screens */
    border-radius: 20px;
  }
  .event-title {
    font-size: 2rem;
  }
  .detail-item {
    font-size: 1rem;
    padding: 0.4rem;
  }
  .detail-item i {
    font-size: 1.3rem;
    margin-right: 0.75rem;
  }
  .btn-register {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    width: 100%; /* Full width button on smaller screens */
    max-width: 350px; /* Max width for the button */
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 576px) {
  .page-container {
    padding: 0; /* Remove padding if any for very small screens */
  }
  .main-content {
    padding: 1rem 0.5rem; /* Less padding for the content area */
  }
  .landing-box {
    padding: 1.5rem 1rem; /* Further reduce padding */
    border-top-width: 4px;
  }
  .logo {
    max-width: 120px;
  }
  .event-title {
    font-size: 1.7rem;
  }
  .detail-item {
    font-size: 0.9rem;
    flex-direction: column; /* Stack icon and text vertically */
    align-items: flex-start; /* Align to start for stacked items */
    border-left-width: 2px;
  }
  .detail-item i {
    margin-bottom: 0.3rem; /* Space between icon and text when stacked */
  }
  .btn-register {
    padding: 0.7rem 1.5rem;
  }
}