/* ==============================================
  Tosinso Professional Popup Component Styles
  ============================================== */

:root {
    --popup-bg-dark: #2c3e50;
    --popup-text-dark: #ecf0f1;
    --popup-bg-light: #ffffff;
    --popup-text-light: #212529;
}

.tosinso-popup {
    position: absolute;
    z-index: 1150; /* Above most elements, below modals */
    font-size: 14px;
    border-radius: var(--border-radius);
    line-height: 1.6;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none; /* Allows hover trigger to work correctly */
	padding: 10px;
}

.tosinso-popup.no-padding{
	padding: 0;
}

.tosinso-popup.is-interactive {
    pointer-events: auto;
}

.tosinso-popup.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* --- Arrow --- */
.tosinso-popup__arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: inherit; /* Inherits background from the popup */
}

/* --- Themes --- */
/* Dark Theme (Default) */
.tosinso-popup,
.tosinso-popup--theme-dark {
    background-color: var(--popup-bg-dark);
    color: var(--popup-text-dark);
}

/* Light Theme */
.tosinso-popup--theme-light {
    background-color: var(--popup-bg-light);
    color: var(--popup-text-light);
    box-shadow: var(--box-shadow);
}

/* Primary Theme */
.tosinso-popup--theme-primary {
    background-color: var(--primary-color);
    color: #fff;
}

/* Success Theme */
.tosinso-popup--theme-success {
    background-color: var(--success-color);
    color: #fff;
}

/* Error Theme */
.tosinso-popup--theme-error {
    background-color: var(--error-color);
    color: #fff;
}

/* --- Positioning --- */

/* Placement: Top */
.tosinso-popup[data-popper-placement^="top"] {
    transform-origin: bottom center;
}
.tosinso-popup[data-popper-placement^="top"] .tosinso-popup__arrow {
    bottom: -5px;
}

/* Placement: Bottom */
.tosinso-popup[data-popper-placement^="bottom"] {
    transform-origin: top center;
}
.tosinso-popup[data-popper-placement^="bottom"] .tosinso-popup__arrow {
    top: -5px;
}

/* Placement: Left */
.tosinso-popup[data-popper-placement^="left"] {
    transform-origin: right center;
}
.tosinso-popup[data-popper-placement^="left"] .tosinso-popup__arrow {
    right: -5px;
}

/* Placement: Right */
.tosinso-popup[data-popper-placement^="right"] {
    transform-origin: left center;
}
.tosinso-popup[data-popper-placement^="right"] .tosinso-popup__arrow {
    left: -5px;
}

/* --- Arrow Alignment --- */
.tosinso-popup[data-popper-placement="top"] .tosinso-popup__arrow,
.tosinso-popup[data-popper-placement="bottom"] .tosinso-popup__arrow {
    left: calc(50% - 5px);
}

.tosinso-popup[data-popper-placement="left"] .tosinso-popup__arrow,
.tosinso-popup[data-popper-placement="right"] .tosinso-popup__arrow {
    top: calc(50% - 5px);
}

.tosinso-popup[data-popper-placement="top-start"] .tosinso-popup__arrow,
.tosinso-popup[data-popper-placement="bottom-start"] .tosinso-popup__arrow {
    left: 15px;
}

.tosinso-popup[data-popper-placement="top-end"] .tosinso-popup__arrow,
.tosinso-popup[data-popper-placement="bottom-end"] .tosinso-popup__arrow {
    right: 15px;
}

.tosinso-popup[data-popper-placement="left-start"] .tosinso-popup__arrow,
.tosinso-popup[data-popper-placement="right-start"] .tosinso-popup__arrow {
    top: 15px;
}

.tosinso-popup[data-popper-placement="left-end"] .tosinso-popup__arrow,
.tosinso-popup[data-popper-placement="right-end"] .tosinso-popup__arrow {
    bottom: 15px;
}

/* --- Content Specific --- */
.tosinso-popup__content {
    /* Base content styles */
}

.tosinso-popup__content .spinner {
    /* Spinner for AJAX loading */
    margin: 10px auto;
    border-top-color: var(--primary-color);
}
.tosinso-popup--theme-dark .spinner,
.tosinso-popup--theme-primary .spinner,
.tosinso-popup--theme-success .spinner,
.tosinso-popup--theme-error .spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}