/* ==========================================================================
    ALUMINIUMGLASS.CO.IN — PUBLIC MARKETPLACE
    CORE BASE STYLES

    File:
    /home/jqkmqvml/public_html/assets/css/core/base.css

    Purpose:
    - Global HTML/body foundation
    - Accessibility-friendly defaults
    - Interactive element baseline
    - Media defaults
    - Form/control baseline
    - Live-data state compatibility
    - No marketplace/demo/fake data
    ========================================================================== */


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

html {
  min-width: 320px;
  min-height: 100%;
  font-family:
    var(
      --font-family-sans,
      Inter,
      "Noto Sans",
      "Noto Sans Devanagari",
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif
    );

  font-size: 100%;
  line-height: var(--line-height-base, 1.5);

  color: var(
    --color-text,
    #0f172a
  );

  background-color: var(
    --color-background,
    #ffffff
  );

  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;

  scroll-behavior: smooth;
}


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

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

  margin: 0;
  padding: 0;

  font-family: inherit;
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--line-height-base, 1.5);

  color: var(
    --color-text,
    #0f172a
  );

  background-color: var(
    --color-background,
    #ffffff
  );

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;
}


/* ==========================================================================
   3. ROOT APPLICATION CONTAINER
   ========================================================================== */

#app,
#root,
[data-app-root] {
  min-height: 100vh;
  min-height: 100dvh;
}


/* ==========================================================================
   4. GLOBAL BOX SIZING
   ========================================================================== */

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


/* ==========================================================================
   5. IMAGES
   ========================================================================== */

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

img {
  height: auto;
}

svg {
  width: auto;
  height: auto;

  fill: currentColor;
}

svg:not([width]):not([height]) {
  max-width: 100%;
}

video,
canvas {
  max-width: 100%;
}


/* ==========================================================================
   6. IMAGE LOADING / BROKEN IMAGE SAFETY
   ========================================================================== */

img[loading="lazy"] {
  content-visibility: auto;
}

img[width][height] {
  height: auto;
}


/* ==========================================================================
   7. LINKS
   ========================================================================== */

a {
  color: var(
    --color-link,
    #2563eb
  );

  text-decoration-thickness:
    max(1px, 0.08em);

  text-underline-offset: 0.18em;

  cursor: pointer;
}

a:hover {
  color: var(
    --color-link-hover,
    #1d4ed8
  );
}

a:active {
  color: var(
    --color-link-active,
    #1e40af
  );
}

a:visited {
  color: var(
    --color-link-visited,
    #4f46e5
  );
}


/* ==========================================================================
   8. ACCESSIBLE FOCUS
   ========================================================================== */

:focus {
  outline: none;
}

:focus-visible {
  outline:
    3px solid
    var(
      --color-focus,
      #2563eb
    );

  outline-offset: 3px;
}


/* ==========================================================================
   9. BUTTON BASE
   ========================================================================== */

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

button {
  margin: 0;

  color: inherit;

  border: 0;

  background: transparent;

  cursor: pointer;
}

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


/* ==========================================================================
   10. FORM CONTROLS
   ========================================================================== */

input,
textarea,
select {
  width: 100%;

  margin: 0;

  color: var(
    --color-input-text,
    var(--color-text, #0f172a)
  );

  background-color: var(
    --color-input-background,
    #ffffff
  );

  border:
    1px solid
    var(
      --color-input-border,
      #cbd5e1
    );

  border-radius:
    var(
      --radius-input,
      0.5rem
    );

  outline: none;
}

input,
select {
  min-height: 2.75rem;
}

textarea {
  min-height: 7rem;

  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(
    --color-placeholder,
    #64748b
  );

  opacity: 1;
}


/* ==========================================================================
   11. FORM CONTROL STATES
   ========================================================================== */

input:hover,
select:hover,
textarea:hover {
  border-color:
    var(
      --color-input-border-hover,
      #94a3b8
    );
}

input:focus,
select:focus,
textarea:focus {
  border-color:
    var(
      --color-input-border-focus,
      #2563eb
    );

  box-shadow:
    0 0 0 3px
    var(
      --color-focus-ring,
      rgb(37 99 235 / 0.15)
    );
}

input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;

  opacity: 0.65;

  background-color:
    var(
      --color-input-disabled,
      #f1f5f9
    );
}


/* ==========================================================================
   12. CHECKBOX / RADIO
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-height: auto;

  margin: 0;

  accent-color:
    var(
      --color-primary,
      #2563eb
    );

  cursor: pointer;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  cursor: not-allowed;
}


/* ==========================================================================
   13. FILE INPUT
   ========================================================================== */

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

  padding:
    var(--space-sm, 0.5rem);

  cursor: pointer;
}

input[type="file"]::file-selector-button {
  margin-right:
    var(--space-sm, 0.5rem);

  padding:
    0.5rem 0.875rem;

  color:
    var(
      --color-button-text,
      #ffffff
    );

  background:
    var(
      --color-primary,
      #2563eb
    );

  border: 0;

  border-radius:
    var(
      --radius-sm,
      0.375rem
    );

  cursor: pointer;
}


/* ==========================================================================
   14. SELECT
   ========================================================================== */

select {
  appearance: auto;
  cursor: pointer;
}

select:disabled {
  cursor: not-allowed;
}


/* ==========================================================================
   15. TABLES
   ========================================================================== */

table {
  width: 100%;

  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding:
    var(--space-sm, 0.5rem)
    var(--space-md, 1rem);

  text-align: left;

  vertical-align: middle;
}

th {
  font-weight:
    var(
      --font-weight-semibold,
      600
    );
}


/* ==========================================================================
   16. HR
   ========================================================================== */

hr {
  height: 1px;

  margin:
    var(--space-lg, 1.5rem)
    0;

  border: 0;

  background:
    var(
      --color-border,
      #e2e8f0
    );
}


/* ==========================================================================
   17. QUOTES
   ========================================================================== */

blockquote {
  margin:
    var(--space-lg, 1.5rem)
    0;

  padding-left:
    var(--space-md, 1rem);

  border-left:
    3px solid
    var(
      --color-primary,
      #2563eb
    );
}


/* ==========================================================================
   18. CODE
   ========================================================================== */

code,
kbd,
samp,
pre {
  font-family:
    var(
      --font-family-mono,
      "SFMono-Regular",
      Consolas,
      "Liberation Mono",
      Menlo,
      monospace
    );
}

code {
  padding:
    0.1em
    0.3em;

  font-size: 0.9em;

  border-radius:
    var(
      --radius-sm,
      0.25rem
    );

  background:
    var(
      --color-code-background,
      #f1f5f9
    );
}

pre {
  max-width: 100%;

  padding:
    var(--space-md, 1rem);

  overflow-x: auto;

  border-radius:
    var(
      --radius-md,
      0.5rem
    );

  background:
    var(
      --color-code-background,
      #f1f5f9
    );
}

pre code {
  padding: 0;

  background: transparent;
}


/* ==========================================================================
   19. LISTS
   ========================================================================== */

ul,
ol {
  margin-top: 0;
}

ul,
ol {
  padding-left:
    1.5rem;
}


/* ==========================================================================
   20. DETAILS / SUMMARY
   ========================================================================== */

details {
  display: block;
}

summary {
  cursor: pointer;

  user-select: none;
}

summary:focus-visible {
  outline:
    3px solid
    var(
      --color-focus,
      #2563eb
    );

  outline-offset: 3px;
}


/* ==========================================================================
   21. DIALOG
   ========================================================================== */

dialog {
  max-width: calc(100vw - 2rem);

  color:
    var(
      --color-text,
      #0f172a
    );

  background:
    var(
      --color-surface,
      #ffffff
    );

  border:
    1px solid
    var(
      --color-border,
      #e2e8f0
    );

  border-radius:
    var(
      --radius-lg,
      0.75rem
    );

  box-shadow:
    var(
      --shadow-lg,
      0 10px 30px rgb(0 0 0 / 0.12)
    );
}

dialog::backdrop {
  background:
    rgb(15 23 42 / 0.55);
}


/* ==========================================================================
   22. DISABLED / ARIA DISABLED
   ========================================================================== */

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


/* ==========================================================================
   23. HIDDEN ATTRIBUTE
   ========================================================================== */

[hidden] {
  display: none !important;
}


/* ==========================================================================
   24. LIVE DATA CONTAINERS
   Presentation states only.
   These do NOT generate or inject marketplace data.
   ========================================================================== */

[data-loading="true"] {
  cursor: progress;
}

[data-loading="true"] [data-loading-hide] {
  visibility: hidden;
}

[data-empty="true"] {
  min-height: 4rem;
}

[data-error="true"] {
  color:
    var(
      --color-danger,
      #dc2626
    );
}


/* ==========================================================================
   25. ASYNC / DYNAMIC CONTENT SAFETY
   ========================================================================== */

[data-content-container] {
  min-width: 0;
}

[data-dynamic-content] {
  min-width: 0;

  overflow-wrap: anywhere;
}


/* ==========================================================================
   26. MEDIA EMBEDS
   ========================================================================== */

iframe {
  max-width: 100%;

  border: 0;
}

iframe[loading="lazy"] {
  display: block;
}


/* ==========================================================================
   27. EMBEDDED MAPS
   ========================================================================== */

.map,
[data-map],
[data-map-container] {
  width: 100%;
  min-height: 16rem;
}

.map iframe,
[data-map] iframe,
[data-map-container] iframe {
  width: 100%;
  min-height: inherit;
}


/* ==========================================================================
   28. ACCESSIBILITY HELPERS
   ========================================================================== */

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


/* ==========================================================================
   29. DRAGGABLE ELEMENTS
   ========================================================================== */

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

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


/* ==========================================================================
   30. TEXT DIRECTION
   ========================================================================== */

[dir="rtl"] {
  direction: rtl;
}

[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-right: 1.5rem;
  padding-left: 0;
}


/* ==========================================================================
   31. MOBILE BASE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 767px) {

  html {
    font-size: 100%;
  }

  body {
    font-size:
      var(
        --font-size-mobile,
        1rem
      );
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  table {
    min-width: 100%;
  }
}


/* ==========================================================================
   32. TABLET
   ========================================================================== */

@media (min-width: 768px) {

  body {
    font-size:
      var(
        --font-size-base,
        1rem
      );
  }
}


/* ==========================================================================
   33. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   34. PRINT
   ========================================================================== */

@media print {

  html,
  body {
    min-width: 0;

    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    word-break: break-all;
  }

  button,
  input,
  select,
  textarea {
    box-shadow: none !important;
  }
}