:root { --vesna-cart-highlight-bg: #f93e7c; --vesna-cart-highlight-text: #ffffff; } .mini-cart-item { position: relative; } .mini-cart-item.updating { opacity: 0.6; pointer-events: none; } .item-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; background: rgba(255, 255, 255, 0.9); border-radius: 50%; padding: 10px; } .custom-mini-cart::-webkit-scrollbar, .mini-cart-content::-webkit-scrollbar { width: 2px; } .custom-mini-cart::-webkit-scrollbar-thumb, .mini-cart-content::-webkit-scrollbar-thumb { background-color: #000; border-radius: 4px; } .custom-mini-cart::-webkit-scrollbar-track, .mini-cart-content::-webkit-scrollbar-track { background-color: #f1f1f1; } .custom-mini-cart { position: fixed; top: 0; right: 0; width: 730px !important; height: 100vh; background: #fff; box-shadow: -2px 0 20px rgba(0, 0, 0, 0.1); z-index: 9999; transform: translateX(100%); transition: transform 0.3s ease-in-out; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding-left: 80px; padding-right: 80px; } .custom-mini-cart.position-left { left: 0; right: auto; transform: translateX(-100%); } .custom-mini-cart.active { transform: translateX(0); padding-left: 80px; padding-right: 80px; } .custom-mini-cart.active:has(.clear-cart-overlay.active) { overflow: hidden; } .mini-cart-header { padding: 0; position: relative; top: 0; background: #fff; z-index: 10; margin-top: 30px; } .custom-mini-cart.is-empty .header-controls { justify-content: flex-end; } #mini-cart-coupon { font-weight: 400; line-height: 15px; letter-spacing: 0.09em; text-align: left; text-transform: uppercase; border: 1px dashed #000; min-height: 50px; } .custom-mini-cart.is-empty .mini-cart-content { overflow-y: hidden; } .header-controls { display: flex; justify-content: space-between; margin-bottom: 15px; } .custom-mini-cart .vesna_cart-widgets-container { margin-top: 80px; overflow: hidden; flex-shrink: 0; margin-bottom: 50px; } .vesna_cart-products-widget { margin: 15px 0; display: block; height: 100%; } .vesna_cart-products-widget.vesna_cart-swiper-mode { position: relative; height: 100%; } #vesna_cart-widget-recommendations { height: 100%; min-height: 170px; } .custom-mini-cart .vesna_cart-product-recommendations { padding: 20px 0; border-top: 1px solid #eee; } .vesna_cart-product-recommendations h3 { font-size: 16px; margin-bottom: 15px; color: #333; font-weight: 600; } .vesna_cart-products-widget .swiper-container, .vesna_cart-products-widget .vesna_cart-swiper-container { padding: 0; margin: 0; max-width: 725px; width: 100%; margin: 0 auto; } body .vesna_cart-products-widget .swiper-slide { width: calc(33% - 18.5px) !important; } .vesna_cart-products-widget .product-grid-item img { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; } .vesna_cart-products-widget .product-grid-item .product-element-bottom { padding: 8px 4px; } .vesna_cart-products-widget .product-grid-item h3 { font-size: 12px; line-height: 1.3; margin: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vesna_cart-products-widget .product-grid-item .wrap-price { font-size: 12px; font-weight: 600; } .vesna_cart-products-widget .swiper-button-prev, .vesna_cart-products-widget .swiper-button-next, .vesna_cart-products-widget .swiper-pagination { display: none !important; } .vesna_cart-products-widget .vesna_cart-loader-wrapper { text-align: center; padding: 20px; } .vesna_cart-products-widget .vesna_cart-loading-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid #f3f3f3; border-top: 2px solid #333; border-radius: 50%; animation: vesna_cart_spin 1s linear infinite; } @keyframes vesna_cart_spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .custom-mini-cart.active { padding-left: 15px; padding-right: 15px; padding-bottom: 50px; } body .vesna_cart-products-widget .swiper-slide { width: calc(33% - 15.5px) !important; } .vesna_cart-products-widget .product-grid-item img { height: 80px; } .vesna_cart-product-recommendations h3 { font-size: 14px; } } .header-content { display: flex; justify-content: flex-start; align-items: center; } .cart-title { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 10px; flex: 1; color: #000; font-size: 24px; font-weight: 400; text-transform: uppercase; font-size: 27px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.1; } .cart-title-total { font-weight: 500; } .header-controls .button-group { display: flex; align-items: center; gap: 10px; } .clear-cart-btn { background: none; border: none; cursor: pointer; color: #666; transition: color 0.3s; padding: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; } .clear-cart-btn:hover { color: #e74c3c; } .clear-cart-btn svg { width: 27px; height: 27px; stroke: currentColor; fill: none; overflow: visible !important; } .cart-icon { font-size: 24px; } .items-count { font-size: 14px; font-weight: normal; font-size: 18px; font-weight: 500; letter-spacing: normal; line-height: 1.1; text-transform: lowercase; } .items-count:before { content: "/ "; } .items-count:after { content: " kom."; } .close-mini-cart { background: none; border: none; cursor: pointer; color: #666; transition: color 0.3s; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .close-mini-cart:hover { color: #000; } .close-mini-cart svg { width: 27px; height: 27px; stroke: currentColor; fill: none; overflow: visible !important; } .free-shipping-progress { margin-top: 15px; } .progress-text { font-size: 13px; color: #000; margin-top: 15px; font-size: 16px; } .progress-bar { height: 2px; background-color: #e0e0e0 !important; overflow: hidden; } .progress-fill { height: 100%; background: #000; transition: width 0.3s ease; } .free-shipping-success { margin-top: 0; color: var(--vesna-cart-highlight-text); font-size: 14px; margin-bottom: 0; display: inline-block; background-color: var(--vesna-cart-highlight-bg); margin: 0; padding: 3px 15px; } .free-shipping-success > * { margin-bottom: 0; } .mini-cart-content { overflow-y: auto; transition: height 0.3s ease-in-out; flex-shrink: 0; } .empty-cart { display: flex; flex-direction: column; } .empty-cart-icon { font-size: 80px; margin-bottom: 30px; opacity: 0.4; color: #ccc; } .empty-cart-title { font-size: 45px; margin: 10px 0 15px 0; font-weight: 500; letter-spacing: -0.2px; line-height: 1.1; } .cart-highlight { background-color: var(--vesna-cart-highlight-bg); color: var(--vesna-cart-highlight-text); padding: 0 5px 2px 5px; border: 1px solid var(--vesna-cart-highlight-bg); } .cart-highlight:hover { color: #000; background-color: #fff; border: 1px solid var(--vesna-cart-highlight-bg); } .empty-cart-description { font-size: 16px; margin: 0; line-height: 1.5; } .empty-cart-buttons { display: flex; gap: 15px; flex-direction: column; width: 100%; height: 50px; margin-bottom: 50px; } .custom-mini-cart:not(.is-empty) .empty-cart-buttons { display: none !important; } .empty-cart-buttons .btn-continue-shopping { display: flex; padding: 18px 53px; justify-content: center; align-items: center; gap: 6px; min-height: 54px; border: 1px solid #000; background: var(--black, #000); color: #fff; font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; cursor: pointer; margin-bottom: 21px; } .btn-continue-shopping:hover { color: #fff !important; background: #2c2c2c !important; border: 1px solid #2c2c2c !important; } .custom-mini-cart .mini-cart-items { list-style: none; padding: 0; margin: 0; } .custom-mini-cart .mini-cart-item { display: flex; gap: 15px; padding: 20px 0; border-bottom: 1px solid #f0f0f0; position: relative; transition: all 0.3s ease-out; margin: 0; } .custom-mini-cart .mini-cart-item:last-child { padding-bottom: 0; } .custom-mini-cart .mini-cart-item:hover .item-actions { opacity: 1; visibility: visible; } .custom-mini-cart .item-actions { position: absolute; top: 18px; right: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; opacity: 1; visibility: visible; transition: all 0.3s ease; } .mini-cart-item:last-child { border-bottom: none; } .custom-mini-cart .product-thumbnail { flex-shrink: 0; width: 80px; height: 80px; align-content: center; position: relative; margin-top: 10px; } .custom-mini-cart .product-count-quantity { bottom: 2px; font-size: 14px; font-weight: 500; position: absolute; right: 2px; } .custom-mini-cart .product-thumbnail img { width: 100%; height: 80px; object-fit: contain; } .custom-mini-cart .product-details { flex: 1; } .custom-mini-cart .product-name { margin: 0 0 8px 0; font-size: 14px; line-height: 1.3; overflow: hidden; } .custom-mini-cart .product-name .custom-product-name { display: flex !important; flex-direction: column; font-size: 18px; max-width: 300px; } .custom-mini-cart .product-name .specification { font-size: 12px; line-height: 1.3; } .custom-mini-cart .product-name a { color: #000; text-decoration: none; transition: color 0.3s; font-size: 16px; } .custom-mini-cart .product-name a:first-child { pointer-events: none; color: #4d4d4d; text-transform: uppercase; } .custom-mini-cart .product-name .custom-product-name a:nth-child(2):hover { text-decoration: underline; } .custom-mini-cart .product-name .custom-product-name a:nth-child(3) { font-size: 18px; font-weight: 400; } .custom-mini-cart .product-name a:hover { color: rgb(51, 51, 51, 65%); } .custom-mini-cart .variation-item { font-size: 12px; color: #666; margin: 2px 0; line-height: 1.3; } .custom-mini-cart .variation-item span { font-weight: 500; color: #333; } .product-subtotal .price { display: inline-flex; align-items: center; gap: 5px; flex-direction: row-reverse; } .product-subtotal .price del { color: #999; font-size: 16px; text-decoration: line-through; font-weight: normal; } .product-subtotal .price ins { text-decoration: none; color: #e74c3c; font-weight: 600; font-size: 18px; } .custom-mini-cart.dark-mode .variation-item { color: #ccc; } .custom-mini-cart.dark-mode .variation-item span { color: #fff; } .product-price-quantity { display: flex; justify-content: flex-end; align-items: center; } .product-price-quantity .price del { color: #999; font-weight: normal; margin-right: 5px; text-decoration: line-through; } .product-price-quantity .price ins { text-decoration: none; color: #e74c3c; font-weight: 600; } .quantity-controls { display: flex; align-items: center; overflow: hidden; } .item-actions .quantity-wrap { display: flex; align-items: center; gap: 26px; } .item-actions .quantity-controls { display: flex; align-items: center; overflow: hidden; background: #fff; } .item-actions .qty-btn { background: black; width: 20px; height: 20px; cursor: pointer; transition: background 0.3s; display: flex; justify-content: center; padding: 0; min-height: auto; } .item-actions .qty-btn svg, .item-actions .remove-icon svg { display: inline-block; fill: #fff; stroke: #fff; width: 10px; height: 10px; } .item-actions .qty-btn:hover { background: #e0e0e0; } .item-actions .qty-input { width: 32px; text-align: center; border: none; height: 24px; font-size: 16px; background: #fff; pointer-events: none; } .qty-btn { background: transparent; border: none; width: 30px; height: 30px; cursor: pointer; transition: background 0.3s; font-size: 16px; } .qty-btn:hover { background: #2c2c2c !important; } .qty-btn.disabled, .qty-btn:disabled { opacity: 0.4; cursor: not-allowed; background: #2c2c2c !important; color: #fff !important; } .qty-btn.disabled:hover, .qty-btn:disabled:hover { background: #2c2c2c !important; } .qty-input { width: 40px; text-align: center; border: unset; border: none; height: 30px; font-size: 14px; } .qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .qty-input[type="number"] { -moz-appearance: textfield; } .qty-input::-moz-number-spin-box { display: none; } .custom-mini-cart .product-subtotal { font-weight: 600; font-size: 18px; } .item-actions .remove-item { text-decoration: none; font-size: 18px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: color 0.3s; border-radius: 30px; } .item-actions .remove-item:hover { color: #2c2c2c !important; } .mini-cart-footer { margin-top: 50px; } .cart-totals { margin-bottom: 20px; } .custom-mini-cart .total-row { justify-content: flex-end; display: flex; align-items: end; margin-bottom: 12px; font-size: 14px; line-height: 1.2; } .custom-mini-cart .total-row.discount-row .total-value, .custom-mini-cart .total-row.coupon-discount-row .total-value { color: #e60022; } .custom-mini-cart .total-row.discount-row .total-value > *, .custom-mini-cart .total-row.coupon-discount-row .total-value > * { color: #e60022; } .custom-mini-cart .total-row .total-label { flex-shrink: 0; font-size: 16px; } .custom-mini-cart .total-row .total-dots { flex: 1; height: 1px; min-width: 25px; position: relative; } .custom-mini-cart .total-row .total-dots:after { content: ""; display: block; height: 1px; width: 100%; background-image: linear-gradient( 90deg, currentcolor, currentcolor 25%, transparent 0, transparent ); background-position: bottom; background-repeat: repeat-x; background-size: 4px 1px; color: #000; } .custom-mini-cart .total-row .total-value { flex-shrink: 0; margin-left: 8px; font-weight: 500; } .custom-mini-cart .total-row-final { padding-top: 12px; margin-top: 12px; font-size: 16px; margin-bottom: 27px; } .custom-mini-cart .total-row-final .total-value { font-weight: 600; font-size: 20px; } .custom-mini-cart .coupon-form { position: relative; margin-bottom: 50px; } .custom-mini-cart .coupon-form input { width: 100%; padding: 12px 50px 12px 16px; border: 1px solid #ddd; font-size: 14px; transition: border-color 0.3s, background 0.3s; } .custom-mini-cart .coupon-form input:focus { outline: none; border-color: #000; background: #fff; } .custom-mini-cart .coupon-form.has-coupon input { border: 1px solid #000; background: #f9f9f9; cursor: default; } .custom-mini-cart .coupon-form button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; padding: 0; min-height: auto; background: transparent; } .custom-mini-cart .coupon-form button:hover { background-color: #2c2c2c !important; color: unset; } .custom-mini-cart .coupon-form button svg { width: 24px; height: 24px; stroke: white; fill: none; } .custom-mini-cart .coupon-form.has-coupon button { background: #000; width: 24px; height: 24px; } .custom-mini-cart .coupon-form.has-coupon button svg { width: 14px; height: 14px; } .custom-mini-cart .cart-buttons { display: flex; gap: 10px; } .custom-mini-cart .cart-buttons .btn { flex: 1; height: 52px; display: flex; gap: 15px; box-shadow: unset !important; width: calc(100% - 55px); outline: 0 !important; border: 1px solid #000; background-color: #000; color: #fff; font-weight: 400; } .custom-mini-cart .btn-checkout { height: 52px; display: flex; gap: 15px; box-shadow: unset !important; width: calc(100% - 55px); outline: 0 !important; border: 1px solid #000; background-color: #000; color: #fff; font-weight: 400; } .custom-mini-cart .cart-buttons .btn:hover { background: #2c2c2c !important; border: 1px solid #2c2c2c !important; color: #fff; } .mini-cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0000004d; z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.3s; } .mini-cart-overlay.active { opacity: 1; visibility: visible; } .mini-cart-loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; z-index: 999; } @media (max-width: 768px) { .custom-mini-cart { width: 100vw !important; max-width: none !important; height: 100vh !important; border-radius: 0 !important; } .mini-cart-header { top: 13px; z-index: 100; } .header-controls { flex-direction: column-reverse; gap: 10px; } .button-group { justify-content: flex-end; order: 1; } .close-mini-cart { font-size: 24px; width: 28px; height: 28px; } .mini-cart-header .wc-share-cart-button { padding: 6px; background-color: transparent; } .mini-cart-header .wc-share-cart-button svg { width: 16px; height: 16px; } #wc-share-cart-result-mini { margin-top: 8px; font-size: 11px; } #wc-share-cart-result-mini .wc-share-cart-message { padding: 6px 8px; font-size: 11px; margin: 4px 0; } #wc-share-cart-result-mini .wc-share-cart-url { flex-direction: column; gap: 6px; } #wc-share-cart-result-mini .wc-share-cart-url input { font-size: 10px; padding: 4px 6px; width: 100%; } #wc-share-cart-result-mini .wc-share-cart-url button { padding: 4px 8px; font-size: 10px; width: 100%; } #wc-share-cart-result-mini .wc-share-social-buttons { margin-top: 6px; gap: 4px; justify-content: center; } #wc-share-cart-result-mini .wc-share-social { padding: 3px 6px; font-size: 14px; min-width: 28px; height: 28px; } .mini-cart-content { overflow-y: auto; -webkit-overflow-scrolling: touch; } .mini-cart-item { padding: 12px 0; gap: 10px; gap: 10px !important; } .product-thumbnail { width: 50px; flex-shrink: 0; margin-right: 0 !important; max-width: 72px !important; } .product-thumbnail img { height: 72px !important; width: 72px !important; } .product-details { flex: 1; min-width: 0; } .product-name { font-size: 14px; line-height: 1.3; margin-bottom: 6px; } .variation-item { font-size: 11px; margin: 1px 0; } .product-price-quantity { align-items: flex-start; gap: 8px; margin-top: 8px; } .qty-btn { width: 26px; height: 26px; font-size: 14px; } .qty-input { width: 35px; height: 26px; font-size: 12px; } .custom-mini-cart .product-subtotal .amount { font-size: 16px !important; align-self: flex-end; } .remove-item { top: 12px; right: 0; font-size: 18px; width: 18px; height: 18px; } .mini-cart-footer { bottom: 0; margin-top: 25px; } .cart-totals { margin-bottom: 15px; } .total-row.total-row-final { justify-content: space-between; } .total-row.total-row-final .total-label { margin-right: 0; } .total-row { font-size: 13px; margin-bottom: 8px; } .total-row.subtotal { font-size: 14px; padding-top: 8px; margin-top: 8px; } .coupon-form { gap: 8px; margin-bottom: 31px !important; } .coupon-form input { padding: 6px 10px; font-size: 13px; } .cart-buttons .btn { padding: 10px 16px; font-size: 13px; text-align: center; } .free-shipping-progress { margin-top: 10px; } .progress-text { margin-top: 10px; margin-bottom: 10px; } .progress-bar { height: 3px; } .empty-cart-icon { font-size: 48px; margin-bottom: 15px; } .empty-cart p { font-size: 14px; margin-bottom: 15px; } .btn-continue-shopping { padding: 10px 20px; font-size: 13px; } } @media (max-width: 480px) { .close-mini-cart { font-size: 22px; width: 26px; height: 26px; } .mini-cart-content { padding: 8px 0; } .product-thumbnail { width: 45px; } .product-thumbnail img { height: 45px; width: 45px; } .variation-item { font-size: 10px; } .qty-btn { width: 24px; height: 24px; font-size: 13px; } .qty-input { width: 30px; height: 24px; font-size: 11px; } .total-row { font-size: 12px; } body .vesna_cart-products-widget .swiper-slide { width: calc(50% - 10px) !important; } .total-row.subtotal { font-size: 13px; } .mini-cart-header .wc-share-cart-button { padding: 5px; } .mini-cart-header .wc-share-cart-button svg { width: 14px; height: 14px; } #wc-share-cart-result-mini .wc-share-cart-message { padding: 4px 6px; font-size: 10px; } #wc-share-cart-result-mini .wc-share-cart-url input { font-size: 9px; padding: 3px 5px; } #wc-share-cart-result-mini .wc-share-cart-url button { padding: 3px 6px; font-size: 9px; } #wc-share-cart-result-mini .wc-share-social { padding: 2px 4px; font-size: 12px; min-width: 24px; height: 24px; } } .cart-notification { position: fixed; top: 20px; right: 20px; padding: 15px 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 99999; animation: slideInNotification 0.3s ease; font-size: 14px; max-width: 320px; font-weight: 400; } .cart-share-notification { position: fixed; top: 20px; background-color: #000; right: 20px; padding: 15px 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 99999; animation: slideInNotification 0.3s ease; font-size: 14px; max-width: 320px; color: #fff; font-weight: 400; } .cart-notification.success { background: #000; color: white; } .cart-notification.error { background: #f44336; color: white; } .cart-notification.warning { background: #ff9800; color: white; } .shipping-progress-wrapper { margin-top: 15px; min-height: 43px; margin-bottom: 15px; } .mini-cart-header.scrolled { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .custom-mini-cart.dark-mode .mini-cart-loading { background: rgba(26, 26, 26, 0.9); } body.mini-cart-open { overflow: hidden; } @keyframes slideInNotification { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .wc-share-cart-button { background-color: #0073aa; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin: 20px 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s ease; font-weight: 500; } .wc-share-cart-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .wc-share-cart-button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; } .mini-cart-header .wc-share-cart-button { padding: 8px; margin: 0; background-color: transparent !important; display: flex; align-items: center; justify-content: center; gap: 0; } .mini-cart-header .wc-share-cart-button svg { width: 27px; height: 27px; } .mini-cart-header .clear-cart-btn, .mini-cart-header .close-mini-cart { background-color: transparent !important; } #wc-share-cart-result-mini { max-width: 100%; font-size: 12px; } #wc-share-cart-result-mini .wc-share-cart-message { padding: 8px 10px; margin: 5px 0; font-size: 12px; } #wc-share-cart-result-mini .wc-share-cart-url { flex-direction: column; gap: 8px; } #wc-share-cart-result-mini .wc-share-cart-url input { font-size: 11px; padding: 6px 8px; } #wc-share-cart-result-mini .wc-share-cart-url button { padding: 6px 12px; font-size: 11px; } #wc-share-cart-result-mini .wc-share-social-buttons { margin-top: 8px; gap: 6px; } #wc-share-cart-result-mini .wc-share-social { padding: 4px 8px; font-size: 16px; min-width: 32px; height: 32px; } .wc-share-cart-message { margin: 10px 0; padding: 12px 15px; border-radius: 4px; font-size: 14px; line-height: 1.5; } .wc-share-cart-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .wc-share-cart-message.success.cart-changed { background-color: #fff3cd; color: #856404; border: 1px solid #ffeaa7; } .wc-share-cart-message.success.cart-changed:before { content: "🔄 "; } .wc-share-cart-message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .wc-share-cart-url { display: flex; align-items: center; margin: 10px 0; gap: 10px; } .wc-share-cart-url input { flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-family: monospace; font-size: 13px; background-color: #f8f9fa; } .wc-share-cart-url input:focus { outline: none; border-color: #0073aa; background-color: white; } .wc-share-cart-url button { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: all 0.3s ease; white-space: nowrap; } .wc-share-cart-url button:hover { background-color: #218838; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(40, 167, 69, 0.3); } .wc-share-social-buttons { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; } .wc-share-social { padding: 8px 14px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; font-size: 20px; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; } .wc-share-social:hover { background: #f0f0f0; transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .wc-share-social[data-network="facebook"]:hover { background-color: #3b5998; color: white; border-color: #3b5998; } .wc-share-social[data-network="twitter"]:hover { background-color: #1da1f2; color: white; border-color: #1da1f2; } .wc-share-social[data-network="whatsapp"]:hover { background-color: #25d366; color: white; border-color: #25d366; } .wc-share-social[data-network="email"]:hover { background-color: #ea4335; color: white; border-color: #ea4335; } #wc-share-cart-result { margin: 20px 0; padding: 20px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; } #wc-share-cart-result:empty { display: none; } .wc-share-cart-container { margin: 30px 0; padding: 20px 0; border-top: 1px solid #e9ecef; } @media (max-width: 768px) { .wc-share-cart-url { flex-direction: column; align-items: stretch; } .wc-share-cart-url input { margin-bottom: 10px; } .wc-share-cart-url button { width: 100%; } .wc-share-social-buttons { justify-content: center; } } @media (prefers-color-scheme: dark) { .wc-share-cart-url input { background-color: #2d3748; color: #e2e8f0; border-color: #4a5568; } .wc-share-social { background-color: #2d3748; color: #e2e8f0; border-color: #4a5568; } .wc-share-social:hover { background-color: #4a5568; } #wc-share-cart-result { background-color: #2d3748; border-color: #4a5568; color: #e2e8f0; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #wc-share-cart-result > * { animation: fadeInUp 0.3s ease-out; } .wc-share-social-buttons.hidden { display: none !important; } .mini-cart-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; } .vesna-loading { display: inline-block; width: 34px; height: 32px; border-radius: 50%; vertical-align: middle; animation: spin 1s linear infinite; background: url("https://vesna.rs/jibunic/assets/img/vesna-icon.svg") no-repeat center center; background-size: cover; } .mini-cart-header .wc-share-cart-button .vesna-loading { width: 27px; height: 27px; } .wc-share-cart-button .vesna-loading { width: 16px; height: 16px; border-width: 2px; } @keyframes vesna-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 768px) { .vesna_cart-widgets-container { margin-bottom: 0; } .mini-cart-header { margin-top: 0; padding: unset; } } .clear-cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #ffff; backdrop-filter: blur(2px); z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .clear-cart-overlay.active { opacity: 1; visibility: visible; overflow: hidden; } .clear-cart-confirmation { padding: 0 15px !important; max-width: 400px; width: 100%; transform: scale(0.9); transition: transform 0.3s ease; } .clear-cart-overlay.active .clear-cart-confirmation { transform: scale(1); } .confirmation-title { font-size: 45px; font-weight: 600; margin: 0 0 12px 0; color: #000; } .confirmation-description { font-size: 16px; color: #000; line-height: 1.5; margin: 0 0 50px 0; } .confirmation-buttons { display: flex; gap: 12px; flex-direction: column; } .confirm-btn { flex: 1; padding: 12px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; position: relative; min-height: 44px; display: flex; align-items: center; justify-content: center; } .confirm-btn.delete-btn { background: #000; color: white; min-height: 50px; flex: 1; height: 52px; display: flex; gap: 15px; box-shadow: unset !important; outline: 0 !important; border: 1px solid #000; background-color: #000; color: #fff; font-weight: 400; } .confirm-btn.delete-btn:hover { background: #fff; border: 1px solid #000; } .confirm-btn.cancel-btn { background: #ffff; min-height: 50px; flex: 1; height: 52px; display: flex; gap: 15px; box-shadow: unset !important; outline: 0 !important; border: 1px solid #000; color: #000; font-weight: 400; } .confirm-btn.cancel-btn:hover { background: #2c2c2c; color: #fff; } .btn-text { display: flex; align-items: center; justify-content: center; } .btn-loading { display: none; } .confirm-btn.loading .btn-label { display: none; } .confirm-btn.loading .btn-loading { display: flex; } .loading-spinner { display: flex; gap: 4px; align-items: center; } .spinner-dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; animation: pulse 1.4s ease-in-out infinite both; } .spinner-dot:nth-child(1) { animation-delay: -0.32s; } .spinner-dot:nth-child(2) { animation-delay: -0.16s; } @keyframes pulse { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } .empty-cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(248, 248, 248, 0.95); backdrop-filter: blur(2px); z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .empty-cart-overlay.active { opacity: 1; visibility: visible; } .empty-cart-notification { background: white; border-radius: 12px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); max-width: 400px; width: 90%; text-align: center; transform: scale(0.9); transition: transform 0.3s ease; } .empty-cart-overlay.active .empty-cart-notification { transform: scale(1); } .notification-content .empty-cart-icon { font-size: 60px; margin-bottom: 15px; opacity: 0.7; } .notification-title { font-size: 20px; font-weight: 600; margin: 0 0 12px 0; color: #333; } .notification-description { font-size: 14px; color: #666; line-height: 1.5; margin: 0 0 25px 0; } .notification-buttons { display: flex; gap: 12px; flex-direction: column; } .confirm-btn.primary-btn { background: #007cba; color: white; text-decoration: none; } .confirm-btn.primary-btn:hover { background: #005a87; } .confirm-btn.secondary-btn { background: #f8f8f8; color: #333; border: 1px solid #ddd; } .confirm-btn.secondary-btn:hover { background: #eaeaea; } .custom-mini-cart .vesna_cart-widgets-container .typesense-widget-title { font-size: 18px; text-align: left !important; margin-bottom: 0; margin-top: 0; display: flex; margin: 0; vertical-align: middle; font-family: "EuclidSquare"; } .custom-mini-cart .vesna_cart-widgets-container .product .product-wrapper .brand_link { font-size: 14px; } .custom-mini-cart .mini-cart-content .quantity-wrap button.qty-btn { background-color: black; color: white; border-radius: 20px; font-weight: 400; } .custom-mini-cart .mini-cart-content .quantity-wrap .qty-input { border: unset; font-weight: 600; margin-top: 1px; } .custom-mini-cart .mini-cart-content .quantity-wrap button.qty-btn:hover { background-color: #2c2c2c !important; color: #fff; } .custom-mini-cart .vesna_cart-widgets-container .vesna_cart-widgets-content { position: relative; } .custom-mini-cart .vesna_cart-widgets-container .product-grid-item .vesna-card-cat { line-height: unset; min-height: unset; text-align: left; } .total-value, .total-label { font-size: 16px; } .total-label > * { color: #000; font-size: 18px; font-weight: 500; } .custom-mini-cart .vesna_cart-widgets-container .typesense-navs:not(.typesense-navs-empty) { padding-bottom: unset !important; position: absolute; right: 0; top: -8px; display: flex; } @media screen and (min-width: 768px) { .custom-mini-cart .vesna_cart-widgets-container .vesna-price-buy .vesna-price-wrap { height: 30px; max-width: unset; white-space: nowrap; } .custom-mini-cart .vesna_cart-widgets-container .product-grid-item .product-wrapper .price { flex-wrap: wrap; height: 30px; font-size: 16px; } .custom-mini-cart .vesna_cart-widgets-container .product-grid-item .product-wrapper .price del { margin-left: unset; } } .custom-mini-cart .vesna_cart-widgets-container .product-grid-item .product-catalog-image-wrapper img { padding: 20px; } .custom-mini-cart .vesna_cart-widgets-container .vesna_search-overlay__product .desk-title { font-size: 16px; } @media (max-width: 768px) { .empty-cart-title { font-size: 30px; letter-spacing: -0.4px; } .custom-mini-cart .vesna_cart-widgets-container .product-grid-item .vesna-card-cat { height: 16px; } .custom-mini-cart .product-name .custom-product-name a:nth-child(3) { font-size: 16px; } .mini-cart-item .item-actions { opacity: 1; visibility: visible; } .item-actions .quantity-wrap { gap: 11px; } .clear-cart-confirmation { padding: 0; } .confirmation-title { font-size: 30px; } .confirmation-description { font-size: 16px; } .confirmation-buttons { flex-direction: column; gap: 10px; } .confirm-btn { font-size: 13px; min-height: 40px; } }