/* =============================================================================
   LS League Table – Structure Only
   All sizes, colours, spacing → Elementor Controls (selectors in widget PHP)
   ============================================================================= */

/* ── Widget wrapper ── */
.ls-league-table-widget {
    width: 100%;
    position: relative;
}

/* ── Loader ── */
.ls-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2em 0;           /* breathing room; overridable via control */
}

.ls-spinner {
    border-style: solid;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    /* size + border-width + border-top-color → Elementor */
}

@keyframes spin {
    0%   { transform: rotate(0deg);   }
    100% { transform: rotate(360deg); }
}

/* ── Dropdown – controls bar ── */
.ls-table-controls {
    width: 100%;
    box-sizing: border-box;
    /* margin → Elementor (dropdown_margin) */
}

.ls-league-dropdown {
    position: relative;
    cursor: pointer;
    user-select: none;
    /* width / max-width → Elementor (dropdown_width) */
}

/* Selected button */
.ls-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    /* background, padding, border, border-radius, shadow, color → Elementor */
}

.ls-selected img {
    object-fit: contain;
    flex-shrink: 0;
    /* width / height → Elementor (dropdown_logo_size) */
}

.ls-selected span {
    flex: 1;
    /* color, typography → Elementor */
}

.ls-arrow {
    flex-shrink: 0;
    width: 10px;
    height: 6px;
    transition: transform 0.3s ease;
}

.ls-league-dropdown.active .ls-arrow {
    transform: rotate(180deg);
}

/* Options panel */
.ls-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    z-index: 1000;
    box-sizing: border-box;
    /* background, border, border-radius, shadow → Elementor */
}

.ls-league-dropdown.active .ls-options {
    max-height: 300px;
    opacity: 1;
    overflow-y: auto;
}

/* Option items */
.ls-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
    /* padding, gap, background, color, typography → Elementor */
}

.ls-option img {
    object-fit: contain;
    flex-shrink: 0;
    /* width / height → Elementor (dropdown_item_logo_size) */
}

.ls-option span {
    flex: 1;
    /* color, typography → Elementor */
}

/* ── Table ── */
.ls-standings-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;        /* required for explicit column widths to work */
    box-sizing: border-box;
}

/* Column width hooks (values injected by Elementor selectors) */
.ls-standings-table th.ls-col-position,
.ls-standings-table td.ls-col-position {
    /* width → Elementor (col_position_width) */
}

.ls-standings-table th.ls-col-team,
.ls-standings-table td.ls-col-team {
    /* width → Elementor responsive (col_team_width) */
    overflow: hidden;           /* lets text-overflow work on the inner name */
}

/* Unified width for every numeric stat column:
   P  W  D  L  GF  GA  GD  Pts
   JS should add .ls-number-cell to both <th> and <td> */
.ls-standings-table th.ls-number-cell,
.ls-standings-table td.ls-number-cell {
    /* width → Elementor (number_cols_width) */
    text-align: center;         /* overridable via number_cells_align control */
}

.ls-standings-table th {
    text-align: left;
    font-weight: 600;
    vertical-align: middle;
    /* color, typography, padding, border, bg → Elementor */
}

.ls-standings-table td {
    text-align: left;
    vertical-align: middle;
    /* color, typography, padding, border → Elementor */
}

/* ── Responsive column visibility ── */
.ls-hide-desktop { display: none !important; }

@media (max-width: 1024px) {
    .ls-hide-tablet { display: none !important; }
}

@media (max-width: 767px) {
    .ls-hide-mobile { display: none !important; }
}

/* ── Team cell ── */
.ls-team-cell {
    display: flex;
    align-items: center;
    /* gap → Elementor (team_logo_gap) */
}

.ls-team-cell img {
    object-fit: contain;
    flex-shrink: 0;
    /* width / height → Elementor (team_logo_size) */
}

/* Wraps name + inline form row */
.ls-team-info {
    display: flex;
    align-items: center;
    min-width: 0;               /* allows text-overflow inside flex child */
    /* gap → Elementor (form_inline_gap) */
}

.ls-team-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* color, typography → Elementor */
}

/* ── Form indicators – inline mode ── */
.ls-form-inline {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* gap → Elementor (form_indicator_gap) */
}

.ls-form-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    box-sizing: border-box;
    /* width / height / min-width → Elementor (form_indicator_size)
       padding                    → Elementor (form_indicator_padding)
       border                     → Elementor Group_Control_Border
       border-radius              → Elementor (form_indicator_radius)
       typography                 → Elementor */
}

/* Win / Draw / Loss colours → Elementor controls */
/* .ls-form-w  background-color / color → form_win_bg / form_win_color   */
/* .ls-form-d  background-color / color → form_draw_bg / form_draw_color */
/* .ls-form-l  background-color / color → form_loss_bg / form_loss_color */

/* ── Form – separate column mode ── */
.ls-col-form {
    /* width → Elementor (col_form_width) */
}

.ls-form-cell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* gap → Elementor (form_column_gap) */
}

/* .ls-form-cell .ls-form-indicator  size / padding / border / radius → Elementor */