/* ===== Premium feature rendering (added by merged installer) =====
   This file ONLY adds premium-specific rules (borders, glows, name bg).
   Layout rules come from main.css (copied from well-known reference). */

/* "Joined the room" system message — a glassy, translucent panel that
   hugs just the message line itself (not the whole row), with the name
   in its own (member-chosen) color right next to the rank icon, and the
   "joined the room" wording + rank title in red. Scoped to
   .sys_log_join only, so kick/ban/mute/clear messages keep their normal
   system-message look. */
.sys_join_glass {
    display: inline-block;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 6px;
    padding: 2px 8px;
}
.sys_log.sys_log_join .chat_system {
    color: #e0233d;
    font-weight: 600;
}
.sys_log.sys_log_join .sysname {
    font-weight: 700;
}
/* [FIX] ".chat_system{color:#e0233d}" above beats the member's own
   ".bcolor1..20" name-color class on specificity (3 classes vs 1),
   so every joining member's name was showing up red instead of their
   chosen color. Give the plain (uncolored) name a normal dark color,
   then re-assert each bcolorN value with matching specificity so a
   member's chosen color still wins — only the surrounding "joined the
   room" wording stays red. */
.sys_log.sys_log_join .sysname .username {
    color: #222;
}
.sys_log.sys_log_join .sysname .username.bcolor1 { color: #ff3333; }
.sys_log.sys_log_join .sysname .username.bcolor2 { color: #ff6633; }
.sys_log.sys_log_join .sysname .username.bcolor3 { color: #ff9933; }
.sys_log.sys_log_join .sysname .username.bcolor4 { color: #ffcc33; }
.sys_log.sys_log_join .sysname .username.bcolor5 { color: #cccc00; }
.sys_log.sys_log_join .sysname .username.bcolor6 { color: #99cc00; }
.sys_log.sys_log_join .sysname .username.bcolor7 { color: #59b300; }
.sys_log.sys_log_join .sysname .username.bcolor8 { color: #829356; }
.sys_log.sys_log_join .sysname .username.bcolor9 { color: #008000; }
.sys_log.sys_log_join .sysname .username.bcolor10 { color: #00e639; }
.sys_log.sys_log_join .sysname .username.bcolor11 { color: #00e673; }
.sys_log.sys_log_join .sysname .username.bcolor12 { color: #00e6ac; }
.sys_log.sys_log_join .sysname .username.bcolor13 { color: #00cccc; }
.sys_log.sys_log_join .sysname .username.bcolor14 { color: #03add8; }
.sys_log.sys_log_join .sysname .username.bcolor15 { color: #3366ff; }
.sys_log.sys_log_join .sysname .username.bcolor16 { color: #107896; }
.sys_log.sys_log_join .sysname .username.bcolor17 { color: #004d99; }
.sys_log.sys_log_join .sysname .username.bcolor18 { color: #6633ff; }
.sys_log.sys_log_join .sysname .username.bcolor19 { color: #9933ff; }
.sys_log.sys_log_join .sysname .username.bcolor20 { color: #cc33ff; }
.sys_log.sys_log_join .chat_rank {
    vertical-align: middle;
    margin: 0 2px;
}

/* [FIX - SMALLER AVATAR] صورة العضو في رسايل الغرفة كانت 40px، صغّرناها
   شوية لـ32px (والحالات التانية - البرواز الملون/الإطار المتحرك -
   اتصغرت بنفس النسبة) عشان تاخد مساحة أقل جنب الاسم/الكلام. */
.chat_log .cavatar.avav {
    height: 32px !important;
    width: 32px !important;
}

/* Chat avatar: gradient border wrapper — sized to match .cavatar */
.chat_log .grad_small_border {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.chat_log .grad_small_border > img {
    height: 18px !important;
    width: 18px !important;
    border-radius: 50%;
    object-fit: cover;
}

/* Chat avatar: decorative border-image overlay — centered on avatar
   The column that holds the avatar was fixed at 23px (custom.css), which is
   narrower than the avatar itself (40px) or the framed avatar (33-39px), so
   the avatar/frame overflowed the column and sat on top of the name/text
   next to it. Widen the column and let it center its content instead. */
.chat_log .chat_avatar {
    width: 34px !important;
    text-align: center;
    padding: 0 !important;
}

/* Full animated frame ("border" field) inside chat messages.
   Old rule used fixed pixel offsets (ch_fr_av / ch_fr_bg) tuned for one
   frame image only, so it didn't line up for frames of a different size.
   Center everything with transforms so any frame auto-fits the avatar. */
.chat_log .chat_frame_avatar {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 32px !important;
    height: 32px !important;
}
.chat_log .chat_frame_avatar_inner2 {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 24px !important;
    height: 24px !important;
    border-radius: 50%;
    overflow: hidden;
}
.chat_log .chat_frame_avatar_inner2 > img.ch_fr_av {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.chat_log .chat_frame_avatar > img.ch_fr_bg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 38px !important;
    height: 38px !important;
    max-width: none;
    pointer-events: none;
}

/* Room messages: put the name and the message text on the same line
   instead of the name on one row and the message on the row below it. */
.chat_log .chat_line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 2px;
}
.chat_log .chat_line > .cname {
    flex: 0 0 auto;
}
.chat_log .chat_line > .log_content {
    flex: 1 1 200px;
    min-width: 0;
}
.chat_log .chat_line .chat_message.tpad5,
.chat_log .chat_line .chat_message.tpad3 {
    padding-top: 0 !important;
}

/* [FIX - CHAT ROW ACTIONS] شيل التاريخ/الوقت اللي كان قاعد جنب الكلام في
   رسايل الغرفة، ونقل زر التلات نقط (اللي كان بيقع تحت الكلام وقت ما
   السطر يلف) لركن الكارت بشكل ثابت، وحولنا شكله لعمودي (ellipsis-v) بدل
   الأفقي. inset-inline-end بدل right/left عشان يفضل صح في وضعي
   RTL/LTR الاتنين زي باقي الملف. */
.chat_log .chat_line > .cdate {
    display: none !important;
}
li.chat_log {
    position: relative;
}
.chat_log .chat_line > .logs_menu {
    position: absolute;
    top: 2px;
    inset-inline-end: 4px;
    display: block;
    width: auto;
    padding: 4px 6px;
    font-size: 13px;
}

/* Name background / glow wrapper in chat */

/* Add spacing between the avatar/frame and the name+message next to it.
   Symmetric padding is used on purpose: this stylesheet loads regardless
   of whether the Arabic (RTL) stylesheet is active, and the "near" side
   swaps between the two modes, so padding both sides keeps the gap correct
   either way.
   [FIX] كانت 8px، وده مع الفراغ الطبيعي حوالين الأفاتار (تمركزه جوه عمود
   أعرض منه) كان بيحس إنها مسافة كبيرة قوي بين الصورة وأيقونة الرتبة/الاسم.
   قللناها لـ4px. */
.chat_log .my_text {
    padding: 0 4px !important;
}
.cname > span[class*="prograd"],
.cname > span[class*="shgrad"] {
    display: inline-block;
    border-radius: 6px;
    padding: 0px 6px;
    margin: 0 2px;
    line-height: 1.35;
}
/* [FIX] الكلاس ده كان بيفرض color:#fff !important على أي اسم جوه خلفية/توهج
   للاسم، فكان بيلغي لون العضو الحقيقي (bcolor/bgrad/bneon) في رسايل الغرف.
   الاستثناء القديم كان بيحل المشكلة بس للمعة (ArabicN)، مش للألوان العادية.
   شيلنا الفرض خالص وسيبنا بس text-shadow خفيف يساعد على وضوح أي لون فوق أي
   خلفية من غير ما يلغي لون العضو؛ كلاسات اللمعة (Arabic*) أصلاً بتحط
   color:transparent بنفسها في colors.css فمش محتاجة استثناء هنا. */
.cname > span[class*="prograd"] > .username,
.cname > span[class*="shgrad"] > .username {
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* Icon labels (top quick-bar + bottom footer bar) — bigger and bold */
.btn_label {
    font-size: 11px !important;
    font-weight: 700 !important;
}
@media (max-width: 480px) {
    .btn_label {
        font-size: 10px !important;
    }
}

/* Locked profile placeholder (profile.php) */
.profile_locked_box {
    padding: 60px 20px;
}
.profile_locked_icon {
    font-size: 46px;
    opacity: .55;
}

/* Profile modal (edit_profile.php): avatar wrap with premium border */
#proav .grad_bigger_border {
    width: 110px !important;
    height: 110px !important;
    border-radius: 50%;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin: 0 auto;
}
#proav .grad_bigger_border > div.avatar_spin,
#proav .grad_bigger_border .avatar_spin {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}
#proav .grad_bigger_border .avatar_spin > img.avatar_profile {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Profile modal: border-image overlay. This same #proav id (with the
   .profile_avatar class) wraps the avatar in profile.php, edit_profile.php
   AND admin_user.php, so this one rule already auto-centers the frame
   image on the avatar everywhere the animated border can appear — no
   separate rule is needed per page.
   [FIX - PROFILE FRAME RATIO] كان الفارق بين الصورة (100px) والبرواز
   (116px) صغير جدًا (نسبة 1.16) مقارنة بقايمة المتصلين (36→48 = 1.33)
   ورسايل الغرفة (24→38 = 1.58) اللي شغالة صح فعليًا بنفس صور البرواز دي
   بالظبط. البرواز في البروفايل كان بيطلع "مكركب" جوه الصورة بدل ما يحوطها
   من بره. رفعنا نسبة البروفايل لنفس المدى الشغال (~1.45) عشان يبقى الإطار
   محيط بحواف الصورة صح زي باقي الأماكن. */
#proav .profile_border_wrap {
    position: relative;
    display: inline-block;
    width: 145px;
    height: 145px;
}
#proav .profile_border_wrap > img.avatar_profile {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none !important; /* [FIX] colors.css كان بيحط بوردر أبيض 2px هنا فوق الصورة، فكان بيكبّرها شوية عن اللي البرواز متظبط عليه */
    box-sizing: content-box;
    z-index: 1;
}
#proav .profile_border_wrap > img.profile_border_overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 145px;
    height: 145px;
    max-width: none;
    object-fit: contain; /* [FIX] كان بيتمطط لمربع 116x116 فيغيّر أبعاد الصورة الأصلية (مش كل صور البرواز مربعة)؛ contain بيحافظ على نسبة الصورة الأصلية وهو برضه بيتمركز تلقائي */
    pointer-events: none;
    z-index: 2;
}

/* Normal avatar (no border) */
#proav .avatar_spin {
    border-radius: 50% !important;
    overflow: hidden !important;
    width: 100px !important;
    height: 100px !important;
}
#proav .avatar_spin > img.avatar_profile {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block;
}

/* Profile name background / glow */
.cover_text .pdetails .pdetails_text.pro_name > span[class*="prograd"],
.cover_text .pdetails .pdetails_text.pro_name > span[class*="shgrad"] {
    display: inline-block;
    border-radius: 12px;
    padding: 3px 12px;
    margin: 2px 0;
    line-height: 1.35;
}

/* [NEW - POLISH] توهج الاسم: التوهج الملون نفسه (border + box-shadow بـ!important)
   جاي من كلاسات shgrad* في colors.css ومش بنلمسه هنا خالص عشان الألوان تفضل
   زي ما المستخدم اختارها. اللي بنضيفه هنا بس: radius ناعم 12px موحد
   (مش موجود أصلاً في قواعد shgrad فمفيش أي تعارض) عشان الحواف تبان مرتبة
   حول التوهج، في الشات وفي البروفايل على السواء. */
.cname > span[class*="shgrad"],
.cover_text .pdetails .pdetails_text.pro_name > span[class*="shgrad"] {
    border-radius: 12px;
}

/* User list (lobby) — keep premium border compact */
.user_item .grad_bigger_border {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    overflow: hidden;
    padding: 2px;
}
.user_item .grad_bigger_border > img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    object-fit: cover;
}

/* User list (lobby) — full animated frame ("border" field). Old rule used
   fixed, asymmetric offsets (ul_fr_av / ul_fr_bg) tuned for one frame image,
   so the ring didn't line up on the photo. Center with transforms instead
   so any frame image auto-fits, the same fix applied to chat messages. */
/* [PERF-FIX - PHASE 1] الصندوق ده table-cell جوه كارت العضو في قايمة
   المتصلين؛ تكبيره لـ 56×56 كان بيكبّر كارت العضو نفسه لكل عضو حاطط
   إطار. رجّعناه لنفس حجم الأفاتار العادي (48×48) وسبنا overflow:visible
   عشان صورة الإطار تقدر تفيض برّه الصندوق من غير ما تأثر على حجم الكارت. */
.user_item_frame_avatar_new {
    width: 48px !important;
    height: 48px !important;
    overflow: visible;
}
.user_item_frame_avatar_new > img.ul_fr_av {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}
.user_item_frame_avatar_new > img.ul_fr_bg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 48px !important;
    height: 48px !important;
    max-width: none;
    pointer-events: none;
    z-index: 2;
}
.user_item_frame_avatar_new .list_status {
    left: 3px !important;
    bottom: 3px !important;
    z-index: 3;
}

/* Online users list header ("متصل N") — centered, green background */
#container_user .user_count {
    background: #2e9e4f;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    margin-bottom: 5px;
}
#container_user .user_count .ucount.theme_btn {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

/* Online users list — reduce the empty white margin on both sides */
#container_user {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Online users list — member cards.
   custom.css forces .user_item{border-radius:0}, and this file used to add
   a thin divider line under each row so the list read as one continuous
   strip. Now that members can paint their own card with a color/gradient
   (card_color, solid or "customcolor") or an uploaded photo
   (cardColorAttrs() in system/function.php), a flat divider look no longer
   fits — every card needs the same soft rounded corners, whether it is
   plain, a color/gradient, or a background photo, so the shape stays
   consistent no matter what the member picked. Background-color and
   background-image both clip to border-radius by default, so no
   overflow:hidden is needed (that would risk cutting off the status dot /
   mute icon that sit near the card edges). */
#container_user .user_item {
    border-bottom: none !important;
    border-radius: 14px !important;
    margin-bottom: 6px;
    background-color: rgba(0, 0, 0, 0.025);
    transition: transform .12s ease;
}
#container_user .user_item:last-child {
    margin-bottom: 0;
}
#container_user .user_item:active {
    transform: scale(.98);
}

/* Profile details (age / gender / country / ...): stack the label above
   the value instead of placing them side by side in the same row. */
#probio .blisting.proitem {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 3px;
}
#probio .blisting.proitem > .bcell_mid {
    display: block;
    width: auto;
}

/* Chat input bar (room + private message box).
   custom.css turned the emoji button into position:absolute (right:12px;
   top:6px), which removes it from the row entirely - it floats out of
   place instead of sitting next to the text box, and the text box kept a
   32px right-padding reserved for it, showing up as a big empty gap.
   Put the emoji button back as a normal cell in the row, and restore the
   icon centering that custom.css had dropped from .main_item. */
#emo_item,
#emo_item_priv {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 38px !important;
    height: 100% !important;
    display: table-cell !important;
}
.input_table .main_item {
    text-align: center;
    vertical-align: middle;
}
.input_table .main_item > i {
    display: inline-block;
}
#content,
#message_content {
    padding: 0 12px !important;
}

/* Friend-list style buttons used in xbox modals */
.xfriend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
}
.fborder {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s;
    margin: 4px;
}
.fborder:hover { transform: scale(1.08); }
/* [FIX] نفس مشكلة .lm3a > span: العنصر ده هو سبان اللمعة (ArabicN) بالظبط،
   وفرض color:#fff هنا كان بيلغي تأثير اللمعة الشفاف. */
.fborder > span {
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.lm3a {
    width: 70px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 4px;
    transition: transform 0.15s;
}
.lm3a:hover { transform: scale(1.05); }
/* [FIX] الاسم هنا بياخد كلاس اللمعة (ArabicN) اللي بيحط color:transparent
   عشان تأثير background-clip:text (اللمعة) يظهر. كنا بنفرض color:#fff هنا
   فوقه، فكانت كل المعاينات بتبان لون أبيض واحد بدل شكل اللمعة الحقيقي. */
.lm3a > span {
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Color picker tiles used in xbox modals */
.x_pro_color {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 3px;
    transition: transform 0.15s;
}
.x_pro_color:hover { transform: scale(1.1); }
.x_pro_color .bccheck {
    color: #fff;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Profile top: profile_color / profile_shadow support */
#my_profile_top.profile_background[class*="prograd"] {
    background-blend-mode: overlay;
}
#my_profile_top.profile_background[class*="shgrad"] {
    box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
}
#my_profile_top:not(.cover_size)[class*="prograd"] {
    background-image: none !important;
}
#my_profile_top:not(.cover_size)[class*="prograd"]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.8;
    z-index: 0;
}
#my_profile_top.cover_size[class*="prograd"] {
    background-blend-mode: soft-light;
}

/* =====================================================================
   Reference-screenshot look: "رسايل النظام" system notice card
   ===================================================================== */

/* Plain system broadcasts (kick/ban/mute/clear/custom text — everything
   EXCEPT the compact "member joined" line, which keeps its own
   .sys_join_glass pill above) become a full-width dashed glass card:
   a light, slightly glowing panel with a bold red dashed border, a
   close (×) button on the outer edge, and a small bell+bullhorn
   header reading "رسايل النظام". */
.sys_log:not(.sys_log_join) {
    display: block !important;
    width: 100%;
    padding: 6px 10px !important;
    box-sizing: border-box;
}
.sys_log:not(.sys_log_join) > .chat_savatar,
.sys_log:not(.sys_log_join) > .get_info.chat_savatar {
    display: none !important;
}
.sys_notice_box {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #e6eef8;
    border: 2px dashed #ff2d3d;
    border-radius: 18px;
    padding: 12px 16px 14px;
    box-shadow: 0 0 16px rgba(70, 110, 190, 0.25);
}
.sys_notice_close {
    position: absolute;
    top: 8px;
    left: 12px;
    color: #ff2233;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}
.sys_notice_head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-left: 24px; /* keep clear of the close button */
    margin-bottom: 8px;
}
.sys_notice_title {
    color: #ff1f3d;
    font-weight: 700;
    font-size: 16px;
}
.sys_notice_icons {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ff1f3d;
    font-size: 14px;
}
.sys_notice_icons .fa-bullhorn {
    color: #3d7fd6;
    font-size: 19px;
    transform: scaleX(-1); /* mouth points into the RTL text */
}
.sys_notice_body {
    padding: 0 !important;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.9;
    text-align: center;
}

/* Comfortable spacing between every chat row, plus a faint ambient
   glow behind the whole log so the page doesn't feel flat — matches
   the soft, airy background in the reference screenshot. */
#show_chat ul {
    background: radial-gradient(ellipse at top, rgba(120, 150, 255, 0.10), transparent 60%);
}
li.chat_log {
    margin: 3px 0;
}
li.chat_log.sys_log {
    margin: 10px 0;
}

/* Ordinary "joined the room" line: bold name, red action wording and
   red room-number tag, comfortable horizontal breathing room. */
.sys_log.sys_log_join .chat_system {
    font-size: 13px;
}
.sys_log.sys_log_join {
    padding: 8px 10px !important;
}
.sys_log.sys_log_join .chat_savatar {
    width: 40px !important;
}
.sys_log.sys_log_join .sys_join_glass {
    font-size: 13px;
    line-height: 1.6;
}

/* XP rank badge — replaces the base rank icon wherever a member is
   listed (connected members panel, chat messages, profile). Same
   height everywhere so the icon looks identical to the connected-list
   version instead of shrinking/losing detail in chat. */
.list_xprank_icon, .chat_xprank_icon, .profile_xprank_icon {
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
}
.profile_xprank_icon {
    height: 15px;
}
/* [ADDED] تكبير أيقونة الرتبة جنب اسم المستخدم في رسايل الغرفة شويه (15px -> 18px) */
.chat_xprank_icon {
    height: 18px;
    margin: 0 3px 0 0;
}
/* [FIX] شارة الاكس بي في قايمة المتصلين كانت بنفس ارتفاع رسايل الشات
   (15px)، أكبر من أيقونة الرتبة العادية جنبها (list_rank، بقت 12px) —
   وحّدناها معاها. */
.list_xprank_icon {
    height: 10px;
}

/* [ADDED] تكبير علم الدولة في قايمة المتصلين شويه (18px من custom.css -> 22px) */
.user_item_flag img {
    width: 22px;
}