/**
 * Theme Name: Elessi Theme Child
 * Author: Babar Dogar
 * Author URI: https://pinex.co.uk
 * Version: 1.0
 * Description: Elessi Theme Child Styles - Includes Custom Login UI, Preloader Ghosting, Bottom Nav, Filter Overrides, Sidebar Containment, and Bulletproof AJAX Grids.
 */

/* =============================================================================
   ASSET PIPELINE (GLOBAL OVERRIDES)
   ============================================================================= */

/* Constrain Featured Image height to reduce scrolling and maintain luxury aesthetic */
.single-post .post-thumbnail img {
    max-height: 400px !important;
    object-fit: cover !important;
    width: 100% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Reduce the excessive vertical gap between Post Name and Content */
.single-post .entry-header {
    margin-bottom: 5px !important;
}

.single-post .entry-content {
    margin-top: 0 !important;
}

/* =============================================================================
   1. LOGIN PAGE ARCHITECTURE (INTEGRATED MODAL)
   ============================================================================= */

/* Main Canvas Setup */
body.login {
    background-color: #f8f9fb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Ensure no background logo or parent overlays remain */
body.login::before {
    display: none !important;
    content: none !important;
}

/* Center Login Container */
#login {
    width: 100% !important;
    max-width: 440px !important;
    padding: 20px !important;
    margin: 0 auto !important;
}

/* Hide the standard WordPress H1 Header */
#login h1 {
    display: none !important;
}

/* =============================================================================
   2. THE MODAL CONTAINER & LOGO INJECTION
   ============================================================================= */

.login form {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1) !important;
    padding: 40px !important;
    border-radius: 16px !important;
    position: relative !important;
    margin-top: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* INJECT LOGO (Top of Modal Form) */
.login form::before {
    content: "" !important;
    display: block !important;
    background-image: url('https://kainatbabar.com/wp-content/uploads/2026/07/KB.webp') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 80px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    order: 1 !important;
}

/* INJECT GREETING TEXT (Below Logo) */
.login form::after {
    content: "Great to have you back!" !important;
    display: block !important;
    text-align: center !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin-bottom: 30px !important;
    letter-spacing: -0.5px !important;
    font-family: 'Poppins', sans-serif !important;
    order: 2 !important;
}

/* Set standard form elements to follow the injected pseudo-elements */
.login form p, 
.login form .user-pass-wrap, 
.login form .forgetmenot, 
.login form .submit { 
    order: 3 !important; 
}

/* =============================================================================
   3. FORM FIELDS & LABELS
   ============================================================================= */

.login label {
    font-weight: 600 !important;
    color: #333333 !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Blue-Tinted Input Fields from Screenshot */
.login form .input, 
.login input[type="text"], 
.login input[type="password"] {
    background: #f0f5ff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    color: #333333 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: #f1706b !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(241, 112, 107, 0.1) !important;
    outline: none !important;
}

/* =============================================================================
   4. PRIMARY ACTION BUTTON (Coral Salmon)
   ============================================================================= */

.wp-core-ui .button-primary {
    background: #f1706b !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    height: 56px !important;
    line-height: 56px !important;
    padding: 0 30px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    width: 100% !important;
    display: block !important;
    margin-top: 15px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 10px 20px rgba(241, 112, 107, 0.2) !important;
    text-shadow: none !important;
}

.wp-core-ui .button-primary:hover {
    background: #e05e59 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 30px rgba(241, 112, 107, 0.3) !important;
}

/* =============================================================================
   5. NAVIGATION LINK REMOVAL (STRICT)
   ============================================================================= */

/* Remove "Lost your password?", "Back to Site", and Privacy Policy links */
.login #nav, 
.login #backtoblog,
.login .privacy-policy-page-link {
    display: none !important;
}

/* Custom styling for error messages */
.login .message, 
.login #login_error, 
.login .notice {
    border-left: 5px solid #f1706b !important;
    background: #ffffff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    border-radius: 10px !important;
    padding: 15px !important;
    margin-bottom: 25px !important;
    font-weight: 500 !important;
}

/* =============================================================================
   6. CUSTOM THEME LOADER (RESPONSIVE HEARTBEAT LOGO + SPINNING RING)
   ============================================================================= */

/* Hide the default Elessi spinner dots */
body .nasa-loader .nasa-dot {
    display: none !important;
}

/* Hardware-accelerated animation for the Ring */
@keyframes pinex-ring-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hardware-accelerated animation for the Heartbeat Logo */
@keyframes pinex-heartbeat {
    0%, 100% { transform: scale(0.85); }
    50% { transform: scale(1.15); }
}

/* Base Loader Container - Centers everything (Mobile First: 50px) */
body .nasa-loader {
    width: 50px !important; 
    height: 50px !important;
    margin: 0 !important; 
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important; 
    animation: none !important; 
    transition: all 0.3s ease !important;
}

/* Layer 1 (Bottom): The Spinning SVG Ring */
body .nasa-loader::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important; 
    left: 0 !important;
    width: 100% !important; 
    height: 100% !important;
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3cdefs%3e%3clinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3e%3cstop offset='0%25' stop-color='%23ff007f'/%3e%3cstop offset='100%25' stop-color='%237000ff'/%3e%3c/linearGradient%3e%3c/defs%3e%3ccircle cx='50' cy='50' r='40' fill='none' stroke='url(%23g)' stroke-width='8' stroke-linecap='round' stroke-dasharray='180 60'/%3e%3c/svg%3e") no-repeat center center !important;
    background-size: contain !important;
    animation: pinex-ring-spin 1s linear infinite !important;
    z-index: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Layer 2 (Top): The Heartbeat Logo (Mobile First: 25px) */
body .nasa-loader::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important; 
    left: 0 !important;
    width: 100% !important; 
    height: 100% !important;
    background: url('https://kainatbabar.com/wp-content/uploads/2026/07/KB.webp') no-repeat center center !important;
    background-size: 25px auto !important;
    animation: pinex-heartbeat 1.2s ease-in-out infinite !important;
    z-index: 10 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
}

/* Responsive Scaling for Tablets */
@media (min-width: 768px) {
    body .nasa-loader {
        width: 80px !important;
        height: 80px !important;
    }
    body .nasa-loader::after {
        background-size: 40px auto !important;
    }
}

/* Responsive Scaling for Desktops */
@media (min-width: 1024px) {
    body .nasa-loader {
        width: 100px !important;
        height: 100px !important;
    }
    body .nasa-loader::after {
        background-size: 50px auto !important;
    }
}

/* PRELOADER TTI & GLOBAL LAYOUT STABILITY FIX: 
   1. Allows clicks/scrolling to instantly pass through the preloader.
   2. Clips rogue Elementor widgets causing horizontal scroll bugs on mobile.
*/
.nasa-preloader,
.nasa-theme-loader,
#nasa-init-wrapper {
    pointer-events: none !important; 
}

/* Global reset WITHOUT breaking position: sticky */
html, body {
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* To fix the Elementor horizontal whitespace bug without breaking sticky headers, 
   apply the overflow restriction strictly to the site's main content wrappers 
   using the modern 'clip' property instead of 'hidden'.
*/
#nasa-init-wrapper,
.nasa-theme-wrapper {
    overflow-x: clip !important;
    max-width: 100vw !important;
}

/* =============================================================================
   7. MOBILE BOTTOM MENU (PINEX CORE)
   ============================================================================= */

/* Base Variables */
:root {
    --pinex-nav-icon: #333333;
    --pinex-nav-icon-active: #000000;
    --pinex-nav-badge-bg: #ff3366; /* Vibrant Brand Pink */
    --pinex-nav-badge-text: #ffffff;
    --pinex-z-index: 9999;
}

/* Mobile Nav Wrapper */
.pinex-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Solid White fixes Android's grey-gradient rendering glitch natively. No translucent pixels allowed. */
    background-color: #ffffff !important; 
    border-top: 1px solid #eaeaea !important;
    z-index: var(--pinex-z-index);
    padding-bottom: env(safe-area-inset-bottom); /* iOS safe area */
    box-shadow: none !important; /* Stripped to fix Android grey bleed */
    display: block;
    margin: 0 !important;
}

/* Hide on Desktop */
@media (min-width: 768px) {
    .pinex-mobile-nav {
        display: none !important;
    }
}

/* Flex Container */
.pinex-nav-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 60px;
    margin: 0;
    padding: 0;
}

/* Individual Item Styling */
.pinex-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* Will scale dynamically with 5 or 6 items */
    height: 100%;
    color: var(--pinex-nav-icon);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    position: relative;
    flex: 1; /* Ensures perfect fluid spacing regardless of item count */
}

.pinex-nav-item:active,
.pinex-nav-item:hover {
    color: var(--pinex-nav-icon-active);
}

.pinex-nav-item i {
    font-size: 1.15rem;
    margin-bottom: 6px; /* Explicit margin between icon and heading */
}

/* Headings/Labels */
.pinex-nav-label {
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1;
    text-transform: capitalize;
    white-space: nowrap;
}

/* Badge Wrapper (Cart & Wishlist) */
.pinex-icon-wrapper {
    position: relative;
    display: inline-block;
    line-height: 1; 
}

/* Live Counter Badges (Pink, Pushed Above Icons) */
.pinex-cart-counter {
    position: absolute;
    top: -12px; /* Pulls badge parallel and above the top edge of the icon */
    right: -14px; /* Extends badge neatly to the right */
    background-color: var(--pinex-nav-badge-bg);
    color: var(--pinex-nav-badge-text);
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 2px;
    box-shadow: 0 2px 5px rgba(255, 51, 102, 0.4); /* Subtle luxury glow */
}

/* ==========================================================
   8. MOBILE ELEMENT OFFSETS (PREVENTS OVERLAP ON FIXED BAR)
   ========================================================== */
@media (max-width: 767px) {
    /* Targets standard Elessi cookie banners to sit perfectly on top of the bar */
    .nasa-cookie-bar,
    .cookie-notice-container {
        bottom: 60px !important; 
    }
    
    /* Optional: If Elessi's "Back to Top" button is active on mobile, push it up slightly */
    .nasa-back-to-top {
        bottom: 80px !important;
    }
}

/* ==========================================================
   9. MOBILE HEADER OPTIMIZATION (PINEX CORE)
   ========================================================== */
@media (max-width: 767px) {
    /* 1. Obliterate redundant bottom-bar icons (Hamburger, Cart, Account, Wishlist) from Native Header */
    /* Prevents Elessi's default icons from duplicating our bottom bar actions */
    .nasa-header-mobile .mobile-menu-control,
    .nasa-header-mobile .nasa-mobile-menu-icon,
    .nasa-header-mobile .cart-link,
    .nasa-header-mobile .nasa-login-register-ajax,
    .nasa-header-mobile .wishlist-link,
    .nasa-header-mobile .nasa-mobile-cart,
    .nasa-header-mobile .nasa-mobile-account {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    /* 2. Strict Top Filter Removal (Invisible Cloak Method) */
    /* Shrinks ALL Elessi and FiboFilters top/mobile filter triggers visually without removing them from the DOM */
    .nasa-shop-topbar .nasa-filter-btn,
    .nasa-shop-topbar .nasa-show-filter,
    .nasa-shop-topbar .toggle-topbar-shop,
    .nasa-shop-topbar .nasa-filter-wrap,
    .nasa-shop-topbar .fibofilters,
    .fibofilters-horizontal,
    .fibofilters-top,
    .ff-horizontal,
    .btn-canvas-filter,
    .nasa-shop-topbar > div:has(.nasa-filter-btn),
    /* Mobile-specific filter triggers targeted explicitly */
    .nasa-mobile-filter,
    .nasa-mobile-filter-btn,
    .mobile-filter-btn,
    .nasa-filter-mobile,
    .nasa-top-sidebar .nasa-filter-btn,
    a[href="#nasa-filter-sidebar"].nasa-filter-btn,
    .ff-mobile-btn,
    .fibofilters-mobile-btn,
    .ff-mobile-toggle {
        position: absolute !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        z-index: -9999 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        clip: rect(0, 0, 0, 0) !important; /* Ultimate invisibility cloak */
    }
}

/* ==========================================================
   10. SIDEBAR & MODAL CONTAINMENT (NATIVE APP FEEL)
   ========================================================== */
@media (max-width: 767px) {
    /* 1. DYNAMIC BOUNDING BOX: Restrict outer sidebars so they sit above our custom bottom nav.
       Uses 'dvh' for perfect iOS/Android calculation without the URL bar messing it up.
    */
    .nasa-sidebar:not(#mobile-navigation):not(#nasa-menu-sidebar),
    #cart-sidebar,
    .nasa-cart-sidebar,
    #nasa-wishlist-sidebar,
    .nasa-wishlist-sidebar,
    #nasa-login-sidebar,
    .nasa-login-sidebar,
    #nasa-filter-sidebar,
    .nasa-filter-sidebar,
    .fibofilters-mobile-modal,
    .ff-mobile-modal {
        top: 0 !important;
        bottom: 60px !important; 
        height: calc(100dvh - 60px) !important;
        max-height: calc(100dvh - 60px) !important; 
        z-index: 9998 !important;
        position: fixed !important;
    }

    /* 2. Adjust the dark overlay to sit flush */
    .black-window {
        top: 0 !important;
        bottom: 60px !important;
        height: calc(100dvh - 60px) !important;
        z-index: 9997 !important;
    }

    /* 3. CART SAFE SCROLL FIX */
    #cart-sidebar .nasa-sidebar-content,
    .nasa-cart-sidebar .nasa-sidebar-content,
    #cart-sidebar .widget_shopping_cart_content,
    .nasa-cart-sidebar .nasa-cart-content,
    #nasa-wishlist-sidebar .nasa-sidebar-content {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #cart-sidebar .nasa-cart-items,
    #cart-sidebar .woocommerce-mini-cart,
    #cart-sidebar .cart_list,
    .nasa-cart-sidebar .cart_list,
    #nasa-wishlist-sidebar .nasa-wishlist-items {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        min-height: 0 !important; 
        max-height: none !important; 
    }

    #cart-sidebar .nasa-cart-bottom,
    #cart-sidebar .woocommerce-mini-cart__total,
    #cart-sidebar .woocommerce-mini-cart__buttons,
    .nasa-cart-sidebar .nasa-cart-bottom-wrap,
    .nasa-cart-sidebar .nasa-cart-footer,
    #nasa-wishlist-sidebar .nasa-sidebar-bottom {
        flex: 0 0 auto !important;
        background: #ffffff !important;
        padding: 15px !important;
        margin: 0 !important;
        border-top: 1px solid #eeeeee !important;
    }

    /* 4. COLLECTIONS SIDEBAR SAFE FIX: Native layout with injected padding */
    #mobile-navigation,
    #nasa-menu-sidebar {
        z-index: 9998 !important;
    }
    
    #mobile-navigation .nasa-mobile-nav-wrap,
    #nasa-menu-sidebar .nasa-sidebar-content,
    #mobile-navigation .mobile-menu-wrapper {
        padding-bottom: 80px !important; 
    }
}

/* ==========================================================
   11. ABSOLUTE BULLETPROOF AJAX GRID ENFORCER (PINEX CORE)
   ========================================================== */
/* Murders Elessi's and FiboFilters' Masonry inline JS styles that corrupt the grid after scrolling */

/* The Parent Containers */
.woocommerce ul.products,
.woocommerce-page ul.products,
.products.elements-grid,
.nasa-products-masonry,
.fibofilters-results .products,
.nasa-content-page-main .products,
.nasa-content-page-main ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
    height: auto !important; /* Obliterates Masonry inline height calculation */
    clear: both !important;
}

.woocommerce ul.products::before, 
.woocommerce ul.products::after,
.nasa-content-page-main .products::before,
.nasa-content-page-main .products::after {
    display: none !important; /* Strips legacy float clearing */
}

/* The Individual Products (Nuclear override of JS positioning) */
.woocommerce ul.products > li.product,
.woocommerce-page ul.products > li.product,
.products.elements-grid > .product,
.nasa-products-masonry > .product-item,
.nasa-products-masonry > li.product,
.fibofilters-results .product,
.nasa-content-page-main .products > .product,
.nasa-content-page-main ul.products > li.product {
    list-style: none !important; /* Kills the rogue dots permanently */
    float: none !important;
    display: block !important;
    position: relative !important; /* Overrides absolute Masonry */
    transform: none !important; /* Overrides failed translations */
    top: auto !important; /* Kills JS inline style */
    left: auto !important; /* Kills JS inline style */
    margin: 0 10px 30px 10px !important;
    box-sizing: border-box !important;
    clear: none !important;
}

/* Desktop Layout: 6 Columns */
@media (min-width: 1025px) {
    .woocommerce ul.products > li.product,
    .woocommerce-page ul.products > li.product,
    .products.elements-grid > .product,
    .nasa-products-masonry > .product-item,
    .nasa-products-masonry > li.product,
    .fibofilters-results .product,
    .nasa-content-page-main .products > .product,
    .nasa-content-page-main ul.products > li.product {
        width: calc(16.6666% - 20px) !important;
        max-width: calc(16.6666% - 20px) !important;
        flex: 0 0 calc(16.6666% - 20px) !important;
    }
}

/* Tablet Layout: 4 Columns */
@media (min-width: 768px) and (max-width: 1024px) {
    .woocommerce ul.products > li.product,
    .woocommerce-page ul.products > li.product,
    .products.elements-grid > .product,
    .nasa-products-masonry > .product-item,
    .nasa-products-masonry > li.product,
    .fibofilters-results .product,
    .nasa-content-page-main .products > .product,
    .nasa-content-page-main ul.products > li.product {
        width: calc(25% - 20px) !important;
        max-width: calc(25% - 20px) !important;
        flex: 0 0 calc(25% - 20px) !important;
    }
}

/* Mobile Layout: 2 Columns */
@media (max-width: 767px) {
    .woocommerce ul.products > li.product,
    .woocommerce-page ul.products > li.product,
    .products.elements-grid > .product,
    .nasa-products-masonry > .product-item,
    .nasa-products-masonry > li.product,
    .fibofilters-results .product,
    .nasa-content-page-main .products > .product,
    .nasa-content-page-main ul.products > li.product {
        width: calc(50% - 20px) !important;
        max-width: calc(50% - 20px) !important;
        flex: 0 0 calc(50% - 20px) !important;
    }
}

/* =============================================================================
   12. COMPACT HEADER ENFORCEMENT (NORMAL = STICKY)
   ============================================================================= */

/* Force the primary header row to permanently adopt the sticky state's minimal padding */
header.nasa-header .header-wrapper,
.nasa-header-wrapper .header-content,
.nasa-header .header-middle {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: auto !important;
    transition: none !important; /* Removes the "jump" or animation when scrolling down */
}

/* Restrict the logo height to prevent vertical stretching and maintain the compact feel */
header.nasa-header .logo-wrapper img {
    max-height: 45px !important; /* Adjust this value if you need the logo slightly larger/smaller */
    width: auto !important;
    display: block !important;
}

/* Ensure the search bar, icons, and wrappers remain perfectly vertically centered without margins */
header.nasa-header .header-search,
header.nasa-header .header-icons,
header.nasa-header .nasa-icon-text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =============================================================================
   13. MOBILE COMPACT HEADER ENFORCEMENT (NORMAL = STICKY)
   ============================================================================= */

@media (max-width: 767px) {
    /* Strip excess padding from Elessi's dedicated mobile header wrappers */
    header.nasa-header-mobile,
    .nasa-header-mobile .nasa-mobile-header-wrap,
    .nasa-header-mobile .header-content,
    .nasa-header-mobile .mobile-header-panel,
    .nasa-header-mobile .header-middle {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        min-height: auto !important;
        transition: none !important; /* Obliterates the scrolling animation jitter */
    }

    /* Cap the mobile logo strictly to match the sticky state */
    .nasa-header-mobile .logo-wrapper img,
    .nasa-header-mobile .nasa-logo img {
        max-height: 32px !important; /* Slightly smaller than desktop for mobile balance */
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Ensure hamburger, search, and account/bag icons sit flush */
    .nasa-header-mobile .mobile-menu-control,
    .nasa-header-mobile .nasa-mobile-menu-icon,
    .nasa-header-mobile .header-icons {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
}