.custom-tabs-wrapper { max-width: 1500px; margin: 0 auto; text-align: center; font-family: 'zarin-font'; } .tabs { display: flex; list-style: none; padding: 0; margin-bottom: 20px; gap: 10px; justify-content: center; } .tabs li { width: 100%; background: #ffffff; padding: 18px 5px; border-radius: 12px; cursor: pointer; transition: 0.3s; border: 1px solid #ffffff; display: flex; align-content: center; justify-content: center; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: #54667a; } .tabs li:hover, .tabs li.active { background: #ffcc00; color: #203040; } img.tab-icon { width: 14px; } .tabs-content { display: flex; align-content: center; justify-content: center; align-items: center; } .tab-content { display: none; justify-content: center !important; max-width: 1240px; width: 100%; margin-top: 5px; } .tab-content.active { display: flex; flex-wrap: wrap; gap: 20px; } .product-box { position: relative; text-align: center; max-width: 250px; margin: 0 auto; } .product-box > a img { width: 100px; height: 100px; background: #ffff; padding: 10px; border-radius: 19px; box-shadow: 0px 4px 20px 0px #E4E6F3; } .hover-card { opacity: 0; visibility: hidden; pointer-events: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-20px); transition: opacity 0.3s ease, transform 0.3s ease; width: 340px; background: #fff; border-radius: 16px; box-shadow: 0px 4px 60px 0px hsl(0deg 0% 0% / 20%); padding: 12px; z-index: 999; max-width: 340px; } .product-box:hover .hover-card { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(10px); display: block; top: 100%; } .hover-card:hover { pointer-events: none; } .hover-card-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .hover-icon img { width: 100%; height: auto; border-radius: 12px; object-fit: cover; padding: 0px; } .hover-meta { display: flex; gap: 8px; width: 100%; flex-direction: column; align-content: center; padding: 4px; margin-top: -5px; } .hover-meta .title { font-weight: bold; color: #334155; font-size: 15px; margin-right: auto; text-align: right; } .short-description { font-size: 14px; color: #48566a; margin-bottom: 3px; text-align: justify; letter-spacing: -0.3px; font-weight: 400; line-height: 1.8em; } .zarin-main-container { direction: rtl; width: 100%; border-top: 1px solid #f0f0f2; padding: 5px 0; margin: 0; background: #fff; } .zarin-flex-row { display: flex; align-items: center; justify-content: space-between; list-style: none !important; padding: 0 !important; margin: 0 !important; } .zarin-col { display: flex; flex-direction: column; align-items: center; flex: 1; border-left: 1px solid #f0f0f2; } .zarin-col:last-child { border-left: none; flex: 1.6; align-items: flex-end; padding-right: 8px; } .zarin-val { font-size: 17px; font-weight: 700; line-height: 1.5; font-family: inherit; } .zarin-blue { color: #1976d2; } .zarin-green { color: #0dbd5d; } .zarin-lab { font-size: 12px; color: #81858b; margin-top: 4px; } .zarin-price-stack { display: flex; flex-direction: column; gap: 4px; width: 100%; } .zarin-top-price-row { display: flex; align-items: center; gap: 8px; justify-content: flex-end; height: 22px; } .zarin-old-amt { color: #c4c4c4; font-size: 13px; text-decoration: line-through; } .zarin-badge-new { background: #ef394e; color: #fff; border-radius: 6px; font-size: 14px; padding: 4px 5px 2px; font-weight: 600; line-height: 1; box-shadow: 3px 1px 4px #f1455942; } .zarin-bottom-price-row { display: flex; align-items: center; gap: 4px; justify-content: flex-end; width: 100%; } .zarin-final-amt { font-size: 20px; font-weight: 700; color: #212121; letter-spacing: -0.5px; } .zarin-free-text { font-size: 18px; } .zarin-curr { font-size: 19px; color: #67788b; font-weight: 600; } .zarin-invisible { visibility: hidden; } @media (max-width: 768px) { .hover-card { display: none !important; } } @media (max-width: 500px) { .tab-text { display: none; } }