/**
 * A1 button feel — consistent tactile hover everywhere
 * Red:  #d02127 → #a0181e (same as Get a quote primary-dark)
 * White/outline: white → #f1f5f9 gray fill
 * Link-style red (Back to Estimate): no underline until hover
 */

:root {
  --a1-red: #d02127;
  --a1-red-dark: #a0181e;
  --a1-white-hover: #f1f5f9;
  --a1-border: #cbd5e1;
  --a1-border-hover: #94a3b8;
}

/* ─── RED solid buttons ─── */
button.bg-primary:not(:disabled),
a.bg-primary,
.bg-primary.text-primary-foreground,
button[class*="bg-primary"],
a[class*="bg-primary"],
button.a1-send-to-a1-btn,
button.a1-send-btn,
.a1-send-to-a1-btn,
.a1-send-btn,
button.a1-btn-save-as,
.a1-btn-save-as,
button.a1-saveas-confirm,
.a1-saveas-confirm,
button.h-8.text-xs.text-white,
button.h-8.text-xs.bg-\[\#d02127\],
#estimate-document button.h-8.text-xs.text-white,
a.a1-jobs-done-btn,
.a1-jobs-done-btn,
button.py-6.px-8.text-white,
#a1-qr-custom-list .btn-est,
button[style*="d02127"],
a[style*="d02127"] {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease !important;
}

/* Base red fill (when we own the class) */
.a1-send-to-a1-btn,
.a1-send-btn,
button.a1-btn-save-as,
button.a1-saveas-confirm,
.a1-saveas-confirm,
a.a1-jobs-done-btn,
.a1-jobs-done-btn {
  background-color: var(--a1-red) !important;
  background-image: none !important;
  border-color: var(--a1-red) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Hover darken — the tactile feel */
button.bg-primary:hover:not(:disabled),
a.bg-primary:hover,
button[class*="bg-primary"]:hover:not(:disabled),
a[class*="bg-primary"]:hover,
.bg-primary:hover:not(:disabled),
.a1-send-to-a1-btn:hover:not(:disabled),
.a1-send-btn:hover:not(:disabled),
button.a1-btn-save-as:hover:not(:disabled),
button.a1-saveas-confirm:hover:not(:disabled),
.a1-saveas-confirm:hover:not(:disabled),
#estimate-document button.h-8.text-xs.text-white:hover:not(:disabled),
button.h-8.text-xs.text-white:hover:not(:disabled),
button.h-8.text-xs.bg-\[\#d02127\]:hover:not(:disabled),
a.a1-jobs-done-btn:hover,
.a1-jobs-done-btn:hover,
/* Bottom red actions only — NOT the black Save button */
button.py-6.px-8.text-white.a1-btn-save-as:hover:not(:disabled),
button.py-6.px-8.text-white[style*="d02127"]:hover:not(:disabled),
button.py-6.px-8.text-white.hover\:bg-\[\#a0181e\]:hover:not(:disabled),
#a1-qr-custom-list .btn-est:hover,
button[class*="bg-\[\#d02127\]"]:hover:not(:disabled),
a[class*="bg-\[\#d02127\]"]:hover {
  background-color: var(--a1-red-dark) !important;
  background-image: none !important;
  border-color: var(--a1-red-dark) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Bottom black SAVE → dark gray hover (white label stays readable) */
button.bg-black.text-white:hover:not(:disabled),
button.py-6.px-8.bg-black:hover:not(:disabled),
button.bg-black.hover\:bg-neutral-900:hover:not(:disabled),
button[class*="bg-black"][class*="text-white"]:hover:not(:disabled) {
  background-color: #3f3f46 !important; /* zinc-700 dark gray */
  background-image: none !important;
  border-color: #3f3f46 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Tailwind hover:bg-primary/90 often too subtle — force darker */
button.hover\:bg-primary\/90:hover:not(:disabled),
a.hover\:bg-primary\/90:hover {
  background-color: var(--a1-red-dark) !important;
}

/* ─── WHITE / outline buttons ─── */
button.a1-btn-save,
.a1-btn-save,
button.a1-saveas-cancel,
.a1-saveas-cancel,
.a1-q-cancel-btn,
#estimate-document button.h-8.text-xs.bg-white,
button.h-8.text-xs.bg-white,
button.border.bg-background,
button[class*="bg-white"].border {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease !important;
}

button.a1-btn-save:hover:not(:disabled),
.a1-btn-save:hover:not(:disabled),
button.a1-saveas-cancel:hover:not(:disabled),
.a1-saveas-cancel:hover:not(:disabled),
.a1-q-cancel-btn:hover:not(:disabled),
#estimate-document button.h-8.text-xs.bg-white:hover:not(:disabled),
button.h-8.text-xs.bg-white:hover:not(:disabled) {
  background-color: var(--a1-white-hover) !important;
  border-color: var(--a1-border-hover) !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* Shadcn outline + secondary used for white-ish admin actions */
button.bg-background:hover:not(:disabled):not(.bg-primary),
button[class*="bg-secondary"]:hover:not(:disabled) {
  background-color: var(--a1-white-hover) !important;
}

/* ─── Header: Dashboard + Schedule — always outlined, gray hover ─── */
header a[href="/schedule"] > button,
header a[href="/admin-dashboard"] > button,
header a[href*="admin-dashboard"] > button,
header a[href="/schedule"] button,
header a[href*="/schedule"] button {
  border: 1px solid var(--a1-border) !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  box-shadow: none !important;
}
header a[href="/schedule"] > button:hover,
header a[href="/admin-dashboard"] > button:hover,
header a[href*="admin-dashboard"] > button:hover,
header a[href="/schedule"] button:hover,
header a[href*="/schedule"] button:hover {
  background-color: var(--a1-white-hover) !important;
  border-color: var(--a1-border-hover) !important;
  color: #0f172a !important;
}
/* Active route — still outlined, slightly filled */
header a[href="/schedule"] > button[data-active="true"],
header a[href*="admin-dashboard"] > button[data-active="true"] {
  background-color: #f1f5f9 !important;
  border-color: var(--a1-border-hover) !important;
}

/* Generic ghost header buttons that look bare */
header button[class*="ghost"]:not([class*="bg-primary"]):not(.bg-primary) {
  border: 1px solid var(--a1-border) !important;
}
header button[class*="ghost"]:hover:not([class*="bg-primary"]):not(.bg-primary) {
  background-color: var(--a1-white-hover) !important;
  border-color: var(--a1-border-hover) !important;
}

/* Account outline already has border — strengthen hover gray */
header button[class*="outline"]:hover:not(:disabled) {
  background-color: var(--a1-white-hover) !important;
  border-color: var(--a1-border-hover) !important;
}

/* ─── Print Document & similar white toolbar buttons ─── */
#estimate-document button.bg-white:hover:not(:disabled),
#estimate-document button[class*="bg-white"]:hover:not(:disabled),
.a1-est-landing button.bg-white:hover:not(:disabled) {
  background-color: var(--a1-white-hover) !important;
  border-color: var(--a1-border-hover) !important;
}

/* Force red darken for common hex / rgb inline */
button[style*="#d02127"]:hover:not(:disabled),
a[style*="#d02127"]:hover,
button[style*="d02127"]:hover:not(:disabled),
a[style*="d02127"]:hover {
  background-color: var(--a1-red-dark) !important;
  border-color: var(--a1-red-dark) !important;
  color: #fff !important;
}

/* Logo hover: NO brightness. Swap to logo-hover.png via JS (red #a0181e). */
.a1-logo img,
header a[aria-label*="home" i] img,
header a[href="/"] img,
header img[src*="logo"] {
  transition: opacity 0.12s ease, transform 0.12s ease;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)) !important;
}
.a1-logo:hover img,
header a[aria-label*="home" i]:hover img,
header a[href="/"]:hover img {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)) !important;
}

/* Black bottom Save — ensure transition (hover color set above) */
button.bg-black.text-white,
button.py-6.px-8.bg-black {
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
/* === A1_PHONE_NO_HOVER_LIFT_EQUAL_V4 — no bounce/blue sticky; equal tiles; drop more === */
@media (max-width: 899px) {
  /* Drop whole bar + page again by same step as last time (~1.4rem more) */
  html:has(.a1-est-landing) .a1-est-landing,
  html body .a1-est-landing,
  .a1-est-landing {
    padding-top: 4.65rem !important;
  }
  html:has(.a1-est-landing) .a1-site-spacer,
  html body .a1-site-spacer {
    min-height: 6.9rem !important;
    height: 6.9rem !important;
  }
  html body .a1-est-landing #a1-your-estimate,
  html.a1-customer-link #a1-your-estimate,
  #a1-your-estimate {
    margin-top: 5.1rem !important;
  }

  /* Kill hover / active / focus motion and sticky "up + blue" */
  html body .a1-est-landing #a1-your-estimate > *,
  html body .a1-est-landing #a1-your-estimate > button,
  html body .a1-est-landing #a1-your-estimate > .a1-have-q-wrap,
  html body .a1-est-landing #a1-your-estimate button,
  html body .a1-est-landing #a1-your-estimate .a1-have-q-wrap,
  html body .a1-est-landing #a1-your-estimate .a1-have-q-btn,
  html.a1-customer-link #a1-your-estimate > *,
  html.a1-customer-link #a1-your-estimate button {
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  html body .a1-est-landing #a1-your-estimate > *:hover,
  html body .a1-est-landing #a1-your-estimate > *:active,
  html body .a1-est-landing #a1-your-estimate > *:focus,
  html body .a1-est-landing #a1-your-estimate > *:focus-visible,
  html body .a1-est-landing #a1-your-estimate button:hover,
  html body .a1-est-landing #a1-your-estimate button:active,
  html body .a1-est-landing #a1-your-estimate button:focus,
  html body .a1-est-landing #a1-your-estimate .a1-have-q-wrap:hover,
  html body .a1-est-landing #a1-your-estimate .a1-have-q-wrap:active,
  html body .a1-est-landing #a1-your-estimate .a1-have-q-btn:hover,
  html body .a1-est-landing #a1-your-estimate .a1-have-q-btn:active,
  html body .a1-est-landing #a1-your-estimate .rounded-full:hover,
  html body .a1-est-landing #a1-your-estimate [class*="rounded-full"]:hover,
  html.a1-customer-link #a1-your-estimate button:hover,
  html.a1-customer-link #a1-your-estimate .a1-have-q-wrap:hover {
    transform: none !important;
    -webkit-transform: none !important;
    translate: none !important;
    scale: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    ring: none !important;
  }
  /* Equal size — every tile identical; HARD pin Print|Download top */
  html body .a1-est-landing #a1-your-estimate {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 80px 80px !important;
    grid-auto-rows: 80px !important;
    grid-template-areas: "print download" "photos qinv" !important;
    gap: 0.5rem 0.55rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 5.1rem !important;
  }
  html body .a1-est-landing #a1-your-estimate > [data-a1-slot="print"] {
    grid-area: print !important;
    order: 1 !important;
  }
  html body .a1-est-landing #a1-your-estimate > [data-a1-slot="download"] {
    grid-area: download !important;
    order: 2 !important;
  }
  html body .a1-est-landing #a1-your-estimate > [data-a1-slot="photos"] {
    grid-area: photos !important;
    order: 3 !important;
  }
  html body .a1-est-landing #a1-your-estimate > [data-a1-slot="question"],
  html body .a1-est-landing #a1-your-estimate > [data-a1-slot="invoice"] {
    grid-area: qinv !important;
    order: 4 !important;
  }
  html body .a1-est-landing #a1-your-estimate > *,
  html body .a1-est-landing #a1-your-estimate > button,
  html body .a1-est-landing #a1-your-estimate > .a1-have-q-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    flex: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  html body .a1-est-landing #a1-your-estimate > button,
  html body .a1-est-landing #a1-your-estimate > .a1-have-q-wrap > button,
  html body .a1-est-landing #a1-your-estimate .a1-have-q-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    margin: 0 !important;
    transform: none !important;
  }
}
/* A1_PHONE_NTH_PIN_REACT_ORDER */
/* React DOM order is Photos, Download, Print, Question/Invoice.
   Flex-wrap made kitty-corner. Map nth-child → grid areas (phone only).
   Desktop row order is untouched. */
@media (max-width: 1023px) {
  html body .a1-est-landing #a1-your-estimate,
  html.a1-customer-link #a1-your-estimate,
  html.a1-on-customer-est #a1-your-estimate,
  #a1-your-estimate {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 80px 80px !important;
    grid-template-areas: "print download" "photos qinv" !important;
    margin-top: 5.1rem !important;
  }
  /* 1=Photos 2=Download 3=Print 4=Question|Invoice */
  html body .a1-est-landing #a1-your-estimate > *:nth-child(1),
  #a1-your-estimate > *:nth-child(1) {
    grid-area: photos !important;
    order: 3 !important;
  }
  html body .a1-est-landing #a1-your-estimate > *:nth-child(2),
  #a1-your-estimate > *:nth-child(2) {
    grid-area: download !important;
    order: 2 !important;
  }
  html body .a1-est-landing #a1-your-estimate > *:nth-child(3),
  #a1-your-estimate > *:nth-child(3) {
    grid-area: print !important;
    order: 1 !important;
  }
  html body .a1-est-landing #a1-your-estimate > *:nth-child(4),
  #a1-your-estimate > *:nth-child(4),
  html body .a1-est-landing #a1-your-estimate > *:nth-child(n+4),
  #a1-your-estimate > *:nth-child(n+4) {
    grid-area: qinv !important;
    order: 4 !important;
  }
}

/* drop-both-15-restore */

/* email-perfect-restore-17 */