/* The buttons on the back of each card. */
.card-button, .card-button:hover, .card-button:hover:focus{
    font-family: Arial, Helvetica, sans-serif;
    height:5.5rem;
    width:5.5rem;
    border-color: var(--border-color-d);
    color:var(--button-text-color);

}
/* Card button background color */
.card-button{
    background-color: var(--plot-button-color);
    box-shadow: 4px 4px 5px black !important;
    border-radius: 50px;
    position:absolute;
    bottom:20%;
    left:37.5%;
    transition: background-color 0.5s ease,  box-shadow 0.5s ease;
}
.card-button:active{
    background-color: var(--plot-button-color-hover) !important;
    color:black !important;
}
/* The hover effect for the buttons */
.card-button:hover, .card-button:hover:focus{
    background-color: var(--plot-button-color-hover);
    box-shadow: 0px 0px 20px black !important;
    

}

.neon-pulse:has(.green-change-arrow){
    border: 2px solid black;
}
.neon-pulse:has(.green-change-arrow):hover::before,
.neon-:hover::after {
  border: 2px solid mediumseagreen;
 
}

.neon-pulse:has(.red-change-arrow){
    border: 2px solid black;
}
.neon-pulse:has(.red-change-arrow):hover::before,
.neon-:hover::after {
  border: 2px solid crimson;
 
}
.neon-pulse {
  /* background: #000; */
  border: 2px solid var(--plot-button-color-hover);
  box-shadow: 0 0 10px black;
  overflow: visible;
}

.neon-pulse:hover::before,
.neon-:hover::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--plot-button-color-hover);
  border-radius: inherit;
  animation: pulseOut 2s ease-out infinite;
  opacity: 0;
}

.neon-pulse:hover::after {
  animation-delay: 1s;
}

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

.card-button:disabled{
    background-color: var(--region-color-l);
    color:black;
    box-shadow: 0px 0px 10px black;
}

.back.active{
    background-color: red;
}
.change-text{
    margin-top:1rem;
    font-size:x-large;
    color:black;
}


.change-icon path{
    stroke:black;
}


.green-change-arrow{
    color:mediumseagreen;
}
.red-change-arrow{
    color:crimson;
}

.metric-text{
    font-size:xxx-large;
}

/* Card Image*/
.card-img{
    height:11rem;
    object-fit:cover;
}


.disabled .change-button,
.disabled .card-button{
    pointer-events: none !important;
    background-color: red !important;
}


.change-button{
    position:absolute;
    background-color: white;
    width:4rem !important;
    height:4rem;
    border-radius: 35px;
    bottom:15px;
    left:15px;
    display:flex;
    align-items: center;
    justify-content: center;
    color:black;
    box-shadow: 4px 4px 5px black;
    transition:all 0.50s ease;
    outline-offset:4px;
}

.change-button:active, .change-button:hover, .change-button:hover:focus{
    background-color: white !important;
    box-shadow:0px 0px 20px black !important;
}

.change-button:disabled{
    background-color: #e6e6e6;
}


.change-toast-message{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:100%;
    height:auto;
    z-index: 2;
}
/* .change-tooltip .tooltip-inner{
    position:absolute;
    top:80%;
    left:50%;
    
} */

.toast-header{
    font-size:large;
}
.card-back-body{
    width:100%;
}
/* General flip card dimensions */
.flip-card {
    position: relative;
    height:300px;
    width:350px;
}
@media(max-width:320px){
    .flip-card {
        height:300px;
        width:300px;
    }
}
/* Base styles for front and back */
.flip-card .front,
.flip-card .back {
    backface-visibility: hidden;
    transition: none;
}
/* NORMAL MODE: hover & unhover transitions (transform + opacity) */
.flip-card:hover .front,
.flip-card:hover .back,
.flip-card:not(:hover) .front,
.flip-card:not(:hover) .back {
    transition: transform 2s cubic-bezier(.175, .885, .32, 1.275),
                opacity 0.7s ease;
}
/* NORMAL MODE: default orientation */
.flip-card .front {
    transform: rotateY(0deg);
}
.flip-card .back {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: rotateY(-180deg);
}
/* NORMAL MODE: hover flip effect */
.flip-card:hover .front {
    transform: rotateY(180deg);
    opacity: 0;
}
.flip-card:hover .back {
    opacity: 1;
    transform: rotateY(0deg);
}
/* ACCESS-MODE BASE: disable rotation, hide back by default */
.access-mode .flip-card .front,
.access-mode .flip-card .back {
    backface-visibility: hidden;
    transition:  opacity 1.0s;
}
/* ACCESS-MODE layout */
.access-mode .flip-card .front {
    opacity: 1;
    transform: rotateY(0deg);
}
.access-mode .flip-card .back {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.access-mode .flip-card:hover .front {
    opacity: 1;
    z-index: 0;
}
.access-mode .flip-card:hover .back {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
/* Disable interactions if needed */
.no-hover {
    pointer-events: none;
}