/**
 * ACP responsive styles – apply across all pages.
 * Breakpoints: 576px, 768px, 992px, 1024px, 1200px
 */

/* ========== Navbar: show hamburger on small screens ========== */
.main-navbar .head .menu-toggle.menu-toggle-nav {
  display: none !important;
}
@media (max-width: 1024px) {
  .main-navbar .head .menu-toggle.menu-toggle-nav {
    display: flex !important;
  }
}
.main-navbar .head .menu-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  margin-inline-end: 0.75rem;
  border-radius: 50%;
  background-color: #1b335f;
  color: #fff;
  border: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.main-navbar .head .menu-toggle.d-none {
  display: none !important;
}
@media (max-width: 1024px) {
  .main-navbar .head .menu-toggle:not(.d-none) {
    display: flex !important;
  }
}
@media (min-width: 1025px) {
  .main-navbar .head .menu-toggle {
    display: none !important;
  }
}

/* ========== Navbar: wrap and spacing on small screens ========== */
.main-navbar {
  flex-wrap: wrap;
  gap: 0.75rem;
}
.main-navbar .head {
  flex: 1 1 auto;
  min-width: 0;
}
.main-navbar .action {
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}
@media (max-width: 767px) {
  .main-navbar {
    padding: 0.75rem;
  }
  .main-navbar .page-title {
    font-size: 1.125rem;
  }
  .main-navbar .action .btn-primary[style*="187.5px"] {
    width: auto !important;
    min-width: 44px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .main-navbar .website-name .dropdown-toggle {
    padding: 0.25rem 0.5rem;
  }
  .main-navbar .website-name .website-title,
  .main-navbar .website-name .website-domain {
    font-size: 0.875rem;
  }
}
@media (max-width: 575px) {
  .main-navbar .action {
    width: 100%;
    justify-content: flex-start;
  }
  .main-navbar .action .d-flex {
    flex-wrap: wrap;
  }
  .plan-status {
    order: 1;
  }
}

/* ========== Sidebar: overlay on mobile when open ========== */
@media (max-width: 1024px) {
  #sidebar-wrapper {
    z-index: 1050;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
  #wrapper:not(.toggled) #sidebar-wrapper {
    pointer-events: none;
    visibility: hidden;
  }
  #wrapper.toggled #page-content-wrapper::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1040;
    pointer-events: auto;
  }
  /* Keep navbar menu button above overlay so it stays clickable to close sidebar */
  .main-navbar .head .menu-toggle.menu-toggle-nav {
    position: relative;
    z-index: 1041;
  }
}
@media (min-width: 1025px) {
  #wrapper.toggled #page-content-wrapper::before {
    display: none;
  }
}

/* ========== Page content: prevent overflow ========== */
#page-content-wrapper,
.page-content-wrapper {
  min-width: 0;
  overflow-x: hidden;
}
.container-fluid {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 575px) {
  #page-content-wrapper .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .page-content-wrapper {
    padding-top: 0;
  }
}

/* ========== Tables: horizontal scroll on small screens ========== */
.page-content-wrapper .table-responsive,
.page-content-wrapper .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-content-wrapper table {
  min-width: 0;
}
@media (max-width: 991px) {
  .page-content-wrapper .table,
  .myPlan_details .table,
  .transaction-history .table,
  .subscription-table .table {
    min-width: 600px;
  }
  .page-content-wrapper .table-responsive,
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}

/* ========== Cards ========== */
.page-content-wrapper .card {
  overflow: hidden;
}
.page-content-wrapper .card-body {
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .page-content-wrapper .card-body {
    padding: 1rem !important;
  }
  .chart-card .card .card-body {
    padding: 0.75rem !important;
  }
}
@media (max-width: 575px) {
  .page-content-wrapper .card-body {
    padding: 0.75rem !important;
  }
}

/* ========== Forms: stack on mobile ========== */
.page-content-wrapper .form-group.row,
.page-content-wrapper .row .form-group {
  margin-left: 0;
  margin-right: 0;
}
.page-content-wrapper .form-group .row [class*="col-"] {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
@media (max-width: 767px) {
  .page-content-wrapper .review-user-pic,
  .page-content-wrapper .review-product-pic,
  .page-content-wrapper .review-projects-pic,
  .page-content-wrapper .slider-view {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-content-wrapper .review-img-action,
  .page-content-wrapper .acp-image-actions {
    min-width: 0;
    width: auto;
    max-width: 100%;
  }
  .page-content-wrapper .slider-view .upload,
  .page-content-wrapper .slider-view .review-img {
    width: 100% !important;
    max-width: 100%;
  }
  .product-box,
  .projects-box,
  .slider-box {
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }
  .product-pic,
  .projects-pic,
  .slider-pic {
    min-width: 0;
  }
}

/* ========== Language / config tabs ========== */
.config-tab.nav-tabs,
.language-tab {
  flex-wrap: wrap;
}
.config-tab.nav-tabs .nav-link {
  white-space: nowrap;
}
@media (max-width: 767px) {
  .language-tab .nav-link {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
  }
}

/* ========== Buttons and actions ========== */
.page-content-wrapper .action .btn,
.page-content-wrapper .btn-group .btn {
  white-space: nowrap;
}
@media (max-width: 575px) {
  .page-content-wrapper .action {
    flex-direction: column;
    align-items: stretch;
  }
  .page-content-wrapper .action .btn {
    width: 100%;
    justify-content: center;
  }
  .domain-expired-alert {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem !important;
  }
  .domain-expired-alert p {
    margin-bottom: 0.5rem !important;
  }
}

/* ========== Dashboard chart row ========== */
.chart-card .row {
  margin-left: 0;
  margin-right: 0;
}
.chart-card .row [class*="col-"] {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
@media (max-width: 991px) {
  .chart-card .card {
    min-height: auto;
  }
}

/* ========== CKEditor / rich text ========== */
.page-content-wrapper .editor-container_classic-editor,
.page-content-wrapper .ck-editor {
  max-width: 100%;
}
.page-content-wrapper .ck.ck-editor__editable_inline {
  min-height: 120px;
}

/* ========== Profile / upload areas ========== */
@media (max-width: 575px) {
  .profile-avatar-wrap,
  .profile-avatar {
    max-width: 120px;
    max-height: 120px;
  }
  .website-design__form .review-img:not(.review-img__favicon) {
    max-width: 100%;
  }
  .website-design__form .review-img.review-img__favicon {
    width: 72px;
    max-width: 72px;
    height: 72px;
  }
  .website-design__form .colors_container .form-group label,
  .website-design__form .colors_container .colorInputParent {
    max-width: 100%;
  }
}

/* ========== Plans / payment ========== */
@media (max-width: 767px) {
  .payment-way-box {
    flex-wrap: wrap;
    justify-content: center;
  }
  .payment-process_container .payment_modal {
    padding: 2rem 1rem !important;
    margin: 1rem;
  }
}
@media (max-width: 575px) {
  .plan_card .plan_card-title {
    font-size: 1.5rem;
  }
  .plan_card .plan_card-badge {
    padding: 0.5rem 1.5rem;
  }
}

/* ========== Utilities ========== */
@media (max-width: 767px) {
  .gap-4 { gap: 0.5rem !important; }
  .gap-5 { gap: 0.75rem !important; }
}

/* ========== Global shell: no horizontal page scroll ========== */
html:has(#wrapper),
body:has(#wrapper) {
  overflow-x: hidden;
  max-width: 100%;
}
#wrapper {
  max-width: 100%;
}
.main-navbar .preview-site-btn {
  width: auto;
  min-width: 2.75rem;
  max-width: 187.5px;
}
@media (min-width: 768px) {
  .main-navbar .preview-site-btn {
    width: 187.5px;
  }
}

/* ========== Mobile navbar: compact toolbar ========== */
@media (max-width: 767px) {
  .main-navbar {
    padding: 0.5rem 0.65rem !important;
    gap: 0.5rem !important;
    row-gap: 0.65rem;
  }
  .main-navbar .head {
    flex: 1 1 100%;
    min-width: 0;
  }
  .main-navbar .page-title {
    font-size: 1.05rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 5.5rem);
  }
  .main-navbar .action {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem !important;
    justify-content: flex-start !important;
  }
  .main-navbar .action > .d-flex {
    order: 1;
  }
  .main-navbar .website-name {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .main-navbar .website-name .dropdown-toggle {
    max-width: 100%;
    padding: 0.2rem 0.35rem !important;
  }
  .main-navbar .website-name .website-title,
  .main-navbar .website-name .website-domain {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .main-navbar .preview-site-btn,
  .main-navbar #PublishSite {
    order: 3;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 2.6rem;
    padding-inline: 0.65rem !important;
  }
  .main-navbar .dark-light_label,
  .main-navbar .user-dropdown,
  .main-navbar .action > .language-switcher,
  .main-navbar .action > button.btn-light {
    order: 4;
  }
  .plan-status .title-status {
    display: none;
  }
  .main-navbar .action .btn {
    min-height: 40px;
  }
}

@media (max-width: 575px) {
  /* Restore page title on phones (custom.css hid it) — keep it short via ellipsis */
  .main-navbar .page-title {
    display: block !important;
  }
  .main-navbar .website-name {
    display: block !important;
  }
  .main-navbar .website-name .website-domain {
    display: none;
  }
  #page-content-wrapper {
    padding: 0.65rem 0.35rem !important;
  }
  .page-content-wrapper .card-body {
    padding: 0.85rem !important;
  }
  /* Undo custom.css zeroing card padding on tiny screens */
  body .card-body {
    padding: 0.85rem !important;
  }
}

/* ========== Dashboard stat / chart cards ========== */
@media (max-width: 767px) {
  .chart-card .col-md-3.col-6,
  .page-content-wrapper .col-md-3.col-6 {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
  .page-content-wrapper .card h2,
  .page-content-wrapper .card .card-title {
    font-size: 1rem;
  }
  .page-content-wrapper canvas,
  .page-content-wrapper .chartjs-render-monitor {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ========== Data tables & filters ========== */
@media (max-width: 991px) {
  .page-content-wrapper .dataTables_wrapper .row,
  .page-content-wrapper .dt-layout-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  .page-content-wrapper .dataTables_filter,
  .page-content-wrapper .dataTables_length,
  .page-content-wrapper .dt-search,
  .page-content-wrapper .dt-length {
    text-align: start !important;
    width: 100%;
  }
  .page-content-wrapper .dataTables_filter input,
  .page-content-wrapper .dt-search input {
    width: 100% !important;
    margin-inline-start: 0 !important;
  }
}

/* ========== Form grids: stack labels/fields ========== */
@media (max-width: 767px) {
  .page-content-wrapper .form-group.row > [class*="col-"],
  .page-content-wrapper form .row > [class*="col-md-"],
  .page-content-wrapper form .row > [class*="col-lg-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .page-content-wrapper .btn-toolbar,
  .page-content-wrapper .form-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .page-content-wrapper .btn-toolbar .btn,
  .page-content-wrapper .form-actions .btn {
    flex: 1 1 auto;
  }
}

/* ========== Sidebar logo / nav on overlay ========== */
@media (max-width: 1024px) {
  #sidebar-wrapper {
    width: min(300px, 86vw) !important;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: min(300px, 86vw) !important;
  }
  .sidebar-nav {
    width: 100%;
    padding: 1.25rem 1rem;
  }
  #sidebar-wrapper .logo img.acp-sidebar-logo,
  #sidebar-wrapper .logo img.sacp-sidebar-logo {
    max-width: min(160px, 58vw);
  }
}

/* ========== SACP home stats ========== */
@media (max-width: 575px) {
  .page-content-wrapper .row > [class*="col-"] .card .d-flex {
    gap: 0.65rem !important;
  }
}