/* ============================================
   COMPONENTS — Reusable UI pieces
   ============================================ */

/* ---- Swiper Overrides ---- */
.swiper { width: 100%; overflow: hidden; }

.ll-testimonials__swiper .swiper-slide { height: auto; }

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--ll-border);
    opacity: 1;
    transition: background .2s, width .2s;
}

.swiper-pagination-bullet-active {
    background: var(--ll-primary) !important;
    width: 24px;
    border-radius: 4px;
}

/* ---- Skeleton loading ---- */
.ll-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: ll-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes ll-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ---- Badge variants ---- */
.ll-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ll-badge--blue   { background: #DBEAFE; color: #1e40af; }
.ll-badge--green  { background: #D1FAE5; color: #065f46; }
.ll-badge--orange { background: #FEF3C7; color: #92400e; }
.ll-badge--pink   { background: #FCE7F3; color: #9d174d; }

/* ---- Nav Bottom (mobile) ---- */
.ll-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 990;
    background: #fff;
    border-top: 1px solid var(--ll-border);
    padding: 8px 0 env(safe-area-inset-bottom);
}

@media (max-width: 768px) {
    .ll-bottom-nav { display: flex; }
}

.ll-bottom-nav__list {
    display: flex;
    width: 100%;
}

.ll-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--ll-text-light);
    text-decoration: none;
    transition: color var(--ll-transition);
}

.ll-bottom-nav__item.is-active,
.ll-bottom-nav__item:hover { color: var(--ll-primary); }

.ll-bottom-nav__icon { width: 22px; height: 22px; }

/* ---- Form elements ---- */
.ll-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.ll-form-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ll-text);
}

.ll-form-input {
    width: 100%;
    padding: 12px 16px;
    font-size: .9375rem;
    font-family: inherit;
    color: var(--ll-text);
    border: 1.5px solid var(--ll-border);
    border-radius: var(--ll-radius-sm);
    background: var(--ll-bg);
    outline: none;
    transition: border-color var(--ll-transition);
}

.ll-form-input:focus { border-color: var(--ll-primary); }
.ll-form-input::placeholder { color: #9CA3AF; }

/* ---- Alert / Notice ---- */
.ll-notice {
    padding: 14px 16px;
    border-radius: var(--ll-radius-sm);
    font-size: .9375rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ll-notice--info    { background: #EFF6FF; color: #1e40af; border-left: 4px solid var(--ll-primary); }
.ll-notice--success { background: #F0FDF4; color: #166534; border-left: 4px solid #22c55e; }
.ll-notice--warning { background: #FFFBEB; color: #92400e; border-left: 4px solid #F59E0B; }

/* ---- Image ratio utilities ---- */
.ll-ratio { position: relative; overflow: hidden; }
.ll-ratio--4-3  { aspect-ratio: 4/3; }
.ll-ratio--16-9 { aspect-ratio: 16/9; }
.ll-ratio--1-1  { aspect-ratio: 1; }
.ll-ratio img   { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Spinner ---- */
.ll-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--ll-border);
    border-top-color: var(--ll-primary);
    border-radius: 50%;
    animation: ll-spin .7s linear infinite;
}

@keyframes ll-spin {
    to { transform: rotate(360deg); }
}

/* ---- Screen reader only ---- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}