/* ==========================================================
   SENATUS LIVE — MODERN STYLE
   نفس الألوان الأصلية، تنسيق وشكل عصري جديد
   ========================================================== */

:root{
    --dark:#32353a;
    --dark-soft:#3d4046;
    --gold:#c18a32;
    --gold-dark:#a97527;
    --gold-light:#f3d39a;
    --cream:#fff7e6;
    --cream-soft:#fffaf0;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;
    --shadow-soft:0 8px 30px rgba(0,0,0,.10);
    --shadow-strong:0 15px 40px rgba(0,0,0,.18);
    --transition:.25s ease;
}

.live-page{
    direction:rtl;
    font-family:'Cairo','Tajawal','Amiri',sans-serif;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.page-live main.live-page{
    min-height:calc(100vh - 150px);
    position:relative;
    background:#32353a;
    padding:50px 0;
    overflow:hidden;
}

.page-live main.live-page::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg,transparent,#2ecc71,var(--gold),#2ecc71,transparent);
    background-size:200% 100%;
    animation:broadcastSweep 3.5s linear infinite;
    z-index:1;
}

@keyframes broadcastSweep{
    0%{background-position:200% 0;}
    100%{background-position:-200% 0;}
}

.live-page .container{
    width:min(1400px,95%);
    margin:0 auto;
    box-sizing:border-box;
    position:relative;
    z-index:2;
}

/* ===== الترويسة ===== */

.live-page .live-header{
    text-align:center;
    margin-bottom:35px;
}

.live-page .live-header h1{
    margin:0 0 12px;
    font-family:Arial, sans-serif;
    font-size:28px;
    font-weight:bold;
    color:#c18a32;
    letter-spacing:.5px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 

}

@keyframes titleGlow{
    0%,100%{ filter:drop-shadow(0 0 6px rgba(193,138,50,.25)); }
    50%{ filter:drop-shadow(0 0 16px rgba(193,138,50,.55)); }
}

@media (prefers-reduced-motion: reduce){
    .live-page .live-header h1{ animation:none; }
}

.live-page .live-header p{
    margin:0 auto;
    max-width:640px;
    font-size:16px;
    line-height:1.9;
    color:#e9e2d4;
    opacity:.9;
}

/* ===== شارة البث المباشر ===== */

.live-page .live-status{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:fit-content;
    margin:0 auto 35px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(6px);
    border:1px solid rgba(46,204,113,.35);
    color:#2ecc71;
    padding:12px 26px;
    border-radius:50px;
    font-weight:700;
    font-size:15px;
    box-shadow:0 0 25px rgba(46,204,113,.15);
}

.live-page .live-status::before{
    content:"";
    flex:none;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#2ecc71;
    box-shadow:0 0 6px rgba(46,204,113,.9);
    animation:dotPulseGreen 1.6s infinite;
}

@keyframes dotPulseGreen{
    0%{ box-shadow:0 0 6px rgba(46,204,113,.9), 0 0 0 0 rgba(46,204,113,.55); }
    70%{ box-shadow:0 0 6px rgba(46,204,113,.9), 0 0 0 9px rgba(46,204,113,0); }
    100%{ box-shadow:0 0 6px rgba(46,204,113,.9), 0 0 0 0 rgba(46,204,113,0); }
}

@media (prefers-reduced-motion: reduce){
    .live-page .live-status::before{
        animation:none;
    }
}

/* ===== أعمدة الطلبات ===== */

.live-board{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-areas:
        ".      answering  .        "
        "waiting answered  rejected ";
    gap:22px;
    margin:35px 0 45px;
}

.live-column.waiting{ grid-area:waiting; }
.live-column.answering{ grid-area:answering; }
.live-column.answered{ grid-area:answered; }
.live-column.rejected{ grid-area:rejected; }

.live-column{
    border-radius:var(--radius-lg);
    padding:22px;
    box-shadow:var(--shadow-soft);
    transition:transform var(--transition), box-shadow var(--transition);
}

.live-column:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-strong);
}

.live-column h3{
    margin:0 0 16px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(0,0,0,.12);
    text-align:center;
    color:var(--dark);
    font-size:17px;
    font-weight:700;
}

.request-item{
    background:rgba(255,255,255,.55);
    padding:11px 12px;
    margin-bottom:10px;
    border-radius:var(--radius-sm);
    text-align:center;
    font-weight:600;
    color:var(--dark);
    box-shadow:0 3px 10px rgba(0,0,0,.05);
    transition:transform var(--transition);
}

.request-item:hover{
    transform:translateX(-3px);
}

.request-item.empty{
    color:#767676;
    font-weight:500;
    box-shadow:none;
}

/* ===== في الانتظار — رمادي شفاف ===== */

.live-column.waiting{
    background:rgba(140,140,140,.16);
    backdrop-filter:blur(6px);
    border:1px solid rgba(120,120,120,.30);
}

.live-column.waiting h3{
    color:#fff7e6;
}

.live-column.waiting .request-item{
    border-right:4px solid rgba(120,120,120,.55);
}

/* ===== يتم الرد حاليا — أخضر شفاف + توهج ===== */

.live-column.answering{
    position:relative;
    background:rgba(46,204,113,.16);
    backdrop-filter:blur(6px);
    border:1px solid rgba(46,204,113,.35);
    box-shadow:0 0 0 rgba(46,204,113,0);
    animation:answeringGlow 2.4s ease-in-out infinite;
}

.live-column.answering h3{
    color:#fff7e6;
    border-bottom-color:rgba(30,158,87,.30);
}

.live-column.answering h3::before{
    content:"";
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#2ecc71;
    margin-left:8px;
    vertical-align:middle;
    animation:dotPulseGreen 1.4s infinite;
}

.live-column.answering .request-item{
    border-right:4px solid #2ecc71;
    animation:answeringItemFade .6s ease;
}

@keyframes answeringGlow{
    0%,100%{
        box-shadow:0 8px 30px rgba(46,204,113,.10), 0 0 0 rgba(46,204,113,0);
    }
    50%{
        box-shadow:0 8px 34px rgba(46,204,113,.18), 0 0 22px rgba(46,204,113,.20);
    }
}

@keyframes answeringItemFade{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
}

@media (prefers-reduced-motion: reduce){
    .live-column.answering,
    .live-status::before,
    .live-column.answering h3::before{
        animation:none;
    }
}

/* ===== تمت الإجابة — أخضر أغمق وأقل شفافية ===== */

.live-column.answered{
    background:rgba(30,158,87,.42);
    border:1px solid rgba(30,158,87,.55);
}

.live-column.answered h3{
    color:#fff7e6;
    border-bottom-color:rgba(15,92,52,.30);
}

.live-column.answered .request-item{
    border-right:4px solid #1e9e57;
    color:#12331f;
}

/* ===== مرفوضة — أحمر شفاف ===== */

.live-column.rejected{
    background:rgba(229,57,53,.16);
    backdrop-filter:blur(6px);
    border:1px solid rgba(229,57,53,.32);
}

.live-column.rejected h3{
    color:#fff7e6;
    border-bottom-color:rgba(198,40,40,.25);
}

.live-column.rejected .request-item{
    border-right:4px solid #e53935;
}

/* ===== البطاقات ===== */

.live-page .card{
    background:var(--cream-soft);
    padding:38px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-strong);
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.5);
}

.live-page h2{
    text-align:center;
    color:var(--gold-dark);
    margin-bottom:28px;
    font-size:22px;
    font-weight:800;
}

/* ===== الفورم ===== */

.live-page label{
    display:block;
    margin-bottom:8px;
    font-weight:700;
    color:var(--dark);
    font-size:14.5px;
}

.live-page input[type=text],
.live-page textarea{
    width:100%;
    box-sizing:border-box;
    padding:14px 16px;
    border:1.5px solid #e2dccf;
    border-radius:var(--radius-md);
    background:#fff;
    font-size:15px;
    font-family:inherit;
    transition:border-color var(--transition), box-shadow var(--transition);
}

.live-page textarea{
    min-height:160px;
    resize:vertical;
}

.live-page input[type=text]:focus,
.live-page textarea:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(193,138,50,.15);
}

.live-page input[type=file]{
    width:100%;
    box-sizing:border-box;
    padding:14px;
    border:2px dashed rgba(193,138,50,.5);
    border-radius:var(--radius-md);
    background:#fffdf8;
    cursor:pointer;
    transition:border-color var(--transition), background var(--transition);
}

.live-page input[type=file]:hover{
    border-color:var(--gold);
    background:#fff6e9;
}

.live-page button{
    width:100%;
    padding:16px;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    color:var(--cream);
    border:none;
    border-radius:var(--radius-md);
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(193,138,50,.35);
    transition:transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.live-page button:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(193,138,50,.45);
    filter:brightness(1.05);
}

.live-page button:active{
    transform:translateY(0);
}

.live-page .note{
    margin-top:26px;
    padding:18px 20px;
    border-right:4px solid var(--gold);
    background:#faf7f0;
    color:#5b5b5b;
    border-radius:var(--radius-sm);
    line-height:1.9;
    font-size:14.5px;
}

/* ===== الحالة المغلقة ===== */

.live-page .closed{
    background:var(--cream-soft);
    padding:55px 40px;
    border-radius:var(--radius-lg);
    text-align:center;
    box-shadow:var(--shadow-strong);
    border:1px solid rgba(255,255,255,.5);
}

.live-page .closed h1{
    color:var(--gold-dark);
    margin-bottom:20px;
    font-size:28px;
}

.live-page .closed p{
    color:#5b5b5b;
    line-height:2;
    font-size:16.5px;
    max-width:600px;
    margin:0 auto 16px;
}

.live-page .closed a{
    display:inline-block;
    margin-top:18px;
    padding:13px 30px;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    color:var(--cream);
    text-decoration:none;
    border-radius:50px;
    font-weight:700;
    box-shadow:0 8px 22px rgba(193,138,50,.35);
    transition:transform var(--transition), box-shadow var(--transition);
}

.live-page .closed a:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(193,138,50,.45);
}

/* ===== رسائل الحالة ===== */

.live-page .success{
    background:#eef8f1;
    border:1px solid #7bc68d;
    color:#1d6f37;
    padding:18px;
    border-radius:var(--radius-sm);
}

.live-page .error{
    background:#fff2f2;
    border:1px solid #ea9090;
    color:#b00000;
    padding:18px;
    border-radius:var(--radius-sm);
}

/* ===== تجاوب الشاشات ===== */

@media(max-width:1000px){
    .live-board{
        grid-template-columns:repeat(2,1fr);
        grid-template-areas:
            "answering answering"
            "waiting   answered "
            "rejected  rejected ";
    }
}

@media(max-width:700px){
    .live-board{
        grid-template-columns:1fr;
        grid-template-areas:
            "answering"
            "waiting"
            "answered"
            "rejected";
    }

    .live-page .container{
        width:95%;
        margin:0 auto;
    }

    .live-page .card{
        padding:24px;
    }

    .live-page .live-header h1{
        font-size:27px;
    }

    .live-page .live-header p{
        font-size:14.5px;
    }

    .live-page .closed{
        padding:30px 22px;
    }

    .live-page button{
        font-size:16px;
    }
}

.answered-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:35px;
    height:35px;

    background:#28a745;
    color:white;

    border-radius:50%;

    font-size:20px;
    font-weight:bold;

    margin:0 5px;

    box-shadow:0 4px 12px rgba(40,167,69,.35);
}

.spinner{
    display:inline-block;
    width:18px;
    height:18px;

    border:3px solid rgba(255,255,255,.35);
    border-top:3px solid #fff;

    border-radius:50%;

    animation:spin .8s linear infinite;

    vertical-align:middle;
    margin-left:8px;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

.delete-btn{
    background:#d9534f;
    color:#fff;
}

.delete-btn:hover{
    background:#c9302c;
}