/* Custom Shop UAE Styles - Dubai Luxury Tech Aesthetic */

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 56, 44, 0.05);
}
::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.8);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Arabesque Geometric Overlay Pattern */
.arabesque-pattern {
  background-image: radial-gradient(#D4AF37 0.75px, transparent 0.75px), radial-gradient(#D4AF37 0.75px, #0F382C 0.75px);
  background-size: 30px 30px;
  background-position: 0 0,15px 15px;
}

/* Safe areas */
.header-safe-area {
  padding-top: env(safe-area-inset-top, 0px);
}
.safe-bottom {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* Animations */
.animate-in {
  animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* RTL Support Tweaks */
[dir="rtl"] {
  font-family: 'Cairo', sans-serif;
}
[dir="rtl"] .pl-9 {
  padding-left: 0.75rem;
  padding-right: 2.25rem;
}
[dir="rtl"] .pr-8 {
  padding-right: 0.75rem;
  padding-left: 2rem;
}
[dir="rtl"] .left-3 {
  left: auto;
  right: 0.75rem;
}
[dir="rtl"] .right-3 {
  right: auto;
  left: 0.75rem;
}

/* Custom Checkbox Touch Styling */
.item-checkbox {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #CBD5E1;
  border-radius: 0.375rem;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  display: grid;
  place-content: center;
}
.item-checkbox:checked {
  background-color: #0F382C;
  border-color: #D4AF37;
}
.item-checkbox:checked::before {
  content: "✓";
  color: #D4AF37;
  font-weight: bold;
  font-size: 0.85rem;
}

/* User Selection Disable for Native App Feel */
button, label, select, input[type="range"] {
  user-select: none;
  -webkit-user-select: none;
}