/**
 * Jijo Market - Base Styles & Typography
 * Replicating sabadi-master font stack, utilities and layout container
 */

/* Import IranYekanX with Persian Numerals */
@font-face {
  font-family: 'IRANYekanX';
  src: url('../fonts/WebfontsFaNumYekan/Woff2/IRANYekanXFaNum-Regular.woff2') format('woff2'),
       url('../fonts/WebfontsFaNumYekan/Woff/IRANYekanXFaNum-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANYekanX';
  src: url('../fonts/WebfontsFaNumYekan/Woff2/IRANYekanXFaNum-Medium.woff2') format('woff2'),
       url('../fonts/WebfontsFaNumYekan/Woff/IRANYekanXFaNum-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANYekanX';
  src: url('../fonts/WebfontsFaNumYekan/Woff2/IRANYekanXFaNum-Bold.woff2') format('woff2'),
       url('../fonts/WebfontsFaNumYekan/Woff/IRANYekanXFaNum-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANYekanX';
  src: url('../fonts/WebfontsFaNumYekan/Woff2/IRANYekanXFaNum-ExtraBold.woff2') format('woff2'),
       url('../fonts/WebfontsFaNumYekan/Woff/IRANYekanXFaNum-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Fallback IRANSans */
@font-face {
  font-family: 'IranSans';
  src: url('../fonts/IRANSans4/IRANSans4/Web/fonts/woff2/IRANSansWeb.woff2') format('woff2');
  font-weight: 400;
}

/* CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 14px;
  direction: rtl;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: 'IRANYekanX', 'IranSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  direction: rtl;
  text-align: right;
  background-color: var(--schema-background-light);
  color: var(--foreground-background-he);
  line-height: 1.6;
  min-height: 100%;
  overflow-x: hidden;
  font-feature-settings: "ss02";
  -webkit-font-feature-settings: "ss02";
  -moz-font-feature-settings: "ss02";
}

body.modal-open {
  overflow: hidden;
  touch-action: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

button {
  cursor: pointer;
  user-select: none;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Layout Framework */
.bg-layout {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background-color: #f1f3f6;
}

.layout-container {
  width: 100%;
  max-width: var(--fixed-width);
  min-height: 100vh;
  background-color: var(--white-0);
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  position: relative;
}

.scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: calc(var(--bottom-nav-height) + 16px);
  -webkit-overflow-scrolling: touch;
}

.scroll-area.no-bottom-nav {
  padding-bottom: 24px;
}

/* Typography Hierarchy (From Sabadi Design System) */
.txt-h1-b { font-size: 20px; font-weight: 700; line-height: 32px; }
.txt-h2-b { font-size: 18px; font-weight: 700; line-height: 28px; }
.txt-t1-b { font-size: 16px; font-weight: 700; line-height: 26px; }
.txt-t1-m { font-size: 16px; font-weight: 500; line-height: 26px; }
.txt-t1-r { font-size: 16px; font-weight: 400; line-height: 26px; }
.txt-t2-b { font-size: 14px; font-weight: 700; line-height: 22px; }
.txt-t2-m { font-size: 14px; font-weight: 500; line-height: 22px; }
.txt-t2-r { font-size: 14px; font-weight: 400; line-height: 22px; }
.txt-t3-b { font-size: 12px; font-weight: 700; line-height: 18px; }
.txt-t3-m { font-size: 12px; font-weight: 500; line-height: 18px; }
.txt-t3-r { font-size: 12px; font-weight: 400; line-height: 18px; }

.desc-r { font-size: 12px; font-weight: 400; color: var(--foreground-background-me); }
.desc-m { font-size: 12px; font-weight: 500; color: var(--foreground-background-me); }
.desc-l { font-size: 11px; font-weight: 400; color: var(--gray-500); }

/* Common Spacings & Helpers (Sabadi conventions) */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.justify-content-start { justify-content: flex-start; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* Margin utilities */
.mr-auto { margin: auto; }
.mr-x-auto { margin-left: auto; margin-right: auto; }
.mr-t-4 { margin-top: 4px; }
.mr-t-8 { margin-top: 8px; }
.mr-t-12 { margin-top: 12px; }
.mr-t-16 { margin-top: 16px; }
.mr-t-20 { margin-top: 20px; }
.mr-t-24 { margin-top: 24px; }
.mr-b-4 { margin-bottom: 4px; }
.mr-b-8 { margin-bottom: 8px; }
.mr-b-12 { margin-bottom: 12px; }
.mr-b-16 { margin-bottom: 16px; }
.mr-b-20 { margin-bottom: 20px; }
.mr-b-24 { margin-bottom: 24px; }
.mr-r-4 { margin-right: 4px; }
.mr-r-8 { margin-right: 8px; }
.mr-r-12 { margin-right: 12px; }
.mr-r-16 { margin-right: 16px; }
.mr-l-4 { margin-left: 4px; }
.mr-l-8 { margin-left: 8px; }
.mr-l-12 { margin-left: 12px; }
.mr-l-16 { margin-left: 16px; }
.mr-16 { margin: 16px; }
.mr-20 { margin: 20px; }

/* Padding utilities */
.pd-0 { padding: 0 !important; }
.pd-x-8 { padding-left: 8px; padding-right: 8px; }
.pd-x-12 { padding-left: 12px; padding-right: 12px; }
.pd-x-16 { padding-left: 16px; padding-right: 16px; }
.pd-x-20 { padding-left: 20px; padding-right: 20px; }
.pd-y-8 { padding-top: 8px; padding-bottom: 8px; }
.pd-y-12 { padding-top: 12px; padding-bottom: 12px; }
.pd-y-16 { padding-top: 16px; padding-bottom: 16px; }
.pd-y-20 { padding-top: 20px; padding-bottom: 20px; }
.pd-12 { padding: 12px; }
.pd-16 { padding: 16px; }
.pd-20 { padding: 20px; }

/* Badges & Color Helpers */
.badge-green {
  background-color: var(--primary-50);
  color: var(--primary-800);
  border: 1px solid var(--primary-200);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

.badge-red {
  background-color: var(--red-50);
  color: var(--red-600);
  border: 1px solid var(--red-100);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

.badge-blue {
  background-color: var(--blue-50);
  color: var(--blue-600);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

.badge-yellow {
  background-color: var(--yellow-50);
  color: var(--yellow-600);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

/* Dot status indicator */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.dot.open { background-color: var(--primary-main); }
.dot.close { background-color: var(--red-500); }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}