/* Responsive Sidebar */

@media (max-width: 900px) {
  .active-builder .navbar {
    flex-wrap: unset !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .active-builder .navbar .options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: end;
  }

  .active-builder .left-con {
    display: none;
  }
  .active-builder .navbar .nav-menu {
    display: block;
  }
  .active-builder .navbar .change-design-size {
    display: none;
  }
  .editor-area-section {
    height: calc(100vh - 158px);
  }
  .editor-area-section .editor-con {
    flex-direction: column-reverse;
        justify-content: space-between;
    height: 100%;
  }
  .editor-area-section .sidebar-wraper {
    width: 100%;
    position: unset;
    flex-direction: column-reverse;
  }
  .editor-area-section .editor-sidebar {
    width: 100% !important;
    height: var(--navbarHeight);
  }
  .editor-area-section .items.hide-scrollbar {
    width: 100% !important;
    flex-direction: unset;
    justify-content: space-between;
    height: 100%;
    align-items: center;
  }
  .editor-area-section .tool-item .icon {
    width: 35px !important;
    height: 35px !important;
  }

  .tool-item .icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  .editor-area-content .zooming-section {
    top: 0;
  }  

  .canvas-area {
    height: calc(100dvh  - 170px) !important;
  }
  .editor-area-section.active .canvas-area {
    height: calc(100dvh  - 400px) !important;
  }

  .editor-sidebar-panels {
    min-width: 100% !important;
    max-height: 230px !important;
    /* position: absolute; */
    width: 100%;
    z-index: 99;
    top: 0;
    max-width: 250px !important;
  }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .card.create-design .card-body {
    padding: 24px 20px !important;
  }
  .nav-item a {
    padding: 10px 20px !important;
    font-size: 13px !important;
  }
  .upload-area {
    padding: 32px 20px !important;
  }
  .card.create-design {
    margin: 12px !important;
  }

  /* --- Global overflow & spacing --- */
  /* body,
  .all-content,
  .card.create-design,
  .card.create-design .card-body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .all-content {
    margin-top: 85px !important;
  } */
  .card.create-design {
    margin: 5px !important;
    padding: 10px 10px 15px !important;
  }
  .card.create-design .card-body {
    padding: 5px !important;
  }
  /* --- Main two-column layout → stack --- */
  .card.create-design .card-body > .row {
    flex-direction: column !important;
  }
  .card.create-design .card-body > .row > .col-md-5,
  .card.create-design .card-body > .row > .col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 2px !important;
  }
  /* --- Navbar --- */
  .navbar {
    flex-wrap: wrap !important;
    padding: 8px 10px !important;
    gap: 6px 20px !important;
    justify-content: center !important;
  }
  /* --- Buttons smaller on mobile --- */
  .generate-dtf-sheet .dropdown-toggle {
    font-size: 13px !important;
    padding: 12px 10px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }
  .generate-dtf-sheet > .previous-generated-sheet {
    font-size: 12px !important;
    padding: 10px 10px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }
  #clear-all-btn {
    font-size: 12px !important;
    padding: 10px 10px !important;
  }
  /* --- Design item cards: stack image + controls --- */
  /* .file-info {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
    position: relative !important;
  } */
  /* .file-info .del-file {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important; 
  }*/
  .file-image-container {
    width: 100% !important;
    max-width: 180px !important;
    height: auto !important;
    justify-content: center !important;
  }
  .file-image-container img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .file-info-footer {
    width: 100% !important;
    /* flex-direction: column !important; */
    align-items: center !important;
    gap: 8px !important;
  }
  .file-info-footer > * {
    width: 100% !important;
    text-align: center !important;
  }
  /* --- Uploaded file rows --- */
  .uploaded-file-info {
    flex-direction: column !important;
    gap: 15px !important;
  }
  .uploaded-file-info > .col-md-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .file-con {
    width: 100% !important;
  }
  .create-design .tabs {
    justify-content: center;
  }

  .left {
    width: 320px;
  }

  .left #uploadCustom {
    padding: 20px;
  }
  .upload-box {
    padding: 30px 20px;
  }

  .right-header {
    padding: 15px;
  }

  .right-scroll {
    padding: 0 15px 28px;
  }


  /* #bg-float-panel {
    bottom: 250px !important;
    z-index: 60;

  } */
  .action-btn .save-design {
    font-size: 11px;
  }
  .nav-links a {
    font-size: 12px;
  }

  .main {
    position: relative;
  }
  .main .left {
    position: absolute;
    z-index: 99;
    height: 100%;
    top: 0;
    transform: translateX(-100%);
  }

  .left.active {
    transform: translateX(0);
  }

  .left-scroll {
    padding-bottom: 70px !important;
  }
}

/* Mobile responsive */
@media (max-width: 530px) {
  .generate-dtf-sheet {
    grid-template-columns: 3fr !important;
  }
}

@media (max-width: 480px) {
  .navbar {
    --navbarHeight: 100px !important;
  }
  .all-content {
    padding-top: 100px !important;
  }
  .upload-area {
    padding: 24px 16px !important;
  }
  .upload-text {
    font-size: 15px !important;
  }
  .upload-formats {
    font-size: 11px !important;
  }

  .file-info-footer {
    justify-content: center;
  }
  .file-info-footer .form-group {
    justify-content: space-between !important;
    width: 100% !important;
  }

  .file-con .file-info {
    flex-direction: column !important;
  }

  .file-con .file-info .file-image-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  .file-info-footer .form-group:nth-of-type(2),
  .file-info-footer .form-group:nth-of-type(3) {
    flex-direction: column !important;
  }


  .feature {
    padding: 8px 12px;
  }
  .welcome {
    padding: 0 10px;
  }

  .editor-area-content .editor-nav {
    display: none;
  }
  
  /* .right-scroll {
    height: calc(100dvh  - 330px);
  } */
}

@media (max-width: 418px) {
  .card-top {
    flex-direction: column;
  }

  .card-top .card-info {
    text-align: center;
  }

  .card-preview {
    width: 130px;
    height: 130px;
  }
}