/* wrapper centering */
#breath-trainer-wrapper {
  text-align: left;
  max-width: 650px;
  margin: 0 auto;

}

.breath-title {
  font-size: 28px;
  margin-bottom: 40px;
text-align:center;
}     

.keszulj {
 
  color: red!important;
  
}


/* SVG area */
#breathCanvasWrapper {
  position: relative;
  width: 100%;
  height: auto;

}

/* SVG styling */
#breathSVG {
transform: translateZ(0);
  width: 100%;
  display: block;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  background-attachment: fixed; /* <-- EZ MEGOLDJA */
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  padding-bottom: 20px;
}


/* overlay centered circular button (on top of SVG) */
#breathToggle {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem; /* növelt méret */
    width: 80px; /* vagy más méret, ami megfelel */
    height: 80px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    display: flex; /* középre igazítás */
    align-items: center;
    justify-content: center;
}

#breathControls {
  margin-top: 1.2rem;
}
#breathControls {
  margin-top: 1.2rem;
}
#breathControls {
  margin-top: 1.2rem;
}

/* states */
#breathToggle.bt-play { background: rgba(214,214,214,0.75); }
#breathToggle.bt-pause { background: rgba(214,214,214,0.75); }

/* small styling */
#breathSelector {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 17px;
  font-weight: 500;
  margin-top: 0;
  background-color: #fff;
}

/* ?? Android böngészők (Chrome, Samsung Internet) › egységesítés */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
  #breathSelector {
    -webkit-appearance: menulist;
  }
}

/* ?? iOS eset — meghagyjuk a gyári nyilat, mert szép */
@supports (-webkit-touch-callout: none) {
  #breathSelector {
    -webkit-appearance: menulist-button;
  }
}

/* ?? Mobil finomhangolás */
@media (max-width: 480px) {
  #breathSelector {
    font-size: 14px;
    padding: 6px 10px;
    line-height: 1.2;
  }

  #breathSelector option {
    font-size: 14px;
    padding: 4px 8px;
  }

  #breathSelector option:disabled {
    color: #4f46e5;
    font-weight: 600;
    opacity: 1;
  }
}







#breathDescription {font-size: 18px; font-style:normal; color:#444; margin-top:0px;min-height: 250px;
  height: auto; }

/* center label style */
svg text { font-family: system-ui, Arial, sans-serif; }

/* responsiveness */
@media (max-width:520px) {
  #breathSVG { height:220px; }
  #breathToggle { width:60px; height:60px; }
}

#mudraImage {
  width: 60px;
  transform: translateY(-50%);
  opacity: 1;
}


.mantra-box {
    min-height: 28px;        /* fix hely, nem ugrál a description */
    line-height: 1.4;
    margin-bottom: 0px;
    font-size: 16px;
    color: #444;
}

/* Finom szürke elválasztó – 60% szélesség */
.mantra-separator {
  width: 60%;
  height: 1px;
  background-color: #ccc;
  margin: 0 auto 10px auto;
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* Amikor a mantra látható, a vonal eltűnik */
.mantra-separator.hidden {
  opacity: 0;
}

/* Mantra helye: mindig helyet foglal, alapból rejtett */
#breathMantraWrapper {
    display: flex;
    justify-content: center;      /* vízszintesen középre */
}

#breathMantra {
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    height: 30px;
    line-height: 1.3;
    padding: 0 8px;
    white-space: nowrap; /* egy sorban tartja a szöveget */
    overflow: hidden; /* levágja a túl hosszú szöveget */
    text-overflow: ellipsis; /* három ponttal zárja le a túl hosszú szöveget */
    color: #753e00;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    border-radius: 4px;
max-width: 650px;
}

#breathMantra.visible {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
    
border-bottom:2px dashed #cdcdcd;
border-radius:0;
}