/* =========================================================
   GLOBAL STYLES
   ========================================================= */

/* Set the default font for the page */
body {
    font-family: Roboto, Arial, sans-serif !important;
}


/* =========================================================
   FEES SECTION
   ========================================================= */

/* Remove borders from all fee header and body columns */
.FeesHead div[class^="col-"],
.FeesBody div[class^="col-"] {
    border: none;
}

/* Hide the Total column */
.FeesHead .Col-Total,
.FeesBody .Col-Total {
    display: none;
}

/* Remove default margins */
.FeesHead,
.FeesBody {
    margin: 0;
}

/* Hide the fee header */
.FeesHead {
    display: none;
}

/* Make the description column wider */
.FeesBody .Col-Description {
    flex: 0 0 66.666666% !important;
    max-width: 66.666666% !important;
}

/* Add consistent spacing inside fee columns */
.FeesBody .col-sm-2.Col-Dollar.Col-Total,
.FeesBody .Col-Fee,
.FeesBody .Col-Description {
    padding: 12px 15px !important;
}


/* =========================================================
   ATTENDEE LIST
   ========================================================= */

/*
   AttendListDtl is visible by default.
   Uncomment display:none if it needs to be hidden initially.
*/
#AttendListDtl {
    /* display: none; */
}

/*
   Optional:
   Hide the first two rows of the attendee list.

#AttendListDtl > table.AttendList > tbody > tr:nth-of-type(1),
#AttendListDtl > table.AttendList > tbody > tr:nth-of-type(2) {
    display: none;
}
*/


/* =========================================================
   TOTAL LINE
   ========================================================= */

/* Show the Total value and align it to the left */
#TotalLine .Col-Total {
    display: block;
    text-align: left;
}

/* Make the Total description and value bold */
#TotalLine .Col-Description,
#TotalLine .Col-Description p,
#TotalLine .Col-Total {
    font-weight: bold;
}

/* Hide Fee and Quantity fields from the Total line */
#TotalLine .Col-Fee,
#TotalLine .Col-Quantity {
    display: none;
}

/* Adjust the width of the Total line column */
#TotalLine .col-sm-3 {
    flex: 0 10% !important;
    max-width: 10% !important;
}


/* =========================================================
   FORM FIELDS
   ========================================================= */

/* Styling for disabled fields */
.fieldDisabled {
    background-color: #f7f7f7 !important;
    color: #b3b3b3 !important;
}

/* Light background for attendee form fields */
.Section-EventRegistration .AttendList input[type="text"],
.Section-EventRegistration .AttendList select,
.Section-EventRegistration .AttendList textarea {
    background-color: #f0f9fb;
}


/* =========================================================
   MOBILE / TABLET STYLES
   ========================================================= */

@media only screen and (max-width: 800px) {

    /* Allow fee rows to wrap on smaller screens */
    .FeesHead .row,
    .FeesBody .row {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Description takes the full row */
    .FeesBody .Col-Description {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fee and Quantity each take half the row */
    .FeesBody .Col-Fee,
    .FeesBody .Col-Quantity {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        box-sizing: border-box !important;
    }

    /* Consistent mobile spacing */
    .FeesBody .col-sm-2.Col-Dollar.Col-Total,
    .FeesBody .Col-Fee,
    .FeesBody .Col-Description,
    .FeesBody .Col-Quantity {
        padding: 12px 15px !important;
    }

    /* Prevent quantity input from overflowing */
    .FeesBody .Col-Quantity input[type="text"] {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Prevent registration content from overflowing */
    .Section-EventRegistration .BlockDetails {
        overflow: hidden;
    }
}