/*==================================================
 STUDIO FITNESS
 CUSTOM CSS

 VERSION : 1.7.0
 STATUS  : STABLE

 LAST UPDATE:
 - Synced with the complete currently working Gazella Custom CSS
 - Includes Gazella Top Header Tools flex alignment
 - Includes desktop cart fine positioning
 - Includes mobile cart fine positioning
 - This file is the new official source of truth
==================================================*/

/*==================================================
ВТОРА СЕКЦИЯ НАЧАЛО STUDIO FITNESS
 COMPONENT 02
 WELCOME SECTION

 BLOCK 02 — WELCOME CONTENT
 BLOCK 03 — WELCOME FEATURES

 VERSION : 1.0
 STATUS  : TESTING

 RESPONSIVE:
 Desktop ✔
 Tablet  ✔
 Mobile  ✔
==================================================*/

/*--------------------------------------------------
 1. SPPB ROW FOUNDATION
--------------------------------------------------*/

.sf-welcome-row .sppb-row {
    align-items: stretch;
}

.sf-welcome-row .sppb-row-column {
    display: flex;
    align-self: stretch;
}

.sf-welcome-row .sppb-column {
    width: 100%;

    display: flex;
    align-self: stretch;
}

.sf-welcome-row .sppb-column-addons {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.sf-welcome-row .sppb-addon-wrapper {
    width: 100%;

    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
}

.sf-welcome-row .sppb-addon-text-block {
    width: 100%;

    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
}

.sf-welcome-row .sppb-addon-content {
    width: 100%;

    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
}


/*--------------------------------------------------
 2. SPPB AUTOMATIC PARAGRAPH RESET
--------------------------------------------------*/

.sf-welcome-row .sppb-addon-content > p {
    width: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
}


/*--------------------------------------------------
 2A. IMAGE
--------------------------------------------------*/

.sf-welcome-row .sppb-addon-single-image,
.sf-welcome-row .sppb-addon-single-image img {
    border-radius: 5px;
    overflow: hidden;
}

.sf-welcome-row .sppb-addon-single-image img {
    display: block;
    width: 100%;
    height: auto;
}

/*==================================================
 BLOCK 02
 WELCOME CONTENT
==================================================*/


/*--------------------------------------------------
 3. CONTENT WRAPPER
--------------------------------------------------*/

.sf-welcome-content {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-sizing: border-box;
}


/*--------------------------------------------------
 4. TITLE
--------------------------------------------------*/

.sf-welcome-title {
    margin: 0 0 16px;
    padding: 0;

    color: #30282b;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(18px, 1.3vw, 20px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sf-welcome-title span {
    display: block;
}


/*--------------------------------------------------
 5. DESCRIPTION
--------------------------------------------------*/

.sf-welcome-text {
    margin: 0 0 28px;
    padding: 0;

    color: #5d5558;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(15px, 1.05vw, 17px);
    font-weight: 400;
    line-height: 1.8;
}

.sf-welcome-text p {
    margin: 0;
    padding: 0;
}


/*--------------------------------------------------
 6. BUTTON POSITION
--------------------------------------------------*/

.sf-welcome-content .sf-button {
    align-self: flex-start;
}


/*==================================================
 BLOCK 03
 WELCOME FEATURES
==================================================*/


/*--------------------------------------------------
 7. FEATURES LIST
--------------------------------------------------*/

.sf-welcome-features {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;

    box-sizing: border-box;
}


/*--------------------------------------------------
 8. FEATURE ITEM
--------------------------------------------------*/

.sf-welcome-feature {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;

    text-align: left;
}


/*--------------------------------------------------
 9. FEATURE ICON
--------------------------------------------------*/

.sf-welcome-feature-icon {
    width: 54px;
    height: 54px;

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

    flex: 0 0 54px;
    overflow: hidden;
    box-sizing: border-box;

    transition:
        transform 0.28s ease,
        opacity 0.28s ease;
}

.sf-welcome-feature-icon img {
    width: 100%;
    height: 100%;

    max-width: 54px;
    max-height: 54px;

    display: block;

    object-fit: contain;
    object-position: center;

    border: 0;
    margin: 0;
    padding: 0;

    float: none;
    position: static;

    box-shadow: none;
    vertical-align: middle;
}


/*--------------------------------------------------
 10. FEATURE TEXT
--------------------------------------------------*/

.sf-welcome-feature-text {
    min-width: 0;

    color: #30282b;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 500;
    line-height: 1.45;
}


/*--------------------------------------------------
 11. FEATURE HOVER
--------------------------------------------------*/

.sf-welcome-feature:hover .sf-welcome-feature-icon {
    transform: translateY(-2px) scale(1.035);
}


/*==================================================
 TABLET
==================================================*/

@media (min-width: 768px) and (max-width: 1199px) {

    .sf-welcome-content {
        justify-content: center;
    }

    .sf-welcome-title {
        margin-bottom: 15px;
    }

    .sf-welcome-text {
        margin-bottom: 24px;
        line-height: 1.7;
    }

    .sf-welcome-features {
        gap: 18px;
    }

    .sf-welcome-feature {
        gap: 14px;
    }

    .sf-welcome-feature-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;
    }

    .sf-welcome-feature-icon img {
        max-width: 50px;
        max-height: 50px;
    }
}


/*==================================================
 MOBILE
==================================================*/

@media (max-width: 767px) {

    .sf-welcome-row .sppb-row-column {
        display: block;
    }

    .sf-welcome-row .sppb-column,
    .sf-welcome-row .sppb-column-addons,
    .sf-welcome-row .sppb-addon-wrapper,
    .sf-welcome-row .sppb-addon-text-block,
    .sf-welcome-row .sppb-addon-content,
    .sf-welcome-row .sppb-addon-content > p {
        height: auto;
        min-height: 0;
    }

    .sf-welcome-content {
        height: auto;

        align-items: center;

        text-align: center;
    }

    .sf-welcome-title {
        margin-bottom: 14px;
    }

    .sf-welcome-text {
        margin-bottom: 22px;
        line-height: 1.7;
    }

    .sf-welcome-content .sf-button {
        align-self: center;
    }

    .sf-welcome-features {
        height: auto;
        gap: 18px;
    }

    .sf-welcome-feature {
        justify-content: center;
        gap: 13px;

        text-align: left;
    }

    .sf-welcome-feature-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }

    .sf-welcome-feature-icon img {
        max-width: 48px;
        max-height: 48px;
    }
}
/*==================================================
КРАЙ НА ВТОРА СЕКЦИЯ НАЧАЛО STUDIO FITNESS
 COMPONENT 02
 WELCOME SECTION

 BLOCK 02 — WELCOME CONTENT
 BLOCK 03 — WELCOME FEATURES

 VERSION : 1.0
 STATUS  : TESTING

 RESPONSIVE:
 Desktop ✔
 Tablet  ✔
 Mobile  ✔
==================================================*/
/*==================================================
 ПЪРВА СЕКЦИЯ НАЧАЛО — STUDIO FITNESS
 COMPONENT 01B
 TRAINING CARDS
 VERSION : 4.0
 STATUS  : TESTING
==================================================*/
/*==================================================
 STUDIO FITNESS
 COMPONENT 01B
 TRAINING CARDS

 VERSION : 4.0
 STATUS  : TESTING

 RESPONSIVE:
 Desktop ✔
 Tablet  ✔
 Mobile  ✔

 MOBILE MODE:
 Compact horizontal navigation list
==================================================*/


/*--------------------------------------------------
 1. SPPB ROW FOUNDATION
--------------------------------------------------*/

.sf-training-row .sppb-row {
    align-items: stretch !important;
}


/*--------------------------------------------------
 2. SPPB COLUMN FOUNDATION
--------------------------------------------------*/

.sf-training-row .sppb-row-column {
    display: flex;
    align-self: stretch;
}

.sf-training-row .sppb-column {
    width: 100%;

    display: flex;
    align-self: stretch;
}

.sf-training-row .sppb-column-addons {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.sf-training-row .sppb-addon-wrapper {
    width: 100%;
    height: 100%;

    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
}

.sf-training-row .sppb-addon-text-block {
    width: 100%;
    height: 100%;

    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
}

.sf-training-row .sppb-addon-content {
    width: 100%;
    height: 100%;

    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
}


/*--------------------------------------------------
 3. SPPB AUTOMATIC PARAGRAPH RESET
--------------------------------------------------*/

.sf-training-row .sppb-addon-content > p {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
}


/*--------------------------------------------------
 4. TRAINING CARD
--------------------------------------------------*/

.sf-training-card {
    width: 100%;
    min-height: 250px;
    height: 100%;

    display: flex;
    flex: 1 1 auto;
    align-self: stretch;

    background: #ffffff;
    border: 1px solid #f4dce3;
    border-radius: 12px;

    color: #30282b;
    text-align: center;
    text-decoration: none;

    box-shadow: 0 7px 22px rgba(213, 91, 127, 0.055);

    overflow: hidden;
    position: relative;
    box-sizing: border-box;

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background-color 0.28s ease;
}

.sf-training-card:hover,
.sf-training-card:focus {
    background: #fffafb;
    border-color: #efb9c8;

    color: #30282b;
    text-decoration: none;

    transform: translateY(-3px);

    box-shadow: 0 13px 30px rgba(213, 91, 127, 0.11);
}

.sf-training-card:focus-visible {
    outline: 3px solid rgba(234, 94, 134, 0.22);
    outline-offset: 3px;
}


/*--------------------------------------------------
 5. INNER CARD LAYOUT
--------------------------------------------------*/

.sf-training-card-inner {
    width: 100%;
    height: 100%;
    min-height: 250px;

    padding: 18px 15px 17px;

    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;

    box-sizing: border-box;
}


/*--------------------------------------------------
 6. PNG IMAGE CONTAINER
--------------------------------------------------*/

.sf-training-card-image {
    width: 112px;
    height: 88px;

    margin: 0 auto 8px;

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

    overflow: hidden;
    flex: 0 0 auto;

    box-sizing: border-box;

    transition:
        transform 0.28s ease,
        opacity 0.28s ease;
}


/*--------------------------------------------------
 7. PNG IMAGE
--------------------------------------------------*/

.sf-training-card-image img {
    width: 100%;
    height: 100%;

    max-width: 112px;
    max-height: 88px;

    display: block;

    object-fit: contain;
    object-position: center;

    border: 0;
    margin: 0;
    padding: 0;

    box-shadow: none;
}

.sf-training-card:hover .sf-training-card-image,
.sf-training-card:focus .sf-training-card-image {
    transform: translateY(-2px) scale(1.035);
}


/*--------------------------------------------------
 8. CARD TITLE
--------------------------------------------------*/

.sf-training-card-title {
    width: 100%;
    min-height: 44px;

    margin: 0 0 5px;
    padding: 0;

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

    color: #30282b;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: 0;
    text-transform: uppercase;

    transition: color 0.28s ease;
}

.sf-training-card:hover .sf-training-card-title,
.sf-training-card:focus .sf-training-card-title {
    color: #d94e77;
}


/*--------------------------------------------------
 9. CARD DESCRIPTION
--------------------------------------------------*/

.sf-training-card-text {
    width: 100%;
    max-width: 150px;
    min-height: 40px;

    margin: 0 auto 13px;
    padding: 0;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    color: #665c60;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}


/*--------------------------------------------------
 10. ARROW BUTTON
--------------------------------------------------*/

.sf-training-card-arrow {
    width: 26px;
    height: 26px;

    margin: auto auto 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #ed668c;
    border-radius: 50%;

    color: #ed668c;

    flex: 0 0 auto;
    box-sizing: border-box;

    transition:
        color 0.28s ease,
        border-color 0.28s ease,
        background-color 0.28s ease,
        transform 0.28s ease;
}

.sf-training-card-arrow i {
    display: block;

    margin: 0 0 0 1px;
    padding: 0;

    font-size: 14px;
    font-weight: normal;
    line-height: 1;
}

.sf-training-card:hover .sf-training-card-arrow,
.sf-training-card:focus .sf-training-card-arrow {
    background: #ed668c;
    border-color: #ed668c;
    color: #ffffff;

    transform: translateX(2px);
}


/*--------------------------------------------------
 11. TEMPLATE LINK RESET
--------------------------------------------------*/

.sf-training-card,
.sf-training-card:hover,
.sf-training-card:focus,
.sf-training-card:active,
.sf-training-card:visited {
    color: #30282b;
    text-decoration: none;
}


/*--------------------------------------------------
 12. GLOBAL IMAGE PROTECTION
--------------------------------------------------*/

.sf-training-card img {
    float: none;
    position: static;

    min-width: 0;
    min-height: 0;

    transform-origin: center;
    vertical-align: middle;
}


/*==================================================
 TABLET
 ALL CARDS RECEIVE THE SAME HEIGHT
==================================================*/

@media (min-width: 768px) and (max-width: 1199px) {

    .sf-training-row .sppb-row-column,
    .sf-training-row .sppb-column,
    .sf-training-row .sppb-column-addons,
    .sf-training-row .sppb-addon-wrapper,
    .sf-training-row .sppb-addon-text-block,
    .sf-training-row .sppb-addon-content,
    .sf-training-row .sppb-addon-content > p {
        height: 100%;
        align-self: stretch;
    }

    .sf-training-card,
    .sf-training-card-inner {
        min-height: 275px;
        height: 100%;
    }

    .sf-training-card-inner {
        padding: 18px 12px 16px;
    }

    .sf-training-card-title {
        min-height: 50px;

        font-size: 15px;
        line-height: 1.25;
    }

    .sf-training-card-text {
        min-height: 45px;

        font-size: 12px;
        line-height: 1.45;
    }
}


/*==================================================
 MOBILE
 COMPACT HORIZONTAL NAVIGATION LIST
==================================================*/

@media (max-width: 767px) {

    /*----------------------------------------------
     13. MOBILE SPPB LAYOUT RESET
    ----------------------------------------------*/

    .sf-training-row .sppb-row {
        row-gap: 8px !important;
    }

    .sf-training-row .sppb-row-column {
        display: block;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .sf-training-row .sppb-column,
    .sf-training-row .sppb-column-addons,
    .sf-training-row .sppb-addon-wrapper,
    .sf-training-row .sppb-addon-text-block,
    .sf-training-row .sppb-addon-content,
    .sf-training-row .sppb-addon-content > p {
        height: auto;
        min-height: 0;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /*----------------------------------------------
     14. MOBILE CARD
    ----------------------------------------------*/

    .sf-training-card {
        min-height: 0;
        height: auto;

        border-radius: 7px;

        box-shadow: 0 4px 14px rgba(213, 91, 127, 0.045);
    }

    .sf-training-card:hover,
    .sf-training-card:focus {
        transform: none;
    }


    /*----------------------------------------------
     15. MOBILE INNER LAYOUT
    ----------------------------------------------*/

    .sf-training-card-inner {
        min-height: 0;
        height: auto;

        padding: 9px 12px;

        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 20px;
        align-items: center;
        column-gap: 10px;
    }


    /*----------------------------------------------
     16. MOBILE IMAGE
    ----------------------------------------------*/

    .sf-training-card-image {
        width: 32px;
        height: 32px;

        margin: 0;

        grid-column: 1;
    }

    .sf-training-card-image img {
        max-width: 32px;
        max-height: 32px;
    }

    .sf-training-card:hover .sf-training-card-image,
    .sf-training-card:focus .sf-training-card-image {
        transform: none;
    }


    /*----------------------------------------------
     17. MOBILE TITLE
    ----------------------------------------------*/

    .sf-training-card-title {
        width: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        display: block;

        grid-column: 2;

        font-size: clamp(11px, 3.4vw, 13px);
        line-height: 1.25;
        text-align: left;
    }


    /*----------------------------------------------
     18. MOBILE DESCRIPTION
    ----------------------------------------------*/

    .sf-training-card-text {
        display: none;
    }


    /*----------------------------------------------
     19. MOBILE ARROW
    ----------------------------------------------*/

    .sf-training-card-arrow {
        width: 20px;
        height: 20px;

        margin: 0;

        grid-column: 3;
        justify-self: end;

        border-width: 0;
    }

    .sf-training-card-arrow i {
        margin-left: 0;

        font-size: 18px;
    }

    .sf-training-card:hover .sf-training-card-arrow,
    .sf-training-card:focus .sf-training-card-arrow {
        background: transparent;
        border-color: transparent;
        color: #ed668c;

        transform: translateX(2px);
    }
}

/*==================================================
 КРАЙ НА ПЪРВА СЕКЦИЯ НАЧАЛО - STUDIO FITNESS
 COMPONENT 01B FINAL v2
 TRAINING CARDS
 DESKTOP + TABLET HEIGHT FIX
==================================================*/
/*==================================================
 STUDIO FITNESS
 DESIGN SYSTEM 01
 GLOBAL BUTTONS
==================================================*/


/*--------------------------------------------------
CSS НА БУТОНИТЕ 1. BUTTON FOUNDATION
--------------------------------------------------*/

.sf-button {
    min-height: 44px;

    padding: 11px 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid transparent;
    border-radius: 7px;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
    box-sizing: border-box;

    transition:
        color 0.28s ease,
        background-color 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s ease;
}


/*--------------------------------------------------
 2. PRIMARY BUTTON
--------------------------------------------------*/

.sf-button-primary {
    background: #e85f87;
    border-color: #e85f87;
    color: #ffffff;
}

.sf-button-primary:hover,
.sf-button-primary:focus {
    background: #d94e77;
    border-color: #d94e77;
    color: #ffffff;

    text-decoration: none;
    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(217, 78, 119, 0.22);
}

.sf-button-primary:active {
    transform: translateY(0);
    box-shadow: none;
}


/*--------------------------------------------------
 2A. OUTLINE BUTTON
--------------------------------------------------*/

.sf-button-outline {
    background: transparent;
    border-color: #e85f87;
    color: #e85f87;
}

.sf-button-outline:hover,
.sf-button-outline:focus {
    background: #e85f87;
    border-color: #e85f87;
    color: #ffffff;

    text-decoration: none;
    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(217, 78, 119, 0.18);
}

.sf-button-outline:active {
    transform: translateY(0);
    box-shadow: none;
}


/*--------------------------------------------------
 3. BUTTON ACCESSIBILITY
--------------------------------------------------*/

.sf-button:focus-visible {
    outline: 3px solid rgba(234, 94, 134, 0.25);
    outline-offset: 3px;
}


/*--------------------------------------------------
 4. TEMPLATE LINK RESET
--------------------------------------------------*/

.sf-button,
.sf-button:hover,
.sf-button:focus,
.sf-button:active,
.sf-button:visited {
    text-decoration: none;
}
/*--------------------------------------------------
CSS НА БУТОНИТЕ 1. BUTTON FOUNDATION
--------------------------------------------------*/

/*==================================================
 STUDIO FITNESS
 PAGE TEMPLATE 01 — INFORMATION PAGE
 SECTION 01 — MAIN INFORMATION

 LEFT BLOCK:
 Text + Features + Button

 RIGHT BLOCK:
 DJ-MediaTools Joomla Module

 VERSION : 1.0
 STATUS  : TESTING

 REQUIRED SPPB SECTION CLASS:
 sf-info-page-section

 RESPONSIVE:
 Desktop ✔
 Tablet  ✔
 Mobile  ✔
==================================================*/


/*--------------------------------------------------
 1. SPPB SECTION FOUNDATION
--------------------------------------------------*/

.sf-info-page-section .sppb-row {
    align-items: stretch;
}

.sf-info-page-section .sppb-row-column {
    display: flex;
    align-self: stretch;
}

.sf-info-page-section .sppb-column {
    width: 100%;

    display: flex;
    align-self: stretch;
}

.sf-info-page-section .sppb-column-addons {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.sf-info-page-section .sppb-addon-wrapper,
.sf-info-page-section .sppb-addon-text-block,
.sf-info-page-section .sppb-addon-content {
    width: 100%;
}


/*--------------------------------------------------
 2. SPPB AUTOMATIC PARAGRAPH RESET
--------------------------------------------------*/

.sf-info-page-section .sppb-addon-content > p {
    margin: 0;
    padding: 0;
}


/*--------------------------------------------------
 3. INFORMATION CONTENT
--------------------------------------------------*/

.sf-info-content {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    box-sizing: border-box;
}


/*--------------------------------------------------
 4. GLOBAL SECTION HEADING
--------------------------------------------------*/

.sf-section-heading {
    margin: 0;
    padding: 0;

    color: #30282b;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(20px, 1.55vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
}


/*--------------------------------------------------
 5. GLOBAL SECTION DIVIDER
--------------------------------------------------*/

.sf-section-divider {
    width: 42px;
    height: 3px;

    margin: 13px 0 20px;

    background: #e85f87;
    border-radius: 3px;

    flex: 0 0 auto;
}


/*--------------------------------------------------
 6. GLOBAL SECTION INTRO
--------------------------------------------------*/

.sf-section-intro {
    max-width: 680px;

    margin: 0 0 30px;
    padding: 0;

    color: #5d5558;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(14px, 0.95vw, 16px);
    font-weight: 400;
    line-height: 1.75;
}

.sf-section-intro p {
    margin: 0 0 15px;
    padding: 0;
}

.sf-section-intro p:last-child {
    margin-bottom: 0;
}


/*--------------------------------------------------
 7. FEATURES GRID
--------------------------------------------------*/

.sf-info-features {
    width: 100%;

    margin: 0 0 30px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 30px;

    box-sizing: border-box;
}


/*--------------------------------------------------
 8. FEATURE ITEM
--------------------------------------------------*/

.sf-info-feature {
    min-width: 0;

    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
}


/*--------------------------------------------------
 9. FEATURE ICON
--------------------------------------------------*/

.sf-info-feature-icon {
    width: 52px;
    height: 52px;

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

    overflow: hidden;
    flex: 0 0 auto;

    box-sizing: border-box;
}

.sf-info-feature-icon img {
    width: 100%;
    height: 100%;

    max-width: 52px;
    max-height: 52px;

    display: block;

    object-fit: contain;
    object-position: center;

    border: 0;
    margin: 0;
    padding: 0;

    float: none;
    position: static;

    box-shadow: none;
    vertical-align: middle;
}


/*--------------------------------------------------
 10. FEATURE CONTENT
--------------------------------------------------*/

.sf-info-feature-content {
    min-width: 0;
}

.sf-info-feature-content h3 {
    margin: 0 0 5px;
    padding: 0;

    color: #30282b;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(13px, 0.85vw, 15px);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.sf-info-feature-content p {
    margin: 0;
    padding: 0;

    color: #665c60;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(12px, 0.78vw, 14px);
    font-weight: 400;
    line-height: 1.55;
}


/*--------------------------------------------------
 11. LOCAL BUTTON POSITION
--------------------------------------------------*/

.sf-info-content .sf-button {
    align-self: flex-start;
}


/*--------------------------------------------------
 12. DJ-MEDIATOOLS AREA PROTECTION
--------------------------------------------------*/

.sf-info-page-section img {
    max-width: 100%;
}

.sf-info-page-section .dj-galleryslider,
.sf-info-page-section .dj-gallerygrid,
.sf-info-page-section .dj-mediatools,
.sf-info-page-section [class*="dj-gallery"] {
    max-width: 100%;
}


/*==================================================
 TABLET
==================================================*/

@media (min-width: 768px) and (max-width: 1199px) {

    .sf-section-divider {
        margin-bottom: 18px;
    }

    .sf-section-intro {
        margin-bottom: 26px;
        line-height: 1.7;
    }

    .sf-info-features {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 26px;
    }

    .sf-info-feature {
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 13px;
    }

    .sf-info-feature-icon {
        width: 48px;
        height: 48px;
    }

    .sf-info-feature-icon img {
        max-width: 48px;
        max-height: 48px;
    }
}


/*==================================================
 MOBILE
==================================================*/

@media (max-width: 767px) {

    .sf-info-page-section .sppb-row-column,
    .sf-info-page-section .sppb-column {
        display: block;
    }

    .sf-info-page-section .sppb-column-addons,
    .sf-info-page-section .sppb-addon-wrapper,
    .sf-info-page-section .sppb-addon-text-block,
    .sf-info-page-section .sppb-addon-content {
        height: auto;
        min-height: 0;
    }

    .sf-info-content {
        height: auto;
    }

    .sf-section-divider {
        width: 38px;

        margin-top: 11px;
        margin-bottom: 18px;
    }

    .sf-section-intro {
        margin-bottom: 24px;
        line-height: 1.7;
    }

    .sf-info-features {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 25px;
    }

    .sf-info-feature {
        grid-template-columns: 46px minmax(0, 1fr);
        column-gap: 12px;
    }

    .sf-info-feature-icon {
        width: 46px;
        height: 46px;
    }

    .sf-info-feature-icon img {
        max-width: 46px;
        max-height: 46px;
    }

    .sf-info-content .sf-button {
        align-self: flex-start;
    }
}


/*==================================================
 END — PAGE TEMPLATE 01
 SECTION 01 — MAIN INFORMATION
==================================================*/



/*==================================================
 GLOBAL COMPONENT
 CTA SECTION
 VERSION : 1.0
==================================================*/

.sf-cta{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
}

.sf-cta-icon{
    width:64px;
    flex:0 0 64px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sf-cta-icon img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
}

.sf-cta-content{
    flex:1 1 auto;
    min-width:0;
}

.sf-cta-title{
    margin:0 0 8px;
    color:#ffffff;
    font-family:"Montserrat",Arial,sans-serif;
    font-size:clamp(24px,2vw,32px);
    font-weight:700;
    line-height:1.2;
    text-transform:uppercase;
}

.sf-cta-text{
    margin:0;
    color:rgba(255,255,255,.95);
    font-family:"Montserrat",Arial,sans-serif;
    font-size:clamp(14px,.95vw,16px);
    line-height:1.6;
}

.sf-cta-action{
    flex:0 0 auto;
}

.sf-button-light{
    background:#ffffff;
    border-color:#ffffff;
    color:#e85f87;
}

.sf-button-light:hover,
.sf-button-light:focus{
    background:#fff6f8;
    border-color:#fff6f8;
    color:#d94e77;
    text-decoration:none;
}

@media (min-width:768px) and (max-width:1199px){

    .sf-cta{
        gap:24px;
    }

    .sf-cta-icon{
        width:56px;
        flex-basis:56px;
    }

}

@media (max-width:767px){

    .sf-cta{
        flex-direction:column;
        text-align:center;
        gap:20px;
    }

    .sf-cta-icon{
        width:54px;
        flex-basis:54px;
    }

    .sf-cta-action{
        width:100%;
        display:flex;
        justify-content:center;
    }
}

/*==================================================
 END CTA SECTION
==================================================*/


/*==================================================
 STUDIO FITNESS
 GLOBAL COMPONENT
 FOOTER BRAND + SOCIAL ICONS

 VERSION : 1.0
 STATUS  : TESTING
==================================================*/

.sf-footer-brand {
    width: 100%;
    font-family: "Montserrat", Arial, sans-serif;
}

.sf-footer-brand-logo {
    width: 100%;
    max-width: 190px;
    margin: 0 0 18px;
}

.sf-footer-brand-logo img {
    width: 100%;
    height: auto;
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
    float: none;
    position: static;
    box-shadow: none;
}

.sf-footer-brand-text {
    margin: 0 0 18px;
    padding: 0;
}

.sf-footer-brand-text p {
    margin: 0;
    padding: 0;
}

.sf-footer-socials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.sf-footer-social-link {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid #e85f87;
    border-radius: 50%;
    color: #e85f87;
    text-decoration: none;
    flex: 0 0 36px;
    box-sizing: border-box;
    transition:
        color 0.28s ease,
        background-color 0.28s ease,
        border-color 0.28s ease,
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.sf-footer-social-link i {
    display: block;
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: 15px;
    font-weight: normal;
    line-height: 1;
}

.sf-footer-social-link:hover,
.sf-footer-social-link:focus {
    background: #e85f87;
    border-color: #e85f87;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(217, 78, 119, 0.18);
}

.sf-footer-social-link:active {
    transform: translateY(0);
    box-shadow: none;
}

.sf-footer-social-link:focus-visible {
    outline: 3px solid rgba(234, 94, 134, 0.25);
    outline-offset: 3px;
}

.sf-footer-social-link:visited {
    color: #e85f87;
}

.sf-footer-social-link:visited:hover,
.sf-footer-social-link:visited:focus {
    color: #ffffff;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .sf-footer-brand-logo {
        max-width: 175px;
    }

    .sf-footer-social-link {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}

@media (max-width: 767px) {
    .sf-footer-brand {
        text-align: center;
    }

    .sf-footer-brand-logo {
        max-width: 170px;
        margin-right: auto;
        margin-left: auto;
    }

    .sf-footer-socials {
        justify-content: center;
    }
}

/*==================================================
 END — FOOTER BRAND + SOCIAL ICONS
==================================================*/

/*==================================================
 STUDIO FITNESS
 GLOBAL COMPONENT
 FOOTER WIDGET + LINKS

 VERSION : 1.0
 STATUS  : TESTING

 EF4 REMAINS OWNER OF:
 - Footer background
 - Text and link colors
 - Font sizes
 - Column spacing
 - Responsive column layout
==================================================*/


/*--------------------------------------------------
 1. FOOTER WIDGET FOUNDATION
--------------------------------------------------*/

.sf-footer-widget {
    width: 100%;

    font-family: "Montserrat", Arial, sans-serif;
}


/*--------------------------------------------------
 2. FOOTER SECTION HEADER CONTEXT
--------------------------------------------------*/

.sf-footer-widget .sf-section-heading {
    font-size: clamp(18px, 1.35vw, 22px);
    line-height: 1.25;
}

.sf-footer-widget .sf-section-divider {
    width: 36px;
    height: 3px;

    margin-top: 10px;
    margin-bottom: 18px;
}


/*--------------------------------------------------
 3. FOOTER LINKS RESET
--------------------------------------------------*/

.sf-footer-links {
    margin: 0;
    padding: 0;

    list-style: none;
}

.sf-footer-links li {
    margin: 0 0 8px;
    padding: 0;
}

.sf-footer-links li:last-child {
    margin-bottom: 0;
}

.sf-footer-links a {
    display: inline-block;

    color: inherit;
    text-decoration: none;

    transition:
        color 0.28s ease,
        transform 0.28s ease;
}

.sf-footer-links a:hover,
.sf-footer-links a:focus {
    text-decoration: none;
    transform: translateX(3px);
}


/*==================================================
 MOBILE
==================================================*/

@media (max-width: 767px) {

    .sf-footer-widget .sf-section-header {
        text-align: left;
    }

    .sf-footer-widget .sf-section-divider {
        margin-right: 0;
        margin-left: 0;
    }
}


/*==================================================
 END — FOOTER WIDGET + LINKS
==================================================*/

/*==================================================
 STUDIO FITNESS
 GLOBAL COMPONENT
 FOOTER CONTACTS

 VERSION : 1.0
 STATUS  : TESTING

 EF4 REMAINS OWNER OF:
 - Footer background
 - Text and link colors
 - Font sizes
 - Column spacing
 - Responsive column layout
==================================================*/


/*--------------------------------------------------
 1. CONTACT LIST
--------------------------------------------------*/

.sf-footer-contact {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 13px;

    font-family: "Montserrat", Arial, sans-serif;
}


/*--------------------------------------------------
 2. CONTACT ITEM
--------------------------------------------------*/

.sf-footer-contact-item {
    width: 100%;

    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    column-gap: 11px;
}


/*--------------------------------------------------
 3. CONTACT ICON
--------------------------------------------------*/

.sf-footer-contact-icon {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: 2px solid #e85f87;
    border-radius: 50%;

    color: #e85f87;

    box-sizing: border-box;

    transition:
        color 0.28s ease,
        background-color 0.28s ease,
        border-color 0.28s ease,
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.sf-footer-contact-icon i {
    display: block;

    margin: 0;
    padding: 0;

    color: inherit;

    font-size: 13px;
    font-weight: normal;
    line-height: 1;
}


/*--------------------------------------------------
 4. CONTACT TEXT
--------------------------------------------------*/

.sf-footer-contact-text {
    min-width: 0;
    padding-top: 3px;
}

.sf-footer-contact-text a {
    color: inherit;
    text-decoration: none;

    transition: color 0.28s ease;
}

.sf-footer-contact-text a:hover,
.sf-footer-contact-text a:focus {
    text-decoration: none;
}


/*--------------------------------------------------
 5. CONTACT ITEM HOVER
--------------------------------------------------*/

.sf-footer-contact-item:hover .sf-footer-contact-icon,
.sf-footer-contact-item:focus-within .sf-footer-contact-icon {
    background: #e85f87;
    border-color: #e85f87;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 7px 18px rgba(217, 78, 119, 0.18);
}


/*==================================================
 MOBILE
==================================================*/

@media (max-width: 767px) {

    .sf-footer-contact {
        max-width: 340px;
    }

    .sf-footer-contact-item {
        grid-template-columns: 30px minmax(0, 1fr);
    }
}


/*==================================================
 END — FOOTER CONTACTS
==================================================*/

/*==================================================
 STUDIO FITNESS
 GLOBAL COMPONENT
 FOOTER COPYRIGHT

 VERSION : 1.0
 STATUS  : TESTING

 EF4 REMAINS OWNER OF:
 - Footer background
 - Text and link colors
 - Font sizes
 - Outer spacing
==================================================*/


/*--------------------------------------------------
 1. COPYRIGHT FOUNDATION
--------------------------------------------------*/

.sf-footer-copyright {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    font-family: "Montserrat", Arial, sans-serif;
}


/*--------------------------------------------------
 2. LEFT SIDE
--------------------------------------------------*/

.sf-footer-copyright-left {
    min-width: 0;
}


/*--------------------------------------------------
 3. RIGHT SIDE
--------------------------------------------------*/

.sf-footer-copyright-right {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 6px;

    text-align: right;
}


/*--------------------------------------------------
 4. ELENICA DESIGN LINK
--------------------------------------------------*/

.sf-footer-copyright-right a {
    color: inherit;
    text-decoration: none;

    transition:
        color 0.28s ease,
        opacity 0.28s ease;
}

.sf-footer-copyright-right a:hover,
.sf-footer-copyright-right a:focus {
    color: #e85f87;
    text-decoration: none;
}


/*--------------------------------------------------
 5. HEART ICON
--------------------------------------------------*/

.sf-footer-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #e85f87;

    line-height: 1;
}

.sf-footer-heart i {
    display: block;

    margin: 0;
    padding: 0;

    color: inherit;

    font-size: 13px;
    line-height: 1;
}


/*==================================================
 TABLET
==================================================*/

@media (min-width: 768px) and (max-width: 1199px) {

    .sf-footer-copyright {
        gap: 16px;
    }
}


/*==================================================
 MOBILE
==================================================*/

@media (max-width: 767px) {

    .sf-footer-copyright {
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 8px;

        text-align: center;
    }

    .sf-footer-copyright-left,
    .sf-footer-copyright-right {
        width: 100%;
    }

    .sf-footer-copyright-right {
        justify-content: center;
        text-align: center;
    }
}


/*==================================================
 END — FOOTER COPYRIGHT
==================================================*/

/*==================================================
 STUDIO FITNESS
 BA ACCORDION MENU
 STYLE 43 OVERRIDE

 VERSION : 1.0
 STATUS  : TESTING

 COLORS:
 Normal background : #EA6B8C
 Normal text       : #FFFFFF
 Hover background  : #FCE7EA
 Hover text        : #EA6B8C

 ORIGINAL STYLE43 SHAPE:
 Preserved
==================================================*/


/*--------------------------------------------------
 1. MENU ITEM FOUNDATION
--------------------------------------------------*/

.ba__accordion-menu.style43
.ba__menu-main > * > .ba__accordion-menu-header {
    background: #EA6B8C;
    color: #FFFFFF;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


/*--------------------------------------------------
 2. MENU ITEM HOVER / FOCUS
--------------------------------------------------*/

.ba__accordion-menu.style43
.ba__menu-main > * > .ba__accordion-menu-header:hover,
.ba__accordion-menu.style43
.ba__menu-main > * > .ba__accordion-menu-header:focus,
.ba__accordion-menu.style43
.ba__menu-main > * > .ba__accordion-menu-header:focus-visible {
    background: #FCE7EA;
    color: #EA6B8C;

    transform: translateX(4px);
}


/*--------------------------------------------------
 3. ICON COLOR INHERITANCE
--------------------------------------------------*/

.ba__accordion-menu.style43
.ba__menu-main > * > .ba__accordion-menu-header i,
.ba__accordion-menu.style43
.ba__menu-main > * > .ba__accordion-menu-header svg {
    color: inherit;
    fill: currentColor;
}


/*--------------------------------------------------
 4. ACTIVE / CURRENT ITEM
--------------------------------------------------*/

.ba__accordion-menu.style43
.ba__menu-main > *.active > .ba__accordion-menu-header,
.ba__accordion-menu.style43
.ba__menu-main > *.current > .ba__accordion-menu-header,
.ba__accordion-menu.style43
.ba__menu-main > *.current-menu-item > .ba__accordion-menu-header {
    background: #FCE7EA;
    color: #EA6B8C;
}


/*==================================================
 END — BA ACCORDION MENU STYLE 43 OVERRIDE
==================================================*/
/*==================================================
 БУТОН РЕЗЕРВИРАЙ В ХОРИЗОНТАЛНОТО МЕНЮ
==================================================*/
/* ==================================================
   EF4 HEADER - CTA MENU BUTTON
   Menu Class: ef4-cta
================================================== */

body .ef4-header .ef4-header-menu-main ul.nav > li > a.ef4-cta{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:44px;

    padding:0 22px;

    margin-left:16px;

    background-color:#EA6B8C !important;
    background-image:none !important;

    color:#FFFFFF !important;

    border:2px solid #EA6B8C !important;
    border-radius:30px;

    font-size:15px;
    font-weight:700;
    line-height:1;

    text-decoration:none;

    transition:
        background-color .30s ease,
        border-color .30s ease,
        color .30s ease,
        transform .30s ease,
        box-shadow .30s ease;
}

body .ef4-header .ef4-header-menu-main ul.nav > li > a.ef4-cta:hover,
body .ef4-header .ef4-header-menu-main ul.nav > li > a.ef4-cta:focus{

    background-color:#D95B7D !important;
    background-image:none !important;

    border-color:#D95B7D !important;

    color:#FFFFFF !important;

    transform:translateY(-2px);

    box-shadow:0 10px 22px rgba(234,107,140,.28);

}

body .ef4-header .ef4-header-menu-main ul.nav > li > a.ef4-cta:active{

    transform:translateY(0);

}
/*==================================================
 КРАЙ НА БУТОН РЕЗЕРВИРАЙ В ХОРИЗОНТАЛНОТО МЕНЮ
==================================================*/

/*==================================================
 STUDIO FITNESS
 VIKAPPOINTMENTS PACKAGES
 PHASE PACKAGES 1.0B
 PACKAGE GRID & EQUAL HEIGHT ARCHITECTURE

 VERSION : 1.0
 STATUS  : TESTING

 SCOPE:
 - Structural CSS only
 - Desktop: 3 columns
 - Tablet: 2 columns
 - Mobile: 1 column
 - Equal height cards per row
 - CTA aligned to bottom
 - No fixed card heights
 - Incomplete last row centered

 VIK REMAINS OWNER OF:
 - Package markup
 - Package business logic
 - Package data
 - Add-to-cart behavior
==================================================*/


/*--------------------------------------------------
 1. PACKAGE GRID FOUNDATION
--------------------------------------------------*/

.vap-package-group-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;

    box-sizing: border-box;
}


/*--------------------------------------------------
 2. PACKAGE CARD STRUCTURE
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block {
    width: calc(33.333333% - 20px) !important;
    height: auto;

    display: flex;
    flex-direction: column;
    align-self: stretch;

    box-sizing: border-box;
}


/*--------------------------------------------------
 3. DESCRIPTION FLEX AREA
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block .vap-package-description {
    flex: 1 1 auto;
}


/*--------------------------------------------------
 4. CTA BOTTOM ALIGNMENT
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block .vap-package-button {
    margin-top: auto;
}


/*==================================================
 TABLET
 2 COLUMNS
==================================================*/

@media (min-width: 768px) and (max-width: 1199px) {

    .vap-package-group-list > .vap-package-block {
        width: calc(50% - 20px) !important;
    }
}


/*==================================================
 MOBILE
 1 COLUMN / NATURAL HEIGHT
==================================================*/

@media (max-width: 767px) {

    .vap-package-group-list {
        display: block;
    }

    .vap-package-group-list > .vap-package-block {
        width: 97% !important;
        height: auto;

        display: flex;
        flex-direction: column;

        margin-right: auto;
        margin-left: auto;
    }

    .vap-package-group-list > .vap-package-block .vap-package-description {
        flex: 0 1 auto;
    }

    .vap-package-group-list > .vap-package-block .vap-package-button {
        margin-top: 0;
    }
}


/*==================================================
 END — VIKAPPOINTMENTS PACKAGES
 PHASE PACKAGES 1.0B
 PACKAGE GRID & EQUAL HEIGHT ARCHITECTURE
==================================================*/

/*==================================================
 STUDIO FITNESS
 VIKAPPOINTMENTS PACKAGES
 PHASE PACKAGES 1.0C
 GAZELLA PACKAGE CARD VISUAL FOUNDATION

 VERSION : 1.0
 STATUS  : TESTING

 PURPOSE:
 - Bring package cards visually close to the
   already approved Gazella service cards
 - Preserve PHASE PACKAGES 1.0B structure
 - Preserve VikAppointments markup and logic

 VIK REMAINS OWNER OF:
 - Package markup
 - Package business logic
 - Package data
 - Add-to-cart behavior
 - Package groups and availability

 THIS PHASE OWNS ONLY:
 - Card visual appearance
 - Typography hierarchy
 - Spacing
 - Borders / radius / shadow
 - CTA colors and interaction
==================================================*/


/*--------------------------------------------------
 1. PACKAGE CARD VISUAL FOUNDATION
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block {
    background: #ffffff;

    border: 1px solid #f4dce3 !important;
    border-radius: 12px;

    color: #30282b;

    box-shadow: 0 7px 22px rgba(213, 91, 127, 0.055);

    overflow: hidden;

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background-color 0.28s ease;
}

.vap-package-group-list > .vap-package-block:hover,
.vap-package-group-list > .vap-package-block:focus-within {
    background: #fffafb;

    border-color: #efb9c8 !important;

    transform: translateY(-3px) !important;

    box-shadow: 0 13px 30px rgba(213, 91, 127, 0.11);
}


/*--------------------------------------------------
 2. PACKAGE TITLE
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block .vap-package-name {
    margin: 0;
    padding: 18px 18px 14px;

    background: transparent;

    border: 0 !important;
    border-bottom: 1px solid #f4dce3 !important;

    color: #30282b;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(15px, 1.05vw, 17px);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}


/*--------------------------------------------------
 3. PACKAGE PRICE
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block .vap-package-price {
    margin: 0;
    padding: 18px 18px 14px;

    background: transparent;

    border: 0 !important;

    color: #30282b;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(22px, 1.55vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}


/*--------------------------------------------------
 4. NUMBER OF APPOINTMENTS
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block .vap-package-numapp {
    margin: 0;
    padding: 0 18px 16px;

    background: transparent;

    border: 0 !important;
    border-bottom: 1px solid #f4dce3 !important;

    color: #5d5558;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(13px, 0.9vw, 15px);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}


/*--------------------------------------------------
 5. PACKAGE DESCRIPTION
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block .vap-package-description {
    margin: 0;
    padding: 18px;

    background: transparent;

    border: 0 !important;

    color: #665c60;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(13px, 0.88vw, 15px);
    font-weight: 400;
    line-height: 1.65;
    text-align: left;
}

.vap-package-group-list > .vap-package-block .vap-package-description p {
    margin-top: 0;
    margin-bottom: 14px;
}

.vap-package-group-list > .vap-package-block .vap-package-description p:last-child {
    margin-bottom: 0;
}


/*--------------------------------------------------
 6. PACKAGE VALIDITY
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block .vap-package-validity {
    margin: 0;
    padding: 0 18px 16px;

    color: #665c60;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
}


/*--------------------------------------------------
 7. PACKAGE CTA AREA
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block .vap-package-button {
    width: 100%;

    padding: 0 16px 16px;

    background: transparent;

    border: 0 !important;

    box-sizing: border-box;
}


/*--------------------------------------------------
 8. PACKAGE CTA BUTTON
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block .vap-package-button .vap-btn,
.vap-package-group-list > .vap-package-block .vap-package-button button,
.vap-package-group-list > .vap-package-block .vap-package-button a {
    width: 100%;
    min-height: 44px;

    padding: 11px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #e85f87 !important;
    background-image: none !important;

    border: 1px solid #e85f87 !important;
    border-radius: 7px;

    color: #ffffff !important;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;

    cursor: pointer;
    box-sizing: border-box;

    transition:
        color 0.28s ease,
        background-color 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s ease;
}

.vap-package-group-list > .vap-package-block .vap-package-button .vap-btn:hover,
.vap-package-group-list > .vap-package-block .vap-package-button .vap-btn:focus,
.vap-package-group-list > .vap-package-block .vap-package-button button:hover,
.vap-package-group-list > .vap-package-block .vap-package-button button:focus,
.vap-package-group-list > .vap-package-block .vap-package-button a:hover,
.vap-package-group-list > .vap-package-block .vap-package-button a:focus {
    background: #d94e77 !important;
    background-image: none !important;

    border-color: #d94e77 !important;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(217, 78, 119, 0.22);
}

.vap-package-group-list > .vap-package-block .vap-package-button .vap-btn:active,
.vap-package-group-list > .vap-package-block .vap-package-button button:active,
.vap-package-group-list > .vap-package-block .vap-package-button a:active {
    transform: translateY(0);

    box-shadow: none;
}

.vap-package-group-list > .vap-package-block .vap-package-button .vap-btn:focus-visible,
.vap-package-group-list > .vap-package-block .vap-package-button button:focus-visible,
.vap-package-group-list > .vap-package-block .vap-package-button a:focus-visible {
    outline: 3px solid rgba(234, 94, 134, 0.25);
    outline-offset: 3px;
}


/*==================================================
 TABLET
==================================================*/

@media (min-width: 768px) and (max-width: 1199px) {

    .vap-package-group-list > .vap-package-block .vap-package-name {
        padding: 16px 16px 13px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-price {
        padding: 16px 16px 13px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-numapp {
        padding: 0 16px 14px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-description {
        padding: 16px;
        line-height: 1.6;
    }

    .vap-package-group-list > .vap-package-block .vap-package-button {
        padding: 0 14px 14px;
    }
}


/*==================================================
 MOBILE
==================================================*/

@media (max-width: 767px) {

    .vap-package-group-list > .vap-package-block {
        border-radius: 10px;

        transform: none !important;

        box-shadow: 0 5px 16px rgba(213, 91, 127, 0.06);
    }

    .vap-package-group-list > .vap-package-block:hover,
    .vap-package-group-list > .vap-package-block:focus-within {
        transform: none !important;
    }

    .vap-package-group-list > .vap-package-block .vap-package-name {
        padding: 15px 14px 12px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-price {
        padding: 15px 14px 12px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-numapp {
        padding: 0 14px 13px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-description {
        padding: 15px 14px;

        font-size: 13px;
        line-height: 1.6;
    }

    .vap-package-group-list > .vap-package-block .vap-package-validity {
        padding: 0 14px 14px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-button {
        padding: 0 14px 14px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-button .vap-btn,
    .vap-package-group-list > .vap-package-block .vap-package-button button,
    .vap-package-group-list > .vap-package-block .vap-package-button a {
        min-height: 42px;

        padding: 10px 16px;

        font-size: 13px;
    }
}


/*==================================================
 END — VIKAPPOINTMENTS PACKAGES
 PHASE PACKAGES 1.0C
 GAZELLA PACKAGE CARD VISUAL FOUNDATION
==================================================*/

/*==================================================
 STUDIO FITNESS
 VIKAPPOINTMENTS PACKAGES
 PHASE PACKAGES 1.0D
 GAZELLA PACKAGE CARD VISUAL REFINEMENT

 VERSION : 1.0
 STATUS  : TESTING

 PURPOSE:
 - Refine the visual layer established in 1.0C
 - Bring package cards closer to Gazella service cards
 - Improve hierarchy without touching architecture
 - Preserve existing empty-space behavior when a
   package has no description

 IMPORTANT:
 - NO grid/flex architecture changes
 - NO equal-height changes
 - NO fixed heights
 - NO description min-height/max-height changes
 - NO CTA bottom-alignment changes
 - NO VikAppointments markup/core changes
==================================================*/


/*--------------------------------------------------
 1. UPPER ZONE — SOFTER VISUAL RHYTHM
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block .vap-package-name {
    padding: 20px 20px 15px;

    border-bottom-color: #f6e5ea !important;

    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.vap-package-group-list > .vap-package-block .vap-package-price {
    padding: 20px 20px 8px;

    color: #2f282a;

    font-size: clamp(23px, 1.6vw, 29px);
    line-height: 1.15;
}

.vap-package-group-list > .vap-package-block .vap-package-numapp {
    padding: 0 20px 19px;

    border-bottom-color: #f6e5ea !important;

    color: #74696d;

    font-size: clamp(12px, 0.86vw, 14px);
    font-weight: 500;
    line-height: 1.45;
}


/*--------------------------------------------------
 2. DESCRIPTION — TYPOGRAPHIC REFINEMENT ONLY
 IMPORTANT:
 No height / min-height / max-height / flex changes.
 Existing 1.0B spacing behavior remains untouched.
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block .vap-package-description {
    color: #62585c;

    line-height: 1.7;
}


/*--------------------------------------------------
 3. CARD SURFACE — FINER GAZELLA FINISH
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block {
    border-color: #f1dce2 !important;

    box-shadow: 0 6px 20px rgba(213, 91, 127, 0.05);
}

.vap-package-group-list > .vap-package-block:hover,
.vap-package-group-list > .vap-package-block:focus-within {
    border-color: #efc3cf !important;

    box-shadow: 0 12px 28px rgba(213, 91, 127, 0.095);
}


/*--------------------------------------------------
 4. CTA — CLOSER TO GAZELLA "ЗАПАЗИ ЧАС"
--------------------------------------------------*/

.vap-package-group-list > .vap-package-block .vap-package-button .vap-btn,
.vap-package-group-list > .vap-package-block .vap-package-button button,
.vap-package-group-list > .vap-package-block .vap-package-button a {
    min-height: 46px;

    padding: 12px 20px;

    background: #ea638a !important;
    border-color: #ea638a !important;

    border-radius: 7px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
}

.vap-package-group-list > .vap-package-block .vap-package-button .vap-btn:hover,
.vap-package-group-list > .vap-package-block .vap-package-button .vap-btn:focus,
.vap-package-group-list > .vap-package-block .vap-package-button button:hover,
.vap-package-group-list > .vap-package-block .vap-package-button button:focus,
.vap-package-group-list > .vap-package-block .vap-package-button a:hover,
.vap-package-group-list > .vap-package-block .vap-package-button a:focus {
    background: #df557f !important;
    border-color: #df557f !important;

    box-shadow: 0 7px 18px rgba(223, 85, 127, 0.20);
}


/*==================================================
 TABLET — VISUAL REFINEMENT ONLY
==================================================*/

@media (min-width: 768px) and (max-width: 1199px) {

    .vap-package-group-list > .vap-package-block .vap-package-name {
        padding: 18px 18px 14px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-price {
        padding: 18px 18px 7px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-numapp {
        padding: 0 18px 17px;
    }
}


/*==================================================
 MOBILE — VISUAL REFINEMENT ONLY
==================================================*/

@media (max-width: 767px) {

    .vap-package-group-list > .vap-package-block .vap-package-name {
        padding: 17px 15px 13px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-price {
        padding: 17px 15px 7px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-numapp {
        padding: 0 15px 15px;
    }

    .vap-package-group-list > .vap-package-block .vap-package-button .vap-btn,
    .vap-package-group-list > .vap-package-block .vap-package-button button,
    .vap-package-group-list > .vap-package-block .vap-package-button a {
        min-height: 44px;

        padding: 11px 17px;

        font-size: 13px;
    }
}


/*==================================================
 END — VIKAPPOINTMENTS PACKAGES
 PHASE PACKAGES 1.0D
 GAZELLA PACKAGE CARD VISUAL REFINEMENT
==================================================*/
/*==================================================
 GAZELLA — TOP HEADER TOOLS
 ВХОД / РЕГИСТРАЦИЯ + КОЛИЧКА
==================================================*/

/* Основна подредба на елементите */
.gazella-top-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

/* Общ стил на линковете */
.gazella-login-trigger,
.gazella-cart-trigger {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Вход / Регистрация */
.gazella-login-trigger {
    color: #000000;
}

/* Изображение на количката */
.gazella-cart-trigger img {
    display: block;
    width: 30px;
    height: 30px;
}

/*--------------------------------------------------
 ФИНО ПОЗИЦИОНИРАНЕ НА КОЛИЧКАТА
 X: + надясно / - наляво
 Y: + надолу  / - нагоре
--------------------------------------------------*/

.gazella-cart-trigger {
    position: relative;
    left: 5px;
    top: -5px;
}

/*==================================================
 КРАЙ — GAZELLA TOP HEADER TOOLS
==================================================*/
/*==================================================
 ОТМЕСТВАНЕ КОЛИЧКАТА В ТОП ХЕДЪР ТЕЛЕФОНИ
==================================================*/
.gazella-cart-trigger-mobile {
    position: relative;
    left: 5px;   /* X */
    top: -5px;  /* Y */
}
/*==================================================
КРАЙ ОТМЕСТВАНЕ КОЛИЧКАТА В ТОП ХЕДЪР ТЕЛЕФОТИ
==================================================*/