/* ===== PANEL LAYOUT ===== */

.panel-layout{
display:flex;
min-height:100vh;
background:#f5f5f5;
}

/* ===== SIDEBAR ===== */

.sidebar{
width:280px;
background:#f6f3ea;
padding:20px;
overflow-y:auto;
border-left:1px solid #e5e5e5;
}

.balance-box{
background:linear-gradient(180deg,#000,#333);
color:#fff;
padding:18px;
border-radius:14px;
text-align:center;
margin-bottom:20px;
}

.balance-title{
font-size:14px;
color:#ffe100;
margin-bottom:5px;
}

.balance-amount{
font-size:22px;
font-weight:bold;
}

.sidebar-section{
background:#efe9dc;
padding:15px;
border-radius:14px;
margin-bottom:20px;
}

.sidebar-title{
font-weight:bold;
margin-bottom:12px;
font-size:15px;
}

.sidebar a{
display:flex;
align-items:center;
gap:8px;
padding:10px 12px;
border-radius:8px;
text-decoration:none;
color:#333;
margin-bottom:6px;
font-size:14px;
}

.sidebar a:hover{
background:#ffe100;
}

/* ===== MAIN CONTENT ===== */

.main-content{
flex:1;
padding:30px;
}

/* ===== RTL ===== */

.rtl .sidebar{
order:2;
}

.rtl .main-content{
order:1;
}

/* ===== MOBILE ===== */

@media(max-width:768px){

.panel-layout{
flex-direction:row;
}


.main-content{
padding:15px;
}

}
/* ===== RTL / LTR SIDEBAR ===== */

.ltr .sidebar{
order:1;
}

.ltr .main-content{
order:2;
}

.rtl .sidebar{
order:2;
}

.rtl .main-content{
order:1;
}

/* sidebar position */

.ltr .sidebar{
border-right:1px solid #ddd;
border-left:none;
}

.rtl .sidebar{
border-left:1px solid #ddd;
border-right:none;
}
/* LANGUAGE SWITCH */

.lang-switch{
display:flex;
justify-content:flex-end;
gap:6px;
margin-bottom:10px;
}

.lang-btn{
background:#eee;
padding:6px 10px;
border-radius:6px;
font-size:12px;
text-decoration:none;
color:#333;
font-weight:bold;
}

.lang-btn.active{
background:#ffd800;
color:#000;
}
/* HIDE OLD NAVBAR */

.navbar{
display:none !important;
}
/* MOBILE TOPBAR */

.mobile-topbar{
display:none;
background:#ffffff;
padding:12px;
border-bottom:1px solid #ddd;
align-items:center;
}

.menu-toggle{
background:#ffd800;
border:none;
font-size:20px;
padding:6px 12px;
border-radius:6px;
}

.mobile-title{
font-weight:bold;
}

/* MOBILE */

@media(max-width:768px){

.mobile-topbar{
display:flex;
}

/* SIDEBAR */

.sidebar{
position:fixed;
top:0;
width:280px;
height:100%;
z-index:999;
transition:0.3s;
}

/* English */

.ltr .sidebar{
left:-280px;
}

.ltr .sidebar.active{
left:0;
}

/* Arabic */

.rtl .sidebar{
right:-280px;
}

.rtl .sidebar.active{
right:0;
}

.panel-layout{
flex-direction:column;
}

.main-content{
padding:15px;
}

}

/* MOBILE TOPBAR RTL / LTR */

.ltr .mobile-topbar{
justify-content:flex-start;
}

.rtl .mobile-topbar{
justify-content:flex-end;
}

.rtl .mobile-title{
margin-right:10px;
}

.ltr .mobile-title{
margin-left:10px;
}
/* SOCIAL NETWORK GRID */

.social-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-bottom:25px;
}

.social-btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:16px;
background:#f1f2f6;
border-radius:12px;
text-decoration:none;
color:#4a5d73;
font-weight:600;
transition:0.25s;
}

.social-btn i{
font-size:18px;
}

.social-btn:hover{
background:#ffffff;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
transform:translateY(-2px);
}
/* SOCIAL NETWORK COLORS */

.social-btn{
background:#f1f2f6;
border-radius:12px;
padding:14px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
font-weight:600;
transition:0.3s;
}

/* Instagram */
.social-btn:nth-child(1){
color:#E1306C;
}
.social-btn:nth-child(1):hover{
background:#E1306C;
color:#fff;
}

/* Facebook */
.social-btn:nth-child(2){
color:#1877F2;
}
.social-btn:nth-child(2):hover{
background:#1877F2;
color:#fff;
}

/* Youtube */
.social-btn:nth-child(3){
color:#FF0000;
}
.social-btn:nth-child(3):hover{
background:#FF0000;
color:#fff;
}

/* Twitter */
.social-btn:nth-child(4){
color:#1DA1F2;
}
.social-btn:nth-child(4):hover{
background:#1DA1F2;
color:#fff;
}

/* Spotify */
.social-btn:nth-child(5){
color:#1DB954;
}
.social-btn:nth-child(5):hover{
background:#1DB954;
color:#fff;
}

/* TikTok */
.social-btn:nth-child(6){
color:#000;
}
.social-btn:nth-child(6):hover{
background:#000;
color:#fff;
}

/* Linkedin */
.social-btn:nth-child(7){
color:#0077B5;
}
.social-btn:nth-child(7):hover{
background:#0077B5;
color:#fff;
}

/* Google */
.social-btn:nth-child(8){
color:#EA4335;
}
.social-btn:nth-child(8):hover{
background:#EA4335;
color:#fff;
}

/* Telegram */
.social-btn:nth-child(9){
color:#229ED9;
}
.social-btn:nth-child(9):hover{
background:#229ED9;
color:#fff;
}

/* Discord */
.social-btn:nth-child(10){
color:#5865F2;
}
.social-btn:nth-child(10):hover{
background:#5865F2;
color:#fff;
}

/* Snapchat */
.social-btn:nth-child(11){
color:#FFFC00;
}
.social-btn:nth-child(11):hover{
background:#FFFC00;
color:#000;
}

/* Twitch */
.social-btn:nth-child(12){
color:#9146FF;
}
.social-btn:nth-child(12):hover{
background:#9146FF;
color:#fff;
}
.sidebar-logout{
margin-top:20px;
padding-top:15px;
border-top:1px solid #ddd;
}

.logout-btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:12px;
background:#ff4d4d;
color:#fff;
border-radius:10px;
text-decoration:none;
font-weight:bold;
transition:0.2s;
}

.logout-btn:hover{
background:#e60000;
transform:scale(1.03);
}
@media(max-width:768px){

.social-grid{
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.social-btn{
padding:12px;
font-size:13px;
}

}
/* PROFESSIONAL DARK CARDS */

.dashboard-cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:25px;
}

.dash-card{
background:#0f0f0f;
color:#fff;
padding:20px;
border-radius:14px;
display:flex;
align-items:center;
gap:15px;
transition:0.3s;
box-shadow:0 8px 25px rgba(0,0,0,0.25);
}

.dash-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

/* ICON */

.icon-box{
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:rgba(255,255,255,0.08);
font-size:22px;
}

/* TEXT */

.card-info span{
font-size:13px;
color:#aaa;
display:block;
}

.card-info b{
font-size:18px;
font-weight:bold;
color:#fff;
}

/* MOBILE */

@media(max-width:768px){

.dashboard-cards{
grid-template-columns:repeat(2,1fr);
}

}
.dash-card{
text-decoration:none;
color:inherit;
}
.dash-card{
display:flex;
align-items:center;
gap:15px;
background:#0f0f0f;
padding:20px;
border-radius:14px;
color:#fff;
text-decoration:none;
cursor:pointer;
transition:0.25s;
}

.dash-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(0,0,0,0.3);
}
/* TIGER SIDEBAR */

.sidebar{
width:280px;
background:#0b0b0f;
background-image:url("https://images.unsplash.com/photo-1546182990-dffeafbe841d");
background-size:cover;
background-position:center;
color:#fff;
padding:20px;
position:relative;
overflow-y:auto;
}

/* طبقة شفافة فوق الصورة */

.sidebar::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
z-index:0;
}

.sidebar *{
position:relative;
z-index:1;
}
.sidebar a{
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius:10px;
text-decoration:none;
color:#ddd;
margin-bottom:8px;
font-size:14px;
transition:0.25s;
}

.sidebar a i{
width:20px;
text-align:center;
}

.sidebar a:hover{
background:#6a5cff;
color:#fff;
transform:translateX(4px);
}
.sidebar-title{
color:#333 !important;
font-weight:bold;
}

.sidebar a{
color:#333 !important;
}

.sidebar-section{
background:#e9e3d7;
}

.sidebar a i{
color:#333;
}
.sidebar-title{
color:#333 !important;
font-weight:bold;
}

.sidebar a{
color:#333 !important;
}

.sidebar-section{
background:#e9e3d7;
}

.sidebar a i{
color:#333;
}
.sidebar-section{
background:linear-gradient(145deg,#fff6cc,#ffe680);
border-radius:16px;
padding:15px;
margin-bottom:20px;
box-shadow:0 0 10px rgba(255,220,0,0.25);
}

.sidebar-title{
color:#000;
font-weight:700;
margin-bottom:12px;
}

.sidebar a{
color:#111 !important;
font-weight:500;
}

.sidebar a:hover{
background:rgba(255,215,0,0.35);
border-radius:8px;
}
/* ORDER PAGE LAYOUT */

.order-layout{
display:flex;
gap:25px;
align-items:flex-start;
}

/* ORDER FORM */

.order-form{
flex:1;
background:#ffffff;
padding:25px;
border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* SERVICE DESCRIPTION */

.service-description{
width:420px;
background:#ffffff;
padding:25px;
border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* RTL FIX */

.rtl .order-layout{
flex-direction:row-reverse;
}

/* MOBILE */

@media(max-width:900px){

.order-layout{
flex-direction:column;
}

.service-description{
width:100%;
}

}
/* MOBILE FIX ORDER FORM */

@media (max-width:768px){

.order-form{
width:100%;
}

.service-description{
width:100%;
margin-top:15px;
}


}
@media (max-width:768px){

.sidebar{
position:fixed;
top:0;
height:100%;
z-index:9999;
}

.ltr .sidebar{
left:-280px;
}

.ltr .sidebar.active{
left:0;
}

.rtl .sidebar{
right:-280px;
}

.rtl .sidebar.active{
right:0;
}

}