/*             .grid {*/
/*            display: grid;*/
/*            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
/*            gap: 24px;*/
/*        }*/

/*        .card {*/
/*            background: #fff;*/
/*            border-radius: 8px;*/
/*            box-shadow: 0 4px 15px rgba(0, 0, 0, .08);*/
/*            transition: .25s;*/
/*            cursor: pointer;*/
/*            overflow: hidden;*/
/*        }*/

/*        .card-content img {*/
/*            border-radius: 8px;*/
/*        }*/

/*        .card:hover {*/
/*            transform: translateY(-6px);*/
/*        }*/

/*        .card-content {*/
/*            padding: 18px 20px;*/
/*        }*/

/*        .card h3 {*/
/*            margin: 10px 0 0px;*/
/*            font-size: 16px;*/
/*            white-space: normal;*/
/*            word-break: break-word;*/
/*                line-height: 22px;*/
/*        }*/

/*        .card p {*/
/*            margin: 0;*/
/*            color: #666;*/
/*            font-size: .95rem;*/
/*            line-height: 1.45;*/
/*        }*/

/*        .panel {*/
/*            display: none;*/
/*            margin-top: 26px;*/
/*            padding: 22px;*/
/*            background: #fff;*/
/*            border-radius: 12px;*/
/*        }*/

/*        .panel.open {*/
/*            display: block;*/
/*        }*/

/*        .topbar {*/
/*            display: flex;*/
/*            justify-content: space-between;*/
/*            align-items: center;*/
/*            gap: 12px;*/
/*            flex-wrap: wrap;*/
/*            margin-bottom: 32px;*/
/*        }*/

/*        .titleblock {*/
/*            flex: 1;*/
/*            text-align: center;*/
/*            color: #1c2b3a;*/
/*            line-height: 1.25;*/
/*            font-weight: 700;*/
/*            font-size: 1.1rem;*/
/*        }*/

/*        .titleblock .big {*/
/*            font-weight: 800;*/
/*            font-size: 26px;*/
/*        }*/

/*        .back-btn {*/
/*            padding: 8px 22px;*/
/*            background: #0072BC;*/
/*            color: #fff;*/
/*            border: none;*/
/*            border-radius: 8px;*/
/*            cursor: pointer;*/
/*            font-size: 16px;*/
/*            font-family: Roboto;*/
/*            display: flex;*/
/*            align-items: center;*/
/*            gap: 8px;*/
/*        }*/

/*        .back-btn img {*/
/*            max-width: 18px;*/
/*            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7477%) hue-rotate(30deg) brightness(120%) contrast(100%);*/
/*        }*/

/*        .back-btn:hover {*/
/*            background: #0056b3;*/
/*        }*/

/*        .days-grid {*/
/*            display: grid;*/
/*            grid-template-columns: repeat(6, minmax(120px, 1fr));*/
/*            gap: 14px;*/
/*            align-items: start;*/
/*            margin-top: 10px;*/
/*        }*/

/*        .day-col {*/
/*            background: transparent;*/
/*        }*/

/*        .day-head {*/
/*            border: 1px solid #0056b3;*/
/*            color: #0056b3;*/
/*            font-weight: 500;*/
/*            text-align: center;*/
/*            padding: 6px 8px;*/
/*            border-radius: 6px;*/
/*            letter-spacing: .5px;*/
/*            font-size: .95rem;*/
/*            text-transform: uppercase;*/
/*        }*/

/*        .class-box {*/
/*            margin-top: 12px;*/
/*            border-radius: 12px;*/
/*            overflow: hidden;*/
/*            background: #f9f9f9;*/
/*            padding: 15px 10px;*/
/*        }*/

/*        .class-status {*/
/*            text-align: center;*/
/*            font-size: .9rem;*/
/*            background: #dfede3;*/
/*            width: max-content;*/
/*            border-radius: 23px;*/
/*            padding: 6px 20px 6px 32px;*/
/*            color: #000;*/
/*            font-weight: 500;*/
/*            position: relative;*/
/*            margin-left: 12px;*/
/*        }*/

/*        .class-status::before {*/
/*            content: '';*/
/*            width: 10px;*/
/*            height: 10px;*/
/*            background: #74c5a9;*/
/*            display: block;*/
/*            position: absolute;*/
/*            top: 50%;*/
/*            transform: translateY(-50%);*/
/*            left: 15px;*/
/*            border-radius: 50%;*/
/*        }*/

/*        .class-status.full {*/
/*            background: #8b2323;*/
/*        }*/

/*        .class-body {*/
/*            padding: 14px 12px;*/
/*            text-align: left;*/
/*            font-size: .95rem;*/
/*            color: #111;*/
/*            line-height: 1.35;*/
/*        }*/

/*        .line {*/
/*            margin: 6px 0;*/
/*            font-weight: 400;*/
/*        }*/

        /* ✅ Reduce font size for time/fee/coach */
/*        .class-value {*/
/*            font-size: 15px;*/
/*            font-family: Roboto;*/
/*            font-weight: 400;*/
            /* still bold */
/*            display: block;*/
/*            line-height: 1.8;*/
/*        }*/

/*        .class-actions {*/
/*            padding: 10px;*/
/*        }*/

/*        .btn {*/
/*            padding: 8px 12px;*/
/*            border-radius: 8px;*/
/*            background: #fff;*/
/*            cursor: pointer;*/
/*            font-weight: 400;*/
/*            text-decoration: none;*/
/*            color: #111;*/
/*            width: 100%;*/
/*            text-align: center;*/
/*        }*/

/*        .btn.primary {*/
/*            background: #0056b3;*/
/*            color: #fff;*/
/*            border-radius: 23px;*/

/*        }*/

/*        a.btn.primary img {*/
/*            max-width: 16px;*/
/*        }*/

/*        .btn.primary:hover {*/
/*            filter: brightness(.95);*/
/*        }*/

/*        .class-body .time,*/
/*        .class-body .price,*/
/*        .class-body .coach {*/

/*            position: relative;*/
/*            padding-left: 25px;*/
/*        }*/

/*        .class-body .time::before,*/
/*        .class-body .price::before,*/
/*        .class-body .coach::before {*/
/*            content: "";*/
/*            background-image: url(/wp-content/uploads/2026/02/time.png);*/
/*            width: 16px;*/
/*            height: 16px;*/
/*            background-size: cover;*/
/*            background-repeat: no-repeat;*/
/*            display: block;*/
/*            position: absolute;*/
/*            background-position: center;*/
/*            filter: brightness(0) saturate(100%) invert(21%) sepia(74%) saturate(2176%) hue-rotate(197deg) brightness(99%) contrast(105%);*/
/*            top: 3px;*/
/*            left: 3px;*/
/*        }*/

/*        .class-body .price::before {*/
/*            content: "";*/
/*            background-image: url(/wp-content/uploads/2026/02/dollar.png);*/

/*        }*/

/*        .class-body .coach::before {*/
/*            content: "";*/
/*            background-image: url(/wp-content/uploads/2026/04/profile-new.webp);*/
/*            filter: unset;*/

/*        }*/

/*        .btn.register {*/
/*            padding: 6px 36px 10px 20px;*/
/*            position: relative;*/
/*        }*/

/*        .btn.register::after {*/
/*            content: '';*/
/*            background-image: url(/wp-content/uploads/2026/02/right-arrow.png);*/
/*            position: absolute;*/
/*            width: 16px;*/
/*            height: 16px;*/
/*            background-position: center;*/
/*            background-size: cover;*/
/*            background-repeat: no-repeat;*/
/*            display: block;*/
/*            top: 50%;*/
/*            right: 15px;*/
/*            transform: translateY(-50%);*/
/*            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(228deg) brightness(102%) contrast(101%);*/
/*        }*/
/*.class-es h2{*/
/*    font-size:24px;*/
/*}*/
/*.class-es h3{*/
/*    font-size:20px;*/
/*}*/
/*.class-es .card-content h3 {*/
/*    font-size: 16px;*/
/*    margin-top:0;*/
/*}*/
/*        @media(max-width:980px) {*/
/*            .days-grid {*/
/*                grid-template-columns: repeat(2, 1fr);*/
/*            }*/

/*            .no-mob {*/
/*                display: none;*/
/*            }*/

/*            .topbar {*/
/*                flex-direction: column;*/
/*                gap: 24px;*/
/*                margin-bottom: 18px;*/
/*            }*/

/*            .titleblock {*/
/*                font-size: 16px;*/
/*            }*/

/*            .titleblock .big {*/
/*                font-size: 20px;*/
/*            }*/
/*        }*/

/*        @media(max-width:520px) {*/
/*            .days-grid {*/
/*                grid-template-columns: 1fr;*/
/*            }*/
/*        }*/
        
        
        
        
        
        
/*Testing swiper*/

/*@media (max-width: 767px){*/
/*  #daysGrid.days-grid{*/
/*    display:flex;*/
/*    overflow-x:auto;*/
/*    gap:16px;*/
/*    scroll-behavior:smooth;*/
/*    scroll-snap-type:x mandatory;*/
/*    -webkit-overflow-scrolling:touch;*/
/*    padding-inline:1px;*/
/*    padding-bottom:16px;*/
/*    -ms-overflow-style:none;*/
/*    scrollbar-width:none;*/
/*  }*/

/*  #daysGrid.days-grid::-webkit-scrollbar{*/
/*    display:none;*/
/*  }*/

/*  #daysGrid .day-col{*/
/*    flex:0 0 100%;     */
/*    max-width:100%;*/
/*    scroll-snap-align:start;*/
/*  }*/

/*  #daysGrid .day-col:first-child{*/
/*    margin-left:4px;*/
/*  }*/

/*  #daysGrid .day-col:last-child{*/
/*    margin-right:4px;*/
/*  }*/

/*#daysGrid{*/
/*  position:relative;*/
/*}*/
/*.day-head {*/
/*    margin-bottom: 60px;*/
/*}*/
/* arrows */
/*.days-arrow{*/
/*  position:absolute;*/
/*  top:240px;*/
  /*transform:translateY(-50%);*/
/*  z-index:9999;*/

/*  width:42px;*/
/*  height:42px;*/

/*  background:#0056b3;*/
/*  color:#fff;*/

/*  display:flex;*/
/*  align-items:center;*/
/*  justify-content:center;*/

/*  border-radius:50%;*/
/*  font-size:26px;*/
/*  cursor:pointer;*/
/*  user-select:none;*/
/*}*/

/*.days-arrow.left{ left:6%; }*/
/*.days-arrow.right{ right:6%; }*/
/*}*/

.class-cta img {
    max-width: 18px;
}
/* area-served location cardss css  */
.enroll-wrap.class-es {
    --blue-bg: #4A7EE5;
    --blue-hover: #3A6DD8;
    --blue-active: #2A5ABE;
    --blue-dark: #2D5BC4;
    --white: #FFFFFF;
    --btn-radius: 12px;
    --card-radius: 18px;
}

/* ── Wrapper ── */
.enroll-wrap.class-es {
    padding: 52px 44px 56px;
    position: relative;
}


.enroll-wrap.class-es>*,
.enroll-wrap.class-es .panel,
.enroll-wrap.class-es #locationStep {
    position: relative;
    z-index: 1;
}

/* ── Step title ── */
.enroll-wrap.class-es .step-title {
    color: #fff;
    font-size: clamp(1.35rem, 2.8vw, 1.9rem);
    font-weight: 800;
    text-align: center;
    margin: 10px 0 32px;
    letter-spacing: -0.3px;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ── Base grid ── */
.enroll-wrap.class-es .grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, 1fr);
}


#locationsGrid.grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

#locationsGrid .card {
    /* Looks like a real button — white fill, branded border */
    background: var(--white);
        border-radius: var(--btn-radius);
    padding: 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background .16s ease, border-color .16s ease,
        transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .16s ease;
}

#locationsGrid .card .card-content {
    width: 100%;
    padding: 13px 16px 2px;
    text-align: center;
}

#locationsGrid .card .card-content h3 {
    color: var(--blue-bg);
    font-size: 20px;
    font-weight: 600;
    transition: color .16s ease;
}

/* Hover → fill blue, white text */
#locationsGrid .card:hover {
    background: #FFCA2F;
    transform: translateY(-3px);
}
.main_wrapper ul li::before {
    /* content: "" !important; */
    width: 8px;
    height: 8px;
    background: #0574bc;
    border-radius: 50%;
    margin-bottom: 1px;
}
#locationsGrid .card:hover .card-content h3 {
    color: var(--white);
}

/* Press */
#locationsGrid .card:active {
    background: var(--blue-active);
    transform: scale(.98) translateY(0);
    box-shadow: 0 2px 8px rgba(20, 50, 130, 0.18);
}

#locationsGrid .card:active .card-content h3 {
    color: var(--white);
}

/* Focus */
#locationsGrid .card:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .9);
    outline-offset: 2px;
    border-color: var(--white);
}

/* Selected */
#locationsGrid .card.selected {
    background: var(--blue-bg);
    border-color: var(--blue-dark);
    box-shadow: 0 4px 18px rgba(20, 50, 130, 0.28), inset 0 1px 0 rgba(255, 255, 255, .2);
}

#locationsGrid .card.selected .card-content h3 {
    color: var(--white);
}

#ageGrid.grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

#ageGrid .card {
    background: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--btn-radius);
    box-shadow: 0 3px 12px rgba(20, 50, 130, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    padding: 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background .16s ease, border-color .16s ease,
        transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .16s ease;
}

#ageGrid .card .card-content {
    width: 100%;
    padding: 13px 16px;
    text-align: center;
}

#ageGrid .card .card-content h3 {
    color: var(--blue-bg);
    font-size: clamp(.8rem, 1.3vw, .93rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
    transition: color .16s ease;
}

#ageGrid .card:hover {
    background: #FFCA2F;
    border-color: var(--blue-dark);
    box-shadow: 0 7px 24px rgba(20, 50, 130, 0.30);
    transform: translateY(-3px);
}

#ageGrid .card:hover .card-content h3 {
    color: var(--white);
}

#ageGrid .card:active {
    background: var(--blue-active);
    transform: scale(.98) translateY(0);
    box-shadow: 0 2px 8px rgba(20, 50, 130, 0.18);
}

#ageGrid .card:active .card-content h3 {
    color: var(--white);
}

#ageGrid .card:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .9);
    outline-offset: 2px;
    border-color: var(--white);
}

#ageGrid .card.selected {
    background: var(--blue-bg);
    border-color: var(--blue-dark);
    box-shadow: 0 4px 18px rgba(20, 50, 130, 0.28), inset 0 1px 0 rgba(255, 255, 255, .2);
}

#ageGrid .card.selected .card-content h3 {
    color: var(--white);
}

#levelGrid.grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

#levelGrid .card {
    background: var(--white);
    border-radius: var(--card-radius);
    padding: 28px 20px 42px;
    -webkit-user-select: none;
    user-select: none;
    text-align: center;
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow .22s ease, border-color .18s ease, background .18s ease;
}

#levelGrid .card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 36px rgba(30, 60, 140, 0.22);
    border-color: var(--blue-bg);
    background: #F5F8FF;
}

#levelGrid .card:active {
    transform: translateY(-1px) scale(.99);
}

#levelGrid .card .card-content h3 {
    color: var(--blue-bg);
    font-size: 22px;
    font-weight: 700;
}

#levelGrid .card.selected {
    background: var(--blue-bg);
    border-color: var(--blue-dark);
}

#levelGrid .card.selected .card-content h3 {
    color: var(--white);
}



.enroll-wrap.class-es .titleblock {
    flex: 1;
    text-align: center;
}

.enroll-wrap.class-es .titleblock h3 {
    color: #fff;
    font-size: clamp(.95rem, 1.8vw, 1.15rem);
    font-weight: 800;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.enroll-wrap.class-es .back-btn {
    background: #fff;
    color: #000;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50px;
    padding: 8px 22px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .3px;
    white-space: nowrap;
    min-width: 76px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .18s ease, border-color .18s ease, transform .15s ease;
    font-family: 'Figtree';
}

.enroll-wrap.class-es .back-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: #fff;
    transform: translateX(-2px);
    color:#fff;
}

.enroll-wrap.class-es .panel {
    animation: panelFadeIn .3s ease forwards;
}

.enroll-wrap.class-es .titleblock p,
#daysGrid .fins-available-filter {
    color: #fff !important;
}

@keyframes panelFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.level-class-info ul{
    list-style: none;
    line-height: 2.2;
    margin-top:12px;
    margin-bottom:40px;
}
.level-class-info ul li{
    margin-bottom: 16px;
    padding-bottom: 0px;
        position: relative;
    padding-left: 30px;
    line-height: 25.6px;
    font-size:16px;
    text-align: left;
}
.level-class-info ul li::before {
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    width: 26px;
    height: 40px;
    left: 0px;
    border-radius: 50px;
    padding: 10px;
    top: -7px;
    background-image: url(../../../../../wp-content/uploads/2026/lst-dol.svg);
    
}
.enroll-wrap.class-es .days-grid .card {
    background: var(--white);
    border-radius: var(--card-radius);
    padding: 22px 14px;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(30, 60, 140, 0.13);
    border: 2.5px solid transparent;
}

.enroll-wrap.class-es .days-grid .card .card-content h3 {
    color: var(--blue-bg);
    font-size: .9rem;
    font-weight: 800;
    margin: 0;
}

.enroll-wrap.class-es .grid .card {
    animation: cardReveal .38s cubic-bezier(.22, 1, .36, 1) both;
}

.enroll-wrap.class-es .grid .card:nth-child(1) {
    animation-delay: .04s;
}

.enroll-wrap.class-es .grid .card:nth-child(2) {
    animation-delay: .08s;
}

.enroll-wrap.class-es .grid .card:nth-child(3) {
    animation-delay: .12s;
}

.enroll-wrap.class-es .grid .card:nth-child(4) {
    animation-delay: .16s;
}

.enroll-wrap.class-es .grid .card:nth-child(5) {
    animation-delay: .20s;
}

.enroll-wrap.class-es .grid .card:nth-child(6) {
    animation-delay: .24s;
}

.enroll-wrap.class-es .grid .card:nth-child(7) {
    animation-delay: .28s;
}


@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#daysGrid .fins-time-slot {
    background: #fff !important;
}

#daysGrid .fins-time-slot:hover {
    background: #ab008b !important;
}

#daysGrid .fins-slot-table {
    grid-template-columns: repeat(7, minmax(156px, 1fr)) !important;
}

#daysGrid .fins-slot-calendar{
    min-width: 100% !important;
}


@media (max-width: 768px) {
    .enroll-wrap.class-es {
        padding: 38px 24px 44px;
    }

    #locationsGrid.grid,
    #ageGrid.grid {
        grid-template-columns: 1fr;
    }

    #levelGrid.grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .enroll-wrap.class-es .days-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .enroll-wrap.class-es {
        padding: 28px 14px 34px;
    }

    .enroll-wrap.class-es .step-title {
        font-size: 1.15rem;
        margin-bottom: 20px;
    }

    #locationsGrid.grid,
    #ageGrid.grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    #levelGrid.grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    #locationsGrid .card,
    #ageGrid .card {
        min-height: 46px;
    }

 


    .enroll-wrap.class-es .days-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .enroll-wrap.class-es .back-btn {
        padding: 6px 14px;
        font-size: .78rem;
        min-width: 60px;
    }

    .enroll-wrap.class-es .titleblock h3 {
        font-size: .9rem;
    }
}

@media (max-width: 360px) {

    #locationsGrid.grid,
    #ageGrid.grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

/* area-served location cardss css  */