/* public/css/custom.css */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
    font-family: 'Open Sans', sans-serif, cursive !important;
    background-color:rgb(255, 255, 255) !important; /* Ensures the background is always white */
}

h1 {
    font-size: clamp(1.8rem, calc(1.8rem + 4vw), 28px) !important; /* Default */
}

@media (min-width: 1200px) {
    h1 {
        font-size: clamp(2rem, calc(2rem + 6vw), 45px) !important; /* For screens wider than 1200px */
    }
}
h2 {
    font-size: clamp(1rem, calc(1rem + 0.8vw), 27px) !important; /* Max size 27px subtitulos*/
    font-weight: bold !important; /* Make the text bold */
}

h3 {
    font-size: clamp(1rem, calc(1rem + 0.8vw), 27px) !important; /* Max size 27px*/
}

p {
    font-size: clamp(1rem, calc(1rem + 0.8vw), 27px) !important; /* Max size 27px parrafos */
}

.bg-yellow {
    background-color: #ffde59 !important;
  
}
.do_reply {
    cursor: pointer;
  }

  #newCommentTextArea {
    border: none;
    outline: none;
    box-shadow: none; /* Optional: removes any shadow that might be applied */
   
  }

  #floatingTextarea{
    border: none;
    outline: none;
    box-shadow: none; /* Optional: removes any shadow that might be applied */
    background-color: white;
    font-size: clamp(1rem, calc(1rem + 0.8vw), 27px) !important; /* Max size 27px*/
  }

  .icon-faq {
    width: 100%; /* Full width to make sure the content spans across the screen */
    display: flex;
    justify-content: flex-end; /* Aligns to the right horizontally */
    align-items: flex-end;     /* Aligns to the bottom vertically (optional) */
    color:  #21abb2 /*  #21ABB2;*/
}

.btns-2{
    color: #ffffff !important;
    border-width: 4px !important;
    border-color: whitesmoke;
    border-radius: 12px;
    background-color: #21abb2;
    box-shadow: 0px 12px 18px -6px rgb(0 0 0 / 30%);
    font-size: clamp(1rem, calc(1rem + 0.8vw), 27px) !important; /* Max size 27px subtitulos*/
    font-weight: bold !important; /* Make the text bold */
    padding: 0.3em 1em;
    line-height: 1.7em !important;
}
/* accordion */


.accordion-button-new {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: clamp(1rem, calc(1rem + 0.8vw), 27px) !important; /* Max size 27px subtitulos*/
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}


/* INICIO Formato del reproductor */
.audio-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
    padding: 10px; /* Optional: to give some spacing around each audio player */
    margin-bottom: 20px;  /* Space between multiple audio players */
}

.audio-player p {
    margin: 5px 0;
    font-weight: bold;
    text-align: center;
}

.audio-player .controls {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

/* Style for all buttons inside .audio-player.controls */
.audio-player .controls button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s;
}

/* Hover effect for all buttons inside .audio-player.controls */
.audio-player .controls button:hover {
    transform: scale(1.2);
}

/* Style for play-pause button (with background color and rounded shape) */
.audio-player button[id^="play-pause"] {
    background-color: #f5e5e5; /* Background color */
    border: none;
    border-radius: 50%; /* Rounded shape */
    width: 50px;
    height: 50px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  /* Shadow for 3D effect */
    transition: transform 0.2s;
}

/* Hover effect for play-pause button */
.audio-player button[id^="play-pause"]:hover {
    transform: scale(1.1);
}

.audio-player input[type="range"] {
    width: 90%;
    margin-top: 10px;
    background: #f5e5e5;
    height: 5px;
    border-radius: 10px;
    outline: none;
}

.audio-player input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #d8a5a5;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Ensure audio player doesn't overlap other elements */
.audio-player {
    margin-bottom: 20px; /* Adjust this as needed to provide spacing between audio players */
}

/* Optional: Parent container for multiple players */
.audio-player-container {
    display: flex;
    flex-wrap: wrap; /* Allows multiple players to wrap */
    gap: 20px;  /* Adds space between multiple players */
}

/* FIN Formato del reproductor */

/*style del like del audio*/
.progress-container {
    display: flex;
    align-items: center; /* Vertically align the emoji and range input */
    justify-content: space-between; /* Ensure space between the input and emoji */
    width: 40%; /* Ensure it takes full width of the container */
}
/*style del like video en show.blade.php*/
.favorite-emoji {
    font-size: 1.0rem; /* You can adjust the size of the emoji */
    cursor: pointer;
    margin-left: 10px; /* to add some space between the input and the emoji */
}

.align-h2-span {
    display: flex; /* Use Flexbox to align items in a row */
    align-items: center; /* Vertically center the text and emoji */
    gap: 10px; /*Add space between the h2 and the emoji */
}



/* estilo en compra */

.texto-form {
    font-size: 20px;
    color: #23abaf;
}

#cards-img {
    display: flex;
    justify-content: start
}

.min-img {
    height: 50%;
}

.transparent {
    opacity: 0.2;
}

.error-msg {
    color: red
}