@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@media (max-width: 768px) {
    .hidden-on-mobile {
        display: none;
    }
}

#popover-tour { z-index: 20 }

#progress-bar-inner {
    position: relative;
    height: 100%;
    left: -7px;
    box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.9),  /* Highlight on top */
            inset 0 -1px 2px rgba(0, 0, 0, 0.4); /* Shadow at the bottom */
}

/* Additional pseudo-element for bevel effect */
#progress-bar-inner::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 2;
}

@keyframes progress-animation {
    from {
        width: var(--initial-progress-width);
    }
    to {
        width: var(--progress-width);
    }
}

#progress-bar-inner {
    animation: progress-animation 0.4s cubic-bezier(0.68, -0.15, 0.265, 1.15) forwards;
}


.card-container {
    perspective: 1000px;
    width: max-content;
    margin-top: 10px;
}

.card {
    width: 350px;
    height: 200px;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.6s linear;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 24px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#questionCard {
    z-index: 2;
    transform: rotateY(0deg);
    min-height: 485px;
}

#answerCard {
    transform: rotateY(-180deg);
    background-color: #f9f9f9;
    min-height: 450px;
}

.flip-control {
    display: none;
}

.flip-control:checked + .flip-btn + #questionCard {
    transform: rotateY(180deg);
}

.flip-control:checked + .flip-btn + #questionCard + #answerCard {
    transform: rotateY(0deg);
}

.flip-btn {
    display: block;
    cursor: pointer;
    padding: 10px 20px;
    margin: 20px auto 0;
    border: none;
    color: white;
    background-color: #007bff;
    text-align: center;
    border-radius: 0.5rem;
    transition: background-color 0.3s;
    text-decoration: none;
}

.flip-btn:hover {
    background-color: #0056b3;
}

.card-content h5 {
    margin: 0 0 12px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.card-content p {
    margin: 0;
    font-size: 1rem;
    color: #666;
}

.card-container {
    cursor: e-resize;
}

.card-container a, .card-container button {
    cursor: unset;
}

/* player*/
.playing {
    border: 2px solid #000;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
}

.play-button-image:hover, .pause-button-image:hover {
    border: 2px solid #000;
    border-radius: 50%;
    background-color: #000;
    color: #fff;

    /* Add this rule to change the SVG stroke color to white */
    svg.play-button-image {
        stroke: #fff;
    }
}

.playing svg.play-button-image {
    display: none;
}

.playing svg.pause-button-image {
    display: block;
}

/* These rules are for when the audio is not playing */
:not(.playing) .play-button-image {
    display: block;
}

:not(.playing) .pause-button-image {
    display: none;
}