@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-toast-in {
  animation: toast-slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Viewport Lock & Anti-Scroll-Chaining for Form Builder */
html.wpvfb-builder-active,
body.wpvfb-builder-active {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.wpvfb-builder-active #wpwrap {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

body.wpvfb-builder-active #wpcontent {
  height: calc(100vh - 32px) !important;
  max-height: calc(100vh - 32px) !important;
  overflow: hidden !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media screen and (max-width: 782px) {
  body.wpvfb-builder-active #wpcontent {
    height: calc(100vh - 46px) !important;
    max-height: calc(100vh - 46px) !important;
  }
}

body.wpvfb-builder-active #wpbody {
  height: 100% !important;
}

body.wpvfb-builder-active #wpbody-content {
  padding-bottom: 0 !important;
  height: 100% !important;
  float: none !important;
}

body.wpvfb-builder-active #wpfooter {
  display: none !important;
}

/* WordPress Admin Left Menu Seamless Full-Height Background */
body.wpvfb-builder-active #adminmenuback {
  display: block !important;
  position: fixed !important;
  top: 32px !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 160px !important;
  height: calc(100vh - 32px) !important;
  background-color: #1e1e1e !important;
  z-index: 10 !important;
}

body.wpvfb-builder-active #adminmenuwrap {
  position: fixed !important;
  top: 32px !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 160px !important;
  height: calc(100vh - 32px) !important;
  background-color: #1e1e1e !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  z-index: 20 !important;
}

body.wpvfb-builder-active.folded #adminmenuback,
body.wpvfb-builder-active.folded #adminmenuwrap {
  width: 36px !important;
}

@media screen and (max-width: 782px) {
  body.wpvfb-builder-active #adminmenuback,
  body.wpvfb-builder-active #adminmenuwrap {
    top: 46px !important;
    height: calc(100vh - 46px) !important;
  }
}

/* Hide WP Admin Notices & Meta in Builder to prevent layout displacement */
body.wpvfb-builder-active .notice,
body.wpvfb-builder-active .error,
body.wpvfb-builder-active .updated,
body.wpvfb-builder-active #screen-meta,
body.wpvfb-builder-active #screen-meta-links {
  display: none !important;
}

/* Fixed Viewport Docking: Pin builder flush to bottom with 0px gap */
body.wpvfb-builder-active #wpvfb-builder-root {
  position: fixed !important;
  top: 32px !important;
  left: 160px !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 999 !important;
  overflow: hidden !important;
}

body.wpvfb-builder-active.folded #wpvfb-builder-root {
  left: 36px !important;
}

@media screen and (max-width: 782px) {
  body.wpvfb-builder-active #wpvfb-builder-root {
    top: 46px !important;
    left: 0 !important;
  }
}

body.wpvfb-builder-active #wpvfb-builder-root > div {
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
}

/* Canvas Scroll Isolator & Breathing Room */
.wpvfb-canvas-scroll-container {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}


/* Builder canvas (moved from inline style elements). */
.template-category-scroll { overscroll-behavior-x: contain; }
.template-category-scroll::-webkit-scrollbar { display: none; }
@keyframes wpvfbToastUp { from { transform: translateY(12px); opacity: 0 } to { transform: none; opacity: 1 } }
.wpvfb-toast-up { animation: wpvfbToastUp .25s cubic-bezier(.16, 1, .3, 1); }
[data-ph] input::placeholder,
[data-ph] textarea::placeholder { color: var(--wpvfb-ph-color) !important; opacity: 1; }

        @keyframes emptyStateTitleGradient {
          0%, 100% { background-position: 0% center; }
          50% { background-position: 200% center; }
        }
        .empty-state-title-gradient {
          background: linear-gradient(90deg, #111827 0%, #374151 50%, #111827 100%);
          background-size: 200% auto;
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
          animation: emptyStateTitleGradient 4s ease-in-out infinite;
        }
        /* Storefront typography: the form font on every element (Font Awesome icons excluded), inputs inherit it,
           and only a field's own font (label/description/section/static content/email) overrides it —
           [data-font] / [data-font-deep] carry it in --wpvfb-font. Edit chrome keeps the builder font. */
        .preview-area,
        .preview-area :where(*:not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not([data-canvas-chrome]):not([data-canvas-chrome] *)) {
          font-family: var(--wpvfb-canvas-font, Arial), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
        }
        .preview-area :is(input, textarea, select):not([data-font]) {
          font-family: inherit !important;
        }
        .preview-area.preview-area [data-font],
        .preview-area.preview-area [data-font-deep],
        .preview-area.preview-area [data-font-deep] *:not(i) {
          font-family: var(--wpvfb-font), sans-serif !important;
        }
        /* The image editor's click target must not change the image's layout (inline-block adds a line box). */
        .preview-area .inline-image-editor-trigger { display: block; }
        /* Builder Tailwind preflight makes svg/img blocks; inside author HTML (static content, HTML field) they are
           inline on the published form. */
        .preview-area [data-static-content] :is(svg, img, video, canvas),
        .preview-area [data-html-field] :is(svg, img, video, canvas) {
          display: inline;
          vertical-align: baseline;
        }
        /* Accent spans inside a block with its own font keep that font (serif heading + italic word). */
        .preview-area.preview-area [style*="font-family"] span:not([style*="font-family"]) {
          font-family: inherit !important;
        }
        .preview-area input:not([type=checkbox]):not([type=radio]),
        .preview-area textarea,
        .preview-area select {
          border-style: solid !important;
        }
        .preview-area :is(input, textarea, select):disabled {
          opacity: 1;
          -webkit-text-fill-color: currentColor;
        }
        .preview-area :is(input, textarea)::placeholder {
          -webkit-text-fill-color: initial;
        }
        /* Storefront checkbox/radio boxes (16px, unselected border, filled + white tick / dot when checked). */
        .preview-area input.wpvfb-choice-box {
          -webkit-appearance: none; appearance: none; width: 16px; height: 16px; min-width: 16px; min-height: 16px;
          border: 1px solid var(--choice-unselected, #71717a); border-radius: 3px; background: #fff; margin: 0;
          display: inline-flex; flex-shrink: 0; box-shadow: none; outline: none; cursor: pointer; padding: 0;
        }
        .preview-area input.wpvfb-choice-box[type=radio] { border-radius: 50%; }
        .preview-area input.wpvfb-choice-box::before { content: none !important; display: none !important; }
        .preview-area input.wpvfb-choice-box[type=checkbox]:checked {
          background-color: var(--choice-selected, #2563EB);
          border-color: var(--choice-selected, #2563EB);
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.2L6.2 11.2L12.8 4.6'/%3E%3C/svg%3E");
          background-position: center; background-repeat: no-repeat; background-size: 15px 15px;
        }
        .preview-area input.wpvfb-choice-box[type=radio]:checked {
          background-color: #fff;
          border-color: var(--choice-selected, #2563EB);
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3C/svg%3E");
          background-position: center; background-repeat: no-repeat; background-size: 14px 14px;
        }
        /* Text without its own line height uses the browser default on the published form (the comparison gate
           neutralises the theme's), not the builder's Tailwind 1.5. */
        .preview-area { line-height: normal; }
        /* wp-admin gives p 1.5 and headings their own line heights; on the site they inherit. */
        .preview-area :is(p, h1, h2, h3, h4, h5, h6, li) { line-height: inherit; }
        /* wp-admin also sets p to 13px and headings to #1d2327: on the site both inherit from the form. */
        .preview-area p { font-size: inherit; }
        .preview-area :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
        .preview-area,
        .preview-area * {
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-rendering: optimizeLegibility;
          box-sizing: border-box;
        }