@import "tailwindcss";
@import "@radix-ui/themes/styles.css";
@import "tw-animate-css";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
	--breakpoint-desktop-3xl : 1920px;
	--breakpoint-offer-wrap : 1890px;
	--breakpoint-desktop-2-3xl : 1664px;
	--breakpoint-desktop-2xl : 1610px;
	--breakpoint-desktop-xl : 1450px;
	--breakpoint-desktop-l : 1376px;
	--breakpoint-desktop-s : 1290px;
	--breakpoint-desktop-xs : 1211px;
	--breakpoint-desktop-xsx : 1110px;
	--breakpoint-laptop-xl : 1034px; 
	--breakpoint-laptop-sl : 969px;
	--breakpoint-laptop-l : 965px;
	--breakpoint-laptop-s : 911px;
	--breakpoint-tablet-xl : 810px;
	--breakpoint-tablet-lg : 797px;
	--breakpoint-tablet-l : 774px;
	--breakpoint-tablet-xs : 734px;
	--breakpoint-Wide-mobile-4xl : 645px;
	--breakpoint-Wide-mobile-4-5xl : 626px;
	--breakpoint-Wide-mobile-3xl : 605px;
	--breakpoint-Wide-mobile-2xl : 573px;
	--breakpoint-Wide-mobile-xl : 545px ;
	--breakpoint-Wide-mobile-l : 539px;
	--breakpoint-Wide-mobile-xss : 526px;
	--breakpoint-Wide-mobile-s : 485px;
	--breakpoint-Wide-mobile-xsss : 466px;
	--breakpoint-Wide-mobile-sm : 430px;
	--breakpoint-Wide-mobile-xs : 400px;
	--breakpoint-mobile-xl : 365px;
	--breakpoint-mobile-xlk : 381px;
	--breakpoint-mobile-l : 335px;
	--breakpoint-mobile-s : 245px;


}
/* مخفی کردن اسکرول‌بار در همه مرورگرها */
.no-scrollbar {
	-ms-overflow-style: none !important;  /* IE و Edge */
	scrollbar-width: none !important;     /* Firefox */
  }

  .no-scrollbar::-webkit-scrollbar {
	display: none !important; /* Chrome, Safari, Opera */
  }

/* globals.css */
.input-no-spinner {
	-moz-appearance: textfield; /* Firefox */
	appearance: none;            /* تمامی مرورگرها */
  }

  .input-no-spinner::-webkit-outer-spin-button,
  .input-no-spinner::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
  }

  @theme inline {
	--radius-sm : calc(var(--radius) - 4px);
	--radius-md : calc(var(--radius) - 2px);
	--radius-lg : var(--radius);
	--radius-xl : calc(var(--radius) + 4px);
	--color-background : var(--background);
	--color-foreground : var(--foreground);
	--color-card : var(--card);
	--color-card-foreground : var(--card-foreground);
	--color-popover : var(--popover);
	--color-popover-foreground : var(--popover-foreground);
	--color-primary : var(--primary);
	--color-primary-foreground : var(--primary-foreground);
	--color-secondary : var(--secondary);
	--color-secondary-foreground : var(--secondary-foreground);
	--color-muted : var(--muted);
	--color-muted-foreground : var(--muted-foreground);
	--color-accent : var(--accent);
	--color-accent-foreground : var(--accent-foreground);
	--color-destructive : var(--destructive);
	--color-border : var(--border);
	--color-input : var(--input);
	--color-ring : var(--ring);
	--color-chart-1 : var(--chart-1);
	--color-chart-2 : var(--chart-2);
	--color-chart-3 : var(--chart-3);
	--color-chart-4 : var(--chart-4);
	--color-chart-5 : var(--chart-5);
	--color-sidebar : var(--sidebar);
	--color-sidebar-foreground : var(--sidebar-foreground);
	--color-sidebar-primary : var(--sidebar-primary);
	--color-sidebar-primary-foreground : var(--sidebar-primary-foreground);
	--color-sidebar-accent : var(--sidebar-accent);
	--color-sidebar-accent-foreground : var(--sidebar-accent-foreground);
	--color-sidebar-border : var(--sidebar-border);
	--color-sidebar-ring : var(--sidebar-ring);}

  :root {
	--input: oklch(0 0 0 / 100%);   /* مشکی کاملا */
	--border: oklch(0 0 0 / 50%);   /* خاکستری */
	--ring: oklch(0 0 0 / 70%);
	--radius : 0.625rem;
	--background : oklch(1 0 0);
	--foreground : oklch(0.145 0 0);
	--card : oklch(1 0 0);
	--card-foreground : oklch(0.145 0 0);
	--popover : oklch(1 0 0);
	--popover-foreground : oklch(0.145 0 0);
	--primary : oklch(0.205 0 0);
	--primary-foreground : oklch(0.985 0 0);
	--secondary : oklch(0.97 0 0);
	--secondary-foreground : oklch(0.205 0 0);
	--muted : oklch(0.97 0 0);
	--muted-foreground : oklch(0.556 0 0);
	--accent : oklch(0.97 0 0);
	--accent-foreground : oklch(0.205 0 0);
	--destructive : oklch(0.577 0.245 27.325);
	--border : oklch(0.922 0 0);
	--input : oklch(0.922 0 0);
	--ring : oklch(0.708 0 0);
	--chart-1 : oklch(0.646 0.222 41.116);
	--chart-2 : oklch(0.6 0.118 184.704);
	--chart-3 : oklch(0.398 0.07 227.392);
	--chart-4 : oklch(0.828 0.189 84.429);
	--chart-5 : oklch(0.769 0.188 70.08);
	--sidebar : oklch(0.985 0 0);
	--sidebar-foreground : oklch(0.145 0 0);
	--sidebar-primary : oklch(0.205 0 0);
	--sidebar-primary-foreground : oklch(0.985 0 0);
	--sidebar-accent : oklch(0.97 0 0);
	--sidebar-accent-foreground : oklch(0.205 0 0);
	--sidebar-border : oklch(0.922 0 0);
	--sidebar-ring : oklch(0.708 0 0);}

  .dark {
	--input: oklch(1 0 0 / 100%);   /* سفید کامل */
	--border: oklch(1 0 0 / 50%);
	--ring: oklch(1 0 0 / 70%);
	--background : oklch(0.145 0 0);
	--foreground : oklch(0.985 0 0);
	--card : oklch(0.205 0 0);
	--card-foreground : oklch(0.985 0 0);
	--popover : oklch(0.205 0 0);
	--popover-foreground : oklch(0.985 0 0);
	--primary : oklch(0.922 0 0);
	--primary-foreground : oklch(0.205 0 0);
	--secondary : oklch(0.269 0 0);
	--secondary-foreground : oklch(0.985 0 0);
	--muted : oklch(0.269 0 0);
	--muted-foreground : oklch(0.708 0 0);
	--accent : oklch(0.269 0 0);
	--accent-foreground : oklch(0.985 0 0);
	--destructive : oklch(0.704 0.191 22.216);
	--border : oklch(1 0 0 / 10%);
	--input : oklch(1 0 0 / 15%);
	--ring : oklch(0.556 0 0);
	--chart-1 : oklch(0.488 0.243 264.376);
	--chart-2 : oklch(0.696 0.17 162.48);
	--chart-3 : oklch(0.769 0.188 70.08);
	--chart-4 : oklch(0.627 0.265 303.9);
	--chart-5 : oklch(0.645 0.246 16.439);
	--sidebar : oklch(0.205 0 0);
	--sidebar-foreground : oklch(0.985 0 0);
	--sidebar-primary : oklch(0.488 0.243 264.376);
	--sidebar-primary-foreground : oklch(0.985 0 0);
	--sidebar-accent : oklch(0.269 0 0);
	--sidebar-accent-foreground : oklch(0.985 0 0);
	--sidebar-border : oklch(1 0 0 / 10%);
	--sidebar-ring : oklch(0.556 0 0);}

  @layer base {
  * {
    @apply border-border outline-ring/50;}
  body {
    @apply bg-background text-foreground;}}



html {
  scroll-behavior: smooth;
}
body {
  direction: rtl;
}
button,
button:focus,
textarea {
  outline: none;
}

input:focus,
button:focus,
select:focus {
  outline: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox  */
input[type="number"] {
  -moz-appearance: textfield;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("/images/icons/arrow-down.svg");
  background-size: 15px;
  background-repeat: no-repeat;
  background-position-x: 10px;
  background-position-y: 13px;
}

.dir-ltr {
  direction: ltr;
}

@media (min-width: 1024px) {
  .container {
    max-width: 992px;
  }
}

.auth-page .rmdp-input {
  border-radius: 1rem;
  margin-top: 8px;
  height: 36px;
  color: #111;
  width: 100%;
  padding-right: 48px;
}
.address-page .mapboxgl-map {
  max-height: 210px;
  height: 100%;
  width: 100% !important;
  max-width: 300px;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-top: 20px;
  margin-bottom: 20px;
}
.address-page .map-g {
  width: 100%;
  border-radius: 12px !important;
  margin-top: 12px;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* ─── iOS Spinner & unified loading ─── */
@keyframes ios-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-ios-spin {
  animation: ios-spin 0.9s steps(12) infinite;
}

/* Legacy alias → use IOSSpinner component instead */
.custom-loader {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 0;
  background: conic-gradient(from 0deg, #007aff 0deg, transparent 60deg, transparent 300deg, #007aff 360deg);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: ios-spin 0.9s linear infinite;
}

/* ─── Glassmorphism utilities ─── */
.glass-panel {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.dark .glass-panel {
  background: rgba(28, 28, 30, 0.78);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.glass-chat-input {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.dark .glass-chat-input {
  background: rgba(44, 44, 46, 0.88);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ─── Gentle transitions ─── */
.gentle-transition {
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── Chat scrollbar ─── */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

/* ─── Safari floating header pill ─── */
.safari-header-pill {
  max-width: min(100% - 2rem, 22rem);
}

/* ─── Instagram DM chat theme ─── */
.chat-page-bg {
  background: #ffffff;
}
.dark .chat-page-bg {
  background: #000000;
}

/* Outgoing — Instagram DM (RTL: tail bottom-left / outer edge) */
.chat-bubble-out,
.ig-dm-out {
  background: linear-gradient(135deg, #5b51d8 0%, #c13584 45%, #e1306c 100%);
  color: #fff;
}
.bubble-tail-out .chat-bubble-out,
.bubble-tail-out .chat-text-bubble.chat-bubble-out {
  border-radius: 18px 18px 18px 4px;
}
/* Incoming — tail bottom-right */
.chat-bubble-in,
.ig-dm-in {
  background: #efefef;
  color: #000;
}
.bubble-tail-in .chat-bubble-in,
.bubble-tail-in .chat-text-bubble.chat-bubble-in {
  border-radius: 18px 18px 4px 18px;
}
.dark .chat-bubble-in,
.dark .ig-dm-in {
  background: #262626;
  color: #f5f5f5;
}

.chat-text-bubble {
  position: relative;
  padding-bottom: 1.25rem;
  min-width: 4rem;
  max-width: min(85vw, 320px);
}
.chat-message-text {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.message-time-inline {
  position: absolute;
  bottom: 4px;
  left: 8px;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.bubble-tail-out .message-time-inline {
  left: auto;
  right: 8px;
}
.bubble-tail-in .message-time-inline {
  left: 8px;
  right: auto;
}

.glass-panel-strong {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.dark .glass-panel-strong {
  background: rgba(30, 30, 30, 0.78);
  border-color: rgba(255, 255, 255, 0.12);
}

.comments-modal-glass {
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
}

.chat-action-btn {
  background: linear-gradient(135deg, #0095f6 0%, #007aff 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35);
}

.header-offline {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.92) 0%, rgba(185, 28, 28, 0.88) 100%) !important;
  backdrop-filter: blur(12px);
}
.header-syncing .brand-logo {
  opacity: 0;
}
.header-syncing-dots span {
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.header-syncing-dots span:nth-child(2) { animation-delay: 0.15s; }
.header-syncing-dots span:nth-child(3) { animation-delay: 0.3s; }

.tab-active-glass {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.dark .tab-active-glass {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.chat-input-area {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
.chat-input-area--thread {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.ig-dm-send-btn {
  background: linear-gradient(135deg, #5b51d8 0%, #c13584 50%, #e1306c 100%);
}

/* ─── Instagram-style typing dots ─── */
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.typing-dot {
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

/* ─── Read receipt check animation ─── */
@keyframes check-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.read-check-animate {
  animation: check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ─── Message enter animation ─── */
@keyframes message-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.message-enter {
  animation: message-in 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ─── Shrink header ─── */
.header-shrink {
  transform: scale(0.92) translateY(-2px);
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
/* استایل اختصاصی برای پلیر در تم روشن */
.custom-audio-player::-webkit-media-controls-enclosure {
  background-color: #e5e7eb; /* خاکستری تیره تر برای تم روشن */
}

/* برای اینکه دکمه‌ها و نوشته‌های پلیر در تم روشن تیره بمانند */
.custom-audio-player {
  filter: contrast(1.1) brightness(0.9);
}

/* در تم تاریک، پلیر را به رنگ‌های روشن معکوس می‌کنیم */
.dark .custom-audio-player {
  filter: invert(1) hue-rotate(180deg) brightness(1.2);
}

/* حذف پس‌زمینه سفید اضافی در برخی مرورگرها */
.custom-audio-player::-webkit-media-controls-panel {
  background-color: transparent;
} 