Social Floating Buttons

Tajawal", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Enforce sharp on legacy classes */ .category_products_grid_container, .category_products_grid_card, .product_form_checkout, .product_form_checkout *, .quantity_container, .quantity_btn, .checkout_btn, .add_to_cart_btn, .global_input, .global_textarea, .gov_select, .fasty_product_card, .fasty_product_card_img, .fasty_product_card_btn, .fasty_product_card_wishlist_btn, .product_form_checkout .info-box, .product_form_checkout .form-grid, .product_form_checkout input, .product_form_checkout select, .product_form_checkout textarea, .product_form_checkout .summary .details, .product_form_checkout .summary .toggle { border-radius: var(--radius-sharp) !important; } body { background: var(--page-bg); color: var(--text-main); margin:0; padding:0; } .category_products_grid_container{ display:grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap:16px; align-items:start; padding:20px; max-width:1200px; margin:0 auto; box-sizing:border-box; } .category_products_grid_card, .fasty_product_card{ background: var(--panel-bg); border: 1px solid var(--input-border); padding:12px; box-shadow: var(--shadow-soft); color: var(--text-main); display:flex; flex-direction:column; gap:10px; box-sizing:border-box; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); width:100%; border-radius: var(--radius-sharp) !important; } .fasty_product_card_img{ background: transparent; padding:8px; min-height:120px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius: var(--radius-sharp) !important; } /* Hide wishlist heart completely */ .fasty_product_card_wishlist_btn, .category_products_grid_card .fasty_product_card_wishlist_btn, .fasty_product_card .fasty_product_card_wishlist_btn, button.fasty_product_card_wishlist_btn, .heart, .icon-heart, .heart-icon, .wishlist-icon, .btn-wishlist { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } .fasty_product_card_wishlist_btn::before, .category_products_grid_card .fasty_product_card_wishlist_btn::before, .fasty_product_card_wishlist_btn::before { content: none !important; background-image: none !important; } .fasty_product_card_wishlist_btn[tabindex], .category_products_grid_card .fasty_product_card_wishlist_btn[tabindex] { pointer-events: none !important; outline: none !important; } /* Base button styles */ .fasty_product_card_btn, .add_to_cart_btn, .checkout_btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius: var(--radius-sharp) !important; border: none; cursor: pointer; font-weight: 800; font-size: 13px; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); box-shadow: 0 6px 18px rgba(10,116,176,0.06); background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue-2)); color: #fff; } .fasty_product_card:hover .fasty_product_card_btn:not(.selected), .fasty_product_card.hovered .fasty_product_card_btn:not(.selected), .fasty_product_card:hover .add_to_cart_btn:not(.selected), .fasty_product_card.hovered .add_to_cart_btn:not(.selected) { background: linear-gradient(90deg, var(--accent-red), var(--accent-red-2)); box-shadow: 0 10px 30px rgba(215,55,63,0.08); transform: translateY(-2px); color: #fff; } .fasty_product_card_btn.selected, .add_to_cart_btn.selected, .checkout_btn.selected, .form_checkout_btn.selected { background: linear-gradient(90deg, var(--accent-red), var(--accent-red-2)) !important; color: #fff !important; box-shadow: 0 12px 34px rgba(215,55,63,0.12) !important; } /* Inputs and quantity */ .global_input, .product_form_checkout input, .gov_select, .product_form_checkout select, .global_textarea, .product_form_checkout textarea { width:100%; padding:10px 12px; border:1px solid var(--input-border); background: #ffffff; color: var(--text-main); font-size:14px; box-shadow: none; outline: none; box-sizing: border-box; border-radius: var(--radius-sharp) !important; } .quantity_container{ display:inline-flex; align-items:center; gap:8px; padding:6px; border:1px solid var(--input-border); background: #fff; border-radius: var(--radius-sharp) !important; box-sizing:border-box; } .quantity_btn{ width:36px; height:36px; border:1px solid var(--input-border); background: #fff; color: var(--text-main); cursor:pointer; font-weight:800; border-radius: 0 !important; } .qty-value{ min-width:44px; text-align:center; padding:8px 6px; border:1px solid var(--input-border); background:#fff; font-weight:800; border-radius: 0 !important; } .product_form_checkout{ background: var(--panel-bg); border:1px solid var(--input-border); box-shadow: var(--shadow-soft); border-radius: var(--radius-sharp) !important; } /* =========================== Overrides: Rounded cards + Title bar + Button style =========================== */ :root{ --card-radius: 12px; --card-radius-lg: 16px; --card-padding: 12px; --title-bar-bg1: #0b4a6f; --title-bar-bg2: #0a3f5a; --button-blue-1: #0b4a6f; --button-blue-2: #0a4660; --button-radius-pill: 12px; } /* Rounded card container */ .category_products_grid_card, .fasty_product_card, .category_products_grid_card .card-inner, .fasty_product_card .card-inner { border-radius: var(--card-radius) !important; overflow: hidden !important; border: 1px solid rgba(15,23,42,0.06) !important; box-shadow: 0 10px 30px rgba(10,20,30,0.06) !important; background: var(--panel-bg) !important; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } /* Image area */ .fasty_product_card_img, .category_products_grid_card .product-media, .category_products_grid_card .product-image, .fasty_product_card .product-media, .fasty_product_card .product-image { height: 170px !important; width: 100%; display: block; object-fit: cover; border-top-left-radius: var(--card-radius) !important; border-top-right-radius: var(--card-radius) !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; overflow: hidden; background-color: #f6f6f6; } .category_products_grid_card img, .fasty_product_card img { display:block; width:100%; height:100%; object-fit:cover; } /* Card body */ .category_products_grid_card .card-body, .fasty_product_card .card-body, .category_products_grid_card .product-body, .fasty_product_card .product-body { padding: 14px 12px 16px 12px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; background: transparent; } /* Title bar at bottom */ .category_products_grid_card .title-bar, .fasty_product_card .title-bar, .category_products_grid_card .product-title, .fasty_product_card .product-title { width: 100%; background: linear-gradient(180deg, var(--title-bar-bg1), var(--title-bar-bg2)); color: #fff; text-align:center; padding: 12px 10px; font-weight:800; font-size:15px; box-sizing:border-box; border-bottom-left-radius: var(--card-radius) !important; border-bottom-right-radius: var(--card-radius) !important; margin-top: auto; display:flex; align-items:center; justify-content:center; } .category_products_grid_card .product-title, .fasty_product_card .product-title { display:block; line-height:1.2; max-height:2.6em; overflow:hidden; padding: 0 6px; word-break:break-word; } /* Price */ .category_products_grid_card .price, .fasty_product_card .price { color: var(--title-bar-bg1); font-weight:800; font-size:16px; margin-top:6px; } /* Add to cart button - pill style */ .category_products_grid_card .add_to_cart_btn, .fasty_product_card .fasty_product_card_btn, .category_products_grid_card .fasty_product_card_btn { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; width: 100% !important; padding: 12px 16px !important; border-radius: var(--button-radius-pill) !important; background: linear-gradient(180deg, var(--button-blue-1), var(--button-blue-2)) !important; color: #ffffff !important; font-size: 15px !important; font-weight: 800 !important; text-decoration: none !important; border: none !important; box-shadow: 0 10px 28px rgba(3,26,38,0.12) !important; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease !important; cursor: pointer !important; } .category_products_grid_card .add_to_cart_btn:hover, .fasty_product_card .fasty_product_card_btn:hover, .category_products_grid_card .fasty_product_card_btn:hover { transform: translateY(-3px); box-shadow: 0 18px 46px rgba(3,26,38,0.18); } .category_products_grid_card .add_to_cart_btn.selected, .fasty_product_card .fasty_product_card_btn.selected, .category_products_grid_card .add_to_cart_btn:active, .fasty_product_card .fasty_product_card_btn:active{ background: linear-gradient(180deg, var(--accent-red), var(--accent-red-2)) !important; box-shadow: 0 12px 34px rgba(215,55,63,0.14) !important; transform: translateY(0) !important; } .category_products_grid_card .card-inner, .fasty_product_card .card-inner { overflow:visible; } @media (max-width:480px){ .fasty_product_card_img, .category_products_grid_card .product-media, .category_products_grid_card .product-image { height: 140px !important; } .category_products_grid_card .title-bar, .fasty_product_card .title-bar { padding:10px; font-size:14px; } .category_products_grid_card, .fasty_product_card { border-radius: 10px !important; } } .checkout_buy_now { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 32px; font-size: 16px; font-weight: 500; color: #ffffff; background: linear-gradient(to right, #dc2626, #b91c1c); border: 1px solid transparent; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); cursor: pointer; transition: all 200ms ease-in-out; width: 100%; transform: translateY(0); outline: none; } Social Floating Buttons

الصفحات