/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   PUBLIC MARKETPLACE
   CSS RESET / NORMALIZATION
   --------------------------------------------------------------------------
   Purpose:
   - Remove inconsistent browser defaults
   - Establish predictable box sizing
   - Normalize typography and form controls
   - Prevent layout overflow
   - Improve accessibility
   - Provide a clean foundation for the public marketplace UI

   IMPORTANT:
   - No marketplace/business/vendor/product/location data is defined here.
   - No fake/demo/sample content is generated here.
   - Data remains controlled by the API/backend/database.
   ========================================================================== */


/* ==========================================================================
   1. ROOT / DOCUMENT
   ========================================================================== */

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

html:focus-within {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}


/* ==========================================================================
   2. BODY
   ========================================================================== */

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;

  padding: 0;

  background: #ffffff;
  color: #172033;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;

  text-rendering: optimizeLegibility;

  overflow-x: hidden;
}


/* ==========================================================================
   3. MAIN DOCUMENT ELEMENTS
   ========================================================================== */

main,
header,
footer,
nav,
section,
article,
aside,
figure,
figcaption,
form,
fieldset,
legend {
  display: block;
}

main {
  min-width: 0;
}

section,
article,
aside {
  min-width: 0;
}


/* ==========================================================================
   4. HEADINGS
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;

  font: inherit;
  font-weight: inherit;

  overflow-wrap: break-word;
}


/* ==========================================================================
   5. PARAGRAPHS
   ========================================================================== */

p {
  margin: 0;
  padding: 0;

  overflow-wrap: break-word;
}


/* ==========================================================================
   6. LINKS
   ========================================================================== */

a {
  margin: 0;
  padding: 0;

  color: inherit;
  text-decoration: none;

  background-color: transparent;
}

a:hover {
  text-decoration: none;
}

a:focus {
  outline: none;
}

a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}


/* ==========================================================================
   7. LISTS
   ========================================================================== */

ul,
ol,
menu {
  margin: 0;
  padding: 0;

  list-style: none;
}

li {
  margin: 0;
  padding: 0;
}


/* ==========================================================================
   8. MEDIA
   ========================================================================== */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

img {
  border: 0;
}

svg {
  overflow: hidden;
}

svg:not([width]):not([height]) {
  width: auto;
  height: auto;
}

iframe {
  display: block;
  max-width: 100%;
  border: 0;
}


/* ==========================================================================
   9. FIGURES
   ========================================================================== */

figure {
  margin: 0;
}

figcaption {
  margin: 0;
}


/* ==========================================================================
   10. TABLES
   ========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  text-indent: 0;
}

caption {
  margin: 0;
  padding: 0;
  text-align: left;
}

th,
td {
  margin: 0;
  padding: 0;

  text-align: inherit;
  vertical-align: top;
}

th {
  font-weight: inherit;
}


/* ==========================================================================
   11. BUTTONS
   ========================================================================== */

button,
input,
optgroup,
select,
textarea {
  margin: 0;

  font: inherit;
  line-height: inherit;

  color: inherit;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
  appearance: none;
  -webkit-appearance: none;

  border: 0;
  border-radius: 0;

  background: transparent;

  cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="submit"]:disabled,
[type="reset"]:disabled {
  cursor: not-allowed;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button:focus {
  outline: none;
}

button:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
[type="reset"]:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}


/* ==========================================================================
   12. FORM ELEMENTS
   ========================================================================== */

input,
select,
textarea {
  width: auto;
  max-width: 100%;

  border: 0;
  border-radius: 0;

  background: transparent;
}

input,
select,
textarea,
button {
  font-family: inherit;
}

textarea {
  resize: vertical;
}

textarea:not([rows]) {
  min-height: 8rem;
}

select {
  max-width: 100%;
}

fieldset {
  margin: 0;
  padding: 0;

  min-width: 0;

  border: 0;
}

legend {
  padding: 0;
}

label {
  display: inline-block;
}

input::placeholder,
textarea::placeholder {
  color: currentColor;
  opacity: 0.65;
}


/* ==========================================================================
   13. SEARCH / INPUT TYPES
   ========================================================================== */

input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

input[type="file"] {
  max-width: 100%;
}

input[type="color"] {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
}


/* ==========================================================================
   14. AUTOFILL
   ========================================================================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  font: inherit;
}


/* ==========================================================================
   15. TEXT ELEMENTS
   ========================================================================== */

abbr[title] {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  cursor: help;
}

b,
strong {
  font-weight: 700;
}

small {
  font-size: 0.875em;
}

sub,
sup {
  position: relative;

  font-size: 75%;
  line-height: 0;

  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

code,
kbd,
samp,
pre {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
}

pre {
  margin: 0;

  white-space: pre-wrap;
  overflow-wrap: break-word;

  overflow-x: auto;
}

code,
kbd,
samp {
  font-size: 0.9em;
}

hr {
  height: 0;

  margin: 0;
  padding: 0;

  border: 0;
  border-top: 1px solid currentColor;

  opacity: 0.15;
}


/* ==========================================================================
   16. QUOTATIONS
   ========================================================================== */

blockquote,
q {
  margin: 0;
  padding: 0;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
}


/* ==========================================================================
   17. DETAILS / SUMMARY
   ========================================================================== */

details {
  display: block;
}

summary {
  display: list-item;
  cursor: pointer;
}


/* ==========================================================================
   18. DIALOG
   ========================================================================== */

dialog {
  padding: 0;

  border: 0;

  color: inherit;
  background: transparent;
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.55);
}


/* ==========================================================================
   19. PROGRESS
   ========================================================================== */

progress {
  vertical-align: baseline;
}


/* ==========================================================================
   20. ACCESSIBILITY
   ========================================================================== */

/*
 * Visually hidden but available to:
 * - Screen readers
 * - Assistive technology
 * - Accessibility APIs
 */

[hidden] {
  display: none !important;
}

[aria-hidden="true"] {
  pointer-events: none;
}

.sr-only,
.visually-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;

  border: 0 !important;
}


/* ==========================================================================
   21. SKIP LINK FOUNDATION
   ========================================================================== */

.skip-link {
  position: fixed;
  top: 0;
  left: 0;

  z-index: 10000;

  transform: translateY(-120%);

  padding: 0.75rem 1rem;

  background: #111827;
  color: #ffffff;

  font-weight: 700;

  text-decoration: none;

  transition: transform 160ms ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}


/* ==========================================================================
   22. FOCUS
   ========================================================================== */

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}


/* ==========================================================================
   23. DRAGGING / SELECTION
   ========================================================================== */

[draggable="true"] {
  cursor: grab;
}

[draggable="true"]:active {
  cursor: grabbing;
}

::selection {
  background: currentColor;
  color: #ffffff;
}


/* ==========================================================================
   24. EMBEDDED / EXTERNAL CONTENT SAFETY
   ========================================================================== */

object,
embed {
  display: block;
  max-width: 100%;
}

audio {
  display: block;
  max-width: 100%;
}


/* ==========================================================================
   25. OVERFLOW PROTECTION
   ========================================================================== */

html,
body {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
label,
span,
strong,
small,
td,
th {
  overflow-wrap: break-word;
}


/* ==========================================================================
   26. PUBLIC MARKETPLACE CONTENT HOSTS
   ========================================================================== */

[data-component],
[data-page],
[data-section],
[data-region] {
  min-width: 0;
}

[data-component="loader"],
[data-component="empty-state"],
[data-component="error-state"] {
  min-width: 0;
}


/* ==========================================================================
   27. LIVE DATA STATE FOUNDATION
   --------------------------------------------------------------------------
   These are presentation states only.
   They do NOT create marketplace records.
   ========================================================================== */

[data-state="loading"] {
  min-width: 0;
}

[data-state="empty"] {
  min-width: 0;
}

[data-state="error"] {
  min-width: 0;
}

[data-state="unavailable"] {
  min-width: 0;
}


/* ==========================================================================
   28. DISABLED / INACTIVE ELEMENTS
   ========================================================================== */

[disabled],
[aria-disabled="true"] {
  cursor: not-allowed;
}

[aria-busy="true"] {
  cursor: progress;
}


/* ==========================================================================
   29. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   30. PRINT BASE
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html,
  body {
    min-width: 0;
    overflow: visible;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  a {
    color: #000000 !important;
    text-decoration: underline;
  }

  img,
  svg,
  video {
    max-width: 100% !important;
  }

  button,
  input,
  select,
  textarea {
    color: #000000 !important;
  }
}


/* ==========================================================================
   31. HIGH CONTRAST / FORCED COLORS
   ========================================================================== */

@media (forced-colors: active) {
  *,
  *::before,
  *::after {
    forced-color-adjust: auto;
  }

  button,
  input,
  select,
  textarea,
  a {
    forced-color-adjust: auto;
  }
}


/* ==========================================================================
   END OF RESET
   ========================================================================== */