/* =========================
   AJOOR BANK ACCOUNTS PAGE
========================= */

.ajoor-bank-page{
direction:rtl;
max-width:1400px;
margin:auto;
padding:20px;
font-family:inherit;
}

/* Header */

.ajoor-header{
background:#fff;
padding:35px;
border-radius:24px;
margin-bottom:25px;
text-align:center;
box-shadow:0 10px 35px rgba(0,0,0,.05);
position:relative;
overflow:hidden;
}

.ajoor-header:before{
content:"";
position:absolute;
top:0;
right:0;
width:100%;
height:6px;
background:linear-gradient(
90deg,
#0c6b79,
#58b92d,
#85d131
);
}

.ajoor-header h1{
margin:0 0 15px;
font-size:34px;
font-weight:800;
color:#0c6b79;
}

.ajoor-header p{
margin:0;
font-size:15px;
line-height:2;
color:#666;
}

/* Note */

.bank-note{
background:#f6fbf7;
border-right:5px solid #58b92d;
padding:18px;
border-radius:16px;
margin-bottom:30px;
line-height:2;
color:#444;
}

/* Grid */

.accounts-grid{
display:grid;
grid-template-columns:
repeat(auto-fill,minmax(330px,1fr));
gap:24px;
}

/* Card */

.account-card{

background:#fff;

border-radius:24px;

padding:22px;

position:relative;

overflow:hidden;

box-shadow:
0 10px 30px rgba(0,0,0,.06);

transition:.3s;

}

.account-card:hover{

transform:translateY(-5px);

box-shadow:
0 18px 40px rgba(0,0,0,.08);

}

.account-card:before{

content:"";

position:absolute;

top:0;

right:0;

width:100%;

height:5px;

background:
linear-gradient(
90deg,
#0c6b79,
#58b92d,
#85d131
);

}

/* Project Name */

.account-card h3{

margin:0 0 18px;

text-align:center;

font-size:22px;

font-weight:800;

color:#0c6b79;

}

/* Bank Logo */

.bank-chip{

display:flex;

justify-content:center;

margin-bottom:20px;

}

.bank-chip img{

width:70px;

height:70px;

object-fit:contain;

padding:10px;

background:#fff;

border-radius:18px;

box-shadow:
0 4px 15px rgba(0,0,0,.08);

}

/* Labels */

.field-title{

font-size:14px;

font-weight:800;

color:#0c6b79;

margin-bottom:8px;

margin-top:14px;

}

/* Copy Box */

.copy-box{

display:flex;

align-items:center;

justify-content:space-between;

gap:10px;

padding:12px;

background:#f9fbfb;

border:1px solid #eef2f3;

border-radius:14px;

margin-bottom:10px;

}

.copy-box span{

flex:1;

direction:ltr;

text-align:left;

font-size:14px;

font-weight:800;

color:#333;

word-break:break-all;

}

/* Copy Button */

.copy-box button{

border:none;

cursor:pointer;

padding:10px 16px;

border-radius:10px;

font-size:13px;

font-weight:700;

color:#fff;

background:
linear-gradient(
135deg,
#58b92d,
#85d131
);

transition:.3s;

}

.copy-box button:hover{

transform:scale(1.05);

}

/* Bottom Buttons */

.bottom-actions{

margin-top:40px;

display:flex;

flex-wrap:wrap;

gap:15px;

justify-content:center;

}

.main-action-btn{

border:none;

cursor:pointer;

padding:16px 28px;

border-radius:14px;

font-size:15px;

font-weight:800;

color:#fff;

background:
linear-gradient(
135deg,
#25D366,
#128C7E
);

transition:.3s;

}

.main-action-btn:hover{

transform:translateY(-3px);

}

.secondary-btn{

background:
linear-gradient(
135deg,
#0c6b79,
#127f8f
);

}

/* Success Toast */

#ajoor-toast{

position:fixed;

bottom:30px;

left:50%;

transform:translateX(-50%);

background:#0c6b79;

color:#fff;

padding:14px 24px;

border-radius:14px;

font-size:14px;

font-weight:700;

z-index:999999;

opacity:0;

visibility:hidden;

transition:.3s;

box-shadow:
0 10px 30px rgba(0,0,0,.2);

}

#ajoor-toast.show{

opacity:1;

visibility:visible;

}

/* Mobile */

@media(max-width:768px){

.ajoor-bank-page{
padding:12px;
}

.ajoor-header{
padding:22px;
}

.ajoor-header h1{
font-size:26px;
}

.accounts-grid{
grid-template-columns:1fr;
}

.copy-box{
flex-direction:column;
align-items:stretch;
}

.copy-box button{
width:100%;
}

.main-action-btn{
width:100%;
}

.bank-chip img{
width:60px;
height:60px;
}

}