/* ScrapDukaan Core Stylesheet */

/* Font metric overrides to align fallbacks with Inter and Space Grotesk on webfont swap to minimize layout shifts */
@font-face {
    font-family: 'Inter-Fallback';
    src: local('Arial'), local('Helvetica');
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
    size-adjust: 107%;
}

@font-face {
    font-family: 'Space-Grotesk-Fallback';
    src: local('Arial'), local('Helvetica');
    ascent-override: 100%;
    descent-override: 24%;
    line-gap-override: 0%;
    size-adjust: 98%;
}

.step-transition {
    transition: all 0.30s ease-in-out;
}

.whatsapp-pulse {
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.9;
    }
}

/* Custom slow-spin for recyclable icon */
.animate-spin-slow {
    animation: spin 8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Print styles for Documents Checklist Modal, Testimonials and Insights */
@media print {
    body:not(.admin-body) {
        background-color: #fff !important;
        color: #000 !important;
    }

    /* Hide standard headers, footers, navigation, buttons, popups */
    body:not(.admin-body) header, body:not(.admin-body) footer, body:not(.admin-body) nav, body:not(.admin-body) button, .no-print, [class*="whatsapp-button"], #website-scroll-progressbar {
        display: none !important;
    }

    /* Checklist Modal printing rules */
    body:not(.admin-body):not(.print-testimonials-only):not(.print-insights-only) > *:not(#print-modal-container) {
        display: none !important;
    }
    body:not(.print-testimonials-only):not(.print-insights-only) #print-modal-container {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: white !important;
        color: black !important;
        padding: 20px !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        z-index: 99999 !important;
    }
    body:not(.print-testimonials-only):not(.print-insights-only) #print-modal-container > div {
        border: none !important;
        background: white !important;
        box-shadow: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Testimonials printing rules */
    body.print-testimonials-only > *:not(#testimonials) {
        display: none !important;
    }
    body.print-testimonials-only #testimonials {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* Insights printing rules */
    body.print-insights-only > *:not(#insights) {
        display: none !important;
    }
    body.print-insights-only #insights {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* Hide specific non-printable elements */
    .no-print {
        display: none !important;
    }
    /* Style checked state print indicators nicely */
    .print-checkbox {
        -webkit-appearance: checkbox !important;
        appearance: checkbox !important;
    }

    /* Admin-specific print layouts */
    body.admin-body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    body.admin-body header,
    body.admin-body aside,
    body.admin-body .no-print,
    body.admin-body .no-print-stats,
    body.admin-body button,
    body.admin-body a.bg-emerald-600,
    body.admin-body a.bg-rose-600,
    body.admin-body .alert-box,
    body.admin-body tr th:last-child,
    body.admin-body tr td:last-child {
        display: none !important;
    }
    body.admin-body main {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    body.admin-body .grid {
        display: none !important;
    }
    body.admin-body .bg-slate-950\/30,
    body.admin-body .bg-slate-950,
    body.admin-body .border-slate-800\/80 {
        background: transparent !important;
        border-color: #cbd5e1 !important;
    }
    body.admin-body table {
        width: 100% !important;
        border-collapse: collapse !important;
        color: #000000 !important;
    }
    body.admin-body th {
        background-color: #f1f5f9 !important;
        color: #000000 !important;
        border: 1px solid #94a3b8 !important;
        padding: 8px !important;
    }
    body.admin-body td {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #cbd5e1 !important;
        padding: 8px !important;
    }
    body.admin-body h2 {
        color: #000000 !important;
    }
    body.admin-body p {
        color: #334155 !important;
    }
    body.admin-body .text-emerald-400,
    body.admin-body .text-blue-400,
    body.admin-body .text-yellow-400 {
        color: #000000 !important;
        font-weight: bold !important;
    }
}

/* --------------------------------------------------
   U L T R A - S E C U R E  D A R K   M O D E 
   Seamless transition adaptors for static content containers
   -------------------------------------------------- */
html.dark,
html.dark body {
  background-color: #020617 !important; /* slate-950 */
  color: #f1f5f9 !important; /* slate-100 */
  color-scheme: dark;
}

html.dark .bg-white {
  background-color: #0b1329 !important; /* Deep navy/charcoal bento cards */
}

html.dark .bg-slate-50,
html.dark .bg-slate-100 {
  background-color: #020617 !important; /* Deepest background */
}

/* Custom transparency handles */
html.dark .bg-white\/90,
html.dark .bg-white\/80 {
  background-color: rgba(11, 19, 41, 0.9) !important;
}

html.dark .bg-slate-50\/50,
html.dark .bg-slate-100\/50 {
  background-color: rgba(2, 6, 23, 0.5) !important;
}

/* Border adaptations (including opacity border classes like border-slate-200/70) */
html.dark .border-slate-100,
html.dark .border-slate-150,
html.dark .border-slate-200,
html.dark .border-slate-300 {
  border-color: #1e293b !important; /* slate-800 */
}

/* Font and Typography adaptations */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700 {
  color: #f8fafc !important; /* High contrast brand-white */
}

html.dark p,
html.dark .text-slate-600,
html.dark .text-slate-500 {
  color: #94a3b8 !important; /* Balanced accessibility Slate-400 */
}

/* Keep accent brand colors bold and colorful */
html.dark .text-emerald-500,
html.dark .text-emerald-600,
html.dark .text-emerald-700 {
  color: #34d399 !important; /* emerald accent light */
}

/* Forms & Calculator container card support */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #020617 !important;
  color: #f8fafc !important;
  border-color: #334155 !important; /* slate-700 */
}

html.dark input::placeholder {
  color: #64748b !important;
}

/* Lightweight Pure CSS Hover Tooltips */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background-color: #0f172a;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: normal;
  width: 200px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.15s ease-out;
  z-index: 50;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.4;
  font-family: 'Inter', sans-serif;
}

[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  border-width: 5px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: all 0.15s ease-out;
  z-index: 50;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}