/* ================================================================
   ACF Repeater for Elementor — v2.1
   Two layouts: Pill Buttons + Icon Link List
   CSS variables let Elementor controls win cleanly.
   ================================================================ */

.are-editor-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 14px;
    color: #78350f;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
}

/* ============== LAYOUT 1 — PILL BUTTONS ============== */
.are-btn-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--are-btn-gap, 10px);
    align-items: center;
}

.are-btn {
    display: inline-block;
    background-color: #1c1c1e;
    color: #ffffff;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    user-select: none;
    outline: none;
    box-sizing: border-box;
    transition: background-color .2s ease, color .2s ease, transform .18s ease, box-shadow .2s ease;
}
.are-btn:hover { background-color:#3a3a3c; color:#fff !important; transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.28); }
.are-btn:active { transform:translateY(0); box-shadow:none; }
.are-btn:focus-visible { outline:2px solid #6c63ff; outline-offset:3px; }

/* ============== LAYOUT 2 — ICON LINK LIST ============== */
.are-link-list {
    display: flex;
    flex-direction: column;
    /* Row gap is driven entirely by the Elementor control via this var. */
    gap: var(--are-row-gap, 0px);
    background-color: #1c1c1e;
    border-radius: 12px;
    overflow: hidden;
    padding: 8px 0;
    width: 100%;
    box-sizing: border-box;
}

/* ── Row ── */
.are-link-list__row {
    display: flex;
    align-items: flex-start;
    /* Icon → Text gap driven by Elementor control via this var. */
    gap: var(--are-icon-gap, 14px);
    padding: 14px 20px;
    text-decoration: none !important;
    color: inherit;
    transition: background-color .18s ease;
    cursor: default;
    box-sizing: border-box;
    width: 100%;
}
a.are-link-list__row { cursor: pointer; }
a.are-link-list__row:hover { background-color: rgba(255,255,255,.05); text-decoration:none !important; }

/* Divider between rows */
.are-link-list__row--divider + .are-link-list__row--divider {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Icon ── */
.are-link-list__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* No hard-coded width/min-width — let the Elementor "Icon Column Width" control own it. */
    margin-top: 1px;
    font-size: 18px;
    line-height: 1;
    /* Default color drives currentColor for inlined SVGs. Elementor control overrides via var or direct color. */
    color: var(--are-icon-color, inherit);
    transition: color .18s ease;
}

.are-link-list__icon svg { display:block; width:1em; height:1em; fill: currentColor; }
.are-link-list__icon svg path,
.are-link-list__icon svg rect,
.are-link-list__icon svg circle,
.are-link-list__icon svg polygon,
.are-link-list__icon svg ellipse,
.are-link-list__icon svg line,
.are-link-list__icon svg polyline { fill: currentColor; }

.are-link-list__icon img { display:block; width:1em; height:1em; object-fit:contain; }
.are-link-list__icon .dashicons { font-size:inherit; width:auto; height:auto; line-height:1; }
.are-link-list__icon i { color: currentColor; }

/* ── Text ── */
.are-link-list__text {
    display: block;
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: #ffffff;
    text-decoration: none !important;
    transition: color .18s ease;
}
a.are-link-list__row:hover .are-link-list__text { color:#e63946; }