/* ============================================================
   reset.css — ImageResizer.me
   
   YEH FILE KYA KARTI HAI:
   Har browser (Chrome, Firefox, Safari, Edge) apne 
   default styles laata hai. Yeh file un sab ko reset 
   karke ek clean base banati hai. Isse website har 
   browser mein exactly same dikhti hai.
   
   NOTE: Yeh file variables.css KE BAAD load honi chahiye
   ============================================================ */


/* ──────────────────────────────────────────
   1. BOX SIZING
   Sabhi elements ka size calculation fix karna
   border aur padding include hoga width mein
────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box; /* Padding/border width mein count hoga */
  margin: 0;              /* Default margin hatao */
  padding: 0;             /* Default padding hatao */
}


/* ──────────────────────────────────────────
   2. HTML & BODY BASE
   Poori website ki foundation
────────────────────────────────────────── */
html {
  font-size: 16px;              /* 1rem = 16px */
  scroll-behavior: smooth;      /* Smooth scrolling */
  text-size-adjust: 100%;       /* Mobile mein font zoom band */
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-gray-800);
  background-color: var(--color-gray-50);

  /* Text rendering improve karna */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Horizontal scroll band karna */
  overflow-x: hidden;

  /* Minimum height full screen */
  min-height: 100vh;
}


/* ──────────────────────────────────────────
   3. TYPOGRAPHY RESET
   Headings, paragraphs, lists
────────────────────────────────────────── */

/* Headings — font inherit karein */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-gray-900);
  letter-spacing: var(--tracking-tight);
}

/* Paragraph */
p {
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
}

/* Lists */
ul, ol {
  list-style: none; /* Default bullet/numbers hatao */
}

/* ──────────────────────────────────────────
   4. LINKS
────────────────────────────────────────── */
a {
  color: inherit;           /* Parent ka color use karo */
  text-decoration: none;    /* Underline hatao by default */
  transition: var(--transition-normal);
}

a:hover {
  color: var(--color-blue);
}


/* ──────────────────────────────────────────
   5. IMAGES & MEDIA
────────────────────────────────────────── */
img,
picture,
video,
canvas,
svg {
  display: block;     /* Inline se block — bottom gap fix */
  max-width: 100%;    /* Kabhi bhi container se baahar nahi jayega */
}

img {
  height: auto;       /* Aspect ratio maintain karo */
}


/* ──────────────────────────────────────────
   6. FORM ELEMENTS RESET
   Buttons, inputs, selects
────────────────────────────────────────── */

/* Sabhi form elements font inherit karein */
input,
button,
textarea,
select,
optgroup {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Button reset */
button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /* Mobile tap delay hatao */
}

button:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Input reset */
input {
  border: none;
  outline: none;
  background: none;
}

/* Number input — arrows hatao */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Range input — custom styling ke liye reset */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  cursor: pointer;
}

/* File input */
input[type="file"] {
  cursor: pointer;
}

/* Textarea */
textarea {
  resize: vertical; /* Sirf vertical resize allow karo */
  border: none;
  outline: none;
}

/* Select */
select {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  appearance: none;           /* Default arrow hatao */
  -webkit-appearance: none;
}

/* Color input */
input[type="color"] {
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Fieldset */
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}


/* ──────────────────────────────────────────
   7. TABLE RESET
────────────────────────────────────────── */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}


/* ──────────────────────────────────────────
   8. HR (Horizontal Rule)
────────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--color-gray-200);
  margin: var(--space-4) 0;
}


/* ──────────────────────────────────────────
   9. HIDDEN CANVAS
   Image processing ke liye JS use karta hai
────────────────────────────────────────── */
#ir-canvas {
  display: none !important;
  position: absolute;
  top: -9999px;
  left: -9999px;
}


/* ──────────────────────────────────────────
   10. VIEW SYSTEM
   Home view aur Tool view toggle ke liye
────────────────────────────────────────── */
.ir-view {
  display: none; /* Default mein hidden */
}

.ir-view.active {
  display: block; /* Jab active ho tab dikhao */
}


/* ──────────────────────────────────────────
   11. NOTIFICATION TOAST
   Success/Error messages ke liye
────────────────────────────────────────── */
#ir-notif {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-toast);

  /* Default mein hidden */
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  visibility: hidden;

  /* Style */
  background: var(--color-gray-900);
  color: var(--color-white);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  box-shadow: var(--shadow-xl);
  white-space: nowrap;
  max-width: 320px;

  /* Animation */
  transition:
    opacity    0.25s ease,
    transform  0.25s ease,
    visibility 0.25s ease;
}

/* Toast show state */
#ir-notif.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* Toast types */
#ir-notif.success {
  background: #065F46; /* Dark green */
}

#ir-notif.error {
  background: #7F1D1D; /* Dark red */
}

#ir-notif.warning {
  background: #78350F; /* Dark amber */
}


/* ──────────────────────────────────────────
   12. SCROLLBAR CUSTOM STYLE
   Chrome/Edge mein custom scrollbar
────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}


/* ──────────────────────────────────────────
   13. SELECTION COLOR
   Text select karne par highlight color
────────────────────────────────────────── */
::selection {
  background: var(--color-blue-mid);
  color: var(--color-blue-dark);
}


/* ──────────────────────────────────────────
   14. FOCUS STYLES
   Keyboard navigation ke liye
   (Accessibility important hai!)
────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Mouse click pe outline nahi chahiye */
:focus:not(:focus-visible) {
  outline: none;
}


/* ──────────────────────────────────────────
   15. UTILITY CLASSES
   Kaam ki chhoti chhoti classes
────────────────────────────────────────── */

/* Text ko center karo */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Flex helpers */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }

/* Gap helpers */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Width helpers */
.w-full  { width: 100%; }
.h-full  { height: 100%; }

/* Container — content ko center mein rakhta hai */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

/* Visually hidden (screen readers ke liye) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Truncate long text with ... */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ──────────────────────────────────────────
   16. ANIMATIONS
   Reusable keyframes
────────────────────────────────────────── */

/* Fade + slide up — cards ke liye */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in — simple */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Spin — loading indicator */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pulse — attention ke liye */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* Animation utility classes */
.anim-fade-up {
  animation: fadeUp 0.35s ease both;
}

.anim-fade-in {
  animation: fadeIn 0.25s ease both;
}

/* Animation delays — cards ke liye */
.anim-delay-1 { animation-delay: 0.05s; }
.anim-delay-2 { animation-delay: 0.10s; }
.anim-delay-3 { animation-delay: 0.15s; }
.anim-delay-4 { animation-delay: 0.20s; }
.anim-delay-5 { animation-delay: 0.25s; }
.anim-delay-6 { animation-delay: 0.30s; }


/* ──────────────────────────────────────────
   17. RESPONSIVE BREAKPOINTS (Reference)
   
   Mobile:  < 480px
   Tablet:  480px — 768px
   Laptop:  768px — 1024px
   Desktop: > 1024px
   
   Usage:
   @media (max-width: 768px) { ... }
────────────────────────────────────────── */