* {margin:0;padding:0;box-sizing:border-box}

body{font-family:'Segoe UI',system-ui,sans-serif;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);min-height:100vh;color:#2d3748;line-height:1.5}

.main-container{max-width:1200px;margin:0 auto;padding:15px 10px}

/* Header - Compact */
.header-section{background:rgba(255,255,255,0.95);border-radius:20px;padding:25px 20px;margin-bottom:25px;box-shadow:0 15px 35px rgba(0,0,0,0.1);backdrop-filter:blur(15px)}
.header-content{display:flex;align-items:center;gap:20px}
.header-icon{font-size:2.5em;color:#ed8936;background:linear-gradient(45deg,#f6ad55,#ed8936);padding:15px;border-radius:50%;box-shadow:0 8px 20px rgba(237,137,54,0.3)}
.header-content h1{font-size:1.8em;font-weight:800;color:#2d3748;margin:0}
.header-content p{font-size:1em;color:#718096;margin:0;font-weight:500}

/* 🔥 COMPACT PROVIDER CARDS */
.providers-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.provider-card{background:white;border-radius:20px;overflow:hidden;box-shadow:0 15px 35px rgba(0,0,0,0.12);transition:all .3s ease;border:1px solid rgba(255,255,255,0.4);backdrop-filter:blur(10px);position:relative}
.provider-card:hover{transform:translateY(-8px);box-shadow:0 25px 50px rgba(0,0,0,0.2)}
.provider-card.offline{opacity:0.75;transform:none!important}

.provider-avatar{width:100%;height:160px;position:relative;overflow:hidden;background:linear-gradient(135deg,#667eea,#764ba2)}
.provider-avatar img{width:100%;height:100%;object-fit:cover}
.provider-status-badge{position:absolute;top:12px;right:12px;padding:6px 12px;border-radius:20px;font-size:11px;font-weight:700;color:white;box-shadow:0 4px 12px rgba(0,0,0,0.3)}

.status-online{background:linear-gradient(90deg,#10b981,#059669)}
.status-offline{background:linear-gradient(90deg,#ef4444,#dc2626)}

.provider-info{padding:22px 20px}
.provider-name{font-size:1.3em;font-weight:800;color:#1a202c;margin-bottom:10px;line-height:1.2}
.provider-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.provider-category{background:linear-gradient(45deg,#3b82f6,#1d4ed8);color:white;padding:4px 12px;border-radius:18px;font-size:12px;font-weight:600;box-shadow:0 3px 10px rgba(59,130,246,0.3)}
.provider-rating{display:flex;align-items:center;gap:4px;color:#f59e0b;font-weight:700;font-size:13px;background:rgba(245,158,11,0.1);padding:4px 10px;border-radius:15px}
.provider-exp{color:#718096;font-size:13px}

.provider-bio{color:#4a5568;font-size:14px;margin-bottom:20px;line-height:1.5;max-height:3em;overflow:hidden}

/* Action Buttons - Compact */
.action-row{display:flex;gap:10px;margin-top:auto}
.action-btn{flex:1;padding:14px 12px;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,0.15)}
.action-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,0.25)}

.btn-whatsapp{background:#25d366;color:white}
.btn-whatsapp:hover{background:#128c7e}
.btn-call{background:linear-gradient(45deg,#f59e0b,#d97706);color:white}
.btn-call:hover{background:linear-gradient(45deg,#d97706,#b45309)}

.btn-disabled{opacity:0.5;cursor:not-allowed!important;background:#a0aec0!important;color:#718096!important;transform:none!important}

/* Empty State */
.empty-state{grid-column:1/-1;text-align:center;padding:80px 20px;color:rgba(255,255,255,0.9)}
.empty-state i{font-size:4em;color:rgba(255,255,255,0.6);margin-bottom:20px}

/* ADMIN PANEL */
.admin-page{background:linear-gradient(135deg,#1a202c,#2d3748)}
.admin-wrapper{max-width:1000px;margin:0 auto;padding:25px}
.admin-header{background:rgba(255,255,255,0.08);padding:30px;border-radius:25px;text-align:center;margin-bottom:35px;backdrop-filter:blur(20px);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.admin-header h1{font-size:2.2em;margin-bottom:10px}
.admin-header p{font-size:1.1em;color:#cbd5e0}

.form-section{background:rgba(255,255,255,0.05);padding:35px;border-radius:25px;margin-bottom:40px;backdrop-filter:blur(25px);box-shadow:0 25px 50px rgba(0,0,0,0.4)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:25px}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:15px;border-radius:15px;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.9);font-size:15px;transition:all .3s}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(59,130,246,0.3);border-color:#3b82f6;transform:translateY(-2px)}
#prov-schedule{font-family:monospace;background:#1a202c;color:#e2e8f0}
.form-actions{display:flex;gap:20px}
.btn-primary,.btn-secondary{flex:1;padding:18px;border-radius:15px;border:none;font-size:16px;font-weight:800;cursor:pointer;transition:all .3s;box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.btn-primary{background:linear-gradient(45deg,#10b981,#059669);color:white}
.btn-primary:hover{background:linear-gradient(45deg,#059669,#047857);transform:translateY(-3px)}
.btn-secondary{background:#6b7280;color:white}
.btn-secondary:hover{background:#4b5563;transform:translateY(-3px)}

.list-section{background:rgba(255,255,255,0.03);padding:30px;border-radius:25px}
.list-item{display:flex;justify-content:space-between;align-items:center;padding:25px 20px;background:rgba(255,255,255,0.08);border-radius:20px;margin:15px 0;border-left:4px solid #3b82f6;transition:all .3s;backdrop-filter:blur(10px)}
.list-item:hover{transform:translateX(5px);box-shadow:0 15px 35px rgba(0,0,0,0.2)}
.list-left h4{font-size:1.3em;font-weight:800;margin-bottom:5px}
.list-left p{color:#a0aec0;font-size:14px}
.list-right{display:flex;gap:10px;flex-wrap:wrap}
.list-status{padding:10px 16px;border-radius:25px;font-weight:700;font-size:14px}
.status-online{background:linear-gradient(90deg,#10b981,#059669);color:white}
.status-offline{background:linear-gradient(90deg,#ef4444,#dc2626);color:white}
.list-btn{padding:12px 18px;border-radius:12px;border:none;cursor:pointer;font-weight:700;font-size:14px;transition:all .3s;min-width:90px}
.edit-btn{background:#3b82f6;color:white;margin-right:8px}
.edit-btn:hover{background:#2563eb}
.delete-btn{background:#ef4444;color:white}
.delete-btn:hover{background:#dc2626}

/* Responsive - Perfect Mobile */
@media(max-width:768px){
    .main-container{padding:10px}
    .providers-container{grid-template-columns:1fr;gap:20px}
    .provider-meta{flex-direction:column;align-items:flex-start;gap:8px}
    .action-row{flex-direction:column}
    .form-grid{grid-template-columns:1fr}
    .list-item{flex-direction:column;text-align:center;gap:20px}
    .list-right{order:-1;width:100%;justify-content:center}
}


/* 🔥 REQUIRED CLASSES FOR WORKING CODE */
.provider-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 25px; }

.provider-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.provider-card:hover { transform: translateY(-5px); }

.provider-photo {
    height: 200px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.provider-photo.offline { opacity: 0.7; }

.provider-photo img { width: 100%; height: 100%; object-fit: cover; }

.provider-details { padding: 25px; }

.provider-name { 
    font-size: 1.4em; 
    font-weight: 800; 
    margin-bottom: 12px; 
    color: #1a202c;
}

.provider-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.provider-type {
    background: linear-gradient(45deg, #10b981, #059669);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.provider-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #f59e0b;
    font-weight: 700;
}

.provider-years { 
    color: #6b7280; 
    font-size: 14px; 
}

.provider-description {
    color: #4a5568;
    margin-bottom: 25px;
    line-height: 1.6;
}

.contact-buttons {
    display: flex;
    gap: 12px;
}

.contact-btn {
    flex: 1;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

.whatsapp-btn {
    background: #25d366;
    color: white;
}

.whatsapp-btn:hover:not(.disabled) {
    background: #128c7e;
    transform: translateY(-2px);
}

.call-btn {
    background: linear-gradient(45deg, #f59e0b, #d97706);
    color: white;
}

.call-btn:hover:not(.disabled) {
    background: linear-gradient(45deg, #d97706, #b45309);
    transform: translateY(-2px);
}

.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}