@media (max-width: 1200px) {
    .header-item-label {
        display: none;
    }

    .header-menu-item {
        display: inline-flex;
    }

    .kwd-header .col-md-4, .kwd-header .col-md-5, .kwd-header .col-md-2, .kwd-header .col-md-1 {
        width: auto;
    }

    .kwd-header .col-md-8 .row {
        justify-content: right;
    }

    .kwd-header .col-md-4 {
        width: 30%;
    }

    .kwd-header .col-md-8 {
        width: 70%;
    }

    .kwd-header .col-md-2 a:first-child {
        margin-left: 0;
    }

    .kwd-header .col-md-2 a {
        margin-left: 10px;
    }

    .kwd-header .col-md-5 {
        padding-left: 0px;
        display: none;
    }

    .kwd-header {
        text-align: right;
    }

    .kwd-header .col-md-8, .kwd-header .col-md-1 {
        padding-right: 0;
    }

    .card-info .col-md-8 {
        width: 100%;
    }

    .card-info .col-md-4 {
        width: 100%;
    }

    .card-info {
        display: flex;
        gap: 20px;
    }

}

@media (max-width: 991px) {

    .kwd-header .col-md-1 {
        width: 10%;
    }

    .kwd-header .col-md-4 {
        width: 30%;
    }

    .kwd-header .col-md-8 {
        width: 55%;
    }

    .desktop-flex {
        display: none;
    }

    .mobile-flex {
        display: flex;
    }

    .login-section-wrapper {
        flex-direction: column;
        box-shadow: none;
    }

    .login-section-right {
        padding: 30px 20px;
    }

    .login-section-left img {
        width: 80%;
    }

    .social-icons a img {
        width: 28px;
        margin: 0 5px;
    }

    .dashboard-page .col-md-9 {
        width: 100%;
    }

    .dashboard-page .col-md-3 {
        position: fixed;
        width: 100%;
        max-width: 330px;
        z-index: 1;
        display: none;
    }


    .kwd-header .col-md-3.active {
        display: flex;
    }

    .kwd-sidebar-collapsed.show .kw-sidebar {
        display: flex;
        width: 100%;
    }

    .kwd-sidebar-collapsed.show {
        display: flex;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 20px;
    }

    .page-header h3 {
        text-align: left;
    }

    .table-pagination {
        max-width: 100%;
    }

    .kw-table-header form {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .mobile-menu {
        display: flex;
        align-items: center;
    }

    .mobile-menu svg {
        width: 35px;
        height: 35px;
    }

    .mobile-menu button {
        background: #fff;
        border: 1px solid #f1f1f1;
        border-radius: 8px;
        padding: 3px;
    }


    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
    }

    /* سایدبار موبایل */
    #kwd-sidebar-collapsed {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        background: white !important;
        z-index: 1050 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1) !important;
    }

    #kwd-sidebar-collapsed.show {
        transform: translateX(0) !important;
    }

    /* سایدبار داخلي */
    #kwd-sidebar-collapsed .kw-sidebar {
        height: 100% !important;
        overflow-y: auto !important;
        padding: 20px 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* بک گراند تیره */
    body.menu-open::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 1040 !important;
        pointer-events: auto !important;
    }

    /* مخفي کردن سایدبار اصلي در موبایل */
    .dashboard-page .col-md-3:not(#kwd-sidebar-collapsed) {
        display: none !important;
    }

    /* اسکرول سایدبار موبایل */
    #kwd-sidebar-collapsed::-webkit-scrollbar {
        width: 4px;
    }

    #kwd-sidebar-collapsed::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    #kwd-sidebar-collapsed::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 2px;
    }

    #kwd-sidebar-collapsed::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    #kwd-sidebar-collapsed {
        display: block !important;
    }

    /* مخفي کردن سایدبار اصلي در موبایل */
    .dashboard-page .col-md-3:not(#kwd-sidebar-collapsed) {
        display: none !important;
    }

    .kw-sidebar li {
        margin: 0;
    }

    .sidebar-logo img {
        margin-left: -30px;
        padding-top: 10px;
    }

    .feature-section {
        text-align: left;
    }

    .scenario-card:nth-child(2) .scenario-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .scenario-card-action {
        width: 100%;
        justify-content: space-between;
    }

}

@media (max-width: 768px) {
    .login-section-wrapper {
        flex-direction: column;
        box-shadow: none;
    }

    .login-section-left {
        display: none;
    }
    .last-activity-box-header h3 {
        font-size: 18px !important;
    }

    .login-section-right {
        width: 100%;
        padding: 20px;
    }

    .login-section-left img {
        max-width: 200px;
    }

    .google-btn-login {
        display: block;
        width: 100%;
    }

    .social-icons img {
        width: 18px !important;
        height: 18px !important;
    }

    .kw-table-header {
        flex-direction: column;
        align-items: stretch;
    }

    .search-container input {
        min-width: 100%;
    }

    .kw-table-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .table-pagination {
        justify-content: center;
    }

    .records-per-page {
        justify-content: center;
    }

    /*new*/
    .dashboard-page {
        padding: 20px;
    }

    h3 {
        font-size: 20px !important;
        text-align: left;
    }

    .feature-section-wrapper .feature-action {
        flex-direction: column-reverse;
    }

    .feature-section .btn-primary {
        width: 100%;
    }

    .feature-section-wrapper {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .dashboard-title-wrapper {
        align-items: flex-start;
        flex-direction: column-reverse;
        gap: 20px;
    }

    .empty-table {
        padding: 20px;
    }

    .empty-table h3 {
        font-size: 20px;
    }

    .card-info {
        display: flex;
        gap: 20px;
    }

    .box {
        padding: 20px;
    }

    .dashboard-title {
        font-size: 18px;
    }

    .cart-offer-footer {
        flex-direction: column;
    }

    .select-payment {
        flex-direction: column;
    }

    .select-payment .btn-primary, .select-payment .wallet-btn, .select-payment .wallet-btn-disabled {
        width: 100%;
    }

    .profile-edit-header {
        flex-direction: column;
    }

    .profile-edit-container {
        padding: 20px;
    }

    .profile-edit-row {
        grid-template-columns: 1fr;
    }

    .profile-reset-password {
        display: flex;
        flex-direction: column;
    }

    .profile-edit-form .btn-primary {
        width: 100% !important;
    }

    .sec-banner {
        gap: 20px;
    }

    .scenario-content-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        gap: 20px;
    }

    .scenario-header {
        padding: 20px;
        flex-direction: column;
        gap: 10px;
    }


    .scenario-card-content.collapsed .scenario-card-text {
        min-height: 280px;
    }

    .price-plans {
        display: flex !important;
        gap: 20px;
    }

    .form-buttons {
        justify-content: center;
    }

    .file-upload input {
        width: 100%;
    }

    .file-upload {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-buttons .btn-outline, .form-buttons .btn-primary {
        min-width: fit-content !important;
    }

    .article-header {
        flex-direction: column;
        gap: 20px;
        text-align: left;
        align-items: flex-start;
    }

    .article-header-right {
        flex-direction: column;
    }

    .article-actions {
        top: 35px;
    }

    img.article-image {
        margin: 10px;
        padding: 0;
    }

    .article-container {
        padding: 0;
    }

    .regenerate-article-section {
        padding: 20px;
    }

    .stat-item {
        flex-direction: column;
    }

    .article-header {
        margin-top: 50px;
    }

    .page-header .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        gap: 20px;
    }

    .page-header-left {
        width: 100%;
    }

    .chat-ticket-number {
        width: 50%;
    }

    .message-content {
        max-width: 100%;
    }

    .chat-message {
        flex-direction: column !important;
    }

    .chat-messages-wrapper {
        padding: 0;
    }

    .chat-message.admin {
        align-items: flex-end;
    }

    .page-header .container .d-flex.justify-content-between.align-items-center {
        flex-direction: row !important;
    }

    .wallet {
        display: flex;
        flex-direction: column-reverse;
    }

    .recharge-wallet {
        margin-top: 40px;
    }

    .table-wrapper {
        overflow-y: scroll;
        max-width: 900px;
    }

    .table-wrapper table {
        width: 900px;
    }

    .kwd-header .col-md-4 .header-search {
        display: none;
    }

    .kwd-header .col-md-4 {
        display: none;
    }

    .kwd-header .col-md-8 .col-md-4 {
        display: flex;
        justify-content: flex-end;
    }

    .kwd-header .col-md-1 {
        width: 10%;
    }

    .kwd-header .col-md-8 {
        width: 80%;
    }

    .records-per-page {
        display: flex;
        justify-content: flex-start;
    }

    .kw-sidebar {
        border-radius: 24px;
    }

    .last-activity-box-header h3 {
        font-size: 18px !important;
    }
    .kw-custom-alert h3{
        text-align: center !important;
    }
    .feature-tutorial{
        display: none !important;
    }
    .last-activity-box-header h3 {
        font-size: 18px !important;
    }

    .feature-tutorial{
        display: none !important;
    }

    .notifications-dropdown {
        right: -50px !important;
    }

    .notifications-dropdown:before{
        right: 70px;
    }
    .plan-price-wrapper .btn-primary , .plan-price-wrapper .btn-blue {
        width: fit-content;
        margin: 0 auto;
    }
    
}


/* ---------- UserPanel header: keep the icon cluster on one line ----------
   Below 1201px this file restructures .kwd-header, but above it the inner row
   keeps the fixed col-md-4 / col-md-5 / col-md-2 / col-md-1 split. col-md-2
   works out to roughly 7.8% of the viewport - 116px at 1485px wide - while the
   three fixed-width children it holds need 135px (35 + 50 + 50). So the cart
   wrapped onto a second line and the header grew from 60px to 88px, anywhere
   between 1201px and about 1730px. That band covers 1366, 1440, 1536 and 1600.

   Fix: let the icon and avatar columns size to their content and give the
   wallet column the slack, instead of holding all four to fixed twelfths. */
@media (min-width: 1201px) {
    /* Above 1200px this file stops restructuring .kwd-header, so the inner row
       keeps its fixed twelfths: col-md-4 / col-md-5 / col-md-2 / col-md-1.
       col-md-2 comes out at about 7.8% of the viewport - 116px at 1485px wide -
       while the three fixed-width icons inside it need 135px (35 + 50 + 50), so
       the cart broke onto a second line and the header grew 60px -> 88px. That
       happened from 1201px to roughly 1730px: 1366, 1440, 1536, 1600.

       Deliberately minimal. The icon column gets a floor, the two text columns
       are allowed to shrink to pay for it, and the row is told not to wrap -
       without that last part flex wraps a column onto a second line instead of
       shrinking anything. Nothing may *grow*, so above ~1730px, where the
       twelfths already fit, the layout is byte-for-byte what it was. */
    .kwd-header .col-md-8 > .row {
        flex-wrap: nowrap;
    }

    .kwd-header .col-md-8 > .row > .col-md-2 {
        min-width: 150px;
    }

    /* shrink-only: 0 grow, so wide screens are untouched */
    .kwd-header .col-md-8 > .row > .col-md-4,
    .kwd-header .col-md-8 > .row > .col-md-5 {
        flex: 0 1 auto;
        min-width: 0;
    }

    /* whatever width the column ends up with, these three never split */
    .kwd-header .notification-row {
        flex-wrap: nowrap;
        align-items: center;
    }
}


/* ---------- header icon cluster: even spacing ----------
   The blocks above space the language flag / bell / cart with a one-sided
   margin (`.col-md-2 a { margin-<side>: 10px }`) plus a `:first-child` rule
   that zeroes it. The flag is that first child, so it ended up flush against
   its neighbour - measured 0px - on both languages: touching on the Arabic
   side, visually colliding on the English one.

   A flex gap spaces all three evenly and needs no first-child exception.
   Placed before the narrower blocks below so those can still tighten it. */
@media (max-width: 1200px) {
    .kwd-header .notification-row {
        display: flex;
        align-items: center;
        gap: 6px;
        /* it is a Bootstrap .row, so it carries margin: 0 -12px and bleeds into
           the neighbouring column - that is what put it under the pill */
        margin-left: 0;
        margin-right: 0;
    }

    .kwd-header .col-md-2 a,
    .kwd-header .col-md-2 a:first-child {
        margin-left: 0;
        margin-right: 0;
    }

    /* the flag is a bare 35x24 image sitting between two 44px pills, so it read
       as floating rather than as part of the set */
    .kwd-header .dsh-change-language-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 44px;
    }

    /* Same gutter mismatch as on phones, and it reaches all the way up to
       1200px: the block near the top of this file zeroes .col-md-8's
       padding-left but leaves the inner row's -12px gutter margin, so the row
       hangs 12px outside its parent. Measured 12px of header overflow at
       1085px, present long before the 2026-08-26 work. */
    .kwd-header > .col-md-8 {
        padding-left: 0;
        padding-right: 0;
    }

    .kwd-header .col-md-8 > .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------- UserPanel header on phones and tablets ----------
   `.kwd-header .col-md-1 { width: 10% }` in the blocks above matches *both*
   col-md-1 elements: the hamburger column and the avatar column inside the
   right-hand row. At 360px that is 32px, while the hamburger button is 43px
   and the avatar needs ~40px. Both hung outside their columns and the header
   overflowed the viewport by 50px, leaving the burger half off the edge.

   Size the two fixed items to their content and let the middle column take
   whatever is left. Appended after those blocks so it wins at equal
   specificity. */
@media (max-width: 991px) {
    /* The outer row has to stop wrapping too, or the browser drops col-md-8
       onto a second line instead of letting it shrink - which is how the
       burger ended up alone on its own row. */
    .kwd-header {
        flex-wrap: nowrap;
        align-items: center;
    }

    .kwd-header > .mobile-menu,
    .kwd-header .col-md-8 > .row > .col-md-1 {
        width: auto;
        flex: 0 0 auto;
    }

    /* the burger button already draws its own box; the grid gutter around it
       is 12px this row cannot spare */
    .kwd-header > .mobile-menu {
        padding-left: 0;
        padding-right: 0;
    }

    .kwd-header > .col-md-8 {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .kwd-header .col-md-8 > .row {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        /* the blocks above zero this column's padding-left but leave the row's
           -12px gutter margin, so the row hung 12px outside its parent - that
           was the entire overflow */
        margin-left: 0;
        margin-right: 0;
    }

    .kwd-header > .col-md-8 {
        padding-left: 0;
        padding-right: 0;
    }

    /* 12px a side across three columns is 72px this row does not have */
    .kwd-header .col-md-8 > .row > [class*="col-md-"] {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* #profile-container draws the divider as a border on the side facing the
       icons, and style.css only pads *inside* it. The column padding used to
       supply the gap on the outside; at 4px the line ended up sitting on the
       cart button, so give it its own margin. */
    .kwd-header #profile-container {
        margin-left: 10px;
    }

    /* the subscription pill is the only thing here with slack to give */
    .kwd-header .col-md-8 > .row > .col-md-4 {
        flex: 0 1 auto;
        min-width: 0;
    }

    .kwd-header .notification-row {
        flex-wrap: nowrap;
        align-items: center;
    }
}

/* On a 360px phone the row is still ~12px over once the burger has its real
   width. Take it off the two icon buttons - 44px is still the minimum
   comfortable tap target - rather than hiding anything. */
@media (max-width: 480px) {
    .kwd-header .header-menu-icon {
        width: 44px;
    }

    /* the gap above costs 12px the 360px row does not have; take it back from
       the column padding, which is only separating things the gap now handles */
    .kwd-header .col-md-8 > .row > [class*="col-md-"] {
        padding-left: 2px;
        padding-right: 2px;
    }

    .kwd-header .notification-row {
        gap: 4px;
    }
}