/**
 * Customer estimate — phone UX (v3)
 * - Center whole block (buttons + contract) like site marketing cards
 * - Full-width white button card; narrower centered buttons with side gutters for scroll
 * - Contract centered, rounded corners to match button bar
 * - No sideways slide; buttons scroll with page
 */

@media screen and (max-width: 767px) {
  html:has(.a1-est-landing),
  html:has(.a1-est-embed),
  body:has(.a1-est-landing),
  body:has(.a1-est-embed) {
    overflow-x: hidden !important;
    max-width: 100% !important;
    overscroll-behavior-x: none !important;
  }

  /*
   * Kill desktop “sidebar offset” layout on phone so content is centered
   * (inline styles use --a1-group-left / --a1-group-w which shove content right).
   */
  .a1-est-landing,
  .a1-est-embed {
    --a1-group-left: 0px !important;
    --a1-group-w: 100% !important;
    --a1-side-col: 0px !important;
    --a1-group-gap: 0px !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.65rem !important;
    /* Extra bottom so continuous scroll can reach true end of content */
    padding-bottom: 2.5rem !important;
    box-sizing: border-box !important;
    align-items: center !important;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: none;
  }

  /* Every major block: centered, same column width */
  .a1-est-landing #a1-your-estimate,
  .a1-est-embed #a1-your-estimate,
  .a1-est-landing .w-full.overflow-x-auto,
  .a1-est-embed .w-full.overflow-x-auto,
  .a1-est-landing .a1-photos-expand-box,
  .a1-est-embed .a1-photos-expand-box,
  .a1-est-landing > div.w-full.overflow-x-auto.flex.justify-center,
  .a1-est-embed > div.w-full.overflow-x-auto.flex.justify-center {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
  }

  /*
   * Action bar card: full column width (same as before size-wise), rounded.
   * Buttons inside are narrower + centered so left/right gutters are scroll-safe.
   */
  .a1-est-landing #a1-your-estimate,
  .a1-est-embed #a1-your-estimate {
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    align-content: center !important;
    gap: 0.4rem 0.45rem !important;
    /*
     * Taller white card: equal air above + below the buttons.
     * Override React pt-4 / padding utilities so top is never tight.
     */
    padding: 1.35rem 1.15rem !important;
    padding-top: 1.35rem !important;
    padding-bottom: 1.35rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 1rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
    grid-template-columns: unset !important;
  }

  .a1-est-landing #a1-your-estimate > button,
  .a1-est-landing #a1-your-estimate > .a1-have-q-wrap,
  .a1-est-embed #a1-your-estimate > button,
  .a1-est-embed #a1-your-estimate > .a1-have-q-wrap {
    /* ~2 per row, but not edge-to-edge — leaves white gutters */
    flex: 0 0 calc(50% - 0.9rem) !important;
    width: calc(50% - 0.9rem) !important;
    max-width: 8.25rem !important;
    min-width: 0 !important;
    padding: 0.4rem 0.3rem !important;
    margin: 0 !important;
    border-radius: 0.75rem !important;
    box-sizing: border-box !important;
  }

  .a1-est-landing #a1-your-estimate > .a1-have-q-wrap > button,
  .a1-est-embed #a1-your-estimate > .a1-have-q-wrap > button,
  .a1-est-landing #a1-your-estimate .a1-have-q-btn,
  .a1-est-embed #a1-your-estimate .a1-have-q-btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.4rem 0.3rem !important;
    border-radius: 0.75rem !important;
  }

  .a1-est-landing #a1-your-estimate .w-16,
  .a1-est-landing #a1-your-estimate .sm\:w-20,
  .a1-est-embed #a1-your-estimate .w-16,
  .a1-est-embed #a1-your-estimate .sm\:w-20 {
    width: 2.2rem !important;
    height: 2.2rem !important;
    margin-bottom: 0.28rem !important;
  }

  .a1-est-landing #a1-your-estimate .w-8,
  .a1-est-landing #a1-your-estimate .sm\:w-10,
  .a1-est-embed #a1-your-estimate .w-8,
  .a1-est-embed #a1-your-estimate .sm\:w-10 {
    width: 1.1rem !important;
    height: 1.1rem !important;
  }

  .a1-est-landing #a1-your-estimate span.font-semibold,
  .a1-est-embed #a1-your-estimate span.font-semibold {
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
  }

  /*
   * Flex order on phone: buttons → photos → contract → Why Choose
   * (sidebar was order:99 which sat far below after inflated host height)
   */
  .a1-est-landing #a1-your-estimate,
  .a1-est-embed #a1-your-estimate {
    order: 1 !important;
  }
  .a1-est-landing .a1-photos-expand-box,
  .a1-est-embed .a1-photos-expand-box {
    order: 2 !important;
  }
  .a1-est-landing .w-full.overflow-x-auto,
  .a1-est-embed .w-full.overflow-x-auto {
    order: 3 !important;
  }
  .a1-est-landing .a1-est-sidebar,
  .a1-est-embed .a1-est-sidebar {
    order: 4 !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.5rem auto 1.25rem !important;
    padding: 0 !important;
    top: auto !important;
    right: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /*
   * v9: NO css zoom (caused doubled/larger text).
   * Host never clips. Scale is transform on #estimate-document only (JS).
   */
  .a1-est-landing .w-full.overflow-x-auto,
  .a1-est-embed .w-full.overflow-x-auto,
  .a1-est-landing .a1-doc-scale-host,
  .a1-est-embed .a1-doc-scale-host {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0.5rem !important;
    zoom: normal !important;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: none;
  }

  /* Full white contract — rounded; extra bottom pad via JS so corners cover last edge */
  .a1-est-landing #estimate-document.estimate-document,
  .a1-est-embed #estimate-document.estimate-document,
  .a1-est-landing .estimate-document,
  .a1-est-embed .estimate-document {
    width: var(--a1-doc-natural-w, 1000px) !important;
    min-width: var(--a1-doc-natural-w, 1000px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    border-radius: 1rem !important;
    overflow: visible !important;
    background: #ffffff !important;
    background-clip: padding-box !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e4e4e7 !important;
    zoom: normal !important;
    transform-origin: top center !important;
    -webkit-font-smoothing: antialiased;
  }

  .a1-est-landing #estimate-document .header-banner,
  .a1-est-embed #estimate-document .header-banner {
    border-radius: 1rem 1rem 0 0 !important;
    overflow: hidden !important;
  }

  .a1-est-landing .a1-photos-expand-box,
  .a1-est-embed .a1-photos-expand-box {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 1rem !important;
  }

  /*
   * Question popup base styles.
   * Position/size/un-zoom are applied by JS (visualViewport device-fixed).
   * Bottom-anchored sheet so Cancel / Send stay visible.
   */
  #a1-question-host-root {
    position: relative;
    z-index: 2147483000;
  }
  #a1-question-host-root [role="dialog"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 1rem 1rem 0.75rem 0.75rem !important;
    flex-shrink: 0 !important;
  }
  #a1-question-host-root input,
  #a1-question-host-root textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  #a1-question-host-root textarea {
    min-height: 96px;
  }
  #a1-question-host-root .a1-send-to-a1-btn,
  #a1-question-host-root .a1-q-cancel-btn {
    min-height: 44px !important;
    touch-action: manipulation;
    position: relative !important;
    z-index: 2 !important;
  }

  .a1-est-landing #estimate-document .cursor-pointer,
  .a1-est-embed #estimate-document .cursor-pointer {
    touch-action: manipulation;
  }
}

@media screen and (min-width: 768px) {
  .a1-est-landing #estimate-document.estimate-document,
  .a1-est-embed #estimate-document.estimate-document {
    transform: none !important;
  }
}

@media print {
  .a1-est-landing #a1-your-estimate,
  .a1-est-embed #a1-your-estimate {
    display: none !important;
  }
  .a1-est-landing #estimate-document.estimate-document,
  .a1-est-embed #estimate-document.estimate-document {
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
  }
}


/* v5 — beat React padding-top:0 (also forced in JS) */
@media screen and (max-width: 767px) {
  #root .a1-est-landing #a1-your-estimate,
  #root .a1-est-embed #a1-your-estimate,
  .a1-est-landing.a1-est-embed #a1-your-estimate,
  body .a1-est-landing #a1-your-estimate {
    padding: 1.45rem 1.15rem !important;
    padding-top: 1.45rem !important;
    padding-bottom: 1.45rem !important;
  }
  #root .a1-est-landing.a1-est-embed,
  #root .a1-est-embed.a1-est-landing {
    padding-top: 0.5rem !important;
    min-height: auto !important;
  }
}