* {
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  margin: 0;
  padding: 40px;
  background: #fdf5f5;
}

.container {
  max-width: 1000px;
  margin: auto;
  background: #fff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #b91c1c;
  margin-bottom: 40px;
}

form {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.form-column {
  flex: 1 1 500px;
  min-width: 100%;
}

h3 {
  margin-top: 30px;
  color: #d32f2f;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

.txt_field {
  margin-bottom: 20px;
}

.txt_field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
}

.txt_field input,
.txt_field textarea,
.txt_field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  outline: none;
  transition: border 0.3s ease;
}

.txt_field input:focus,
.txt_field textarea:focus {
  border-color: #b91c1c;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

.checkbox-group,
.radio-group {
  margin-bottom: 20px;
}

.checkbox-group label,
.radio-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #444;
}

.checkbox-group input[type="text"] {
  margin-top: 10px;
}

input[type="checkbox"],
input[type="radio"] {
  margin-right: 8px;
}

.submit-btn {
  width: 100%;
  padding: 14px;
  background-color: #ed3b3b;
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 30px;
}

.submit-btn:hover {
  background-color: #b71c1c;
}

@media screen and (max-width: 768px) {
  form {
    flex-direction: column;
  }
}










/* Container for the tiles to control layout */
                    .checkbox-container {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 30px; /* Adjust spacing between tiles */
                        margin-top: 10px;
                        justify-content: center;
                    }

                    .section-label {
                        display: block;
                        font-weight: bold;
                        margin-bottom: 5px;
                    }

                    /* Hide the actual checkbox input */
                    .tile-option input[type="checkbox"] {
                        display: none;
                    }

                    /* Style the label as the tile */
                    .tile-option label {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        border: 2px solid #ccc;
                        border-radius: 8px;
                        padding: 10px;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        text-align: center;
                    }

                    .tile-option label:hover {
                        background-color: #f0f0f0;
                    }

                    /* Style the text below the image */
                    .tile-option label span {
                        font-size: 14px;
                        font-weight: 500;
                    }

                    /* Style the tile when it is checked */
                    .tile-option input[type="checkbox"]:checked + label {
                        border-color: #007bff; /* Highlight color for selected tile */
                        background-color: #e6f2ff;
                    }
                    .already-booked-tile {  
                        width: 250px; /* Match the width of the image tiles */
                        height: 245px; /* Match the height of the image tiles */
                        justify-content: center; /* Vertically center the text */
                    }
                    /* Container for the tiles to control layout */
                    .checkbox-container {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 30px; /* Adjust spacing between tiles */
                        margin-top: 10px;
                        justify-content: center;
                    }

                    .section-label {
                        display: block;
                        font-weight: bold;
                        margin-bottom: 5px;
                    }

                    /* Hide the actual checkbox input */
                    .tile-option input[type="checkbox"] {
                        display: none;
                    }

                    /* Style the label as the tile */
                    .tile-option label {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        border: 2px solid #ccc;
                        border-radius: 8px;
                        padding: 10px;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        text-align: center;
                    }

                    .tile-option label:hover {
                        background-color: #f0f0f0;
                    }

                  

                    /* Style the text below the image */
                    .tile-option label span {
                        font-size: 14px;
                        font-weight: 500;
                    }

                    /* Style the tile when it is checked */
                    .tile-option input[type="checkbox"]:checked + label {
                        border-color: #007bff; /* Highlight color for selected tile */
                        background-color: #e6f2ff;
                    }

                    /* New CSS for the "Already Booked" and custom tiles without an image */
                    .already-booked-tile,
                    #new-venue-options .tile-option label {
                        width: 330px; /* Match the width of the image tiles */
                        height: 220px; /* Match the height of the image tiles */
                        justify-content: center; /* Vertically center the text */
                    }

                    /* Style for the "Add More" button and container */
                    #show-add-more-btn, #add-venue-btn {
                        padding: 10px 20px;
                        border: none;
                        border-radius: 5px;
                        background-color: #007bff;
                        color: white;
                        cursor: pointer;
                        font-size: 16px;
                        margin-top: 0px;
                    }
                    #add-more-container {
                        display: flex;
                        gap: 10px;
                        margin-top: 20px;
                        justify-content: center;
                    }
                    #new-venue-input {
                        padding: 10px;
                        border: 1px solid #ccc;
                        border-radius: 5px;
                        font-size: 16px;
                        width: 250px;
                    }

                    #add-venue-btn {
                        background-color: #28a745;
                    }




                    /* Container for the tiles to control layout */
                    .checkbox-container {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 30px; /* Adjust spacing between tiles */
                        margin-top: 10px;
                        justify-content: center;
                    }

                    .section-label {
                        display: block;
                        font-weight: bold;
                        margin-bottom: 5px;
                    }

                    /* Hide the actual checkbox input */
                    .tile-option input[type="checkbox"],
                    .tile-option input[type="radio"] {
                        display: none;
                    }

                    /* Style the label as the tile */
                    .tile-option label {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        border: 2px solid #ccc;
                        border-radius: 8px;
                        padding: 10px;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        text-align: center;
                    }

                    .tile-option label:hover {
                        background-color: #f0f0f0;
                    }

            

                    /* Style the text below the image */
                    .tile-option label span {
                        font-size: 14px;
                        font-weight: 500;
                    }

                    /* Style the tile when it is checked */
                    .tile-option input[type="checkbox"]:checked + label,
                    .tile-option input[type="radio"]:checked + label {
                        border-color: #007bff; /* Highlight color for selected tile */
                        background-color: #e6f2ff;
                    }

                    /* ------------------------------------------------------------- */
                    /* STYLES FOR TILES WITHOUT IMAGES & DYNAMIC TILES */
                    /* ------------------------------------------------------------- */

                    /* New CSS for the "Already Booked" and custom tiles without an image */
                    .already-booked-tile,
                    #new-ceremony-options .tile-option label,
                    #new-service-options .tile-option label,
                    #new-hashtag-options .tile-option label {
                        width: 230px; /* Match the width of the image tiles */
                        height: 245px; /* Match the height of the image tiles */
                        justify-content: center; /* Vertically center the text */
                    }

                    /* ------------------------------------------------------------- */
                    /* STYLES FOR "ADD MORE" BUTTONS AND INPUTS */
                    /* ------------------------------------------------------------- */

                    /* Style for the "Add More" button and container */
                    #show-add-more-ceremony-btn, #add-ceremony-btn,
                    #show-add-more-service-btn, #add-service-btn,
                    #show-add-more-hashtag-btn, #add-hashtag-btn {
                        padding: 10px 20px;
                        border: none;
                        border-radius: 5px;
                        background-color: #007bff;
                        color: white;
                        cursor: pointer;
                        font-size: 16px;
                        margin-top: 0px;
                    }

                    #add-more-ceremony-container,
                    #add-more-service-container,
                    #add-more-hashtag-container {
                        display: flex;
                        gap: 10px;
                        margin-top: 20px;
                        justify-content: center;
                    }

                    #new-ceremony-input,
                    #new-service-input,
                    #new-hashtag-input {
                        padding: 10px;
                        border: 1px solid #ccc;
                        border-radius: 5px;
                        font-size: 16px;
                        width: 250px;
                    }

                    #add-ceremony-btn,
                    #add-service-btn,
                    #add-hashtag-btn {
                        background-color: #28a745;
                    }








                    /* Container for the tiles to control layout */
                    .checkbox-container {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 30px; /* Adjust spacing between tiles */
                        margin-top: 10px;
                        justify-content: center;
                    }

                    .section-label {
                        display: block;
                        font-weight: bold;
                        margin-bottom: 5px;
                    }

                    /* Hide the actual checkbox input */
                    .tile-option input[type="checkbox"],
                    .tile-option input[type="radio"] {
                        display: none;
                    }

                    /* Style the label as the tile */
                    .tile-option label {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        border: 2px solid #ccc;
                        border-radius: 8px;
                        padding: 10px;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        text-align: center;
                        box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
                    }

                    .tile-option label:hover {
                        background-color: #f0f0f0;
                    }

                    /* Style the image within the tile */
                    .tile-option label img {
                        width: 330px; /* Adjust image width here */
                        height: 220px; /* Adjust image height here */
                        object-fit: contain;
                        border-radius: 5px;
                        margin-bottom: 5px;
                    }

                    /* Style the text below the image */
                    .tile-option label span {
                        font-size: 14px;
                        font-weight: 500;
                    }

                    /* Style the tile when it is checked */
                    .tile-option input[type="checkbox"]:checked + label,
                    .tile-option input[type="radio"]:checked + label {
                        border-color: #007bff; /* Highlight color for selected tile */
                        background-color: #e6f2ff;
                    }

                    /* ------------------------------------------------------------- */
                    /* STYLES FOR TILES WITHOUT IMAGES & DYNAMIC TILES */
                    /* ------------------------------------------------------------- */

                    /* New CSS for the "Already Booked" and custom tiles without an image */
                    .already-booked-tile,
                    #new-welcome-artist-options .tile-option label,
                    #new-mehndi-options .tile-option label,
                    #new-sangeet-options .tile-option label,
                    #new-afterparty-options .tile-option label,
                    #new-bhaat-options .tile-option label,
                    #new-baraat-options .tile-option label,
                    #new-baraat-welcome-options .tile-option label,
                    #new-wedding-day-options .tile-option label {
                        width: 230px; /* Match the width of the image tiles */
                        height: 245px; /* Match the height of the image tiles */
                        justify-content: center; /* Vertically center the text */
                    }

                    /* Hide the image tag inside the dynamic tiles */
                    #new-welcome-artist-options .tile-option img,
                    #new-mehndi-options .tile-option img,
                    #new-sangeet-options .tile-option img,
                    #new-afterparty-options .tile-option img,
                    #new-bhaat-options .tile-option img,
                    #new-baraat-options .tile-option img,
                    #new-baraat-welcome-options .tile-option img,
                    #new-wedding-day-options .tile-option img {
                        display: none;
                    }

                    /* ------------------------------------------------------------- */
                    /* STYLES FOR "ADD MORE" BUTTONS AND INPUTS */
                    /* ------------------------------------------------------------- */

                    /* Style for the "Add More" button and container */
                    #show-add-more-welcome-artist-btn, #add-welcome-artist-btn,
                    #show-add-more-mehndi-btn, #add-mehndi-btn,
                    #show-add-more-sangeet-btn, #add-sangeet-btn,
                    #show-add-more-afterparty-btn, #add-afterparty-btn,
                    #show-add-more-bhaat-btn, #add-bhaat-btn,
                    #show-add-more-baraat-btn, #add-baraat-btn,
                    #show-add-more-baraat-welcome-btn, #add-baraat-welcome-btn,
                    #show-add-more-wedding-day-btn, #add-wedding-day-btn {
                        padding: 10px 20px;
                        border: none;
                        border-radius: 5px;
                        background-color: #007bff;
                        color: white;
                        cursor: pointer;
                        font-size: 16px;
                        margin-top: 0px;
                    }

                    #add-more-welcome-artist-container,
                    #add-more-mehndi-container,
                    #add-more-sangeet-container,
                    #add-more-afterparty-container,
                    #add-more-bhaat-container,
                    #add-more-baraat-container,
                    #add-more-baraat-welcome-container,
                    #add-more-wedding-day-container {
                        display: flex;
                        gap: 10px;
                        margin-top: 20px;
                        justify-content: center;
                    }

                    #new-welcome-artist-input,
                    #new-mehndi-input,
                    #new-sangeet-input,
                    #new-afterparty-input,
                    #new-bhaat-input,
                    #new-baraat-input,
                    #new-baraat-welcome-input,
                    #new-wedding-day-input {
                        padding: 10px;
                        border: 1px solid #ccc;
                        border-radius: 5px;
                        font-size: 16px;
                        width: 250px;
                    }

                    #add-welcome-artist-btn,
                    #add-mehndi-btn,
                    #add-sangeet-btn,
                    #add-afterparty-btn,
                    #add-bhaat-btn,
                    #add-baraat-btn,
                    #add-baraat-welcome-btn,
                    #add-wedding-day-btn {
                        background-color: #28a745;
                    }





                    /* Styling for the dynamically generated details forms */
                    .function-details {
                        border: 1px solid #ddd;
                        border-radius: 8px;
                        padding: 15px;
                        margin-top: 20px;
                        background-color: #f9f9f9;
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                    }

                    .function-details h4 {
                        margin-top: 0;
                        border-bottom: 2px solid #333;
                        padding-bottom: 5px;
                    }

                    .function-details .txt_field {
                        margin-bottom: 15px;
                    }