@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap');
body {
    background-color: #f4f7f6; /* A soft, off-white background */
    font-family: 'Varela Round', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- Main Registration Container --- */
.registration-container {
    background-color: #ffffff;
    /*border-radius: 12px;*/
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
    padding: 2rem 3rem;
    /* margin-top: 2rem;*/
    margin-bottom: 2rem;
}

/* --- Typography --- */
h2 {
    color: #0a4a8f;
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h3, h4, h5 {
    color: #343a40;
    font-weight: 600;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h6 {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- Form Elements --- */
.form-control {
    border-radius: 8px;
    border: 1px solid #ced4da;
    padding: 0.75rem 1rem;
}

    .form-control:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

.form-label {
    font-weight: 600;
    color: #495057;
}

.form-check-input:checked {
    background-color: #fc2f68;
    border-color: #fc2f68;
}

/* --- Event Card Styling --- */
.event-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease-in-out;
    overflow: hidden; /* Ensures child elements respect the border radius */
}

    .event-card:hover {
        /*transform: translateY(-5px);*/
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        border-color: #fd97b3;
    }

    .event-card .card-header {
        background-color: #f8f9fa;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e9ecef;
    }

    .event-card .card-body {
        padding: 1.5rem;
    }

.event-card-header {
    display: flex;
    align-items: stretch;
    /*background-color: #f8f9fa;*/
    /* This replaces the old h5 bottom border */
}

.event-date-badge {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 1rem 1.25rem;
    flex-shrink: 0;
}

.date-day {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.date-month {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-year {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 2px;
}

.text-purple {
    color: #a78bfa;
}

.text-red {
    color: #dc3545;
}

.bg-purple {
    background-color: #a78bfa;
}
.bg-orange {
    background-color: #fb923c;
}
.bg-blue {
    background-color: #60a5fa;
}
.bg-pink {
    background-color: #f472b6;
}
.bg-teal {
    background-color: #34d399;
}

.bg-purple-light {
    background-color: #f5f3ff;
}

.bg-orange-light {
    background-color: #fff7ed;
}

.bg-blue-light {
    background-color: #eff6ff;
}

.bg-pink-light {
    background-color: #fdf2f8;
}

.bg-teal-light {
    background-color: #f0fdf4;
}

.event-title-section {
    padding: 1.25rem 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .event-title-section h5 {
        margin-bottom: 0.25rem;
    }

.event-type-tag {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom:0px !important;
}

.event-icon-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    font-size: 1.75rem;
    color: #adb5bd;
}

.event-card.is-closed {
    opacity: 0.5;
    pointer-events: none; /* Disables all clicks on the card */
    position: relative;
}

.closed-badge {
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    z-index: 10;
    padding: 1.2rem; /* This creates the space between the text and the inner ring */
    aspect-ratio: 1 / 1; /* This modern property ensures it's always a perfect circle */
    /* Content Centering */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Seal Style (Outer Ring) */
    background-color: rgba(255, 255, 255, 0.9);
    border: 4px dashed #dc3545;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Text Style */
    color: #c81e1e;
    font-family: 'Rye', cursive;
    font-size: 1.8rem;
    text-transform: uppercase;
    opacity: 0.9;
    letter-spacing: 2px;
}

    /* This creates the INNER ring */
    .closed-badge::before {
        content: '';
        position: absolute;
        /* Inset from the parent to create the space */
        /* 'inset' is shorthand for top, right, bottom, left */
        inset: 12px; /* This creates the 12px gap between the two border lines */
        border-radius: 50%;
        border: 2px dashed #dc3545; /* Dashed inner ring */
    }

/* This new rule adds the padding back to the content area */
.card-body {
    padding: 1.5rem;
}

/* --- Custom Radio Button Options --- */
.radio-options-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap to the next line on small screens */
    gap: 0.5rem; /* Creates a nice space between the buttons */
    margin-top: 0.5rem;
}

.radio-option {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9em;
    text-align: center;
    flex-grow: 1;
}

    .radio-option:hover {
        background-color: #f8f9fa;
        border-color: #fd97b3;
    }

    .radio-option .form-check-label {
        cursor: pointer;
        padding: 0.8rem 1.2rem;
    }

    .radio-option input[type="radio"] {
        display: none; /* Hide the actual radio button */
    }
        /* Style the label when its associated radio is checked */
        .radio-option input[type="radio"]:checked + label {
            color: #fc2f68;
            font-weight: 600;
        }

            .radio-option input[type="radio"]:checked + label::before {
                content: '✔ '; /* Add a checkmark for visual confirmation */
            }


/* --- The Cart --- */
.cart {
    background-color: #ffffff; /* Change to white for a cleaner card look */
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 0; /* Remove padding to allow for flush list items */
    overflow: hidden; /* Important for border radius on children */
    position: -webkit-sticky; /* For Safari compatibility */
    position: sticky;
    top: 85px; /* The distance from the top of the screen when it "sticks" */
}

.cart-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

#cart-items-container {
    padding: 0.5rem 0; /* Add some vertical spacing for the list */
}
/* This is the new style for each item in the cart */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
    padding: 1rem 1.5rem;
}

.cart-item-details {
    display: flex;
    flex-direction: column; /* Stack name and age group vertically */
    margin-right: 1rem;
}

.cart-item-name {
    font-weight: 600;
    color: #212529;
}

.cart-item-agegroup {
    font-size: 0.85em;
    color: #6c757d;
}

.cart-item-actions {
    display: flex; /* Make it a flex container */
    align-items: center; /* Vertically align the price and icon */
    flex-shrink: 0; /* Prevent this container from shrinking and wrapping */
}

.cart-item-price {
    font-weight: 600;
    color: #212529;
}

.remove-from-cart {
    color: #dc3545; /* Red color for remove icon */
    text-decoration: none;
    margin-left: 0.75rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

    .remove-from-cart:hover {
        opacity: 1;
    }

/* A dedicated footer for the total amount */
.cart-total-footer {
    background-color: #f8f9fa;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #e9ecef;
}

.cart-button-container {
    padding: 1.5rem;
}

/* --- Final Submit Button --- */
#submit-registration-btn {
    padding: 0.8rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.3s, transform 0.2s;
}

    #submit-registration-btn:hover {
        transform: scale(1.02);
    }

/* --- Helper Classes --- */
.event-section {
    display: none;
    margin-top: 20px;
}

.group-members {
    display: none;
}

.form-check {
    padding-left: 0;
}
/* Reset padding for custom radios */

.disclaimer {
    border-left: 4px solid var(--primary-yellow);
    padding: 1rem 1.5rem;
    background-color: #fff9e3;
}

/* event hero styles */
.event-hero {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1.5rem;
}

.event-details {
    display: flex;
    justify-content: start;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    gap: 2rem; /* Creates space between the detail items */
    margin-top: 1.5rem;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between icon and text */
}

    .detail-item .bi { /* Styles for all Bootstrap Icons */
        font-size: 1.5rem;
        color: #0d6efd;
    }

.detail-text {
    text-align: left;
}

    .detail-text span {
        display: block;
        line-height: 1.4;
    }

    .detail-text .label {
        font-weight: 600;
        color: #343a40;
    }

    .detail-text .value {
        font-size: 0.9rem;
        color: #6c757d;
    }

.text-justify {
    text-align: justify !important;
}