/**
 * Modern Theme Overrides & Design System
 * Premium SaaS Style refactoring for Vipani360 Laravel e-commerce platform.
 */

:root {
    --theme-primary: #4F46E5;
    --theme-primary-hover: #4338CA;
    --theme-primary-rgb: 79, 70, 229;
    --theme-success: #10B981;
    --theme-warning: #F59E0B;
    --theme-danger: #EF4444;
    --theme-neutral: #64748B;
    --theme-bg-light: #F8FAFC;
    --theme-border: #E2E8F0;
    --theme-text-heading: #0F172A;
    --theme-text-body: #475569;
    --theme-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
}

/* Custom Premium Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* ==========================================================================
   CARDS & CONTAINERS
   ========================================================================== */
.card, .panel, .dashboard-card {
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--theme-shadow-md) !important;
    background-color: #ffffff !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--theme-shadow-lg) !important;
}

.card-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--theme-border) !important;
    padding: 1.25rem 1.5rem !important;
    font-weight: 600 !important;
    color: var(--theme-text-heading) !important;
}

.card-body {
    padding: 1.5rem !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn, .btn--primary, .btn-primary, .btn-secondary, .btn-success, .btn-danger {
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 0.5rem 1.25rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--theme-shadow-sm) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.btn:hover, .btn--primary:hover, .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--theme-shadow-md) !important;
}

.btn:active, .btn--primary:active {
    transform: translateY(0) !important;
}

.btn-primary, .btn--primary {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover, .btn--primary:hover {
    background-color: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
}

/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */
.form-control, input[type="text"], input[type="email"], input[type="password"], select, textarea {
    border: 1px solid var(--theme-border) !important;
    border-radius: 8px !important;
    padding: 0.625rem 0.875rem !important;
    color: var(--theme-text-heading) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    background-color: #ffffff !important;
}

.form-control:focus, input[type="text"]:focus, select:focus, textarea:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15) !important;
    outline: none !important;
}

.form-label, label {
    font-weight: 500 !important;
    color: var(--theme-text-heading) !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--theme-border) !important;
}

.table th {
    background-color: var(--theme-bg-light) !important;
    color: var(--theme-text-heading) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid var(--theme-border) !important;
}

.table td {
    padding: 1rem 1.25rem !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--theme-border) !important;
    color: var(--theme-text-body) !important;
}

.table tbody tr:last-child td {
    border-bottom: none !important;
}

.table-hover tbody tr:hover {
    background-color: #F8FAFC !important;
}

/* ==========================================================================
   BADGES & PILLS
   ========================================================================== */
.badge {
    padding: 0.35em 0.65em !important;
    font-size: 0.75em !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    text-transform: capitalize !important;
}

.badge-soft-primary, .badge-primary {
    background-color: rgba(79, 70, 229, 0.1) !important;
    color: var(--theme-primary) !important;
}

.badge-soft-success, .badge-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: var(--theme-success) !important;
}

.badge-soft-warning, .badge-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: var(--theme-warning) !important;
}

.badge-soft-danger, .badge-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: var(--theme-danger) !important;
}

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal-content {
    border-radius: 16px !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: var(--theme-shadow-lg) !important;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--theme-border) !important;
    padding: 1.25rem 1.5rem !important;
}

.modal-footer {
    border-top: 1px solid var(--theme-border) !important;
    padding: 1rem 1.5rem !important;
}

.modal-backdrop.show {
    backdrop-filter: blur(4px);
    background-color: rgba(15, 23, 42, 0.3) !important;
}

/* ==========================================================================
   ICON MAPPING DEFINITIONS (TIO- to Material Symbols Fallback)
   ========================================================================== */
[class^="tio-"], [class*=" tio-"] {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    vertical-align: middle !important;
    text-rendering: optimizeLegibility !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-feature-settings: 'liga' !important;
}

/* Clear icon inner font */
[class^="tio-"]:before, [class*=" tio-"]:before {
    font-family: 'Material Symbols Outlined' !important;
}

/* Mapping Tio font glyphs to Material Symbols character names */
.tio-search:before { content: 'search' !important; }
.tio-edit:before { content: 'edit' !important; }
.tio-delete:before { content: 'delete' !important; }
.tio-download:before { content: 'download' !important; }
.tio-download-to:before { content: 'download' !important; }
.tio-chevron-down:before { content: 'expand_more' !important; }
.tio-chevron-right:before { content: 'chevron_right' !important; }
.tio-chevron-left:before { content: 'chevron_left' !important; }
.tio-chevron-up:before { content: 'expand_less' !important; }
.tio-clear:before { content: 'close' !important; }
.tio-clear-circle:before { content: 'cancel' !important; }
.tio-user:before { content: 'person' !important; }
.tio-star:before { content: 'star' !important; }
.tio-star-half:before { content: 'star_half' !important; }
.tio-star-outlined:before { content: 'star_outline' !important; }
.tio-shopping-cart:before { content: 'shopping_cart' !important; }
.tio-shopping-basket:before { content: 'shopping_basket' !important; }
.tio-dashboard:before { content: 'dashboard' !important; }
.tio-settings:before { content: 'settings' !important; }
.tio-home:before { content: 'home' !important; }
.tio-menu:before { content: 'menu' !important; }
.tio-add:before { content: 'add' !important; }
.tio-add-circle:before { content: 'add_circle' !important; }
.tio-remove:before { content: 'remove' !important; }
.tio-remove-circle:before { content: 'remove_circle' !important; }
.tio-done:before { content: 'done' !important; }
.tio-info:before { content: 'info' !important; }
.tio-help:before { content: 'help' !important; }
.tio-warning:before { content: 'warning' !important; }
.tio-error:before { content: 'error' !important; }
.tio-notifications:before { content: 'notifications' !important; }
.tio-email:before { content: 'mail' !important; }
.tio-phone:before { content: 'phone' !important; }
.tio-map:before { content: 'map' !important; }
.tio-file-text:before { content: 'description' !important; }
.tio-image:before { content: 'image' !important; }
.tio-visible:before { content: 'visibility' !important; }
.tio-invisible:before { content: 'visibility_off' !important; }
.tio-chat:before { content: 'chat' !important; }
.tio-wallet:before { content: 'account_balance_wallet' !important; }
.tio-shop:before { content: 'store' !important; }
.tio-circle:before { content: 'circle' !important; }
.tio-users-switch:before { content: 'people' !important; }
.tio-notice:before { content: 'info' !important; }
.tio-chart-bar-1:before, .tio-chart-bar-2:before, .tio-chart-bar-3:before, .tio-chart-bar-4:before { content: 'bar_chart' !important; }
.tio-premium-outlined:before { content: 'star_outline' !important; }
.tio-receipt-outlined:before { content: 'receipt' !important; }
.tio-shopping:before { content: 'shopping_bag' !important; }
.tio-more-horizontal:before { content: 'more_horiz' !important; }
.tio-visible-outlined:before { content: 'visibility' !important; }
.tio-hidden-outlined:before { content: 'visibility_off' !important; }
.tio-checkmark-circle-outlined:before { content: 'check_circle' !important; }
.tio-checkmark-circle:before { content: 'check_circle' !important; }
.tio-barcode:before { content: 'barcode_reader' !important; }
.tio-add-circle-outlined:before { content: 'add_circle' !important; }
.tio-chevron-right-circle:before { content: 'arrow_circle_right' !important; }
.tio-chevron-left-circle:before { content: 'arrow_circle_left' !important; }
.tio-arrow-large-backward:before { content: 'arrow_back' !important; }
.tio-arrow-large-forward:before { content: 'arrow_forward' !important; }
.tio-lock:before { content: 'lock' !important; }
.tio-key:before { content: 'key' !important; }
.tio-open-in-new:before { content: 'open_in_new' !important; }
.tio-calendar:before { content: 'calendar_today' !important; }
.tio-file:before { content: 'insert_drive_file' !important; }
.tio-filter:before { content: 'filter_list' !important; }
.tio-globe:before { content: 'language' !important; }
.tio-share:before { content: 'share' !important; }
.tio-print:before { content: 'print' !important; }
.tio-copy:before { content: 'content_copy' !important; }
.tio-refresh:before { content: 'refresh' !important; }
.tio-credit-card:before { content: 'credit_card' !important; }
.tio-heart:before { content: 'favorite' !important; }
.tio-heart-outlined:before { content: 'favorite_border' !important; }
.tio-check:before { content: 'check' !important; }
.tio-eye:before { content: 'visibility' !important; }
.tio-eye-outined:before { content: 'visibility' !important; }
.tio-home-vs-1-outlined:before { content: 'home' !important; }

/* ==========================================================================
   EXTRA TIO ICON MAPPINGS
   ========================================================================== */
.tio-back-ui:before { content: 'arrow_back' !important; }
.tio-briefcase:before { content: 'work' !important; }
.tio-file-outlined:before { content: 'insert_drive_file' !important; }
.tio-first-page:before { content: 'first_page' !important; }
.tio-hidden:before { content: 'visibility_off' !important; }
.tio-history:before { content: 'history' !important; }
.tio-last-page:before { content: 'last_page' !important; }
.tio-link:before { content: 'link' !important; }
.tio-money:before { content: 'attach_money' !important; }
.tio-more-vertical:before { content: 'more_vert' !important; }
.tio-next-ui:before { content: 'arrow_forward' !important; }
.tio-notifications-alert:before { content: 'notification_important' !important; }
.tio-photo-camera:before { content: 'photo_camera' !important; }
.tio-photo-square-outlined:before { content: 'image' !important; }
.tio-play:before { content: 'play_arrow' !important; }
.tio-shopping-cart-outlined:before { content: 'shopping_cart' !important; }
.tio-upload:before { content: 'upload' !important; }
.tio-user-big:before { content: 'person' !important; }
.tio-verified:before { content: 'verified' !important; }

/* ==========================================================================
   FLATICON UICONS TO MATERIAL SYMBOLS MAPPING
   ========================================================================== */
[class^="fi-"], [class*=" fi-"] {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    vertical-align: middle !important;
    text-rendering: optimizeLegibility !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-feature-settings: 'liga' !important;
}

[class^="fi-"]:before, [class*=" fi-"]:before {
    font-family: 'Material Symbols Outlined' !important;
}

/* Flaticon Uicons - Regular (fi-rr-*) mappings */
.fi-rr-angle-double-small-right:before { content: 'double_arrow' !important; }
.fi-rr-angle-left:before { content: 'chevron_left' !important; }
.fi-rr-angle-right:before { content: 'chevron_right' !important; }
.fi-rr-angle-small-down:before { content: 'keyboard_arrow_down' !important; }
.fi-rr-angle-small-right:before { content: 'keyboard_arrow_right' !important; }
.fi-rr-arrow-left:before { content: 'arrow_back' !important; }
.fi-rr-arrow-right:before { content: 'arrow_forward' !important; }
.fi-rr-arrow-small-down:before { content: 'arrow_downward' !important; }
.fi-rr-arrow-small-left:before { content: 'arrow_left' !important; }
.fi-rr-arrow-small-right:before { content: 'arrow_right' !important; }
.fi-rr-arrow-small-up:before { content: 'arrow_upward' !important; }
.fi-rr-arrow-turn-down-left:before { content: 'keyboard_return' !important; }
.fi-rr-arrow-up-right-from-square:before { content: 'open_in_new' !important; }
.fi-rr-barcode:before { content: 'barcode_reader' !important; }
.fi-rr-bars-filter:before { content: 'filter_list' !important; }
.fi-rr-calculator-math-tax:before { content: 'calculate' !important; }
.fi-rr-calendar-day:before { content: 'calendar_today' !important; }
.fi-rr-camera:before { content: 'photo_camera' !important; }
.fi-rr-check:before { content: 'check' !important; }
.fi-rr-check-circle:before { content: 'check_circle' !important; }
.fi-rr-cloud-upload-alt:before { content: 'cloud_upload' !important; }
.fi-rr-columns-3:before { content: 'view_week' !important; }
.fi-rr-copy:before { content: 'content_copy' !important; }
.fi-rr-cross:before { content: 'close' !important; }
.fi-rr-cross-small:before { content: 'close' !important; }
.fi-rr-document:before { content: 'description' !important; }
.fi-rr-down-to-line:before { content: 'vertical_align_bottom' !important; }
.fi-rr-download:before { content: 'download' !important; }
.fi-rr-duplicate:before { content: 'content_copy' !important; }
.fi-rr-envelope:before { content: 'mail' !important; }
.fi-rr-exit:before { content: 'logout' !important; }
.fi-rr-eye:before { content: 'visibility' !important; }
.fi-rr-file:before { content: 'insert_drive_file' !important; }
.fi-rr-file-download:before { content: 'file_download' !important; }
.fi-rr-globe:before { content: 'language' !important; }
.fi-rr-home:before { content: 'home' !important; }
.fi-rr-info:before { content: 'info' !important; }
.fi-rr-link-alt:before { content: 'link' !important; }
.fi-rr-lock:before { content: 'lock' !important; }
.fi-rr-marker:before { content: 'location_on' !important; }
.fi-rr-menu-burger:before { content: 'menu' !important; }
.fi-rr-menu-dots-vertical:before { content: 'more_vert' !important; }
.fi-rr-microchip-ai:before { content: 'memory' !important; }
.fi-rr-paper-plane:before { content: 'send' !important; }
.fi-rr-paper-plane-top:before { content: 'send' !important; }
.fi-rr-pen-circle:before { content: 'edit' !important; }
.fi-rr-pencil:before { content: 'edit' !important; }
.fi-rr-phone-flip:before { content: 'phone' !important; }
.fi-rr-plus:before { content: 'add' !important; }
.fi-rr-plus-small:before { content: 'add' !important; }
.fi-rr-portrait:before { content: 'portrait' !important; }
.fi-rr-redo:before { content: 'redo' !important; }
.fi-rr-refresh:before { content: 'refresh' !important; }
.fi-rr-reply-all:before { content: 'reply_all' !important; }
.fi-rr-sack-dollar:before { content: 'payments' !important; }
.fi-rr-search:before { content: 'search' !important; }
.fi-rr-settings:before { content: 'settings' !important; }
.fi-rr-shop:before { content: 'store' !important; }
.fi-rr-tags:before { content: 'local_offer' !important; }
.fi-rr-time-quarter-past:before { content: 'schedule' !important; }
.fi-rr-trash:before { content: 'delete' !important; }
.fi-rr-up-right-from-square:before { content: 'open_in_new' !important; }
.fi-rr-usd-circle:before { content: 'monetization_on' !important; }
.fi-rr-user:before { content: 'person' !important; }
.fi-rr-wallet:before { content: 'account_balance_wallet' !important; }

/* Flaticon Uicons - Solid (fi-sr-*) mappings */
.fi-sr-add:before { content: 'add' !important; }
.fi-sr-analyse:before { content: 'analytics' !important; }
.fi-sr-angle-down:before { content: 'expand_more' !important; }
.fi-sr-angle-left:before { content: 'chevron_left' !important; }
.fi-sr-angle-right:before { content: 'chevron_right' !important; }
.fi-sr-angle-small-left:before { content: 'chevron_left' !important; }
.fi-sr-angle-small-right:before { content: 'chevron_right' !important; }
.fi-sr-apps:before { content: 'apps' !important; }
.fi-sr-badge-check:before { content: 'verified' !important; }
.fi-sr-badge-percent:before { content: 'percent' !important; }
.fi-sr-bahai:before { content: 'star' !important; }
.fi-sr-barcode:before { content: 'barcode_reader' !important; }
.fi-sr-bars-filter:before { content: 'filter_list' !important; }
.fi-sr-bells:before { content: 'notifications' !important; }
.fi-sr-book-plus:before { content: 'library_add' !important; }
.fi-sr-box-open:before { content: 'inventory_2' !important; }
.fi-sr-boxes:before { content: 'inventory' !important; }
.fi-sr-brand:before { content: 'style' !important; }
.fi-sr-bulb:before { content: 'lightbulb' !important; }
.fi-sr-calendar:before { content: 'calendar_today' !important; }
.fi-sr-check:before { content: 'check' !important; }
.fi-sr-check-circle:before { content: 'check_circle' !important; }
.fi-sr-circle:before { content: 'circle' !important; }
.fi-sr-circle-xmark:before { content: 'cancel' !important; }
.fi-sr-clone:before { content: 'content_copy' !important; }
.fi-sr-cloud-download-alt:before { content: 'cloud_download' !important; }
.fi-sr-comment-alt-dots:before { content: 'chat' !important; }
.fi-sr-copy:before { content: 'content_copy' !important; }
.fi-sr-copy-image:before { content: 'image' !important; }
.fi-sr-credit-card:before { content: 'credit_card' !important; }
.fi-sr-cross:before { content: 'close' !important; }
.fi-sr-cross-circle:before { content: 'cancel' !important; }
.fi-sr-cross-small:before { content: 'close' !important; }
.fi-sr-customize:before { content: 'dashboard_customize' !important; }
.fi-sr-database:before { content: 'database' !important; }
.fi-sr-disk:before { content: 'save' !important; }
.fi-sr-document:before { content: 'description' !important; }
.fi-sr-down-to-line:before { content: 'downloading' !important; }
.fi-sr-download:before { content: 'download' !important; }
.fi-sr-employee-man-alt:before { content: 'badge' !important; }
.fi-sr-envelope:before { content: 'mail' !important; }
.fi-sr-exclamation:before { content: 'warning' !important; }
.fi-sr-eye:before { content: 'visibility' !important; }
.fi-sr-eye-crossed:before { content: 'visibility_off' !important; }
.fi-sr-file-excel:before { content: 'table_view' !important; }
.fi-sr-file-pdf:before { content: 'picture_as_pdf' !important; }
.fi-sr-file-zipper:before { content: 'folder_zip' !important; }
.fi-sr-headphones:before { content: 'headphones' !important; }
.fi-sr-heart:before { content: 'favorite' !important; }
.fi-sr-home:before { content: 'home' !important; }
.fi-sr-inbox-in:before { content: 'inbox' !important; }
.fi-sr-info:before { content: 'info' !important; }
.fi-sr-language-exchange:before { content: 'translate' !important; }
.fi-sr-layout-fluid:before { content: 'dashboard' !important; }
.fi-sr-lightbulb-on:before { content: 'lightbulb' !important; }
.fi-sr-link-alt:before { content: 'link' !important; }
.fi-sr-list-timeline:before { content: 'view_timeline' !important; }
.fi-sr-megaphone-sound-waves:before { content: 'campaign' !important; }
.fi-sr-menu-dots-vertical:before { content: 'more_vert' !important; }
.fi-sr-minus:before { content: 'remove' !important; }
.fi-sr-money:before { content: 'attach_money' !important; }
.fi-sr-palette:before { content: 'palette' !important; }
.fi-sr-paper-plane:before { content: 'send' !important; }
.fi-sr-pen-circle:before { content: 'edit' !important; }
.fi-sr-pencil:before { content: 'edit' !important; }
.fi-sr-pennant:before { content: 'flag' !important; }
.fi-sr-person-carry-box:before { content: 'local_shipping' !important; }
.fi-sr-picture:before { content: 'image' !important; }
.fi-sr-play:before { content: 'play_arrow' !important; }
.fi-sr-plus:before { content: 'add' !important; }
.fi-sr-point-of-sale-bill:before { content: 'receipt_long' !important; }
.fi-sr-progress-complete:before { content: 'check_circle' !important; }
.fi-sr-rectangle-list:before { content: 'list_alt' !important; }
.fi-sr-refund-alt:before { content: 'assignment_return' !important; }
.fi-sr-region-pin:before { content: 'location_on' !important; }
.fi-sr-reply-all:before { content: 'reply_all' !important; }
.fi-sr-seller:before { content: 'storefront' !important; }
.fi-sr-settings:before { content: 'settings' !important; }
.fi-sr-settings-sliders:before { content: 'tune' !important; }
.fi-sr-shield-trust:before { content: 'shield' !important; }
.fi-sr-shop:before { content: 'store' !important; }
.fi-sr-shopping-cart:before { content: 'shopping_cart' !important; }
.fi-sr-sign-out-alt:before { content: 'logout' !important; }
.fi-sr-sitemap:before { content: 'account_tree' !important; }
.fi-sr-sort-alt:before { content: 'sort' !important; }
.fi-sr-star:before { content: 'star' !important; }
.fi-sr-stats:before { content: 'bar_chart' !important; }
.fi-sr-template:before { content: 'dashboard' !important; }
.fi-sr-time-past:before { content: 'history' !important; }
.fi-sr-tools:before { content: 'build' !important; }
.fi-sr-trash:before { content: 'delete' !important; }
.fi-sr-triangle-warning:before { content: 'warning' !important; }
.fi-sr-umbrella-beach:before { content: 'beach_access' !important; }
.fi-sr-undo-alt:before { content: 'undo' !important; }
.fi-sr-usd-circle:before { content: 'monetization_on' !important; }
.fi-sr-user:before { content: 'person' !important; }
.fi-sr-user-gear:before { content: 'manage_accounts' !important; }
.fi-sr-user-skill-gear:before { content: 'engineering' !important; }
.fi-sr-workflow-setting-alt:before { content: 'account_tree' !important; }

/* ==========================================================================
   FONTAWESOME UTILITY ICONS TO MATERIAL SYMBOLS MAPPING
   ========================================================================== */
.fa-calendar,
.fa-check-circle,
.fa-close,
.fa-envelope,
.fa-eye,
.fa-filter,
.fa-heart,
.fa-heart-o,
.fa-home,
.fa-map-marker,
.fa-paperclip,
.fa-phone,
.fa-question-circle,
.fa-screwdriver-wrench,
.fa-search,
.fa-share-alt,
.fa-shopping-bag,
.fa-sign-in,
.fa-times,
.fa-trash,
.fa-truck,
.fa-user-circle,
.fa-user-o {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    vertical-align: middle !important;
    text-rendering: optimizeLegibility !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-feature-settings: 'liga' !important;
}

.fa-calendar:before,
.fa-check-circle:before,
.fa-close:before,
.fa-envelope:before,
.fa-eye:before,
.fa-filter:before,
.fa-heart:before,
.fa-heart-o:before,
.fa-home:before,
.fa-map-marker:before,
.fa-paperclip:before,
.fa-phone:before,
.fa-question-circle:before,
.fa-screwdriver-wrench:before,
.fa-search:before,
.fa-share-alt:before,
.fa-shopping-bag:before,
.fa-sign-in:before,
.fa-times:before,
.fa-trash:before,
.fa-truck:before,
.fa-user-circle:before,
.fa-user-o:before {
    font-family: 'Material Symbols Outlined' !important;
}

.fa-calendar:before { content: 'calendar_today' !important; }
.fa-check-circle:before { content: 'check_circle' !important; }
.fa-close:before { content: 'close' !important; }
.fa-envelope:before { content: 'mail' !important; }
.fa-eye:before { content: 'visibility' !important; }
.fa-filter:before { content: 'filter_list' !important; }
.fa-heart:before { content: 'favorite' !important; }
.fa-heart-o:before { content: 'favorite_border' !important; }
.fa-home:before { content: 'home' !important; }
.fa-map-marker:before { content: 'location_on' !important; }
.fa-paperclip:before { content: 'attach_file' !important; }
.fa-phone:before { content: 'phone' !important; }
.fa-question-circle:before { content: 'help' !important; }
.fa-screwdriver-wrench:before { content: 'build' !important; }
.fa-search:before { content: 'search' !important; }
.fa-share-alt:before { content: 'share' !important; }
.fa-shopping-bag:before { content: 'shopping_bag' !important; }
.fa-sign-in:before { content: 'login' !important; }
.fa-times:before { content: 'close' !important; }
.fa-trash:before { content: 'delete' !important; }
.fa-truck:before { content: 'local_shipping' !important; }
.fa-user-circle:before { content: 'account_circle' !important; }
.fa-user-o:before { content: 'person' !important; }

/* ==========================================================================
   MODERN PREMIUM STOREFRONT HEADER OVERRIDES
   ========================================================================== */
header.rtl {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02) !important;
}

/* ---- 1. TOPBAR (Phone, Currency, Language) ---- */
header.rtl .topbar {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 0.45rem 0 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}
header.rtl .topbar > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
header.rtl .topbar .topbar-link {
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}
header.rtl .topbar .topbar-link:hover {
    color: var(--web-primary) !important;
}
header.rtl .topbar .dropdown-toggle::after {
    display: none !important;
}
header.rtl .topbar .dropdown-menu {
    border: 1px solid var(--theme-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--theme-shadow-md) !important;
    background-color: #ffffff !important;
    padding: 0.5rem !important;
    margin-top: 0.5rem !important;
}

/* ---- 2. MAIN HEADER ROW (Logo, Search, Toolbar Icons) ---- */
.navbar-sticky.mobile-head {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.navbar-sticky.mobile-head.navbar-stuck {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;
}

/* Desktop: container flex alignment for logo row */
@media (min-width: 768px) {
    .navbar-sticky.mobile-head {
        padding: 0.65rem 0 !important;
    }
    .navbar-sticky.mobile-head > .navbar > .container {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
    }
}

/* ---- 3. SEARCH BAR (Pill shape — desktop only) ---- */
.search_form {
    position: relative !important;
    width: 100% !important;
}
@media (min-width: 768px) {
    .input-group-overlay.search-form-mobile {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    .search-bar-input {
        border-radius: 9999px !important;
        border: 1.5px solid #E2E8F0 !important;
        font-size: 0.9rem !important;
        font-weight: 450 !important;
        height: 46px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background-color: #F8FAFC !important;
    }
    [dir="ltr"] .search-bar-input {
        padding: 0.65rem 3.25rem 0.65rem 1.25rem !important;
    }
    [dir="rtl"] .search-bar-input {
        padding: 0.65rem 1.25rem 0.65rem 3.25rem !important;
    }
    .search-bar-input:focus {
        border-color: var(--web-primary) !important;
        box-shadow: 0 0 0 3px rgba(var(--web-primary-rgb), 0.1), 0 2px 8px rgba(var(--web-primary-rgb), 0.05) !important;
        outline: none !important;
        background-color: #ffffff !important;
    }
    .search_button {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: var(--web-primary) !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 0 2px 4px rgba(var(--web-primary-rgb), 0.2) !important;
        transition: all 0.2s ease !important;
        z-index: 2 !important;
    }
    [dir="ltr"] .search_button {
        right: 6px !important;
        left: auto !important;
    }
    [dir="rtl"] .search_button {
        left: 6px !important;
        right: auto !important;
    }
    .search_button:hover {
        background: var(--theme-primary-hover, var(--web-primary)) !important;
        transform: translateY(-50%) scale(1.05) !important;
        box-shadow: 0 4px 8px rgba(var(--web-primary-rgb), 0.3) !important;
    }
    .search_button span.material-symbols-outlined {
        font-size: 19px !important;
        color: #ffffff !important;
    }
}

/* ---- 4. NAVBAR TOOLBAR ICONS (Wishlist, Profile, Cart) ---- */

/* FIX: The stuck-toggler (hamburger) must remain display:none unless navbar-stuck.
   Scope toolbar styles carefully so they don't accidentally show the toggler. */
.navbar-stuck-toggler {
    display: none !important;
}
.navbar-sticky.navbar-stuck .navbar-stuck-toggler {
    display: flex !important;
}

/* FIX: The mobile search icon trigger must be hidden when search bar is visible (md+) */
@media (min-width: 768px) {
    .open-search-form-mobile {
        display: none !important;
    }
}

/* Desktop toolbar */
@media (min-width: 768px) {
    .navbar-toolbar {
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        flex-shrink: 0 !important;
    }
    .navbar-toolbar > .navbar-tool,
    .navbar-toolbar > .dropdown,
    .navbar-toolbar > div[id="cart_items"],
    .navbar-toolbar > div.navbar-tool {
        display: inline-flex !important;
        align-items: center !important;
    }
    .navbar-toolbar .navbar-tool-icon-box {
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background-color: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
        position: relative !important;
        color: #475569 !important;
    }
    .navbar-toolbar .navbar-tool-icon-box:hover,
    .navbar-toolbar .navbar-tool:hover .navbar-tool-icon-box {
        background-color: var(--web-primary-10) !important;
        border-color: var(--web-primary-20) !important;
        color: var(--web-primary) !important;
        transform: translateY(-1px) !important;
    }
    .navbar-toolbar .navbar-tool-icon {
        font-size: 21px !important;
        color: inherit !important;
        line-height: 1 !important;
    }
    .navbar-toolbar .navbar-tool-label {
        position: absolute !important;
        top: -3px !important;
        right: -3px !important;
        background: var(--web-primary) !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 4px !important;
        border-radius: 9999px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
        line-height: 1 !important;
        z-index: 1 !important;
    }

    /* User avatar in toolbar */
    .navbar-tool img.img-profile {
        width: 30px !important;
        height: 30px !important;
        object-fit: cover !important;
    }

    /* Cart text label */
    .navbar-tool-text {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        line-height: 1.2 !important;
        padding-left: 0.25rem !important;
    }
    .navbar-tool-text small {
        color: #64748B !important;
        font-size: 0.7rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        font-weight: 500 !important;
    }
    .navbar-tool-text .cart-total-price {
        color: var(--theme-text-heading, #0F172A) !important;
        font-weight: 600 !important;
    }
}

/* Mobile toolbar */
@media (max-width: 767px) {
    .navbar-sticky.mobile-head {
        padding: 0.4rem 0 !important;
    }
    .navbar-toolbar {
        display: flex !important;
        align-items: center !important;
        gap: 0.2rem !important;
    }
    .navbar-toolbar .navbar-tool-icon-box {
        width: 2.125rem !important;
        height: 2.125rem !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        position: relative !important;
        color: #475569 !important;
    }
    .navbar-toolbar .navbar-tool-icon {
        font-size: 17px !important;
        line-height: 1 !important;
    }
    .navbar-toolbar .navbar-tool-label {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        background: var(--web-primary) !important;
        color: #ffffff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        min-width: 15px !important;
        height: 15px !important;
        padding: 0 3px !important;
        border-radius: 9999px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1.5px solid #ffffff !important;
        line-height: 1 !important;
    }
    .navbar-tool-text {
        display: none !important;
    }
    .navbar-tool img.img-profile {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ---- 5. BOTTOM NAVBAR / STUCK MENU (Categories, Home, Brand, etc.) ---- */

/* Desktop bottom nav */
@media (min-width: 768px) {
    .navbar-stuck-menu {
        background-color: #ffffff !important;
        border-top: 1px solid #F1F5F9 !important;
        border-bottom: 1px solid #E2E8F0 !important;
        padding: 0 !important;
    }
    .navbar-stuck-menu > .container {
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .navbar-stuck-menu .navbar-collapse {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    .navbar-stuck-menu .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        height: 100% !important;
    }
    /* CRITICAL FIX: Do NOT force display on nav-items that use Bootstrap's
       d-md-none to hide on desktop (like Sign in/Sign up in mobile menu).
       Only set display:flex on items that don't have responsive hide classes. */
    .navbar-stuck-menu .navbar-nav .nav-item:not(.d-md-none):not(.d-block.d-md-none) {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    .navbar-stuck-menu .navbar-nav .nav-link {
        color: #475569 !important;
        font-weight: 500 !important;
        font-size: 0.9rem !important;
        padding: 0 1rem !important;
        position: relative !important;
        transition: color 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        white-space: nowrap !important;
    }

    /* Underline animation — only for non-dropdown regular nav links */
    .navbar-stuck-menu .navbar-nav .nav-link:not(.dropdown-toggle):not(.category-menu-toggle-btn)::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) scaleX(0) !important;
        width: 60% !important;
        height: 2.5px !important;
        background-color: var(--web-primary) !important;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-radius: 4px 4px 0 0 !important;
        border: none !important;
        display: block !important;
    }
    .navbar-stuck-menu .navbar-nav .nav-link:not(.dropdown-toggle):not(.category-menu-toggle-btn):hover::after {
        transform: translateX(-50%) scaleX(1) !important;
    }
    .navbar-stuck-menu .navbar-nav .nav-link:hover {
        color: var(--web-primary) !important;
    }
    .navbar-stuck-menu .navbar-nav .active > .nav-link:not(.dropdown-toggle)::after,
    .navbar-stuck-menu .navbar-nav .nav-item.active > .nav-link:not(.dropdown-toggle)::after {
        transform: translateX(-50%) scaleX(1) !important;
    }
    .navbar-stuck-menu .navbar-nav .active > .nav-link,
    .navbar-stuck-menu .navbar-nav .nav-item.active > .nav-link {
        color: var(--web-primary) !important;
    }

    /* Dropdown toggle caret — preserve Bootstrap default behavior */
    .navbar-stuck-menu .navbar-nav .nav-link.dropdown-toggle:not(.category-menu-toggle-btn)::after {
        display: inline-block !important;
        border: solid currentColor !important;
        border-width: 0 1.5px 1.5px 0 !important;
        padding: 2.5px !important;
        transform: rotate(45deg) !important;
        margin-left: 0.3em !important;
        vertical-align: 0.15em !important;
        content: '' !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        opacity: 0.7 !important;
    }

    /* Offers / Vendor dropdown btn */
    .navbar-stuck-menu .navbar-nav .btn.dropdown-toggle {
        font-weight: 500 !important;
        font-size: 0.9rem !important;
        color: #475569 !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        padding: 0 0.75rem !important;
    }
    .navbar-stuck-menu .navbar-nav .btn.dropdown-toggle:hover {
        color: var(--web-primary) !important;
    }

    /* Override the opacity hover from original style.css */
    .navbar-stuck-menu .navbar-nav .nav-item > a:hover,
    .navbar-stuck-menu .navbar-nav .nav-item > button:hover {
        opacity: 1 !important;
    }
}

/* Mobile stuck menu — clean reset */
@media (max-width: 767px) {
    .navbar-stuck-menu {
        background-color: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    .navbar-stuck-menu > .container {
        height: auto !important;
        display: block !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .navbar-stuck-menu .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .navbar-stuck-menu .navbar-nav .nav-item {
        display: block !important;
    }
    .navbar-stuck-menu .navbar-nav .nav-link {
        color: #334155 !important;
        font-size: 0.875rem !important;
        padding: 0.65rem 0.5rem !important;
        height: auto !important;
    }
    /* Remove underline animation on mobile */
    .navbar-stuck-menu .navbar-nav .nav-link::after {
        display: none !important;
    }
    /* Re-show dropdown carets on mobile */
    .navbar-stuck-menu .navbar-nav .nav-link.dropdown-toggle::after {
        display: inline-block !important;
    }
    .navbar-stuck-menu .navbar-nav .btn.dropdown-toggle {
        color: #334155 !important;
        padding: 0.65rem 0.5rem !important;
    }
}

/* ---- 6. CATEGORIES DROPDOWN TRIGGER BUTTON ---- */
@media (min-width: 768px) {
    /* The mega-nav list that holds the categories trigger */
    .navbar-stuck-menu .mega-nav.__mega-nav {
        margin-right: 0 !important;
        padding: 0 !important;
    }
    .category-menu-toggle-btn {
        background-color: var(--web-primary) !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        padding: 0.4rem 1rem !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 2px 6px rgba(var(--web-primary-rgb), 0.15) !important;
        border: none !important;
        height: auto !important;
        line-height: 1.4 !important;
    }
    .category-menu-toggle-btn:hover {
        background-color: var(--theme-primary-hover, var(--web-primary)) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 10px rgba(var(--web-primary-rgb), 0.25) !important;
        color: #ffffff !important;
    }
    .category-menu-toggle-btn span.material-symbols-outlined {
        font-size: 18px !important;
        line-height: 1 !important;
    }
    /* Remove the dropdown arrow from the categories button */
    .category-menu-toggle-btn.dropdown-toggle::after {
        display: none !important;
    }
}

/* ---- 7. CATEGORY MEGA MENU LIST ---- */
.category-menu-wrap {
    border-radius: 12px !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: var(--theme-shadow-lg) !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    padding: 0.75rem 0 !important;
}
.__top-slider-cate .category-menu-wrap {
    --cm-w: 252px !important;
}
.category-menu li a {
    color: var(--theme-text-body) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}
.category-menu li a:hover {
    background-color: var(--web-primary-10) !important;
    color: var(--web-primary) !important;
}
.category-menu li.has-sub-item > a::after {
    font-family: 'Material Symbols Outlined' !important;
    content: 'chevron_right' !important;
    font-size: 1.1rem !important;
    color: #94A3B8 !important;
    border: none !important;
    margin-right: auto !important;
    float: left !important;
}
[dir="rtl"] .category-menu li.has-sub-item > a::after {
    content: 'chevron_left' !important;
    float: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ---- 8. DROPDOWN MENUS (Global polish for header dropdowns) ---- */
@media (min-width: 768px) {
    .navbar-stuck-menu .dropdown-menu {
        border: 1px solid var(--theme-border) !important;
        border-radius: 10px !important;
        box-shadow: var(--theme-shadow-lg) !important;
        padding: 0.5rem !important;
        margin-top: 0 !important;
    }
    .navbar-stuck-menu .dropdown-item {
        border-radius: 6px !important;
        padding: 0.5rem 0.85rem !important;
        font-size: 0.875rem !important;
        transition: all 0.15s ease !important;
    }
    .navbar-stuck-menu .dropdown-item:hover {
        background-color: var(--web-primary-10) !important;
        color: var(--web-primary) !important;
    }
}
}

/* ==========================================================================
   GLOBAL AUTH FIXES (Phone number and Captcha)
   ========================================================================== */
/* Phone input placeholder padding to avoid flag overlap */
.iti {
    width: 100% !important;
    display: block !important;
}

.iti .iti__flag-container {
    left: 12px !important;
    right: auto !important;
    z-index: 5 !important;
}

.iti .iti__selected-flag {
    height: 100% !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.iti input[type="tel"],
.iti input[name="phone"],
.iti .form-control {
    padding-left: 105px !important;
    padding-right: 14px !important;
    text-indent: 0 !important;
    direction: ltr !important;
}

.iti input[type="tel"]::placeholder,
.iti input[name="phone"]::placeholder {
    opacity: 1 !important;
    color: #8a94a6 !important;
}

/* Captcha Fixes */
.default-captcha-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    height: 44px !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 0 !important;
    margin: 10px 0 !important;
}

.default-captcha-container input {
    min-width: 0 !important;
    width: 100% !important;
    height: 44px !important;
    font-size: 12px !important;
    padding-left: 12px !important;
    padding-right: 8px !important;
    border-radius: 8px !important;
    border: 1px solid var(--theme-border) !important;
    text-overflow: ellipsis !important;
}

.default-captcha-container input::placeholder {
    font-size: 12px !important;
    opacity: 1 !important;
    color: #8a94a6 !important;
}

.default-captcha-container .captcha-image-container {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    background: rgb(220, 210, 230) !important;
}

.default-captcha-container .captcha-image-container img {
    max-width: 90px !important;
    width: 90px !important;
    height: 44px !important;
    min-width: 0 !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.default-captcha-container .captcha-image-container .refresh-icon {
    width: 38px !important;
    height: 44px !important;
    min-width: 38px !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}