.adminProducts{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 50px;
    column-gap: 50px;
    padding-bottom: 50px;
}
.overImgDashBack{
    margin-top: 30px;
    width: min(400px, 58vw);
    max-width: 100%;
    height: auto;
}
.adminProductsBack{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 50px;
    column-gap: 25px;
    margin-top: 50px;
    padding-bottom: 30px;
}
.productButtons{
    display: flex;
    justify-content: center;
    column-gap: 10px;
}
.adminProduct{
    width: 300px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.adminProductBack{
    /* Width comes from the grid track on the home page, so the card stays fluid. */
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.adminProductImage{
     width: 300px;
     height: 210px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }
.adminProductImageBack{
    /* The home page card sets width and aspect-ratio, so no fixed box here. */
    width: 100%;
    height: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.adminProductBottom{
    padding: 15px;
    display: flex;
    justify-content: end;
    flex-direction: column;
    row-gap: 12px;

}
.adminProductBottomBack{
    padding: 15px;
    display: flex;
    justify-content: end;
    flex-direction: column;
    row-gap: 3px;
}
.productButtonsBack{
    margin-top: 16px;
    display: flex;
    justify-content: center;
    column-gap: 15px;
}
.adminProductName{
    font-size: 19px;
    font-weight: bold;
}
.adminProductNameBack{
    font-size: 17px;
    font-weight: bold;
    color: black;
}   
.adminProductNameBackAid{
    font-size: 15px;
    font-weight: bold;
    color: black;
}
.elearning{
    font-size: 14px;
}
.blackText{
    color: black;
}
.product-icons-back{
    font-size: 14px;
    color: black;
    display: flex;
    align-content: center;
    column-gap: 10px;
}
.product-icons-back img{
    width: 35px;

}
.buttonProductAdminAdd {
    background-color: #0c5425; /* Green background color */
    color: white; /* White text color */
    padding: 8px 28px; /* Padding around the text */
    border: none; /* No border */
    border-radius: 7px; /* Rounded corners */
    cursor: pointer;
    position: relative; /* Set the position to relative to have a reference point for animation */
    overflow: hidden; /* Hide content that overflows the button */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition effect */
    align-content: center;
}

.buttonProductAdminAdd:hover {
    background-color: #0a401f; /* Darker green background color on hover */
    transform: scale(1.1); /* Scale the button by 10% on hover */
}

.buttonProductAdminAdd::before {
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background color */
    width: 100%;
    height: 100%;
    top: 0; /* Initially position the button above the button */
    left: -100%; /* Initially position the button outside the button */
    transition: all 0.4s ease-out; /* Animate all properties */
}

.buttonProductAdminAdd:hover::before {
    left: 100%; /* Move the button over the button to create the vibration effect */
}

.buttonProductAdminAdd::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
    z-index: -1;
    transform: scale(0);
}

.buttonProductAdminAdd:hover::after {
    transform: scale(3);
    opacity: 0;
}

.buttonProductAdminAdd.clicked::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, #ffea00, transparent); /* Radial gradient from yellow to transparent */
    border-radius: 50%; /* Button will have circular shape */
    animation: fireworks 1s; /* Animation for fireworks effect */
}

@keyframes fireworks {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}


.buttonProductAdminAddBack {
    background-color: #0c5425; /* Green background color */
    color: white; /* White text color */
    padding: 8px 28px; /* Padding around the text */
    border: none; /* No border */
    border-radius: 7px; /* Rounded corners */
    cursor: pointer;
    position: relative; /* Set the position to relative to have a reference point for animation */
    overflow: hidden; /* Hide content that overflows the button */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition effect */
    align-content: center;
}

.buttonProductAdminAddBack:hover {
    background-color: #0a401f; /* Darker green background color on hover */
    transform: scale(1.1); /* Scale the button by 10% on hover */
}

.buttonProductAdminAddBack::before {
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2); /* Culore de fundal semi-transparent */
    width: 100%;
    height: 100%;
    top: 0; /* Initial pozitionam butonul deasupra butonului */
    left: -100%; /* Initial pozitionam butonul in afara butonului */
    transition: all 0.4s ease-out; /* Animam toate proprietatile */
}

.buttonProductAdminAddBack:hover::before {
    left: 100%; /* Mutam butonul peste buton pentru a crea efectul de vibratie */
}

.buttonProductAdminAddBack {
    background-color: #0c5425; /* Green background color */
    color: white; /* White text color */
    padding: 8px 28px; /* Padding around the text */
    border: none; /* No border */
    border-radius: 7px; /* Rounded corners */
    cursor: pointer;
    position: relative; /* Set the position to relative to have a reference point for animation */
    overflow: hidden; /* Hide content that overflows the button */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition effect */
    align-content: center;
}

.buttonProductAdminAddBack:hover {
    background-color: #0a401f; /* Darker green background color on hover */
    transform: scale(1.1); /* Scale the button by 10% on hover */
}

.buttonProductAdminAddBack::before {
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2); /* Culore de fundal semi-transparent */
    width: 100%;
    height: 100%;
    top: 0; /* Initial pozitionam butonul deasupra butonului */
    left: -100%; /* Initial pozitionam butonul in afara butonului */
    transition: all 0.4s ease-out; /* Animam toate proprietatile */
}

.buttonProductAdminAddBack:hover::before {
    left: 100%; /* Mutam butonul peste buton pentru a crea efectul de vibratie */
}

.buttonProductAdminAddBack::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
    z-index: -1;
    transform: scale(0);
}

.buttonProductAdminAddBack:hover::after {
    transform: scale(3);
    opacity: 0;
}

.buttonProductAdminAddBack.clicked::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, #ffea00, transparent); /* Gradiență radială de la galben la transparent */
    border-radius: 50%; /* Butonul va avea forma circulara */
    animation: fireworks 1s; /* Animatie pentru efectul de foc de artificii */
}

@keyframes fireworks {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }






    
}
.adminProductPrice{
    font-size: 28px; /* Set the font size */
    color: #333;
}


@media screen and (max-width: 1200px) and (min-width: 768px){
    .side{
        display: none;
    }
    .adminProductsBack{
        grid-template-columns: 1fr;
    }
    .adminProducts{
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .adminContent{
        width: 100%;
    }
    .adminWrap{
        width: 100%;
        padding-bottom: 100px;
    }
    .hamButtonAdmin{
        display: flex;
    }
    .errorPhoto a{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .errorPhoto a img{
        width: 80%;
    }
    #stripeLogo{
        display: none;
    }
    #hideText{
        display: none;
    }
}
@media screen and (max-width: 767px) and (min-width: 250px){
    .errorPhoto a{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .errorPhoto a img{
        width: 80%;
    }
    .adminProducts{
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .side{
        display: none;
    }
    .adminContent{
        width: 100%;
    }
    .adminWrap{
        width: 100%;
        padding-bottom: 100px;
    }
    .hamButtonAdmin{
        display: flex;
    }
    #stripeLogo{
        display: none;
    }
    #hideText{
        display: none;
    }
    .desktopShowNav{
        display: none;
    }
    .adminProductsBack{
        grid-template-columns: 1fr;
    }
    .mobileHideNav{
        display: flex;
    }
    #stripeLogo{
        display: none;
    }
}

/* Refined shimmer + micro-sparkles (site-wide) */
.buttonProductAdminAddBack{ position: relative; overflow: hidden; isolation: isolate; }
.buttonProductAdminAddBack::before{
    content:"";
    position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
    background: linear-gradient(115deg, rgba(255,255,255,0) 10%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 90%);
    transform: translateX(-140%) translateZ(0);
    opacity: 0; mix-blend-mode: screen;
}
.buttonProductAdminAddBack::after{
    content:"";
    position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:
        radial-gradient(4px 4px at 24% 32%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
        radial-gradient(3px 3px at 68% 38%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
        radial-gradient(2.5px 2.5px at 46% 72%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
    background-repeat: no-repeat;
    background-position: 24% 32%, 68% 38%, 46% 72%;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.4));
    opacity: 0; transform: translateZ(0);
}
@keyframes adminBtnShimmer{
    0%   { transform: translateX(-140%); opacity: 0; }
    25%  { opacity: .65; }
    70%  { opacity: .6; }
    100% { transform: translateX(140%); opacity: 0; }
}
@keyframes adminSparkleDrift{
    0%   { background-position: 24% 32%, 68% 38%, 46% 72%; opacity: 0; }
    10%  { opacity: .9; }
    60%  { background-position: 28% 28%, 72% 36%, 50% 68%; opacity: .85; }
    100% { background-position: 32% 26%, 76% 33%, 54% 66%; opacity: 0; }
}
.buttonProductAdminAddBack:hover::before,
.buttonProductAdminAddBack:focus-visible::before,
.buttonProductAdminAddBack:active::before{
    animation: adminBtnShimmer 2100ms ease-in-out 1 forwards;
}
/* Hover keeps only shimmer; click uses celebration class */
@media (prefers-reduced-motion: reduce){
    .buttonProductAdminAddBack::before,
    .buttonProductAdminAddBack::after{ animation: none !important; opacity: 0 !important; }
}

/* Softer hover scale for better touch/UX */
.buttonProductAdminAddBack:hover{ transform: scale(1.03); }

/* Click celebration: gentle halo + checkmark (no dots) */
.buttonProductAdminAddBack.is-celebrating{ transform: translateY(0) scale(1.015); }
.buttonProductAdminAddBack.is-celebrating::before{
    background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%);
    transform: translateZ(0) scale(.8);
    opacity: .9;
    animation: adminHaloPulse 1100ms ease-out forwards;
}
@keyframes adminHaloPulse{ to{ transform: scale(1.6); opacity: 0; } }

/* Checkmark overlay */
.buttonProductAdminAddBack .btnCheckmark{
    position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
    opacity:0; transform: translateY(4px) scale(.6);
}
.buttonProductAdminAddBack .btnCheckmark::before{
    content:""; position:absolute; width:26px; height:26px; border-radius:50%;
    background: rgba(255,255,255,.96);
    box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
.buttonProductAdminAddBack .btnCheckmark svg{ width:16px; height:16px; position:relative; z-index:1; }
.buttonProductAdminAddBack .btnCheckmark.playing{ animation: checkPop 1200ms ease-out forwards; }
@keyframes checkPop{
    0%   { opacity:0; transform: translateY(4px) scale(.6); }
    18%  { opacity:1; transform: translateY(0) scale(1.08); }
    60%  { opacity:1; transform: translateY(0) scale(1); }
    100% { opacity:0; transform: translateY(-4px) scale(1); }
}