/* ===============================
SUPPORT FLOATING BUTTON
=============================== */

#supportBtn{

position:fixed;
right:25px;
bottom:25px;
width:60px;
height:60px;
background:linear-gradient(135deg,#007bff,#0056b3);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 10px 25px rgba(0,0,0,0.3);
z-index:9999;
transition:0.3s;

}

#supportBtn:hover{

transform:scale(1.1);

}

#supportBtn img{

width:30px;
height:30px;

}


/* ===============================
SUPPORT POPUP BOX
=============================== */

#supportBox{

position:fixed;
right:25px;
bottom:100px;
width:350px;
background:#fff;
border-radius:10px;
box-shadow:0 20px 45px rgba(0,0,0,0.3);
display:none;
z-index:9999;
overflow:hidden;
font-family:Segoe UI, sans-serif;

}


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

.support-header{

background:linear-gradient(135deg,#007bff,#0056b3);
color:#fff;
padding:12px 15px;
font-size:15px;
font-weight:600;
display:flex;
justify-content:space-between;
align-items:center;

}

.support-header span{

cursor:pointer;
font-size:18px;

}


/* ===============================
TABS
=============================== */

.support-tabs{

display:flex;
border-bottom:1px solid #eee;
background:#fafafa;

}

.tab-btn{

flex:1;
padding:11px;
border:none;
background:#f5f5f5;
cursor:pointer;
font-size:13px;
transition:all 0.3s ease;

}

.tab-btn:hover{

background:#e8e8e8;

}


/* ACTIVE TAB DESIGN */

.tab-btn.active{

background:rgba(0,123,255,0.12);
color:#007bff;
font-weight:600;
border-bottom:2px solid #007bff;
box-shadow:none;

}

.tab-btn.active:after{

content:"";
position:absolute;
bottom:-1px;
left:0;
width:100%;
height:3px;
background:#28a745;

}


/* ===============================
TAB CONTENT
=============================== */

.support-tab{

padding:15px;

}


/* ===============================
FORM INPUTS
=============================== */

#supportForm input,
#supportForm textarea,
#checkStatusForm input{

width:100%;
padding:10px;
border:1px solid #ccc;
border-radius:5px;
margin-bottom:10px;
font-size:14px;
outline:none;
transition:0.2s;

}

#supportForm textarea{

resize:none;
height:90px;

}

#supportForm input:focus,
#supportForm textarea:focus,
#checkStatusForm input:focus{

border-color:#007bff;
box-shadow:0 0 5px rgba(0,123,255,0.3);

}


/* ===============================
FILE INPUT
=============================== */

#supportForm input[type=file]{

background:#f9f9f9;
border:1px dashed #ccc;
cursor:pointer;

}


/* ===============================
SUBMIT BUTTON
=============================== */

.submit-ticket{

width:100%;
background:#28a745;
color:#fff;
border:none;
padding:10px;
border-radius:5px;
cursor:pointer;
font-weight:500;
transition:0.2s;

}

.submit-ticket:hover{

background:#218838;

}


/* ===============================
CHECK STATUS BUTTON
=============================== */

.check-ticket{

width:100%;
background:#007bff;
color:#fff;
border:none;
padding:10px;
border-radius:5px;
cursor:pointer;
font-weight:500;
transition:0.2s;

}

.check-ticket:hover{

background:#0056b3;

}


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

.ticket-result{

background:#e8f5e9;
border:1px solid #c8e6c9;
padding:10px;
border-radius:6px;
margin-top:10px;
font-size:13px;
color:#2e7d32;

}


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

.ticket-error{

background:#ffeaea;
border:1px solid #ffcdd2;
padding:10px;
border-radius:6px;
margin-top:10px;
font-size:13px;
color:#c62828;

}


/* ===============================
STATUS RESULT
=============================== */

#statusResult{

margin-top:10px;

}


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

@media(max-width:480px){

#supportBox{

width:95%;
right:10px;
bottom:90px;

}

#supportBtn{

right:15px;
bottom:15px;

}

}