/*
Theme Name: MyLace Wholesale Theme
Theme URI: https://mylace.online
Author: MyLace Online
Author URI: https://mylace.online
Description: A custom WordPress theme for MyLace Wholesale - Pakistan's premier wholesale lace shop. Features product catalog, blog, WhatsApp ordering system, and full admin management.
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mylace
Tags: wholesale, ecommerce, lace, fashion, urdu, rtl
*/

/* =============================================
   CUSTOM ANIMATIONS
   ============================================= */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.animate-fadeIn {
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slideInRight {
  animation: slideInRight 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* =============================================
   CUSTOM SCROLLBARS
   ============================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* =============================================
   URDU FONT
   ============================================= */
.font-urdu {
  font-family: 'Noto Naskh Arabic', sans-serif !important;
  line-height: 1.7;
}

/* =============================================
   LINE CLAMP
   ============================================= */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =============================================
   WORDPRESS CONTENT STYLES
   ============================================= */
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-weight: 700;
  color: #111827;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose p { margin-bottom: 1rem; line-height: 1.7; }
.prose a { color: #be123c; text-decoration: underline; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.25rem; }
.prose img { max-width: 100%; border-radius: 0.5rem; margin: 1rem 0; }

/* =============================================
   MYLACE BRAND COLORS (for non-Tailwind usage)
   ============================================= */
:root {
  --brand-50: #fdf4f6;
  --brand-100: #fbe8ec;
  --brand-500: #e11d48;
  --brand-600: #be123c;
  --brand-700: #9f1239;
  --brand-900: #4c0519;
  --whatsapp: #25D366;
}


/* =============================================
   FLOATING WHATSAPP BUTTONS
   ============================================= */
.bg-whatsapp {
  background-color: #25D366;
}

/* =============================================
   WP ADMIN BAR SPACING FIX
   ============================================= */
body.admin-bar header.site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar header.site-header {
    top: 46px;
  }
}