#categoryBrowser .category-browser-panel,
#categoryBrowser.b24-open-level-1 .category-browser-panel,
#categoryBrowser.b24-open-level-2 .category-browser-panel{
    width: 270px !important;
    max-width: 270px !important;
    height: min(360px, var(--b24-dropdown-max-height, 360px)) !important;
    max-height: min(360px, var(--b24-dropdown-max-height, 360px)) !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #categoryBrowser .category-browser-head,
#categoryBrowser .category-browser-trail{
    display: none !important;
  }

  #categoryBrowser .category-browser-columns{
    position: relative;
    display: block !important;
    width: 270px;
    height: 100%;
    overflow: visible !important;
  }

  #categoryBrowser .category-browser-column,
#categoryBrowser .category-browser-column-main,
#categoryBrowser .category-browser-column-branches,
#categoryBrowser .category-browser-column-leaves{
    position: absolute;
    top: 0;
    right: 0;
    display: none !important;
    width: 270px !important;
    min-width: 270px !important;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #dce4ed !important;
    border-radius: 9px;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  }

  #categoryBrowser .category-browser-column-main{
    display: block !important;
    z-index: 3;
  }

  #categoryBrowser .category-browser-column-branches{
    top: var(--b24-branch-top, 0px);
    right: calc(100% + 8px);
    height: auto !important;
    max-height: min(360px, var(--b24-dropdown-max-height, 360px));
    z-index: 2;
  }

  #categoryBrowser .category-browser-column-leaves{
    top: var(--b24-leaf-top, 0px);
    right: calc(200% + 16px);
    height: auto !important;
    max-height: min(360px, var(--b24-dropdown-max-height, 360px));
    z-index: 1;
  }

  #categoryBrowser.b24-open-level-1 .category-browser-column-branches,
#categoryBrowser.b24-open-level-2 .category-browser-column-branches,
#categoryBrowser.b24-open-level-2 .category-browser-column-leaves{
    display: block !important;
  }

  #categoryBrowser .category-browser-list{
    padding: 6px;
  }

  #categoryBrowser .category-browser-row{
    min-height: 41px;
    margin: 0 0 2px;
    padding: 7px 9px;
    border-radius: 6px;
  }

  #categoryBrowser .category-browser-row:hover,
#categoryBrowser .category-browser-row.selected{
    background: #edf4fc !important;
  }

  #categoryBrowser .category-browser-column-leaves .category-row-chevron,
#categoryBrowser .category-browser-column-leaves .category-browser-row > svg{
    display: none !important;
  }

  
  #smartAdForm .b24-tuv-field,
#smartAdForm .b24-tuv-precise{
    grid-column: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
  }

  #smartAdForm .b24-tuv-field > label,
#smartAdForm .b24-tuv-precise > label{
    display: block;
    color: var(--ink);
  }

  #smartAdForm .b24-tuv-field > label::before,
#smartAdForm .b24-tuv-precise > label::before,
#smartAdForm .b24-tuv-help{
    display: none !important;
  }

  #smartAdForm .b24-tuv-input{
    width: 170px;
    max-width: 100%;
    direction: ltr !important;
    text-align: center !important;
    letter-spacing: .08em;
    font: 600 16px/1.2 Arial, "Segoe UI", sans-serif !important;
    font-variant-numeric: lining-nums tabular-nums;
  }

  
  #smartAdForm .b24-number-source{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #smartAdForm .b24-plain-number{
    direction: ltr !important;
    text-align: left !important;
    font-family: Arial, "Segoe UI", sans-serif !important;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "locl" 0, "tnum" 1;
  }

  
  #smartAdForm #imagePreview{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    gap: 12px;
    margin-top: 14px;
  }

  #smartAdForm #imagePreview > .b24-sortable-image{
    position: relative;
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid #d4dee9;
    border-radius: 10px;
    background: #eef3f8;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .08);
    cursor: grab;
    user-select: none;
  }

  #smartAdForm #imagePreview > .b24-sortable-image:active{
    cursor: grabbing;
  }

  #smartAdForm #imagePreview > .b24-sortable-image.b24-dragging{
    opacity: .5;
    outline: 2px dashed var(--brand);
    outline-offset: 2px;
  }

  #smartAdForm #imagePreview > .b24-sortable-image:first-child::before{
    content: "الصورة الرئيسية";
    position: absolute;
    right: 7px;
    bottom: 7px;
    z-index: 3;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(15, 111, 203, .92);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
  }

  #smartAdForm #imagePreview > .b24-sortable-image::after{
    content: "⋮⋮";
    position: absolute;
    right: 8px;
    top: 7px;
    z-index: 3;
    color: #fff;
    font: 700 17px/1 Arial, sans-serif;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .65);
    pointer-events: none;
  }

  #smartAdForm #imagePreview > .b24-sortable-image img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  #smartAdForm #imagePreview .b24-image-delete,
#smartAdForm #imagePreview > .b24-sortable-image button{
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    right: auto !important;
    z-index: 5;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    border: 1px solid rgba(255,255,255,.8) !important;
    border-radius: 50% !important;
    background: rgba(20, 28, 38, .8) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
    font: 500 21px/1 Arial, sans-serif !important;
    cursor: pointer;
  }

  #smartAdForm #imagePreview .b24-image-delete:hover,
#smartAdForm #imagePreview > .b24-sortable-image button:hover{
    background: #b42318 !important;
    transform: scale(1.05);
  }

  #smartAdForm .b24-image-order-note{
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
  }

  @media (max-width: 760px){
    #categoryBrowser .category-browser-panel,
#categoryBrowser.b24-open-level-1 .category-browser-panel,
#categoryBrowser.b24-open-level-2 .category-browser-panel{
      width: calc(100vw - 16px) !important;
      max-width: calc(100vw - 16px) !important;
      overflow: hidden !important;
      border: 1px solid #dce4ed !important;
      border-radius: 9px !important;
      background: #fff !important;
      box-shadow: 0 12px 28px rgba(15, 23, 42, .14) !important;
    }

    #categoryBrowser .category-browser-head{
      display: flex !important;
    }

    #categoryBrowser .category-browser-columns{
      width: 100%;
      height: calc(100% - 46px);
      overflow: hidden !important;
    }

    #categoryBrowser .category-browser-column,
#categoryBrowser .category-browser-column-main,
#categoryBrowser .category-browser-column-branches,
#categoryBrowser .category-browser-column-leaves,
#categoryBrowser.b24-open-level-1 .category-browser-column-branches,
#categoryBrowser.b24-open-level-2 .category-browser-column-branches,
#categoryBrowser.b24-open-level-2 .category-browser-column-leaves{
      position: relative;
      top: auto !important;
      right: auto;
      display: none !important;
      width: 100% !important;
      min-width: 100% !important;
      height: 100% !important;
      max-height: none !important;
      border: 0 !important;
      border-radius: 0;
      box-shadow: none;
    }

    #categoryBrowser[data-mobile-step="1"] .category-browser-column-main,
#categoryBrowser[data-mobile-step="2"] .category-browser-column-branches,
#categoryBrowser[data-mobile-step="3"] .category-browser-column-leaves{
      display: block !important;
    }

    #smartAdForm #imagePreview{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }