.divContentPromoPacienti {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    color: #50596C;
    width: 100%;
    padding: 15px;
    padding-top: 20px;
    box-sizing: border-box;
}

.divContentPromoPacienti .divBoxPromoPacient {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 0;
}

.divContentPromoPacienti .divBlockPromo,
.divContentPromoPacienti .divBlockPromo:hover,
.divContentPromoPacienti .divBlockPromo:link,
.divContentPromoPacienti .divBlockPromo:visited {
    max-width: 100% !important;
    width: 100% !important;
}

@media screen and (max-width: 992px) {
    .divContentPromoPacienti {
        grid-template-columns: 1fr;
    }

    .divBoxPromoPacient .divPromoBlockTitlu {
        text-align: center;
        padding: 15px 20px;
        justify-content: center;
    }
}

.promotiePacientItem.open .promotiePacientBody {
    opacity: 1;
    max-height: none;
}

.promotiePacientItem {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    width: 100%;
}

.promotiiPacientClinicaCounter {
    display: flex;
    height: 36px;
    padding: 5px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 30px;
    background: #7563F8;
    color: #FFF;
    font-family: Raleway;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-left: auto;
    margin-right: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.promotiiPacientClinicaCounter:hover {
    background: #6452e0;
}

.promotiiPacientClinicaCounter .counterBadge {
    display: flex;
    min-width: 22px;
    height: 22px;
    padding: 3px 5px;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    background: rgba(255,255,255,0.25);
    color: #FFF;
    text-align: center;
    font-family: Montserrat;
    font-size: 11px;
    font-weight: 600;
    line-height: normal;
}

.promotiiPacientClinicaCounter .counterArrow {
    font-size: 20px;
    transition: transform 0.3s ease;
    line-height: 1;
}

.promotiiPacientClinicaCounter .counterArrow.rotate {
    transform: rotate(180deg);
}

.promotiePacientBody {
    display: block;
    padding: 0;
    border-radius: 0 0 10px 10px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.2s ease;
}

/* styling header solicitare */
.promotiePacientHeader {
    display: flex;
    width: 100%;
    padding: 20px 30px 20px 20px;
    align-items: center;
    border-radius: 10px;
    background: #FFF;
    /* CDB card SHADOW */
    box-shadow: 10px 0 10px 0 rgba(187, 187, 187, 0.30), 2px 2px 10px 0 rgba(187, 187, 187, 0.30);
    cursor: pointer;
    position: relative;
}

    .promotiePacientHeader.open {
        border-radius: 10px 10px 10px 10px;
        margin-bottom: 30px;
    }

.containerClinicaPromotiePacient {
    display: flex;
    align-items: center;
    gap: 10px;
}

.imgPromotiePacientClinica {
    width: 50px;
    height: 50px;
    aspect-ratio: 1/1;
    border-radius: 5px;
}

.containerPromotiePacientTitluClinica {
    display: flex;
    min-width: 0;
    height: 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.titluClinicaPromotiePacient {
    color: #50596C;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    flex: 1 0 0;
    align-self: stretch;
}

.orasClinicaPromotiePacient {
    color: rgba(80, 89, 108, 0.70);
    font-family: Raleway;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    flex: 1 0 0;
    align-self: stretch;
}


.imgPromotiiPacientCheck {
    background-image: url("../../Icons/Admin/check-white.svg") !important;
    display: flex;
    width: 18px;
    height: 18px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
}

.iconDown {
    background: none;
    border: none;
    position: absolute;
    right: 50px;
}

    .iconDown span {
        font-size: 26px !important;
        transition: transform 0.3s ease;
    }

        .iconDown span.rotate {
            transform: rotate(180deg);
        }

.divBoxPromoPacient {
    min-width: 0;
    max-width: 620px;
}

.badgeOfertaLimitata {
    position: absolute;
    top: -15px;
    right: 20px;
    background: #EF3C3C;
    color: #FFF;
    font-family: Raleway;
    font-size: 10.5px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 22.5px;
    white-space: nowrap;
    z-index: 1;
}

.badgeOfertaDezactivata {
    position: absolute;
    top: -15px;
    right: 20px;
    background: #8492AF;
    color: #FFF;
    font-family: Raleway;
    font-size: 10.5px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 22.5px;
    white-space: nowrap;
    z-index: 1;
}

@media screen and (min-width: 1351px) {
    .iconDown {
        right: 130px;
    }
}

@media screen and (min-width: 993px) and (max-width: 1350px) {
    .promotiePacientBody {
        flex-direction: column;
    }

    .promotiePacientItem {
        width: 95%;
    }

    .iconDown {
        right: 130px;
    }

    .divBoxPromoPacient {
        justify-items: center;
    }
}

/* Tablet si mobile (max 992px) */
@media screen and (max-width: 992px) {
    .promotiePacientItem {
        width: 100%;
    }

    .containerPromotiePacientTitluClinica {
        min-width: unset;
        width: auto;
        flex: 1;
    }

    .divBoxPromoPacient {
        min-width: unset;
        width: 100%;
    }

    .divBlockPromo,
    .divBlockPromo:hover,
    .divBlockPromo:link,
    .divBlockPromo:visited {
        overflow: visible;
    }

    .promotiePacientHeader {
        padding: 16px 50px 16px 16px; /* dreapta mai mare pentru iconDown */
        gap: 0;
        flex-wrap: wrap;
        min-height: 90px;
    }

    /* Clinica ocupa toata linia, counter sub numele clinicii */
    .containerClinicaPromotiePacient {
        flex: 0 0 calc(100% - 40px);
    }

    .promotiiPacientClinicaCounter {
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
        margin-left: 60px; /* logo 50px + gap 10px = aliniat sub numele clinicii */
        flex: 0 0 auto;
    }

    .iconDown {
        position: absolute;
        right: 16px;
        bottom: 14px;
        margin-top: 0;
    }

    .promoBodyContainer {
        flex-direction: column !important;
    }

    /* divContainerHeader/Footer -- suprascrie regula 991px de la final (pentru clinica) */
    .divBoxPromoPacient .divContainerHeader,
    .divBoxPromoPacient .divContainerFooter {
        position: relative !important;
        top: unset !important;
        right: unset !important;
    }

    /* Footer card promotie */
    .divBoxPromoPacient .divContainerFooter {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 15px;
        gap: 8px;
    }

    .divContainerFooterLeft {
        justify-content: flex-start !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .divContainerFooterLeftText {
        width: auto !important;
        max-width: 100% !important;
        flex: 1;
        font-size: 14px;
    }

    .divContainerFooterRight,
    .divContainerFooterRightInactiva {
        display: inline-flex !important;
        margin-top: 0 !important;
    }

    .divPromoBodyRightContentHeaderStatusPromotieDataIncheiata {
        flex-direction: column !important;
        width: 100% !important;
    }
}

/* Mobil mic (max 540px) */
@media screen and (max-width: 540px) {
    .promotiePacientHeader {
        padding: 12px;
    }

        .promotiePacientHeader > * {
            font-size: 14px;
            min-width: unset;
        }

    .titluClinicaPromotiePacient {
        font-size: 15px;
    }

    .divBoxPromo {
        min-width: unset;
        width: 100%;
    }

    .divBlockPromo,
    .divBlockPromo:hover,
    .divBlockPromo:link,
    .divBlockPromo:visited {
        width: 100% !important;
    }

    .divPromoBodyRightContentHeaderPretNou {
        font-size: 22px;
    }

    .divPromoBodyRightContentHeaderStatusPromotieDataExpiraInUnitati {
        width: 46px;
        height: 46px;
        padding: 6px 3px;
    }

    .iconDown {
        right: 10px;
    }
}

/* Mobil foarte mic (max 390px) */
@media screen and (max-width: 390px) {
    .promotiePacientHeader {
        padding: 10px;
    }

    .containerClinicaPromotiePacient {
        flex-wrap: wrap;
    }

    .iconDown {
        right: 8px;
    }
}

/*===============================================*/
.divBoxPromo {
    margin-top: 30px;
    min-width: 0;
    position: relative;
}

.divBlockPromo, .divBlockPromo:hover, .divBlockPromo:link, .divBlockPromo:visited {
    position: relative;
    text-decoration: none;
    justify-content: center;
    align-items: flex-start;
    border-radius: 10px;
    background: #FFF;
    transition: 0.2s ease-in-out;
    box-shadow: 6px 6px 20px rgba(187, 187, 187, 0.30), -6px 0px 20px rgba(187, 187, 187, 0.30);
    max-width: 620px;
}

    .divBlockPromo:hover {
        box-shadow: 0px 0px 10px 0px rgba(187, 187, 187, 0.70);
    }

.divHeadPromo {
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    font-family: Montserrat;
}



.groupColoanaDreapta {
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.spnPromoPretNou {
    color: #3F20FB;
    font-size: 22px;
    font-weight: 800;
    font-family: Raleway;
    text-transform: uppercase;
}

.spnPromoPretVechi {
    color: rgba(80, 89, 108, 0.70);
    font-family: Raleway;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-decoration-line: line-through;
    opacity: 0.8;
}

.divContainerHeader {
    position: relative;
    width: 100%;
}

.divContainerFooter {
    position: relative;
    width: 100%;
    display: flex;
    padding: 15px 25px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 10px;
}

.divContainerFooterLeft {
    display: flex;
    align-items: center;
    gap: 10px;
}

.divContainerFooterLeftCheck {
    width: 20px;
    height: 20px;
    background: #008000;
    background-image: url("../../Icons/Admin/check-white.svg") !important;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 3px;
    border: 1px solid #008000;
    gap: 10px;
}

.divContainerFooterLeftText {
    display: flex;
    width: 283px;
    align-items: center;
    gap: 20px;
    color: #50596C;
    font-family: Raleway;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.divContainerFooterRight {
    display: flex;
    height: 30px;
    padding: 5px 20px;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border-radius: 30px;
    background: #008000;
    color: #FFF;
    font-family: Raleway;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.divContainerFooterRightInactiva {
    display: flex;
    height: 30px;
    padding: 5px 20px;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border-radius: 30px;
    background: #E3E3E3;
    color: #50596C;
    font-family: Raleway;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.iconMore {
    text-align: center;
    position: absolute;
    top: 20px;
    right: 20px;
    color: #1C1B1F;
    cursor: pointer;
    user-select: none;
    width: 30px;
    height: 30px;
    line-height: normal;
}

.divMeniuOptiuni {
    display: flex;
    position: absolute;
    right: 0;
    top: 30px;
    background: #FFF;
    border-radius: 10px;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.15);
    width: 210px;
    padding: 10px;
    z-index: 100;
}

    .divMeniuOptiuni.hide {
        display: none;
    }

.divStergePromotie,
.divReactiveazaPromotie {
    display: flex;
    align-items: center;
    color: #50596C;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    padding: 10px 10px 10px 0;
    border-radius: 10px;
    transition: 0.2s ease-in-out;
}

.divStatisticiPromotie {
    display: flex;
    align-items: center;
    color: #50596C;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    padding: 10px 10px 10px 0;
    border-radius: 10px;
    transition: 0.2s ease-in-out;
    cursor: pointer;
}

.divMeniuOptiuni .customChkContainer {
    align-items: center;
    border-radius: 10px;
}

    .divStergePromotie:hover,
    .divReactiveazaPromotie:hover,
    .divStatisticiPromotie:hover,
    .divMeniuOptiuni .customChkContainer:hover {
        background: #f0f0f1;
        cursor: pointer;
    }

.divStergePromotie > *:first-of-type,
.divReactiveazaPromotie > *:first-of-type,
.divStatisticiPromotie > *:first-of-type {
    width: 40px;
    text-align: center;
}

.divPromoBlockTitlu,
.divPromoBlockTitluMobile {
    color: #50596C;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    width: 100%;
    display: flex;
    height: 40.5px;
    padding-left: 10.125px;
    justify-content: center;
    align-items: center;
    gap: 13.5px;
    flex: 1 0 0;
    text-align: center;
    font-family: Raleway;
    font-size: 22.5px;
    font-style: normal;
}

.divPromoBlockTextGriDisabled {
    color: rgba(80, 89, 108, 0.50) !important;
}

.divPromoBlockTextAlbastruBoldDisabled {
    color: rgba(63, 32, 251, 0.30) !important;
}

.divPromoBlockTextNegruBoldDisabled {
    color: #50596C !important;
}

.divPromoPromotieCategorieDisabled {
    color: rgba(80, 89, 108, 0.50) !important;
}

.divPromoBlockTitlu {
    padding: 20px 45px 15px 20px;
}

.divPromoBlockTitluMobile {
    text-align: center;
    padding: 0 25px;
}

.groupInfoPrincipale {
    gap: 30px;
    width: 100%;
    padding: 0 20px;
}

.divPromoBlockData {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7.5px;
    padding: 11.25px 10px;
    border-radius: 6.75px;
    width: 100%;
    text-align: center;
}

.spnRed {
    color: red
}

.divPicPromo {
    width: 300px;
    height: 315px;
    border-radius: 5px;
    object-fit: cover;
}

.listaEmpty {
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 24px;
    color: #8492af
}

.divOra, .divMinute, .divSecunde {
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 60px;
    height: 60px;
    border-radius: 3.75px;
    color: #3F20FB;
}

.divOra {
    border: none;
    background: #FAFAFA;
}

.divMinute {
    border: none;
    background: #FAFAFA;
}

.divSecunde {
    border: none;
    background: #FAFAFA;
}

    .divOra > div:last-of-type, .divMinute > div:last-of-type, .divSecunde > div:last-of-type {
        font-size: 12px;
        font-weight: 400;
        line-height: normal;
    }

.divTimp {
    font-size: 19.5px;
    font-weight: 500;
    line-height: normal;
    font-family: Montserrat;
}

.divPromoTimer {
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.divPromoTimerDate {
    display: flex;
    padding: 11.25px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 7.5px;
    background: rgba(175, 167, 238, 0.30);
}

    .divPromoTimerDate span:first-of-type {
        font-size: 14px;
        font-weight: 700;
        font-family: Raleway;
        line-height: normal;
        color: #3F20FB;
    }

    .divPromoTimerDate span:last-of-type {
        color: #3F20FB;
        text-align: center;
        font-family: Raleway;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        align-self: stretch;
    }

.divPromoTimerIncheiat {
    color: #333;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

.subtitlu {
    color: #3F20FB;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    font-family: Raleway;
    margin-bottom: 0;
}

.divPromoTimerIncheiatDetalii {
    font-weight: 400;
}

.subtitlu {
    margin-bottom: 5px;
}

.btnEditeaza {
    cursor: pointer;
    margin-right: 10px;
    color: #00d463;
    padding: 7px;
    border-radius: 5px;
    border: 1px solid rgba(132,146,175,.5);
    width: 100px;
    display: inline-block
}

.btnSterge {
    cursor: pointer;
    color: #eb4e3d;
    padding: 7px;
    border-radius: 5px;
    border: 1px solid rgba(132,146,175,.5);
    width: 100px;
    display: inline-block
}

    .btnEditeaza:hover, .btnSterge:hover {
        background-color: #eef4f8
    }

.divBtnAdmin {
    margin-top: 5px;
    padding-top: 10px;
    text-align: center;
    border-top: 2px solid rgba(132,146,175,.2)
}

.paddLeftZero {
    padding-left: 0
}

.paddRightZero {
    padding-right: 0
}

.divDetPromo {
    margin-top: 15px;
    margin-bottom: 15px;
    text-decoration: underline
}

.imgPromoDateMain {
    width: 22px;
    height: 22px;
    margin-right: 5px
}

.divPromoCategorie,
.divPromoCuiSeAdreseaza {
    color: #50596C;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: normal;
    margin-bottom: 10px;
}

.spnBig {
    font-size: 18px
}

.spnPerioadaHidden {
    display: none !important;
}

.spnPerioadaShown {
    display: block !important;
}

.divDescrierePromotie {
    display: none;
}

.txtDescriereInPopup {
    width: 100% !important;
    max-width: 100% !important;
    height: 120px;
    resize: none;
    border: 1px solid rgba(200, 200, 200, 0.5);
    border-radius: 6px;
    padding: 10px 15px;
    font-family: Raleway;
    font-size: 14px;
    font-weight: 400;
    color: rgba(80, 89, 108, 0.9);
    line-height: 1.6;
    background: #f9fafb;
    box-sizing: border-box;
    outline: none;
    cursor: default;
    display: block;
    margin: 0 20px 15px 20px;
    width: calc(100% - 40px) !important;
}

.btnArataDetaliiPromo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 20px 15px 20px;
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid #7563F8;
    background: #fff;
    color: #7563F8;
    font-family: Raleway;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .btnArataDetaliiPromo:hover {
        background: #7563F8;
        color: #fff;
    }

.btnCloseDescrierePromo {
    opacity: 1;
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    background: white !important;
    border-radius: 50%;
    box-shadow: 0.75px 0.75px 3px rgba(0,0,0,0.25), -0.75px 0px 3px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    margin: 0;
}

.iconCloseDescrierePromo {
    color: #7563F8 !important;
    font-size: 30px;
    line-height: 1;
}

.btnCloseDescrierePromo:hover {
    background: white !important;
}

#modalDescrierePromotie .modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px 50px;
}

#modalDescrierePromotie .modal-title {
    width: 100%;
    text-align: center;
    font-family: Raleway;
    font-size: 18px;
    font-weight: 700;
    color: #50596C;
}

#modalDescrierePromotie .modal-body {
    padding: 0;
    height: calc(70vh - 65px);
    width: 100%;
}

    #modalDescrierePromotie .modal-body textarea {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        resize: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 15px !important;
        font-family: Raleway !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        color: rgba(80, 89, 108, 0.9) !important;
        line-height: 1.6 !important;
        background: #fff !important;
        box-sizing: border-box !important;
        outline: none !important;
        cursor: default !important;
        display: block !important;
        margin: 0 !important;
    }

#modalDescrierePromotie .modal-content {
    height: 70vh;
    border-radius: 10px;
}

#modalDescrierePromotie .modal-body {
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

#modalDescrierePromotie .modal-dialog {
    width: 90%;
    max-width: 800px;
}

.divPromoCategorieMain {
    text-align: center;
}

.customChkContainer {
    flex-direction: row-reverse;
    justify-content: start;
}

.customCheckmark {
    margin-left: 12px;
    margin-right: 3px;
    cursor: pointer;
}

.lblTextCheckbox {
    font-weight: 500;
    cursor: pointer;
}

.promoBodyContainer {
    display: flex;
    padding: 0 10.125px;
    flex-direction: row;
    align-items: flex-start;
    gap: 27px;
    align-self: stretch;
}

.promoBody {
    display: flex;
    align-items: center;
    gap: 13.5px;
    align-self: stretch;
}

.divPromoBodyImage {
    display: flex;
    height: 330.004px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 18.225px;
    flex: 1 0 0;
    aspect-ratio: 108/127;
    border-radius: 6.75px;
}

.divPromoBodyRightContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
}

.divPromoBodyRightContent2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13.5px;
    flex: 1 0 0;
    align-self: stretch;
}

.divPromoBodyRightContentHeader {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    flex-direction: column;
    flex: 1 0 0;
}

.divPromoBodyRightContentHeaderCuiSeAdreseaza {
    display: flex;
    padding: 3.375px 0;
    justify-content: center;
    align-items: center;
    gap: 13.5px;
    align-self: stretch;
    color: #50596C;
    font-family: Raleway;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.divPromoBodyRightContentHeaderPreturi {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 13.5px;
    align-self: stretch;
    padding: 6.75px 13.5px;
    justify-content: center;
}

.divPromoBodyRightContentHeaderPretVechi {
    color: rgba(80, 89, 108, 0.70);
    font-family: Raleway;
    font-size: 14.85px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration-line: line-through;
    opacity: 0.8;
    text-transform: uppercase;
}

.divPromoBodyRightContentHeaderPretNou {
    color: #3F20FB;
    font-family: Raleway;
    font-size: 31.05px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    opacity: 0.8;
    text-transform: uppercase;
}

.divContainerPromotieExpira {
    width: 100%;
}

.divPromoBodyRightContentHeaderStatusPromotieContainer {
    display: flex;
    padding: 10.125px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 6.75px;
    background: rgba(175, 167, 238, 0.30);
    gap: 6.75px;
}

.divPromoBodyRightContentHeaderStatusPromotieContainerDisabled {
    background: rgba(207, 207, 207, 0.30) !important;
}

.divPromoBodyRightContentHeaderStatusPromotieTitlu {
    display: flex;
    min-height: 17.685px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.375px;
    align-self: stretch;
    border-radius: 3.375px;
    color: #3F20FB;
    text-align: center;
    font-family: Raleway;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    padding: 4px 8px;
}

.divPromoBodyRightContentHeaderStatusPromotieDataFinala {
    display: flex;
    height: 54px;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: #FAFAFA;
    flex-direction: column;
    color: var(--Oferta-TIPS, #EF3C3C);
    text-align: center;
    font-family: Montserrat;
    font-size: 20.8px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.divPromoBodyRightContentHeaderStatusPromotieDataIncheiata {
    display: flex;
    width: 85%;
    height: 54px;
    padding: 3.375px 13.5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5px;
    flex: 1 0 0;
    border-radius: 3.375px;
    background: #FAFAFA;
    color: rgba(80, 89, 108, 0.80);
    font-family: Raleway;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.divPromoBodyRightContentHeaderStatusPromotieDataExpiraIn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10.125px;
    align-self: stretch;
}

.divPromoBodyRightContentHeaderStatusPromotieDataExpiraInUnitati {
    display: inline-table;
    justify-content: center;
    align-items: center;
    gap: 10.125px;
    align-self: stretch;
    width: 54px;
    height: 54px;
    padding: 8.375px 3.375px;
    aspect-ratio: 1/1;
    border-radius: 3.375px;
    background: #FAFAFA;
}

.divPromoBodyRightContentHeaderStatusPromotieDataExpiraInUnitatiNumber {
    color: #3F20FB;
    text-align: center;
    font-family: Montserrat;
    font-size: 17.55px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.divPromoBodyRightContentHeaderStatusPromotieDataExpiraInUnitatiText {
    color: #3F20FB;
    text-align: center;
    font-family: Raleway;
    font-size: 10.8px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.divPromoBodyRightContentHeaderStatusPromotieCategorie {
    display: flex;
    padding: 3.375px 0;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    text-align: center;
    gap: 13.5px;
    color: #50596C;
    font-family: Raleway;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.divPromoBodyRightContentHeaderStatusPromotieDescriere {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 13.5px;
    align-self: stretch;
    padding-bottom: 10.125px;
    padding-top: 10.125px;
    flex: 1 0 0;
    color: rgba(80, 89, 108, 0.70);
    font-family: Raleway;
    font-size: 9.45px;
    font-style: normal;
    font-weight: 400;
    line-height: 13.5px;
}

.btnAplicaPromo {
    background: #7563F8;
    border: none;
    color: #FFF;
    width: fit-content;
    padding: 10px 40px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
    font-family: Raleway;
    text-transform: uppercase;
    align-self: center;
    margin-bottom: 20px;
    cursor: pointer;
    transition: box-shadow 0.2s ease, background-color 0.2s ease, transform 0.1s ease;
}

/* Butoanele de actiune (Detalii + Aplica) pe acelasi rand, centrate */
.divPromoActiuni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 10px 20px 20px 20px;
}

    /* in interiorul randului de actiuni, butoanele nu mai au margini proprii */
    .divPromoActiuni .btnArataDetaliiPromo,
    .divPromoActiuni .btnAplicaPromo {
        margin: 0;
        align-self: center;
    }

.btnAplicaPromo:hover {
    background: #6452e0;
    box-shadow: 3px 3px 10px 0 rgba(7, 13, 71, 0.25);
    color: #FFF;
}

.btnAplicaPromo:active {
    transform: scale(0.98);
    box-shadow: none;
    background: #5544cc;
}

/* Grid de 2 promotii pe rand pe paginile de CLINICA: adminul de promotii
   (Clinica-Admin-Promotii, #divListaPromo direct in .divBody) SI pagina publica
   de prezentare (Landing-Page-Clinica, #panelPromotii #divListaPromo).
   Pe pagina de PACIENT (Pacient-Admin-Promotii) containerul e infasurat in
   .promotiePacientContainer -> acolo anulam grid-ul (regula de mai jos), ca
   promotiile sa ramana full-width. */
#divListaPromo {
    display: grid;
    /* 2 promotii pe rand cand e loc, apropiate una de alta si grupate la centru;
       sub 991px trec la 1 pe rand (media query mai jos). */
    grid-template-columns: repeat(2, minmax(0, 620px));
    justify-content: center;
    gap: 20px;
    padding: 1px;
    overflow: visible;
}

/* Exceptie pacient: fara grid, promotiile ocupa toata latimea. */
.promotiePacientContainer #divListaPromo {
    display: block;
    grid-template-columns: none;
}

/*=================== comune pt. max-width:991px ===================*/
@media screen and (max-width:991px) {
    .divBoxPromo {
        justify-items: center;
    }

    .divTitluPage {
        padding-left: 15px;
    }

    .divBlockPromo, .divBlockPromo:hover, .divBlockPromo:link, .divBlockPromo:visited {
        width: 100%;
        /*max-width: 360px;*/
    }

    .groupInfoPrincipale {
        flex-direction: column;
        gap: 20px;
        padding: 15px 15px 0 15px;
    }

    .badgeOfertaLimitata,
    .badgeOfertaDezactivata {
        top: -15px;
        right: 50px;
    }

    .divPromoBodyImage {
        width: 100%;
        height: 200px;
    }

    .divPicPromo {
        display: block;
        width: 100%;
        height: 250px;
        object-fit: cover;
        margin: 0 auto;
        flex: unset;
        aspect-ratio: unset;
    }

    .divContainerHeader {
        position: absolute;
        top: 215px;
        right: 5px;
    }

    .divContainerFooter {
        position: absolute;
        top: 215px;
        right: 5px;
    }

    .divMeniuOptiuni {
        top: 35px;
    }

    .iconMore {
        top: 10px;
        right: 10px;
        background: #E3E3E3;
        color: #A8A8A8;
        border-radius: 5px;
    }

    #divListaPromo {
        grid-template-columns: 1fr;
        justify-content: center;
        width: 100%;
        margin: 0;
        padding: 8px;
        padding-top: 15px;
    }

    /* pacientul ramane fara grid si pe mobil */
    .promotiePacientContainer #divListaPromo {
        display: block;
        grid-template-columns: none;
    }
}
/*=================== comune pt. max-width:991px ===================*/

.divContainerPromotii > .divBoxPromo {
    display: none !important;
}