:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;

--success:#10b981;
--success-dark:#059669;

--danger:#ef4444;
--danger-dark:#dc2626;

--background:#f5f7fb;
--card:#ffffff;

--text:#111827;
--muted:#6b7280;

--border:#e5e7eb;

--shadow:0 8px 24px rgba(15,23,42,.06);

}

*{

font-family:'Inter',sans-serif;

}

body{

background:var(--background);

color:var(--text);

}

/*======================================
PAGE
======================================*/

.partner-requests-page{

padding:30px 0 50px;

}

/*======================================
HEADER
======================================*/

.requests-header{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

background:#fff;

padding:22px 26px;

border-radius:18px;

box-shadow:var(--shadow);

margin-bottom:22px;

}

.requests-header h1{

margin:0;

font-size:28px;

font-weight:800;

}

.requests-header p{

margin:6px 0 0;

font-size:14px;

color:var(--muted);

}

.requests-count{

display:inline-flex;

align-items:center;

padding:10px 16px;

background:#eef4ff;

color:#2563eb;

border-radius:12px;

font-weight:700;

}

/*======================================
GRID
======================================*/

.requests-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(360px,1fr));

gap:18px;

}

/*======================================
CARD
======================================*/

.request-item{

background:#fff;

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

border-radius:18px;

padding:18px;

box-shadow:var(--shadow);

transition:.25s;

}

.request-item:hover{

transform:translateY(-3px);

border-color:#2563eb;

box-shadow:0 14px 28px rgba(37,99,235,.12);

}

/*======================================
TOP
======================================*/

.request-top{

display:flex;

align-items:center;

gap:14px;

margin-bottom:14px;

}

.request-avatar{

flex-shrink:0;

}

.request-avatar img{

width:58px;

height:58px;

border-radius:50%;

object-fit:cover;

border:3px solid #eef4ff;

}

.request-avatar-placeholder{

width:58px;
height:58px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

font-size:18px;
font-weight:700;

border:3px solid #eef4ff;

text-transform:uppercase;

flex-shrink:0;

}

.request-info{

flex:1;

min-width:0;

}

.request-info h5{

margin:0;

display:flex;

align-items:center;

gap:6px;

font-size:17px;

font-weight:700;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.country-flag{

width:20px;

height:15px;

border-radius:2px;

object-fit:cover;

}

.request-level{

margin-top:6px;

font-size:13px;

font-weight:600;

color:#6b7280;

}

/*======================================
MESSAGE
======================================*/

.request-message{

padding:14px 0;

margin-bottom:14px;

border-top:1px solid #f1f5f9;

border-bottom:1px solid #f1f5f9;

font-size:14px;

color:#374151;

}

/*======================================
BUTTONS
======================================*/

.request-actions{

display:flex;

gap:10px;

}

.request-actions a{

flex:1;

display:flex;

justify-content:center;

align-items:center;

padding:10px 14px;

border-radius:12px;

font-size:14px;

font-weight:600;

text-decoration:none;

transition:.25s;

}

.accept-btn{

background:#10b981;

color:#fff;

}

.accept-btn:hover{

background:#059669;

color:#fff;

}

.decline-btn{

background:#fff1f2;

color:#dc2626;

}

.decline-btn:hover{

background:#dc2626;

color:#fff;

}

/*======================================
EMPTY STATE
======================================*/

.empty-requests{

background:#fff;

border-radius:18px;

padding:70px 25px;

text-align:center;

box-shadow:var(--shadow);

}

.empty-icon{

font-size:60px;

margin-bottom:18px;

}

.find-partners-btn{

display:inline-flex;

align-items:center;

gap:8px;

margin-top:18px;

padding:12px 22px;

background:#2563eb;

color:#fff;

text-decoration:none;

border-radius:12px;

font-weight:600;

transition:.25s;

}

.find-partners-btn:hover{

background:#1d4ed8;

color:#fff;

}


/*==================================================
RESPONSIVE
==================================================*/

/*-------------------------
TABLETTE
-------------------------*/

@media (max-width:992px){

.requests-header{

flex-direction:column;

align-items:flex-start;

gap:16px;

}

.requests-header-right{

width:100%;

display:flex;

justify-content:flex-end;

}

.requests-grid{

grid-template-columns:
repeat(2,minmax(0,1fr));

gap:16px;

}

}

/*-------------------------
MOBILE
-------------------------*/

@media (max-width:768px){

.partner-requests-page{

padding:20px 0 35px;

}

.requests-header{

padding:18px;

border-radius:14px;

}

.requests-header h1{

font-size:24px;

}

.requests-header p{

font-size:13px;

}

.requests-header-right{

width:100%;

justify-content:center;

}

.requests-count{

width:100%;

justify-content:center;

}

/* Deux cartes par ligne */

.requests-grid{

grid-template-columns:repeat(2,minmax(0,1fr));

gap:12px;

}

.request-item{

padding:14px;

}

.request-top{

gap:10px;

}

.request-avatar img{

width:46px;

height:46px;

}

.request-avatar-placeholder{

width:46px;
height:46px;

font-size:15px;

}

.request-info h5{

font-size:14px;

}

.request-level{

font-size:11px;

}

.request-message{

font-size:12px;

padding:10px 0;

margin-bottom:10px;

}

.request-actions{

flex-direction:column;

gap:6px;

}

.request-actions a{

width:100%;

padding:8px;

font-size:12px;

}

}

/*-------------------------
PETITS MOBILES
-------------------------*/

@media (max-width:480px){

.requests-header h1{

font-size:22px;

}

.request-avatar img{

width:48px;

height:48px;

}

.request-avatar-placeholder{

width:48px;
height:48px;

font-size:15px;

}

.request-info h5{

font-size:15px;

}

.request-actions{

flex-direction:column;

}

.request-actions a{

width:100%;

}

}