/* Main Tooltip Container */
.link-preview-tooltip {
    position: absolute;
    z-index: 9999;
    display: none; /* Initially hidden, shown by JS */
    box-sizing: border-box; /* Ensures padding and border don't add to width/height */

    /* Customizable via JS through CSS Variables */
    padding: var(--linkilo-preview-padding, 10px);
    background-color: var(--linkilo-preview-bg-color, #ffffff);
    border-width: var(--linkilo-preview-border-width, 1px);
    border-style: var(--linkilo-preview-border-style, solid);
    border-color: var(--linkilo-preview-border-color, #cccccc);
    border-radius: var(--linkilo-preview-border-radius, 5px);
    max-width: var(--linkilo-preview-max-width, 300px);
    font-family: var(--linkilo-preview-font-family, inherit);
    /* Box shadow is applied dynamically by JS based on showShadow setting */
}

/* Image Styling */
.link-preview-tooltip img.preview-image, /* Added class for clarity */
.link-preview-tooltip .image-placeholder {
    width: 100%;
    max-height: var(--linkilo-preview-img-max-height, 150px);
    object-fit: cover;
    margin-bottom: 10px; /* Consistent spacing */
    border-radius: var(--linkilo-preview-img-border-radius, 4px);
    display: block; /* Default display */
}

.link-preview-tooltip .image-placeholder {
    background-color: var(--linkilo-preview-img-placeholder-bg, #e0e0e0);
    /* Ensure it takes up space even if empty */
    min-height: var(--linkilo-preview-img-min-height, 50px); /* Fallback min height */
    display: flex; /* For potential placeholder icon/text centering */
    align-items: center;
    justify-content: center;
    color: #aaa; /* Placeholder text/icon color */
}


/* Image position variations */
.link-preview-tooltip img.preview-image.img-left { /* Target specific image class */
    float: left;
    width: var(--linkilo-preview-img-side-width, 40%); /* Customizable width for side images */
    margin-right: 10px;
    margin-bottom: 5px; /* Adjust margin for floated images */
}

.link-preview-tooltip img.preview-image.img-right { /* Target specific image class */
    float: right;
    width: var(--linkilo-preview-img-side-width, 40%);
    margin-left: 10px;
    margin-bottom: 5px;
}
/* Clearfix for floated images if content follows directly */
.link-preview-tooltip .title,
.link-preview-tooltip .site-info,
.link-preview-tooltip .description {
    clear: both; /* If image is floated, text should not wrap if it's short */
}
.link-preview-tooltip img.preview-image.img-left + *,
.link-preview-tooltip img.preview-image.img-right + * {
    clear: none; /* Allow text to wrap next to side images */
}
.link-preview-tooltip > *:last-child {
    margin-bottom: 0; /* Remove margin from the very last element in the tooltip */
}


/* Title Styling */
.link-preview-tooltip .title {
    font-size: var(--linkilo-preview-title-font-size, 16px);
    font-weight: var(--linkilo-preview-title-weight, bold);
    color: var(--linkilo-preview-title-color, #000000);
    text-align: var(--linkilo-preview-title-align, left);
    text-transform: var(--linkilo-preview-title-transform, none);
    margin-bottom: 6px;
    display: block; /* Ensures it takes full width available */
    line-height: 1.3; /* Added for better title readability */
    word-wrap: break-word; /* Prevent overflow */
}

/* Site Info (Hostname & Favicon Wrapper) */
.link-preview-tooltip .site-info {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 5px; /* Space between favicon and hostname */
}

/* Favicon Styling */
.link-preview-tooltip .favicon {
    width: var(--linkilo-preview-favicon-size, 16px);
    height: var(--linkilo-preview-favicon-size, 16px);
    vertical-align: middle; /* Already good */
    display: inline-block; /* Already good */
    flex-shrink: 0; /* Prevent favicon from shrinking */
}

/* Hostname Styling */
.link-preview-tooltip .hostname {
    font-size: var(--linkilo-preview-hostname-font-size, 12px);
    font-weight: var(--linkilo-preview-hostname-weight, normal);
    color: var(--linkilo-preview-hostname-color, #666666);
    font-style: var(--linkilo-preview-hostname-style, normal);
    display: inline; /* Allow it to sit next to favicon nicely */
    line-height: 1; /* Align better with favicon */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description Styling */
.link-preview-tooltip .description {
    font-size: var(--linkilo-preview-desc-font-size, 14px);
    font-weight: var(--linkilo-preview-desc-weight, normal);
    color: var(--linkilo-preview-desc-color, #333333);
    line-height: var(--linkilo-preview-desc-line-height, 1.4);
    text-align: var(--linkilo-preview-desc-align, left);
    margin-bottom: 10px;
    display: block; /* Ensures it takes full width available */
    word-wrap: break-word; /* Prevent overflow */
}

/* CTA Button Styling */
.link-preview-tooltip .cta-button {
    display: inline-block; /* Consistent display */
    background-color: var(--linkilo-preview-cta-bg-color, #4CAF50);
    color: var(--linkilo-preview-cta-text-color, #ffffff);
    font-size: var(--linkilo-preview-cta-font-size, 14px);
    font-weight: var(--linkilo-preview-cta-font-weight, normal);
    padding: var(--linkilo-preview-cta-padding-tb, 5px) var(--linkilo-preview-cta-padding-lr, 10px);
    border-radius: var(--linkilo-preview-cta-border-radius, 3px);
    text-decoration: none;
    text-align: center;
    margin-top: 10px; /* Spacing from content above */
    cursor: pointer;
    border: none; /* Remove default anchor border */
    transition: opacity 0.2s ease; /* Smooth hover effect */
}
.link-preview-tooltip .cta-button:hover {
    opacity: 0.85;
}

/* Close Button Styling */
.link-preview-tooltip .close-button {
    position: absolute;
    top: var(--linkilo-preview-close-btn-top, 5px);      /* Customizable position */
    right: var(--linkilo-preview-close-btn-right, 8px);   /* Customizable position */
    font-size: var(--linkilo-preview-close-btn-size, 20px);/* Customizable size */
    line-height: 1;
    color: var(--linkilo-preview-close-btn-color, #888888); /* Customizable color */
    cursor: pointer;
    padding: 2px 5px; /* Make it easier to click */
    background-color: transparent;
    border: none;
}
.link-preview-tooltip .close-button:hover {
    color: var(--linkilo-preview-close-btn-hover-color, #000000); /* Customizable hover color */
}

/* Clickable Tooltip */
.link-preview-tooltip.clickable {
    cursor: pointer;
}

/* Animation Base (applied by JS) */
.link-preview-tooltip {
    /* animation-duration is set by JS */
    animation-fill-mode: forwards; /* Keep end state of animation */
}

/* Animation Keyframes (ensure these match JS class names) */
.fade-in { animation-name: linkiloFadeIn; }
.slide-in { animation-name: linkiloSlideIn; } /* From top by default */
.zoom-in { animation-name: linkiloZoomIn; }
.bounce-in { animation-name: linkiloBounceIn; }
.pulse-in { animation-name: linkiloPulseIn; }


@keyframes linkiloFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes linkiloSlideIn {
    from {
        opacity: 0;
        transform: translateY(-15px); /* Slide from a bit above */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes linkiloZoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes linkiloBounceIn { /* Renamed from 'bounce' to avoid conflicts */
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-12px); } /* Slightly more bounce */
    60% { transform: translateY(-6px); }
}

@keyframes linkiloPulseIn { /* Renamed from 'pulse' to avoid conflicts */
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.9; } /* Subtle pulse */
    100% { transform: scale(1); opacity: 1; }
}


/* Mobile Optimizations */
@media (max-width: 767px) {
    .link-preview-tooltip.mobile-friendly {
        /* JS will set --linkilo-preview-max-width to mobileMaxWidth if mobileFriendly is on */
        /* General font size reduction for mobile can be done here if needed, or rely on specific element overrides */
    }

    .link-preview-tooltip.mobile-friendly img.preview-image,
    .link-preview-tooltip.mobile-friendly .image-placeholder {
        max-height: var(--linkilo-preview-mobile-img-max-height, 120px) !important; /* Example if you add this variable */
    }

    .link-preview-tooltip.mobile-friendly .title {
        font-size: var(--linkilo-preview-title-font-size) !important; /* JS sets this to mobileTitleFontSize */
    }

    .link-preview-tooltip.mobile-friendly .description {
        font-size: var(--linkilo-preview-desc-font-size) !important; /* JS sets this to mobileDescFontSize */
    }
     .link-preview-tooltip.mobile-friendly .site-info {
        flex-wrap: wrap; /* Allow hostname to wrap below favicon if needed */
    }
    .link-preview-tooltip.mobile-friendly .hostname {
        font-size: calc(var(--linkilo-preview-hostname-font-size, 12px) * 0.9) !important; /* Slightly smaller */
    }
    .link-preview-tooltip.mobile-friendly .cta-button {
        font-size: calc(var(--linkilo-preview-cta-font-size, 14px) * 0.9) !important;
        padding: calc(var(--linkilo-preview-cta-padding-tb, 5px) * 0.8) calc(var(--linkilo-preview-cta-padding-lr, 10px) * 0.8) !important;
    }
}


/* --- Demo Styles (Kept separate as per original structure, review if they should merge/use vars too) --- */
/* These might be for a static demo in WP-Admin that doesn't use the live JS variables */
.preview-demo-container {
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 20px;
    margin: 20px 0;
    position: relative; /* For absolute positioning of demo tooltip */
}

.demo-preview-tooltip { /* This is for the settings page demo, not live previews */
    position: relative; /* Changed from absolute for settings page context */
    /* Or if it's meant to hover over a demo link in settings: */
    /* position: absolute; */
    /* top: 50px; left: 50px; */
    z-index: 1; /* Lower z-index for settings page demo */
    padding: 10px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: sans-serif; /* Example font */
    margin-top: 10px; /* If displayed statically */
}

.demo-preview-tooltip img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    margin-bottom: 8px;
    border-radius: 4px;
}

.demo-preview-tooltip .demo-title { /* Prefixed with demo- to avoid conflict */
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin-bottom: 6px;
}

.demo-preview-tooltip .demo-hostname {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

.demo-preview-tooltip .demo-description {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 8px;
}

.demo-preview-tooltip .demo-site-info {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.demo-preview-tooltip .demo-favicon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
}

.demo-preview-tooltip .demo-cta-button {
    background-color: #4CAF50;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 3px;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    margin-top: 8px;
}

/* Demo animation classes (if needed and distinct from live ones) */
.demo-fade-in { animation: linkiloFadeIn 0.3s; }
.demo-slide-in { animation: linkiloSlideIn 0.3s; }
.demo-zoom-in { animation: linkiloZoomIn 0.3s; }