/*
    This stylesheet concerns the my2_children_profile component
    templates/components/my2_children_profile.xml
*/

.child-details-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
}

.child-action-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 25px;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.frame {
    border-radius: 50%;
}

.icon {
    width: 24px !important;
    height: 24px !important;
}

.child-info-text {
    margin-bottom: 0px;
}

.child-info-item {
    margin-bottom: 10px;
}

/* --- Child Profile Tabs --- */
.child-related-information {
    margin: 50px 0;
}

/* Tab container styling */
.child-related-information .nav-tabs {
    border-bottom: none; /* Remove Bootstrap's default line */
    position: relative;
    z-index: 1; /* Ensure tabs render on top of the content pane */
    justify-content: center;
}

/* Tab container styling */
.child-related-information .child-select {
    border-bottom: none; /* Remove Bootstrap's default line */
    position: relative;
    z-index: 1; /* Ensure tabs render on top of the content pane */
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    margin: 0 auto; /* Ensures it's centered in its parent */
}

.child-select select {
    /* Reset Bootstrap defaults */
    border-radius: 25px;

    /* Sizing and Layout */
    height: 56px;
    padding: 0 36px;

    /* Typography */
    font-size: 19px;
    font-weight: 600; /* Demi-bold */
    color: #000000 !important; /* Override default link color */

    /* Colors and Transition for inactive state */
    background-color: #fdb518;
    transition: background-color 0.2s ease-in-out;
}

.custom-select:focus {
    background-color: #fdb518 !important;
    border: none;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(253, 181, 24, 0.5) !important; /* fdb518 with 50% opacity */
}

/* Style all options (uniformly) */
.custom-select option {
    background-color: #ffd257;
    color: #000;
}

.custom-select {
    border: 1px solid #fdb518 !important;
}

/* Style for each tab link */
.child-related-information .nav-tabs .nav-link {
    /* Reset Bootstrap defaults */
    border: none;
    margin-bottom: 0;

    /* Sizing and Layout */
    height: 56px;
    display: flex;
    align-items: center; /* Vertically center the text */
    padding: 0 36px;

    /* Typography */
    font-size: 19px;
    font-weight: 600; /* Demi-bold */
    color: #000000 !important; /* Override default link color */

    /* Colors and Transition for inactive state */
    background-color: #ffd257;
    transition: background-color 0.2s ease-in-out;
}

/* Active tab state */
.child-related-information .nav-tabs .nav-link.active {
    background-color: #fdb518;
}

/* Border Radius for the first and last tabs */
.child-related-information .nav-tabs .nav-item:first-child .nav-link {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.child-related-information .nav-tabs .nav-item .nav-link {
    border-top-left-radius: 0rem;
    border-bottom-left-radius: 0rem;
    border-top-right-radius: 0rem;
}

.child-related-information .nav-tabs .nav-item:last-child .nav-link {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

/* Style the content pane to match and create a unified look */
.child-related-information .tab-content {
    background-color: #fff2ad;
    border-radius: 25px;
    /* Pull the content up to visually connect with the active tab */
    margin-top: -28px; /* Half the height of the tab (56px / 2) */
    padding-top: calc(2rem + 28px); /* Adjust top padding to account for the overlap */
    position: relative;
    z-index: 0; /* Sit behind the tabs */
}

/* The individual tab-pane no longer needs a background color */
.tab-pane {
    padding: 2rem;
    background-color: transparent;
}

.tab-items {
    padding-left: 0px;
}

.tab-item {
    list-style: none; /* Remove the default browser bullet */
    padding-bottom: 10px; /* Add some space below each item */
}

.tab-item-title {
    font-family: "NeighbourSans DemiBold", sans-serif;
}