/* ==========================================================================
   Webian Elementor Pack — Frontend Styles
   ========================================================================== */

/* ==========================================================================
   1. TICKER WIDGET
   ========================================================================== */

.webian-ticker-wrap {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.webian-ticker-wrap[data-fade="1"]::before,
.webian-ticker-wrap[data-fade="1"]::after {
    content: '';
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.webian-ticker-wrap[data-fade="1"]::before {
    left: 0;
    background: linear-gradient(to right, var(--webian-ticker-bg, #fff), transparent);
}
.webian-ticker-wrap[data-fade="1"]::after {
    right: 0;
    background: linear-gradient(to left, var(--webian-ticker-bg, #fff), transparent);
}

.webian-ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.webian-ticker-pause-hover .webian-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes webian-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes webian-ticker-scroll-rev {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.webian-ticker-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    cursor: default;
    padding: 0 32px;
    gap: 10px;
}
a.webian-ticker-item { cursor: pointer; }
a.webian-ticker-item:hover .webian-ticker-label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.webian-ticker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.webian-ticker-icon i   { font-size: 20px; line-height: 1; }
.webian-ticker-icon svg { width: 20px; height: 20px; }

.webian-ticker-img {
    height: 20px;
    width: auto;
    object-fit: contain;
    display: block;
}

.webian-ticker-label {
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
}

.webian-ticker-sep {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    user-select: none;
}

.webian-ticker-wrap.has-border-top    { border-top:    1px solid #ddd; }
.webian-ticker-wrap.has-border-bottom { border-bottom: 1px solid #ddd; }


/* ==========================================================================
   2. ACCORDION WIDGET
   ========================================================================== */

.webian-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* ── Item ── */
.webian-accordion-item {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

/* ── Header ── */
.webian-accordion-header {
    display: block;
    width: 100%;
    padding: 16px 20px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: background 0.25s ease;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.webian-accordion-header:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.webian-accordion-header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Icon left: toggle icon first, then title */
.webian-accordion-header-inner.icon-left {
    flex-direction: row;
}

/* Icon right: title first, then toggle icon */
.webian-accordion-header-inner.icon-right {
    flex-direction: row;
    justify-content: space-between;
}

.webian-accordion-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.webian-accordion-title-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.webian-accordion-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    color: #1a1a1a;
}

.webian-accordion-subtitle {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    color: #777777;
}

/* ── Item Icon ── */
.webian-accordion-item-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.webian-accordion-item-icon i   { font-size: 18px; line-height: 1; }
.webian-accordion-item-icon svg { width: 18px; height: 18px; }

/* ── Toggle Icon ── */
.webian-accordion-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform 0.25s ease;
}
.webian-accordion-toggle-icon i   { font-size: 14px; line-height: 1; }
.webian-accordion-toggle-icon svg { width: 14px; height: 14px; }

/* Show/hide open & closed icons */
.webian-acc-icon-open   { display: none; }
.webian-acc-icon-closed { display: flex; }

.webian-accordion-item.is-open .webian-acc-icon-open   { display: flex; }
.webian-accordion-item.is-open .webian-acc-icon-closed { display: none; }

/* ── Body ── */
.webian-accordion-body {
    overflow: hidden;
    border-top: 1px solid #e5e5e5;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

.webian-accordion-body-inner {
    padding: 16px 20px 20px;
}

.webian-accordion-body-inner > *:first-child { margin-top: 0; }
.webian-accordion-body-inner > *:last-child  { margin-bottom: 0; }

/* ── Active state ── */
.webian-accordion-item.is-open .webian-accordion-header {
    background: #fafafa;
}


/* ==========================================================================
   3. BUTTON WIDGET
   ========================================================================== */

.webian-button-wrap {
    display: flex;
    width: 100%;
}

.webian-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: #3b5cf5;
    color: #fff;
    padding: 14px 28px;
    border-radius: 6px;
    font-family: inherit;
    line-height: 1.3;
    transition-property: background, color, border-color, box-shadow, transform;
    transition-duration: 250ms;
    transition-timing-function: ease;
    box-sizing: border-box;
}

.webian-button:hover {
    text-decoration: none;
}

.webian-button-text {
    line-height: 1;
}

.webian-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 250ms ease;
}

.webian-button-icon i {
    font-size: 18px;
    line-height: 1;
}

.webian-button-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.webian-button-icon img {
    width: 18px;
    height: 18px;
    display: block;
    object-fit: contain;
}