/* ===========================================================
   ART-STROY AI
   components.css
   Универсальные компоненты интерфейса
=========================================================== */

/* ---------- Кнопки ---------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:12px 22px;

    border:none;
    border-radius:14px;

    cursor:pointer;

    font-size:15px;
    font-weight:600;

    transition:.25s ease;
}

.btn-primary{
    background:var(--primary);
    color:#fff;
}

.btn-primary:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.btn-secondary{
    background:var(--secondary);
    color:#fff;
}

.btn-secondary:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

/* ---------- Поля ---------- */

.input{
    width:100%;

    padding:14px 16px;

    border:1px solid var(--border);

    border-radius:14px;

    background:#fff;

    font-size:15px;

    transition:.2s;
}

.input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(255,159,28,.18);

}

/* ---------- Карточки ---------- */

.panel{

    background:var(--surface);

    border-radius:20px;

    box-shadow:var(--shadow-sm);

    padding:24px;

}

.panel-title{

    font-size:18px;

    font-weight:700;

    margin-bottom:20px;

}

/* ---------- Бейдж ---------- */

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

.badge-success{

    background:#e8f8ef;

    color:var(--success);

}

.badge-warning{

    background:#fff4dd;

    color:#cc8400;

}

.badge-danger{

    background:#ffe6e8;

    color:var(--danger);

}

/* ---------- Разделитель ---------- */

.divider{

    height:1px;

    background:var(--border);

    margin:18px 0;

}

/* ---------- Строка информации ---------- */

.info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}

.info-row:last-child{

    margin-bottom:0;

}

.info-label{

    color:var(--text-light);

    font-size:14px;

}

.info-value{

    font-weight:600;

}

/* ---------- Аватары ---------- */

.avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

    background:#fff;

    box-shadow:var(--shadow-sm);

}

.avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}