/* ==========================================================================
   SMTBOX Atomic Utility Classes Architecture (DEF-10)
   Designed for SMTBOX 2019 WordPress Theme
   Standards: BEM & Modern Atomic Design (Mobile-First / Zero-CLS)
   Dependencies: assets/css/tokens.css, Flatsome Theme CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DISPLAY & VISIBILITY UTILITIES
   -------------------------------------------------------------------------- */
.u-hidden,
.u-d-none {
    display: none !important;
}

.u-block,
.u-d-block {
    display: block !important;
}

.u-inline-block,
.u-d-inline-block {
    display: inline-block !important;
}

.u-inline {
    display: inline !important;
}

.u-flex,
.u-d-flex {
    display: flex !important;
}

.u-inline-flex {
    display: inline-flex !important;
}

.u-grid,
.u-d-grid {
    display: grid !important;
}

.u-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --------------------------------------------------------------------------
   2. FLEXBOX LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.u-flex-row {
    flex-direction: row !important;
}

.u-flex-col {
    flex-direction: column !important;
}

.u-flex-wrap {
    flex-wrap: wrap !important;
}

.u-flex-nowrap {
    flex-wrap: nowrap !important;
}

/* Align Items */
.u-items-start {
    align-items: flex-start !important;
}

.u-items-center {
    align-items: center !important;
}

.u-items-end {
    align-items: flex-end !important;
}

.u-items-stretch {
    align-items: stretch !important;
}

.u-items-baseline {
    align-items: baseline !important;
}

/* Justify Content */
.u-justify-start {
    justify-content: flex-start !important;
}

.u-justify-center {
    justify-content: center !important;
}

.u-justify-end {
    justify-content: flex-end !important;
}

.u-justify-between {
    justify-content: space-between !important;
}

.u-justify-around {
    justify-content: space-around !important;
}

/* Flex Grow & Shrink */
.u-flex-1 {
    flex: 1 1 0% !important;
}

.u-flex-auto {
    flex: 1 1 auto !important;
}

.u-flex-initial {
    flex: 0 1 auto !important;
}

.u-flex-none {
    flex: none !important;
}

.u-grow-1 {
    flex-grow: 1 !important;
}

.u-grow-0 {
    flex-grow: 0 !important;
}

.u-shrink-0 {
    flex-shrink: 0 !important;
}

.u-shrink-1 {
    flex-shrink: 1 !important;
}

/* Gaps */
.u-gap-0  { gap: 0 !important; }
.u-gap-4  { gap: 4px !important; }
.u-gap-5  { gap: 5px !important; }
.u-gap-6  { gap: 6px !important; }
.u-gap-8  { gap: 8px !important; }
.u-gap-10 { gap: 10px !important; }
.u-gap-12 { gap: 12px !important; }
.u-gap-15 { gap: 15px !important; }
.u-gap-16 { gap: 16px !important; }
.u-gap-20 { gap: 20px !important; }
.u-gap-25 { gap: 25px !important; }
.u-gap-30 { gap: 30px !important; }
.u-gap-40 { gap: 40px !important; }

/* --------------------------------------------------------------------------
   3. CSS GRID UTILITIES
   -------------------------------------------------------------------------- */
.u-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.u-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.u-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.u-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.u-grid-cols-auto-130 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; }
.u-grid-cols-auto-150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
.u-grid-cols-auto-180 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
.u-grid-cols-auto-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
.u-grid-cols-auto-250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */
/* Font Families */
.u-font-brand,
.u-font-heading {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.u-font-sans,
.u-font-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.u-font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* Font Sizes */
.u-text-10 { font-size: 10px !important; }
.u-text-11, .u-text-2xs { font-size: 11px !important; }
.u-text-12, .u-text-xs  { font-size: 12px !important; }
.u-text-13, .u-text-sm  { font-size: 13px !important; }
.u-text-14, .u-text-base{ font-size: 14px !important; }
.u-text-15, .u-text-md  { font-size: 15px !important; }
.u-text-16, .u-text-lg  { font-size: 16px !important; }
.u-text-18, .u-text-xl  { font-size: 18px !important; }
.u-text-20, .u-text-2xl { font-size: 20px !important; }
.u-text-24, .u-text-3xl { font-size: 24px !important; }
.u-text-28, .u-text-4xl { font-size: 28px !important; }
.u-text-32 { font-size: 32px !important; }
.u-text-36 { font-size: 36px !important; }

/* Font Weights */
.u-font-light     { font-weight: 300 !important; }
.u-font-normal    { font-weight: 400 !important; }
.u-font-medium    { font-weight: 500 !important; }
.u-font-semibold  { font-weight: 600 !important; }
.u-font-bold      { font-weight: 700 !important; }
.u-font-extrabold  { font-weight: 800 !important; }

/* Text Alignments */
.u-text-left    { text-align: left !important; }
.u-text-center  { text-align: center !important; }
.u-text-right   { text-align: right !important; }
.u-text-justify { text-align: justify !important; }

/* Text Transformations & Decoration */
.u-uppercase      { text-transform: uppercase !important; }
.u-lowercase      { text-transform: lowercase !important; }
.u-capitalize     { text-transform: capitalize !important; }
.u-underline      { text-decoration: underline !important; }
.u-no-underline   { text-decoration: none !important; }
.u-nowrap         { white-space: nowrap !important; }
.u-pre-wrap       { white-space: pre-wrap !important; }
.u-tracking-wide  { letter-spacing: 0.05em !important; }

/* Line Heights */
.u-leading-none    { line-height: 1 !important; }
.u-leading-tight   { line-height: 1.25 !important; }
.u-leading-snug    { line-height: 1.375 !important; }
.u-leading-normal  { line-height: 1.5 !important; }
.u-leading-relaxed { line-height: 1.625 !important; }
.u-leading-loose   { line-height: 2 !important; }

/* --------------------------------------------------------------------------
   5. COLOR PALETTE UTILITIES
   -------------------------------------------------------------------------- */
/* Text Colors */
.u-color-primary       { color: var(--smt-color-primary, #002780) !important; }
.u-color-primary-hover:hover { color: var(--smt-color-primary-hover, #001f66) !important; }
.u-color-accent,
.u-color-danger        { color: var(--smt-color-accent, #CF0921) !important; }
.u-color-white         { color: #ffffff !important; }
.u-color-text-main     { color: var(--smt-color-text-main, #1e293b) !important; }
.u-color-text-muted    { color: var(--smt-color-text-muted, #64748b) !important; }
.u-color-text-subtle   { color: #94a3b8 !important; }
.u-color-blue          { color: #2563eb !important; }
.u-color-blue-dark     { color: #1e3a8a !important; }
.u-color-success       { color: #16a34a !important; }
.u-color-warning       { color: #d97706 !important; }
.u-color-rose          { color: #e11d48 !important; }

/* Background Colors */
.u-bg-white            { background-color: var(--smt-color-bg-white, #ffffff) !important; }
.u-bg-light            { background-color: var(--smt-color-bg-light, #f8fafc) !important; }
.u-bg-primary          { background-color: var(--smt-color-primary, #002780) !important; }
.u-bg-primary-hover:hover { background-color: var(--smt-color-primary-hover, #001f66) !important; }
.u-bg-accent,
.u-bg-danger           { background-color: var(--smt-color-accent, #CF0921) !important; }
.u-bg-blue-50          { background-color: #eff6ff !important; }
.u-bg-blue-100         { background-color: #dbeafe !important; }
.u-bg-slate-50         { background-color: #f8fafc !important; }
.u-bg-slate-100        { background-color: #f1f5f9 !important; }
.u-bg-slate-200        { background-color: #e2e8f0 !important; }
.u-bg-red-50           { background-color: #fffcfc !important; }
.u-bg-transparent      { background-color: transparent !important; }

/* --------------------------------------------------------------------------
   6. SPACING UTILITIES (MARGINS & PADDINGS)
   -------------------------------------------------------------------------- */
/* Margin All */
.u-m-0  { margin: 0 !important; }
.u-m-4  { margin: 4px !important; }
.u-m-8  { margin: 8px !important; }
.u-m-10 { margin: 10px !important; }
.u-m-15 { margin: 15px !important; }
.u-m-20 { margin: 20px !important; }
.u-m-30 { margin: 30px !important; }
.u-m-auto { margin: auto !important; }
.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.u-my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Margin Top */
.u-mt-0  { margin-top: 0 !important; }
.u-mt-2  { margin-top: 2px !important; }
.u-mt-4  { margin-top: 4px !important; }
.u-mt-5  { margin-top: 5px !important; }
.u-mt-6  { margin-top: 6px !important; }
.u-mt-8  { margin-top: 8px !important; }
.u-mt-10 { margin-top: 10px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mt-15 { margin-top: 15px !important; }
.u-mt-20 { margin-top: 20px !important; }
.u-mt-25 { margin-top: 25px !important; }
.u-mt-30 { margin-top: 30px !important; }
.u-mt-40 { margin-top: 40px !important; }
.u-mt-auto { margin-top: auto !important; }

/* Margin Bottom */
.u-mb-0  { margin-bottom: 0 !important; }
.u-mb-2  { margin-bottom: 2px !important; }
.u-mb-4  { margin-bottom: 4px !important; }
.u-mb-5  { margin-bottom: 5px !important; }
.u-mb-6  { margin-bottom: 6px !important; }
.u-mb-8  { margin-bottom: 8px !important; }
.u-mb-10 { margin-bottom: 10px !important; }
.u-mb-12 { margin-bottom: 12px !important; }
.u-mb-15 { margin-bottom: 15px !important; }
.u-mb-20 { margin-bottom: 20px !important; }
.u-mb-25 { margin-bottom: 25px !important; }
.u-mb-30 { margin-bottom: 30px !important; }
.u-mb-40 { margin-bottom: 40px !important; }
.u-mb-45 { margin-bottom: 45px !important; }
.u-mb-50 { margin-bottom: 50px !important; }

/* Margin Left & Right */
.u-ml-0  { margin-left: 0 !important; }
.u-ml-5  { margin-left: 5px !important; }
.u-ml-8  { margin-left: 8px !important; }
.u-ml-10 { margin-left: 10px !important; }
.u-ml-15 { margin-left: 15px !important; }
.u-ml-20 { margin-left: 20px !important; }
.u-ml-auto { margin-left: auto !important; }

.u-mr-0  { margin-right: 0 !important; }
.u-mr-5  { margin-right: 5px !important; }
.u-mr-8  { margin-right: 8px !important; }
.u-mr-10 { margin-right: 10px !important; }
.u-mr-15 { margin-right: 15px !important; }
.u-mr-20 { margin-right: 20px !important; }
.u-mr-auto { margin-right: auto !important; }

/* Margin X & Y */
.u-mx-0  { margin-left: 0 !important; margin-right: 0 !important; }
.u-mx-8  { margin-left: 8px !important; margin-right: 8px !important; }
.u-mx-10 { margin-left: 10px !important; margin-right: 10px !important; }
.u-mx-15 { margin-left: 15px !important; margin-right: 15px !important; }
.u-mx-20 { margin-left: 20px !important; margin-right: 20px !important; }

.u-my-0  { margin-top: 0 !important; margin-bottom: 0 !important; }
.u-my-10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.u-my-15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.u-my-20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.u-my-30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.u-my-40 { margin-top: 40px !important; margin-bottom: 40px !important; }

/* Padding All */
.u-p-0  { padding: 0 !important; }
.u-p-4  { padding: 4px !important; }
.u-p-6  { padding: 6px !important; }
.u-p-8  { padding: 8px !important; }
.u-p-10 { padding: 10px !important; }
.u-p-12 { padding: 12px !important; }
.u-p-15 { padding: 15px !important; }
.u-p-18 { padding: 18px !important; }
.u-p-20 { padding: 20px !important; }
.u-p-25 { padding: 25px !important; }
.u-p-30 { padding: 30px !important; }
.u-p-40 { padding: 40px !important; }

/* Padding X & Y */
.u-px-0  { padding-left: 0 !important; padding-right: 0 !important; }
.u-px-8  { padding-left: 8px !important; padding-right: 8px !important; }
.u-px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.u-px-12 { padding-left: 12px !important; padding-right: 12px !important; }
.u-px-15 { padding-left: 15px !important; padding-right: 15px !important; }
.u-px-16 { padding-left: 16px !important; padding-right: 16px !important; }
.u-px-18 { padding-left: 18px !important; padding-right: 18px !important; }
.u-px-20 { padding-left: 20px !important; padding-right: 20px !important; }
.u-px-24 { padding-left: 24px !important; padding-right: 24px !important; }
.u-px-30 { padding-left: 30px !important; padding-right: 30px !important; }

.u-py-0  { padding-top: 0 !important; padding-bottom: 0 !important; }
.u-py-4  { padding-top: 4px !important; padding-bottom: 4px !important; }
.u-py-6  { padding-top: 6px !important; padding-bottom: 6px !important; }
.u-py-8  { padding-top: 8px !important; padding-bottom: 8px !important; }
.u-py-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.u-py-12 { padding-top: 12px !important; padding-bottom: 12px !important; }
.u-py-15 { padding-top: 15px !important; padding-bottom: 15px !important; }
.u-py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.u-py-25 { padding-top: 25px !important; padding-bottom: 25px !important; }
.u-py-30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.u-py-40 { padding-top: 40px !important; padding-bottom: 40px !important; }
.u-py-60 { padding-top: 60px !important; padding-bottom: 60px !important; }

/* Padding Single Sides */
.u-pt-0  { padding-top: 0 !important; }
.u-pt-5  { padding-top: 5px !important; }
.u-pt-10 { padding-top: 10px !important; }
.u-pt-15 { padding-top: 15px !important; }
.u-pt-20 { padding-top: 20px !important; }
.u-pt-25 { padding-top: 25px !important; }
.u-pt-30 { padding-top: 30px !important; }

.u-pb-0  { padding-bottom: 0 !important; }
.u-pb-5  { padding-bottom: 5px !important; }
.u-pb-10 { padding-bottom: 10px !important; }
.u-pb-15 { padding-bottom: 15px !important; }
.u-pb-20 { padding-bottom: 20px !important; }
.u-pb-25 { padding-bottom: 25px !important; }
.u-pb-30 { padding-bottom: 30px !important; }

.u-pl-0  { padding-left: 0 !important; }
.u-pl-10 { padding-left: 10px !important; }
.u-pl-15 { padding-left: 15px !important; }
.u-pl-20 { padding-left: 20px !important; }

.u-pr-0  { padding-right: 0 !important; }
.u-pr-10 { padding-right: 10px !important; }
.u-pr-15 { padding-right: 15px !important; }
.u-pr-20 { padding-right: 20px !important; }

/* --------------------------------------------------------------------------
   7. BORDERS, CORNER RADIUS & SHADOWS
   -------------------------------------------------------------------------- */
/* Borders */
.u-border               { border: 1px solid var(--smt-color-border-light, #cbd5e1) !important; }
.u-border-slate-300     { border: 1px solid #cbd5e1 !important; }
.u-border-slate-200     { border: 1px solid #e2e8f0 !important; }
.u-border-primary       { border: 1px solid var(--smt-color-primary, #002780) !important; }
.u-border-primary-2     { border: 2px solid var(--smt-color-primary, #002780) !important; }
.u-border-accent        { border: 1px solid var(--smt-color-accent, #CF0921) !important; }
.u-border-accent-2      { border: 2px solid var(--smt-color-accent, #CF0921) !important; }
.u-border-dashed-primary{ border: 2px dashed var(--smt-color-primary, #002780) !important; }
.u-border-dashed        { border: 1px dashed #cbd5e1 !important; }
.u-border-dashed-muted  { border: 1px dashed #cbd5e1 !important; }
.u-border-none,
.u-border-0             { border: none !important; }

/* Border Sides */
.u-border-t             { border-top: 1px solid #cbd5e1 !important; }
.u-border-t-slate-200   { border-top: 1px solid #e2e8f0 !important; }
.u-border-t-0           { border-top: none !important; }

.u-border-b             { border-bottom: 1px solid #cbd5e1 !important; }
.u-border-b-slate-200   { border-bottom: 1px solid #e2e8f0 !important; }
.u-border-b-2           { border-bottom: 2px solid #cbd5e1 !important; }
.u-border-b-primary     { border-bottom: 2px solid var(--smt-color-primary, #002780) !important; }
.u-border-b-0           { border-bottom: none !important; }

.u-border-l-primary     { border-left: 4px solid var(--smt-color-primary, #002780) !important; }
.u-border-l-accent      { border-left: 4px solid var(--smt-color-accent, #CF0921) !important; }
.u-border-collapse      { border-collapse: collapse !important; }

/* Border Radius */
.u-rounded-none,
.u-rounded-0    { border-radius: 0 !important; }
.u-rounded-xs   { border-radius: 2px !important; }
.u-rounded-sm   { border-radius: 4px !important; }
.u-rounded-md   { border-radius: 6px !important; }
.u-rounded-lg   { border-radius: 8px !important; }
.u-rounded-xl   { border-radius: 12px !important; }
.u-rounded-full { border-radius: 9999px !important; }
.u-rounded-t-xl { border-radius: 12px 12px 0 0 !important; }
.u-rounded-b-xl { border-radius: 0 0 12px 12px !important; }

/* Shadows */
.u-shadow-none  { box-shadow: none !important; }
.u-shadow-xs    { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; }
.u-shadow-sm    { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02) !important; }
.u-shadow-md    { box-shadow: var(--smt-shadow-card, 0 4px 12px rgba(0, 0, 0, 0.08)) !important; }
.u-shadow-lg    { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important; }
.u-shadow-dropdown { box-shadow: var(--smt-shadow-dropdown, 0 8px 20px rgba(0, 0, 0, 0.15)) !important; }

/* --------------------------------------------------------------------------
   8. SIZING, OVERFLOW, POSITION & USER INTERACTION
   -------------------------------------------------------------------------- */
/* Widths */
.u-w-full   { width: 100% !important; }
.u-w-auto   { width: auto !important; }
.u-w-half   { width: 50% !important; }
.u-w-25     { width: 25% !important; }
.u-w-60     { width: 60px !important; }
.u-w-80     { width: 80px !important; }
.u-w-100    { width: 100px !important; }

/* Max Widths */
.u-max-w-full { max-width: 100% !important; }
.u-max-w-150  { max-width: 150px !important; }
.u-max-w-400  { max-width: 400px !important; }
.u-max-w-500  { max-width: 500px !important; }
.u-max-w-600  { max-width: 600px !important; }
.u-max-w-800  { max-width: 800px !important; }
.u-max-w-850  { max-width: 850px !important; }
.u-max-w-900  { max-width: 900px !important; }
.u-max-w-1000 { max-width: 1000px !important; }
.u-max-w-1200 { max-width: 1200px !important; }

/* Min Widths */
.u-min-w-0   { min-width: 0 !important; }
.u-min-w-160 { min-width: 160px !important; }
.u-min-w-200 { min-width: 200px !important; }
.u-min-w-220 { min-width: 220px !important; }
.u-min-w-600 { min-width: 600px !important; }

/* Heights */
.u-h-full   { height: 100% !important; }
.u-h-auto   { height: auto !important; }
.u-min-h-120{ min-height: 120px !important; }
.u-min-h-200{ min-height: 200px !important; }
.u-min-h-300{ min-height: 300px !important; }

/* Box Sizing & Layout Flow */
.u-box-border { box-sizing: border-box !important; }
.u-float-none { float: none !important; }
.u-clear-both { clear: both !important; }

/* Overflow */
.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-auto   { overflow: auto !important; }
.u-overflow-x-auto { overflow-x: auto !important; }
.u-overflow-y-auto { overflow-y: auto !important; }

/* Interactivity & Cursor */
.u-cursor-pointer    { cursor: pointer !important; }
.u-cursor-default    { cursor: default !important; }
.u-cursor-not-allowed{ cursor: not-allowed !important; }
.u-pointer-events-none{ pointer-events: none !important; }
.u-pointer-events-auto{ pointer-events: auto !important; }

/* Transitions */
.u-transition-all       { transition: all var(--smt-transition-normal, 0.25s ease) !important; }
.u-transition-fast      { transition: all var(--smt-transition-fast, 0.15s ease) !important; }
.u-transition-bg        { transition: background-color 0.2s ease, background 0.2s ease !important; }
.u-transition-transform { transition: transform 0.2s ease, box-shadow 0.2s ease !important; }

/* Image & Media */
.u-object-contain { object-fit: contain !important; }
.u-object-cover   { object-fit: cover !important; }
.u-max-h-100      { max-height: 100px !important; }
.u-h-60           { height: 60px !important; }
.u-h-80           { height: 80px !important; }

/* Line Clamp */
.u-line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 32px !important;
}

/* Hover States */
.u-hover-shadow:hover {
    box-shadow: var(--smt-shadow-card, 0 4px 12px rgba(0, 0, 0, 0.08)) !important;
}

.u-hover-lift:hover {
    transform: translateY(-2px) !important;
}

/* 404 & Specialized Utilities */
.u-float-none             { float: none !important; }
.u-min-h-120              { min-height: 120px !important; }
.u-min-w-600              { min-width: 600px !important; }
.u-border-primary-dashed  { border: 2px dashed var(--smt-color-primary, #002780) !important; }
.u-border-amber-dashed    { border: 1px dashed var(--smt-color-warning, #d97706) !important; }
.u-border-b-slate-200-2   { border-bottom: 2px solid var(--smt-color-border, #cbd5e1) !important; }
.u-bg-amber-50            { background-color: #fcf8f2 !important; }
.u-color-amber-dark       { color: #b45309 !important; }
.u-color-rose             { color: #e11d48 !important; }
.u-border-rose-light      { border: 1px solid #fda4af !important; }
.u-p-14                   { padding: 14px !important; }
.u-list-disc              { list-style-type: disc !important; }
.u-rounded-b-sm           { border-radius: 0 0 4px 4px !important; }

/* --------------------------------------------------------------------------
   9. SEMANTIC STATE CLASSES ARCHITECTURE (DEF-12)
   -------------------------------------------------------------------------- */
/* Universal Visibility States */
.is-hidden {
    display: none !important;
}

.is-visible,
.is-active,
.is-open {
    display: block !important;
}

.is-flex.is-active,
.is-flex.is-visible,
.is-flex-active {
    display: flex !important;
}

.is-inline-flex.is-active,
.is-inline-flex.is-visible,
.is-inline-flex-active {
    display: inline-flex !important;
}

.is-table.is-active,
.is-table-active {
    display: table !important;
}

/* Loading & Submission States */
.is-loading,
.is-submitting,
.is-busy {
    pointer-events: none !important;
    opacity: 0.7 !important;
    cursor: wait !important;
}

/* Drag & Drop Feedback */
.is-dragover {
    background-color: var(--smt-color-bg-light, #f1f5f9) !important;
    border-color: var(--smt-color-primary, #002780) !important;
}

/* Form Message Feedback */
.has-error {
    color: var(--smt-color-accent, #CF0921) !important;
    display: block !important;
}

.has-success {
    color: #008000 !important;
    display: block !important;
}

.has-info {
    color: var(--smt-color-primary, #002780) !important;
    display: block !important;
}

/* RFQ Cart Badge Transitions */
#smtbox-rfq-badge {
    transition: opacity var(--smt-transition-normal, 0.25s ease), transform var(--smt-transition-normal, 0.25s ease);
}
#smtbox-rfq-badge.is-hidden {
    display: none !important;
    opacity: 0;
}
#smtbox-rfq-badge.is-active {
    display: inline-flex !important;
    opacity: 1;
}

/* Bulk Cart Tab Button States */
.smtbox-bulk-tab-btn {
    background-color: #e2e8f0;
    color: #475569;
    transition: all var(--smt-transition-fast, 0.15s ease);
}
.smtbox-bulk-tab-btn.is-active,
.smtbox-bulk-tab-btn.active {
    background-color: var(--smt-color-primary, #002780) !important;
    color: #ffffff !important;
}