/* ===========================================
   THEME-INHERITING BASE WRAPPER
=========================================== */
.numerology-block {
    background: inherit !important;
    color: inherit !important;
    font-family: inherit !important;
}

/* ===========================================
   FORM
=========================================== */
.numerology-block .ezhp-form {
    margin: 1.25rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    background: inherit !important;
    color: inherit !important;
}

/* Text & Date Inputs */
.numerology-block .ezhp-form input[type="text"],
.numerology-block .ezhp-form input[type="date"] {
    font: inherit !important;
    color: inherit !important;
    background: inherit !important;
    border: 1px solid currentColor !important;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}

/* ===========================================
   BUTTON — inherits theme button styling
=========================================== */
.numerology-block .ezhp-form button.ezhp-fetch-button,
.numerology-block .ezhp-form .wp-element-button {
    font: inherit !important;
    background: inherit !important;
    color: inherit !important;
    border: 1px solid currentColor !important;
    padding: var(--wp--custom--button--padding, 0.5rem 1rem);
    border-radius: 4px !important;
    cursor: pointer;
}

.numerology-block .ezhp-form button:hover,
.numerology-block .ezhp-form .wp-element-button:hover {
    opacity: 0.8;
}

/* ===========================================
   RESULT WRAPPER
=========================================== */
.numerology-block .numerology-result {
    margin-top: 1rem;
    background: inherit !important;
    color: inherit !important;
}

/* Typography */
.numerology-block h2,
.numerology-block p,
.numerology-block div {
    font-family: inherit !important;
    color: inherit !important;
    background: inherit !important;
    line-height: 1.65;
}

/* ===========================================
   HERO ELEMENTS
=========================================== */
.ez-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: inherit !important;
    color: inherit !important;
    padding: 0;
}

.ez-hero-content {
    position: relative;
    z-index: 10;
    padding: 0;
    color: inherit !important;
}

.ez-hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background: inherit !important;
}

/* Inline hero image only */
.ez-daily-inline-image img {
    display: block;
    height: auto;
    border-radius: 8px;
    max-width: 100%;
}

/* Clear floats */
.ez-hero-text::after {
    content: "";
    display: block;
    clear: both;
}

/* ===========================================
   INDEFINITE PROGRESS BAR (Numerology Loading)
=========================================== */

.ezhp-progress-container {
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,0.15);
    overflow: hidden;
    border-radius: 4px;
    margin: 1rem 0;
    position: relative;
}

.ezhp-progress-bar {
    position: absolute;
    height: 100%;
    width: 30%;
    background: var(--wp--preset--color--primary, #007cba);
    border-radius: 4px;
    animation: ezhp-progress-slide 1.2s linear infinite;
}

@keyframes ezhp-progress-slide {
    0%   { left: -30%; }
    100% { left: 100%; }
}

/* ===========================================
   FIX FOR PROGRESS BAR (OVERRIDE INHERIT)
=========================================== */

.numerology-block .ezhp-progress-container,
.numerology-block .ezhp-progress-bar {
    background: initial !important;
}

.numerology-block .ezhp-progress-container {
    background: rgba(0,0,0,0.15) !important;
}

.numerology-block .ezhp-progress-bar {
    background: var(--wp--preset--color--primary, #007cba) !important;
}

/* ===========================================
   RTL SUPPORT
=========================================== */

/* Base RTL wrapper */
.numerology-block[dir="rtl"],
.numerology-block.is-rtl {
    text-align: right;
    direction: rtl;
}

/* Form layout for RTL */
.numerology-block[dir="rtl"] .ezhp-form,
.numerology-block.is-rtl .ezhp-form {
    flex-direction: row-reverse;
}

/* Input text alignment for RTL */
.numerology-block[dir="rtl"] .ezhp-form input[type="text"],
.numerology-block.is-rtl .ezhp-form input[type="text"] {
    text-align: right;
}

/* Date input direction (keep LTR for numbers but align right) */
.numerology-block[dir="rtl"] .ezhp-form input[type="date"],
.numerology-block.is-rtl .ezhp-form input[type="date"] {
    direction: ltr;
    text-align: right;
}

/* Labels for RTL */
.numerology-block[dir="rtl"] label,
.numerology-block.is-rtl label {
    text-align: right;
    width: 100%;
}

/* Hero section RTL */
.numerology-block[dir="rtl"] .ez-hero,
.numerology-block.is-rtl .ez-hero {
    text-align: right;
}

.numerology-block[dir="rtl"] .ez-hero-text,
.numerology-block.is-rtl .ez-hero-text {
    text-align: right;
}

/* Numerology result RTL */
.numerology-block[dir="rtl"] .numerology-result,
.numerology-block.is-rtl .numerology-result {
    text-align: right;
}

/* Titles and headings RTL */
.numerology-block[dir="rtl"] h2,
.numerology-block[dir="rtl"] h3,
.numerology-block.is-rtl h2,
.numerology-block.is-rtl h3 {
    text-align: right;
}

/* Paragraphs RTL */
.numerology-block[dir="rtl"] p,
.numerology-block.is-rtl p {
    text-align: right;
}

/* Progress bar animation for RTL (slide from right to left) */
.numerology-block[dir="rtl"] .ezhp-progress-bar,
.numerology-block.is-rtl .ezhp-progress-bar {
    animation: ezhp-progress-slide-rtl 1.2s linear infinite;
}

@keyframes ezhp-progress-slide-rtl {
    0%   { right: -30%; left: auto; }
    100% { right: 100%; left: auto; }
}

/* Lists for RTL */
.numerology-block[dir="rtl"] ul,
.numerology-block[dir="rtl"] ol,
.numerology-block.is-rtl ul,
.numerology-block.is-rtl ol {
    padding-right: 1.5rem;
    padding-left: 0;
}

.numerology-block[dir="rtl"] li,
.numerology-block.is-rtl li {
    text-align: right;
}

/* Inline image adjustments for RTL are handled dynamically in JS */