/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */

@import url("/assets/fonts-e07f2d36.css");
@import url("/assets/tomselect_style-5d6cb3d9.css");

@import url("/assets/intl_tel_input-1a321c78.css");

@import url("/assets/swiper-34d21c82.css");

:root {
  --landing-page-navbar-height: 4rem;
}

.landing-page-hero {
  min-height: calc(100vh - var(--landing-page-navbar-height));
  min-height: calc(100svh - var(--landing-page-navbar-height));
}

.landing-page-hero-pattern {
  background-image: radial-gradient(circle, white 1px, transparent 1px);
  background-size: 40px 40px;
}

.card-template-zones-page {
  padding: 1.5rem 1rem;
}

.card-template-zones-layout {
  display: grid;
  gap: 1.5rem;
}

.card-template-zones-fields {
  min-width: 0;
}

.card-template-zones-preview-panel {
  order: -1;
}

.card-template-zone-preview-overlay {
  pointer-events: auto;
}

.card-template-zone-preview-overlay.is-targeting-zone {
  cursor: crosshair;
  outline: 2px solid #1454d8;
  outline-offset: -2px;
}

.card-template-zone-preview-zone {
  cursor: grab;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
}

.card-template-zone-preview-zone.is-targeting-zone {
  border-color: #1454d8;
}

.card-template-zones-fields [data-card-template-zones-target="row"].is-targeting-zone {
  border-color: #1454d8;
  background-color: #eef5ff;
}

.card-template-zones-fields [data-card-template-zones-target="placeButton"].is-targeting-zone {
  background-color: #1454d8;
  color: #ffffff;
}

.card-template-zone-preview-zone.is-dragging {
  cursor: grabbing;
}

.card-template-zone-resize-handle {
  cursor: nwse-resize;
  touch-action: none;
}

@media (min-width: 1024px) {
  .card-template-zones-page {
    padding-left: 0;
    padding-right: 0;
  }

  .card-template-zones-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(25rem, 1fr);
    align-items: start;
  }

  .card-template-zones-preview-panel {
    position: sticky;
    top: 1.5rem;
    order: 0;
  }
}