/* ======================================== */
/* agents.css - Extracted from blade      */
/* ======================================== */

.agents-hero { background: linear-gradient(135deg, #024A57, #04A5B5); padding: 56px 0 48px; text-align: center; position: relative; overflow: hidden; }
.agents-hero::before { content:''; position: absolute; top:-80px; right:-50px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.04); }
.agents-hero h1 { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 8px; position: relative; z-index:1; }
.agents-hero p { font-size: .95rem; color: rgba(255,255,255,.65); position: relative; z-index:1; }

.agents-wrap { padding: 40px 0 72px; }

/* Promo banner */
.agents-promo { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 28px 32px; display: flex; align-items: center; gap: 24px; margin-bottom: 32px; }
.agents-promo .ap-icon { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg,rgba(4,165,181,.1),rgba(2,74,87,.1)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.agents-promo .ap-text h3 { font-size: 1rem; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.agents-promo .ap-text p { font-size: .84rem; color: #777; line-height: 1.6; }
.agents-promo .ap-btn { margin-left: auto; padding: 10px 24px; border-radius: 10px; background: #04A5B5; color: #fff; font-weight: 700; font-size: .84rem; text-decoration: none; white-space: nowrap; transition: all .15s; }
.agents-promo .ap-btn:hover { background: #038898; }

/* Agents grid */
.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.agent-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 28px 24px; text-align: center; transition: all .2s; }
.agent-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.06); transform: translateY(-2px); }
.agent-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #f0f9fa, #d0eef3); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.agent-avatar .initials { font-size: 1.3rem; font-weight: 800; color: #04A5B5; }
.agent-card h3 { font-size: .95rem; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.agent-card .role { font-size: .78rem; color: #04A5B5; font-weight: 600; margin-bottom: 12px; display: inline-block; padding: 3px 10px; background: rgba(4,165,181,.08); border-radius: 6px; }
.agent-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.agent-meta span { font-size: .8rem; color: #888; display: flex; align-items: center; gap: 6px; justify-content: center; }
.agent-meta svg { flex-shrink: 0; }
.agent-actions { display: flex; gap: 8px; justify-content: center; }
.agent-actions a { padding: 8px 16px; border-radius: 8px; font-size: .8rem; font-weight: 600; text-decoration: none; transition: all .15s; }
.agent-actions .a-call { background: #04A5B5; color: #fff; }
.agent-actions .a-call:hover { background: #038898; }
.agent-actions .a-msg { background: #f5f5f5; color: #555; }
.agent-actions .a-msg:hover { background: #eee; }

.no-agents { text-align: center; padding: 60px 20px; color: #bbb; }
.no-agents svg { margin-bottom: 14px; opacity: .4; }
.no-agents p { font-size: .95rem; font-weight: 600; }
.no-agents .sub { font-size: .84rem; font-weight: 400; margin-top: 6px; }

@media (max-width: 640px) {
    .agents-promo { flex-direction: column; text-align: center; }
    .agents-promo .ap-btn { margin-left: 0; }
    .agents-hero h1 { font-size: 1.5rem; }
    .agents-wrap { padding: 24px 0 48px; }
}

@media (max-width: 480px) {
    .agents-hero { padding: 36px 0 32px; }
    .agents-hero h1 { font-size: 1.25rem; }
    .agents-promo { padding: 18px 16px; }
    .agents-grid { gap: 12px; }
    .agent-card { padding: 20px 16px; }
}