/* -------------------------------------------------------------
   BASE WRAPPER
------------------------------------------------------------- */
.ez-horoscope-summaries {
    padding: 1rem;
    border-radius: 8px;
}

/* -------------------------------------------------------------
   AJAX LOADING PLACEHOLDER
------------------------------------------------------------- */
.ezhp-loading-placeholder {
    padding: 2rem;
    text-align: center;
}

.ezhp-loading-placeholder p {
    margin-top: 1rem;
    color: #666;
}

.ezhp-loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: ezhp-spin 1s linear infinite;
}

@keyframes ezhp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* RTL loading placeholder */
[dir="rtl"] .ezhp-loading-placeholder {
    text-align: center;
}

/* -------------------------------------------------------------
   HEADER STYLING
------------------------------------------------------------- */
.ezhp-summaries-header {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}

/* RTL support for header */
[dir="rtl"] .ezhp-summaries-header,
.ezhp-summaries-header:lang(ar),
.ezhp-summaries-header:lang(he),
.ezhp-summaries-header:lang(fa),
.ezhp-summaries-header:lang(ur) {
    text-align: right;
}

/* Ensure consistent spacing between summary items */
.ezhp-summary-item {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #ddd;
}

.ezhp-summary-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* -------------------------------------------------------------
   INLINE IMAGE MODE
   The container div floats (set via inline style from PHP).
   The img fills 100% of its floating container.
------------------------------------------------------------- */
.ez-daily-inline-image {
    /* Container receives float from inline style */
    position: relative;
}

.ez-daily-inline-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.ez-daily-inline-image .ez-hero-overlay {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    pointer-events: none;
}

/* Clear floats after content */
.ezhp-summary-item::after,
.ez-hero-text::after {
    content: "";
    display: block;
    clear: both;
}

/* -------------------------------------------------------------
   BACKGROUND HERO MODE
------------------------------------------------------------- */
.ez-horoscope-summaries .ez-hero {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    z-index: 0;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    border-radius: 8px;
}

/* Background overlay */
.ez-horoscope-summaries .ez-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.ez-horoscope-summaries .ez-hero-content {
    position: relative;
    z-index: 2;
    padding: 1rem;
}

/* -------------------------------------------------------------
   TEXT STYLING INSIDE SUMMARIES
------------------------------------------------------------- */
.ezhp-summary-item p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.ezhp-summary-item p#zodiacsign {
    font-size: 1.4rem;
    font-weight: bold;
}

.ezhp-summary-item p#dates {
    font-style: italic;
    margin-bottom: 1.2rem;
}

.ezhp-summary-item p#summary {
    font-size: 1rem;
}

/* -------------------------------------------------------------
   "MORE..." LINK STYLING
------------------------------------------------------------- */
.ezhp-more-link {
    margin-top: 1rem;
    margin-bottom: 0;
}

.ezhp-more-link a {
    display: inline-block;
    color: var(--wp--preset--color--primary, #0073aa);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, transform 0.2s ease;
}

.ezhp-more-link a:hover {
    color: var(--wp--preset--color--secondary, #005177);
    text-decoration: underline;
}

.ezhp-more-link a:focus {
    outline: 2px solid var(--wp--preset--color--primary, #0073aa);
    outline-offset: 2px;
}

/* RTL support for Arabic, Hebrew, Persian, Urdu */
[dir="rtl"] .ezhp-more-link,
.ezhp-more-link:lang(ar),
.ezhp-more-link:lang(he),
.ezhp-more-link:lang(fa),
.ezhp-more-link:lang(ur) {
    text-align: right;
}

/* -------------------------------------------------------------
   RTL (RIGHT-TO-LEFT) LANGUAGE SUPPORT
------------------------------------------------------------- */

/* Base RTL wrapper styling */
.ez-horoscope-summaries[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* RTL text alignment for all content */
[dir="rtl"] .ezhp-summary-item,
[dir="rtl"] .ez-hero-content,
[dir="rtl"] .ez-hero-text {
    text-align: right;
}

/* RTL paragraph alignment */
[dir="rtl"] .ezhp-summary-item p {
    text-align: right;
}

/* RTL hero background alignment adjustments */
[dir="rtl"] .ez-hero-bg-wrapper[data-pos="left"] {
    background-position: right !important;
}

[dir="rtl"] .ez-hero-bg-wrapper[data-pos="right"] {
    background-position: left !important;
}

/* RTL "More..." link */
[dir="rtl"] .ezhp-more-link {
    text-align: right;
}

[dir="rtl"] .ezhp-more-link a {
    direction: rtl;
}

/* RTL header */
[dir="rtl"] .ezhp-summaries-header {
    text-align: right;
}

/* RTL border adjustments if needed */
[dir="rtl"] .ezhp-summaries-header {
    border-bottom: 2px solid var(--wp--preset--color--primary, #0073aa);
}

/* -------------------------------------------------------------
   MOBILE RESPONSIVENESS
------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Header adjustment */
    .ezhp-summaries-header {
        font-size: 1.4rem;
    }

    /* On mobile, remove float from container and center images */
    .ez-daily-inline-image {
        float: none !important;
        max-width: 85% !important;
        margin: 0 auto 1rem auto !important;
    }

    .ez-daily-inline-image img {
        width: 100%;
    }

    /* Background hero height adjustment */
    .ez-horoscope-summaries .ez-hero {
        min-height: 220px !important;
    }

    /* RTL mobile - same as LTR, center images */
    [dir="rtl"] .ez-daily-inline-image {
        float: none !important;
        margin: 0 auto 1rem auto !important;
    }
}