/* =========================================================
   Mashaer Portal — Static Prototype Theme
   Design foundation: Template/T1/mashaer.html
   Tokens: primary #3b2b22, gold #c19d60, secondary #a89078
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..300,0..1,-50..200');

body {
  font-family: 'Tajawal', sans-serif;
  color: #3b2b22;
  background: #ffffff;
}

.font-heading {
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: 'liga';
}

.transition-expo { transition-timing-function: cubic-bezier(0.22,1,0.36,1); }

.product-img-placeholder {
  background: linear-gradient(135deg, #f5f0ea 0%, #ede5d8 100%);
}

[hidden] { display: none !important; }

input:focus,
textarea:focus,
select:focus { outline: none; }

/* Custom scrollbar for luxury feel */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f5f0ea; }
::-webkit-scrollbar-thumb { background: #c19d60; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a98544; }

/* Hide Tailwind CDN warning banner in dev */
#tailwind-cdn-warning { display: none !important; }

/* Line-clamp helpers (Tailwind CDN sometimes lags) */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Card micro-interactions */
.mashaer-card { box-shadow: 0 1px 0 rgba(0,0,0,0.02); }
.mashaer-card:hover { box-shadow: 0 10px 26px -16px rgba(59,43,34,0.22); }

/* Form fields */
.mashaer-field { width: 100%; border: 1px solid #e5dcc9; background: #fff; padding: 0.65rem 0.85rem; font-size: 0.875rem; color: #3b2b22; transition: border-color .25s ease, box-shadow .25s ease; }
.mashaer-field:focus { border-color: #c19d60; box-shadow: 0 0 0 3px rgba(193,157,96,0.14); }
.mashaer-field::placeholder { color: #bfae96; }
.mashaer-label { display: block; font-size: 11px; color: #8d745d; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }