/**
 * ACF Repeater Fields Widget Styles
 * 
 * Comprehensive stylesheet for the ACF Repeater Fields Elementor widget.
 * Supports both list (vertical) and inline (horizontal) layouts with
 * extensive customization options.
 *
 * Table of Contents:
 * 1. Main Widget Container
 * 2. Layout Modes (List & Inline)
 * 3. Row Structure (Icon + Fields)
 * 4. Icon Styling
 * 5. Fields Wrapper
 * 6. Individual Field Styles
 * 7. Field Position Targeting
 * 8. Text Formatting
 * 9. Admin Notices
 */

/* ============================================
   1. MAIN WIDGET CONTAINER - LIST LAYOUT (DEFAULT)
   ============================================ */
.ababil-acf-repeater-widget {
    display: flex;
    flex-direction: column;
}

/* List Layout - Applied via Elementor prefix_class */
.elementor-widget-ababil-acf-repeater-fields.ababil-acf-repeater-layout-list .ababil-acf-repeater-widget {
    display: flex;
    flex-direction: column;
}

/* ============================================
   2. INLINE LAYOUT
   ============================================ */
.elementor-widget-ababil-acf-repeater-fields.ababil-acf-repeater-layout-inline .ababil-acf-repeater-widget {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 10px; /* Default fallback, overridden by controls */
}

/* ============================================
   3. ROW STRUCTURE (ICON + FIELDS)
   ============================================ */
.ababil-acf-repeater-row {
     display: flex;
     align-items: flex-start;
     width: 100%;
     box-sizing: border-box;
}

/* Inline layout - rows become inline items */
.elementor-widget-ababil-acf-repeater-fields.ababil-acf-repeater-layout-inline .ababil-acf-repeater-row {
    width: fit-content !important;
    display: inline-flex;
}

/* ============================================
   4. ICON STYLING
   ============================================ */
.ababil-acf-repeater-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    transition: all 0.25s ease;
}

/* Font icon sizing */
.ababil-acf-repeater-icon i {
    line-height: 1;
}

/* SVG icon sizing */
.ababil-acf-repeater-icon svg {
    width: 1em;
    height: 1em;
    display: block;
}

/* ============================================
   5. FIELDS WRAPPER
   ============================================ */
.ababil-acf-repeater-fields-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Inline layout - horizontal field arrangement */
.elementor-widget-ababil-acf-repeater-fields.ababil-acf-repeater-layout-inline .ababil-acf-repeater-fields-wrapper {
    flex-direction: row;
    align-items: center;
    flex-grow: 0;
}

/* ============================================
   6. INDIVIDUAL FIELD STYLES
   ============================================ */
.ababil-acf-repeater-field {
    width: 100%;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

/* Inline layout - auto-width fields */
.elementor-widget-ababil-acf-repeater-fields.ababil-acf-repeater-layout-inline .ababil-acf-repeater-field {
    width: auto;
}

/* Ensure background covers entire field in inline mode */
.elementor-widget-ababil-acf-repeater-fields.ababil-acf-repeater-layout-inline .ababil-acf-repeater-field {
    display: inline-block;
}

/* Row background and transitions */
.ababil-acf-repeater-row {
    transition: all 0.25s ease;
}

/* ============================================
   7. FIELD POSITION TARGETING
   ============================================ */
/* First field (typically title) */
.ababil-acf-repeater-field:first-child {
}

/* Second field (typically description) */
.ababil-acf-repeater-field:nth-child(2) {
}

/* Third field (optional additional data) */
.ababil-acf-repeater-field:nth-child(3) {
}

/* ============================================
   8. TEXT FORMATTING
   ============================================ */
.ababil-acf-repeater-text {
    display: block;
    min-width: 0;
    word-wrap: break-word;
}

/* ============================================
   9. ADMIN NOTICES
   ============================================ */
.ababil-message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 3px;
}
.ababil-message-info { background: #e7f3ff; color: #0c5460; }
.ababil-message-error { background: #f8d7da; color: #721c24; }