/* ===========================================================
   MYTOAST — CSS isolado, sem conflito com Bootstrap
=========================================================== */

/* Containers por posição */
.myt-container {
  position: fixed;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}
.myt-container .myt-box { pointer-events: auto; }

.myt-container-top-right    { top: 20px;    right: 20px;  align-items: flex-end; }
.myt-container-top-left     { top: 20px;    left: 20px;   align-items: flex-start; }
.myt-container-bottom-right { bottom: 20px; right: 20px;  align-items: flex-end;   flex-direction: column-reverse; }
.myt-container-bottom-left  { bottom: 20px; left: 20px;   align-items: flex-start; flex-direction: column-reverse; }
.myt-container-top-center   { top: 20px;    left: 50%; transform: translateX(-50%); align-items: center; }
.myt-container-bottom-center{ bottom: 20px; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }

/* Centro absoluto da tela (vertical e horizontal) */
.myt-container-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
}

/* Toast flutuante — perto do clique ou âncora no elemento */
.myt-floating {
  position: fixed;
  z-index: 99999;
  pointer-events: auto;
}

/* ===========================================================
   CAIXA BASE
=========================================================== */
.myt-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  border-left: 5px solid #999;
  font-family: inherit;
  font-size: inherit;
  color: #333;
  width: max-content;
  max-width: 90vw;
  box-sizing: border-box;
}

/* Centraliza ícone e texto verticalmente (útil para mensagens curtas de 1 linha) */
.myt-valign-center { align-items: center; }

.myt-icon {
  font-size: 18px;
  line-height: 1.3;
  flex-shrink: 0;
}

.myt-content { flex: 1; min-width: 0; }

.myt-title {
  font-weight: bold;
  margin-bottom: 2px;
}

.myt-message {
  word-break: break-word;
  white-space: pre-line;
}

/* Botão X */
.myt-close {
  cursor: pointer;
  font-size: 16px;
  color: #999;
  background: none;
  border: none;
  line-height: 1;
  padding: 0;
  margin-left: 8px;
  flex-shrink: 0;
}
.myt-close:hover { color: #333; }

/* Botão OK */
.myt-ok-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 16px;
  border-radius: 5px;
  border: none;
  background: #e9ecef;
  color: #333;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s ease;
}
.myt-ok-btn:hover { background: #ced4da; }

/* Tipos — aplicam tanto no toast quanto no confirm dialog */
.myt-success { border-left-color: #28a745; }
.myt-success .myt-icon, .myt-success .myt-dialog-icon { color: #28a745; }

.myt-error   { border-left-color: #dc3545; }
.myt-error   .myt-icon, .myt-error .myt-dialog-icon { color: #dc3545; }

.myt-warning { border-left-color: #ffc107; }
.myt-warning .myt-icon, .myt-warning .myt-dialog-icon { color: #ffc107; }

.myt-info    { border-left-color: #17a2b8; }
.myt-info    .myt-icon, .myt-info .myt-dialog-icon { color: #17a2b8; }

/* ===========================================================
   EFEITOS
   Nomes: fade | slide-right | slide-left | slide-top | slide-bottom | zoom | bounce
=========================================================== */
.myt-fade-in          { animation: mytFadeIn         0.35s ease forwards; }
.myt-fade-out         { animation: mytFadeOut        0.35s ease forwards; }
@keyframes mytFadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes mytFadeOut { from { opacity:1; } to { opacity:0; } }

.myt-slide-right-in   { animation: mytSlideRightIn  0.35s ease forwards; }
.myt-slide-right-out  { animation: mytSlideRightOut 0.35s ease forwards; }
@keyframes mytSlideRightIn  { from { opacity:0; transform:translateX(100%);  } to { opacity:1; transform:translateX(0); } }
@keyframes mytSlideRightOut { from { opacity:1; transform:translateX(0);     } to { opacity:0; transform:translateX(100%); } }

.myt-slide-left-in    { animation: mytSlideLeftIn   0.35s ease forwards; }
.myt-slide-left-out   { animation: mytSlideLeftOut  0.35s ease forwards; }
@keyframes mytSlideLeftIn   { from { opacity:0; transform:translateX(-100%); } to { opacity:1; transform:translateX(0); } }
@keyframes mytSlideLeftOut  { from { opacity:1; transform:translateX(0);     } to { opacity:0; transform:translateX(-100%); } }

.myt-slide-top-in     { animation: mytSlideTopIn    0.35s ease forwards; }
.myt-slide-top-out    { animation: mytSlideTopOut   0.35s ease forwards; }
@keyframes mytSlideTopIn    { from { opacity:0; transform:translateY(-100%); } to { opacity:1; transform:translateY(0); } }
@keyframes mytSlideTopOut   { from { opacity:1; transform:translateY(0);     } to { opacity:0; transform:translateY(-100%); } }

.myt-slide-bottom-in  { animation: mytSlideBottomIn  0.35s ease forwards; }
.myt-slide-bottom-out { animation: mytSlideBottomOut 0.35s ease forwards; }
@keyframes mytSlideBottomIn  { from { opacity:0; transform:translateY(100%); } to { opacity:1; transform:translateY(0); } }
@keyframes mytSlideBottomOut { from { opacity:1; transform:translateY(0);    } to { opacity:0; transform:translateY(100%); } }

.myt-zoom-in          { animation: mytZoomIn  0.3s ease forwards; }
.myt-zoom-out         { animation: mytZoomOut 0.3s ease forwards; }
@keyframes mytZoomIn  { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
@keyframes mytZoomOut { from { opacity:1; transform:scale(1);   } to { opacity:0; transform:scale(0.7); } }

.myt-bounce-in        { animation: mytBounceIn  0.45s cubic-bezier(.36,1.5,.5,1) forwards; }
.myt-bounce-out       { animation: mytBounceOut 0.3s ease forwards; }
@keyframes mytBounceIn  { 0%{opacity:0;transform:scale(0.3);} 60%{opacity:1;transform:scale(1.08);} 100%{opacity:1;transform:scale(1);} }
@keyframes mytBounceOut { from{opacity:1;transform:scale(1);} to{opacity:0;transform:scale(0.3);} }

/* ===========================================================
   CONFIRM DIALOG
=========================================================== */
.myt-overlay {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}

/* Sem fundo escuro — usado quando showConfirm tem "anchor" (ao lado do botão) */
.myt-overlay-clear {
  background: transparent;
}

.myt-dialog {
  background: #fff;
  border-radius: 10px;
  padding: 22px 24px;
  border-left: 5px solid transparent; /* fica visível só quando type/color é passado */
  width: max-content;
  min-width: 200px; /* espaço mínimo pros botões Sim/Não não ficarem espremidos */
  max-width: 92vw;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  font-family: inherit;
  font-size: inherit;
  text-align: center;
  box-sizing: border-box;
}

.myt-dialog-icon  { font-size: 32px; margin-bottom: 10px; }

.myt-dialog-title {
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
}

.myt-dialog-message {
  font-size: 1em;
  color: #555;
  margin-bottom: 18px;
  white-space: pre-line;
}

.myt-dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.myt-btn {
  padding: 9px 18px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  font-weight: bold;
  transition: opacity 0.15s ease;
}
.myt-btn:hover    { opacity: 0.85; }
.myt-btn-yes      { background: #28a745; color: #fff; }
.myt-btn-no       { background: #dc3545; color: #fff; }

.myt-ok-btn, .myt-close, .myt-btn-yes, .myt-btn-no {
	transition: transform 1s ease;
}

.myt-ok-btn:hover, .myt-close:hover, .myt-btn-yes:hover, .myt-btn-no:hover {
	transform: scale(1.08);
}

.copy-text {
  --myt-anchor-position: "right";
  --myt-anchor-margin: 10;
  --myt-duration: 3000;
 /* --myt-text-color: "#fff";
  --myt-bg-color: "rgba(51, 51, 51, 0.9)";*/
  --myt-show-close: false;
  --myt-border-left: true;
  --myt-effect: "fade";
  --myt-effect-speed: 1000;
  --myt-font-size: "14px";
  --myt-padding: "8px 15px";
  --myt-border-radius: "5px";
  --myt-box-shadow: "0 2px 8px rgba(0,0,0,.2)";
  --myt-white-space: "nowrap";
  --myt-vertical-center: true;
}

.copy-text-success {
  --myt-type: success;
  --myt-icon: "fa-solid fa-check";
  --myt-icon-color: #0071b6;	
  --myt-color: #0071b6;
}

.copy-text-error {
  --myt-type: error;
  --myt-icon: "fa-solid fa-exclamation";
  --myt-icon-color: #d07400;	
  --myt-color: #d07400;
}

.msg-warning {
  --myt-html: true;
  --myt-type: warning;
  --myt-title: "Atenção";
  --myt-color: "#f38f00";
  --myt-anchor-position: "bottom";
  --myt-anchor-margin: 10;
  --myt-duration: 6000;
  --myt-lineheight: "1.8";
  --myt-icon: "fa-solid fa-triangle-exclamation";
  --myt-icon-color: "#c64829";
  --myt-icon-size: "24px";
  --myt-effect-speed: 1000;
  --myt-font-size: "15px";
  --myt-show-close: true;
  --myt-close-size: "24px";
  --myt-close-color: "#000";
  --myt-box-shadow: "0 2px 8px rgba(0,0,0,.2)";
  --myt-ok-color: "#f38f00";
  --myt-ok-text-color: "#fff";	  
}

.msg-confirm {
  --myt-html: true;	
  --myt-type: error;
  --myt-border-left: true;
  --myt-color: #c64829;	
  --myt-icon-color: #c64829;
  --myt-yes-color: #f38f00;
  --myt-yes-text-color: "#fff";
  --myt-no-color: #00529c;
  --myt-no-text-color: "#fff";
  --myt-effect-speed: 800;
  --myt-box-shadow: "0 2px 8px rgba(0,0,0,.2);
}