.bg-unity
{
    background-color: #D0246A;
}


.bg-unity .nav-link
{
    color: #fff;
}

.btn-primary
{
    background-color: #D0246A;
    border-color: #D0246A;
}

/* style.css */
:root {
    --purple: #6b2ea6;
    --pink: #D0246A;
    --light-lilac: #f3e6ff;
    --dark-gray: #444;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #fff;
    color: var(--dark-gray);
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ececec;
}

header .logo {
    height: 32px;
}

header .cart-icon {
    font-size: 1.5rem;
    color: var(--purple);
}

h1.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--purple);
    margin: 1rem 0 0.5rem;
}

.card-selection {
    margin-bottom: 1rem;
}
.card-selection .card {
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform .2s;
}
.card-selection .card:hover {
    transform: scale(1.02);
}
.card-selection .card img {
    height: 150px;
    object-fit: cover;
    width: 100%;
}
.card-selection .card .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .75rem;
    color: #fff;
    background: rgba(0,0,0,0.4);
    width: 100%;
    font-size: 1.1rem;
    font-weight: 500;
}

.filter-box {
    background-color: var(--light-lilac);
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.filter-box label {
    font-weight: 500;
    color: var(--purple);
}
.filter-box .form-select {
    border: none;
    border-radius: 2rem;
    background-color: var(--purple);
    color: #fff;
    padding-left: 1rem;
}

.popular-activities h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--purple);
    margin-bottom: .75rem;
}

.popular-list {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding-bottom: 1rem;
}

.popular-list .activity-card {
    min-width: 200px;
    border-radius: .75rem;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.popular-list .activity-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}
.popular-list .activity-card .tags {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: flex;
    gap: .25rem;
}
.popular-list .activity-card .tag {
    background: #fff;
    border-radius: 1rem;
    font-size: .65rem;
    padding: 0 .5rem;
    color: var(--pink);
    font-weight: 600;
}
.popular-list .activity-card .card-body {
    padding: .5rem .75rem;
}
.popular-list .activity-card h3 {
    font-size: 1rem;
    margin: .25rem 0 0;
    color: var(--purple);
    font-weight: 600;
}
.popular-list .activity-card .hours {
    font-size: .85rem;
    color: #666;
}
.purple-header {
    background-color: var(--purple);
    padding-bottom: 25px;
}
.purple-header .back-arrow {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
}

/* Pull the white content up into a rounded card */
.list-activities {
    background: #fff;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    margin-top: -0.75rem;
    padding: 1rem 1rem 2rem;
}

/* Force full-width cards in the vertical list */
.list-activities .activity-card {
    min-width: auto;
    width: 100% !important;
    margin-bottom: 1rem;
}

.list-activities .activity-card .card-body h3 {
    color: var(--purple);
}

/* Show `Indoor`/`Outdoor` pills in the vertical list */
.list-activities .activity-card .tags {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
}

/* (Re-use the same pill styling you already have) */
.list-activities .activity-card .tags .tag {
    background: #fff;
    border-radius: 1rem;
    font-size: .65rem;
    padding: 0 .5rem;
    color: var(--pink);
    font-weight: 600;
}

.list-activities .activity-card img {
    width: 100%;    /* covers whole card */
    height: auto;   /* keeps aspect ratio */
    display: block; /* no inline-gap */
}

/* nudge the tags up so they sit directly over the image */
.list-activities .activity-card .tags {
    top: 0.5rem;    /* fine-tune as needed */
    right: 0.5rem;
}

.detail-card {
    background: #fff;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    margin-top: -0.75rem;
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* Hero image at top of card */
.detail-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* Container for all the content under the image */
.detail-card .card-body {
    padding: 1rem;
}

/* Title + price row */
.detail-card .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}
.detail-card .detail-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dark-gray);
    margin: 0;
}
.detail-card .price-badge {
    border: 1px solid var(--pink);
    border-radius: 2rem;
    padding: 0.25rem 0.75rem;
    color: var(--pink);
    font-weight: 600;
}

/* “Activity” subtitle */
.detail-card .detail-type {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 0.75rem;
}

/* Hours text */
.detail-card .hours {
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 1rem;
}

/* Quick Search box */
.detail-card .quick-search {
    background: var(--light-lilac);
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.detail-card .quick-search .quick-search-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--purple);
    margin-bottom: 0.75rem;
}
/* Today/Tomorrow buttons */
.detail-card .quick-search .btn {
    border-radius: 2rem;
    padding: 0.5rem 1.5rem;
}
.detail-card .btn-pink {
    background-color: var(--pink);
    border: none;
    color: #fff;
}
.detail-card .btn-outline-pink {
    background: none;
    border: 1px solid var(--pink);
    color: var(--pink);
}

/* Date‐picker inputs */
.detail-card .form-label.small {
    font-size: 0.8rem;
    color: #444;
}
.detail-card .form-control {

    border-radius: 2rem;
    padding: 0.5rem 1rem;
    background: #fff;
    margin-bottom: 1rem;
}

/* Search button */
.detail-card .btn-purple {
    background-color: var(--purple);
    color: #fff;
    border: none;
    border-radius: 2rem;
    padding: 0.75rem;
    width: 100%;
}

/* Description text */
.detail-card .detail-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--dark-gray);
    padding: 0 1rem 1.5rem;
    margin: 0;
}

.detail-container {
    position: relative;
    margin: 0;
    padding: 0;
}

.detail-image {
    width: 100%;
    display: block;
    height: auto;
    max-height: 250px !important;
}
.carousel {
    position: relative;
    max-height: 250px !important;
}

/* white card that overlaps the bottom of the image */
.detail-card {
    background: #fff;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    margin-top: -2rem;      /* pulls it up over the image */
    overflow: hidden;
    padding-top: 2rem;      /* gives breathing room under the curve */
}

.nav-pills .nav-link {
    border: 1px solid var(--pink);
    border-radius: 2rem;
    color: var(--pink);
    padding: .5rem 1rem;
    margin-right: .5rem;
}
.nav-pills .nav-link.active {
    background-color: var(--pink);
    color: #fff;
}

/* Date header bar */
.schedule-header {
    background-color: var(--pink);
    color: #fff;
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
    padding: .5rem 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.schedule-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}
.schedule-header .bi {
    font-size: 1rem;
}

/* Slot cards */
.slot-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: .75rem;
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.slot-card .slot-header {
    font-weight: 600;
    margin-bottom: .25rem;
}
.slot-card .slot-time {
    font-size: .95rem;
    margin-bottom: .5rem;
}
.slot-card .slot-info {
    font-size: .85rem;
    color: #666;
    margin-bottom: 1rem;
}
.slot-card .form-label.small {
    font-size: .75rem;
    margin-bottom: .25rem;
}
.slot-card .form-select {
    border-radius: 1rem;
    padding: .25rem .75rem;
    font-size: .9rem;
    margin-bottom: .75rem;
}
.slot-card .btn-add {
    background-color: var(--pink);
    border: none;
    border-radius: 2rem;
    color: #fff;
    padding: .5rem;
    width: 100%;
}

/* Re-use overlap pattern */
.detail-container { position: relative; padding: 0; margin: 0; }
.detail-image { width: 100%; display: block; }
.detail-card {
    background: #fff;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    margin-top: -2rem;
    overflow: hidden;
    padding-top: 2rem;
}

/* remove extra gap under the pills and prep for fusion */
.nav-pills {
    margin-bottom: 0 !important;
}

/* style each tab so it shares edges with its neighbors */
.nav-pills .nav-link {
    border: 1px solid var(--pink);
    border-bottom-color: transparent;
    border-radius: .75rem .75rem 0 0;
    color: var(--pink);
    background: #fff;
    margin-right: -1px;    /* collapse the gap between pills */
    padding: .5rem 1rem;
}

/* last pill shouldn’t overhang to the right */
.nav-pills .nav-link:last-child {
    margin-right: 0;
}

/* active pill */
.nav-pills .nav-link.active {
    background-color: var(--pink);
    color: #fff;
}

/* fuse the pink header to the pills */
.schedule-header {
    background-color: var(--pink);
    color: #fff;
    padding: .5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;               /* no gap above or below */
    border-radius: 0 0 .75rem .75rem;  /* round only the bottom corners */
}

/* remove our old border‐radii on the schedule header top */
.schedule-header h5,
.schedule-header .bi-chevron-up {
    margin: 0;
}
.slots-wrapper {
    background-color: var(--light-lilac);
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

/* make sure collapse can hide the wrapper */
.slots-wrapper.collapse {
    display: none;
}
.slots-wrapper.collapse.show {
    display: block;
}

/* ------------------------------------- */
/* SELECTED SLOT & CART BADGE STYLES     */
/* ------------------------------------- */

/* Position the cart badge */
.cart-icon {
    position: relative;
}
.cart-icon .badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background-color: var(--pink);
    color: #fff;
    border-radius: 50%;
    font-size: .65rem;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Highlight a slot that’s already in the basket */
.slot-card.selected {
    background-color: var(--purple);
    color: #fff;
}
.slot-card.selected .slot-header,
.slot-card.selected .slot-time,
.slot-card.selected .slot-info {
    color: #fff;
}
/* Remove form-controls from selected card */
.slot-card.selected select,
.slot-card.selected .row.gx-2 {
    display: none;
}
/* The button is re-labeled “Added to basket” */
.slot-card.selected .btn-add {
    background-color: var(--pink);
    border: none;
    color: #fff;
    border-radius: 2rem;
    width: 100%;
}

.popover-body {
   padding: 0px !important;
    border: 0px !important;
}
.basket-popover {


    width: 270px;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 1rem;
}

.basket-popover::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 1.5rem;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
}

.basket-popover .basket-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .75rem;
    color: var(--dark-gray);
}

.basket-popover .basket-item {
    font-size: .9rem;
    line-height: 1.4;
    color: var(--dark-gray);
    margin-bottom: .75rem;
}

.basket-popover .basket-summary {
    background: var(--light-lilac);
    border-radius: .75rem;
    padding: .75rem;
    margin-bottom: 1rem;
}

.basket-popover .basket-summary .summary-row {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    color: var(--dark-gray);
}

.basket-popover .basket-summary hr {
    margin: .5rem 0;
    border-color: rgba(0,0,0,0.1);
}

.basket-popover .btn-checkout {
    width: 100%;
    background-color: var(--pink);
    color: #fff;
    border: none;
    border-radius: 2rem;
    padding: .5rem 0;
    font-weight: 600;
}


.popular-activities a{
    text-decoration: none;
}

.purple-header a{
    color:#FFFFFF !important;
}