/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com
Description: Child theme for Hello Elementor
Author: Serxhio Vrapi
Author URI: serxhio.dev
Template: hello-elementor
Version: 1.0.0
*/

/* FAQ Accordion Cards */

.e-n-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.e-n-accordion-item {
    background: #ffffff;
    border: 1px solid #e3e4e5;
    border-radius: 12px;
    overflow: hidden;
}

.e-n-accordion-item[open] {
    background: #f5f5f0;
}

.e-n-accordion-item-title {
    display: flex !important;
    align-items: center;
    padding: 20px 24px !important;
    cursor: pointer;
    list-style: none;
}

/* Title text takes all available space pushes icon to far right */
.e-n-accordion-item-title-header {
    flex: 1;
}

.e-n-accordion-item > div,
.e-n-accordion-item > div .e-con,
.e-n-accordion-item > div .e-con-inner {
    background: transparent !important;
    padding-left: 0;
    padding-right: 0;
}

.e-n-accordion-item > div {
    padding: 24px 20px;
    border: none;
}

/* Chevron icon */

/* Hide built-in plus/minus SVGs */
.e-n-accordion-item-title-icon svg {
    display: none !important;
}

/* Draw chevron */
.e-n-accordion-item-title-icon::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 1px solid #737373;
    border-bottom: 1px solid #737373;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    margin-top: -4px;
    flex-shrink: 0;
}

/* Flip to up when open */
.e-n-accordion-item[open] .e-n-accordion-item-title-icon::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}


/* ── Offcanvas menu animation speed ── */
.e-off-canvas,
.e-off-canvas__main,
.e-off-canvas__overlay {
    transition-duration: 0.5s !important;
    animation-duration: 0.5s !important;
}

/* ── Form step indicators ── */
.e-form__indicators {
    justify-content: center;
    align-items: center;
    gap: 0;
    padding-bottom: 32px;
}

.e-form__indicators.e-form__indicators--type-number_text {
    display: flex;
    align-items: center;
}

.e-form__indicators__indicator {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
}

.e-form__indicators__indicator__number {
    width: 55px !important;
    height: 48px !important;
    border-radius: 14px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    transition: background 0.2s;
}

.e-form__indicators__indicator__number svg {
    width: 26px;
    height: 26px;
}

.e-form__indicators__indicator--state-active .e-form__indicators__indicator__number {
    background: #4a9b9b !important;
    color: #ffffff !important;
}

.e-form__indicators__indicator--state-inactive .e-form__indicators__indicator__number {
    background: #eef0f2 !important;
    color: #a0adb8 !important;
}

.e-form__indicators__indicator__label {
    display: block !important;
    visibility: visible !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    max-width: 110px;
    line-height: 1.3 !important;
}

.e-form__indicators__indicator--state-active .e-form__indicators__indicator__label {
    color: #1e3a5f !important;
}

.e-form__indicators__indicator--state-inactive .e-form__indicators__indicator__label {
    color: #a0adb8 !important;
    font-weight: 500 !important;
}

.e-form__indicators__indicator__separator {
    margin: 0px !important;
    height: 2px !important;
    width: 10% !important;
}

/* ── Step icon color via mask ── */

/* Remove background-image from all steps — we handle icons via ::after */
.e-form__indicators__indicator__number {
    background-image: none !important;
    position: relative;
}

/* Base ::after for all steps */
.e-form__indicators__indicator__number::after {
    content: '';
    position: absolute;
    inset: 0;
    mask-size: 18px;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: 18px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Default white — covers active + completed (no class) */
.e-form__indicators__indicator__number::after {
    background-color: #ffffff;
}

/* Inactive only = muted icon */
.e-form__indicators__indicator--state-inactive .e-form__indicators__indicator__number::after {
    background-color: #9da3ae;
}

/* Step 1 — Personal Information */
.e-form__indicators__indicator:nth-child(1) .e-form__indicators__indicator__number::after {
    mask-image: url(/wp-content/uploads/2026/03/personal-information.svg);
    -webkit-mask-image: url(/wp-content/uploads/2026/03/personal-information.svg);
}

/* Step 2 — Medical Information */
.e-form__indicators__indicator:nth-child(3) .e-form__indicators__indicator__number::after {
    mask-image: url(/wp-content/uploads/2026/03/medical-information.svg);
    -webkit-mask-image: url(/wp-content/uploads/2026/03/medical-information.svg);
}

/* Step 3 — Employment & Application */
.e-form__indicators__indicator:nth-child(5) .e-form__indicators__indicator__number::after {
    mask-image: url(/wp-content/uploads/2026/03/aplication.svg);
    -webkit-mask-image: url(/wp-content/uploads/2026/03/aplication.svg);
}

/* ── Form next/submit button ── */
.elementor-field-group.e-form__buttons__wrapper.elementor-field-type-next {
    justify-content: end;
}

button.elementor-button.elementor-size-md.e-form__buttons__wrapper__button.e-form__buttons__wrapper__button-next,
button.elementor-button.elementor-size-md.e-form__buttons__wrapper__button.e-form__buttons__wrapper__button-previous {
    padding: 15px !important;
    width: auto !important;
    max-width: 92px !important;
    max-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
}

/* ── Mobile: hide step labels ── */
@media (max-width: 768px) {
    .e-form__indicators__indicator__label {
        display: none !important;
    }
}

summary.e-n-accordion-item-title {
    border-bottom: 1px solid #e2e3e4 !important;
    border-top: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
}

/* ── Completed step ── */
.e-form__indicators__indicator--state-completed [class*=indicator--shape-]:not(.e-form__indicators__indicator--shape-none) {
    background-color: #4a9b9b;
}

/* ── Form button min-height ── */
.elementor-form .elementor-button.elementor-size-md {
    min-height: 30px;
}

/* ── Multi-step form headings ── */
.mutli-steps-title {
    font-size: 24px !important;
    font-weight: 600;
    color: #1e3a5f;
}

.multi-steps-description {
    font-size: 14px !important;
    font-weight: 500;
    margin-top: -10px;
    color: #737373;
}

/* ── Scroll-triggered fade-in-up ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body:not(.elementor-editor-active) .animate-on-scroll {
    opacity: 0;
    transform: translateY(15px);
}

body:not(.elementor-editor-active) .animate-on-scroll.is-visible {
    animation: fadeInUp 1s ease forwards;
}

body:not(.elementor-editor-active) .animate-on-scroll.is-visible.delay-1,
body:not(.elementor-editor-active) .animate-from-left.is-visible.delay-1,
body:not(.elementor-editor-active) .animate-from-right.is-visible.delay-1 {
    animation-delay: 0s;
}

body:not(.elementor-editor-active) .animate-on-scroll.is-visible.delay-2,
body:not(.elementor-editor-active) .animate-from-left.is-visible.delay-2,
body:not(.elementor-editor-active) .animate-from-right.is-visible.delay-2 {
    animation-delay: 0.1s;
}

body:not(.elementor-editor-active) .animate-on-scroll.is-visible.delay-3,
body:not(.elementor-editor-active) .animate-from-left.is-visible.delay-3,
body:not(.elementor-editor-active) .animate-from-right.is-visible.delay-3 {
    animation-delay: 0.2s;
}

body:not(.elementor-editor-active) .animate-on-scroll.is-visible.delay-4,
body:not(.elementor-editor-active) .animate-from-left.is-visible.delay-4,
body:not(.elementor-editor-active) .animate-from-right.is-visible.delay-4 {
    animation-delay: 0.3s;
}

body:not(.elementor-editor-active) .animate-on-scroll.is-visible.delay-5,
body:not(.elementor-editor-active) .animate-from-left.is-visible.delay-5,
body:not(.elementor-editor-active) .animate-from-right.is-visible.delay-5 {
    animation-delay: 0.4s;
}

body:not(.elementor-editor-active) .animate-on-scroll.is-visible.delay-6,
body:not(.elementor-editor-active) .animate-from-left.is-visible.delay-6,
body:not(.elementor-editor-active) .animate-from-right.is-visible.delay-6 {
    animation-delay: 0.5s;
}

body:not(.elementor-editor-active) .animate-on-scroll.is-visible.delay-7,
body:not(.elementor-editor-active) .animate-from-left.is-visible.delay-7,
body:not(.elementor-editor-active) .animate-from-right.is-visible.delay-7 {
    animation-delay: 0.6s;
}

body:not(.elementor-editor-active) .animate-on-scroll.is-visible.delay-8,
body:not(.elementor-editor-active) .animate-from-left.is-visible.delay-8,
body:not(.elementor-editor-active) .animate-from-right.is-visible.delay-8 {
    animation-delay: 0.7s;
}

/* ── Fade-in from left ── */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

body:not(.elementor-editor-active) .animate-from-left {
    opacity: 0;
    transform: translateX(-8px);
}

body:not(.elementor-editor-active) .animate-from-left.is-visible {
    animation: fadeInLeft 1s ease forwards;
}

/* ── Fade-in ── */
body:not(.elementor-editor-active) .animate-from-right {
    opacity: 0;
}

body:not(.elementor-editor-active) .animate-from-right.is-visible {
    animation: fadeIn 1s ease forwards;
}

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