/* ═══════════════════════════════════════════════════════
   LOADERS — Agerpix v2 Design System
   Inline and component-level loading spinners
   ═══════════════════════════════════════════════════════ */

/* ── Circular spinner (inline/component) ── */
.loader {
    color: var(--color-primary, #1a4d3e);
    font-size: 2.5em;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 2em auto;
    position: relative;
    transform: translateZ(0);
    animation: load-spin 1.4s infinite ease, load-orbit 1.4s infinite ease;
}

@keyframes load-spin {
    0%         { box-shadow: 0 -0.83em 0 -0.4em,  0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
    5%, 95%    { box-shadow: 0 -0.83em 0 -0.4em,  0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
    10%, 59%   { box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; }
    20%        { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; }
    38%        { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; }
    100%       { box-shadow: 0 -0.83em 0 -0.4em,  0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
}

@keyframes load-orbit {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── Form loader (4-dot spinner) ── */
.fl-container {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    animation: fl-rotation 1s infinite;
}

.fl-container .shape {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.fl-container .shape.shape-1 {
    left: 0;
    background-color: var(--color-primary, #1a4d3e);
}
.fl-container .shape.shape-2 {
    right: 0;
    background-color: var(--color-accent, #34d399);
}
.fl-container .shape.shape-3 {
    bottom: 0;
    background-color: var(--color-warning, #d97706);
}
.fl-container .shape.shape-4 {
    bottom: 0;
    right: 0;
    background-color: var(--color-info, #2563eb);
}

.fl-container .shape-1 { animation: shape1 0.5s infinite alternate; }
.fl-container .shape-2 { animation: shape2 0.5s infinite alternate; }
.fl-container .shape-3 { animation: shape3 0.5s infinite alternate; }
.fl-container .shape-4 { animation: shape4 0.5s infinite alternate; }

@keyframes fl-rotation {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes shape1 {
    from { transform: translate(0, 0); }
    to   { transform: translate(19px, 19px); }
}
@keyframes shape2 {
    from { transform: translate(0, 0); }
    to   { transform: translate(-19px, 19px); }
}
@keyframes shape3 {
    from { transform: translate(0, 0); }
    to   { transform: translate(19px, -19px); }
}
@keyframes shape4 {
    from { transform: translate(0, 0); }
    to   { transform: translate(-19px, -19px); }
}