/**
 * BiznizCard — user panel responsive layer (dashboard, builder, templates, publish, checkout).
 * Load after navbar.css. Does not alter auth or data logic.
 */

/* -------------------------------------------------------------------------- */
/* Global helpers (pages that load this sheet)                                 */
/* -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
}

/* -------------------------------------------------------------------------- */
/* Dashboard — main.dash-wrap                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  main.dash-wrap {
    width: min(1180px, calc(100% - 24px));
  }
}

@media (max-width: 480px) {
  main.dash-wrap {
    width: min(1180px, calc(100% - 16px));
    max-width: 100%;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  main.dash-wrap .dash-header {
    text-align: left;
  }

  main.dash-wrap .dash-header__profile-row {
    align-items: center;
  }

  main.dash-wrap .dash-header .profile {
    justify-content: flex-start;
  }

  main.dash-wrap .dash-cta-stack {
    flex-direction: column;
    align-items: stretch;
  }

  main.dash-wrap .dash-cta-stack .btn {
    width: 100%;
    justify-content: center;
  }

  main.dash-wrap .dash-payment-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }

  main.dash-wrap .dash-payment-banner .btn {
    width: 100%;
    justify-content: center;
  }

  main.dash-wrap .card-item {
    min-height: 0;
  }

  main.dash-wrap .card-meta-title {
    white-space: normal;
  }
}

/* -------------------------------------------------------------------------- */
/* Checkout — main.co-wrap                                                    */
/* -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  main.co-wrap {
    width: min(560px, calc(100% - 16px));
    max-width: 100%;
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  main.co-wrap .co-card {
    padding: 1rem 1rem 1.35rem;
  }

  main.co-wrap .co-actions {
    flex-direction: column;
    align-items: stretch;
  }

  main.co-wrap .co-actions .co-btn {
    width: 100%;
    justify-content: center;
  }

  main.co-wrap .co-discount-row {
    flex-direction: column;
    align-items: stretch;
  }

  main.co-wrap #checkout-discount-input {
    width: 100% !important;
    max-width: none !important;
  }

  main.co-wrap #checkout-discount-apply-btn {
    width: 100%;
  }

  main.co-wrap #checkout-qty-input {
    max-width: 100% !important;
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Templates — main.wrap + #template-list                                    */
/* -------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1024px) {
  main.wrap #template-list.tmpl-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  main.wrap #template-list.tmpl-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  main.wrap {
    width: min(1120px, calc(100% - 16px));
  }

  main.wrap .wizard-icon-btn,
  main.wrap .builder-flow-icon-btn {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 44px;
    min-height: 44px;
  }

  main.wrap .template-card {
    min-height: 0;
    padding: 0.85rem;
  }

  main.wrap .mini-card {
    height: auto;
    min-height: 200px;
    max-height: 260px;
  }
}

/* -------------------------------------------------------------------------- */
/* Publish — main.wrap .publish-grid                                         */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  main.wrap .publish-grid {
    gap: 1.1rem;
  }
}

@media (max-width: 480px) {
  main.wrap {
    width: calc(100% - 16px);
  }

  main.wrap .card {
    padding: 1rem;
  }

  main.wrap .publish-preview-wrap {
    position: static;
  }

  main.wrap #publish-card-preview {
    max-width: 100%;
  }

  main.wrap #publish-card-preview .pub-card {
    max-width: min(400px, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  main.wrap .actions .btn,
  main.wrap .actions .btn-secondary {
    min-height: 48px;
    flex: 1 1 auto;
    justify-content: center;
  }

  main.wrap .actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* -------------------------------------------------------------------------- */
/* Card builder — #view-builder, .container, preview                           */
/* -------------------------------------------------------------------------- */
#view-builder .container {
  width: min(1220px, calc(100% - max(24px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))));
  max-width: 100%;
}

@media (max-width: 768px) {
  #view-builder .accordion-trigger {
    min-height: 48px;
    padding: 0.65rem 0.85rem;
  }

  #view-builder .builder-sticky-header__actions .button,
  #view-builder .builder-publish {
    min-height: 48px;
  }

  #view-builder .grid.grid-2,
  #view-builder .social-primary-grid,
  #view-builder .media-upload-grid {
    grid-template-columns: 1fr;
  }

  #view-builder .upload-zone {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  #view-builder .container {
    width: calc(100% - 16px);
  }

  #view-builder .builder-sticky-header {
    padding-inline: clamp(8px, 2vw, 14px);
  }

  #view-builder .panel {
    padding: 12px;
  }

  #view-builder .bc-sections-below {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #view-builder .bc-chip {
    min-height: 44px;
    padding: 6px 8px;
  }

  #view-builder .bc-row {
    min-height: 44px;
    flex-wrap: wrap;
    row-gap: 4px;
  }

  #view-builder .bc-form-preview {
    overflow: hidden;
  }

  .preview-floating-dock .preview-device,
  .builder-layout .preview-panel-col .preview-device {
    width: min(300px, calc(100vw - 24px));
  }

  #preview-target .pub-carousel,
  #preview-floating-inner .pub-carousel {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  #preview-target .pub-carousel-viewport,
  #preview-floating-inner .pub-carousel-viewport {
    touch-action: pan-y pinch-zoom;
  }
}

@media (max-width: 380px) {
  .preview-floating {
    width: min(340px, calc(100vw - 12px)) !important;
  }

  .preview-floating.open {
    width: min(340px, calc(100vw - 12px)) !important;
  }
}

/* Faster tap response on builder controls (no 300ms delay on many browsers) */
#view-builder .button,
#view-builder .accordion-trigger,
#view-builder .file-input,
.preview-floating-dock button {
  touch-action: manipulation;
}