@charset "utf-8";

/* ----------------------------------
   Core Tooltip Positioning
   ---------------------------------- */
.inputContainer {
    position: relative;
    float: left;
}

.formError {
    position: absolute;
    top: 300px;
    left: 300px;
    display: block;
    z-index: 100000;
    cursor: pointer;
    /* Hardware acceleration for the pop-in animation */
    animation: errorPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes errorPop {
    0% { opacity: 0; transform: translateY(-5px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.ajaxSubmit {
    padding: 20px;
    background: #4caf50;
    border: 1px solid #388e3c;
    display: none;
    border-radius: 4px;
}

/* ----------------------------------
   The Tooltip Box (Dark Fantasy Theme)
   ---------------------------------- */
.formError .formErrorContent {
    width: 100%;
    min-width: 150px;
    position: relative;
    z-index: 5001;
    background: #11131a; /* Deep dark surface */
    color: #e8e9f0;
    font-family: 'Exo 2', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
	padding: 10px 14px; 
    line-height: 1.5;
    border-radius: 4px;
    
    /* Default Red Error Styling */
    border: 1px solid #d32f2f;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3), 0 0 10px rgba(0,0,0,0.8);
}

/* Success State */
.greenPopup .formErrorContent {
    border-color: #4caf50;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2), 0 0 10px rgba(0,0,0,0.8);
}

/* Info State */
.blackPopup .formErrorContent {
    background: #07080b;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* ----------------------------------
   Modern CSS Arrows 
   (Replacing the 1990s div stacking)
   ---------------------------------- */
.formError .formErrorArrow {
    width: 15px;
    margin: -1px 0 0 13px;
    position: relative;
    z-index: 5006;
}

.formError .formErrorArrowBottom {
    margin: 0px 0 0 12px;
    top: 1px;
}

/* Hide the old messy div stacks entirely */
.formError .formErrorArrow div {
    display: none !important; 
}

/* Draw a clean CSS triangle pointing UP (Default) */
.formError .formErrorArrow::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #d32f2f; /* Matches red border */
}

/* Draw a clean CSS triangle pointing DOWN (.formErrorArrowBottom) */
.formError .formErrorArrowBottom::after {
    top: auto;
    bottom: -6px;
    border-bottom: none;
    border-top: 6px solid #d32f2f;
}

/* Color Overrides for Arrows based on Popup Type */
.greenPopup .formErrorArrow::after { border-bottom-color: #4caf50; }
.greenPopup .formErrorArrowBottom::after { border-top-color: #4caf50; border-bottom-color: transparent; }

.blackPopup .formErrorArrow::after { border-bottom-color: rgba(255, 255, 255, 0.2); }
.blackPopup .formErrorArrowBottom::after { border-top-color: rgba(255, 255, 255, 0.2); border-bottom-color: transparent; }