/* BemexSY — OLD theme skin (Tailwind CDN).
   This file only contains custom animations & helpers; layout is mostly Tailwind classes.
*/

/* Local Tajawal font (no Google Fonts dependency) */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('/public/assets/fonts/tajawal/Tajawal-Regular.woff') format('woff');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('/public/assets/fonts/tajawal/Tajawal-Medium.woff') format('woff');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('/public/assets/fonts/tajawal/Tajawal-Bold.woff') format('woff');}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:900;font-display:swap;src:url('/public/assets/fonts/tajawal/Tajawal-Black.woff') format('woff');}

/* Helpers from BemexSY_OLD */
.exchange-rate-marquee{animation:scroll 20s linear infinite;white-space:nowrap;will-change:transform}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.card-hover-effect{transition:all .3s ease}
.card-hover-effect:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.10)}

.hero-image{animation:float 6s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}100%{transform:translateY(0)}}

.app-icon{transition:all .3s ease}
.app-icon:hover{transform:scale(1.08)}

/* Small UX */
html{scroll-behavior:smooth}

/* Make embedded content fit nicely */
.prose-bmx img{max-width:100%;height:auto;border-radius:12px}
.prose-bmx iframe{max-width:100%;border-radius:12px}

/* Tabs behavior (used on product details). app.js toggles .active. */
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Optional: give active tab a subtle underline if you don't use Tailwind state */
.tab.active{opacity:1}

/* Simple content styling for HTML pages from DB (no Tailwind typography plugin) */
.content-body{line-height:1.9;color:rgb(55 65 81);font-weight:600}
html[data-theme="dark"] .content-body{color:rgb(209 213 219)}
.content-body h1,.content-body h2,.content-body h3{color:rgb(17 24 39);font-weight:900;margin:1.2em 0 .6em}
html[data-theme="dark"] .content-body h1,html[data-theme="dark"] .content-body h2,html[data-theme="dark"] .content-body h3{color:#fff}
.content-body p{margin:.8em 0}
.content-body ul{margin:.8em 0;padding-inline-start:1.2rem;list-style:disc}
.content-body ol{margin:.8em 0;padding-inline-start:1.2rem;list-style:decimal}
.content-body a{color:#65DCA2;text-decoration:underline}
.content-body table{width:100%;border-collapse:collapse;margin:1em 0}
.content-body th,.content-body td{border:1px solid rgba(148,163,184,.35);padding:.6em .7em;vertical-align:top}
html[data-theme="dark"] .content-body th,html[data-theme="dark"] .content-body td{border-color:rgba(148,163,184,.25)}

/* Toast (used by app.js) */
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);padding:10px 14px;border-radius:999px;
  background:rgba(17,24,39,.92);color:#fff;font-weight:800;font-size:12px;letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 22px rgba(0,0,0,.25);z-index:9999;opacity:1;transition:opacity .25s ease}
html[data-theme="light"] .toast{background:rgba(17,24,39,.92)}